CodeBook | E-Commerce Platform - React, AWS (Lambda, DynamoDB, S3, HTTP API Gateway) Serverless Architecture FullStack Project (including Admin Panel with Product Management, Analytics, User Management, Order Processing, Review Moderation, Activity Logging)

CodeBook is a modern, full-stack e-commerce platform built with React and AWS serverless architecture for selling computer science eBooks. It features a complete customer storefront with product browsing, shopping cart, Stripe payment integration, order management, and reviews, plus a comprehensive admin dashboard for managing products, orders, users, analytics, and support tickets. The platform uses AWS Lambda, API Gateway, and DynamoDB for scalable serverless backend operations, integrates Cloudinary for images, Brevo for emails, and Shippo for shipping labels, and implements JWT-based authentication with role-based access control. Built with production-ready patterns, responsive Tailwind CSS design, and modern React practices including React Query, CodeBook serves as both a functional e-commerce solution and an educational resource demonstrating real-world full-stack development.

• Live-Demo: https://codebook-aws.vercel.app/

---

📋 Table of Contents

1. Project Overview
2. Architecture Overview
3. Key Features
4. Technology Stack
5. Project Structure
6. Quick Start Guide
7. Environment Variables
8. Installation & Setup
9. Running the Project
10. Deployment
11. Documentation Links
12. Project Architecture
13. API Endpoints
14. Component Reusability
15. Code Examples
16. Keywords
17. Contributing
18. Conclusion

---

Project Overview

CodeBook is a modern, full-stack e-commerce platform built with React and AWS serverless architecture. It demonstrates production-level patterns for building scalable web applications with authentication, payment processing, admin dashboards, analytics, and comprehensive order management.

What Makes This Project Special?

• ✅ Production-Ready: Real-world patterns, error handling, and optimizations
• ✅ Serverless Architecture: AWS Lambda + API Gateway + DynamoDB
• ✅ Modern React: Hooks, Context API, React Query for state management
• ✅ Complete E-Commerce: Products, Cart, Checkout, Orders, Reviews, Tickets
• ✅ Admin Dashboard: Analytics, user management, order processing
• ✅ Third-Party Integrations: Stripe, Cloudinary, Brevo, Shippo
• ✅ Responsive Design: Mobile-first with Tailwind CSS
• ✅ Type Safety: Explicit TypeScript types throughout
• ✅ Educational: Well-documented code with learning-focused structure

---

Architecture Overview

┌─────────────────────────────────────────────────────────────┐
│                    Frontend (React)                         │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐       │
│  │   Pages      │  │  Components  │  │    Hooks     │       │
│  │              │  │              │  │              │       │
│  │  - Home      │  │  - UI Cards  │  │  - useQuery  │       │
│  │  - Products  │  │  - Forms     │  │  - useAuth   │       │
│  │  - Cart      │  │  - Tables    │  │  - useCart   │       │
│  │  - Admin     │  │  - Layouts   │  │  - ...       │       │
│  └──────────────┘  └──────────────┘  └──────────────┘       │
│                                                             │
│  Deployed on: Vercel                                        │
└───────────────────────┬─────────────────────────────────────┘
                        │
                        │ HTTPS Requests
                        │
┌───────────────────────▼───────────────────────────────────────┐
│              AWS API Gateway (HTTP API)                       │
│                                                               │
│  Routes requests to appropriate Lambda functions              │
└───────────────────────┬───────────────────────────────────────┘
                        │
        ┌───────────────┼───────────────┐
        │               │               │
┌───────▼──────┐ ┌──────▼──────┐ ┌──────▼──────┐
│   Products   │ │   Orders    │ │    Auth     │
│   Lambda     │ │   Lambda    │ │   Lambda    │
└───────┬──────┘ └──────┬──────┘ └──────┬──────┘
        │               │               │
        └───────────────┼───────────────┘
                        │
             ┌──────────▼──────────┐
             │    AWS DynamoDB     │
             │                     │
             │  - products         │
             │  - orders           │
             │  - users            │
             │  - reviews          │
             │  - tickets          │
             │  - activity-log     │
             └─────────────────────┘

---

Key Features

🛍️ Customer Features

• Product Browsing: Search, filter, and browse products with detailed views
• Shopping Cart: Persistent cart with stock validation and quantity management
• Authentication: Secure JWT-based login/registration with role-based access
• Checkout: Stripe Payment Element integration for secure payments
• Order Management: Order history, tracking, and status updates
• Product Reviews: 5-star rating system with review moderation
• Support Tickets: Create and manage support tickets with email notifications

👨‍💼 Admin Features

• Dashboard: Business insights with revenue charts and analytics
• Product Management: Full CRUD with image upload, stock management, QR codes
• Order Processing: Update status, process refunds, generate shipping labels
• User Management: View, edit, and manage user accounts
• Review Moderation: Approve/reject product reviews
• Activity Logging: Comprehensive activity tracking and audit logs
• Analytics: Sales trends, top products, user analytics

---

Technology Stack

Frontend

• React 19.2.0 - UI library
• React Router DOM 7.9.6 - Routing
• TanStack React Query 5.90.10 - Server state & caching
• Tailwind CSS 3.4.1 - Styling
• ShadCN UI - Component library
• Recharts 3.5.1 - Charts
• React Toastify - Notifications

Backend

• AWS Lambda - Serverless functions (Node.js 22.x)
• AWS API Gateway - HTTP API
• AWS DynamoDB - NoSQL database
• JWT - Authentication
• bcryptjs - Password hashing

Third-Party Services

• Stripe - Payment processing
• Cloudinary - Image storage
• Brevo - Email service
• Shippo - Shipping labels

---

Project Structure

codebook-ecommerce/
│
├── codebook/                          # Main React application
│   ├── src/
│   │   ├── components/               # Reusable components
│   │   │   ├── Elements/             # Core UI elements
│   │   │   ├── Layouts/             # Layout components
│   │   │   ├── ui/                  # ShadCN UI components
│   │   │   └── Sections/            # Page sections
│   │   ├── pages/                    # Page components
│   │   │   ├── Admin/               # Admin pages
│   │   │   ├── Cart/                # Cart pages
│   │   │   ├── Home/                # Homepage
│   │   │   ├── Products/            # Product pages
│   │   │   └── Tickets/             # Support tickets
│   │   ├── hooks/                   # Custom React hooks
│   │   ├── services/                # API service layer
│   │   ├── context/                 # React Context providers
│   │   ├── utils/                   # Utility functions
│   │   └── routes/                  # Route definitions
│   ├── aws-lambda/                   # AWS Lambda backend
│   │   ├── functions/               # Lambda function handlers
│   │   │   ├── products/           # Product endpoints
│   │   │   ├── orders/             # Order endpoints
│   │   │   ├── auth/                # Authentication
│   │   │   ├── admin/               # Admin endpoints
│   │   │   ├── payment/             # Stripe integration
│   │   │   └── ...                  # Other endpoints
│   │   ├── shared/                   # Shared utilities
│   │   ├── template.yaml            # AWS SAM template
│   │   └── deploy.sh                # Deployment script
│   ├── public/                       # Static assets
│   ├── data/                         # Mock data (db.json)
│   └── README.md                     # Detailed frontend docs
│
├── codebook-backend-serverless-json-server-archived-reference/
│   ├── backend-mock-json-server-project-reference/
│   │   └── README.md                 # Archived mock server docs
│   └── backend-vercel-serverless-functions-project-reference/
│       └── api/README.md             # Archived Vercel functions docs
│
└── README.md                         # This file (root overview)

---

Quick Start Guide

Prerequisites

• Node.js 18.x or higher
• npm or yarn
• AWS Account (for backend deployment)
• Git

1. Clone the Repository

git clone https://github.com/yourusername/codebook-ecommerce.git
cd codebook-ecommerce

2. Install Frontend Dependencies

cd codebook
npm install

3. Set Up Environment Variables

Create a .env file in the codebook/ directory (see Environment Variables section below).

4. Start Development Server

npm start

The application will open at http://localhost:3000

5. Set Up Backend (Optional for Local Development)

For full functionality, you'll need to deploy the AWS Lambda backend. See the Backend Documentation for detailed instructions.

---

Environment Variables

Frontend Environment Variables

Create a .env file in the codebook/ directory:

# API Configuration
REACT_APP_LAMBDA_API_URL=https://your-api-gateway-url.execute-api.region.amazonaws.com
REACT_APP_BASE_URL=http://localhost:3000

# Stripe (Payment Processing)
REACT_APP_STRIPE_PUB_KEY=pk_test_your_stripe_public_key

# Cloudinary (Image Upload)
REACT_APP_CLOUDINARY_CLOUD_NAME=your_cloud_name
REACT_APP_CLOUDINARY_UPLOAD_PRESET=your_upload_preset
REACT_APP_IMAGE_SERVICE=cloudinary

# Demo Accounts (Optional)
REACT_APP_ADMIN_LOGIN=admin@example.com
REACT_APP_ADMIN_PASSWORD=12345678
REACT_APP_GUEST_LOGIN=test@example.com
REACT_APP_GUEST_PASSWORD=12345678

Backend Environment Variables

For AWS Lambda deployment, see codebook/aws-lambda/README.md for detailed secrets management.

Required Secrets:

• JWT_SECRET - Secret key for JWT token signing
• STRIPE_SECRET_KEY - Stripe secret key
• STRIPE_WEBHOOK_SECRET - Stripe webhook secret
• BREVO_API_KEY - Brevo email API key
• BREVO_SENDER_EMAIL - Sender email address
• BREVO_ADMIN_EMAIL - Admin notification email
• SHIPPO_API_KEY - Shippo API key for shipping labels

Getting API Keys

1. Stripe: Sign up at stripe.com → Dashboard → Developers → API keys
2. Cloudinary: Sign up at cloudinary.com → Dashboard → Settings → Upload presets
3. Brevo: Sign up at brevo.com → Settings → API Keys
4. Shippo: Sign up at goshippo.com → Settings → API

---

Installation & Setup

Step 1: Install Dependencies

# Navigate to frontend directory
cd codebook

# Install all dependencies
npm install

Step 2: Configure Environment

1. Copy .env.example to .env (if available) or create a new .env file
2. Fill in all required environment variables (see above)

Step 3: Set Up AWS Backend

# Navigate to Lambda directory
cd aws-lambda

# Install Lambda dependencies
npm install

# Configure AWS credentials
export AWS_ACCESS_KEY_ID=your_access_key
export AWS_SECRET_ACCESS_KEY=your_secret_key
export AWS_REGION=eu-north-1

# Set up secrets (see aws-lambda/README.md)
cp .env.secrets.example .env.secrets
# Edit .env.secrets with your actual secrets

Step 4: Deploy Backend (Optional)

cd aws-lambda
./deploy.sh

This will deploy all Lambda functions and return an API Gateway URL. Update your frontend .env with this URL.

---

Running the Project

Development Mode

cd codebook
npm start

• Opens http://localhost:3000
• Hot reload enabled
• Development tools available

Production Build

cd codebook
npm run build

Creates an optimized production build in the build/ directory.

Testing

cd codebook
npm test

---

Deployment

Frontend Deployment (Vercel)

1. Connect Repository to Vercel

   • Go to vercel.com
   • Import your GitHub repository
   • Set root directory to codebook

2. Configure Environment Variables

   • Add all REACT_APP_* variables in Vercel dashboard
   • Use production URLs for REACT_APP_BASE_URL and REACT_APP_LAMBDA_API_URL

3. Deploy

   • Vercel will automatically deploy on push to main branch
   • Or manually deploy via Vercel CLI: vercel deploy

Backend Deployment (AWS Lambda)

See detailed instructions in codebook/aws-lambda/README.md:

cd codebook/aws-lambda
./deploy.sh

---

Documentation Links

📚 Detailed Documentation

• Frontend Documentation - Complete React app documentation

  • Component guide
  • Hooks reference
  • API services
  • State management
  • Code examples

• Backend Documentation - AWS Lambda backend docs

  • Deployment guide
  • Secrets management
  • Cost monitoring
  • Troubleshooting

📖 Archived References

• Mock JSON Server Reference - Archived mock backend
• Vercel Functions Reference - Archived Vercel functions

---

Project Architecture

Frontend Architecture

┌─────────────────────────────────────────────────────────┐
│                    React Application                    │
├─────────────────────────────────────────────────────────┤
│                                                         │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐   │
│  │   Routing    │  │   Context    │  │   React      │   │
│  │   Layer      │→ │   Providers  │→ │   Query      │   │
│  └──────────────┘  └──────────────┘  └──────────────┘   │
│         │                  │                  │         │
│         └──────────────────┼──────────────────┘         │
│                            │                            │
│                    ┌───────▼────────┐                   │
│                    │   Components   │                   │
│                    │                │                   │
│                    │  - Pages       │                   │
│                    │  - UI Cards    │                   │
│                    │  - Forms       │                   │
│                    │  - Layouts     │                   │
│                    └───────┬────────┘                   │
│                            │                            │
│                    ┌───────▼────────┐                   │
│                    │  Service Layer │                   │
│                    │                │                   │
│                    │  - API Calls   │                   │
│                    │  - Error       │                   │
│                    │    Handling    │                   │
│                    └───────┬────────┘                   │
│                            │                            │
└────────────────────────────┼────────────────────────────┘
                             │
                    HTTPS Requests
                             │
┌────────────────────────────▼─────────────────────────────┐
│              AWS API Gateway                             │
└──────────────────────────────────────────────────────────┘

State Management Strategy

1. Server State: TanStack React Query

   • API data fetching
   • Caching with staleTime: Infinity
   • Automatic cache invalidation
   • Optimistic updates

2. Client State: React Context + useReducer

   • Cart state (CartContext)
   • Filter state (FilterContext)
   • Loading state (LoadingContext)

3. Form State: Controlled components

   • React state for form inputs
   • Validation with custom hooks
   • Error handling

---

API Endpoints

Public Endpoints

GET    /products              # Get all products
GET    /products/:id          # Get product by ID
POST   /auth/login            # User login
POST   /auth/register         # User registration

Protected Endpoints (Require JWT Token)

# Orders
GET    /orders                # Get user orders
POST   /orders                # Create new order

# Reviews
GET    /reviews/product/:id   # Get product reviews
POST   /reviews                # Create review

# Tickets
GET    /tickets                # Get user tickets
POST   /tickets                # Create ticket
PUT    /tickets/:id            # Update ticket

Admin Endpoints (Require Admin Role)

# Products
POST   /admin/products         # Create product
PUT    /admin/products/:id    # Update product
DELETE /admin/products/:id    # Delete product

# Orders
GET    /admin/orders           # Get all orders
PUT    /admin/orders/:id      # Update order status
POST   /admin/orders/:id/refund # Process refund

# Users
GET    /admin/users            # Get all users
PUT    /admin/users/:id        # Update user
DELETE /admin/users/:id       # Delete user

# Analytics
GET    /admin/analytics/revenue # Revenue analytics
GET    /admin/analytics/sales  # Sales trends

Full API Documentation: See codebook/aws-lambda/README.md for detailed endpoint documentation.

---

Component Reusability

ShadCN UI Components

All UI components are built on ShadCN UI for maximum reusability:

// Example: Using Card component
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

function ProductCard({ product }) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{product.name}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>{product.overview}</p>
      </CardContent>
    </Card>
  );
}

Custom Hooks

Reusable hooks for common functionality:

// useProducts - Fetch and manage products
import { useProducts } from "@/hooks/useProducts";

function ProductsPage() {
  const { products, isLoading, error } = useProducts();
  // Use products data
}

// useCart - Cart management
import { useCart } from "@/context/CartContext";

function CartButton() {
  const { addToCart, cartItems } = useCart();
  // Manage cart
}

Service Layer

Centralized API calls:

// productService.js
import { apiClient } from "./apiClient";

export const productService = {
  getAll: () => apiClient.get("/products"),
  getById: (id) => apiClient.get(`/products/${id}`),
  create: (data) => apiClient.post("/admin/products", data),
};

For detailed component examples, see codebook/README.md section on "Reusing Components".

---

Code Examples

Using React Query for Data Fetching

import { useQuery } from "@tanstack/react-query";
import { productService } from "@/services/productService";

function ProductDetail({ productId }) {
  const {
    data: product,
    isLoading,
    error,
  } = useQuery({
    queryKey: ["product", productId],
    queryFn: () => productService.getById(productId),
    staleTime: Infinity, // Cache forever until invalidation
  });

  if (isLoading) return <LoadingState />;
  if (error) return <ErrorState error={error} />;

  return <ProductCard product={product} />;
}

Creating a Mutation

import { useMutation, useQueryClient } from "@tanstack/react-query";
import { productService } from "@/services/productService";
import { toast } from "react-toastify";

function CreateProductForm() {
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: productService.create,
    onSuccess: () => {
      // Invalidate and refetch products
      queryClient.invalidateQueries({ queryKey: ["products"] });
      toast.success("Product created successfully!");
    },
    onError: (error) => {
      toast.error(error.message);
    },
  });

  const handleSubmit = (data) => {
    mutation.mutate(data);
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

Using Context for Global State

// CartContext.js
import { createContext, useContext, useReducer } from "react";
import { cartReducer } from "@/reducers/cartReducers";

const CartContext = createContext();

export function CartProvider({ children }) {
  const [cart, dispatch] = useReducer(cartReducer, []);

  const addToCart = (product) => {
    dispatch({ type: "ADD_TO_CART", payload: product });
  };

  return (
    <CartContext.Provider value={{ cart, addToCart }}>
      {children}
    </CartContext.Provider>
  );
}

// Usage
function ProductCard({ product }) {
  const { addToCart } = useContext(CartContext);

  return <button onClick={() => addToCart(product)}>Add to Cart</button>;
}

Protected Routes

// ProtectedRoute.js
import { Navigate } from "react-router-dom";
import { useUser } from "@/hooks/useUser";

function ProtectedRoute({ children, requireAdmin = false }) {
  const { user, isLoading } = useUser();

  if (isLoading) return <LoadingState />;
  if (!user) return <Navigate to="/login" />;
  if (requireAdmin && !user.isAdmin) return <Navigate to="/" />;

  return children;
}

// Usage in routes
<Route
  path="/admin"
  element={
    <ProtectedRoute requireAdmin>
      <AdminDashboard />
    </ProtectedRoute>
  }
/>;

More code examples: See codebook/README.md for comprehensive examples.

---

Keywords

Frontend: React, React Router, React Query, TanStack Query, Hooks, Context API, Tailwind CSS, ShadCN UI, Responsive Design, Dark Mode, Component Reusability, State Management, Form Validation, Error Handling, Loading States, Toast Notifications

Backend: AWS Lambda, Serverless, API Gateway, DynamoDB, JWT Authentication, bcrypt, Node.js, AWS SAM, Infrastructure as Code, RESTful API, HTTP API

Services: Stripe, Payment Processing, Cloudinary, Image Upload, Brevo, Email Service, Shippo, Shipping Labels, QR Code Generation

Architecture: Serverless Architecture, Microservices, NoSQL Database, REST API, JWT Tokens, Role-Based Access Control, Caching Strategy, Optimistic Updates, Error Boundaries

DevOps: Vercel Deployment, AWS Deployment, Environment Variables, Secrets Management, Cost Monitoring, CloudWatch, CI/CD

E-Commerce: Shopping Cart, Checkout, Order Management, Product Management, Inventory Management, Stock Tracking, Reviews, Ratings, Support Tickets, Analytics, Dashboard

---

Contributing

This is an educational project. Contributions are welcome! Here's how you can contribute:

1. Fork the Repository
2. Create a Feature Branch: git checkout -b feature/amazing-feature
3. Make Your Changes: Follow the existing code style and patterns
4. Test Your Changes: Ensure all functionality works correctly
5. Commit Your Changes: git commit -m 'Add amazing feature'
6. Push to Branch: git push origin feature/amazing-feature
7. Open a Pull Request: Describe your changes clearly

Code Style Guidelines

• Use functional components with hooks
• Follow React best practices
• Use explicit TypeScript types (even in .js files via JSDoc)
• Maintain consistent naming conventions
• Add comments for complex logic
• Use ShadCN UI components when possible
• Follow the existing project structure

---

Conclusion

CodeBook E-Commerce is a comprehensive, production-ready e-commerce platform that demonstrates modern web development practices. It showcases:

• Modern React Patterns: Hooks, Context, React Query
• Serverless Architecture: AWS Lambda + API Gateway + DynamoDB
• Third-Party Integrations: Stripe, Cloudinary, Brevo, Shippo
• Production Best Practices: Error handling, caching, optimization
• Educational Value: Well-documented code for learning

What You Can Learn

• Building scalable React applications
• Serverless backend architecture
• State management with React Query
• Payment processing integration
• Admin dashboard development
• Responsive design patterns
• API design and integration
• AWS services usage

Next Steps

1. Explore the Code: Start with codebook/src/App.js and follow the routes
2. Read the Documentation: Check codebook/README.md for detailed guides
3. Deploy Your Own: Follow the deployment guides to set up your instance
4. Extend the Features: Add new functionality and learn by doing

Resources

• React Documentation
• TanStack Query Docs
• AWS Lambda Docs
• Tailwind CSS Docs
• ShadCN UI Docs

---

Happy Coding! 🎉

Feel free to use this project repository and extend this project further!

If you have any questions or want to share your work, reach out via GitHub or my portfolio at https://arnob-mahmud.vercel.app/.

Enjoy building and learning! 🚀

Thank you! 😊

---