CS50 Week 9: Building Web Apps with Flask

From Hello World to Building Web Apps with Flask

CS50 Week 9 was a pivotal moment in my coding journey. After weeks of foundational programming, diving into algorithms, and creating visually appealing front-end designs, I am ready to take the leap into back-end web development. Enter Flask, a micro web framework that transforms Python code into dynamic web apps.

If you’re wondering how a few lines of Python can result in a functioning web app, you’re not alone. I had the same question before starting this week’s lessons. In this blog post, I’ll walk you through my experience of building my first web app with Flask. By the end, you’ll see why this week is a game-changer in my CS50 journey.

What Is Flask and Why Is It Important?

Flask is a lightweight and versatile web framework that allows developers to build web applications with Python. Unlike full-stack frameworks like Django, Flask is “micro,” meaning it provides the essentials while giving you flexibility for custom implementations.

Why Flask Stands Out:

• Easy to learn and implement.
• Perfect for small projects and learning the basics of web development.
• Extensible—add features as your app grows.

Key Concepts Covered in CS50 Week 9

This week introduced core concepts like:

• Setting up Flask and running a local server.
• Creating routes to define the app’s behavior.
• Using templates for dynamic HTML generation.

My First Steps: Setting Up Flask

To build a Flask app, you need to start with the basics:

• Installing Flask

pip install flask

• Creating Your First App

Below is the quintessential Flask “Hello World” app:

from flask import Flask  

app = Flask(__name__)  

@app.route("/")  

def home():  

    return "Hello, World!"  

if __name__ == "__main__":  

    app.run(debug=True)

• Running Your Server

Once your code is ready, run the app with:

python app.py

Open your browser and navigate to the local server where your Flask app is running, the default local address for your Flask development server. This is where your first Flask app will be accessible for testing and development. And voilà—you have your first Flask app running!

Building Routes, Requests, and Responses

Understanding Routes

Routes define how your app responds to a URL request. For example:

• /about could return an HTML page about you.
• /contact might handle a form submission.

Handling Requests and Responses

In Flask, requests allow your app to gather data from the user, while responses dictate what the user sees. For example, a login form collects user credentials (request), and Flask checks them and sends back an appropriate response.

Here’s a quick look at handling a POST request:

from flask import request  

@app.route("/submit", methods=["POST"])  

def submit():  

    name = request.form["name"]  

    return f"Hello, {name}!"

A Milestone: My First Flask Web App

After mastering the basics, I decided to create a simple to-do list app. This project helped solidify my understanding of routes, templates, and sessions.

Features of My Flask To-Do App

• Add tasks to a list.
• Mark tasks as completed.
• Save data using Flask sessions.

Code Highlights

Setting Up Routes

@app.route("/") 
def index():  

    tasks = session.get("tasks", [])  

    return render_template("index.html", tasks=tasks)  

@app.route("/add", methods=["POST"])  

def add_task():  

    task = request.form["task"]  

    session["tasks"] = session.get("tasks", []) + [task]  

    return redirect("/")

Dynamic Templates with Jinja

<ul>
{% for task in tasks %}

        <li>{{ task }}</li>

    {% endfor %}
</ul>

Managing Cookies and Sessions in Flask

One of Flask’s standout features is its ability to manage user data via sessions and cookies. This is particularly useful for tasks like user authentication or saving preferences.

How I Used Sessions

In my to-do app, I used Flask’s session object to store the list of tasks:

from flask import session  

session["tasks"] = ["Learn Flask", "Build a web app"]

This data persists between requests, ensuring users see their updated task lists every time they refresh the page.

FAQs About CS50 Week 9 Flask Web Apps

Q: What makes Flask beginner-friendly?
A: Flask’s simplicity lies in its minimalistic design and Python syntax, which makes it approachable for those new to web development.

Q: Do I need a database to use Flask?
A: Not necessarily. For small projects, sessions or JSON files can suffice. However, Flask integrates seamlessly with databases like SQLite or PostgreSQL.

Why Flask Resonated with Me

Learning Flask reminded me of why I chose front-end development in the first place. It’s about creating experiences that connect with users, whether through dynamic forms or interactive to-do lists.

This journey also made me reflect on how far I’ve come since starting CS50. From retrenchment to rebuilding my career path, every step has brought me closer to my dream of becoming a front-end developer.

Check out my blog post “From Retrenchment to Reinvention: My Coding Journey After Losing My Job” for more.

Let’s connect!

If you’re on your own coding journey, I’d love to hear your thoughts! What has been your favorite framework or milestone so far? Comment below or connect with me on my blog, Code with Malie.