System Requirements Document for LearnLoop

1. Introduction

LearnLoop is a single-page web application designed to deliver educational content through a vertical short-form video feed. Styled similarly to Instagram Reels, LearnLoop focuses on providing a seamless and interactive learning experience without the need for backend services or user authentication.

2. System Overview

LearnLoop is a mobile-first, dark-mode web application that allows users to interact with educational videos through a full-screen vertical video feed. The application is built using React, TypeScript, Vite, and Tailwind CSS, with video data stored in a local JSON file and user state managed through localStorage.

2a. Product Interpretation and Delivery Boundary

• Domain Descriptor: Educational video feed with interactive learning features.
• Source Evidence: The product is designed to deliver educational content through a video feed with interactive elements like marking videos as understood and tracking learning streaks.
• Exclusions: No authentication, backend services, social features, or payment processing.
• Access: Public entry surface with no authentication required.
• Behavior Contracts:
  • Navigate Video Feed: Users can swipe or scroll to navigate through videos.
  • Filter Video Feed: Users can filter videos by subject using filter pills.
  • Mark Video as Understood: Users can mark videos as understood, which updates localStorage.
  • Track Learning Streak: Users' learning streaks are tracked and updated in localStorage.

2b. Source Content Inventory

Not applicable as no authoritative content source was provided.

2c. Page Content and Component Coverage

Video Feed Page

• Video Display: Full-screen vertical video feed with auto-play on view, tap to pause, and mute toggle.
• Navigation: Swipe/scroll to navigate between videos.
• Subject Filters: Filter pills for subjects (All, Physics, Chemistry, Math, Coding) at the top.
• Mark as Understood: Button to mark videos as understood, toggling a checkmark state.
• Streak Counter: Displays the user's learning streak in the top corner.
• Seed Data: 15-20 mock videos with titles and subject tags.

3. Functional Requirements as Story Points

• As a User, I should be able to view a full-screen vertical video feed, allowing me to swipe or scroll to navigate between videos. explicit
• As a User, I should be able to filter the video feed by subject using filter pills, so I can focus on specific topics. explicit
• As a User, I should be able to mark a video as understood, which will save this state to localStorage. explicit
• As a User, I should be able to see a streak counter that increments daily when I mark at least one video as understood. explicit
• As a User, I should be able to view seed data consisting of 15-20 mock videos across various subjects. explicit

4. User Personas

• User: The primary participant interacting with the video feed, interested in consuming educational content and tracking their learning progress.

5. Core User Flows

User Flow for Video Interaction

1. Access Video Feed: User opens the application and lands on the video feed page.
2. Navigate Videos: User swipes or scrolls to navigate through the videos.
3. Filter Videos: User selects a subject filter to view specific content.
4. Mark as Understood: User clicks the "Mark as Understood" button on a video.
5. Track Streak: User's streak counter updates if a video is marked as understood.

6. Visuals Colors and Theme

• Primary: #1E1E1E (Dark mode background)
• Primary Light: #2E2E2E (Hover states)
• Secondary: #FF5722 (Subject-color accents)
• Accent: #FFC107 (Emphasis for CTAs)
• Highlight: #4CAF50 (Active indicators)
• Background: #1E1E1E (Page background)
• Surface: #2E2E2E (Card/panel background)
• Text: #FFFFFF (Primary text color)
• Text Muted: #B0B0B0 (Secondary text)
• Border: #3E3E3E (Subtle borders)

7. Signature Design Concept

The design concept for LearnLoop is inspired by TikTok's minimal UI with a focus on video content. The interface is predominantly dark mode, with bold subject-color accents to highlight interactive elements. The video feed takes up 95% of the screen, ensuring an immersive experience. The subject filter pills and streak counter are designed to be unobtrusive yet easily accessible.

8. Interaction Model & Motion Direction

• Interaction Model: Animated
  • The video feed page will feature moderate scroll-triggered reveals and hover transitions.
  • Interactive elements like the "Mark as Understood" button will have spring physics for a polished feel.

9. Non-Functional Requirements

No additional non-functional requirements were inferred beyond the explicit constraints provided.

10. Tech Stack

• Frontend: React, TypeScript, Vite, Tailwind CSS
• Data Storage: Local JSON file for video data, localStorage for user state

11. Assumptions and Constraints

• The application will not have a backend or authentication system.
• User state and video data will be managed locally.
• The design will focus on a mobile-first approach with dark mode as the default theme.

12. Glossary

• Video Feed: The main interface where users interact with educational videos.
• LocalStorage: A web storage API used to store user state data locally on the user's device.
• Subject Filter Pills: UI elements that allow users to filter videos by subject.
• Streak Counter: A feature that tracks the number of consecutive days a user marks a video as understood.