System Requirements Document (SRD)

1. Introduction

This document outlines the system requirements for a modern, interactive Ed-Tech platform designed to solve "Tutorial Hell" by providing visual, node-based learning roadmaps and career progression guides. The platform will feature a premium "Dark Mode" aesthetic with neon accents, inspired by Linear.app, and will utilize Next.js, Tailwind CSS, and React Flow for its implementation. The system will support fully dynamic learning roadmaps, allowing users to customize their educational paths based on their interests and career goals.

2. System Overview

The Ed-Tech platform aims to provide students with a structured and visually engaging way to explore and master various fields and subfields of study. By leveraging dynamic, interactive roadmaps, users can navigate their learning journey from beginner to advanced levels. The platform will include features such as onboarding, roadmap visualization, curated resources, and career integration tools, all designed to enhance the learning experience and prepare users for job opportunities.

3. Functional Requirements as Story Points

• As a Student, I should be able to view a high-converting hero section with a compelling headline targeting career paths.
• As a Student, I should be able to sign up and log in using a clean and responsive authentication UI.
• As a Student, I should be able to select a Primary Field (e.g., "Computer Engineering") and dynamically view Subfields (e.g., "Web Development", "Cyber Security") using interactive, animated cards.
• As a Student, I should be able to generate a fully dynamic interactive roadmap for the selected subfield.
• As a Student, I should be able to view nodes representing topics (e.g., "Learn HTML") on the roadmap canvas.
• As a Student, I should be able to click on a node to open a sleek slide-out sidebar.
• As a Student, I should be able to toggle between "Free Mode" and "Paid Mode" in the resource sidebar.
• As a Student, I should be able to view curated YouTube playlist cards in Free Mode, with metrics like "Views" and "Positive Sentiment/Comments rating."
• As a Student, I should be able to view premium course cards in Paid Mode, with ratings, price, and platform details.
• As a Student, I should be able to reach a "Job Ready" terminal node at the end of the roadmap.
• As a Student, I should be able to access a dashboard displaying mock job opportunities related to the completed path.
• As a Student, I should be able to use the "LinkedIn Optimizer" section to view UI guides and templates for summarizing my project portfolio and formatting my profile for recruiters.
• As a Student, I should be able to experience smooth page transitions and micro-interactions powered by Framer Motion (or equivalent).

• As a Student, I should be able to use the platform seamlessly on both mobile and desktop devices.
• As a Student, I should be able to explore realistic mock data for a "Cyber Security" or "Web Development" path as part of the prototype.

4. User Personas

Student

• Primary user of the platform.
• Interested in exploring career paths and mastering subfields.
• Seeks structured learning resources and career guidance.
• Prefers visually engaging and interactive tools.

Admin

• Responsible for managing platform content, including roadmaps, resources, and mock job opportunities.
• Monitors user activity and feedback to improve the platform.

Guest

• Unregistered user exploring the platform.
• Can view limited features, such as the hero section and sample roadmaps.

5. Visuals Colors and Theme

The platform will feature a premium "Dark Mode" aesthetic with neon accents, inspired by Linear.app. The color palette will include:

• Background: #121212 (Dark Gray/Black)
• Primary Neon Accent: #00FFFF (Cyan)
• Secondary Neon Accent: #FF00FF (Magenta)
• Text: #FFFFFF (White)
• Cards and Glassmorphism Effects: Semi-transparent with a frosted glass look.
• Typography: Modern sans-serif fonts like Inter or Poppins.

6. Non-Functional Requirements

• The platform must be highly responsive and optimized for both mobile and desktop devices.
• The system should support smooth animations and micro-interactions using Framer Motion or equivalent libraries.
• The database must handle dynamic user-generated roadmaps efficiently.
• The platform should ensure data security and privacy for user accounts and learning progress.
• The system should be scalable to accommodate a growing number of users and dynamic content.

7. Tech Stack

Frontend

• Next.js for web application development.
• Tailwind CSS for styling and responsive design.
• React Flow for node-based roadmap visualization.
• Framer Motion for animations and micro-interactions.

Backend

• Python with FastAPI for backend services.

Database

• MySQL or MariaDB for relational data storage, using Alembic for migrations.

AI Models

• GPT 5.2 for generating user-friendly responses and dynamic roadmap suggestions.

AI Tools

• LangChain for resource aggregation and dynamic content generation.

Local Orchestration

• Docker and docker-compose for containerization.

Server-Side Orchestration

• Kubernetes for managing server-side deployments.

8. Assumptions and Constraints

Assumptions

• Users will primarily access the platform via web browsers on desktop and mobile devices.
• The platform will initially focus on one or two subfields (e.g., "Cyber Security" or "Web Development") for the prototype.
• Users will prefer a visually engaging UI with smooth animations and transitions.

Constraints

• The system must adhere to data privacy regulations and ensure secure handling of user information.
• The platform must be scalable to support dynamic roadmaps and a growing user base.
• Development must prioritize responsiveness and performance optimization.

9. Glossary

• Tutorial Hell: A state of frustration caused by consuming scattered and unstructured learning resources without clear progression.
• Roadmap Canvas: A visual representation of a learning path, consisting of interconnected nodes representing topics.
• Node: A visual element on the roadmap canvas representing a specific topic or milestone.
• Sidebar: A slide-out panel displaying curated resources for a selected node.
• Free Mode: A mode in the resource sidebar displaying free learning resources like YouTube playlists.
• Paid Mode: A mode in the resource sidebar displaying premium learning resources like courses from Udemy or Coursera.
• LinkedIn Optimizer: A feature providing UI guides and templates for enhancing LinkedIn profiles.

This updated SRD reflects the user's request for a fully dynamic implementation and incorporates the specified roadmap features and aesthetic preferences.