https://github.com/samanvith20/shopping-cart
A React-based e-commerce application that displays a list of products, allows users to add items to their cart, and view the cart.
https://github.com/samanvith20/shopping-cart
react-router reactjs redux tailwindcss
Last synced: 5 months ago
JSON representation
A React-based e-commerce application that displays a list of products, allows users to add items to their cart, and view the cart.
- Host: GitHub
- URL: https://github.com/samanvith20/shopping-cart
- Owner: Samanvith20
- Created: 2024-08-15T12:46:50.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-16T06:26:43.000Z (almost 2 years ago)
- Last Synced: 2025-02-09T16:38:42.860Z (over 1 year ago)
- Topics: react-router, reactjs, redux, tailwindcss
- Language: JavaScript
- Homepage: https://shopping-cart-five-gules.vercel.app
- Size: 194 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Shopping Cart
A modern, responsive shopping cart application built with React, Redux, and Tailwind CSS.
## Features
- Product listing with add to cart functionality
- Responsive design for mobile and desktop views
- Dynamic cart management (add, remove, update quantities)
- Checkout process simulation
## Technologies Used
- React
- Redux for state management
- React Router for navigation
- Tailwind CSS for styling
- React Icons for icons
## Getting Started
### Prerequisites
- Reactjs
- Javascript
- npm or yarn
### Installation
1. Clone the repository:
```
git clone https::https://github.com/Samanvith20/Shopping-cart.git
```
2. Navigate to the project directory:
```
cd react-shopping-cart
```
3. Install dependencies:
```
npm install
```
or if you're using yarn:
```
yarn install
```
4. Start the development server:
```
npm start
```
or with yarn:
```
yarn start
```
5. Open [http://localhost:3000](http://localhost:3000) to view the app in your browser.
## Usage
- Browse the product listing on the home page
- Click "Add to Cart" to add items to your shopping cart
- Navigate to the cart page to view your items
- Adjust quantities or remove items as needed
- Click "Proceed to Checkout" to simulate the checkout process
## Project Structure
src/
├── components/
│ ├── ProductListing.js
│ ├── Cartpage.js
│ └── CheckoutPage.js
├── utils/
│ └── Cartslice.js
├── App.js
└── index.js
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details.
## Acknowledgments
- [React](https://reactjs.org/)
- [Redux](https://redux.js.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [React Router](https://reactrouter.com/)
- [React Icons](https://react-icons.github.io/react-icons/)