jade-tasks

byPriyank Dave

I want to create a todo app just like Notion and Todoist web applications do. I also want to create web application just like that with all the features like adding tasks for a day or a general tasks that needs to be done along with filtering by different fields such as filter by date, filter by tasks type (todo, in progress, done,etc.). I want user management and authentication for to use our web application service so I want JWT authentication too and User Profile and all. And in dashboard by default show today's tasks and with beautiful UI it should develop our Todo app with different rich features. For frontend, make sure that you use ShadCN for better frontend development.

LandingLoginSignupProfileTask EditorTasksDashboard
Landing

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document
Page 1 of 3

System Requirements Document (SRD)

Project Name: jade-tasks

1. Introduction

jade-tasks is a modern and feature-rich todo application inspired by the functionality of Notion and Todoist. Designed for users in India (IN) and globally, this web application focuses on task management, filtering, and user-friendly design. The application will allow users to create daily and general tasks, filter tasks by various fields, and manage their profiles securely. With a visually appealing interface built using ShadCN, jade-tasks aims to simplify task organization and enhance productivity. Deployment will ensure the application is accessible to users immediately after development completion.

2. System Overview

jade-tasks is a single-user role web application that provides robust task management features. Users can create, organize, and filter tasks using rich metadata such as tags, priority, and type. The dashboard will prominently display today's tasks by default, ensuring users can focus on immediate priorities. Authentication will be handled via JWT for secure access, and the frontend will leverage ShadCN for a modern and responsive UI. The system will also include automated deployment to ensure seamless accessibility post-development.

3. Functional Requirements

  • As a User, I should be able to create tasks for a specific day or general tasks.
  • As a User, I should be able to filter tasks by date, type (todo, in progress, done, etc.), priority, tags, and other metadata.
  • As a User, I should be able to view today's tasks by default on the dashboard.
  • As a User, I should be able to manage my profile securely.
  • As a User, I should be able to authenticate using JWT for secure access.
  • As a User, I should be able to experience a visually appealing and responsive UI built using ShadCN.
  • As a User, I should be able to access the application after it is deployed automatically following a successful build.

4. User Personas

General User

  • Description: The sole user role in the system.
  • Responsibilities: Create and manage tasks, filter tasks using rich metadata, view today's tasks, manage profile, and authenticate securely.
Page 2 of 3

5. Visuals Colors and Theme

The visual theme for jade-tasks will emphasize simplicity and elegance while ensuring usability:

  • Primary Color: Jade green (#00A86B) to reflect the project name and evoke a sense of productivity and calmness.
  • Secondary Colors: Soft gray (#F5F5F5) for backgrounds and white (#FFFFFF) for clean spaces.
  • Accent Colors: Vibrant orange (#FF6F00) for actionable buttons and notifications.
  • Typography: Modern sans-serif fonts such as Inter or Roboto for readability.
  • UI Components: Rounded corners, subtle shadows, and smooth transitions for a polished look.

6. Signature Design Concept

Interactive Task Universe
The homepage of jade-tasks will feature a dynamic galaxy visualization where each task is represented as a glowing star. Users will navigate through their tasks by interacting with this galaxy:

  • Animation: Stars will pulse gently, and tasks will orbit around a central "Today" star, which is larger and brighter.
  • Interaction: Hovering over a star will display task details in a tooltip, while clicking will open the task editor.
  • Transitions: Smooth zoom-in and zoom-out effects as users explore their task galaxy.
  • Color Shifts: Stars will change color based on task type (e.g., green for completed, yellow for in progress, red for overdue).
  • Micro-interactions: Stars will "twinkle" when tasks are updated or completed, adding a delightful touch.
    This concept will create an unforgettable first impression and make task management visually engaging and fun.

7. Non-Functional Requirements

  • Performance: The application should load within 2 seconds for all users.
  • Scalability: The system should handle up to 100,000 tasks per user without performance degradation.
  • Security: JWT authentication must ensure secure access to user accounts.
  • Availability: The application must maintain 99.9% uptime post-deployment.
  • Accessibility: The UI must comply with WCAG 2.1 standards for accessibility.
  • Deployment: Automated deployment pipelines must ensure the application is live immediately after successful builds.

8. Tech Stack

  • Frontend: React with ShadCN for web development.
  • Backend: Python with FastAPI for efficient API handling.
  • Database: MySQL or MariaDB for relational data storage, using Alembic for migrations.
  • AI Models: GPT 5.2 for user-friendly responses and task suggestions.
  • AI Tools: Langchain for task-related AI workflows.
  • Local Orchestration: Docker and docker-compose for containerization.
  • Server-Side Orchestration: Kubernetes for deployment and scaling.
Page 3 of 3

9. Assumptions and Constraints

  • Assumptions:

    • Users will primarily access the application via web browsers.
    • Tasks will have metadata fields such as tags, priority, and type for filtering.
    • Deployment will use cloud services for hosting.
  • Constraints:

    • The application must support only one user role (general user).
    • Deployment pipelines must be automated to minimize manual intervention.

10. Glossary

  • JWT (JSON Web Token): A secure method for user authentication.
  • ShadCN: A modern UI library for React applications.
  • Alembic: A database migration tool for Python applications.
  • Langchain: A framework for developing applications powered by language models.
  • Docker: A tool for containerizing applications.
  • Kubernetes: A system for automating deployment, scaling, and management of containerized applications.

This document outlines the requirements for jade-tasks and ensures the application is designed, developed, and deployed to meet Priyank's vision for a powerful and visually engaging todo app.

Landing design preview
Landing: View App
Login: Sign In
Signup: Create Account
Dashboard: View Today Tasks
Dashboard: Filter Tasks
Tasks: View Results
Task Editor: Create Task
Task Editor: Edit Task
Profile: Manage Account