A full-stack watch e-commerce site built with Next.js 15.5.3, MongoDB, and Razorpay payment integration.

• 🛍️ Product Catalog: Browse watches by collections with SSG (Static Site Generation)
• 🛒 Shopping Cart: Add/remove items, update quantities
• 💳 Secure Payments: Razorpay integration with signature verification
• 👨‍💼 Admin Panel: Manage orders, update order status
• 🔒 Secure Authentication: JWT-based admin authentication
• 📱 Responsive Design: Mobile-friendly UI with Tailwind CSS
• ⚡ Performance: ISR (Incremental Static Regeneration) for fast page loads

• Framework: Next.js 15.5.3 (App Router)
• Database: MongoDB
• Payment: Razorpay
• Styling: Tailwind CSS
• Authentication: JWT + bcrypt
• Language: TypeScript

• Node.js 18+ and npm
• MongoDB instance (local or MongoDB Atlas)
• Razorpay account with API keys

npm install

Create a .env.local file in the root directory:

# MongoDB
MONGODB_URI=mongodb://localhost:27017/watch-store
# Or use MongoDB Atlas: mongodb+srv://username:password@cluster.mongodb.net/watch-store

# Razorpay
RAZORPAY_KEY_ID=your_razorpay_key_id
RAZORPAY_KEY_SECRET=your_razorpay_key_secret
NEXT_PUBLIC_RAZORPAY_KEY_ID=your_razorpay_key_id

# JWT Secret for admin authentication
JWT_SECRET=your_super_secret_jwt_key_change_this_in_production

# App URL
APP_URL=http://localhost:3000

# ISR Revalidation (in seconds)
REVALIDATE_SECONDS=60

1. Install MongoDB locally
2. Start MongoDB service
3. Update MONGODB_URI in .env.local

1. Create a MongoDB Atlas account
2. Create a new cluster
3. Get connection string and update MONGODB_URI

Run the seed script to create an admin user:

npm run seed

Or manually create an admin user in MongoDB:

// In MongoDB shell or Compass
use watch-store;
db.admins.insertOne({
  username: "admin",
  passwordHash: "$2a$10$...", // bcrypt hash of your password
  role: "admin",
  createdAt: new Date(),
  updatedAt: new Date()
});

To generate a bcrypt hash:

node -e "const bcrypt = require('bcryptjs'); console.log(bcrypt.hashSync('yourpassword', 10));"

Create sample collections and products in MongoDB:

// Collections
db.collections.insertMany([
  {
    title: "Luxury Collection",
    slug: "luxury-collection",
    description: "Premium luxury timepieces",
    image: "https://example.com/luxury.jpg",
    createdAt: new Date(),
    updatedAt: new Date()
  }
]);

// Products
db.products.insertMany([
  {
    title: "Classic Watch",
    slug: "classic-watch",
    sku: "WATCH-001",
    price: 50000, // in paisa (₹500.00)
    currency: "INR",
    collectionId: ObjectId("..."), // Use collection _id
    images: ["https://example.com/watch1.jpg"],
    description: "A classic timepiece",
    specs: {
      weight: "150g",
      caseSize: "42mm",
      movement: "Automatic"
    },
    stock: 10,
    featured: true,
    createdAt: new Date(),
    updatedAt: new Date()
  }
]);

npm run dev

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

watch-store/
├── app/                    # Next.js app directory
│   ├── api/               # API routes
│   │   ├── admin/        # Admin endpoints
│   │   ├── checkout/     # Checkout & payment
│   │   ├── collections/  # Collections API
│   │   ├── products/     # Products API
│   │   └── webhooks/     # Razorpay webhooks
│   ├── admin/            # Admin pages
│   ├── all/              # All products page
│   ├── cart/             # Shopping cart
│   ├── checkout/         # Checkout page
│   ├── collections/      # Collections pages (SSG)
│   ├── order/            # Order confirmation
│   ├── products/         # Product pages (SSG)
│   └── page.tsx          # Home page
├── components/            # React components
├── lib/                  # Utilities
│   ├── auth.ts          # JWT authentication
│   ├── cart.ts          # Cart management
│   ├── mongodb.ts       # MongoDB connection
│   ├── models.ts        # TypeScript models
│   └── razorpay.ts      # Razorpay utilities
└── public/               # Static assets

• GET /api/collections - List all collections
• GET /api/collections/[slug] - Get collection with products
• GET /api/products - List products (with filters/pagination)
• GET /api/products/[slug] - Get product details
• POST /api/checkout/create-order - Create order and Razorpay order
• POST /api/checkout/verify - Verify payment signature
• POST /api/webhooks/razorpay - Razorpay webhook handler

• POST /api/admin/login - Admin login
• GET /api/admin/orders - List orders
• GET /api/admin/orders/[id] - Get order details
• PATCH /api/admin/orders/[id] - Update order status

1. Customer fills checkout form
2. Server creates order in MongoDB
3. Server creates Razorpay order
4. Client opens Razorpay checkout
5. After payment, client sends payment details to /api/checkout/verify
6. Server verifies signature and updates order status
7. Webhook also confirms payment (redundancy)

Use Razorpay test keys for development. Test cards:

• Success: 4111 1111 1111 1111
• Failure: 4000 0000 0000 0002

1. Push code to GitHub
2. Import project in Vercel
3. Add environment variables
4. Deploy

1. Create cluster
2. Whitelist Vercel IPs (or use 0.0.0.0/0 for development)
3. Get connection string
4. Add to Vercel environment variables

1. In Razorpay dashboard, add webhook URL: https://yourdomain.com/api/webhooks/razorpay
2. Select events: payment.captured
3. Copy webhook secret (if using separate secret)

• ✅ JWT-based admin authentication
• ✅ bcrypt password hashing
• ✅ Razorpay signature verification
• ✅ Input validation with Zod
• ✅ HTTP-only cookies for tokens
• ✅ Server-side payment verification
• ✅ Webhook signature verification

npm run build
npm start

npm run lint

• Check MONGODB_URI is correct
• Ensure MongoDB is running (if local)
• Check network access (if Atlas)

• Verify API keys are correct
• Check webhook URL is accessible
• Ensure signature verification logic is correct

• Verify admin user exists in database
• Check password hash is correct
• Ensure JWT_SECRET is set

MIT

For issues and questions, please open an issue on GitHub.