Writing – Thoughts on Tech

Project Python: Message Board

This project is me producing a simple message board web application using Python and Flask (a web framework for Python; there are others, such as Django). Interestingly, I did a whole YouTube course on Python and came away with the idea it was just Bash scripts on steroids. You got no idea from the course that Python could be used to develop web apps, but there you go.

I did this on Linux, specificallly Linux Mint Debian Edition, but the differences are minor across platforms.

So to our tale one winter's night.

Create a project folder. I called it messageboard.
Open a terminal inside that folder (you could also do this from your IDE).
Create a virtual environment: python -m venv venv — this will create a folder called venv inside your project folder. venv contains its own Python interpreter, its own site packages, and its own pip. Essentially it's a contained, isolated mini-Python.
Activate the virtual environment (this is the only step that differs across platforms). On Linux: source venv/bin/activate; on Windows CMD: venv\Scripts\activate.bat. When successfully activated, your prompt will be preceded by venv.
Inside your project folder, install Flask: pip install flask — this installs Flask, but only into the project environment. This is the point. You can have multiple projects and they won't interfere with each other.

Create your app.py file inside your project folder. Mine looks like the following:

from flask import Flask, render_template, request, redirect

app = Flask(__name__)

# store messages in memory as dictionaries
messages = []
next_id = 1

@app.route("/")
def home():
    return render_template("home.html", messages=messages)

@app.route("/post", methods=["POST"])
def post_message():
    global next_id
    text = request.form.get("message", "")
    if text.strip():
        messages.append({"id": next_id, "text": text})
        next_id += 1
    return redirect("/")

@app.route("/delete/", methods=["POST"])
def delete_message(msg_id):
    global messages
    messages = [m for m in messages if m["id"] != msg_id]
    return redirect("/")

if __name__ == "__main__":
    app.run(debug=False)

Create a folder called templates in your projects folder — it absolutely must be called templates.

In the templates folder, create a file called home.html. Mine looks like the following:


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/static/style.css">

    <meta charset="UTF-8">
    <title>Message Board</title>
</head>
<body>
    <h1>Welcome to your message board!</h1>

    <!-- Form to submit a new message -->
    <form action="/post" method="post">
        <textarea name="message" rows="4" cols="50" placeholder="Write a message..."></textarea>
        <br>
        <button type="submit">Post message</button>
    </form>
    
    <ul>
    {% for msg in messages %}
        <li>
            {{ msg.text }}
            <form action="/delete/{{ msg.id }}" method="post" style="display:inline;">
                <button type="submit">Delete</button>
            </form>
        </li>
    {% endfor %}
</ul>

    <h2>Messages</h2>

</body>
</html>

Create a folder called static — this is where your style sheet will go: style.css. Mine looks like the following:


body {
    background-color: #121212;
    color: #e0e0e0;
    font-family: Arial, sans-serif;
    margin: 40px;
}

textarea {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border: 1px solid #333;
    padding: 10px;
    width: 100%;
}

button {
    background-color: #333;
    color: #e0e0e0;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

button:hover {
    background-color: #444;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background-color: #1e1e1e;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

That's it. You're done. You end up with a web application on which you can post messages and delete them — and this is how it looks:

messageboard