📝 Build a Personal Notes App Using Python Flask

🚀 Introduction

Looking to build your first real-world web app using Python Flask? You're in the right place! In this tutorial, we’ll walk you through creating a Personal Notes App using Flask, the lightweight Python web framework perfect for beginners.

This project is ideal for college students, beginners in web development, and anyone preparing for internships or showcasing personal projects.

✅ What You’ll Learn

How to set up Flask
Create a responsive user interface with HTML and Bootstrap
Implement CRUD (Create, Read, Update, Delete) operations
Connect Flask with SQLite for data storage
Run and test your app locally

🛠️ Prerequisites

Python 3.x
pip (Python package manager)
Basic knowledge of Python and HTML

📁 Step 1: Set Up Your Project Structure

Create a new folder and organize it like this:

flask_notes_app/
│
├── app.py
├── templates/
│   ├── base.html
│   ├── index.html
│   └── edit.html
└── static/
    └── style.css

🔧 Step 2: Install Flask

Open your terminal and run:

pip install flask

💻 Step 3: Create the Flask Application (`app.py`)

from flask import Flask, render_template, request, redirect, url_for
import sqlite3

app = Flask(__name__)

# Database setup
def init_db():
    conn = sqlite3.connect('notes.db')
    conn.execute('CREATE TABLE IF NOT EXISTS notes (id INTEGER PRIMARY KEY, title TEXT, content TEXT)')
    conn.close()

@app.route('/')
def index():
    conn = sqlite3.connect('notes.db')
    notes = conn.execute('SELECT * FROM notes').fetchall()
    conn.close()
    return render_template('index.html', notes=notes)

@app.route('/add', methods=['POST'])
def add_note():
    title = request.form['title']
    content = request.form['content']
    conn = sqlite3.connect('notes.db')
    conn.execute('INSERT INTO notes (title, content) VALUES (?, ?)', (title, content))
    conn.commit()
    conn.close()
    return redirect(url_for('index'))

@app.route('/edit/<int:id>', methods=['GET', 'POST'])
def edit_note(id):
    conn = sqlite3.connect('notes.db')
    if request.method == 'POST':
        title = request.form['title']
        content = request.form['content']
        conn.execute('UPDATE notes SET title=?, content=? WHERE id=?', (title, content, id))
        conn.commit()
        conn.close()
        return redirect(url_for('index'))
    note = conn.execute('SELECT * FROM notes WHERE id=?', (id,)).fetchone()
    conn.close()
    return render_template('edit.html', note=note)

@app.route('/delete/<int:id>')
def delete_note(id):
    conn = sqlite3.connect('notes.db')
    conn.execute('DELETE FROM notes WHERE id=?', (id,))
    conn.commit()
    conn.close()
    return redirect(url_for('index'))

if __name__ == '__main__':
    init_db()
    app.run(debug=True)

🖼 Step 4: Create HTML Templates

`templates/base.html`

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flask Notes App</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body class="container mt-5">
  <h1 class="text-center mb-4">📝 My Notes App</h1>
  {% block content %}{% endblock %}
</body>
</html>

`templates/index.html`

{% extends "base.html" %}
{% block content %}
<form method="POST" action="/add" class="mb-4">
  <input type="text" name="title" placeholder="Note Title" class="form-control mb-2" required>
  <textarea name="content" placeholder="Note Content" class="form-control mb-2" required></textarea>
  <button type="submit" class="btn btn-primary">Add Note</button>
</form>

<ul class="list-group">
  {% for note in notes %}
  <li class="list-group-item d-flex justify-content-between align-items-center">
    <div>
      <h5>{{ note[1] }}</h5>
      <p>{{ note[2] }}</p>
    </div>
    <div>
      <a href="/edit/{{ note[0] }}" class="btn btn-sm btn-warning">Edit</a>
      <a href="/delete/{{ note[0] }}" class="btn btn-sm btn-danger">Delete</a>
    </div>
  </li>
  {% endfor %}
</ul>
{% endblock %}

`templates/edit.html`

{% extends "base.html" %}
{% block content %}
<form method="POST">
  <input type="text" name="title" value="{{ note[1] }}" class="form-control mb-2" required>
  <textarea name="content" class="form-control mb-2" required>{{ note[2] }}</textarea>
  <button type="submit" class="btn btn-success">Update Note</button>
  <a href="/" class="btn btn-secondary">Cancel</a>
</form>
{% endblock %}

🏁 Step 5: Run the App

Open your terminal and run:

python app.py

Visit http://127.0.0.1:5000/ in your browser and start adding your notes!

🌟 Conclusion

Congratulations! You’ve built a fully functional Notes App using Python Flask. This project teaches you how to handle:

Flask routing and templates
SQLite database interaction
Basic CRUD functionality

This is a perfect mini project to showcase on your portfolio or GitHub.

🔄 Next Steps

Add user login with Flask-Login
Deploy on Heroku or Render
Add search/filter functionality

Hot Posts

📝 Build a Personal Notes App Using Python Flask – Complete Step-by-Step Guide