frozen-timer System Requirements Document

Introduction

The "frozen-timer" project aims to develop a versatile time-tracking tool designed for both professionals and students. This tool will be available as a web application or a Chrome extension, providing users with an intuitive interface to manage and track their time effectively across various tasks and subjects.

System Overview

The frozen-timer system will provide users with a floating timer that can be easily started, stopped, and managed without interrupting their workflow. The application will offer visual summaries of time spent on tasks and subjects, including daily breakdowns and weekly or monthly summaries. Users will have the ability to add or remove tasks and subjects, manage sessions, and share their time-tracking reports with others. The system will not include calendar synchronization to maintain simplicity and ease of use.

Functional Requirements

• As a User, I should be able to start and stop a floating timer for specific tasks or subjects.
• As a User, I should be able to view the total time tracked across all tasks and subjects on the homepage.
• As a User, I should be able to see a daily breakdown of time spent in a pie chart or similar visual representation.
• As a User, I should be able to view weekly or monthly summaries of my tracked time.
• As a User, I should be able to add or remove tasks and subjects.
• As a User, I should be able to add or remove sessions if needed.
• As a User, I should be able to share my time-tracking reports with others.

User Personas

• Student: Needs to track study sessions across different subjects and manage time effectively for academic success.
• Professional: Requires time management for various work-related tasks to enhance productivity and efficiency.

Visuals Colors and Theme

• primary: #1A73E8 (a deep blue for a professional and trustworthy feel)
• primary_light: #E8F0FE (a light blue for hover states and secondary UI elements)
• secondary: #FF7043 (a warm coral for headlines and emphasis)
• accent: #FBC02D (a vibrant yellow for call-to-action buttons and active states)
• highlight: #FFB300 (a bright amber for hover states and notifications)
• bg: #FFFFFF (a clean white for the page background)
• surface: rgba(250, 250, 250, 0.8) (a soft grey for card/panel backgrounds)
• text: #202124 (a dark grey for primary text and headings)
• text_muted: #5F6368 (a lighter grey for secondary text and labels)
• border: rgba(218, 220, 224, 0.2) (a subtle grey for borders)

Signature Design Concept

The homepage of the frozen-timer will feature an interactive "Time Galaxy" concept. Users will navigate through a 3D galaxy where each star represents a task or subject. Clicking on a star will open a detailed view of the time spent on that task, with options to start or stop the timer. The galaxy will rotate as users drag their mouse, creating an immersive experience. Hovering over stars will highlight connections between related tasks, and users can zoom in and out to explore their time management universe. This concept will be built using @react-three/fiber and @react-three/drei for 3D interactions, ensuring a captivating and engaging user experience.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, providing a layered depth effect as users scroll through the page. Decorative elements, such as atmospheric blobs and distant shapes, will move at different speeds to create a dynamic visual storytelling experience. Internal pages, such as dashboards and settings, will adopt a "static" interaction model to prioritize layout clarity and reading speed.

Non-Functional Requirements

• The system should be responsive and accessible across various devices and screen sizes.
• The application should load within 3 seconds on standard internet connections.
• The system must ensure data privacy and secure user information.

Tech Stack

• Frontend: React for Web
• Backend: FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• Local Orchestration: Docker, docker-compose
• Server-Side Orchestration: Kubernetes

Assumptions and Constraints

• The application will not include calendar synchronization to maintain simplicity.
• The system will be designed to handle up to 10,000 concurrent users.
• The application will be developed with a focus on user-friendly design and ease of use.

Glossary

• Floating Timer: A timer that remains visible and accessible on the user's screen while they perform other tasks.
• Session Management: The ability to start, stop, add, or remove time-tracking sessions.
• Parallax: A visual effect where background images move slower than foreground images, creating a sense of depth.
• 3D Galaxy: An interactive visual representation of tasks and subjects in a three-dimensional space.