A modern, full-stack e-commerce web application built with React, Node.js, Express, and PostgreSQL.
- 🛍️ Product Browsing - Search, filter by category, view detailed product information
- 🛒 Shopping Cart - Add/remove items, adjust quantities, persistent cart storage
- 🔐 User Authentication - Secure JWT-based login and registration with bcrypt password hashing
- 💳 Payment Processing - Integrated Stripe Checkout for secure transactions
- 📱 Responsive Design - Mobile-first UI built with Tailwind CSS
- 🎨 Modern UI/UX - Clean, professional interface with smooth animations
- React 18 - Component-based UI library
- Vite - Fast build tool and dev server
- React Router - Client-side routing
- Zustand - Lightweight state management
- Tailwind CSS - Utility-first styling
- Axios - HTTP client
- Lucide React - Icon library
- Node.js - JavaScript runtime
- Express.js - Web framework
- PostgreSQL - Relational database
- JWT - Token-based authentication
- bcrypt - Password hashing
- Stripe API - Payment processing
- express-validator - Input validation
shophub-complete/
├── backend/ # Node.js/Express backend
│ ├── routes/ # API route handlers
│ ├── middleware/ # Auth & validation middleware
│ ├── db.js # Database connection
│ ├── server.js # Server entry point
│ └── schema.sql # Database schema
│
└── frontend/ # React frontend
├── src/
│ ├── components/ # Reusable components
│ ├── pages/ # Page components
│ ├── services/ # API services
│ └── store/ # Zustand stores
└── public/ # Static assets
- Node.js (v16 or higher)
- PostgreSQL (v12 or higher)
- npm or yarn
- Stripe account (for payments)
git clone https://github.com/Munun/shophub.git
cd shophub# Create PostgreSQL database
createdb shophub
# Run schema
psql shophub < backend/schema.sqlBackend (.env):
cd backend
cp .env.example .envEdit .env:
PORT=5001
DB_USER=your_db_user
DB_HOST=localhost
DB_NAME=shophub
DB_PASSWORD=your_db_password
DB_PORT=5432
JWT_SECRET=your_super_secret_jwt_key_change_this
STRIPE_SECRET_KEY=your_stripe_secret_key
CLIENT_URL=http://localhost:5173
Frontend (.env):
cd frontend
cp .env.example .envEdit .env:
VITE_API_URL=http://localhost:5001/api
VITE_STRIPE_PUBLIC_KEY=your_stripe_public_key
Backend:
cd backend
npm installFrontend:
cd frontend
npm installBackend (Terminal 1):
cd backend
npm run devServer runs on http://localhost:5001
Frontend (Terminal 2):
cd frontend
npm run devApp runs on http://localhost:5173
-
Register/Login - Create an account or use demo credentials:
- Email:
test@example.com - Password:
password123
- Email:
-
Browse Products - Search and filter by category
-
Add to Cart - Select size (if applicable) and quantity
-
Checkout - Complete purchase with Stripe test card:
- Card:
4242 4242 4242 4242 - Expiry: Any future date
- CVC: Any 3 digits
- Card:
users
├── id (PRIMARY KEY)
├── email (UNIQUE)
├── password_hash
├── full_name
└── created_at
products
├── id (PRIMARY KEY)
├── name
├── description
├── price
├── category
├── stock_quantity
└── sizes (ARRAY)
orders
├── id (PRIMARY KEY)
├── user_id (FOREIGN KEY)
├── total_amount
├── status
└── stripe_payment_id
order_items
├── id (PRIMARY KEY)
├── order_id (FOREIGN KEY)
├── product_id (FOREIGN KEY)
├── quantity
└── price_at_purchase- ✅ Password hashing with bcrypt (10 salt rounds)
- ✅ JWT authentication with HTTP-only recommendations
- ✅ SQL injection prevention with parameterized queries
- ✅ Input validation with express-validator
- ✅ CORS configuration
- ✅ Stripe handles all sensitive payment data
Munun Patel
- Email: Patel.mun25@gmail.com
- LinkedIn: linkedin.com/in/munun
- GitHub: @Munun
- Stripe for payment processing
- Tailwind CSS for styling
- Lucide for icons
- PostgreSQL community
⭐ If you found this project helpful, please give it a star!