Riggel
Full Stack E commerce Platform
A high-performance e-commerce platform built with the Next.js App Router and MySQL, featuring advanced caching, server-side filtering, and a custom-built admin panel.
Hero Section
Categories Section
Newsletter Section
Shop Page
Product Details Page
Shopping Cart
Order Confirmation
Dashboard Login
Dashboard Overview
Dashboard Products
Project Overview
Riggel is an enterprise-grade e-commerce platform built for selling clothing products online. The application serves two primary user groups: customers who browse and purchase products through a modern storefront, and administrators who manage inventory, orders, categories, and sales campaigns through a protected dashboard. The platform supports complex product variants (sizes, colors), real-time inventory tracking, promotional sales, guest checkout, and automated email order confirmations.
Tech Stack
Frontend
Backend & Database
Key Features
System Flow
Customer Product Browsing: User navigates to /shop → Next.js pre-renders with ISR (5-min revalidation) → Client hydrates, loads filter preferences from URL params → API call to /api/products with filters → Proxy middleware validates (public route) → Dynamic SQL query with WHERE clauses, JOINs → MySQL pool connection executes → Calculate sale prices, format data → Return JSON with products array and total → Client renders product cards with lazy-loaded images
Checkout & Order Placement: User fills checkout form → Client validates email/phone → POST to /api/orders with cart items and customer info → Middleware allows public POST → Transaction begins → Loop through cart items, validate stock atomically → UPDATE product_variants SET quantity = quantity - ? WHERE variant_id = ? AND quantity >= ? → Insert order record with UUID token → Insert order_items → Transaction commits (or rolls back on error) → Call Resend API for order confirmation email → Return order ID and token → Redirect to /thankyou with token → Guest can track via /api/orders/{token}
Admin Dashboard Access: User navigates to /dashboard → Proxy checks auth-token cookie → JWT verification with Jose, validates signature → Role check (admin/editor required) → If authorized, allow; else redirect to /login or /forbidden → SSR renders dashboard → Client fetches analytics data → Multiple parallel requests to /api/products, /api/orders, /api/users → Client calculates metrics, renders charts and tables
Admin Product Creation: Admin opens product form modal → Fills name, description, categories, variants (SKU, price, qty, attributes) → Upload images via /api/upload → Server checks magic bytes, MIME type, size → Write to /public/uploads/{productId}/{randomHash}.{ext} → Generate unique SKU per variant → Transaction: INSERT product → product_variants → variant_values → product_images → product_categories → Return success → Client refetches product list → Modal closes, table refreshes
Guest Order Tracking: Customer receives email with order token → Visits /thankyou?token={uuid} → Public GET request to /api/orders/{token} (no auth needed) → Query order with JOIN to order_items and product_variants → Return order details with line items → Display order summary and status
Benefits
Scalability
Connection pooling (10 concurrent connections) supports high traffic. Transaction atomicity prevents overselling. Indexed queries and prepared statements optimize performance.
Modern Architecture
Next.js 16 App Router with React Server Components, ISR (5-min revalidation), and hybrid SSR/CSR deliver optimal performance and SEO.
Guest Checkout
Reduces friction and increases conversion rates. Token-based order tracking enables self-service customer support without registration.
Multi-Variant Support
Complex product variants (colors, sizes) reduce SKU count while offering variety. Dynamic attribute system supports any product type.
Inventory Accuracy
Atomic stock deduction with database transactions prevents overselling. Real-time stock validation with low stock alerts (< 10 units).
Sales Campaigns
Time-based promotions with percentage/fixed discounts drive revenue and urgency. Many-to-many product-sale relationships enable flexible campaigns.
Admin Efficiency
Centralized dashboard with real-time analytics, bulk operations, and role-based access. Visual metrics with month-over-month growth tracking.
Email Automation
Resend API integration for instant order confirmations reduces support burden and enhances customer trust.
SEO Excellence
SSR with dynamic metadata, Open Graph tags for social sharing, and sitemap generation ensure maximum search visibility.
Security
JWT authentication with httpOnly cookies, bcrypt password hashing, magic byte file validation, parameterized queries prevent SQL injection, and XSS protection.
Developer Experience
Path aliases (@/*), ESLint integration, hot reload, Turbopack builds, modular components, and clear separation of concerns accelerate development.
Mobile Commerce
Responsive design with touch-enabled carousels, drawer navigation, and optimistic UI captures mobile shoppers (50%+ of traffic).
Cost Efficiency
Self-hosted file storage eliminates third-party costs. Connection pooling optimizes resource usage. No external cart services required.
Error Resilience
Transaction rollbacks, graceful error handling with user-friendly messages, and comprehensive validation ensure data integrity and reliability.