crystal-hi

Introduction

The "crystal-hi" project is a personal to-do application designed to help users efficiently organize tasks with features such as reminders and categories. This document outlines the system requirements for the development of the crystal-hi application, tailored for Diya Trivedi in India, considering locale-specific defaults such as timezone and currency.

System Overview

The crystal-hi application is a personal task management tool that allows users to create, categorize, and set reminders for their tasks. The application aims to provide a straightforward and user-friendly interface, enabling users to manage their daily activities efficiently. The system will be accessible via a web interface, ensuring ease of use across different devices.

Functional Requirements

• As a User, I should be able to create a new task.
• As a User, I should be able to categorize tasks.
• As a User, I should be able to set reminders for tasks.
• As a User, I should be able to view all tasks in a list format.
• As a User, I should be able to mark tasks as completed.
• As a User, I should be able to edit existing tasks.
• As a User, I should be able to delete tasks.

User Personas

• User: The primary user of the application who creates and manages personal tasks. They require a simple interface to efficiently organize their daily activities.

Visuals Colors and Theme

• primary: #3A86FF (a vibrant blue for the main brand color)
• primary_light: #A8CFFF (a lighter blue for hover states and secondary UI)
• secondary: #FF006E (a bold pink for headlines and emphasis)
• accent: #FB5607 (a bright orange for call-to-action buttons and active states)
• highlight: #FFBE0B (a warm yellow for hover states and notifications)
• bg: #F7F9FC (a soft, light gray for the page background)
• surface: rgba(255, 255, 255, 0.9) (a white with slight transparency for card backgrounds)
• text: #1A1A1A (a dark gray for primary text)
• text_muted: #6C757D (a muted gray for secondary text and labels)
• border: rgba(0, 0, 0, 0.1) (a subtle gray for borders)

Signature Design Concept

The crystal-hi application will feature an interactive "Task Galaxy" homepage. Users will be greeted with a 3D galaxy map where each star represents a task. Clicking on a star will open a task card with details and options to edit or mark as complete. Users can drag to rotate the galaxy, providing a dynamic and engaging way to explore their tasks. Hovering over stars will highlight connections between related tasks, creating a visually captivating experience. This concept will be implemented using @react-three/fiber for 3D rendering and framer-motion for smooth animations and interactions.

Interaction Model & Motion Direction

The landing page will utilize a "parallax" interaction model, creating a sense of depth as users scroll through the task galaxy. Decorative layers will move at different speeds, enhancing the immersive experience. Internal pages, such as task details and settings, will adopt a "static" interaction model to prioritize clarity and ease of use.

Non-Functional Requirements

• The application should load within 2 seconds on a standard internet connection.
• The system must be available 99.9% of the time.
• The application should support the latest versions of major web browsers.

Tech Stack

• Frontend: React for Web
• Backend: Python with FastAPI
• Database: MySQL or MariaDB, using alembic for migrations
• AI Models: GPT 5.4 for user-friendly responses
• Local orchestration: Docker, docker-compose
• Server-side orchestration: Kubernetes

Assumptions and Constraints

• The application is intended for personal use and does not require multi-user collaboration features.
• The system will operate in the Indian Standard Time (IST) timezone.
• The application will be designed with a mobile-first approach, ensuring compatibility across devices.

Glossary

• Task Galaxy: A 3D interactive representation of tasks within the application.
• Parallax: A design technique where background images move slower than foreground images, creating an illusion of depth.
• Static Interaction Model: A design approach focusing on minimal motion to enhance readability and usability.