User:Youjung/SI30: Unbordering/Prototyping

Documentation on prototyping with flask.

Flask Set up

Flask documentation page from prototyping class.

1. Install

$ uv venv
$ source .venv/bin/activate
$ uv pip install flask

2. Restarting your project

$ source .venv/bin/activate
$ flask --app <filename> run

PLACES I WOULD NORMALLY NOT VISIT IN ROTTERDAM

Idea

Where are the places that you would normally not visit? And why would you not visit these places? Maybe it's because you do not have the needs, you do not like the vibe, you do not like the neighborhood or you have some kind of phobia.

Rotterdam is a culturally diverse city, and there are invisible borders that divide they neighborhood. What determines these borders can be boundaries created by cultural/religious differences. This boundary can be derived from fear, overwhelm, unfamiliarity or even disgust. You might need courage to cross these borders. These borders and boundaries are very situated on personal background. Through this flask prototype, I'd like to document places that I fear to visit, maybe with some friends and try to identify what are our borders. Maybe even find patterns and compare.

The protocol is that you have to physically visit the location, take a picture, maybe even go inside and engage with the people there and share an anecdote on this page.

Requirements

This page needs a form that includes...

• location name
• address
• visited check box
• anecdote
• image upload
• select contributor

These collected data will be stored in a .json file and images would be collected in a separate folder.

File structure

CSS and uploaded images are stored in the static folder because they need to be directly accessible by the browser. Flask automatically serves anything in this folder publicly.

.
├── database.json
├── observations.py
├── static
│   ├── reset.css
│   ├── style.css
│   └── uploads
│       └── collectedimg.png
└── templates
    └── observations.html

Code

observations.py

1. Saving data to json

2. Uploading image

import json
import os
from flask import Flask, render_template, request
from prefix import PrefixMiddleware

app = Flask(__name__)

#UPLOAD TO SERVER
app.wsgi_app = PrefixMiddleware(app.wsgi_app, '/sergio/SI30/fieldwork-tools/places_i_would_not_visit')

os.makedirs("static/uploads", exist_ok=True)

@app.route("/", methods=["GET", "POST"])
def main():
    with open("database.json", "r") as f:
        observations = json.load(f)

    if request.method == "POST":
        observation = dict(request.form)

        img = request.files["images"]
        
        #ADD IMAGE
        if img and img.filename != "":
            img.save("static/uploads/" + img.filename)
            observation["image"] = img.filename
        else:
            observation["image"] = None

        observations.append(observation)

        #WRITE TO DATABASE
        with open("database.json", "w+") as f:
            f.write(json.dumps(observations, indent=2))

    return render_template("observations.html", observations=observations)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5110)
    # app.run(debug=True)

database.json

 []

If there is data, it would look like this:

at the last {}, you should not include ,

[
  {
    "name": "coffeeshop Bilbao",
    "address": "Carnisselaan 20A, 3083 HJ Rotterdam",
    "anecdote": "In South Korea drugs are strictly forbidden and illegal. Whenever I walk cross these shops it's interesting how it's so casual. Still feels a bit dangerous and a taboo for me. One time I was waiting in line with a friend as she wanted to buy something and it felt wrong to be standing here. ",
    "user": "Youjung",
    "image": "Screenshot 2026-04-14 at 14.50.45.png"
  },
  {
    "name": "andy's darts",
    "address": "Strevelsweg 734, 3083 AS Rotterdam",
    "anecdote": "I don't know what to expect there. It's a dart shop but has so many trophies in the show window. ",
    "user": "Daan",
    "image": "Screenshot 2026-04-14 at 14.49.01.png"
  }
]

observations.html

{%%}

customization according to contributor

Uploading to Sergio(server)

Followed this documentation but encountered some problems. This is how I solved it.

1. Replace .venv and install flask

# remove existing venv
rm -rf .venv

# make new venv on server
python3 -m venv .venv

# install flask
.venv/bin/pip install flask

2. Import PrefixMiddleware in observation.py

from prefix import PrefixMiddleware

3. Host setting --host=0.0.0.0

4. Reload nginx

5. 413 Request Entity too large

Documentation in progress...