React E-Commerce App

A modern, responsive e-commerce website built with React.js. This project showcases a fully functional online store with product listings, shopping cart, user authentication, and checkout functionality. It's designed as a frontend application that integrates seamlessly with backend services for a complete e-commerce experience.

Features

• Product Catalog: Browse and search through a wide range of products with detailed descriptions and images.
• Shopping Cart: Add, remove, and manage items in your cart with real-time updates.
• User Authentication: Login and register functionality for personalized shopping experiences.
• Responsive Design: Fully responsive layout that works on desktop, tablet, and mobile devices.
• Redux State Management: Efficient state handling for cart and user data.
• Easy Backend Integration: Built to easily connect with REST APIs or backend services.
• Modern UI: Clean, intuitive interface using Bootstrap for styling.

Screenshots

Home Page

The landing page features a hero banner with new arrivals and quick navigation.

Products Page

Browse through different product categories with filtering options:

• All
• Men's Clothing
• Women's Clothing
• Jewelery
• Electronics

Product Showcase:

About Us Page

Learn more about our store and product categories:

Contact Us Page

Get in touch with our support team through the contact form:

User Authentication

Login Page - Existing users can log in with their credentials:

Register Page - New users can create an account:

Run Locally

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn

Installation

1. Clone the project

   git clone https://github.com/Adarsh09675/ReactEcom

2. Go to the project directory

   cd ReactEcom

3. Install dependencies

   npm install

4. Start the development server

   npm start

The app will run on http://localhost:3000.

Build for Production

npm run build

Tech Stack

• React - Frontend framework
• Redux Toolkit - State management
• React Router - Client-side routing
• Bootstrap - CSS framework for responsive design
• Fake Store API - Mock API for product data
• Font Awesome - Icons

Project Structure

ReactEcom/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── components/
│   │   ├── Footer.jsx
│   │   ├── Navbar.jsx
│   │   └── ...
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── Cart.jsx
│   │   └── ...
│   ├── redux/
│   │   ├── store.js
│   │   └── ...
│   └── index.js
├── package.json
└── README.md

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Author

Adarsh Mishra

• GitHub: @Adarsh09675

License

This project is open source and available under the MIT License.