A full-stack Nike-inspired ecommerce platform built with modern web technologies, featuring product browsing, user authentication, shopping cart, and secure payment processing.
- Email/Password Authentication - Secure sign up and sign in with Better Auth
- Email Verification - Account verification via email
- Guest Sessions - Anonymous browsing and shopping without account creation
- Account Merging - Seamlessly merge guest cart with user account on login
- User Profiles - Manage personal information and preferences
- Product Browsing - Browse shoes by category, gender, and collections
- Advanced Filtering - Filter by size, color, price range, brand, and more
- Product Search - Real-time search with auto-suggestions
- Product Variants - Multiple colors, sizes, and SKUs per product
- Product Images - High-quality image galleries with primary/secondary images
- Product Reviews - User-generated reviews and ratings
- Recommended Products - "You Might Also Like" suggestions
- Shopping Cart - Add, remove, and modify cart items
- Cart Popup - Instant feedback when adding items to cart
- Guest Cart Persistence - Cart saved via httpOnly cookies for guests
- Wishlist - Save favorite products for later
- Price Management - Regular and sale pricing with variant-specific pricing
- Secure Checkout - Stripe-powered payment processing with Checkout Sessions
- Payment Processing - Support for cards, Apple Pay, Google Pay, and more payment methods
- Order Confirmation - Real-time payment status and order completion feedback
- Mobile-First - Optimized for mobile, tablet, and desktop
- Filter Panel - Slide-over filters on mobile, collapsible sidebar on desktop
- Smooth Animations - CSS transitions and transforms for better UX
- Accessibility - ARIA labels, semantic HTML, and keyboard navigation
- Database Seeding - Populate database with realistic product data
- Product Management - Products, variants, categories, brands, and collections
- Image Management - Automatic image association and organization
- Next.js 16 with App Router for SSR and client-side routing
- React 19 for component architecture
- TypeScript for type safety
- Tailwind CSS for styling with custom design system
- Stripe Elements - Embedded payment UI with customizable appearance
- Client/Server Components - Optimal data fetching and rendering
- PostgreSQL database with Neon hosting
- Drizzle ORM for type-safe database operations
- Better Auth for authentication and session management
- Stripe API for secure payment processing and checkout sessions
- Zod for runtime validation and type inference
- Server Actions for form handling and mutations
├── Users & Authentication
│ ├── users (profiles, preferences)
│ ├── accounts (OAuth providers)
│ ├── sessions (user sessions)
│ └── guests (anonymous sessions)
│
├── Products & Catalog
│ ├── products (name, description, metadata)
│ ├── product_variants (size, color, price, SKU)
│ ├── categories (sneakers, boots, sandals)
│ ├── brands (Nike, Jordan, etc.)
│ ├── colors (hex codes, names)
│ └── images (product gallery)
│
├── Shopping & Commerce
│ ├── carts (user/guest shopping carts)
│ ├── cart_items (products in cart)
│ ├── wishlists (saved products)
│ ├── orders (purchase records)
│ ├── order_items (products in orders)
│ ├── payments (payment transactions)
│ └── addresses (shipping/billing)
│
└── Content & Collections
├── collections (seasonal, featured)
├── product_collections (many-to-many)
└── reviews (user feedback)
- Node.js 18+
- PostgreSQL database (Neon recommended)
- Stripe account (for payment processing)
- npm or yarn
-
Clone the repository
git clone <repository-url> cd ecommerce
-
Install dependencies
npm install
-
Environment Setup Create
.env.local:DATABASE_URL=postgresql://user:password@host:port/database BETTER_AUTH_SECRET=your-secret-key BETTER_AUTH_URL=http://localhost:3000 NEXT_PUBLIC_BASE_URL=http://localhost:3000 STRIPE_SECRET_KEY=sk_test_your_stripe_secret_key NEXT_PUBLIC_STRIPE_PUBLIC_KEY=pk_test_your_stripe_public_key NODE_ENV=development
-
Database Setup
# Generate migrations npx drizzle-kit generate --name init # Apply migrations npx drizzle-kit migrate:push # Enable UUID extension in PostgreSQL # Connect to your DB and run: CREATE EXTENSION IF NOT EXISTS pgcrypto;
-
Seed Database
npx ts-node ./database/seed.ts
-
Start Development Server
npm run dev
Visit http://localhost:3000 to see the application.
├── app/
│ ├── (auth)/ # Authentication pages
│ ├── (root)/ # Main application pages
│ │ ├── checkout/ # Checkout and payment pages
│ │ └── ...
│ ├── api/ # API routes
│ │ ├── auth/ # Authentication endpoints
│ │ ├── cart/ # Cart operations
│ │ └── checkout/ # Stripe checkout sessions
│ └── globals.css # Global styles
│
├── components/ # Reusable UI components
│ ├── auth-form.tsx
│ ├── card.tsx
│ ├── filters.tsx
│ ├── navbar.tsx
│ ├── CheckoutForm.tsx # Stripe payment form
│ └── ...
│
├── database/ # Database schema and models
│ ├── filters/ # Filter-related models
│ ├── account.model.ts
│ ├── user.model.ts
│ ├── order.model.ts
│ ├── payment.model.ts
│ └── seed.ts
│
├── lib/ # Utilities and configurations
│ ├── actions/ # Server actions
│ ├── auth.ts # Authentication config
│ ├── db.ts # Database connection
│ └── constants.ts
│
└── drizzle/ # Database migrations
- Email Lookup - Check if email exists in system
- Sign Up/In - Create account or authenticate existing user
- Session Management - Secure session handling with Better Auth
- Guest Sessions - Anonymous users get temporary sessions
- Server-Side Filtering - Database queries with dynamic WHERE clauses
- URL State Management - Filters persist in search parameters
- Real-Time Updates - Filter changes update product list immediately
- Aggregated Pricing - Min/max prices calculated from variants
// Guest session creation
POST /api/auth/guest
→ Creates guest record + httpOnly cookie
// Fetch cart items
GET /api/cart
→ Fetches all cart items for user/guest
// Cart merge on login
→ Merge guest cart into user cart
→ Clear guest session// Create Stripe Checkout Session
POST /api/checkout
→ Fetch cart items
→ Create Stripe checkout session with line items
→ Return client_secret for payment UI
// Checkout page
→ Render Stripe CheckoutProvider with client_secret
→ Collect shipping address and payment details
→ Validate all fields (email, address, payment)
→ Submit payment via Stripe
// Payment completion
GET /checkout/complete?session_id=...
→ Verify payment status with Stripe
→ Display order confirmation
→ Clear cart and redirect- Breakpoint Strategy: Mobile-first with
sm:,md:,lg:breakpoints - Filter Panel: Slide-over on mobile, sidebar on desktop
- Navigation: Hamburger menu on mobile, full nav on desktop
- Images: Responsive sizing with Next.js Image optimization
- Checkout Flow: Optimized form layout for mobile and desktop
# Development
npm run dev # Start dev server
npm run build # Build for production
npm run start # Start production server
# Database
npx drizzle-kit generate # Generate migrations
npx drizzle-kit migrate:push # Apply migrations
npx drizzle-kit studio # Open Drizzle Studio
# Utilities
npm run lint # Run ESLint
npm run type-check # TypeScript type checking