Facelees

The root route functions as both the main landing page and the complete shop interface. It prominently features a rotating hero banner section (controlled by admin), brand logo showcase, and a rich product grid with advanced filtering capabilities.

Products display primary image, brand name (extracted from description), product name, short teaser description, real-time discounted price, original price strikethrough (when discounted), stock availability badge, and prominent Add/Remove from Cart buttons.

Fully public — no authentication required. Optimized for fast loading with Cloudflare edge caching.

• Dynamic hero banner carousel with admin-defined order and visibility
• Brand logos section for visual trust-building
• Responsive 1–5 column product grid (mobile to desktop)
• Instant search across name, brand, category, and short description
• Price sorting (low → high / high → low) with discounted price logic
• Visual indicators: discount badge, out-of-stock overlay, in-stock green badge
• Smooth hover animations and image zoom effect
• Skeleton loading states during initial fetch

Access to any admin functionality is strictly limited to a predefined list of Gmail addresses. Normal visitors cannot register or log in — registration and login forms include real-time validation and clear restricted-access messaging.

Login supports secure credential checking with detailed error feedback. Registration requires double confirmation and redirects to login upon success. Both pages use a luxurious dark theme with gold accents consistent with the brand.

• Hard-coded admin Gmail whitelist verification
• Real-time input validation (Gmail only, password length, required fields)
• Prominent restricted access warnings with red alert styling
• Seamless redirect after successful login to shop
• Responsive, centered form layout with dark modern aesthetic
• Fake hidden fields to improve autofill behavior on mobile/desktop

Persistent cart state allows users to add, remove, and adjust quantities of products. Real-time subtotal calculation includes discount application per item. Checkout uses a clean modal for Cash on Delivery orders, collecting essential delivery information with strong validation.

On successful order placement, the cart clears, an order ID is generated, and a confirmation dialog offers to view orders (redirects to /orders if confirmed).

• Real-time cart updates with quantity +/- controls
• Item removal with confirmation
• Accurate subtotal with per-item discounted pricing
• COD checkout modal with name, address (textarea), and 11-digit mobile validation
• Mobile number format enforcement (starts with 01, exactly 11 digits)
• Success feedback with order summary popup
• Continue shopping link and clear cart option
• Responsive two-column layout on desktop

Comprehensive admin interface for managing the entire product inventory. Admins can create new products (with image upload and preview), edit all fields (including separate short/long descriptions + brand name), toggle stock & visibility, or delete items (with safety checks).

Includes duplicate name prevention, character limits on descriptions, 500-product hard cap, search across multiple fields, and clean card-based display with brand highlighting.

• Full CRUD for products with optimistic UI updates
• Image upload (max 5MB) with live preview and remove option
• Combined description field parsed into short/long/brand for display
• In-stock / active toggles with visual indicators
• Category input (lowercased automatically)
• Search by name/category/brand/short description
• Hard limit of 500 products enforced
• Responsive grid layout with hover effects

Dedicated admin section to manage the rotating hero banners on the landing page. Admins can upload new wide-format images, set unique animation order (sorting priority), toggle visibility, edit existing banners, or delete them.

Enforces maximum 20 images and prevents duplicate serial numbers. Includes aspect ratio guidance (25:10 recommended) for best display across devices.

• Add/edit/delete hero banners with image upload
• Unique animationSerial control (1 = first shown)
• Active/inactive toggle with overlay indicator
• Image preview with remove button
• 20-banner strict limit with warning
• Sorted display by animation order
• Responsive banner cards with overlay controls

Powerful admin overview showing every placed order with advanced filtering by status (all/pending/confirmed/shipped/delivered/cancelled), free-text search (name/email/mobile/address), and date sorting (newest/oldest).

Each order card displays complete customer details, full item list with images/prices/subtotals, total amount, and one-click status change buttons with optimistic UI and rollback on failure.

• Complete order list with real-time status updates
• Multi-filter: status dropdown + keyword search
• Date sorting toggle (newest/oldest first)
• Detailed view: customer info, items grid, grand total
• Status change buttons with visual feedback
• Responsive card layout with color-coded status badges
• Error handling with rollback on failed updates

Simple yet secure admin profile page displaying name and email. Provides direct link to change password and a prominent logout button with confirmation dialog.

Ensures admins can maintain account security without exposing unnecessary fields.

• Display of admin name and email
• Dedicated 'Change Password' navigation
• Secure logout with confirmation prompt
• Consistent dark/gold theme matching the brand
• Responsive two-column layout on larger screens

Developed using Next.js 14+ App Router with TypeScript for full type safety and maintainability. Tailwind CSS powers a consistent dark-mode, luxury-feel UI with gold accents. All data (products, hero images, orders) is stored and managed in MongoDB with efficient schemas and real-time hooks.

Cloudflare provides edge caching, DDoS protection, global CDN delivery, and performance optimization. Features include protected admin routes, optimistic UI updates, form validation, image upload handling, responsive design across all devices, and production-ready error handling.

• Next.js App Router + TypeScript full-stack architecture
• Tailwind CSS responsive dark theme with gold branding
• MongoDB for products, orders, and hero images persistence
• Cloudflare for speed, security, and global edge delivery
• Admin-only route protection via Gmail whitelist
• Real-time cart state management with hooks
• Optimistic updates & rollback on failed mutations
• Image upload validation (size/format/preview)
• Mobile-first responsive design throughout