Next.js Todo App

Introduction

The Next.js Todo App is a full-stack application designed to help individual users manage their tasks efficiently. Built using Next.js 16 with the App Router, the application leverages MongoDB for data storage and follows industry best practices, including clean architecture, reusable components, and a scalable folder structure. This document outlines the system requirements for the Next.js Todo App, including functional and non-functional requirements, user personas, core user flows, and design specifications.

System Overview

The Next.js Todo App is designed to provide a simple yet effective task management solution for individual users. The application allows users to create, categorize, and manage their tasks with ease. Key features include task categorization, completion tick marks, and a user-friendly interface. The application is built without TypeScript and focuses on delivering a seamless user experience.

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 view a list of all tasks.
• As a User, I should be able to mark a task as completed with a tick mark.
• As a User, I should be able to delete a task.
• As a User, I should be able to edit an existing task.
• As a User, I should be able to filter tasks by category.

User Personas

• Individual User: The primary user of the application who manages personal tasks, categorizes them, and marks them as completed.

Core User Flows

1. Task Creation and Management:

   • User logs into the application.
   • User navigates to the task creation page.
   • User enters task details and selects a category.
   • User saves the task, which is then displayed in the task list.
   • User can edit or delete tasks as needed.

2. Task Completion:

   • User views the list of tasks.
   • User marks a task as completed by clicking the tick mark.
   • The task is visually updated to indicate completion.

3. Task Filtering:

   • User selects a category from the filter options.
   • The task list updates to show only tasks from the selected category.

Visuals Colors and Theme

• primary: #1E3A8A (Deep Blue)
• primary_light: #3B82F6 (Light Blue)
• secondary: #F59E0B (Amber)
• accent: #EF4444 (Red)
• highlight: #FBBF24 (Gold)
• bg: #F3F4F6 (Light Gray)
• surface: rgba(255, 255, 255, 0.8) (White)
• text: #111827 (Dark Gray)
• text_muted: #6B7280 (Muted Gray)
• border: rgba(209, 213, 219, 0.2) (Light Border Gray)

Signature Design Concept

The homepage of the Next.js Todo App features an interactive "Task Universe" concept. Users are greeted with a dynamic 3D galaxy of tasks, where each task is represented as a star. Using @react-three/fiber and @react-three/drei, users can navigate through the galaxy by clicking and dragging to rotate the view. Hovering over a star reveals task details, and clicking on a star opens the task for editing or marking as complete. This immersive experience makes task management engaging and visually appealing.

Interaction Model & Motion Direction

• Interaction Model: Parallax
  • The landing page employs a parallax effect, with layered depth created by the 3D task galaxy. As users scroll, the galaxy subtly shifts, providing a sense of depth and immersion.
• Internal Pages: Static
  • Internal pages such as task lists and settings are designed with a static layout to prioritize clarity and ease of use.

Non-Functional Requirements

• The application must load within 3 seconds on a standard broadband connection.
• The system should handle up to 10,000 tasks per user without performance degradation.
• The application must be accessible and usable on both desktop and mobile devices.

Tech Stack

• Frontend: Next.js 16 (App Router)
• Backend: Node.js
• Database: MongoDB

Assumptions and Constraints

• The application will not use TypeScript.
• The application is intended for individual users, not teams or organizations.
• The application will be deployed in a cloud environment with scalable resources.
• Docker will not be used in the deployment or development process.

Glossary

• Task: An item that a user needs to complete.
• Category: A label used to organize tasks.
• Tick Mark: A visual indicator that a task is completed.
• Parallax: A scrolling technique that creates an illusion of depth by moving background layers at different speeds.