Building Your First To-Do App Using Flask
If you’re just starting with web development in Python, Flask is one of the best frameworks to learn. It’s lightweight, easy to use, and perfect for small projects. In this guide, we’ll walk you through building a basic To-Do list app using Flask — a hands-on way to learn how web apps work.
This project will help you understand routes, templates, forms, and how to manage simple data using Python.
Why Flask?
- Minimal setup – Start coding quickly
- Great for beginners – Learn key concepts without overwhelm
- Scalable – Start small, grow big
What You’ll Build
A basic To-Do app where users can:
- View a list of tasks
- Add a new task
- Mark tasks as complete
- Delete tasks
Step 1: Project Setup
Create a folder for your project and install Flask:
bash
Copy code
mkdir flask_todo
cd flask_todo
pip install flask
Create a file called app.py:
python
Copy code
from flask import Flask, render_template, request, redirect
app = Flask(__name__)
tasks = []
@app.route(‘/’)
def index():
return render_template(‘index.html’, tasks=tasks)
@app.route(‘/add’, methods=[‘POST’])
def add():
task = request.form.get(‘task’)
if task:
tasks.append({‘task’: task, ‘done’: False})
return redirect(‘/’)
@app.route(‘/complete/<int:index>’)
def complete(index):
tasks[index][‘done’] = True
return redirect(‘/’)
@app.route(‘/delete/<int:index>’)
def delete(index):
tasks.pop(index)
return redirect(‘/’)
if __name__ == “__main__”:
app.run(debug=True)
Step 2: Create the HTML Template
Create a folder named templates and inside it, create a file called index.html:
html
Copy code
<!doctype html>
<html>
<head>
<title>To-Do App</title>
</head>
<body>
<h1>My To-Do List</h1>
<form method=”POST” action=”/add”>
<input name=”task” placeholder=”Enter a task” required>
<button type=”submit”>Add</button>
</form>
<ul>
{% for i, task in enumerate(tasks) %}
<li>
{{ task.task }} {% if not task.done %}
<a href=”/complete/{{ i }}”>✔️</a>
{% else %}
<strong>(Done)</strong>
{% endif %}
<a href=”/delete/{{ i }}”>🗑️</a>
</li>
{% endfor %}
</ul>
</body>
</html>
Step 3: Run the App
In your terminal, run:
bash
Copy code
python app.py
Visit http://127.0.0.1:5000/ in your browser to use your new To-Do app!
What You Learned
- Flask routing (@app.route)
- Handling form data with request.form
- Using Jinja2 templates
- Basic Python list operations for storing tasks
Practice Challenge
Try enhancing your app by:
- Adding task timestamps
- Saving tasks to a file or database
- Allowing task editing
Each new feature builds your Flask and Python skills.
Want to build more apps and learn backend development with real projects?
👉 https://www.thefullstack.co.in/courses/
Our full-stack programs cover everything from Flask and APIs to databases and deployment.
You also like this:
What is Backend Development? A Complete Guide for Beginners [2025]
Leave a Reply