https://github.com/odilson-dev/shopping-cart
Shopping App, built with React and React Router
https://github.com/odilson-dev/shopping-cart
api component context-api reactjs state-management
Last synced: about 2 months ago
JSON representation
Shopping App, built with React and React Router
- Host: GitHub
- URL: https://github.com/odilson-dev/shopping-cart
- Owner: odilson-dev
- Created: 2024-04-29T18:57:18.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-23T03:12:21.000Z (about 2 years ago)
- Last Synced: 2025-10-09T10:50:58.192Z (8 months ago)
- Topics: api, component, context-api, reactjs, state-management
- Language: JavaScript
- Homepage: https://shopping-cart-7f1.pages.dev/
- Size: 1.14 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Mock Shopping Cart
## Introduction
Shopping Cart is a classic React project that allows users to browse and purchase products using a simulated shopping cart. The application demonstrates the use of React components, state management and routing to create a user-friendly shopping experience.
## Features
- **Home Page**: A welcoming page with images or information to introduce the application.
- **Shop Page**: A page that includes the shopping cart and product listing.
- **Navigation Bar**: Allows navigation between the home page and shop page and displays the number of items currently in the cart.
- **Product Cards**: Individual card elements for each product, including title, input fields for quantity, and an "Add to Cart" button.
- **API Integration**: Fetches shop items from an API such as FakeStore API.
- **Dynamic Cart**: Adjusts the cart's item count as users add products to their cart.
- **Testing**: Thoroughly tested using React Testing Library to ensure reliability.
## Assignment Breakdown
- **Create a new React project**: Set up the project with the appropriate dependencies and folder structure.
- **Design Components**: Plan and design the components and functionalities for the application.
- **Home Page**: Include images or information on the home page.
- **Shop Page**: Implement the shop page with the shopping cart and product listing.
- **Product Cards**: Build individual cards for each product, including inputs for quantity and an "Add to Cart" button.
- **API Integration**: Fetch products from an external API and display them in the shop.
- **Dynamic Cart**: Update the cart item count as users add products to their cart.
- **Testing**: Test the application thoroughly using the React Testing Library.
## Getting Started
1. **Clone the Repository**: Clone this repository to your local machine.
```bash
git clone https://github.com/odilson-dev/shopping-cart.git
```
2. **Navigate to the Project Directory**:
```bash
cd shopping-cart
```
3. **Install Dependencies**:
```bash
npm install
```
4. **Start the Development Server**:
```bash
npm run dev
```
5. **View the Application**: The application will run on [http://localhost:3000](http://localhost:5173).
## Conclusion
Shopping Cart was a great project to practice building a simulated shopping experience with React. By completing this project, i gain experience in component design, state management, routing, API integration, and testing. Customize the application to make it your own and enjoy showcasing your work!
Thank you for exploring this project!