Making Fun Flask Apps for No Reason

Sometimes life gets you down. Maybe it's a crushing political situation in your home country, perhaps you read the latest scientific data about global warming or hey sometimes you just need to make something stupid to remind yourself why you ever enjoyed doing this. Whatever the reason, let's take a load off and make a pointless Flask app. You can do it too!

Pokemon TCG Pocket Friend Website

I want to find some friends for the mobile game Pokemon TCG Pocket, but I don't want to make a new Reddit account and I don't want to join a Discord. So let's make one. It's a pretty good, straightforward one-day kind of problem.

Why Flask?

Python Flask is the best web framework for dumb ideas that you want to see turned into websites with as little work as possible. Designed for people like me who can hold no more than 3 complex ideas in their heads at a time, it feels like working with Rails if Rails didn't try to constantly wrench the steering wheel away from you and drive the car.

It's easy to start using, pretty hard to break and extremely easy to troubleshoot.

We're gonna try to time limit this pretty aggressively. I don't want to put in a ton of time on this project, because I think a critical part of a fun project is to get something out onto the Internet as quickly as possible. The difference between fun projects and work projects is the time gap between "idea" and "thing that exists for people to try". We're also not going to obsess about trying to get everything perfectly right. Instead we'll take some small steps to try and limit the damage if we do something wrong.

Let me just see what you made and skip the tutorial

Pokémon Pocket TCG Friend Code Exchange

Find and exchange Pokémon Pocket TCG friend codes with players worldwide.

Pokémon Friend Finder

Source code here: https://gitlab.com/matdevdug/pokemontcg-friend-finder

Feel FREE to use this as the beginning template for anything fun that you make and please let me know if you make something cool I can try.

Note:

This is not a "how do I Flask" tutorial. This is showing you how you can use Flask to do fun stuff quickly, not the basics of how the framework operates. There's a good Flask tutorial you'll have to do in order to do the stuff I'm talking about: https://flask.palletsprojects.com/en/stable/tutorial/

Getting Started

Alright let's set this bad-boy up. We'll kick it off with my friend venv. Assuming you got Python from The Internet somewhere, let's start writing some routes.

python3.12 -m venv venv
source venv/bin/activate
pip install flask

Make a hello.py with

from flask import Flask

app = Flask(__name__)


@app.route('/')
def hello():
    return 'Hello, World!'

Run it with python hello.py and enjoy your hello world.

Let's start writing stuff

Basically Flask apps have a few parts. There's a config, the app, templates and static. But before we start all that, let's just quickly define what we actually need.

• We need an index.html as the /
• We need a /sitemap.xml for search engines
• Gonna need a /register for people to add their codes
• Probably want some sort of /search
• If we have user accounts you probably want a /profile
• Finally gonna need a /login and /logout

So to store all that junk we'll probably want a database but not something complicated because it's friend codes and we're not looking to make something serious here. SQLite it is! Also nice because we're trying to bang this out in one day so easier to test.

At a basic level Flask apps work like this. You define a route in your app.py (or whatever you want to call it.

@app.route('/')
def main():
    return render_template("index.html")

Then inside of your templates directory you have some Jinja2 templates that will get rendered back to the client. Here is my index.html

{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <h1 class="text-center text-danger">Pokémon TCG Friend Finder</h1>
    <p>Welcome to the Pokémon TCG Friend Finder, where you can connect with players from all over the world!</p>

    <div class="mt-4">
        <h4>How to Find Friend Codes:</h4>
        <p>To browse friend codes shared by other players, simply visit our <a class="btn btn-primary btn-sm" href="{{ url_for('find_friends') }}">Find Friends</a> page. No registration is required!</p>
    </div>

    <div class="mt-4">
        <h4>Want to Share Your Friend Code?</h4>
        <p>If you'd like to share your own friend code and country, you need to register for an account. It's quick and free!</p>
        <p>
            {% if current_user.is_authenticated %}
                <a class="btn btn-primary" href="{{ url_for('find_friends') }}">Visit Find Friends</a>
            {% else %}
                <a class="btn btn-success" href="{{ url_for('register') }}">Register</a> or
                <a class="btn btn-info" href="{{ url_for('login') }}">Log in</a> to get started!
            {% endif %}
        </p>
    </div>

    <div class="mt-4">
        <h4>Spread the Word:</h4>
        <p>Let others know about this platform and grow the Pokémon TCG community!</p>
        <div class="share-buttons">
            <a href="#" onclick="shareOnFacebook()" title="Share on Facebook">
                <img src="{{ url_for('static', filename='images/facebook.png') }}" alt="Share on Facebook" style="width: 64px;">
            </a>
            <a href="#" onclick="shareOnTwitter()" title="Share on Twitter">
                <img src="{{ url_for('static', filename='images/twitter.png') }}" alt="Share on Twitter" style="width: 64px;">
            </a>
            <a href="#" onclick="shareOnReddit()" title="Share on Reddit">
                <img src="{{ url_for('static', filename='images/reddit.png') }}" alt="Share on Reddit" style="width: 64px;">
            </a>
        </div>
    </div>
</div>

<!-- JavaScript for sharing -->
<script>
    const url = encodeURIComponent(window.location.href);
    const title = encodeURIComponent("Check out Pokémon TCG Friend Finder!");

    function shareOnFacebook() {
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank');
    }

    function shareOnTwitter() {
        window.open(`https://twitter.com/intent/tweet?url=${url}&text=${title}`, '_blank');
    }

    function shareOnReddit() {
        window.open(`https://www.reddit.com/submit?url=${url}&title=${title}`, '_blank');
    }
</script>
{% endblock %}

Some quick notes:

• I am using Bootstrap because Bootstrap let's people who are not good at frontend do one of those really quickly: https://getbootstrap.com/
• You'll notice the base.html which lets you import the base template across all the other templates so you don't need to redo the basic menu navigation. You can see that here: https://gitlab.com/matdevdug/pokemontcg-friend-finder/-/blob/main/templates/base.html?ref_type=heads

Basically that's it. You make a route on Flask that points to a template, the template is populated from data from your database and you proudly display it for the world to see.

Instead let me run you through what I did that isn't "in the box" with Flask and why I think it helps.

Recommendations to do this real fast

1. Start with it inside of a container from the beginning.

FROM python:3.12-slim

# Create a non-root user
RUN groupadd -r nonroot && useradd -r -g nonroot nonroot
WORKDIR /app

COPY requirements.txt .

RUN pip3 install -r requirements.txt

COPY . .

RUN chown -R nonroot:nonroot /app

USER nonroot

ENTRYPOINT ["./gunicorn.sh"]

You are going to have to use a different HTTP server for Flask anyway, gunicorn is.....one of those. So you might as well practice like you play. Here is the compose file

version: '3.8'

services:
  app:
    build: .
    ports:
      - "9000:9000"
    volumes:
      - ~/Documents/data:/data
    environment:
      - FLASK_ENV=development
      - DATABASE_PATH=/data/users.db
      - SECRET_KEY="pleasechangeme"
      - API_KEY="secrettttsss"

Change the volumes to be wherever you want the database mounted. This is for local development but switching it to "prod" should be pretty straight forward.

2. Move config and models to their own thing.

Inside of the app.py (available here: https://gitlab.com/matdevdug/pokemontcg-friend-finder/-/blob/main/app.py?ref_type=heads) you'll see from config import Config and from models import db, bcrypt, User. This isn't required but I find mentally it helps to have them in their own files.

config is just "the stuff you are using to configure your application"

import os

class Config:
    SECRET_KEY = os.environ.get("SECRET_KEY") or "secretttssss"
    SQLALCHEMY_DATABASE_URI = f"sqlite:///{os.getenv('DATABASE_PATH', '/data/users.db')}"
    SQLALCHEMY_TRACK_MODIFICATIONS = False
    WTF_CSRF_ENABLED = True
    if os.getenv('FLASK_ENV') == 'development':
        DEBUG = True
    else:
        DEBUG = False
        SERVER_NAME = "poketcg.club"

Finally the models stuff is just the database things broken out to their own file.

from flask_sqlalchemy import SQLAlchemy
from flask_bcrypt import Bcrypt
from flask_login import UserMixin, LoginManager

db = SQLAlchemy()
bcrypt = Bcrypt()
login_manager = LoginManager()

class User(db.Model, UserMixin):
    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(150), unique=True, nullable=False)
    password = db.Column(db.String(150), nullable=False)
    friend_code = db.Column(db.String(50))
    country = db.Column(db.String(50))
    friend_requests = db.Column(db.Integer, default=0)

You'll probably want to do a better job of defining the data you are inputting into the database than I did, but move fast break things etc.

3. Logs are pretty much all you are gonna have

Python logging library is unfortunately relatively basic, but important to note that this is going to be pretty much the only way you will know if something is working or not.

# Logging configuration
logging.basicConfig(level=logging.INFO,
                    format='%(asctime)s %(levelname)s: %(message)s [in %(pathname)s:%(lineno)d]',
                    handlers=[logging.FileHandler("app.log"), logging.StreamHandler()])

That's writing out to a log file and also stdout. You can choose either/or depending on what you want, with the understanding that it's more container-y to run them just as stdout.

4. Monitor Basic Response Times

So when I'm just making the app and I want to see "how long it takes to do x" I'll add a very basic logging element to track "how long did Flask thing the request took".

# Performance tracking
@app.before_request
def before_request():
    request.start_time = time.perf_counter()

@app.after_request
def after_request(response):
    if hasattr(request, 'start_time'):
        duration = time.perf_counter() - request.start_time
        logging.info(
            f"Request to {request.path} took {duration:.2f} seconds. "
            f"{response.status_code}."
        )
        return response

This doesn't tell you a lot but it usually tells me "whoa that took WAY too long something is wrong". It's pretty easy to put OpenTelemetry into Flask but that's sort of overkill for what we're talking about.

5. Skipping Emails and Password Resets

One thing that consumes a ton of time when working on something like this is coming up with the account recovery story. I've written a ton on this before so I won't bore you with that again, but my recommendation for fun apps is just to skip it.

In terms of account management make it super easy for the user to delete their account.

Deploying to Production

The most straightforward way to do this is Docker Compose with a file that looks something like the following:

services:
  app:
    build: .
    volumes:
      - /mnt/data:/data
    environment:
      - FLASK_ENV=production
      - DATABASE_PATH=/data/users.db
      - SECRET_KEY="make a good secret here please"

  caddy:
    image: caddy:latest
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - caddy_data:/data
      - caddy_config:/config
      - ./Caddyfile:/etc/caddy/Caddyfile
    environment:
      - CADDY_AUTOHTTPS=on

volumes:
  caddy_data:
  caddy_config:

Then you need the Caddyfile which looks something like this:

example.com {
    reverse_proxy app:9000
}

There are even easier options I outline here: https://matduggan.com/easier-alternative-to-nginx-lets-encrypt-with-caddy/

Some quick checks

• Set up seccomp profiles on your container: https://docs.docker.com/reference/cli/docker/container/run/#security-opt --security-opt="no-new-privileges=true"
• Setting up the network correctly

networks:
  internal:
    driver: bridge

services:
  app:
    networks:
      - internal
  caddy:
    networks:
      - internal
      - default

You can decide how complicated or simple you want to make this, but you should be able to (pretty easily) set this up on anything from a Pi to a $5 a month server.

See? Wasn't that hard!

So is my website a giant success? Absolutely not. I've only gotten a handful of users on it and I'm not optimistic anyone will ever use it. But I did have a ton of fun making it, so honestly mission success.

Questions/comments/concerns: https://c.im/@matdevdug