Projekt: Fitness Tracker
Fullstack
Gamification
Das Szenario
Section titled “Das Szenario”Ein Fitnessstudio hat ein Problem: Die Leute melden sich an, kommen im Januar fünfmal und dann nie wieder. Sie wollen eine App, die Mitglieder motiviert. Die Idee: Ein Tracker, der nicht nur zählt, sondern feiert. Challenges, Streaks, Highscores.
Deine Rolle: Du baust das Tool, das den inneren Schweinehund besiegt.
Deine Technischen Entscheidungen
Section titled “Deine Technischen Entscheidungen”Hier geht es um User-Psychologie und wie man sie technisch umsetzt.
1. Datenvisualisierung
Section titled “1. Datenvisualisierung”Zahlen sind langweilig. Kurven sind cool.
- Problem: Ein User will sehen “Werde ich stärker?”. Eine Tabelle mit “50kg, 55kg, 60kg” ist okay. Ein Graph ist besser.
- Entscheidung: Welche Library nutzt du? (Chart.js? Recharts? D3 für die ganz Harten?)
- Challenge: Wie stellst du sicher, dass der Graph auf dem Handy lesbar bleibt?
2. Offline vs. Online (PWA?)
Section titled “2. Offline vs. Online (PWA?)”Im Keller-Gym gibt es oft kein Netz.
- Szenario: Der User will sein Workout tracken, hat aber kein Internet.
- Entscheidung: Baust du “Offline-First”? Wie synchronisierst du die Daten, sobald das Netz wieder da ist? (Local Storage -> Sync -> DB).
3. Das Gamification-System
Section titled “3. Das Gamification-System”- Logik: Wie berechnest du einen “Streak”?
- Ist ein Streak gebrochen, wenn man einen Tag Pause macht?
- Oder zählt “3x die Woche”?
- Performance: Wenn du ein Leaderboard mit “Top 100 Usern dieses Monats” anzeigen willst, darf die Datenbank nicht 5 Sekunden rechnen müssen. Wie optimierst du diese Query?
Anforderungen (The Problem Space)
Section titled “Anforderungen (The Problem Space)”Die App muss diese motivationalen Trigger bedienen:
- Der “Erledigt”-Haken: Workout loggen muss in < 10 Sekunden gehen. (UX ist hier King).
- Der Fortschritt: Das Dashboard muss sofort zeigen: “Du bist besser als letzte Woche”.
- Der Wettbewerb: Challenges wie “1000 Liegestütze im März”.
Freie Wahl – Der Tech Stack
Section titled “Freie Wahl – Der Tech Stack”| Ebene | Fragen an dich |
|---|---|
| Frontend | Hier ist Interaktivität wichtig. Welche Tools oder Libraries unterstützen dich bei Animationen und Feedback? |
| Backend | PHP oder Node.js. Brauchst du Realtime-Features für soziale Interaktionen? Wenn ja, wie setzt du das um? |
| Deployment | Wie machst du die App “installierbar” auf dem Homescreen (PWA manifest)? |
Lernziele
Section titled “Lernziele”- Visualisierung: Daten nicht nur speichern, sondern verständlich aufbereiten.
- Komplexe Business-Logik: Gamification-Regeln sind oft komplizierter zu coden, als sie klingen.
- Mobile UX: Buttons müssen daumenfreundlich sein. Inputs müssen smart sein (Nummernblock statt Tastatur bei Gewichtseingabe).
Tipps zum Start
Section titled “Tipps zum Start”- Keep it simple: Ein Chart ist besser als gar keiner. Ein einfacher Balken “Ziel vs. Ist” reicht für den Anfang.
- Fake it till you make it: Baue das Leaderboard erst statisch, dann dynamisch.
Fragen?
Section titled “Fragen?”Wie definierst du einen “Streak”? Täglich? Wöchentlich? Erzähl uns deine Gamification-Strategie!