Modern Ecommerce Platform

A full-featured ecommerce website built with Next.js 14, TypeScript, and Tailwind CSS. Features include product search, user authentication, shopping cart, payment processing, and order management.

Features

• 🎨 Modern, responsive design with smooth animations
• 🛍️ Complete shopping cart functionality with quantity management
• 🔍 Advanced product search and category filtering
• 💳 Stripe payment integration
• 📦 Order history and tracking
• 👤 User profiles with address management
• 🔐 Multiple authentication providers (Google, GitHub, Email)
• 📱 Fully responsive mobile-friendly layout
• ⚡ Optimized performance with image lazy loading and caching
• 💾 SQLite database with Prisma ORM

Getting Started

Prerequisites

• Node.js 18+ installed
• npm or yarn package manager

Installation

1. Install dependencies:

npm install

2. Set up environment variables:

   • Create a .env file in the root directory
   • Add the following variables:

     DATABASE_URL="file:./dev.db"
     NEXTAUTH_URL=http://localhost:3000
     NEXTAUTH_SECRET=your-secret-key-here
     
     # Google OAuth
     GOOGLE_CLIENT_ID=your-google-client-id
     GOOGLE_CLIENT_SECRET=your-google-client-secret
     
     # GitHub OAuth (optional)
     GITHUB_CLIENT_ID=your-github-client-id
     GITHUB_CLIENT_SECRET=your-github-client-secret
     
     # Stripe (optional, for payments)
     STRIPE_SECRET_KEY=your-stripe-secret-key
     NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your-stripe-publishable-key
     STRIPE_WEBHOOK_SECRET=your-stripe-webhook-secret
     
     # Email Provider (optional)
     EMAIL_SERVER_HOST=smtp.example.com
     EMAIL_SERVER_PORT=587
     EMAIL_SERVER_USER=your-email
     EMAIL_SERVER_PASSWORD=your-password
     EMAIL_FROM=noreply@example.com

   • Generate NEXTAUTH_SECRET:

     openssl rand -base64 32

   • Get OAuth credentials:
     • Google: Google Cloud Console
     • GitHub: GitHub Developer Settings
     • Stripe: Stripe Dashboard

3. Set up the database:

npx prisma generate
npx prisma migrate dev --name init

4. Run the development server:

npm run dev

5. Open http://localhost:3000 in your browser

Project Structure

├── app/
│   ├── api/
│   │   ├── auth/          # NextAuth API routes
│   │   ├── checkout/      # Stripe checkout endpoint
│   │   ├── orders/        # Order management API
│   │   ├── user/          # User profile API
│   │   └── webhooks/      # Stripe webhooks
│   ├── auth/
│   │   └── login/         # Login page
│   ├── cart/             # Shopping cart page
│   ├── profile/          # User profile and orders
│   ├── products/         # Product listing and detail pages
│   ├── layout.tsx        # Root layout
│   ├── page.tsx          # Home page
│   └── globals.css       # Global styles
├── components/
│   ├── Navbar.tsx        # Navigation bar
│   ├── Hero.tsx          # Hero section
│   ├── ProductCard.tsx   # Product card component
│   ├── SearchBar.tsx     # Search and filter component
│   ├── CartProvider.tsx
│   └── SessionProvider.tsx
├── lib/
│   ├── prisma.ts         # Prisma client
│   └── auth.ts           # Auth helpers
├── prisma/
│   └── schema.prisma     # Database schema
├── store/
│   └── cartStore.ts     # Zustand cart state management
└── data/
    └── products.ts      # Product data

Technologies Used

• Next.js 14 - React framework with App Router
• TypeScript - Type safety
• Tailwind CSS - Utility-first CSS framework
• Zustand - Lightweight state management
• NextAuth.js - Authentication library
• Prisma - Next-generation ORM
• SQLite - Database
• Stripe - Payment processing
• Framer Motion - Animation library
• Lucide React - Icon library
• Next Image - Optimized image component

Features in Detail

Product Search & Filtering

• Real-time search across product names and descriptions
• Category-based filtering
• Responsive search interface

Shopping Cart

• Add/remove items
• Quantity management
• Real-time total calculation
• Persistent cart state

Payment Processing

• Stripe integration for secure payments
• Payment intent creation
• Webhook handling for payment status updates
• Order creation and tracking

User Management

• Multiple authentication methods
• User profile management
• Shipping address management
• Order history view

Performance Optimizations

• Image lazy loading
• Optimized image sizes and formats
• CSS animations with GPU acceleration
• Efficient state management

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository in Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

The project includes vercel.json configuration for easy deployment.

Other Platforms

The application can be deployed to any platform that supports Next.js:

• Netlify
• AWS Amplify
• Railway
• DigitalOcean App Platform

Customization

• Add products in data/products.ts
• Customize theme in tailwind.config.js
• Modify components in the components/ directory
• Update styles in app/globals.css
• Adjust database schema in prisma/schema.prisma

Build for Production

npm run build
npm start

License

MIT