Building Your First To-Do App Using Flask

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]

How Can SAP ERP Be Beneficial
What Are the Most Popular Backend Development Languages in 2025?

Frequently Asked Questions

What are the basic requirements to start building a To-Do app using Flask?

To start building a To-Do app using Flask, you need to have Python installed on your computer, a code editor or IDE, and a basic understanding of Python programming. You also need to install Flask using pip, which is Python’s package installer. Once you have these requirements in place, you can begin building your app.

How do I create a database to store To-Do list items in my Flask app?

To create a database to store To-Do list items, you can use a library like Flask-SQLAlchemy, which provides a high-level interface for interacting with databases in Flask. You’ll need to configure the database connection and define your models, which represent the structure of your data. This will allow you to store and retrieve data in your database.

How do I handle user input and validation in my Flask To-Do app?

To handle user input and validation in your Flask To-Do app, you can use Flask-WTF, which provides a simple way to handle form data and validation. You’ll need to create forms that represent the structure of your data and use validation to ensure that user input is correct. This will help prevent errors and ensure that your app is secure.

How do I deploy my Flask To-Do app to a production environment?

To deploy your Flask To-Do app to a production environment, you can use a WSGI server like Gunicorn or uWSGI, which provides a high-performance interface for running your app. You’ll also need to use a reverse proxy server like Nginx or Apache to handle requests and route them to your app. This will allow you to serve your app to users and handle a large volume of requests.

How do I add authentication and authorization to my Flask To-Do app?

To add authentication and authorization to your Flask To-Do app, you can use a library like Flask-Login, which provides a simple way to handle user authentication. You’ll need to create users and roles, and use decorators to restrict access to certain routes based on user permissions. This will allow you to control who can access certain features of your app and ensure that sensitive data is protected.

admin
admin
https://www.thefullstack.co.in

Leave a Reply