brand-master/QUICKSTART.md

Quick Start Guide

Get the e-commerce website up and running in minutes!

Prerequisites

• PostgreSQL installed and running
• Python 3.8+
• Node.js 16+

Quick Start - Windows

Step 1: Set up Database

# Open PostgreSQL
psql -U postgres

# Create database
CREATE DATABASE ecommerce_db;
\q

Step 2: Backend Setup

cd backend

# Create virtual environment
python -m venv venv
venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Configure .env
copy .env.example .env
# Edit .env and update DATABASE_URL with your PostgreSQL credentials

# Create tables and seed data
python seed.py

# Start backend
uvicorn app.main:app --reload --port 8000

Backend will be running at http://localhost:8000

Step 3: Frontend Setup (in a new terminal)

cd frontend

# Install dependencies
npm install

# Configure .env
copy .env.example .env

# Start development server
npm run dev

Frontend will be running at http://localhost:5173

Quick Start - macOS/Linux

# Create database
psql -U postgres -c "CREATE DATABASE ecommerce_db;"

# Backend
cd backend
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
cp .env.example .env
# Edit .env with your database URL
python seed.py
uvicorn app.main:app --reload --port 8000 &

# Frontend (in new terminal)
cd frontend
npm install
cp .env.example .env
npm run dev

Test the Application

1. Open http://localhost:5173 in your browser
2. Test login with:
   • Email: user@example.com
   • Password: password123
3. Browse products, add to cart, and proceed to checkout

Available Demo Accounts

User 1:

• Email: user@example.com
• Password: password123

User 2:

• Email: jane@example.com
• Password: password123

What's Included

✅ 12+ Pages (Home, Products, Cart, Checkout, Orders, etc.) ✅ User Authentication (Register, Login, JWT) ✅ Product Management (Add, Edit, Delete) ✅ Shopping Cart with Checkout ✅ Order History ✅ Wishlist/Favorites ✅ Search & Filtering ✅ Responsive Design ✅ Database Seeding with 15+ Sample Products (Focus on Shoes) ✅ RESTful API (25+ Endpoints) ✅ Clean Code Architecture

File Structure

backend/
├── app/
│   ├── main.py              # FastAPI app
│   ├── config.py            # Configuration
│   ├── database/            # Database
│   ├── models/              # DB Models
│   ├── schemas/             # Pydantic Schemas
│   ├── services/            # Business Logic
│   └── routers/             # API Routes
├── seed.py                  # Seed Data
├── requirements.txt         # Python Packages
└── .env.example            # Env Template

frontend/
├── src/
│   ├── pages/              # Page Components
│   ├── components/         # Reusable Components
│   ├── context/            # React Context
│   ├── styles/             # CSS
│   ├── App.jsx             # Main App
│   ├── main.jsx            # Entry Point
│   └── api.js              # API Client
├── index.html              # HTML Template
├── package.json            # NPM Packages
├── vite.config.js          # Vite Config
└── .env.example            # Env Template

Environment Variables

Backend (.env)

DATABASE_URL=postgresql://user:password@localhost:5432/ecommerce_db
JWT_SECRET_KEY=your-secret-key-here
FRONTEND_URL=http://localhost:5173

Frontend (.env)

VITE_API_URL=http://localhost:8000/api
VITE_APP_NAME=Brand Master

Common Commands

Backend

# Activate virtual environment
venv\Scripts\activate  # Windows
source venv/bin/activate  # macOS/Linux

# Run server
uvicorn app.main:app --reload

# Run seed script
python seed.py

# Install new package
pip install package_name

# Generate requirements
pip freeze > requirements.txt

Frontend

# Install dependencies
npm install

# Run dev server
npm run dev

# Build for production
npm run build

# Install new package
npm install package_name

Troubleshooting

Port 8000 already in use:

uvicorn app.main:app --reload --port 8001

Port 5173 already in use:

npm run dev -- --port 5174

PostgreSQL connection error:

• Make sure PostgreSQL service is running
• Check credentials in .env
• Verify database exists

Module not found error:

• Activate the virtual environment
• Run pip install -r requirements.txt again

Next Steps

1. Customize Branding

   • Update logo in Navbar component
   • Change color scheme in CSS
   • Update company info in Footer

2. Add Products

   • Use the product creation API endpoint
   • Or modify seed.py and regenerate database

3. Deploy

   • Deploy backend to Heroku, AWS, or Google Cloud
   • Deploy frontend to Vercel, Netlify, or GitHub Pages

4. Extend Functionality

   • Add real payment gateway
   • Implement email notifications
   • Add review system
   • Set up inventory alerts

Support

For detailed documentation, see README.md