Haute couture re-defined. AW/26.
DUTA is a world-class, AI-era, ultra-premium clothing brand e-commerce web application. Built with Next.js 15 App Router, Express.js, MongoDB, and a cinematic design system inspired by Represent, Fear of God Essentials, Zara, COS, and Apple.
- Cinematic Hero Section — fullscreen image carousel with typography reveals, floating badges, and ambient overlays
- Category Matrix — interactive hover zoom effects for Men, Women, Oversized, Streetwear, Minimal
- Editorial Collections Grid — featured seasonal drops
- Best Sellers Slider — horizontal scroll with color swatches & size quick-add
- Trending Masonry — dynamic product grid
- Quick View Modal — product preview without leaving the page
- AI Size Advisor — recommends the perfect size based on measurements
- 360° Product Viewer — rotatable product canvas
- Cart Drawer — right-to-left slide-in with item management
- Full Cart Page — with promo code engine, delivery estimates, and fee breakdown
- Multi-Step Checkout — address → shipping → payment (Razorpay simulation + Stripe-ready)
- Order Confirmation — printable receipt, fireworks animation
- JWT Authentication — email/password, OTP verification, Google OAuth flow
- User Dashboard — orders, saved addresses, wishlist manager, profile settings
- Order Tracking — status timeline from placed → delivered
- DUTA AI Stylist — chatbot drawer with style suggestions, outfit recommendations
- AI-Powered Search — voice search + image drop zone UI
- Dark/Light Mode — persistent theme with glassmorphism panels
- Luxury Typography — Cormorant Garamond + Syne + Inter
- Gold Accent Palette —
#d4af37premium gold throughout - Micro-animations — hover effects, skeleton loaders, shimmer, confetti
- Custom Scrollbar — amber-gold scrollbar thumb
- Analytics Overview — Recharts area charts for revenue, orders, customers
- Product CMS — create, edit, delete products
- Order Management — status updater with tracking numbers
- Coupon Generator — percentage/flat discount codes with usage limits
- Dynamic Metadata — per-page title/description/OG tags
- Sitemap.xml — auto-generated via
/sitemap.ts - Robots.txt — blocks admin/checkout from indexing
- Structured Schema —
ClothingStoreJSON-LD
| Layer | Technology |
|---|---|
| Frontend Framework | Next.js 16 (App Router) |
| UI Library | React 19 |
| Language | TypeScript |
| Styling | Tailwind CSS v4 |
| Animations | Framer Motion |
| State Management | Zustand (persist middleware) |
| Data Fetching | TanStack Query v5 |
| Charts | Recharts |
| Icons | Lucide React |
| Backend | Node.js + Express.js |
| Database | MongoDB + Mongoose |
| Authentication | JWT + bcryptjs |
| Image Hosting | Cloudinary (ready) |
| Payments | Razorpay (stub) + Stripe architecture |
| Containerization | Docker + Docker Compose |
- Node.js 20+
- MongoDB (local or Atlas)
- npm 10+
git clone https://github.com/yourusername/duta.git
cd duta
npm installcp .env.example .env.local
# Edit .env.local and fill in your valuesnpm run dev
# → http://localhost:3000npm run server:dev
# → http://localhost:5000npm run dev:all# Start the full stack (MongoDB + Server + Frontend)
docker compose up -d
# Frontend: http://localhost:3000
# API: http://localhost:5000
# MongoDB: localhost:27017duta/
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── page.tsx # Homepage
│ │ ├── layout.tsx # Root layout (SEO metadata + global modals)
│ │ ├── shop/ # Product catalog
│ │ ├── product/[id]/ # Product detail page
│ │ ├── cart/ # Shopping cart
│ │ ├── checkout/ # Multi-step checkout
│ │ ├── order-success/[id]/ # Order confirmation
│ │ ├── account/ # User dashboard
│ │ ├── admin/ # Admin panel
│ │ ├── lookbook/ # Interactive lookbook
│ │ ├── journal/ # Fashion blog
│ │ ├── contact/ # Contact page
│ │ ├── sitemap.ts # Dynamic sitemap
│ │ └── robots.ts # Robots.txt
│ ├── components/
│ │ ├── ui/ # Navbar, Footer, CartDrawer, etc.
│ │ ├── home/ # Hero, Categories, BestSellers, etc.
│ │ ├── product/ # QuickView, AiSize modals
│ │ ├── ai/ # AI Stylist chatbot
│ │ ├── auth/ # Auth modal
│ │ ├── search/ # Search overlay
│ │ └── providers/ # QueryClient + theme providers
│ └── lib/
│ ├── data/mockData.ts # TypeScript product/collection data
│ ├── store/ # Zustand stores (cart, wishlist, auth, ui, theme, admin)
│ └── utils.ts # Helper functions
├── server/
│ ├── index.js # Express server entry point
│ ├── Dockerfile # Express Dockerfile
│ └── models/ # Mongoose schemas
│ ├── Product.js
│ ├── Order.js
│ ├── User.js
│ ├── Review.js
│ └── Coupon.js
├── Dockerfile # Next.js Dockerfile
├── docker-compose.yml # Full stack Docker Compose
├── .env.example # Environment variables template
└── next.config.ts # Next.js configuration
| Method | Route |
|---|---|
| Register | POST /api/auth/register |
| Login | POST /api/auth/login |
| Email OTP | POST /api/auth/send-otp → POST /api/auth/verify-otp |
| Get Profile | GET /api/auth/me (Bearer token) |
POST /api/payment/razorpay/create-orderPOST /api/payment/razorpay/verify- To activate: add
RAZORPAY_KEY_ID+RAZORPAY_KEY_SECRETto.env.local
- Add Stripe SDK and uncomment Stripe routes
vercel --prodSet all NEXT_PUBLIC_* environment variables in Vercel dashboard.
Create a new Web Service pointing to server/index.js.
Set MONGODB_URI, JWT_SECRET, and other secrets in Render environment.
MIT License — © 2026 DUTA Fashion Studio