PBL System Requirements Document

Introduction

The PBL project aims to develop an application designed to help users reduce their screen time. This document outlines the system requirements for the PBL application, focusing on its use for personal purposes.

System Overview

The PBL application is intended to assist individuals in managing and reducing their screen time. It will provide users with insights into their device usage patterns and offer tools to help them achieve their screen time reduction goals. The application will be tailored for personal use, ensuring a user-friendly experience that encourages consistent engagement.

Functional Requirements

• As a User, I should be able to track my daily screen time across different applications.
• As a User, I should be able to set daily screen time limits for specific applications.
• As a User, I should receive notifications when I am approaching my screen time limits.
• As a User, I should be able to view weekly and monthly reports of my screen time usage.
• As a User, I should be able to set goals for reducing my screen time.
• As a User, I should receive motivational messages to encourage screen time reduction.
• As a User, I should be able to customize the notification settings according to my preferences.

User Personas

• User: An individual seeking to manage and reduce their screen time for personal well-being.

Core User Flows

1. User logs into the app -> sets screen time limits for specific applications -> receives notifications as limits are approached -> views weekly report to track progress.
2. User sets a screen time reduction goal -> receives motivational messages -> adjusts habits based on insights from monthly reports.

Visuals Colors and Theme

• primary: #4A90E2 (a calming blue)
• primary_light: #A6C8F0 (a lighter tint of the primary color)
• secondary: #F5A623 (a warm amber for emphasis)
• accent: #E94E77 (a vibrant pink for CTAs and active states)
• highlight: #F8E71C (a bright yellow for notifications and alerts)
• bg: #FFFFFF (a clean white background)
• surface: rgba(74, 144, 226, 0.1) (a subtle blue for card backgrounds)
• text: #333333 (a dark grey for primary text)
• text_muted: #777777 (a softer grey for secondary text)
• border: rgba(0, 0, 0, 0.1) (a light grey for borders)

Signature Design Concept

The PBL application will feature an interactive "Time Garden" on the home page. This garden will visually represent the user's screen time usage as a series of plants. Each plant corresponds to a different application, growing taller as more time is spent on it. Users can interact with the garden by clicking on plants to see detailed usage stats or set limits. The garden will change dynamically, with plants wilting when limits are exceeded, encouraging users to maintain a balanced digital life. This concept will be implemented using framer-motion for smooth animations and interactions.

Interaction Model & Motion Direction

The landing page will adopt a "parallax" interaction model, providing a layered depth experience as users scroll through their screen time data. The Time Garden will feature animated transitions and hover effects to engage users and make data exploration intuitive and enjoyable.

Non-Functional Requirements

• The application must ensure data privacy and secure storage of user information.
• The application should be responsive and perform well on both mobile and desktop devices.
• The application should support localization for different languages and regions.

Tech Stack

• Frontend: React for Web
• Backend: FastAPI
• Database: MySQL
• AI Models: Not applicable
• Local Orchestration: Docker
• Server-side Orchestration: Kubernetes

Assumptions and Constraints

• The application is intended for personal use and does not require multi-user support.
• Internet connectivity is required for real-time data synchronization.
• The application will be available in English initially, with plans for future localization.

Glossary

• Screen Time: The amount of time spent using a device such as a smartphone or computer.
• Parallax: A design technique where background images move slower than foreground images, creating an illusion of depth.
• Framer-motion: A library for creating animations and interactions in React applications.