Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hareem-gohar/e-commerce-store-app

The E-Commerce Store App is a responsive shopping platform built with React, Vite, and Tailwind CSS. It features product browsing, cart management, and state management with React Context API and useReducer, offering a smooth, multi-page user experience.
https://github.com/hareem-gohar/e-commerce-store-app

axios-react context-api custom-hook react-router-dom useeffect-hook useparams-hook usereducer usestate-hook

Last synced: 4 days ago
JSON representation

Host: GitHub
URL: https://github.com/hareem-gohar/e-commerce-store-app
Owner: Hareem-Gohar
Created: 2024-07-19T20:31:07.000Z (4 months ago)
Default Branch: main
Last Pushed: 2024-11-10T16:20:08.000Z (5 days ago)
Last Synced: 2024-11-10T17:26:16.478Z (5 days ago)
Topics: axios-react, context-api, custom-hook, react-router-dom, useeffect-hook, useparams-hook, usereducer, usestate-hook
Language: JavaScript
Homepage:
Size: 4.7 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# E-Commerce Store App

An E-Commerce Store application built using **React**, **Vite**, **Tailwind CSS**, and **React Router**. This project demonstrates the development of a fully functional e-commerce platform, featuring product browsing, cart management, and global state management with **React Context API** and **useReducer**. It is designed to be responsive, ensuring a great user experience across devices.

## Features

- **Product Listing**: Browse and view product details.
- **Shopping Cart**: Add and remove items from the cart, view total price.
- **State Management**: Centralized global state management using React Context and `useReducer`.
- **Responsive Design**: Tailwind CSS ensures that the app works seamlessly on all screen sizes.
- **React Router**: Multi-page navigation for different sections like Home, Product Details, and Cart.
- **Product Filtering**: Sort and filter products based on different criteria (optional feature).

## Tech Stack

- **Frontend**:
- **React**: JavaScript library for building user interfaces.
- **Vite**: Next-generation, fast development server and bundler for React.
- **React Router**: Declarative routing for single-page applications.
- **Tailwind CSS**: Utility-first CSS framework for designing custom and responsive UI components.

- **State Management**:
- **Context API**: React's built-in method to share state globally without prop-drilling.
- **useReducer**: A React hook for managing complex state logic.

- **Others**:
- **Axios**: Promise-based HTTP client for making API requests.

## Getting Started

### Prerequisites

- **Node.js** (>=14.x)
- **npm** or **yarn**

### Installation

1. Clone the repository to your local machine:
```bash
git clone https://github.com/Hareem-Gohar/E-Commerce-Store-App.git
```

2. Navigate into the project folder:
```bash
cd E-Commerce-Store-App
```

3. Install the required dependencies:
```bash
npm install
```

4. Run the app locally:
```bash
npm run dev
```

The app will now be accessible at `http://localhost:3000` in your browser.

## Usage

Once the app is up and running, users can:

- **Browse Products**: View a list of available products.
- **View Product Details**: Click on a product to view more information.
- **Add to Cart**: Add items to the shopping cart and proceed to checkout.
- **Manage Cart**: View items in the cart, remove them, or update the quantity.
- **Responsive Design**: The app automatically adjusts to different screen sizes, ensuring usability on mobile and desktop devices.

## Acknowledgments

- Tailwind CSS for the fantastic utility-first framework.
- React Router for efficient routing.
- React Context API and `useReducer` for managing global state in a React app.
- Axios for handling API requests.