Stiqh World System Requirements Document

1. Introduction

This document outlines the system requirements for the Stiqh World project, a fashion brand website inspired by the aesthetics and functionality of platforms like Amazon, tailored to reflect the brand's unique identity as seen on its Instagram page.

2. System Overview

Stiqh World aims to create an engaging online platform for luxury streetwear, emphasizing a seamless shopping experience, rich visual storytelling, and brand identity. The website will cater to a global audience, offering a wide range of products with detailed descriptions, user reviews, and personalized recommendations.

3. Functional Requirements

• As a User, I should be able to browse products by category.
• As a User, I should be able to search for products using keywords.
• As a User, I should be able to view detailed product descriptions and images.
• As a User, I should be able to add products from the existing Stiqh World site to a shopping cart.
• As a User, I should be able to proceed to checkout and make payments securely.
• As a User, I should be able to create and manage my account.
• As a User, I should be able to view my order history.
• As a User, I should be able to leave reviews and ratings for products.
• As an Admin, I should be able to manage product listings and inventory.
• As an Admin, I should ensure that all product prices are displayed in INR currency.
• As an Admin, I should ensure a 50% profit margin above all expenses is applied to product pricing.
• As an Admin, I should be able to view sales reports and analytics.

4. User Personas

• User: General customers who browse and purchase products.
• Admin: Staff responsible for managing the website's content and inventory.

5. Core User Flows

• User browses categories -> selects a product -> adds to cart -> checks out -> completes payment.
• User searches for a product -> views product details -> adds to cart -> checks out -> completes payment.
• Admin logs in -> updates product listings -> checks inventory levels -> views sales reports.

6. Visuals Colors and Theme

• primary: #8B0000 (dark red)
• primary_light: #B22222 (firebrick)
• secondary: #D2B48C (tan)
• accent: #FFD700 (gold)
• highlight: #FF4500 (orange red)
• bg: #F5F5DC (beige)
• surface: rgba(245, 245, 220, 0.8)
• text: #2F4F4F (dark slate gray)
• text_muted: #696969 (dim gray)
• border: rgba(139, 0, 0, 0.2)

7. Signature Design Concept

The homepage will feature an interactive 3D fashion runway using @react-three/fiber and @react-three/drei. Users can navigate through a virtual fashion show where each model represents a product category. Clicking on a model zooms in to reveal product details, while hovering highlights the outfit's features. The background will subtly change colors to match the brand's palette, creating an immersive experience.

8. Interaction Model & Motion Direction

• Interaction Model: Parallax
  • The landing page will use layered depth via scroll, with atmospheric elements translating at different speeds to create a dynamic visual experience.
• Internal Pages: Static
  • Focus on clarity and ease of navigation for product listings and user account management.

9. Non-Functional Requirements

• The website must load within 3 seconds on a standard broadband connection.
• It should be accessible and responsive across all devices and screen sizes.
• Ensure compliance with GDPR and other relevant data protection regulations.

10. Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL
• AI Models: GPT 5.4 for user-friendly responses
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

11. Assumptions and Constraints

• The website will primarily target a global audience with a focus on luxury streetwear.
• Payment gateways must support multiple currencies.
• The design should reflect the brand's unique identity as seen on its Instagram page.

12. Glossary

• User: A customer visiting the website to browse or purchase products.
• Admin: A staff member managing the website's content and operations.
• Parallax: A design technique where background images move slower than foreground images, creating an illusion of depth.
• 3D Fashion Runway: An interactive feature that simulates a fashion show environment on the website.