Introduction

This capstone project brings together everything you've learned. You'll build a complete e-commerce platform with product catalog, shopping cart, user authentication, order management, payment integration, and admin dashboard. This is your portfolio project!

Learning Objectives

  • Plan and architect a full-stack application
  • Build a complete product catalog system
  • Implement shopping cart functionality
  • Create user authentication and profiles
  • Integrate payment processing
  • Deploy a production-ready application

Prerequisites

  • Completion of all previous lessons (01-11)
  • Strong full-stack development skills
  • Understanding of all covered technologies

Estimated Time

6 hours (project implementation)

Project Overview

Features

  • User Features: Registration, login, profile management
  • Product Catalog: Browse, search, filter products
  • Shopping Cart: Add, update, remove items
  • Checkout: Order placement, payment processing
  • Order History: View past orders and status
  • Admin Dashboard: Manage products, orders, users

Tech Stack

  • Frontend: React, React Router, Context API
  • Backend: Node.js, Express.js
  • Database: MongoDB with Mongoose
  • Authentication: JWT tokens
  • Payment: Stripe integration
  • Deployment: Heroku/AWS

Database Schema Design

models/User.js
const userSchema = new mongoose.Schema({
  name: { type: String, required: true },
  email: { type: String, required: true, unique: true },
  password: { type: String, required: true },
  role: { type: String, enum: ['user', 'admin'], default: 'user' },
  address: {
    street: String,
    city: String,
    state: String,
    zipCode: String,
    country: String
  }
}, { timestamps: true });
models/Product.js
const productSchema = new mongoose.Schema({
  name: { type: String, required: true },
  description: { type: String, required: true },
  price: { type: Number, required: true },
  category: { type: String, required: true },
  stock: { type: Number, default: 0 },
  images: [String],
  ratings: {
    average: { type: Number, default: 0 },
    count: { type: Number, default: 0 }
  }
}, { timestamps: true });
models/Order.js
const orderSchema = new mongoose.Schema({
  user: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
  items: [{
    product: { type: mongoose.Schema.Types.ObjectId, ref: 'Product' },
    quantity: { type: Number, required: true },
    price: { type: Number, required: true }
  }],
  totalAmount: { type: Number, required: true },
  status: {
    type: String,
    enum: ['pending', 'processing', 'shipped', 'delivered', 'cancelled'],
    default: 'pending'
  },
  shippingAddress: {
    street: String,
    city: String,
    state: String,
    zipCode: String,
    country: String
  },
  paymentInfo: {
    method: String,
    transactionId: String,
    paidAt: Date
  }
}, { timestamps: true });

Backend API Endpoints

API Structure
// Authentication
POST   /api/auth/register
POST   /api/auth/login
GET    /api/auth/me

// Products
GET    /api/products
GET    /api/products/:id
POST   /api/products (admin)
PUT    /api/products/:id (admin)
DELETE /api/products/:id (admin)

// Cart
GET    /api/cart
POST   /api/cart/add
PUT    /api/cart/update/:itemId
DELETE /api/cart/remove/:itemId

// Orders
GET    /api/orders
GET    /api/orders/:id
POST   /api/orders
PUT    /api/orders/:id/status (admin)

// Users (admin)
GET    /api/users
GET    /api/users/:id
DELETE /api/users/:id

Frontend Structure

Project Structure
client/
├── src/
│   ├── components/
│   │   ├── Navbar.jsx
│   │   ├── ProductCard.jsx
│   │   ├── CartItem.jsx
│   │   └── ProtectedRoute.jsx
│   ├── pages/
│   │   ├── Home.jsx
│   │   ├── Products.jsx
│   │   ├── ProductDetail.jsx
│   │   ├── Cart.jsx
│   │   ├── Checkout.jsx
│   │   ├── Orders.jsx
│   │   ├── Login.jsx
│   │   ├── Register.jsx
│   │   └── Admin/
│   │       ├── Dashboard.jsx
│   │       ├── ProductManagement.jsx
│   │       └── OrderManagement.jsx
│   ├── context/
│   │   ├── AuthContext.jsx
│   │   └── CartContext.jsx
│   ├── services/
│   │   ├── api.js
│   │   └── auth.js
│   └── App.jsx

Shopping Cart Implementation

context/CartContext.jsx
import { createContext, useState, useContext } from 'react';

const CartContext = createContext();

export const CartProvider = ({ children }) => {
  const [cart, setCart] = useState([]);
  
  const addToCart = (product, quantity = 1) => {
    setCart(prev => {
      const existing = prev.find(item => item.product._id === product._id);
      if (existing) {
        return prev.map(item =>
          item.product._id === product._id
            ? { ...item, quantity: item.quantity + quantity }
            : item
        );
      }
      return [...prev, { product, quantity }];
    });
  };
  
  const removeFromCart = (productId) => {
    setCart(prev => prev.filter(item => item.product._id !== productId));
  };
  
  const updateQuantity = (productId, quantity) => {
    setCart(prev =>
      prev.map(item =>
        item.product._id === productId ? { ...item, quantity } : item
      )
    );
  };
  
  const clearCart = () => setCart([]);
  
  const getTotal = () => {
    return cart.reduce((total, item) => 
      total + (item.product.price * item.quantity), 0
    );
  };
  
  return (
    
      {children}
    
  );
};

export const useCart = () => useContext(CartContext);

Payment Integration with Stripe

Terminal
npm install stripe
npm install @stripe/stripe-js @stripe/react-stripe-js
Backend - controllers/paymentController.js
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

exports.createPaymentIntent = async (req, res) => {
  try {
    const { amount } = req.body;
    
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount * 100, // Convert to cents
      currency: 'usd',
      metadata: { userId: req.user.id }
    });
    
    res.json({
      success: true,
      clientSecret: paymentIntent.client_secret
    });
  } catch (error) {
    res.status(500).json({ success: false, message: error.message });
  }
};
Frontend - pages/Checkout.jsx
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';
import CheckoutForm from '../components/CheckoutForm';

const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLIC_KEY);

function Checkout() {
  const [clientSecret, setClientSecret] = useState('');
  
  useEffect(() => {
    // Create payment intent
    fetch('/api/payment/create-intent', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ amount: total })
    })
      .then(res => res.json())
      .then(data => setClientSecret(data.clientSecret));
  }, []);
  
  return (
    
      
    
  );
}

Admin Dashboard

pages/Admin/Dashboard.jsx
function AdminDashboard() {
  const [stats, setStats] = useState({
    totalOrders: 0,
    totalRevenue: 0,
    totalProducts: 0,
    totalUsers: 0
  });
  
  useEffect(() => {
    fetchStats();
  }, []);
  
  const fetchStats = async () => {
    const response = await fetch('/api/admin/stats');
    const data = await response.json();
    setStats(data);
  };
  
  return (
    

Admin Dashboard

Total Orders

{stats.totalOrders}

Total Revenue

${stats.totalRevenue}

Total Products

{stats.totalProducts}

Total Users

{stats.totalUsers}

); }

Deployment Checklist

  • ✅ Environment variables configured
  • ✅ Database connection secured
  • ✅ API endpoints tested
  • ✅ Frontend build optimized
  • ✅ CORS configured properly
  • ✅ Error handling implemented
  • ✅ Security headers added
  • ✅ Rate limiting enabled
  • ✅ Logging configured
  • ✅ SSL certificate installed

Key Takeaways

  • Plan your architecture before coding
  • Design database schemas carefully
  • Implement authentication early
  • Use context for global state management
  • Test thoroughly before deployment
  • Follow security best practices
  • Document your API endpoints
  • Monitor application in production

Project Milestones

Phase 1: Setup & Authentication

  • Initialize project structure
  • Set up database connection
  • Implement user authentication
  • Create protected routes

Phase 2: Product Catalog

  • Create product models and API
  • Build product listing page
  • Implement search and filters
  • Add product detail page

Phase 3: Shopping Cart

  • Implement cart context
  • Build cart UI
  • Add/update/remove functionality
  • Calculate totals

Phase 4: Checkout & Payment

  • Create checkout page
  • Integrate Stripe payment
  • Process orders
  • Send confirmation emails

Phase 5: Admin Dashboard

  • Build admin interface
  • Product management
  • Order management
  • User management

Phase 6: Testing & Deployment

  • Write tests
  • Fix bugs
  • Optimize performance
  • Deploy to production

Congratulations!

You've completed the JavaScript Full-Stack Development course! You now have the skills to build professional web applications from scratch. This e-commerce project serves as a portfolio piece to showcase your abilities to potential employers.

Next Steps

  • Add more features to your e-commerce platform
  • Build additional projects to strengthen your portfolio
  • Contribute to open-source projects
  • Stay updated with latest technologies
  • Join developer communities
  • Apply for full-stack developer positions

Keep coding and never stop learning! 🚀