Draoui-fashen System Requirements Document

1. Introduction

Draoui-fashen is a project aimed at creating an e-commerce platform where customers can directly purchase clothing and accessories. The platform will showcase a wide range of products, allowing users to browse, select, and buy items seamlessly.

2. System Overview

The Draoui-fashen platform will serve as a comprehensive e-commerce solution, enabling users to explore a catalog of clothing and accessories and make direct purchases. The system will support various user interactions, including product browsing, selection, and secure transactions.

3. Functional Requirements as Story Points

• As a Customer, I should be able to browse a catalog of clothing and accessories.
• As a Customer, I should be able to view detailed information about each product.
• As a Customer, I should be able to add products to a shopping cart.
• As a Customer, I should be able to proceed to checkout and make a purchase.
• As a Customer, I should be able to create and manage my user account.
• As a Customer, I should be able to track my order status.
• As an Admin, I should be able to manage product listings and inventory.
• As an Admin, I should be able to process and manage customer orders.

4. User Personas

• Customer: Individuals looking to purchase clothing and accessories.
• Admin: Personnel responsible for managing the product catalog, inventory, and customer orders.

5. Core User Flows

• Customer browses catalog -> selects product -> adds to cart -> proceeds to checkout -> completes purchase.
• Admin logs in -> updates product listings -> manages inventory -> processes customer orders.

6. Visuals Colors and Theme

• primary: #FF5733 (a vibrant orange to reflect energy and fashion-forward thinking)
• primary_light: #FF8F66 (a lighter tint of the primary color for hover states)
• secondary: #333333 (a neutral dark gray for text and secondary elements)
• accent: #FFC300 (a bright yellow for call-to-action buttons and highlights)
• highlight: #DAF7A6 (a soft green for notifications and active states)
• bg: #FFFFFF (a clean white background for clarity and focus on products)
• surface: #F2F2F2 (a light gray for cards and panels)
• text: #000000 (black for primary text)
• text_muted: #666666 (a muted gray for secondary text and labels)
• border: #E0E0E0 (a subtle gray for borders)

7. Signature Design Concept

The Draoui-fashen homepage will feature an interactive fashion runway experience. As users scroll, they will see a virtual runway with models showcasing different outfits from the catalog. Users can click on any model to view detailed information about the outfit, including the ability to purchase individual items. The runway will be animated using motion/react to create a smooth, engaging experience that mimics a real fashion show.

Landing Hero Motion Brief

The landing hero will depict a dynamic fashion runway. As users scroll, models will walk across the screen, showcasing different outfits. Each model will pause momentarily, allowing users to click and explore the outfit details. The animation will loop every 10 seconds, ensuring a continuous and captivating experience. The runway will be designed using CSS and motion/react for seamless transitions and interactions.

8. Interaction Model & Motion Direction

• Intended Interaction Model: Animated
  • The homepage will feature moderate scroll-triggered reveals and hover transitions, enhancing the user experience with spring physics on interactive elements.
• Internal Pages: Static
  • For product pages, checkout, and user accounts, a static interaction model will be used to prioritize layout clarity and ease of use.

9. Non-Functional Requirements

• The system must ensure secure transactions and protect user data.
• The platform should be responsive and accessible on various devices, including desktops, tablets, and smartphones.
• The website should load quickly, with a target load time of under 3 seconds for the homepage.

10. Tech Stack

• Frontend: React for Web
• Backend: Python, FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• Local Orchestration: Docker, docker-compose
• Server-side Orchestration: Kubernetes

11. Assumptions and Constraints

• The platform will initially support transactions in Moroccan Dirham (MAD).
• The system will be designed to handle up to 10,000 concurrent users.
• The platform will comply with local e-commerce regulations and standards.

12. Glossary

• E-commerce: Electronic commerce, the buying and selling of goods or services using the internet.
• Catalog: A complete list of items, typically one in alphabetical or other systematic order.
• Checkout: The process of reviewing and completing a purchase online.
• Responsive Design: An approach to web design that makes web pages render well on a variety of devices and window or screen sizes.