A full-stack e-commerce platform built with Next.js 15, featuring product management, shopping cart, secure payments with Stripe, and an admin dashboard. 🔗 Live Demo: (https://e-commerce-three-pi-99.vercel.app)
- Authentication: Register, login, and logout with NextAuth.js
- Product Catalog: Browse products with images, descriptions, and prices
- Shopping Cart: Add/remove items, update quantities, persist cart across sessions
- Cart Sync: Guest cart merges with user cart on login
- Order History: View all past orders with details
- Secure Checkout: Stripe payment integration with test mode support
- Admin Dashboard: Dedicated admin panel with role-based access
- Order Management: View all orders, update order status (Pending → Paid → Shipped → Delivered → Cancelled)
- Product Management: Add, edit, and delete products
- Inventory Control: Track stock levels, prevent overselling
- Stripe Integration: Secure payment processing with Stripe Checkout
- Webhook Handling: Real-time order status updates
- Fallback Verification: Payment verification even if webhooks fail
- Stock Management: Automatic stock decrement on purchase, restore on failure
| Category | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Language | TypeScript |
| Database | PostgreSQL (Supabase) |
| ORM | Prisma |
| Authentication | NextAuth.js |
| Payments | Stripe |
| State Management | Zustand |
| Styling | Tailwind CSS |
| API | REST |
- Node.js 18+
- npm or yarn
- PostgreSQL database (or Supabase account)
- Stripe account (for payments)
-
Clone the repository cd ecommerce-app
-
Install dependencies npm install
-
Set up environment variables
- DATABASE_URL="postgresql://..."
- NEXTAUTH_SECRET="your-nextauth-secret"
- NEXTAUTH_URL="http://localhost:3000"
- STRIPE_SECRET_KEY="sk_test_..."
- NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."
- STRIPE_WEBHOOK_SECRET="whsec_..." # Optional for local dev
4.Set up database
- you can pick options such as: neon,supabase or local postgreSQL i used supabase for this project's development, after creating a project on supabase add the following line in .env file: DATABASE_URL="postgresql://postgres.[project-ref]:[password]@aws-0-[region].pooler.supabase.com:5432/postgres"
- npx prisma db push
- npx prisma generate
5.Seed the database
- npm run db:seed
This creates:
- sample products
- admin user:gmail=>alireza@gmail.com/password=>123456
6.Start Stripe CLI (for local webhook testing)
- make an account on stripe and add the following line in your terminal:
- stripe listen --forward-to localhost:3000/api/webhooks/stripe Copy the webhook secret to .env as STRIPE_WEBHOOK_SECRET
7.Run the development server
- npm run dev
🧪 Testing Payments
- Use this Stripe test card number: 4242 4242 4242 4242
📊 Database Schema
-
Key Models
-
User: Authentication, roles (CUSTOMER/ADMIN)
-
Product: Name, description, price, stock, images, category
-
Cart: User's shopping cart with items
-
CartItem: Product quantities in cart
-
Order: Order details, status, shipping address
-
OrderItem: Ordered products with price snapshot