orbit-website

Introduction

The "orbit-website" project aims to develop a comprehensive and user-friendly website for "Dar e Arqam" school. This website will serve as a digital hub for students, parents, faculty, and prospective applicants, providing essential information and resources related to the school.

System Overview

The "orbit-website" will be a dynamic platform designed to facilitate communication and information sharing between the school and its community. It will feature sections for admissions, academics, faculty profiles, student and parent portals, events, and contact information. The website will be accessible across various devices, ensuring a seamless user experience.

Functional Requirements

• As a Visitor, I should be able to view the home page with key highlights and announcements.
• As a Visitor, I should be able to learn about the school's mission, vision, and history on the About Us page.
• As a Prospective Student, I should be able to find details on how to apply, admission criteria, and important dates in the Admissions section.
• As a Student, I should be able to access resources and assignments through the Student Portal.
• As a Parent, I should be able to track student progress and updates via the Parent Portal.
• As a Visitor, I should be able to view upcoming school events and activities on the Events Calendar.
• As a Visitor, I should be able to contact the school using the information and form provided on the Contact Us page.

User Personas

• Visitor: Individuals seeking general information about the school.
• Prospective Student: Individuals interested in applying to the school.
• Student: Current students accessing resources and assignments.
• Parent: Parents of students tracking progress and receiving updates.
• Faculty: Teachers and staff members managing academic content.

Visuals Colors and Theme

• primary: #2A9D8F (Teal Green)
• primary_light: #A8DADC (Light Teal)
• secondary: #E63946 (Crimson Red)
• accent: #F4A261 (Sandy Orange)
• highlight: #FFB703 (Golden Yellow)
• bg: #F1FAEE (Off White)
• surface: rgba(233, 233, 233, 0.8)
• text: #1D3557 (Dark Blue)
• text_muted: #457B9D (Muted Blue)
• border: rgba(69, 123, 157, 0.2)

Signature Design Concept

The homepage of the "orbit-website" will feature an interactive galaxy map where each star represents a different section of the website. Users can click on a star to navigate to the corresponding section, such as Admissions, Academics, or Events. The map will be animated using @react-three/fiber and @react-three/drei to create a 3D effect, allowing users to drag and rotate the galaxy for a more immersive experience. Hovering over a star will highlight its connections to related sections, providing an intuitive navigation experience.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, creating a layered depth effect as users scroll through the page. Decorative elements, such as atmospheric blobs and distant shapes, will translate at different speeds, while the main content scrolls naturally. Each section will feature a distinctive core mechanic, such as a 3D scene or kinetic typography, to maintain user engagement.

Non-Functional Requirements

• The website must be responsive and accessible on all major devices and browsers.
• Load times should not exceed 3 seconds on a standard broadband connection.
• The system should support at least 500 concurrent users without performance degradation.

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

Assumptions and Constraints

• The website will be hosted on a cloud platform with scalable resources.
• User data privacy and security will be maintained in compliance with local regulations.
• The design will adhere to the school's branding guidelines.

Glossary

• Parallax: A design technique where background images move slower than foreground images, creating an illusion of depth.
• React: A JavaScript library for building user interfaces.
• FastAPI: A modern, fast (high-performance) web framework for building APIs with Python.
• Docker: A platform for developing, shipping, and running applications in containers.
• Kubernetes: An open-source system for automating the deployment, scaling, and management of containerized applications.