Tech-Stack – Meety
Dieser Stack deckt den kompletten Sprint-1-Kernloop (alle Must-have User Stories, US-01 bis US-09) vollständig ab. Ergänzungen für Sprint 2/3 sind bewusst nicht Teil des initialen Setups, sondern werden erst aufgenommen, wenn der jeweilige Sprint sie benötigt (kein Scope Creep, siehe S1-Entwickler-Bedürfnis).
1. Framework & Sprache
| Technologie | Link | Rolle im Projekt |
|---|---|---|
| Next.js (App Router) | https://nextjs.org/ | Fullstack-TS-Monolith, Basis für Front- und Backend |
| TypeScript | https://www.typescriptlang.org/ | Sprache für Front- und Backend im selben Codebase |
| React | https://react.dev/ | UI-Layer innerhalb von Next.js |
Bezug zu User Stories: Fundament für alle Stories, da jede Interaktion (Login, Formulare, Swipe-Screen) über App-Router-Routen bzw. React-Komponenten läuft.
2. UI & Styling
| Technologie | Link | Rolle im Projekt |
|---|---|---|
| Tailwind CSS (v4) | https://tailwindcss.com/ | Utility-First-Styling |
| shadcn/ui | https://ui.shadcn.com/ | Komponenten-Bibliothek (Formulare, Dialoge, Cards) |
Bezug zu User Stories:
- US-02 Gruppe erstellen: Formular für Gruppenname/Zeitraum (shadcn-Form-Komponenten)
- US-04 Verfügbarkeiten eintragen: Kompakte Tap-UI für Zeitfenster
- US-06 Aktivitäten swipen: Card-Komponente als Basis für den Swipe-Stack
3. Frontend ↔ Backend
| Technologie | Link | Rolle im Projekt |
|---|---|---|
| Server Actions + React Server Components | https://react.dev/reference/rsc/server-actions | Typesafe Datenfluss ohne separate API-Schicht (kein tRPC nötig) |
| useOptimistic | https://react.dev/reference/react/useOptimistic | Sofortiges UI-Feedback beim Swipen |
| TanStack Query (optional) | https://tanstack.com/query/latest | Nur auf dem Swipe-Screen, falls clientseitiges Caching/Refetching nötig wird |
Bezug zu User Stories:
- US-06 Aktivitäten swipen:
useOptimisticsorgt dafür, dass die nächste Karte sofort erscheint, bevor die Server-Antwort zurück ist (“flüssiges Verhalten” laut Akzeptanzkriterium) - US-04 Verfügbarkeiten eintragen: Server Actions für Autosave ohne separaten Speichern-Button
4. Datenhaltung
| Technologie | Link | Rolle im Projekt |
|---|---|---|
| Neon (serverless Postgres) | https://neon.tech/ | Datenbank, Free-Tier für MVP-Phase |
| Drizzle ORM | https://orm.drizzle.team/ | Typesicherer DB-Zugriff |
| drizzle-kit | https://orm.drizzle.team/kit-docs/overview | Migrations-Tooling |
Bezug zu User Stories:
- US-02 Gruppe erstellen, US-03 Gruppe beitreten: Gruppen- und Mitgliedschafts-Tabellen
- US-04 Verfügbarkeiten eintragen: Persistenz der Zeitfenster pro Mitglied
- US-09 Frei-belegt-Sichtbarkeit: Schema-Design entscheidet, dass nur ein Status (frei/belegt), keine Kalenderdetails gespeichert/exponiert werden – direkte Umsetzung der DSGVO-Anforderung von Datenschutzbehörden
5. Validierung & Formulare
| Technologie | Link | Rolle im Projekt |
|---|---|---|
| Zod | https://zod.dev/ | Schema-Validierung, auch als Grundlage für Formulare |
| react-hook-form | https://react-hook-form.com/ | Formular-State in Kombination mit shadcn/Zod |
Bezug zu User Stories: US-02 Gruppe erstellen (Validierung von Name/Zeitraum vor dem Speichern)
6. Authentifizierung
| Technologie | Link | Rolle im Projekt |
|---|---|---|
| Better Auth | https://www.better-auth.com/ | OAuth-Login (Google), Nutzerverwaltung in eigener Neon-DB via Drizzle-Adapter |
Bezug zu User Stories:
- US-01 Onboarding: Google-Login ohne eigenes Passwort
- US-03 Gruppe beitreten: Login unmittelbar vor dem Beitritt
- Unterstützt Datenminimierung, siehe Notiz in US-01 (“nur minimale Profildaten angefragt”)
7. Hosting
| Technologie | Link | Rolle im Projekt |
|---|---|---|
| Vercel (Hobby) | https://vercel.com/ | Deployment-Plattform für MVP |
| Coolify | https://coolify.io/ | Perspektivisches Self-Hosting auf Hetzner (später, nicht MVP) |
| Hetzner | https://www.hetzner.com/ | Ziel-Infrastruktur für Self-Hosting |
Bezug zu User Stories: Keine direkte Story-Zuordnung, aber Rahmenbedingung für Hosting Provider (EU-Serverstandort, Verfügbarkeit).
8. Hintergrundjobs
| Technologie | Link | Rolle im Projekt |
|---|---|---|
| Vercel Cron Jobs | https://vercel.com/docs/cron-jobs | Periodisches Neuberechnen der Terminvorschläge (kein Websocket/Live-Update) |
Bezug zu User Stories: US-05 Gemeinsame Termine ermitteln (Rangliste wird per Cron statt in Echtzeit aktualisiert – bewusster Trade-off für den MVP, kein Live-Update über mehrere offene Tabs hinweg)
9. Sprint-1-Abdeckung (Zusammenfassung)
Der oben beschriebene Stack deckt alle Must-have Stories ab:
| User Story | Stack-Baustein |
|---|---|
| US-01 Onboarding | Better Auth |
| US-02 Gruppe erstellen | Server Actions, Drizzle, Zod, shadcn |
| US-03 Gruppe beitreten | Better Auth, Server Actions |
| US-04 Verfügbarkeiten eintragen | Server Actions, useOptimistic, Drizzle |
| US-05 Gemeinsame Termine ermitteln | Drizzle-Query, Vercel Cron |
| US-06 Aktivitäten swipen | useOptimistic, TanStack Query (optional) |
| US-07 Gruppen-Match | Drizzle-Aggregation |
| US-08 Termin bestätigen | Server Actions |
| US-09 Frei/belegt-Sichtbarkeit | Drizzle-Schema-Design |
-> Für das initiale Setup ist kein weiteres Tool nötig
10. Geplante Ergänzungen für spätere Sprints (noch nicht im MVP-Setup)
Diese Technologien werden erst benötigt, wenn Sprint 2/3 aktiv angegangen wird – bewusst nicht Teil des initialen Setups.
| Technologie | Link | Benötigt für | Sprint |
|---|---|---|---|
| Web Push API + Service Worker (oder Managed-Service wie Novu/OneSignal) | https://web.dev/articles/push-notifications-overview · https://novu.co/ · https://onesignal.com/ | US-11 Push-Erinnerung | Sprint 2 |
ics (npm-Paket) | https://www.npmjs.com/package/ics | US-12 Kalender-Übernahme | Sprint 2 |
| Google Places API | https://developers.google.com/maps/documentation/places/web-service/overview | US-13 Passende Orte | Sprint 2 |
| (kein neues Tool – aggregierte Drizzle-Query genügt) | – | US-14 Location-Partner | Sprint 3, ohnehin Could-have |
Notizen
- Kalender-Sync (Google Calendar, US-12) nutzt die bereits in Better Auth gespeicherten OAuth-Tokens – kein separates Auth-System nötig.
- Bei Einführung der Google Places API auf Kosten achten: kein großzügiges Free-Tier mehr (Stand: Recherche zum Zeitpunkt dieser Doku).