📱⚡️
18. Mai 2026 · Locke, St. Pauli
Live-Build PWA Beginner-friendly Wir bauen DIE App
5 Sachen die diese Woche durch den Feed gerauscht sind →
Die großen Labs liefern alle ihre Coding-Agents nach — autonome Mehr-Schritt-Sessions, die selbst Tests laufen lassen, Fehler fixen und PRs aufmachen. Claude Code, Codex, Gemini-CLI & Co. sind nicht mehr Autocomplete, sondern Pair-Partner.
Für uns heute: genau deshalb ist „Full App in 90 Min" kein Hype — sondern Montagabend.
Die Transparenz- und GPAI-Pflichten des AI Act greifen stufenweise. Wer KI in Produkte einbaut, muss zunehmend kennzeichnen, dokumentieren, Daten sauber halten.
Take: Datenschutz-by-Design ist kein Bonus mehr. Souveräne, nachvollziehbare Setups gewinnen — siehe unsere Satzung, §2.
Offene Modelle (Mistral, Qwen, DeepSeek, Llama-Linie & Co.) sind beim Coding & Reasoning nah an den Closed-Frontier-Modellen — und laufen lokal auf einer guten GPU.
Für VCH: unser Bunker-Server fährt 18 Modelle selbst gehostet. Mitglieder kriegen API-Zugang — kein US-Cloud-Lock-in.
Das Model Context Protocol ist von „nerdiges Anthropic-Ding" zum de-facto-Standard geworden, wie LLMs Tools & Daten anbinden. Editor, Terminal, Design-Tool — alles spricht MCP.
Rückblick: haben wir bei #13 gebaut. Heute nutzen wir's beiläufig mit.
Der Begriff Vibe Coding ist endgültig angekommen — vom Insider-Witz zum Karriere-Skill. Die Diskussion verschiebt sich: nicht ob, sondern wie man es gut macht (Tests, Review, Architektur).
Unser Job: zeigen dass „schnell" und „solide" kein Widerspruch ist.
Die Vibe Coding Hamburg App — eine echte, installierbare PWA fürs Handy.
Nächster Termin, RSVP „ich komme", Event-Liste.
Magic-Link, kein Passwort. Mitglieds-Status.
Ideen-Board mit Voting — live, für alle Mitglieder.
Am Ende: aufs Handy installierbar, offline-fähig, deployed unter app.vibe-coding.hamburg.
Unsere PocketBase hat bereits alles: events, users (mit Magic-Link), ideas, idea_votes, event_attendances. API + Auth fertig.
Eine index.html. Kein Build-Step, kein npm-Install, kein Framework-Setup. Browser auf, los.
„Die halbe Miete jeder schnellen App: ein Backend das schon existiert. Heute ist das unsere — der Verein hat eins."
| Schicht | Womit | Warum |
|---|---|---|
| Backend | PocketBase (läuft schon) | DB + Auth + REST in einem |
| Frontend | 1× index.html + Alpine.js | Reaktiv, 15 KB, kein Build |
| Daten | PocketBase JS-SDK | pb.collection('events').getList() |
| App-Feeling | PWA: manifest.json + Service Worker | Installierbar, offline, Icon |
| Deploy | Statisches Hosting | Datei hochladen, fertig |
Alles ohne Toolchain. Genau das macht es 90-Minuten-tauglich.
Immer ein Feature. Nach jedem Block läuft die App. Nie 5 Sachen gleichzeitig.
Lieber ein hässlicher Knopf der tut, als ein schönes Konzept das nicht lädt.
Kontext + Ziel + Constraints. „Bau X mit Y, halte Z ein" schlägt „mach mal".
Wenn die KI Mist baut: nicht 10× nachfragen — zurückrollen, Prompt schärfer fassen, nochmal.
┌─────────────────────────────┐
│ index.html (die App) │ Alpine.js · PWA
│ ───────────────────── │
│ #events #login #ideas │
└──────────────┬──────────────┘
│ PocketBase JS-SDK (fetch über HTTPS)
▼
┌─────────────────────────────┐
│ api.vibe-coding.hamburg │ PocketBase (läuft bereits)
│ events · users · ideas │
│ idea_votes · attendances │
└─────────────────────────────┘Ein File spricht mit einer API. Mehr ist es nicht.
Ziel: HTML-Gerüst steht, App verbindet sich zu PocketBase, lädt & zeigt Events.
<!DOCTYPE html>
<html lang="de"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vibe Coding Hamburg</title>
<script defer src="https://cdn.jsdelivr.net/npm/pocketbase@0.26.0/dist/pocketbase.umd.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"></script>
</head><body>
<div x-data="app()">
<h1>Vibe Coding Hamburg</h1>
<template x-for="e in events">
<p x-text="e.date + ' — ' + e.title"></p>
</template>
</div>
<script>
function app() {
return {
events: [],
async init() {
const pb = new PocketBase('https://api.vibe-coding.hamburg');
const r = await pb.collection('events').getList(1, 20,
{ filter: 'published = true', sort: 'date' });
this.events = r.items;
}
};
}
</script></body></html>Wir heben das nächste Event raus und bauen einen „Ich komme"-Knopf.
date >= heute, sortiert, limit 1event_attendancesPocketBase kann OTP / Magic-Link out of the box. Drei Calls:
// 1 · Code anfordern -> Mail geht raus
const { otpId } = await pb.collection('users').requestOTP(email);
// 2 · Code eintauschen -> eingeloggt, Token im pb.authStore
await pb.collection('users').authWithOTP(otpId, code);
// 3 · Status lesen
pb.authStore.isValid // eingeloggt?
pb.authStore.record // { email, is_member, ... }Token bleibt im LocalStorage — App-Reload = immer noch eingeloggt.
Das Herzstück: Mitglieder posten Ideen, jede:r hat 1 Vote pro Idee.
ideas lesen, sortiert nach Votesidea_votes = Paar (user, idea), uniqueAus „Webseite" wird „App": 3 kleine Dateien.
// manifest.json — macht's installierbar
{ "name": "Vibe Coding Hamburg", "short_name": "VCH",
"start_url": "/", "display": "standalone",
"background_color": "#0a0a0f", "theme_color": "#00f0ff",
"icons": [{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }] }// sw.js — Service Worker: simpler Offline-Cache
self.addEventListener('fetch', e =>
e.respondWith(caches.match(e.request).then(c => c || fetch(e.request))));<link rel="manifest" href="/manifest.json"> + SW registrierenapp.vibe-coding.hamburglocalhost testenfilter-Syntax prüfenx-data am Wurzel-Element gesetzt?@bash fragenEin guter Feature-Prompt hat vier Teile:
Je präziser der Kontext, desto weniger Runden. Die KI rät nicht — sie braucht Fakten.
Auf deinem Handy installiert — selbst gebaut.
Backend + 1 HTML + SDK. Funktioniert für 100 andere Ideen.
Kontext-Ziel-Daten-Constraints. Ab jetzt schneller.
„Du brauchst keine 6 Monate Bootcamp um was Echtes zu bauen. Du brauchst einen Abend, ein Backend und gute Fragen."
Mo, 25. Mai 2026 · 19:00 · Locke St. Pauli
Computer Use & Browser Agents — die KI klickt selbst.
Ideen fürs Programm? → App öffnen, Idee posten, voten lassen. 😉
📱✨🚀
Fragen? Stuck? Bock auf mehr?
vibe-coding.hamburg chat.vibe-coding.hamburg @bash für Bot-Hilfe