KN
Khanh NguyenFullstack Engineer
Blog
PortfolioShowcaseTodoList — Flask & SQLAlchemy Task App
Project Case Study
Project Case StudyID: TODOLISTEngineering Notes

TodoList — Flask & SQLAlchemy Task App

Architecture BriefingSYSTEM OVERVIEW

A Flask task-management application with user sign-in, notes CRUD, completion tracking and profile statistics, using SQLAlchemy, SQLite and Jinja templates.

Source Code

Technologies & Architecture Stack

7 Components
Python
Flask
Flask-Login
SQLAlchemy
SQLite
Jinja2
pytest
knguyen.dev/showcase/todolist
200 OK
TodoList — Flask & SQLAlchemy Task App
4 Highlights
01

Sign-up, sign-in, logout and protected application routes

02

Create, update, delete and complete personal notes

03

Profile statistics for completed and pending work

04

Jinja templates, a JSON API and a documented pytest suite

By Khanh Nguyen (Nguyễn Đình Khánh Nguyên) · Updated 15 October 2026

A small application with a complete user workflow

TodoList is a Python Flask application that connects authentication to a practical task-management workflow. Users sign in, create notes, revise or remove them, and mark work complete. A profile dashboard summarizes total, completed and pending notes, making the task state understandable beyond an individual checkbox.

The scope is deliberately compact. A small task application is useful portfolio evidence when it shows the relationship between identity, data ownership, persistence and UI feedback. Those responsibilities are easier to inspect here than in a larger application with many unrelated features.

Server-rendered interface and JSON endpoints

The public README describes Flask-Login, Flask-SQLAlchemy and SQLite, with Jinja2 templates and Tailwind CSS delivered through a CDN. Route blueprints, services, templates and models are organized separately. A small JSON API supports listing notes and other note-management operations.

SQLite keeps local setup simple. The repository documents environment configuration and a pytest suite, with GitHub Actions running tests across multiple Python versions. Source code and setup instructions provide a direct way to review the routes and run the application locally.

A comparison point for Fullstack interviews

This project provides a useful contrast to a React dashboard backed by a separate Java API. Server-rendered forms can solve a focused workflow with fewer client-side moving parts, while a larger management system has different interaction and integration needs. Comparing these approaches makes the choice of stack a concrete engineering discussion.

Related work and evidence

  • Review the documented routes, architecture and tests. TodoList Flask repository and setup.
  • Compare this focused Python application with a Java and React system. SPIT Management full-stack dashboard.
  • Explore another approach to authenticated backend operations. Express and MySQL API case study.
  • For my broader skills and background, view my CV. Khanh Nguyen — Fullstack Software Engineer CV.

Other Featured Projects

Explore 10 additional software architectures and production case studies

Page 1 of 4
Hue Festival — Next.js Cultural Landing Page
Verified Spec

Hue Festival — Next.js Cultural Landing Page

Live DemoDetails
IT HUSC 30 — University Anniversary Website
Verified Spec

IT HUSC 30 — University Anniversary Website

Live DemoDetails
Next Document Hub — Document Browsing & Preview
Verified Spec

Next Document Hub — Document Browsing & Preview

Case StudyDetails
Ecosystem & Social Protocols
  • GitHub
    @knguyen1411bSource Code & Repos
  • LinkedIn
    Khanh NguyenProfessional Network
  • YouTube
    @knguyen1411bTech & Architecture
  • Facebook
    @knguyen1411bSocial & Community
  • Instagram
    @knguyen1411bEngineering Life
  • Engineering Blog
    blog.ndknguyen.io.vnTechnical Journal
  • Discord / Community
    knguyen1411bDev Discussion
  • GitHub
    @knguyen1411bSource Code & Repos
  • LinkedIn
    Khanh NguyenProfessional Network
  • YouTube
    @knguyen1411bTech & Architecture
  • Facebook
    @knguyen1411bSocial & Community
  • Instagram
    @knguyen1411bEngineering Life
  • Engineering Blog
    blog.ndknguyen.io.vnTechnical Journal
  • Discord / Community
    knguyen1411bDev Discussion
  • GitHub
    @knguyen1411bSource Code & Repos
  • LinkedIn
    Khanh NguyenProfessional Network
  • YouTube
    @knguyen1411bTech & Architecture
  • Facebook
    @knguyen1411bSocial & Community
  • Instagram
    @knguyen1411bEngineering Life
  • Engineering Blog
    blog.ndknguyen.io.vnTechnical Journal
  • Discord / Community
    knguyen1411bDev Discussion
  • GitHub
    @knguyen1411bSource Code & Repos
  • LinkedIn
    Khanh NguyenProfessional Network
  • YouTube
    @knguyen1411bTech & Architecture
  • Facebook
    @knguyen1411bSocial & Community
  • Instagram
    @knguyen1411bEngineering Life
  • Engineering Blog
    blog.ndknguyen.io.vnTechnical Journal
  • Discord / Community
    knguyen1411bDev Discussion
KN
Nguyen Dinh Khanh Nguyen
Nguyễn Đình Khánh Nguyên · Fullstack Software Engineer

Architecting resilient distributed systems, high-performance web applications, and modern user-centric software with precision and modern engineering craft.

All Systems Operational · 100/100 Core Web Vitals
Navigation
  • 01Cockpit Terminal
  • 02Engineering Matrix
  • 03Production Arsenal
  • 04Direct Transmission
Ecosystem
  • GitHub Workspace
  • Engineering Blog
  • LinkedIn Network
  • YouTube Channel
  • Facebook Community
Architecture & Specs
Next.js 16 TurbopackEDGE
React 19 & TypeScriptSTRICT
Lenis Smooth Physics60FPS
Admin TerminalSECURE
Hue, Vietnam·14:00:00 ICT (UTC+7)
© 2026 Nguyễn Đình Khánh Nguyên. All rights reserved.