System Requirements Document (SRD)

Project Name: amber-frontend

1. Introduction

The amber-frontend project is a dynamic, full-stack web application designed for the construction and house-building industry. Leveraging the power of Three.js for immersive 3D visualizations and a Python-based backend framework, this project aims to provide an interactive and engaging platform for homeowners, contractors, and architects. The website will include essential features such as authentication, dynamic listings, a checkout system, and APIs to serve real-time data.

This document outlines the system requirements, functional and non-functional specifications, and the creative design direction for the amber-frontend project.

2. System Overview

The amber-frontend project will serve as a platform for users to explore construction designs, book consultations, and interact with 3D models of houses or building layouts. The system will include the following core components:

1. Frontend: Built using Three.js to provide 3D visualizations of house models, floor plans, or construction projects.
2. Backend: A Python framework (e.g., Flask or Django) will handle server-side logic, API endpoints, and database interactions.
3. Database: A combination of relational (MySQL or MariaDB) and NoSQL (MongoDB) databases for storing user data, project details, and dynamic content.
4. Features: Authentication, dynamic listings, interactive 3D visualizations, and a checkout system for booking services or purchasing designs.
5. Target Audience: Homeowners, contractors, and architects interested in exploring or managing construction projects.

The system will be dynamic, pulling real-time data from APIs to ensure up-to-date information on project statuses, pricing, and availability.

3. Functional Requirements

• As a User, I should be able to sign up and log in to access personalized features.
• As a User, I should be able to view a listing page with available house designs or construction services.
• As a User, I should be able to interact with 3D models of houses or floor plans (e.g., rotate, zoom, and pan).
• As a User, I should be able to book consultations or purchase house plans through a checkout page.
• As an Admin, I should be able to manage listings, update project statuses, and oversee user bookings.
• As a Guest, I should be able to browse the website and view limited content without logging in.

4. User Personas

1. Homeowner:

   • Interested in exploring house designs and booking consultations.
   • Requires an intuitive interface to interact with 3D models and access pricing details.

2. Contractor:

   • Manages construction projects and interacts with clients.
   • Needs access to project statuses and client bookings.

3. Admin:

   • Oversees the platform, manages listings, and updates project information.
   • Requires tools for user management and content moderation.

4. Guest:

   • Browses the website without logging in.
   • Has limited access to content and cannot interact with 3D models or make bookings.

5. Creative Reference Stories

Based on the construction industry and the need for immersive 3D visualizations, the Stormy Ocean Authority design story has been selected as inspiration. This story's cinematic and powerful mood aligns with the project's goal of showcasing robust and visually striking construction designs.

6. Visuals Colors and Theme

Unique Color Palette for amber-frontend:

• Background: #1A2238 (Deep Navy)
• Surface: #2C3E50 (Muted Blue-Gray)
• Text: #F5E6CC (Warm Ivory)
• Accent: #FFB347 (Soft Tangerine)
• Muted Tones: #4A5568 (Slate Gray)

Typography:

• Headings: Dramatic serif or sharp modern serif, weight 700.
• Body: Clean light sans-serif, weight 300.

Layout:

• Density: Low, with generous negative space.
• Hero Section: Cinematic fullscreen with 3D interactive elements.

Motion:

• Speed: Slow and intentional.
• Effects: Fade-up, parallax, and beam-sweep animations.

7. Signature Design Concept

Interactive 3D Construction Showcase:
The homepage will feature a 3D interactive construction site. Users will see a rotating 3D model of a house or building, set against a dynamic background that mimics a stormy ocean with subtle wave-like parallax motion.

• Hero Section: A cinematic fullscreen view of the 3D model, with a lighthouse beam-style animation highlighting key features.
• Interaction: Users can rotate, zoom, and explore the 3D model. Clicking on specific areas (e.g., rooms or floors) will reveal detailed information and pricing.
• Call-to-Action (CTA): A glowing button styled like a guiding light, encouraging users to "Explore Designs" or "Book a Consultation."
• Micro-Interactions: Subtle hover effects and glow animations on buttons and interactive elements.

This concept will create a memorable first impression and set the tone for the rest of the website.

8. Non-Functional Requirements

• Performance: The website should load within 3 seconds on a standard broadband connection.
• Scalability: The system should handle up to 10,000 concurrent users.
• Security: Implement SSL encryption, secure authentication, and protection against common vulnerabilities (e.g., SQL injection, XSS).
• Localization: Default to Indian locale settings (e.g., INR currency, IST timezone).
• Accessibility: Ensure WCAG 2.1 compliance for users with disabilities.

9. Tech Stack

Frontend:

• Three.js for 3D visualizations.
• React for building the web interface.

Backend:

• Python with FastAPI for API development.

Database:

• MySQL for relational data.
• MongoDB for NoSQL data storage.

AI Tools:

• GPT 5.2 for user-friendly responses.
• Litellm for LLM routing.

Orchestration:

• Docker and docker-compose for local development.
• Kubernetes for server-side orchestration.

10. Assumptions and Constraints

• The project will be hosted on a cloud platform (e.g., AWS, GCP, or Azure).
• The 3D models will be optimized for web performance to ensure smooth interactions.
• The system will support desktop and mobile browsers but may not include a native mobile app initially.
• APIs will be designed to handle real-time data updates with minimal latency.

11. Glossary

• Three.js: A JavaScript library for creating 3D graphics in the browser.
• FastAPI: A modern Python framework for building APIs.
• MySQL: A relational database management system.
• MongoDB: A NoSQL database for storing unstructured data.
• Docker: A platform for developing, shipping, and running applications in containers.
• Kubernetes: An open-source system for automating deployment, scaling, and management of containerized applications.

This document provides a comprehensive overview of the amber-frontend project, ensuring alignment with the user's vision and technical requirements.