City Wallet
Mobile / Web
25.04.2026
Product Designer, Frontend Designer
- Lovable
- Vercel v0
- Cursor
- Tavily
🎯 Was es ist
City Wallet ist eine Mobile-First-Web-App, die hyperlokale, kontextbezogene Deals von Läden aus der Nachbarschaft liefert. Statt generischer Gutscheine zeigt sie das richtige Angebot im perfekten Moment – basierend auf Wetter, Uhrzeit und Kiez, ganz ohne deinen genauen Standort zu tracken.
Stell dir vor: Es regnet zur Mittagszeit → das Café 80 Meter weiter schickt dir 15 % Rabatt auf einen heißen Kaffee. Genau das ist der Magic Moment.
🧭 Meine Rolle
Ein Projekt beim Hack-Nation-Hackathon, gebaut in einem 2er-Team. Ich habe den Product- und UI-Part übernommen: Feature für Feature festgelegt, was die App für Kund:innen und Händler bieten muss und wie sie sich anfühlen und aussehen soll.
🌍 Die Vision
Große Lieferplattformen und Treue-Apps von Ketten machen den lokalen Einzelhandel kaputt. City Wallet dreht den Spieß um: Es gibt unabhängigen Händlern dieselben KI-gestützten Echtzeit-Marketing-Tools an die Hand, die Giganten wie Uber Eats oder Starbucks nutzen – aber mit Fokus auf Datenschutz und die Nachbarschaft.
Zwei Seiten, ein Ökosystem:
Verbraucher entdecken spontane, relevante Deals in ihrer Nähe.
Händler füllen automatisch leere Tische, verkaufen Überschüsse ab und reagieren auf Wetter oder Konkurrenz – ganz ohne manuellen Aufwand.
📱 Was wir gebaut haben – Consumer-Seite
Kontextbezogener Offer-Feed (/) – Cards mit Farbcodierung nach Kategorie, Live-Countdown-Balken (grün → gelb → rot je nach Ablaufzeit), Wetter- und Zeitkontext sowie ein One-Tap-CTA „Jetzt sichern“.
Filter-Pills – Alle, Kaffee ☕, Lunch 🥗, Bäckerei 🥐, Entfernung 📍.
Pull-to-Refresh mit Spinner-Animation – genau wie in einer nativen App.
Offer-Details & Einlöse-Flow (/offer, /redeem) – Angebot annehmen, zum Laden gehen, per Code einlösen.
Favoriten (/favorites) – Läden speichern und benachrichtigt werden, wenn sie neue Deals posten.
Profil, Account, Einstellungen, Datenschutz – ein komplettes Account-Shell.
In-App-Push-Notification-Mockups – simulieren Offer-Alerts in Echtzeit.
Spar-Tracker – „Du hast diesen Monat 12,40 € gespart und 3 lokale Läden unterstützt! 🌱“
🏪 Was wir gebaut haben – Merchant-Panel (/merchant)
Ein vollwertiges B2B-Command-Center im Look eines intuitiven Dashboards:
Tab „Store & Rules“
KI-Autopilot ✨ – ein Toggle, und die KI steuert deine Promotions automatisch, gedeckelt durch ein wöchentliches Budget zur Verlustvermeidung.
Wetterabhängige Trigger ⛅ – ein IF/THEN-Builder im Zapier-Stil: „WENN Regen, DANN 25 % Rabatt auf alle Heißgetränke.“
Tab „Performance“
Live-Radar für lokale Nachfrage – animierte, pulsierende Heatmap, die zeigt, wo sich die Laufkundschaft rund um deinen Laden gerade ballt.
Wettbewerber-Alerts – „3 Cafés in der Nähe bieten 20 % Rabatt – Angebot boosten? 🚀“ mit 1-Klick-Aktion.
Balkendiagramme + Tabelle für letzte Aktivitäten – klassische Analytics, sauber aufbereitet.
🔒 Datenschutz & Sicherheit
Kein exaktes GPS-Tracking – nur Signale auf Stadtteil-Ebene, Wetter und Uhrzeit.
Lovable Cloud-Backend mit Row-Level Security auf allen Daten.
Ungenutzte push_subscriptions-Tabelle vor dem GitHub-Push entfernt, um jegliche RLS-Lücken auszuschließen.
.env enthält nur publishable Keys – sicher für Commits.
🛠 Tech-Stack
React 18 + TypeScript + Vite, Tailwind + shadcn/ui, TanStack Query, Lovable Cloud (Supabase) für Auth/DB/Edge Functions, Vitest für Tests.