# 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)