Full Stack Projects with Source Code

Full Stack Projects with Source Code: E-Commerce Product Catalog

Full Stack Projects with Source Code: This E-Commerce Product Catalog React Application is a feature-rich platform designed to deliver a seamless shopping experience. The project showcases an optimized structure with reusable React components, efficient state management using the Context API, and interactive user functionalities. Below are the main components and features of the application:

Core Components & Functionalities

Home Page Component

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

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

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

4. 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.

Source Code

Live Application

Resources:

https://nodejs.org/en

https://code.visualstudio.com/

Install Plugins: Tailwind CSS IntelliSense, es7+ (ES7+ React/Redux/React-Native snippets)

Browser: Use the latest version of Google Chrome/Microsoft Edge.

https://react.dev/

https://fonts.google.com

https://react-icons.github.io/react-icons/

React Router

React Hook Form

Download and Install Git

Version Control: GitHub

https://color.adobe.com/explore

Vercel: Build and deploy the best web experiences with the Frontend Cloud

Create a React Project: Create a project folder "React" and open it in VS Code

Creating a Vite Project Using React

www.tailwindcss.com -> Framework Guides -> Vite -> Using React -> Run the commands

> npm create vite@latest

> Projectname: react-car-rental-website

> Select a framework: React

> Select a variant: JavaScript

> cd react-car-rental-website

> npm install

> Run your build process with "npm run dev" -> http://localhost:5173/

Delete "App.CSS" & Remove everything from index.css files.

Installing Tailwind CSS:

www.tailwindcss.com -> Framework Guides -> Vite -> Using React -> Run the commands

> npm install -D tailwindcss postcss autoprefixer

> npx tailwindcss init -p

Configure your template paths:

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS:

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@tailwind base;

@tailwind components;

@tailwind utilities;

Installing Dependencies:

>npm install react-icons react-router-dom react-hook-form

NOTE: Encapsulate the 'App' component with 'BrowserRouter' & 'StoreContextProvider' in the 'main.jsx'

<StoreContextProvider>
  <BrowserRouter>
    <App />
  </BrowserRouter>
</StoreContextProvider>

Add Global styles in "tailwind.config.js" file

Creating your own components...

GitHub Commands:

git init

git add .

git commit -m "first commit"

git branch -M main

git remote add origin https://github.com/codingZ2M/dummy.git

git push -u origin main