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
Additional Resources
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! 🚀