Building E-Commerce Product Catalog with React, Tailwind CSS, and React Context API

Home Page Component

• Displays products from the categories Best Sellers and New Arrivals.

• Allows users to add available products to their shopping cart with a notification message.

• Prevents users from adding out-of-stock items to the cart.

• Links to the detailed Product Page for individual product views.
   

Product Page Component

• Displays comprehensive details of a product based on its ID.

• Shows an "Out of Stock" message and disables the "Add to Cart" button for unavailable items.

• Includes options to:

  • Add to Cart for available items.

  • Increase product quantity via a "+" button.

  • Decrease product quantity via a "-" button, automatically removing the product when the quantity reaches zero.

​

Collection Page Component

• Features a catalog with advanced filtering and sorting options:

  • Main Categories: New Arrivals, Best Sellers, On Sale.

  • Subcategories: Wrist Watches, Headphones, Smart Watches, Bluetooth Speakers.

  • Sorting options: Price Low to High, Price High to Low.

  • Search functionality for product names.

• Allows users to add products to their cart and view detailed product pages.

 

Cart Page Component

• Displays detailed cart information, including:

  • Product name, price, quantity, total cost per item, and overall total (including tax and delivery fees).

• Features cart management options:

  • Increment/decrement quantity using "+" and "-" buttons.

  • Remove items from the cart if quantity reaches zero.

  • Delete entire items from the cart.

• Links back to the Product Page, where quantities of each product are dynamically updated based on user interactions (e.g., adding/removing products, changing quantities).

• Enables users to proceed to the Checkout Page.

 

Checkout Page Component

• Displays a detailed order summary.

• Collects user information using React Hook Form.

• On order submission:

  • Saves order details to the global state.

  • Redirects users to a Thank You Page confirming their purchase.

 

Global State Management with React Context API

The application leverages React Context API for efficient state management across components:

• Manages global states for:

  • Order Details

  • Cart Information

  • Delivery Fee & Tax Rate

  • Product Search and Search Bar Functionality

• Persisting user and cart information in the global state across browser refreshes using localStorage.

• Handles key functionalities:

  • Adding/removing products from the cart.

  • Incrementing/decrementing product quantities.

  • Calculating product totals, cart total, and cart item count (displayed on the NavBar).

 

Technical Highlights

• Responsive Design: Fully adaptable for various devices.

• Interactive UI: Smooth user interactions with real-time updates in cart and product quantities.

• Ensuring a consistent font and color theme across all pages for a cohesive user experience.

• Form Handling: Simplified and validated user input collection with React Hook Form.

 

This project demonstrates the power of reusable components, effective global state management, and user-centric design, making it an excellent foundation for building a robust e-commerce platform.