brand-master/QUICKSTART.md
2026-05-04 01:01:36 +03:00

252 lines
5.0 KiB
Markdown

# 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=Brand Master
```
## 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)