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

```bash
# Open PostgreSQL
psql -U postgres

# Create database
CREATE DATABASE ecommerce_db;
\q
```

### Step 2: Backend Setup

```bash
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)

```bash
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

```bash
# 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=StyleHub
```

## Common Commands

### Backend

```bash
# 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

```bash
# 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:**
```bash
uvicorn app.main:app --reload --port 8001
```

**Port 5173 already in use:**
```bash
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](README.md)