How to create a todo app using streamlit

I wanted to create a simple side project to code a little bit and explore streamlit a bit more. This code showcases how I’ve organized a minimal yet functional task manager, complete with analytics, into separate files for clarity and extensibility.

The goal was to combine an interactive task manager with analytics, all powered by python and streamlit. This code is designed to help you track tasks, update their status, and visualize key metrics with plotly. Throughout this article, we will walk through each file to understand its purpose and how it fits into the broader solution.

First, the code is structured in this way:

Directory structure:
└── mchl-schrdng-streamlit-todo-list/
├── app.py
├── requirements.txt
├── components/
│ ├── analytics.py
│ ├── sidebar.py
│ └── task_display.py
└── utils/
├── database.py
├── plotly_utils.py
└── theme_manager.py

app.py

In app.py, we initialize the database, configure the streamlit page, and organize the user interface into two main sections: task manager and analytics. This structure lets you access a list of tasks or analyze them visually, all from one place. When you click on “task manager,” the app pulls your tasks from the database and displays them. When you switch to “analytics,” the code retrieves the same tasks but renders them in various charts and graphs.

requirements.txt

In requirements.txt, we list the core dependencies — streamlit and plotly — ensuring you have everything you need for rendering interactive charts and building a responsive front end. This file also makes it easy to share the project, since any user can install the same versions of these libraries with a simple command.

analytics.py

In components/analytics.py, we dive into the logic for transforming raw task data into intuitive visualizations. This file calculates status counts, tracks how many tasks are created over time, and averages out urgency and importance values. Then, using plotly, it generates pie charts, line charts, and bar charts to give you different angles on your data. By calling apply_transparent_layout, we ensure each chart fits nicely with a sleek look.

sidebar.py

In components/sidebar.py, we handle navigation and task management forms. This file creates buttons and forms for adding new tasks, updating existing tasks, and even resetting the entire database. It also includes a toggle for dark mode, which leverages the theme settings in utils/theme_manager.py. With these features in the sidebar, the main app screen remains clean and focused.

task_display.py

In components/task_display.py, we map urgency and importance values to human-friendly labels and compute an “eisenhower ratio,” giving you a quick way to prioritize tasks. We split the view into three categories — “to do,” “doing,” and “done” — and display the tasks as dataframes, sorted by their ratio for easier scanning.

database.py

In utils/database.py, we define functions for creating, reading, updating, and deleting tasks from the sqlite database. This includes initializing the db schema, inserting new rows, updating existing records, and dropping tables as needed. By centralizing these operations, the rest of the code interacts with the database through a clear api, promoting good maintainability.

plotly_utils.py

In utils/plotly_utils.py, we apply a transparent layout to all plotly figures, matching the light or dark theme and keeping the interface visually consistent. In utils/theme_manager.py, we define how to switch between light mode and dark mode by injecting custom css into the streamlit app. This approach ties everything together, letting you personalize the look and feel of the entire project with a single toggle.

theme_manager.py

In utils/theme_manager.py, we import Streamlit to leverage st.markdown and define how to switch between light and dark modes. By injecting custom CSS into the Streamlit app, we dynamically set a background gradient—one for light mode and another for dark mode—ensuring a consistent look. This simple function, apply_theme(), ties the entire project's style together and offers quick personalization with a single toggle.

Overall, this project demonstrates how a python-based tool can blend data analytics with everyday task management. It starts with a clear layout in app.py, includes a rich set of components for displaying and modifying tasks, and finishes with a helpful analytics view that relies on a small set of utility files.

Have fun exploring this side project, and feel free to expand or adapt the code to fit your specific needs.

You can find the repo here.

Take care 🤘