eShop Commerce Platform

A modern full-stack e-commerce web application built with React, Node.js, Express, and PostgreSQL. Features a complete shopping experience including product catalog, shopping cart, user authentication, order management, and an admin dashboard.

Features

Customer Features

• Product Catalog - Browse products with search, filters, and category navigation
• Product Details - View specifications, images, pricing, and stock availability
• Shopping Cart - Add/remove items, update quantities, persistent across sessions
• Wishlist - Save products for later
• Checkout - Complete purchase with shipping information
• User Account - Profile management, order history, saved addresses

Admin Features

• Dashboard - Sales overview, recent orders, quick stats
• Product Management - CRUD operations for products and categories
• Order Management - View and update order statuses
• Customer Management - View customer information

Tech Stack

Layer	Technology
Frontend	React 18, Vite, TypeScript, Tailwind CSS
Backend	Node.js, Express, TypeScript
Database	PostgreSQL with Prisma ORM
State Management	Zustand
Authentication	JWT (Access + Refresh tokens)
Validation	express-validator

Prerequisites

• Node.js 18.x or higher
• npm or yarn
• Docker (for PostgreSQL database)
• Git (for version control)

Quick Start

1. Clone the Repository

git clone <your-repo-url>
cd eshop

2. Start PostgreSQL Database

docker-compose up -d

Verify the database is running:

docker-compose ps

3. Install Dependencies

npm install

4. Set Up Environment Variables

The backend requires environment variables. Copy the example file:

cd backend
cp .env.example .env
cd ..

Or create .env in the backend folder with:

DATABASE_URL="postgresql://postgres:postgres@localhost:5432/eshop?schema=public"
JWT_SECRET="your-super-secret-jwt-key-change-in-production"
JWT_REFRESH_SECRET="your-super-secret-refresh-key-change-in-production"
PORT=5000
NODE_ENV=development
CORS_ORIGIN=http://localhost:3000

5. Initialize Database

Run database migrations to create tables:

cd backend
npx prisma migrate dev --name init

Seed the database with sample data:

npm run db:seed

6. Start Development Servers

cd ..
npm run dev

This starts both frontend and backend concurrently:

• Frontend: http://localhost:3000
• Backend API: http://localhost:5000

Database Commands

Command	Description
npm run db:migrate	Create database tables
npm run db:push	Push schema changes to database
npm run db:seed	Seed database with sample data
npm run db:studio	Open Prisma Studio GUI

Demo Accounts

Role	Email	Password
Admin	admin@eshop.com	admin123
Customer	customer@eshop.com	customer123

Project Structure

eshop/
├── frontend/                    # React frontend application
│   ├── src/
│   │   ├── components/         # Reusable UI components
│   │   ├── pages/             # Page components
│   │   │   ├── admin/         # Admin panel pages
│   │   │   └── ...            # Customer pages
│   │   ├── services/          # API service functions
│   │   ├── store/             # Zustand state stores
│   │   ├── hooks/             # Custom React hooks
│   │   └── types/             # TypeScript type definitions
│   └── package.json
├── backend/                     # Express API server
│   ├── src/
│   │   ├── config/             # Configuration files
│   │   ├── controllers/        # Route controllers
│   │   ├── middleware/        # Express middleware
│   │   ├── routes/            # API routes
│   │   ├── services/          # Business logic
│   │   └── utils/             # Utility functions
│   ├── prisma/
│   │   ├── schema.prisma      # Database schema
│   │   └── seed.ts            # Database seeder
│   └── package.json
├── shared/                      # Shared TypeScript types
├── docker-compose.yml           # Docker configuration
├── package.json                # Workspace root
└── README.md

API Documentation

Authentication Endpoints

Method	Endpoint	Description
POST	/api/auth/register	Register new user
POST	/api/auth/login	Login user
POST	/api/auth/refresh	Refresh access token
POST	/api/auth/logout	Logout user
GET	/api/auth/me	Get current user

Product Endpoints

Method	Endpoint	Description
GET	/api/products	List products (with filters)
GET	/api/products/:slug	Get product by slug
GET	/api/products/featured	Get featured products

Cart Endpoints

Method	Endpoint	Description
GET	/api/cart	Get user's cart
POST	/api/cart	Add item to cart
PUT	/api/cart/:id	Update cart item
DELETE	/api/cart/:id	Remove cart item
DELETE	/api/cart	Clear cart

Order Endpoints

Method	Endpoint	Description
POST	/api/orders	Create new order
GET	/api/orders	Get user's orders
GET	/api/orders/:id	Get order details
GET	/api/orders/all	Get all orders (admin)
PUT	/api/orders/:id/status	Update order status (admin)

Category Endpoints

Method	Endpoint	Description
GET	/api/categories	List all categories
GET	/api/categories/:slug	Get category with products

Environment Variables

Backend (.env)

Variable	Description	Default
DATABASE_URL	PostgreSQL connection string	Required
JWT_SECRET	Access token secret	Required
JWT_REFRESH_SECRET	Refresh token secret	Required
PORT	Server port	5000
NODE_ENV	Environment	development
CORS_ORIGIN	Allowed CORS origin	http://localhost:3000

Available Scripts

Root Workspace

npm run dev          # Start frontend & backend
npm run build        # Build for production
npm run db:migrate   # Run migrations
npm run db:seed      # Seed database

Backend

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run db:studio    # Open Prisma Studio

Frontend

npm run dev          # Start Vite dev server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint

Deployment

Backend (Production)

1. Set environment variables on your server
2. Build the project:

   npm run build --workspace=backend

3. Run migrations:

   npm run db:migrate --workspace=backend

4. Start the server:

   npm run start --workspace=backend

Frontend (Production)

1. Update vite.config.ts with production API URL
2. Build the project:

   npm run build --workspace=frontend

3. Deploy the dist folder to your hosting provider

Docker Deployment

Use Docker Compose for production:

services:
  db:
    image: postgres:16-alpine
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: your-password
      POSTGRES_DB: eshop
    volumes:
      - postgres_data:/var/lib/postgresql/data

  backend:
    build: ./backend
    depends_on:
      - db
    environment:
      DATABASE_URL: postgresql://postgres:your-password@db:5432/eshop

Troubleshooting

Port Already in Use

If you get EADDRINUSE errors:

# Find and kill the process using the port
lsof -i :5000
kill -9 <PID>

Database Connection Issues

1. Verify Docker is running:

   docker-compose ps

2. Check database logs:

   docker-compose logs db

3. Reset the database:

   docker-compose down -v
   docker-compose up -d
   cd backend && npx prisma migrate dev --name init

Prisma Client Errors

If you see Prisma-related errors, regenerate the client:

cd backend
npx prisma generate

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

License

This project is licensed under the MIT License.

Support

For issues and questions, please open a GitHub issue.

---

Built with ❤️ using React, Node.js, and PostgreSQL