polar-learning

byRamya

## Prompt: Personalized Learning Path Generator Web Application Create a full-stack, modern web application called **“Personalized Learning Path Generator”** with an attractive UI, smooth animations, and a user-friendly experience. --- ### 1. Home / Welcome Page * Design a visually appealing landing page * Include: * Project title * Short description about the platform * Sections like About, Features, and How it Works * A prominent **“Get Started”** button * Use modern UI styles (gradients, glassmorphism, animations) --- ### 2. User Authentication * Create: * Login Page * Registration Page * Fields: * Name, Email, Password * Add validation and error handling * After login, redirect user to preference setup page --- ### 3. User Preference Collection Page Collect user learning preferences step-by-step: 1. **What do you want to learn? (Select ONLY ONE option)** * Python * Web Development * Frontend * Backend * Technical Skills 2. **Purpose of Learning (Select ONLY ONE option)** * Job preparation * Skill development * Building projects * Academic learning 3. **Current Level (Select ONLY ONE option)** * Beginner * Intermediate * Advanced * Use radio buttons or single-select cards (strictly one selection only) * Add smooth transitions between steps --- ### 4. Learning Path Generation * Based on user preferences, generate a **personalized learning path** * Structure: * Chapters → Topics → Subtopics * Each topic should include: * YouTube video links * Courses * Articles * Notes / PDF resources --- ### 5. Automatic Progress Tracking System * Progress should be tracked **automatically by the system (NOT manually by user)** Track user activity: * Detect when: * A video is watched (track watch percentage) * A course is completed * An article or notes are opened/read (time-based tracking) Features: * Automatically mark topic as completed when: * Required video watch % is reached OR * Resource interaction meets completion criteria * Show progress bar (% completion) * Automatically unlock next chapter after completion of previous one --- ### 6. Performance Dashboard Display: * Total time spent learning (in hours) * Remaining time to complete learning path * Completed topics count * Progress charts (graphs) Include chatbot-style summary: * Example: “You studied 3 hours today. 5 hours remaining to complete this module.” --- ### 7. Feedback System * Allow users to: * Rate resources * Provide feedback on learning path * Store all feedback in database --- ### 8. Admin Panel (Secure) * Secure admin login system * Admin functionalities: * Add / Edit / Delete courses * Manage learning paths * View user data and progress * Manage feedback --- ### 9. UI/UX Requirements * Use: * Modern design (cards, gradients, glassmorphism) * Smooth animations (page transitions, hover effects) * Fully responsive design (mobile + desktop) * Ensure clean and visually attractive interface --- ### 10. Tech Stack (Recommended) * Frontend: React.js + Tailwind CSS * Backend: Node.js (Express) or Flask * Database: MongoDB or MySQL --- ### 11. Extra Features * Light / Dark mode toggle * Notifications and reminders * Downloadable learning report * Certificate generation after completion --- ### Expected Output * Fully functional web application * Clean and structured code * Exportable project (ZIP file) * Ready-to-run setup instructions

LandingAdminLoginLoginRegister
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 6

System Requirements Document (SRD)

Project Name: polar-learning

1. Introduction

polar-learning is a personalized learning path generator web application designed to cater to the unique educational needs of users. The platform dynamically generates tailored learning paths based on user preferences, goals, and current skill levels. With a focus on modern UI/UX, seamless functionality, and adaptability, polar-learning aims to revolutionize self-paced online education.

This document outlines the system requirements for polar-learning, ensuring clarity and alignment with the project's objectives.

2. System Overview

polar-learning is a full-stack web application that dynamically generates personalized learning paths for users. The system leverages metadata-driven categorization of resources (videos, courses, articles, etc.) to create adaptable learning paths. It features automatic progress tracking, performance dashboards, and a secure admin panel for resource management.

The application is designed to be intuitive, visually appealing, and responsive, catering to users across devices. It supports dynamic configuration and behavior as specified by the API supervisor, ensuring scalability and flexibility.

3. Functional Requirements

Page 2 of 6

User Stories:

  • As a User, I should be able to register and log in securely.
  • As a User, I should be able to set my learning preferences step-by-step.
  • As a User, I should be able to view a dynamically generated learning path based on my preferences.
  • As a User, I should be able to track my progress automatically without manual input.
  • As a User, I should be able to view my performance dashboard with detailed analytics.
  • As a User, I should be able to provide feedback and rate resources.
  • As an Admin, I should be able to securely log in to the admin panel.
  • As an Admin, I should be able to add, edit, and delete resources.
  • As an Admin, I should be able to manage learning paths dynamically.
  • As an Admin, I should be able to view user data and progress.
  • As an Admin, I should be able to manage user feedback effectively.

4. User Personas

1. Learner

  • Description: Individuals seeking to acquire new skills or knowledge through personalized learning paths.
  • Goals: Skill development, job preparation, academic learning, or project building.
  • Needs: Easy-to-use interface, dynamic learning paths, progress tracking, and performance analytics.

2. Admin

  • Description: Platform managers responsible for maintaining resources and overseeing user activity.
  • Goals: Ensure resource quality, manage learning paths, and monitor user engagement.
  • Needs: Secure access, efficient resource management tools, and user feedback insights.

5. Visuals Colors and Theme

Page 3 of 6

Color Palette:

  • Background: #F5F9FF (Soft Polar Blue)
  • Surface: #FFFFFF (Pure White)
  • Text: #333E50 (Deep Charcoal)
  • Accent: #FF6F61 (Warm Coral)
  • Muted Tones: #A8B2C1 (Cool Slate Gray)

Theme:

The polar-learning theme reflects the serene and focused atmosphere of polar landscapes, with soft blues and whites complemented by warm coral accents for vibrancy.

6. Signature Design Concept

Concept: Interactive Polar Landscape Homepage

The homepage will feature an animated polar landscape with dynamic elements:

  • Visuals: A serene polar scene with floating icebergs, auroras, and a glowing sun.
  • Interaction: Users can hover over icebergs to reveal sections like "About," "Features," and "How it Works."
  • Animations: Smooth transitions as icebergs glide into view, auroras shimmer, and the sun subtly changes color based on the time of day.
  • Micro-interactions: Clicking on an iceberg triggers a ripple effect across the water, leading to the respective section.
  • Mood: Calm yet engaging, evoking curiosity and focus.

This unique design ensures an unforgettable first impression, aligning with the project's identity and goals.

Page 4 of 6

7. Non-Functional Requirements

  • Performance: The system should handle up to 10,000 concurrent users without degradation.
  • Scalability: Support dynamic addition of resources and categories.
  • Security: Ensure secure authentication and data protection using encryption protocols.
  • Accessibility: Adhere to WCAG 2.1 standards for inclusive design.
  • Responsiveness: Optimize for mobile, tablet, and desktop devices.

8. Tech Stack

Frontend:

  • React.js for web application development.

Backend:

  • Python with FastAPI for API development.

Database:

  • MySQL for relational data storage, using Alembic for migrations.
  • MongoDB for storing unstructured resource metadata.

AI Models:

  • GPT 5.4 for user-friendly responses.
  • Claude 4.6 Opas for academic and coding assistance.
  • Google Nano Banana for image generation.
Page 5 of 6

AI Tools:

  • LangChain for dynamic learning path generation.
  • Litellm for LLM routing.

Orchestration:

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

9. Assumptions and Constraints

Assumptions:

  • Users will have access to stable internet connections.
  • Admins will tag resources with metadata during uploads.
  • Learning paths will be dynamically generated based on user preferences and resource metadata.

Constraints:

  • The system must comply with data privacy regulations in India (e.g., PDP Bill).
  • Resource categorization must be accurate to ensure effective learning path generation.
Page 6 of 6

10. Glossary

  • Learning Path: A structured sequence of chapters, topics, and subtopics tailored to user preferences.
  • Metadata: Data providing information about other data (e.g., difficulty level, topic tags).
  • Dynamic Configuration: System behavior that adapts based on real-time inputs or changes.
  • WCAG: Web Content Accessibility Guidelines for inclusive design.
  • LLM: Large Language Model used for AI-driven functionalities.

Ramya, this updated SRD incorporates dynamic learning path generation and aligns with your vision for polar-learning. Let me know if there are additional features or refinements you'd like to include!

Landing design preview
Landing: View Info
AdminLogin: Sign In
AdminDashboard: View Overview
Resources: Add Resource
Resources: Edit Resource
Resources: Delete Resource
LearningPaths: Manage Paths
LearningPaths: Edit Path
Users: View Users
Users: View Progress
Feedback: View Feedback
Feedback: Manage Feedback