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

376 lines
8.9 KiB
Markdown

# E-Commerce Website - Full Setup Guide
This is a complete, fully functional e-commerce website for selling clothes and shoes with both backend and frontend fully connected.
## Project Structure
```
ecommerce/
├── backend/ # FastAPI backend
│ ├── app/
│ │ ├── main.py # Main FastAPI app
│ │ ├── config.py # Configuration
│ │ ├── database/ # Database setup
│ │ ├── models/ # SQLAlchemy models
│ │ ├── schemas/ # Pydantic schemas
│ │ ├── services/ # Business logic
│ │ └── routers/ # API endpoints
│ ├── seed.py # Seed data script
│ ├── requirements.txt # Python dependencies
│ └── .env.example # Environment variables example
└── frontend/ # React + Vite frontend
├── src/
│ ├── components/ # Reusable components
│ ├── pages/ # Page components
│ ├── context/ # React context
│ ├── styles/ # CSS styles
│ ├── App.jsx # Main App component
│ ├── main.jsx # Entry point
│ └── api.js # API client
├── index.html # HTML template
├── package.json # NPM dependencies
├── vite.config.js # Vite configuration
└── .env.example # Environment variables example
```
## System Requirements
- **Python** 3.8+
- **Node.js** 16+
- **PostgreSQL** 12+ (running locally or accessible)
- **npm** or **yarn**
## Backend Setup
### 1. Install PostgreSQL
Download and install PostgreSQL from https://www.postgresql.org/download/
After installation:
```bash
# Create database
psql -U postgres
CREATE DATABASE ecommerce_db;
\q
```
### 2. Create Virtual Environment
```bash
cd backend
# On Windows
python -m venv venv
venv\Scripts\activate
# On macOS/Linux
python3 -m venv venv
source venv/bin/activate
```
### 3. Install Dependencies
```bash
pip install -r requirements.txt
```
### 4. Configure Environment Variables
Copy `.env.example` to `.env` and update with your database credentials:
```bash
cp .env.example .env
```
Edit `.env`:
```
DATABASE_URL=postgresql://postgres:your_password@localhost:5432/ecommerce_db
JWT_SECRET_KEY=your-super-secret-key-change-this
JWT_ALGORITHM=HS256
ACCESS_TOKEN_EXPIRE_MINUTES=30
FRONTEND_URL=http://localhost:5173
```
### 5. Create Database Tables
```bash
python seed.py
```
This will create all tables and seed sample data including categories, products (with focus on shoes), and test users.
### 6. Run Backend Server
```bash
uvicorn app.main:app --reload --port 8000
```
Server will be available at: `http://localhost:8000`
API documentation: `http://localhost:8000/docs`
## Frontend Setup
### 1. Install Node Modules
```bash
cd frontend
npm install
```
### 2. Configure Environment Variables
Copy `.env.example` to `.env`:
```bash
cp .env.example .env
```
Edit `.env`:
```
VITE_API_URL=http://localhost:8000/api
VITE_APP_NAME=Brand Master
```
### 3. Run Development Server
```bash
npm run dev
```
Frontend will be available at: `http://localhost:5173`
### 4. Build for Production
```bash
npm run build
```
## Features
### Authentication
- User registration and login
- JWT token-based authentication
- User profile management
- Persistent login using localStorage
### Products
- Browse all products
- Filter by category, gender, price
- Search products by name or brand
- Product detail pages with images, specifications
- Product reviews and ratings
- Featured products and new arrivals
### Shopping
- Add/remove items from cart
- Update quantities
- View cart with price calculations
- Checkout process
- Order history
### User Features
- User registration
- Login/logout
- User profile with shipping address
- Order history
- Wishlist/favorites
- Add/remove from wishlist
### Admin Features
- Add new products
- Edit existing products
- Delete products
- Manage stock quantities
- Mark products as featured or on sale
### Pages
1. **Home** - Hero section, featured products, categories, deals
2. **Products** - Product listing with filters and sorting
3. **Product Detail** - Full product information
4. **Categories** - Men, Women, Shoes, Shirts, Pants, Hats, Accessories
5. **Sales** - Discounted products and limited-time offers
6. **About** - Company story and values
7. **Contact** - Contact form, store information
8. **Cart** - Shopping cart with summary
9. **Checkout** - Order confirmation and shipping address
10. **Login/Register** - Authentication pages
11. **Profile** - User account information
12. **Orders** - Order history and tracking
13. **Wishlist** - Saved favorite products
## API Endpoints
### Authentication
- `POST /api/auth/register` - Register new user
- `POST /api/auth/login` - Login user
- `POST /api/auth/verify-token` - Verify JWT token
### Users
- `GET /api/users/me` - Get current user profile
- `PUT /api/users/me` - Update user profile
- `GET /api/users/{user_id}` - Get user by ID
### Products
- `GET /api/products` - List products (with filters)
- `GET /api/products/search` - Search products
- `GET /api/products/{id}` - Get product details
- `POST /api/products` - Create product (admin)
- `PUT /api/products/{id}` - Update product (admin)
- `DELETE /api/products/{id}` - Delete product (admin)
### Categories
- `GET /api/categories` - List all categories
- `GET /api/categories/{id}` - Get category
- `POST /api/categories` - Create category (admin)
- `PUT /api/categories/{id}` - Update category (admin)
- `DELETE /api/categories/{id}` - Delete category (admin)
### Cart
- `GET /api/cart` - Get user's cart
- `POST /api/cart/add` - Add item to cart
- `PUT /api/cart/{item_id}` - Update cart item
- `DELETE /api/cart/{item_id}` - Remove item from cart
- `DELETE /api/cart` - Clear cart
### Orders
- `POST /api/orders` - Create order
- `GET /api/orders/user/orders` - Get user's orders
- `GET /api/orders/{id}` - Get order details
### Wishlist
- `GET /api/wishlist` - Get user's wishlist
- `POST /api/wishlist/{product_id}` - Add to wishlist
- `DELETE /api/wishlist/{product_id}` - Remove from wishlist
### Contact
- `POST /api/contact` - Send contact message
## Test Credentials
Demo account for testing:
- **Email**: user@example.com
- **Password**: password123
Or create a new account through the registration page.
## Database Schema
### Users Table
- id (Primary Key)
- email (Unique)
- hashed_password
- full_name
- phone, address, city, postal_code, country
- is_active
- created_at
### Products Table
- id (Primary Key)
- name, description
- price, discount_price
- category_id (Foreign Key)
- gender (men/women)
- brand
- sizes (JSON array)
- colors (JSON array)
- stock (quantity)
- images (JSON array)
- is_featured, is_on_sale
- created_at
### Categories Table
- id (Primary Key)
- name (Unique)
- slug (Unique)
- description
### Cart & CartItems Tables
- cart_id (Foreign Key to User)
- cart_item_id (Product, quantity, size, color)
### Orders & OrderItems Tables
- order_id (User, status, total, shipping info)
- order_item_id (Product, quantity, price at purchase time)
### Wishlist Table
- user_id, product_id (Foreign Keys)
- created_at
### ContactMessages Table
- id (Primary Key)
- name, email, subject, message
- created_at
## Troubleshooting
### Backend Issues
**PostgreSQL connection error:**
- Ensure PostgreSQL is running
- Check DATABASE_URL in .env
- Verify username and password
**Import errors:**
- Make sure virtual environment is activated
- Run `pip install -r requirements.txt` again
### Frontend Issues
**API not responding:**
- Check backend is running on port 8000
- Check VITE_API_URL in .env
**Port already in use:**
```bash
# Find and kill process on port
# On Windows
netstat -ano | findstr :5173
taskkill /PID <PID> /F
# On macOS/Linux
lsof -ti:5173 | xargs kill -9
```
## Development Notes
- Backend is built with **FastAPI** for high performance
- Frontend uses **React** with **Vite** for fast development
- **SQLAlchemy** handles database operations
- **JWT** for secure authentication
- **CORS** enabled for frontend-backend communication
- All responses follow RESTful API standards
## Production Deployment
For production:
1. Set DEBUG=False in backend config
2. Use a production database server
3. Configure proper CORS settings
4. Use environment-specific .env files
5. Deploy frontend as static assets
6. Use a production WSGI server (Gunicorn)
7. Set up HTTPS/SSL certificates
## Contributing
This is a template project. Feel free to customize and extend with:
- Payment gateway integration
- Email notifications
- Advanced analytics
- Admin dashboard
- Mobile app
- Inventory management system
## License
This project is open source and available for personal and commercial use.
## Support
For issues or questions, check:
- FastAPI docs: https://fastapi.tiangolo.com/
- React docs: https://react.dev/
- SQLAlchemy docs: https://docs.sqlalchemy.org/
- Vite docs: https://vitejs.dev/