• Poor time estimation of how long a task would take (either overestimating easy tasks or underestimating difficult tasks)
• Lack of an analytics space to extract the patterns based on past data (planned vs actual duration to complete a task, the mental state when doing the task, and the detailed reflection after completing the task)
• Lack of a tool to experiment with different techniques or methods to confirm whether a change in behavior is effective or not.

Features

• CRUD Operations: Users can create, read, update, and delete projects, categories, lists, and tasks.
• Analytics: Users can retrieve data to see statistics about their completion rate, estimation accuracy, etc., by category and by project.
• Experiments: Users can set up experiments to apply to certain types of tasks and measure the impact.

Backend

Folder Structure (Application Factory Pattern)

The backend is structured using the Application Factory Pattern, with the API layer (defining the routes) and services layer (defining the business logic and how to interact with the database tables)

backend/
├── app/
│   ├── api/
│   │   ├── __init__.py
│   │   ├── auth.py
│   │   ├── categories.py
│   │   ├── lists.py
│   │   ├── projects.py
│   │   └── tasks.py
│   │   └── analytics.py
│   │   └── experiments.py
│   ├── models/
│   │   ├── __init__.py
│   │   ├── analytics.py
│   │   ├── base.py
│   │   ├── experiment.py
│   │   ├── project.py
│   │   ├── task.py
│   │   └── user.py
│   ├── services/
│   │   └── auth_service.py
│   │   └── project_service.py
│   │   └── category_service.py
│   │   └── task_service.py
│   │   └── analytics_service.py
│   │   └── experiment_service.py
│   ├── utils/
│   ├── __init__.py
│   └── config.py
├── migrations/
├── requirements.txt
├── reset_db.py
└── run.py

Database Design

REST APIs

Authentication Endpoints

Category Endpoints

Project Endpoints

List Endpoints

Task Endpoints

Frontend

User Flow

Folder Structure

frontend/
├── node_modules/
├── public/
├── src/
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Layout.jsx
│   │   │   └── Sidebar.jsx
│   │   └── ui/
│   ├── context/
│   │   ├── AuthContext.jsx
│   │   └── TimerContext.jsx
│   ├── features/
│   │   ├── categories/
│   │   │   ├── CategoryCard.jsx
│   │   │   ├── CreateCategoryModal.jsx
│   │   │   └── EditCategoryModal.jsx
│   │   ├── lists/
│   │   │   ├── CreateListModal.jsx
│   │   │   ├── GetListFromProjectsModal.jsx
│   │   │   └── ListCard.jsx
│   │   ├── projects/
│   │   │   ├── CreateProjectModal.jsx
│   │   │   ├── EditProjectModal.jsx
│   │   │   ├── ProjectCard.jsx
│   │   │   └── ProjectDetailView.jsx
│   │   └── tasks/
│   │       └── AddTaskModal.jsx
│   ├── hooks/
│   │   ├── useCategories.js
│   │   ├── useProjects.js
│   │   ├── useTasks.js
│   │   └── useWorkspaceLists.js
│   ├── pages/
│   │   ├── Analytics.jsx
│   │   ├── Calendar.jsx
│   │   ├── Categories.jsx
│   │   ├── Dashboard.jsx
│   │   ├── Experiments.jsx
│   │   ├── Login.jsx
│   │   ├── Profile.jsx
│   │   └── Projects.jsx
│   ├── services/
│   │   ├── api.js
│   │   ├── lists.js
│   │   ├── projects.js
│   │   └── tasks.js
│   ├── App.css
│   ├── App.jsx
│   ├── index.css
│   ├── main.jsx
│   └── theme.js

Under Development

• Analytics dashboard to show statistics about total completed tasks, accuracy estimation rate, time spent on different types of tasks, and AI-powered insights generation
• Experiments that allow users to conduct productivity-related experiments, such as time estimation multiplier, and practice to improve mental state.

Usage Guide

1. Clone this GitHub repo:

git clone https://github.com/thuinanutshell/flow-task-management-app

2. Create a virtual environment in the root directory (not inside the backend or the frontend)

python3 -m venv .venv

3. Activate the virtual environment

. .venv/bin/activate

4. Change to the backend folder & Install all the requirements

cd backend
pip install -r requirements.txt

5. Create an environment variable file

GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"
SECRET_KEY = "super-secret-key"
JWT_SECRET_KEY = "super-secret-key"

6. Run the backend
7. Open another terminal and change to the frontend directory

cd frontend

8. Run the frontend

npm install
npm run dev

Key Learnings

• Having clear user stories and user flow is so important that I couldn't emphasize it enough, even more so now that we have AI assistants. At some point, I myself wasn't so sure about the timer user flow, and I made a mistake by asking AI to suggest the code structure I could follow. But then, I took a step back and asked myself: Was the way I explained the flow clear enough? And do I really understand it? Then I chose the traditional way, using a pen and paper to draw out the interactions on the frontend. As a result, I could explain the context much better to the LLM and decided on a solution that was way simpler. Specifically, I was faced with two design options:
  • To create a separate table to store the time sessions - basically, when a user starts a timer, that counts as a session - this idea came from the fact that there are two buttons on the frontend - start and resume, which I thought might need two separate logics for the endpoints.
  • To create a logic in the Tasks table for continuous updates, like cumulatively adding more time when the user resumes the timer again. I decided to go with the second one because it is easy to understand, and it turned out that the Start and Resume buttons can use the same endpoint since the key idea is to keep adding the time the user has worked