This Full Stack Gadgets Store React Application is a feature-rich platform designed to provide a seamless shopping experience. The project demonstrates an optimized architecture with reusable React components, efficient state management using the Context API, and interactive user functionalities. It incorporates React Hook Form for collecting and storing data in a remote MongoDB database, along with Custom Hooks for fetching data from the database.
The backend is built using Node.js, the Express web framework, and MongoDB, with Mongoose for object modeling. It utilizes a remote MongoDB database for storing products and orders, complete with robust CRUD operations. Key backend features include setting up MongoDB models, handling database connection logic, creating controllers, defining API routes to interact with the controllers, and connecting the backend to the frontend for seamless integration.
Below are the main components and features of the application:
Core Components & Functionalities:
Home Page Component
-
Displays products from the Best Sellers and New Arrivals categories, dynamically fetched from a remote MongoDB database using a custom React hook.
-
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.
-
Provides links to a detailed Product Page for individual product views, utilizing the ObjectId from the MongoDB database collection.
Product Page Component
-
Displays detailed information about a product using its ObjectId retrieved from the MongoDB database collection.
-
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
-
Fetches products from a remote MongoDB database using a custom React hook and includes 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 using its ObjectId retrieved from the MongoDB database collection.
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 using its ObjectId retrieved from the MongoDB database collection, 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 and stores them in the remote MongoDB database collection named "orders".
-
Redirects users to a Thank You page confirming their purchase, displaying the order ID retrieved from the MongoDB database collection "orders".
-
ProductForm Page Component
The ProductForm React component utilizes the ProductFormFields component, which employs React Hook Form to collect product data and store it in the remote MongoDB database collection "products" and the ProductListing component fetches and displays all products from the "products" collection, allowing the product admin to delete or edit products.
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.
