https://github.com/ecopque/shopcart_react
This e-commerce project in React simulates a complete shopping flow, with login , product listing from an API , a persistent shopping cart , and checkout.
https://github.com/ecopque/shopcart_react
css css3 html html5 javascript react react-router reactjs vite vitejs
Last synced: 3 months ago
JSON representation
This e-commerce project in React simulates a complete shopping flow, with login , product listing from an API , a persistent shopping cart , and checkout.
- Host: GitHub
- URL: https://github.com/ecopque/shopcart_react
- Owner: ecopque
- Created: 2025-08-29T21:25:14.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-01T21:03:37.000Z (10 months ago)
- Last Synced: 2025-09-13T01:58:33.117Z (10 months ago)
- Topics: css, css3, html, html5, javascript, react, react-router, reactjs, vite, vitejs
- Language: JavaScript
- Homepage: https://linktr.ee/edsoncopque
- Size: 714 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ShopCart - E-commerce Project with React
Welcome to ShopCart, a complete e-commerce application built with React. This project features a login page, product listing with filters, product details, a persistent shopping cart, and a checkout page.
## Table of Contents
- [Features](#features)
- [Technologies Used](#technologies-used)
- [Getting Started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Screenshots](#screenshots)
## Features
- **Login Page**: User authentication with email and password validation.
- **Product Listing**: Fetches and displays a list of products from the `fakestoreapi.com`.
- **Product Filtering**: Filter products by category.
- **Product Details**: Displays detailed information for each product, including image, title, price, description, and rating.
- **Shopping Cart**: Add and remove products from the cart. The cart persists during the user's session using `localStorage`.
- **Real-time Total**: The total price is updated in real-time as items are added to or removed from the cart.
- **Checkout**: A summary of the purchase with the total price and the option to finalize the order.
## Technologies Used
- **JavaScript**: The primary programming language for the application's logic and interactivity.
- **React**: A JavaScript library for building user interfaces.
- **React Router**: For declarative routing in the application.
- **Vite**: A fast build tool for modern web development.
- **CSS**: For styling the components.
- **HTML**: The standard markup language used to create the structure of the web pages.
## Getting Started
To get a local copy up and running, follow these simple steps.
### Prerequisites
You need to have Node.js and npm (or yarn) installed on your machine.
- [Node.js](https://nodejs.org/)
- [npm](https://www.npmjs.com/get-npm) or [yarn](https://classic.yarnpkg.com/en/docs/install/)
### Installation
1. **Clone the repo**
```sh
git clone [https://github.com/your-username/your-repository.git](https://github.com/your-username/your-repository.git)
```
2. **Navigate to the project directory**
```sh
cd your-repository
```
3. **Install NPM packages**
```sh
npm install
```
4. **Run the development server**
```sh
npm run dev
```
The application will be available at `http://localhost:5173`.
## Screenshots
