System Requirements Document for lyconstitches

1. Introduction

Lycon Stitches is a premium Nigerian men's fashion brand specializing in Jalabiyah, Native Wear, Kaftan, Senator Wear, Agbada, and Ready-Made clothing. This document outlines the system requirements for building a real, production-ready e-commerce website and admin dashboard for Lycon Stitches. The goal is to create a luxury, modern, minimal, mobile-first fashion experience that is scalable and secure.

2. System Overview

The Lycon Stitches platform will be a fully functional e-commerce website with an integrated admin dashboard. It will feature a luxury design inspired by the MARQ by Garmin aesthetic, emphasizing precision and elegance. The platform will support a comprehensive product catalog, secure transactions via Paystack, and robust admin capabilities for managing products, orders, and customers.

2a. Product Interpretation and Delivery Boundary

The platform will be delivered as a web application using Next.js, React, and TypeScript, with a backend powered by Supabase PostgreSQL. It will be deployed on Vercel, ensuring scalability and performance. The system will include secure authentication and authorization mechanisms, leveraging Supabase Auth and environment variables to protect sensitive information. The admin dashboard will be accessible only to authorized personnel, with role-based access control to prevent unauthorized access.

2b. Source Content Inventory

Not applicable as no explicit content source directive was provided.

2c. Page Content and Component Coverage

Home

• Hero Section: Full-bleed image with headline "CRAFTED FOR THE MODERN MAN" and subtext.
• Buttons: Shop Collection, Order on WhatsApp.
• Featured Products: Display of selected products with images and quick actions.

Shop

• Product Grid: Display products with images, prices, and quick actions.
• Filters: Search, category, price, size, sorting, and pagination.
• Categories: Jalabiyah, Native Wear, Kaftan, Senator Wear, Agbada, Ready Made, Accessories.

Product Details

• Image Gallery: High-resolution images with zoom.
• Product Info: Name, price, discount, description, sizes, colors, stock, SKU.
• Actions: Add to Cart, Buy Now, Wishlist, Order on WhatsApp.
• Related Products: Suggestions based on category.
• Reviews: Customer feedback and ratings.

Cart

• Cart Items: List of products with quantity selector.
• Summary: Subtotal, delivery fee, total.
• Actions: Continue shopping, proceed to checkout.
• Persistence: Cart state maintained after refresh.

Checkout

• Form: Collect customer details (name, email, phone, address, delivery instructions).
• Order Summary: Display of selected items and total cost.
• Payment Options: Pay Online, Order via WhatsApp, Paystack integration.

Wishlist

• Product List: Saved items for future purchase.
• Actions: Add to cart, remove from wishlist.

Login/Register

• Forms: User registration and login with Supabase Auth.
• Actions: Reset password, logout.

Account

• User Info: Display and edit personal details.
• Order History: List of past orders with status.

Order History

• Order List: Display of previous orders with details and status.

Order Confirmation

• Summary: Confirmation of order details and payment status.

About

• Content: Information about Lycon Stitches and its mission.

Contact

• Form: Customer inquiries and support requests.

Admin Dashboard

• Overview: Sales statistics, order status, product inventory.
• Protected Access: Role-based access for authorized admins only.

Admin Products

• Management: Add, edit, delete products; manage stock and categories.
• Workflow: Product creation and publishing.

Admin Orders

• Order Management: View, filter, and update order status.
• Customer Info: Access customer details and order history.

Admin Customers

• Customer List: View customer information and purchase history.

3. Functional Requirements

• As a customer, I should be able to browse products by category, apply filters, and sort results to find items of interest. (explicit)
• As a customer, I should be able to view detailed product information, including images, descriptions, and available options. (explicit)
• As a customer, I should be able to add products to my cart, adjust quantities, and proceed to checkout. (explicit)
• As a customer, I should be able to complete a purchase using Paystack, with secure server-side verification of payment. (explicit)
• As an admin, I should be able to manage products, including adding, editing, and deleting items, and updating stock levels. (explicit)
• As an admin, I should be able to view and manage customer orders, including updating order status and handling cancellations. (explicit)
• As a customer, I should be able to register, log in, and manage my account details securely. (explicit)
• As a customer, I should be able to view my order history and track the status of my orders. (explicit)
• As a customer, I should be able to save products to a wishlist for future reference. (explicit)
• As an admin, I should be able to access sales and order statistics through a secure dashboard. (explicit)

4. User Personas

• Customer: Individuals interested in purchasing premium Nigerian men's fashion. They browse products, manage their cart, complete purchases, and track orders.
• Admin: Authorized personnel responsible for managing the product catalog, processing orders, and overseeing customer interactions.

5. Core User Flows

Customer Browsing and Shopping

1. Browse Products: Customer visits the Shop page, applies filters, and sorts products.
2. View Product Details: Customer selects a product to view detailed information.
3. Add to Cart: Customer adds the product to the cart and adjusts quantities as needed.
4. Proceed to Checkout: Customer reviews the cart and proceeds to checkout.
5. Complete Purchase: Customer enters delivery information and selects a payment method.
6. Order Confirmation: Customer receives confirmation of the order and payment status.

Admin Product Management

1. Access Dashboard: Admin logs into the secure admin dashboard.
2. Manage Products: Admin adds new products, edits existing ones, and updates stock levels.
3. Publish Products: Admin publishes products, making them available in the Shop.

Admin Order Management

1. View Orders: Admin accesses the order management section to view all orders.
2. Update Order Status: Admin updates the status of orders as they are processed.
3. Handle Cancellations: Admin cancels orders as necessary and updates the system.

6. Visuals Colors and Theme

• Muse: MARQ by Garmin
• Palette:
  • Background: #000000
  • Surface: #F5F5F5
  • Text: #FFFFFF
  • Primary: #D4AF37
  • Accent: #D4AF37
  • Muted: #F5F5F5
• Typography:
  • Headings: Barlow Condensed, bold, uppercase
  • Body: Karla
  • Scale: 1.5 modular, 64/48/32/24/16
• Shape Language: Circular gauges and precise data rows
• Layout: Edge-to-edge product photography with dark UI
• Imagery: Macro product photography focusing on material detail

7. Signature Design Concept

The homepage will feature a full-bleed hero image showcasing the intricate detail of a garment's fabric. The headline "CRAFTED FOR THE MODERN MAN" will be prominently displayed in bold, uppercase Barlow Condensed over a gold accent. Navigation will be refined with minimalistic icons and labels, and circular gauge elements will highlight product details on hover.

8. Interaction Model & Motion Direction

• Interaction Model: Static
• Motion Tempo: Restrained
• Hero Dimensionality: Flat
• Landing Hero Motion Brief: The hero section will feature a static full-bleed image with a bold headline. The focus will be on the luxurious detail of the fabric, with no motion to maintain a restrained and elegant presentation.

9. Non-Functional Requirements

• Performance: The website must load quickly and be responsive across all devices.
• Security: Implement Supabase RLS, secure API routes, and server-side payment verification.
• Scalability: The platform must handle increased traffic and data as the business grows.
• SEO: Implement SEO metadata, Open Graph, and structured data for products.

10. Tech Stack

• Frontend: Next.js, React, TypeScript, Tailwind CSS
• Backend: Supabase PostgreSQL, Supabase Auth, Supabase Storage
• Payments: Paystack
• Deployment: Vercel

11. Assumptions and Constraints

• The platform will be developed using the specified tech stack and deployed on Vercel.
• All sensitive information will be protected using environment variables.
• Admin access will be restricted to authorized personnel only.

12. Glossary

• Jalabiyah: A traditional long garment worn by men.
• Kaftan: A variant of the robe or tunic.
• Senator Wear: A style of men's clothing popular in Nigeria.
• Agbada: A flowing wide-sleeved robe worn by men in West Africa.
• Supabase: An open-source Firebase alternative.
• Paystack: A payment processing company in Nigeria.