Maths Ai - Scratch pad

byTalib Khushnood

https://math-tutor-demo--talibkhushnood.replit.app/ this is the app. rebuilt with professional UX/UI.

LandingTutoringLoginDashboard
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 4

Maths Ai - Scratch Pad

Introduction

The "Maths Ai - Scratch Pad" project aims to develop a professional website for AI-based math tutoring. This document outlines the system requirements necessary to build a robust and user-friendly platform that enhances the learning experience for students through AI-driven tools.

System Overview

The Maths Ai - Scratch Pad will serve as an interactive platform where students can engage with AI-powered tools to improve their math skills. The website will provide a seamless user experience with a focus on accessibility, ease of use, and educational effectiveness.

Source Content Inventory

Due to access restrictions, the content from the provided URL could not be verified. Therefore, no factual entities, collections, fields, values, or media references are available from the source.

Functional Requirements as Story Points

  • As a Student, I should be able to access AI-based math tutoring sessions to enhance my learning.
  • As a Student, I should be able to use a scratch pad to solve math problems interactively.
  • As a Student, I should be able to receive instant feedback on my solutions from the AI.
  • As a Teacher, I should be able to monitor student progress and provide additional support when needed.
  • As an Admin, I should be able to manage user accounts and oversee the platform's operations.
Page 2 of 4

User Personas

  • Student: A learner seeking to improve their math skills using AI tools.
  • Teacher: An educator who monitors student progress and provides guidance.
  • Admin: A platform manager responsible for user accounts and system maintenance.

Core User Flows

  • Student logs in -> accesses AI tutoring session -> uses scratch pad -> receives feedback.
  • Teacher logs in -> reviews student progress -> provides feedback or additional resources.
  • Admin logs in -> manages user accounts -> oversees platform operations.

Visuals Colors and Theme

  • primary: #1A73E8 (a vibrant blue for brand identity)
  • primary_light: #E8F0FE (a lighter blue for hover states)
  • secondary: #FF7043 (a warm coral for emphasis)
  • accent: #FFC107 (a bright amber for CTAs and active states)
  • highlight: #FFEB3B (a vivid yellow for notifications)
  • bg: #FFFFFF (a clean white background)
  • surface: rgba(255, 255, 255, 0.8) (a semi-transparent white for cards/panels)
  • text: #212121 (a dark gray for primary text)
  • text_muted: #757575 (a lighter gray for secondary text)
  • border: rgba(0, 0, 0, 0.1) (a subtle gray for borders)
Page 3 of 4

Signature Design Concept

The homepage will feature an interactive "Math Galaxy" where each star represents a different math topic or feature. Users can click on stars to explore lessons, solve problems, and receive AI feedback. The galaxy will rotate and zoom as users navigate, creating an engaging and immersive learning environment. This concept will be implemented using @react-three/fiber for 3D interactions and gsap for smooth animations.

Landing Hero Motion Brief

The landing hero will depict a dynamic scene where math problems transform into solutions through AI intervention. The animation will show numbers and equations swirling around a central AI figure, which processes them into solved problems. This loop will last 10 seconds, with interactive elements allowing users to hover and see detailed explanations. The animation will be built using motion/react for fluid transitions and responsive design.

Interaction Model & Motion Direction

The intended interaction model for the landing page is "animated," featuring scroll-triggered reveals and hover transitions. The hero will include a continuous 2D motion loop, enhancing the storytelling aspect of the platform.

Non-Functional Requirements

  • The platform must be accessible and responsive across all devices.
  • The system should ensure data privacy and security for all users.
  • The website should load quickly and handle high traffic efficiently.
Page 4 of 4

Tech Stack

  • Frontend: React for Web
  • Backend: Python with FastAPI
  • Database: MySQL or MariaDB
  • AI Models: GPT 5.4 for user-friendly responses
  • AI Tools: Litellm for LLM Routing
  • Orchestration: Docker and Kubernetes

Assumptions and Constraints

  • The platform will primarily serve students in Pakistan, considering local educational standards.
  • The website must comply with data protection regulations applicable in Pakistan.

Glossary

  • AI: Artificial Intelligence
  • LLM: Large Language Model
  • CTA: Call to Action
  • UX/UI: User Experience/User Interface

This document provides a comprehensive overview of the requirements for the Maths Ai - Scratch Pad project, ensuring a successful implementation of AI-based math tutoring.

Landing design preview
Landing: View Info
Login: Sign In
Dashboard: View Overview
Users: Manage Accounts
Users: Edit Permissions
Settings: Configure Platform
Monitoring: Oversee Operations
Reports: View System Stats
Landing design preview
Landing: View Info
Login: Sign In
Dashboard: View Overview
Users: Manage Accounts
Users: Edit Permissions
Settings: Configure Platform
Monitoring: Oversee Operations
Reports: View System Stats