zinc-web System Requirements Document

Introduction

The purpose of this document is to outline the system requirements for the zinc-web project, a simple web application designed for personal use as a to-do list manager. The application will focus on simplicity and ease of use, without any complex features.

System Overview

zinc-web is a personal web application aimed at helping users manage their daily tasks efficiently. The application will provide a straightforward interface for users to add, view, and manage their to-do items. The focus will be on delivering a clean and intuitive user experience.

Functional Requirements

• As a User, I should be able to add new tasks to my to-do list.
• As a User, I should be able to view all tasks in my to-do list.
• As a User, I should be able to mark tasks as completed.
• As a User, I should be able to delete tasks from my to-do list.

User Personas

• User: The primary persona for zinc-web, who will use the application to manage personal tasks and to-do items.

Core User Flows

• User adds a new task -> Task appears in the to-do list.
• User views the to-do list -> User marks a task as completed -> Task status updates.
• User deletes a task -> Task is removed from the to-do list.

Visuals Colors and Theme

• primary: #4A90E2 (a calming blue for the main interface elements)
• primary_light: #A6C8F0 (a lighter blue for hover states and secondary UI)
• secondary: #F5A623 (a warm orange for emphasis and links)
• accent: #E94E77 (a vibrant pink for CTAs and active states)
• highlight: #F8E71C (a bright yellow for notifications and active indicators)
• bg: #FFFFFF (a clean white for the page background)
• surface: rgba(255, 255, 255, 0.9) (a subtle white for card/panel backgrounds)
• text: #333333 (a dark gray for primary text)
• text_muted: #777777 (a softer gray for secondary text and labels)
• border: rgba(0, 0, 0, 0.1) (a light gray for borders)

Signature Design Concept

The zinc-web homepage will feature an interactive "Task Garden" concept. Each task is represented as a plant in a virtual garden. Users can click on a plant to view task details, drag plants to rearrange task priorities, and watch plants grow as tasks progress. This concept will use framer-motion for smooth animations and react-icons for intuitive icons. The garden will subtly change colors based on the time of day, providing a dynamic and engaging user experience.

Interaction Model & Motion Direction

• Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals and hover transitions. Interactive elements will utilize spring physics for a polished feel, enhancing the user experience without overwhelming the simplicity of the application.

Non-Functional Requirements

• The application should load quickly and perform efficiently on standard web browsers.
• The user interface should be responsive and accessible on various devices, including desktops and tablets.

Tech Stack

• Frontend: React for Web
• Backend: Python with FastAPI
• Database: MySQL or MariaDB, using Alembic for migrations
• Local Orchestration: Docker and docker-compose

Assumptions and Constraints

• The application is intended for personal use, so user management and authentication are not required.
• The application will not include advanced features such as task categorization or reminders.

Glossary

• Task: An item on the to-do list that the user needs to complete.
• User: The individual using the zinc-web application to manage personal tasks.

This document outlines the essential requirements and design concepts for the zinc-web project, ensuring a simple yet effective to-do list application.