Plasma-Website System Requirements Document

Introduction

The "Plasma-Website" is designed to be a comprehensive educational platform for students from 5th to 12th grade. It aims to provide study notes, explanations, summaries, note cards, videos, and prep quizzes to facilitate learning in a kid-friendly environment.

System Overview

The website will be organized by subject, allowing students to easily navigate and find the resources they need. It will feature a vibrant design with various shades of blue to create a calming and engaging atmosphere for students.

Functional Requirements

• As a Student, I should be able to access study notes organized by subject.
• As a Student, I should be able to watch educational videos related to my subjects.
• As a Student, I should be able to take prep quizzes to test my knowledge.
• As a Student, I should be able to view summaries and explanations for better understanding.
• As a Student, I should be able to use note cards for quick revision.

User Personas

• Student: The primary user, ranging from 5th to 12th grade, seeking educational resources.
• Guest: Visitors who can browse limited content without full access.

Visuals Colors and Theme

• primary: #1E3A8A (Deep Blue)
• primary_light: #3B82F6 (Sky Blue)
• secondary: #F59E0B (Amber)
• accent: #EF4444 (Red)
• highlight: #FBBF24 (Gold)
• bg: #F3F4F6 (Light Gray)
• surface: rgba(255, 255, 255, 0.8) (White)
• text: #111827 (Dark Gray)
• text_muted: #6B7280 (Muted Gray)
• border: rgba(209, 213, 219, 0.2) (Light Gray)

Signature Design Concept

Interactive Learning Hub: The homepage will feature an interactive "Study Bridge" concept where students can click on different floating icons representing subjects. Each icon will expand into a mini-dashboard with quick links to notes, videos, and quizzes. The design will use @react-three/fiber for 3D effects, allowing students to rotate and explore the icons in a virtual space. Hovering over icons will trigger subtle animations using framer-motion, enhancing engagement.

Interaction Model & Motion Direction

• Interaction Model: Parallax
• The landing page will feature layered depth with scroll-triggered animations. Icons and elements will move at different speeds to create a dynamic visual experience. Each section will have a unique interactive element, such as a rotating subject wheel or a scroll-activated quiz preview.

Non-Functional Requirements

• The website should load within 3 seconds on standard broadband connections.
• It should be accessible on both desktop and mobile devices.
• The platform must comply with accessibility standards (WCAG 2.1).

Tech Stack

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

Assumptions and Constraints

• The website will primarily serve students in the US.
• Content will be organized by subject rather than grade level.
• The platform will not include teacher resources or a student community section.

Glossary

• Parallax: A scrolling technique where background images move slower than foreground images, creating an illusion of depth.
• 3D Effects: Visual elements that appear three-dimensional, enhancing user interaction.
• WCAG 2.1: Web Content Accessibility Guidelines, ensuring web accessibility for all users.