🛒 Cart System (React + TypeScript)

🔗 Live Demo: 👉 View Project on Netlify

A fully functional and responsive shopping cart system built with React, TypeScript, and Bootstrap. This project demonstrates clean UI design, state management using the Context API, and local storage persistence. It allows users to browse a product list, add or remove items from their cart, and view real-time cart totals based on quantity and pricing.

---

📌 Features:

• ✅ Add and remove items from cart.
• 📦 Auto-saves cart using localStorage.
• 🔢 Calculates price based on item quantity.
• 💰 Displays total price and total items in cart.
• 📱 Fully responsive layout (Bootstrap 5).
• 💡 Built with strongly typed TypeScript.

---

🧰 Tech Stack:

The following tech stack is used in this project:

• React 19 : JavaScript library for building user interfaces with component-based architecture.
• TypeScript : A strongly typed superset of JavaScript that helps catch errors early and improves code quality.
• React Bootstrap : Bootstrap components rewritten as React components for easy integration with React apps.
• Bootstrap 5 : A responsive CSS framework that provides pre-built UI styles and layout utilities.
• React Router v7 : Handles client-side routing, allowing seamless navigation between pages without full reloads.
• React Icons : A popular icon library offering access to hundreds of SVG icons from various icon sets.

---

📦 Dependencies:

The following dependencies are used in this project:

"dependencies": {
  "bootstrap": "^5.3.7",
  "react": "^19.1.0",
  "react-bootstrap": "^2.10.10",
  "react-dom": "^19.1.0",
  "react-icons": "^5.5.0",
  "react-router-dom": "^7.6.3"
}

📁 Project Structure:

The following structure is used in this project to maintain a clean and modular codebase:

cart-system-typescript/
├── node_modules/
├── public/
├── src/                         
│   ├── assets/                  # Images, icons, and other static assets
│   ├── components/              # Reusable UI components (Navbar, Footer, CartItem, etc.)
│   ├── context/                 # React Context logic (e.g., ShoppingCartContext)
│   ├── data/                    # Static item data (items.json)
│   ├── hooks/                   # Custom React hooks (e.g., useLocalStorage)
│   ├── pages/                   # Route components like Home and About
│   ├── utilities/               # Utility functions (e.g., formatCurrency)
│   ├── App.tsx                  # Main app component
│   └── main.tsx                 # Application entry point
├── .gitignore                   # Git ignored files
├── eslint.config.js
├── index.html                   # Main HTML template
├── LICENSE
├── package-lock.json
├── package.json                 # Project metadata and dependencies
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

---

🚀 Installation & Setup:

Follow these steps to successfully run the project:

1. Clone the repository:

git clone https://github.com/PAIshanMadusha/cart-system-typescript.git

And, navigate to the project directory:

cd cart-system-typescript

2. Install dependencies:

npm install

3. Run the app locally:

npm run dev

📸 System Screenshots:

These screenshots illustrate how the system appears on desktop and mobile devices:

---

   

---

👨‍💻 Created by:

Ishan Madhusha
GitHub: PAIshanMadusha

Feel free to explore my work and get in touch if you'd like to collaborate! 🚀

---

📝 License:

This project is licensed under the MIT License : See the LICENSE file for details.