Skip to content

AliMahmoudDev/React-Ecommerce

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Ecommerce Project

A modern, responsive e-commerce web application built with React.
Browse products by category, search, view details, add to cart, and manage your favorites—all with smooth animations and a clean UI.


🚀 Live Demo

https://react-ecommerce-delta-teal.vercel.app/


Features

  • Product Catalog: Browse products by category, fetched from a remote API.
  • Product Details: View detailed info, images, and similar products.
  • Shopping Cart: Add, remove, and update product quantities. Cart state is saved in localStorage.
  • Favorites List: Mark products as favorites and view them on a dedicated page.
  • Search: Search for products by name or keyword.
  • Responsive Design: Works great on desktop and mobile.
  • Animated Transitions: Smooth page transitions using Framer Motion.
  • Toast Notifications: User feedback for cart and favorite actions.
  • Category Navigation: Browse categories from the header dropdown.
  • Contact & About Pages: Get in touch or learn more about the project.
  • Modern UI: Clean, accessible, and mobile-friendly interface.

Tech Stack


Folder Structure

src/
  App.jsx
  main.jsx
  index.css
  components/
    AutoTop.jsx
    PageTransition.jsx
    Slider.jsx
    context/
      CardContext.jsx
    header/
      Topheader.jsx
      Bottomheader.jsx
      header.css
      SearchBox.jsx
    loading/
      Loading.jsx
    slideProduct/
      Product.jsx
      SlideProduct.jsx
      slide-product.css
  img/
    banner_Hero1.jpg
    banner_Hero2.jpg
    banner_Hero3.jpg
    icon.png
    logo.png
  pages/
    home/
      Home.jsx
      home.css
    category page/
      CategoryPage.jsx
      category.css
    cart/
      Cart.jsx
      cart.css
    favorites/
      Favorites.jsx
    contact/
      Contact.jsx
      contact.css
    about/
      About.jsx
      about.css
    search/
      Search.jsx
    ProductDetails.jsx

How It Works

  • State Management: Uses React Context for cart and favorites, persisted in localStorage.
  • Routing: Uses React Router DOM for navigation.
  • Animations: Page transitions and UI feedback with Framer Motion.
  • API: Fetches product and category data from dummyjson.com.

Getting Started

  1. Install dependencies:

    npm install
  2. Run the development server:

    npm run dev
  3. Open your browser:
    Visit http://localhost:5173 (or the port shown in your terminal).


Customization

  • Add more categories: Edit the categories array in src/pages/home/Home.jsx.
  • Change theme color: Edit --main-color in src/index.css or header.css.
  • Extend search: Implement advanced search logic in SearchBox.jsx and Search.jsx.

Credits


License

This project is for educational/demo purposes.
Feel free to use and extend it for your own learning or portfolio!

About

No description, website, or topics provided.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors