jolly-app

byHemen Ashodia

build a to do list app which sorts tasks when new task is added with help of llm

HomeTask DetailSettingsAnalytics
Home

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 10

I'll update the SRD to replace the vivid dawn color theme with a black and white theme, and add Analytics and Settings pages with their associated requirements. Here's the full updated document:

System Requirements Document (SRD)

Project: jolly-app

Prepared for: Hemen Ashodia Country: India Version: 1.1.0 Date: 2026-03-01

1. Introduction

This document defines the System Requirements for jolly-app, a smart AI-powered To-Do List application built for Hemen Ashodia. The application leverages a Large Language Model (LLM) to intelligently score and prioritize tasks based on their raw content, enabling users to manage tasks more effectively without manual priority-setting.

The SRD serves as the foundational blueprint for design, development, and delivery of the jolly-app platform. It captures functional requirements, user personas, visual design intent, tech stack decisions, and non-functional constraints.

Page 2 of 10

2. System Overview

jolly-app is a web-based task management application that combines intuitive user experience with AI-driven prioritization. When a user adds a new task, the system automatically passes the task's raw text content to an LLM, which generates a priority score from 0–100. Tasks are then sorted in the UI in real-time based on these scores.

Users retain full control β€” they may manually override AI-generated scores or drag-and-drop tasks to reorder them. The visual identity of the app is a bold, high-contrast black-and-white aesthetic with parallax scrolling effects, creating a focused, elegant, and distraction-free task management experience.

Key Capabilities:

  • AI-powered task priority scoring (0–100) via LLM on task creation
  • Real-time task sorting by AI score
  • Manual score override and drag-to-reorder
  • Bold black-and-white high-contrast theme with parallax effects
  • Analytics page for task and productivity insights
  • Settings page for user preferences and app configuration
  • Single-user web application (extensible to multi-user)

3. Functional Requirements

Story points based on user-provided requirements, preserving exact intent:

Task Management

  • As a User, I should be able to add a new task with raw text content
  • As a User, I should be able to see the AI-generated priority score (0–100) assigned to my task at the moment it is added
  • As a User, I should be able to view all my tasks sorted in the UI based on their AI priority score
  • As a User, I should be able to override the AI-generated priority score manually if I disagree with it
  • As a User, I should be able to change the sequence/order of tasks manually by dragging and dropping them
  • As a User, I should be able to mark a task as complete
  • As a User, I should be able to delete a task
  • As a User, I should be able to edit the content of an existing task

AI Scoring

  • As the System, every time a new task is added, its priority score should be generated at the same time using the raw content of all current tasks as context
  • As the System, I should pass all existing task content along with the new task to the LLM so that relative scoring is contextually aware
  • As the System, I should re-sort the task list in the UI immediately after a new score is returned
Page 3 of 10

Analytics

  • As a User, I should be able to view an Analytics page that shows an overview of my task activity
  • As a User, I should be able to see a breakdown of tasks by their AI priority score ranges (High: 80–100, Medium: 50–79, Low: 0–49)
  • As a User, I should be able to see how many tasks I have completed vs. remaining over time
  • As a User, I should be able to see a chart or visual summary of my task completion trend over the past 7 and 30 days
  • As a User, I should be able to see which tasks were overridden manually vs. accepted as AI-scored

Settings

  • As a User, I should be able to visit a Settings page to configure application preferences
  • As a User, I should be able to toggle reduced motion mode to disable parallax and animation effects
  • As a User, I should be able to set a display name or username shown within the app
  • As a User, I should be able to choose the default sort behavior (AI score order vs. manual order)
  • As a User, I should be able to reset all tasks (with a confirmation prompt) from the Settings page
  • As a User, I should be able to view and manage connected LLM API key configuration (display masked key, update or clear it)

User Experience

  • As a User, I should experience a bold, elegant black-and-white theme with high contrast
  • As a User, I should see parallax scrolling effects as I scroll through the task list

4. User Personas

4.1 Registered User

Name: The Everyday Planner Description: A productivity-focused individual who manages personal or professional tasks daily. They want smart defaults (AI scoring) but also trust their own judgment (manual override). They value a sharp, distraction-free interface that makes task management feel focused and intentional. Goals: Quickly add tasks, trust AI to prioritize, adjust when needed, feel in control, review progress via analytics. Frustrations: Rigid priority systems, visually noisy UI, slow AI responses.

4.2 Guest / Anonymous User (Future Scope)

Name: The Curious Visitor Description: A user who lands on the app without an account. They may explore a demo mode or limited feature set. Goals: Understand the app's value proposition quickly. Frustrations: Forced sign-ups before experiencing the product.

Page 4 of 10

4.3 Admin (Future Scope)

Name: The System Operator Description: A technical user responsible for monitoring AI scoring quality, managing users, and ensuring system health. Goals: View system logs, manage API usage, monitor LLM scoring accuracy. Frustrations: Lack of observability into AI behavior.

5. Visuals, Colors & Theme

Theme Concept: Monochrome Edge β€” High Contrast Black & White

The visual identity of jolly-app is rooted in the timeless power of black and white β€” bold contrast, clean geometry, and sharp typographic hierarchy. The palette strips away distraction and places the user's tasks at the absolute center of attention. Inspired by editorial print design and modern Swiss typography, the app feels both cinematic and precise.

Depth and dynamism are achieved not through color but through contrast gradients, grain textures, motion, and shadow intensity β€” making the monochrome palette feel anything but flat.

Page 5 of 10

Color Palette

RoleColor NameHex
Primary BackgroundInk Black#0A0A0A
Secondary BackgroundCharcoal#1A1A1A
Surface / CardDeep Graphite#242424
Elevated SurfaceAsh#2E2E2E
Primary AccentPure White#FFFFFF
Secondary AccentLight Silver#D4D4D4
Subtle TextMid Grey#8A8A8A
Muted / DisabledDark Stone#4A4A4A
Border / DividerGraphite Line#333333
Text PrimaryOff White#F5F5F5
Text SecondaryWarm Grey#A0A0A0
SuccessWhite Glow Green (monochrome-safe)#E0E0E0
WarningLight Stone#C0C0C0
DangerBright White Flash#FFFFFF (with red-tinted border for accessibility)
Score High (80–100)Pure White Glow#FFFFFF
Score Medium (50–79)Silver#BEBEBE
Score Low (0–49)Dark Grey#606060

Typography

  • Display / Headers: Playfair Display β€” editorial elegance, strong contrast between thick and thin strokes, stunning in black and white
  • Body / UI: Inter β€” clean, highly readable at all weights, works perfectly in monochrome
  • Score Badge / Numeric: JetBrains Mono β€” technical precision for the AI score display, stark monospace in white on black

Elevation & Style

  • Hard drop shadows in pure black (no color tints) β€” box-shadow: 6px 6px 0px #000000 for a stark editorial lift
  • Thin 1px white or grey borders on cards for sharp delineation
  • No glassmorphism β€” replaced with flat matte surfaces and fine-grain texture overlays for tactile depth
  • Subtle film-grain CSS noise overlay on backgrounds for a cinematic texture
  • Sharp corners (border-radius: 4px) on primary surfaces; slightly rounded (8px) on interactive elements

6. Signature Design Concept

Page 6 of 10

🎞️ "The Darkroom"

A homepage that feels like a photograph developing before your eyes β€” sharp, cinematic, alive in pure black and white.

The Core Idea: jolly-app's interface is styled as a live darkroom β€” the aesthetic world of analogue photography, where images emerge from darkness into crisp, sharp focus. The homepage feels like you are standing in a dimly lit darkroom, watching your tasks materialize like photographs developing in developer fluid. Every interaction sharpens and crystallizes the visual field, rewarding the user's attention.

Landing / Home Page β€” First Impression: When the user first opens jolly-app, they are greeted by:

  • A full-viewport black canvas that slowly "develops" β€” a faint film grain texture pulses subtly, and within the first 2 seconds the UI elements bleed in from white to crisp black-and-white contrast, as if a photograph is developing
  • The app title "jolly-app" appears in large Playfair Display white text, bleeding in from a 0% opacity soft blur to razor-sharp focus β€” a 1.5-second develop animation
  • The background features a multi-layer parallax composition entirely in greyscale:
    • Layer 1 (furthest): A very faint geometric grid pattern (dot matrix or fine cross-hatch) scrolling at 0.2x speed β€” like darkroom photo paper texture
    • Layer 2: Large typographic watermarks (PRIORITY, FOCUS, NOW) floating across the background at varying sizes and 4% opacity β€” slow drift at 0.5x scroll speed
    • Layer 3: Abstract geometric shapes (circles, lines, rectangles) in very dark grey, drifting at 0.8x speed β€” like unexposed film shapes
    • Layer 4 (closest): Task cards snapping sharply into place as the user scrolls
  • A single "Add Task" CTA button β€” stark white text on a black rectangular button with a crisp 1px white border, no rounded corners, bold Inter uppercase

Task List Area β€” The Contact Sheet:

  • The task list is laid out like a photographer's contact sheet β€” cards arranged in a disciplined grid/list, each card styled like a photograph print with a thin white border and a subtle drop shadow
  • Each task card "develops in" when it enters the viewport β€” a 0.4-second animation where the card bleeds from a blurred grey ghost into sharp, fully-rendered contrast
  • The AI Priority Score badge is displayed as a stark black circle with white monospace numeral β€” no color, just weight:
    • Score 80–100: Large, bold, fully white β€” high weight, high presence
    • Score 50–79: Medium weight, silver grey
    • Score 0–49: Small, faint grey β€” visually subordinated, low urgency
  • When the AI is scoring a newly added task, the score badge shows a film-strip loading animation β€” small rectangular frames cycling like an analogue film strip advancing through a projector gate
  • Tasks being dragged emit a stark black offset shadow (hard, no blur) that shifts as the card moves β€” as if lifting a print off a light table
  • When a task is completed, it undergoes a negative inversion flash β€” a quick white-flash invert of the card (like a photo exposed to light) followed by the card fading to 30% opacity and moving to the bottom of the list

Analytics Page:

  • Styled as a darkroom proof sheet β€” charts and statistics rendered in pure white lines on black background, minimalist and precise
  • Bar charts and trend lines are drawn in white with a subtle glow, like light exposed onto photo paper
  • Section headers in large, sparse Playfair Display italic β€” e.g., "Your Focus This Week"

Settings Page:

  • Styled as a camera settings panel β€” toggle switches resemble camera aperture dials, sliders have a mechanical, precise feel
  • Every control is monochrome: white labels, dark inputs, fine-line borders
  • Section dividers are bold 1px white horizontal rules β€” clean, editorial

Micro-Interactions:

  • Hovering over a task card causes it to sharpen slightly β€” a subtle contrast boost animation (CSS filter: contrast(1.1) brightness(1.05)) giving the feeling of bringing it into focus
  • The score badge has a tooltip on hover that shows the LLM's brief reasoning in a monospace font β€” white text in a black pop-up, like a caption on a photograph
  • Typing in the task input causes a cursor underline to pulse like a darkroom timer counting down
  • The manual score override control is rendered as a crisp vertical slider with tick marks β€” like a film exposure compensation dial on a camera
  • Page transitions between Tasks, Analytics, and Settings use a full-screen white flash (20ms) followed by a cross-dissolve β€” exactly like advancing film in a camera

Summary: The Darkroom makes jolly-app feel like a precision instrument β€” sharp, intentional, and visually arresting. In a world of over-designed colorful apps, a black-and-white experience executed with this level of craft is genuinely unforgettable. Every time Hemen opens the app, it feels like developing something meaningful.

Page 7 of 10

7. Non-Functional Requirements

7.1 Performance

  • AI priority score must be returned and displayed within 3 seconds of task submission under normal network conditions
  • Task list re-sort animation must complete within 300ms
  • Application initial load time must be under 2 seconds on a standard broadband connection (India, ~25 Mbps)
  • Parallax animations must maintain 60 FPS on modern hardware
  • Analytics charts must render within 1 second of page load using cached/precomputed data

7.2 Scalability

  • The backend API must support up to 500 concurrent users in future multi-user scenarios
  • LLM scoring requests must be routed through a managed proxy (LiteLLM) to support model swapping without frontend changes

7.3 Reliability

  • Application uptime target: 99.5%
  • LLM scoring failures must be handled gracefully β€” if the AI score fails, the task is saved with a default score of 50 and a visual indicator showing the score is unverified

7.4 Security

  • All API endpoints must be protected with authentication tokens (JWT)
  • LLM API keys must never be exposed to the frontend; managed via Settings page with server-side masking
  • All data in transit must use HTTPS / TLS 1.3

7.5 Usability

  • The app must be fully responsive and usable on desktop and tablet screens
  • Drag-and-drop must work on both mouse and touch devices
  • Score override input must have clear validation (integers 0–100 only)
  • Analytics page must present data clearly without requiring user configuration
  • Settings page must group preferences logically with clear labels and confirmation dialogs for destructive actions

7.6 Accessibility

  • Minimum contrast ratio of 4.5:1 for all body text against backgrounds β€” especially critical for the monochrome palette
  • All interactive elements must be keyboard-navigable
  • Parallax effects must respect the OS-level prefers-reduced-motion setting
  • Monochrome-only design must not rely solely on color to convey state β€” use shape, size, and weight as differentiators (e.g., score badge size indicates urgency)
Page 8 of 10

7.7 Localization

  • Default timezone: IST (UTC+5:30) β€” used in Analytics page for daily/weekly aggregation
  • Default currency (if billing features added): INR (β‚Ή)
  • Language: English (India)

8. Tech Stack

8.1 Frontend

TechnologyPurpose
ReactWeb UI framework
Framer MotionParallax animations, card develop-in transitions, micro-interactions
React Beautiful DnDDrag-and-drop task reordering
Tailwind CSSUtility-first styling for the monochrome theme
RechartsAnalytics page charts and data visualizations

8.2 Backend

TechnologyPurpose
PythonBackend language
FastAPIREST API server for task CRUD, LLM score orchestration, and analytics data endpoints

8.3 Database

TechnologyPurpose
MySQL / MariaDBPrimary relational database for tasks, users, scores, settings, and analytics events
AlembicDatabase migrations

8.4 AI / LLM

TechnologyPurpose
GPT-5.2Primary LLM for generating user-friendly task priority scores and reasoning
LiteLLMLLM routing layer β€” abstracts model switching, manages API keys server-side
Page 9 of 10

8.5 Infrastructure / Orchestration

TechnologyPurpose
DockerContainerization of all services
Docker ComposeLocal development orchestration (frontend, backend, DB, LiteLLM)
KubernetesProduction server-side orchestration and scaling

9. Assumptions and Constraints

Assumptions

  • The application is initially scoped as a single-user experience, with multi-user support planned for a future version
  • The user (Hemen) will supply valid LLM API keys for GPT-5.2 via LiteLLM configuration, manageable through the Settings page
  • Internet connectivity is assumed for LLM scoring; the app will degrade gracefully offline
  • The primary target device is desktop/web browser; mobile is a future scope item
  • Task content is plain text only (no attachments or rich media in v1)
  • All scoring is stateless β€” the LLM receives all current task texts + new task text at call time; no fine-tuning or persistent model state
  • Analytics data is derived from existing task records (creation timestamps, completion events, score overrides) β€” no separate event tracking infrastructure required in v1
  • The monochrome design relies on size, weight, and typographic contrast (not color) to communicate urgency and state β€” this is a deliberate and accessibility-conscious decision

Constraints

  • LLM API costs are a variable operational expense; high task volume may increase costs
  • LLM responses must be deterministic enough to produce a numeric score β€” prompt engineering must enforce JSON output format
  • Parallax and animation effects must be gracefully disabled on low-powered devices or when prefers-reduced-motion is set
  • No offline mode in v1 β€” LLM scoring requires internet access
  • The system must comply with applicable data privacy laws in India (DPDPA 2023)
  • The monochrome palette requires extra care on accessibility: all state changes (success, warning, danger) must use shape, border style, or iconography β€” not color alone β€” to remain WCAG AA compliant
Page 10 of 10

10. Glossary

TermDefinition
SRDSystem Requirements Document β€” this document
LLMLarge Language Model β€” an AI model (e.g. GPT-5.2) used for natural language understanding and task scoring
Priority ScoreAn integer value from 0 to 100 assigned by the LLM to a task, indicating its urgency/importance relative to other tasks
LiteLLMAn open-source LLM routing proxy that manages API calls to multiple LLM providers from a single interface
ParallaxA visual effect where background elements move at different speeds relative to foreground elements during scrolling
The DarkroomThe signature design concept for jolly-app β€” a monochrome, analogue-photography-inspired UI aesthetic
Contact SheetA photographer's proof sheet showing multiple small prints β€” used as the design metaphor for the task list layout
Develop AnimationThe card entry animation that mimics a photograph developing in chemical solution β€” transitioning from blurred grey to sharp black-and-white
Film GrainA CSS noise texture overlay applied to backgrounds for cinematic, tactile depth in the monochrome design
AlembicA Python-based database migration tool used with SQLAlchemy/MySQL
FastAPIA modern Python web framework for building REST APIs with automatic documentation
RechartsA composable charting library for React, used for the Analytics page visualizations
Docker ComposeA tool for defining and running multi-container Docker applications locally
KubernetesAn open-source container orchestration system for automating deployment and scaling in production
ISTIndian Standard Time β€” UTC+5:30, the timezone used as default for jolly-app
DPDPADigital Personal Data Protection Act, 2023 β€” India's data privacy legislation
DnDDrag and Drop β€” the interaction pattern allowing users to reorder tasks manually
JWTJSON Web Token β€” a compact, secure method for transmitting authentication information
WCAG AAWeb Content Accessibility Guidelines Level AA β€” the accessibility standard jolly-app targets, requiring 4.5:1 contrast ratio for body text

Document generated for Hemen Ashodia | jolly-app v1.1.0 | 2026-03-01 Next Review Date: 2026-04-01

Home design preview
Home: View Dawn Canvas
Home: Access Admin Panel
Home: Monitor AI Scores
Home: View System Logs
Home: Manage API Usage