From 53a28d361b49cccd4de8e5070f9945428ba749f1 Mon Sep 17 00:00:00 2001
From: MechaCat02 <fabian@diekaulbachs.de>
Date: Fri, 3 Apr 2026 18:14:06 +0200
Subject: [PATCH] fix: add TraceLayer and Vite proxy config (supporting
 changes)

- Add tower-http TraceLayer to Axum router for request logging
- Configure Vite dev server proxy for /api and /media to localhost:3000
- Add TEST_GUIDE.md for manual frontend testing steps

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 TEST_GUIDE.md           | 42 +++++++++++++++++++++++++++++++++++++++++
 backend/src/main.rs     |  2 ++
 frontend/vite.config.ts |  8 +++++++-
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 TEST_GUIDE.md

diff --git a/TEST_GUIDE.md b/TEST_GUIDE.md
new file mode 100644
index 0000000..2afd15a
--- /dev/null
+++ b/TEST_GUIDE.md
@@ -0,0 +1,42 @@
+## Frontend Testing — Step by Step
+
+Please test each step in order and report any errors (console errors, wrong text, broken UI, API errors).
+
+### Step 1 — Join flow + PIN modal
+1. Open **http://localhost:5173/** in your browser (or navigate there if already open)
+2. You should land on the **join page** (`/join`) with a name input
+3. Enter your name (e.g. `Max`) and click **Beitreten**
+4. ✅ Expected: A modal appears showing your 4-digit PIN in large monospace font with a "Kopieren" button
+5. Click **Weiter zur Galerie**
+
+### Step 2 — Onboarding guide
+6. You should land on the **feed page** (`/feed`)
+7. ✅ Expected: A dark overlay appears at the bottom (or center on desktop) — the onboarding guide — showing step 1 of 4 with a step indicator and the Willkommen screen
+8. Click **Weiter** through all 4 steps, then **Los geht's!**
+9. ✅ Expected: Overlay disappears
+
+### Step 3 — Feed & navigation
+10. ✅ Expected: Feed shows "Noch keine Fotos." empty state with an upload button
+11. ✅ Expected: Top-right has an **upload button** (blue) and a **person icon** link
+
+### Step 4 — My Account page
+12. Click the **person icon** in the top-right
+13. ✅ Expected: `/account` page shows your name (`Max`), a blue "Gast" badge, session expiry date, and your PIN displayed large in an amber box
+14. Click **Kopieren** — check clipboard contains your PIN
+15. ✅ Expected: Button briefly shows "Kopiert!"
+16. Click **Zur Galerie** to go back to the feed
+
+### Step 5 — Upload
+17. Click **Hochladen** — this takes you to `/upload`
+18. Try uploading a photo from your device library
+19. ✅ Expected: Photo appears in queue with a progress bar, then completes
+20. Go back to `/feed` — ✅ Expected: your photo appears in the feed grid
+
+### Step 6 — Onboarding guide not shown again
+21. Reload the page at `/feed`
+22. ✅ Expected: The onboarding overlay does **not** appear (already dismissed)
+
+### Step 7 — Recover (open a private/incognito window)
+23. Open a new **private/incognito** window at **http://localhost:5173/recover**
+24. Enter the same name (`Max`) and the PIN you copied
+25. ✅ Expected: You're redirected to the feed with the same account
diff --git a/backend/src/main.rs b/backend/src/main.rs
index d9f777f..256a36f 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -3,6 +3,7 @@ use axum::extract::DefaultBodyLimit;
 use axum::routing::{delete, get, patch, post};
 use axum::Router;
 use tower_http::services::ServeDir;
+use tower_http::trace::TraceLayer;
 use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
 
 mod auth;
@@ -91,6 +92,7 @@ async fn main() -> Result<()> {
         .route("/health", get(|| async { "ok" }))
         .merge(api)
         .nest_service("/media", media_service)
+        .layer(TraceLayer::new_for_http())
         .with_state(state);
 
     let listener = tokio::net::TcpListener::bind(("0.0.0.0", config.app_port)).await?;
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index bf699a8..36682f7 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -3,5 +3,11 @@ import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()]
+	plugins: [tailwindcss(), sveltekit()],
+	server: {
+		proxy: {
+			'/api': 'http://localhost:3000',
+			'/media': 'http://localhost:3000'
+		}
+	}
 });