Junakiya Inaytullah

Introduction

This System Requirements Document (SRD) outlines the specifications for the Junakiya Inaytullah project, focusing on the development of a new product website.

System Overview

The Junakiya Inaytullah project aims to create a visually appealing and user-friendly website that showcases the product effectively. The website will incorporate modern design elements and interactive features to enhance user engagement.

Functional Requirements as Story Points

• As a User, I should be able to view detailed product information.
• As a User, I should be able to navigate the website easily.
• As a User, I should be able to see high-quality images of the product.
• As an Admin, I should be able to update product details and images.

User Personas

• User: Interested in viewing product details and images.
• Admin: Responsible for updating product information and maintaining the website.

Core User Flows

• User visits the homepage -> navigates to product page -> views product details and images.
• Admin logs in -> updates product information -> uploads new product images.

Visuals Colors and Theme

• primary: #1A1A1D (dark charcoal)
• primary_light: #4E4E50 (light charcoal)
• secondary: #C3073F (crimson)
• accent: #950740 (deep red)
• highlight: #FF5733 (orange)
• bg: #F5F5F5 (light grey)
• surface: rgba(255, 255, 255, 0.8)
• text: #1A1A1D (dark charcoal)
• text_muted: #6C757D (grey)
• border: rgba(0, 0, 0, 0.1)

Signature Design Concept

The homepage will feature an interactive 3D watch model that users can rotate and zoom in on. This will be implemented using @react-three/fiber and @react-three/drei. Users can click on different parts of the watch to learn more about its features. The background will have a subtle gradient that shifts as the user interacts with the model, creating an immersive experience.

Interaction Model & Motion Direction

• Interaction Model: Parallax
• The landing page will have layered depth with scroll-triggered animations. The 3D watch model will be the focal point, with content scrolling naturally around it. Each section will have unique interactive elements, such as hover effects and animated transitions.

Non-Functional Requirements

• The website should load within 3 seconds.
• It should be responsive and accessible on all devices.
• The design should be consistent with the brand identity.

Tech Stack

• Frontend: React for Web
• Backend: Python with FastAPI
• Database: MySQL
• Local Orchestration: Docker
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The website will primarily target users in India.
• The design will follow the latest web standards and accessibility guidelines.
• The website should support both English and Hindi languages.

Glossary

• User: An individual visiting the website to view product details.
• Admin: A person responsible for managing website content.
• 3D Model: A digital representation of the product that users can interact with.