Travel Journal

Project Description

On this website you can document your travel stories: where you were, what you did, and which videos and pictures you took. Keep your journal for yourself or share it with others.

Pages

Map Page

Create a journey by placing markers on a map. Each marker can contain notes, dates, images, and videos.

Blog Page

View the notes from one journey as a blog post. Markers are shown as chapters in date order.

Journey Explorer

Browse and open existing journeys.

Features

• Create and edit journeys
• Add markers/chapters to a map
• Add text, dates, videos, and images to markers
• View journeys as blog posts
• Register, log in, and save journeys through the backend

Setup And Running

The app has two parts that must run at the same time:

• Backend API: Flask, running on http://127.0.0.1:5000
• Frontend: static HTML/CSS/JavaScript, running on http://127.0.0.1:8000

Use 127.0.0.1 for both frontend and backend while developing. Mixing localhost and 127.0.0.1 can cause login/session cookies to fail.

Software Requirements

• Python 3.12 or newer
• A terminal such as PowerShell, Command Prompt, or Git Bash
• Optional: uv for dependency management

Backend Setup With uv

From the project root:

cd backend
uv sync
uv run python app.py

The backend should show:

Running on http://127.0.0.1:5000

Leave this terminal running.

Backend Setup With requirements.txt

If you are not using uv, create and activate a virtual environment manually.

From the project root:

cd backend
python -m venv .venv
.\.venv\Scripts\Activate.ps1
pip install -r requirements.txt
python app.py

For mac/linux

cd backend
python -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt
python app.py

If the virtual environment already exists, you can skip python -m venv .venv.

The backend should show:

Running on http://127.0.0.1:5000

Leave this terminal running.

Frontend Setup

Open a second terminal from the project root: Windows:

.\backend\.venv\Scripts\Activate.ps1
python -m http.server 8000

Linux/Mac

source backend/.venv/bin/activate
python -m http.server 8000

Then open:

http://127.0.0.1:8000/login.html

Keep both terminals open while using the app.

API Documentation

The backend API is documented with an OpenAPI/Swagger specification:

backend/openapi.yaml

To view the interactive documentation, open Swagger Editor and import backend/openapi.yaml. To make requests, start the backend and use http://127.0.0.1:5000. Browser cookie policies may make authenticated requests from the hosted Swagger Editor unreliable, so the app or an API client may be easier for testing authenticated endpoints.

The API uses a Flask session cookie for authentication. Register or log in first, then include the returned session cookie in authenticated requests. The specification documents all authentication, user, journey, comment, image upload, uploaded-file, and health endpoints.

Daily Development Workflow

1. Start the backend in backend/.
2. Start the frontend server from the project root.
3. Open http://127.0.0.1:8000/login.html.
4. Register or log in.
5. Use the map and blog pages.

If backend code changes, restart the backend with Ctrl + C and run python app.py again. If frontend HTML/CSS/JS changes, usually a hard browser reload is enough: Ctrl + Shift + R.

Tech Stack

• HTML
• CSS
• JavaScript
• Python
• Flask
• Leaflet / OpenStreetMap

Members

• Kohler Joshua
• Ruegger Andre