A responsive shopping cart built with React and TypeScript. Features include item quantity management, persistent cart storage with localStorage, and a clean, modular code structure using Context API and custom hooks.
You can try the live version of the Shopping Cart app here:
Live Demo
- Add, remove, and adjust product quantities in the shopping cart
- Persistent cart state saved with
localStorage - Responsive design for mobile and desktop
- Product data loaded dynamically from a JSON file
- Built with reusable and modular React components
- Type-safe development using TypeScript
- Frontend Framework: React
- Language: TypeScript
- State Management: Context API
- Persistence: Custom Hook using
localStorage - Styling: CSS
- Data Source: Local JSON file
- Build Tool: Vite
Before you begin, ensure you have met the following requirements:
- You have installed Node.js (version 14 or higher recommended).
- You have a package manager installed: either npm (comes with Node.js) or Yarn.
- You have a modern web browser (like Chrome, Firefox, Edge, or Safari).
# Clone the repository
git clone https://github.com/Praneeth860/shopping-cart.git
# Navigate to the project folder
cd shopping-cart
# Install the required dependencies
npm install
# Start the development server
npm run dev
# Open your browser and go to http://localhost:5173 to view the appnpm run build- Build for productionnpm run preview- Preview production build
- Thanks to Kyle from WebDevSimplified for the clear and practical design that helped shape this project.
- This project was inspired by various React and TypeScript tutorials that guided me through best practices and state management techniques.
- Thanks to the open-source community for their valuable resources and support.
If you find this project useful, consider showing your support:
-
⭐ Star the repository on GitHub
-
This project is licensed under the MIT License.
Feel free to use, modify, and distribute it with attribution.