lyconstitches

byusman mutolib

Build LYCON STITCHES — Premium E-Commerce Website Build a real, production-ready e-commerce website + admin dashboard for LYCON STITCHES, a premium Nigerian men's fashion brand specializing in Jalabiyah, Native Wear, Kaftan, Senator Wear, Agbada, and Ready-Made clothing. Brand & Design Create a luxury, modern, minimal, mobile-first fashion experience. Colors: - Black "#000000" - White "#FFFFFF" - Gold "#D4AF37" - Light Grey "#F5F5F5" Hero headline: CRAFTED FOR THE MODERN MAN Subtext: Premium Nigerian men's fashion, carefully designed and expertly stitched. Buttons: - Shop Collection - Order on WhatsApp Make the design unique and premium, not a generic template. Tech Stack Use: - Next.js + App Router - React - TypeScript - Tailwind CSS - Supabase PostgreSQL - Supabase Auth - Supabase Storage - Paystack - Vercel Use secure environment variables. Never expose secret keys. Customer Pages Create: - Home - Shop - Product Details - Categories - Cart - Checkout - Wishlist - Login/Register - Account - Order History - Order Confirmation - About - Contact Shop Products must support: - Product images - Name - Description - Price - Discount price - Category - Sizes - Colors - Stock - SKU - Featured/New status Add: - Search - Category filter - Price filter - Size filter - Sorting - Pagination Categories: Jalabiyah, Native Wear, Kaftan, Senator Wear, Agbada, Ready Made, Accessories. Product Page Show: - Image gallery - Product name - Price - Discount - Description - Sizes - Colors - Stock - Quantity selector - Add to Cart - Buy Now - Wishlist - Order on WhatsApp - Related products - Reviews Cart Customers can: - Add/remove products - Change quantity - See subtotal - See delivery fee - See total - Continue shopping - Checkout Persist cart after refresh. Checkout Collect: - Full name - Email - Phone - WhatsApp - State - City - Address - Delivery instructions Show complete order summary. Payment options: Pay Online Order via WhatsApp Paystack Payment Integrate real Paystack payments for Nigeria: - Card - Bank Transfer - USSD - Supported Paystack methods Payment flow: Cart → Checkout → Create pending order → Paystack → Server-side verification → Mark paid → Reduce stock → Order confirmation. Never trust payment status from the frontend. Use: "PAYSTACK_SECRET_KEY" "NEXT_PUBLIC_PAYSTACK_PUBLIC_KEY" Orders Store: - Order number - Customer - Products - Quantity - Price - Address - Delivery fee - Total - Payment reference - Payment status - Order status - Date Statuses: Payment: Pending, Paid, Failed, Refunded Order: Pending, Processing, Ready, Shipped, Delivered, Cancelled Generate order numbers such as: "#LYC-2026-0001" Admin Dashboard Create protected: "/admin" Admin overview: - Total sales - Today's sales - Total orders - Pending orders - Completed orders - Total products - Low-stock products - Sales/order charts Only authorized admins can access it. Product Management Create: "/admin/products" Admin must be able to: - Add product - Upload multiple images - Edit product - Delete product - Change price - Add discount - Manage stock - Add sizes/colors - Select category - Add SKU - Mark featured/new - Publish/unpublish Main workflow: Products → Add Product → Upload Photos → Name → Price → Description → Category → Sizes → Colors → Stock → Publish Once published, the product must immediately appear in the Shop. Use Supabase Storage for images. Order Management Create: "/admin/orders" Admin can: - View orders - Search/filter - View customer information - View products - View payment status - Change order status - Update delivery information - Cancel orders Customers Create: "/admin/customers" Show: - Name - Email - Phone - Orders - Total spent - Last order Authentication Use Supabase Auth. Customers: - Register - Login - Logout - Reset password - Account - Order history Use role-based access so customers cannot access "/admin". WhatsApp Add configurable Lycon Stitches WhatsApp number. "Order on WhatsApp" should automatically create a message containing: - Product - Size - Color - Quantity - Price Add WhatsApp support throughout the website. Database Use Supabase PostgreSQL with tables for: - users - products - product_images - categories - orders - order_items - reviews - wishlists - delivery_fees Implement relationships, indexes, validation and Row Level Security. Delivery Create configurable delivery fees by location, such as: - Ilorin - Lagos - Abuja - Other states Admin should be able to change delivery fees without modifying code. Security Implement: - Supabase RLS - Protected admin routes - Authentication - Authorization - Server-side Paystack verification - Input validation - Secure API routes - Environment variables Never expose secret credentials. SEO & Performance Implement: - SEO metadata - Open Graph - Product structured data - Sitemap - Robots.txt - Clean product URLs - Optimized images - Fast loading - Responsive design Support: Android, iPhone, Tablet, Laptop and Desktop. Required Components Create reusable: Navbar, Footer, ProductCard, ProductGrid, ProductGallery, SearchBar, Cart, CheckoutForm, OrderSummary, AdminSidebar, AdminHeader, ProductForm, OrderTable, DashboardStats, Toast, Modal, Loading and Empty states. Sample Products Seed: - Premium Black Jalabiyah — ₦45,000 - Royal Navy Jalabiyah — ₦50,000 - Cream Kaftan — ₦55,000 - Luxury Senator Wear — ₦65,000 - Premium Agbada — ₦120,000 Make products editable/deletable from the admin dashboard. IMPORTANT Do not build a static demo. Build a fully functional business application. Everything must actually work: Products → Images → Shop → Cart → Checkout → Paystack → Payment Verification → Order → Stock → Admin Dashboard Also make: Admin → Add Product → Publish → Product appears in Shop Use real Supabase database/storage and real Paystack integration. Prepare the project for Vercel deployment. Finally provide: 1. Complete source code 2. Database SQL 3. ".env.example" 4. Setup instructions 5. Paystack configuration 6. Supabase configuration 7. Admin setup 8. Vercel deployment instructions Build LYCON STITCHES as a premium, scalable Nigerian fashion e-commerce platform.