tinkerClock: Eine Uhrenlern-App für Kinder – gebaut mit Vibe-Coding

TL;DR

• Ausgangspunkt war ein reales Lernproblem: vorhandene Apps halfen nicht wirklich beim Uhrlesenlernen für Kinder.
• Mit Lovable und Vibe-Coding entstand schnell eine funktionierende, werbefreie Lern-App, die iterativ per UX-Beobachtung verbessert wurde.
• Das neue Planungs-Feature von Lovable half, komplexere Themen wie Levels, Layouts und Re-Design strukturiert umzusetzen.
• Code-Verwaltung über GitHub, kleinere Anpassungen mit Codex, Deployment einfach und kostenlos über Vercel.
• Das Projekt zeigt: Mit KI lassen sich auch ohne tiefes Coding- oder Hosting-Wissen echte, nutzbare Anwendungen bauen.

Beim letzten Lernentwicklungsgespräch – oder wie es an der Schule meiner Kinder heißt: Bilanz- und Zielgespräch – sagte meine Tochter, sie würde gerne die Uhr lesen lernen. Wir sind dann mit der Lehrerin durchgegangen, welche Materialien es gibt, anhand derer sie dies lernen könnte. Dabei stießen wir ziemlich schnell an Grenzen, vieles hatte sie bereits ausprobiert. Auch die Anton-App kam zur Sprache. Bei dem, was dort zur Uhr abgefragt und vermittelt wird, kann man sich jedoch schnell darauf verständigen, dass man damit nicht wirklich lernt, eine Uhr zu lesen.

Von der Idee zum Tool: Lovable

Parallel dazu, hat bei uns in der Agentur ein Arbeitskollege ein Tool vorgestellt, mit Hilfe dessen man ganz schnell Design Mockups gestalten kann, um die Richtung abzuklopfen, in die der Kunde gehen will. Die Rede ist von Lovable. Ich fand das super spannend, da ich selbst bereits einige Schritte im „Vibe-Coding“ gegangen bin. Mit Codex von OpenAI bin ich dabei jedoch immer wieder mal ans Limit gestoßen, beispielsweise wenn es um Visuelles oder kleinere Feinheiten ging. Vor allem, weil es mit der Voransicht nicht immer wirklich funktioniert hat. Mit Lovable hatte ich nun ein Tool, mit dem ich in natürlicher Sprache zu einer App kommen konnte. Das Entscheidende: Ich konnte sie direkt in einer Voransicht sehen, bedienen und iterativ weiterentwickeln.

Projektstart: Vibe-Coding mit Lovable

Lovable kam wirklich wie gerufen in meinen Werkzeugkoffer geflogen. Da ich nichts Vergleichbares gefunden hatte und auch meiner Tochter keine App oder Sonstiges in die Hand geben wollte, was zugekleistert ist mit Werbeflächen, dachte ich: „Das kann ich doch vielleicht sogar selbst machen.“ Ich fing dann an mit den ersten Prompts und kam ziemlich schnell zu einer funktionierenden App. Erste kleinere Problemchen konnte ich ziemlich schnell beseitigen. Es ging sehr schnell, da konnte ich meiner Tochter schon die erste Version an die Hand geben und einen kleinen UX-Test durchführen. Ich habe beobachtet, wie sie die Uhr bedient: wo es hakt, was nicht intuitiv ist und welche Dinge – auch ohne lesen zu können oder App-Erfahrung zu haben – nicht sofort ersichtlich sind. Sofort bin ich zurück in die ChatView gewechselt und habe dann alles, was ich beobachtet hatte, per Prompt an Lovable übergeben.

Planung statt Trial-and-Error: Vibe-Coding mit Plan

An tinkerClock zu werkeln, so heißt die App, habe ich etwa zeitgleich begonnen, wie auch diesen Blog aufzusetzen. Daher verging dann auch ein bisschen Zeit vom Beginn bis jetzt zur Veröffentlichung. In der Zwischenzeit hat Lovable aber auch ein Planungs-Feature ausgerollt, was es ermöglicht, komplexere Anliegen erst einmal zu besprechen, und einen Plan zu erstellen, bzw. erstellen zu lassen, bevor die KI sich an die Umsetzung macht. Das hat es mir ermöglicht auch die letzten Probleme anzugehen, z. B. die Anordnung und Größen der Elemente in verschiedenen Viewports, das Einrichten verschiedener Levels, ein automatisches Level-up, wenn ein Streak von 10 geschafft wurde und am Ende auch das Re-Design, damit es an die Ästhetik meines Blogs angepasst ist.

Codex für Code-Anpassungen

Um von verschiedenen Stellen an das Projekt heranzukommen und auch eigene manuelle Änderungen vornehmen zu können, habe ich das Lovable Projekt in ein GitHub Repo gepusht. Somit hatte ich dann auch Zugriff auf den Code mit Codex. Bevor es den Chat-Mode in Lovable gab, habe ich hier leider vergebens versucht, mein Problem mit den verschiedenen Viewports in den Griff zu bekommen. Aber ich konnte bereits eine erste Sicherheitslücke schließen lassen. Und hier geht’s dann auch direkt zum nächsten Glied in der Kette über, nämlich dem Hosting.

Hosting mit Vercel

Im Laufe dieses Projekts war ich irgendwann so angetan davon, dass ich mich dazu entschieden habe, es auch als Content für tinkerlog nutzen zu wollen (There you go). Dafür muss ich das aber alles auch irgendwie verfügbar machen. Da ich in diesem Bereich noch ganz am Anfang stehe, musste das Hosting vor allem eines sein: einfach – am besten ohne manuelle Pushes. Ich bin dann bei meiner Recherche mit ChatGPT auf den Dienst Vercel gestoßen. Ich war sofort total begeistert. Ich baue eine App mit Lovable, pushe den Code zu GitHub, und Vercel zieht sich den Code aus GitHub und macht die App damit publik. Das ist wirklich sehr einfach und zu meiner Freude, in dem Umfang, auch noch komplett kostenlos. Ich habe dann den DNS Eintrag der Subdomain auf das Vercel Projekt zeigen lassen und et voilà, die App ist veröffentlicht.

Offene Baustelle: Noch kein Staging

Ein kleines Problem besteht noch, in welches ich vor allem jetzt laufen werde, wo tinkerClock öffentlich ist. Ich habe noch kein Staging, in dem ich an Änderungen arbeiten kann, oder diese testen kann, bevor sie auf Live verfügbar sind. Da muss ich noch weiter recherchieren, wie ich das umgesetzt bekomme, werde ich dann hier aber auch als Zusatz ergänzen.

Von der Spielerei zum echten Projekt

Relativ am Anfang, habe ich mit erstaunen festgestellt, dass das wirklich funktioniert. Klar, es ist jetzt keine Banking App, aber wir befinden uns auch noch sehr am Anfang all dieser Tools. Ich für meinen Teil bin eban durch dieses Erfolgsgefühl auch wirklich dabei geblieben. Vieler meiner Experimente und Tüftelein verlaufen sich im Watt, wo es sehr schwer und mühsam wird voranzukommen. Dieses Projekt, lief im Vergleich dazu wie über den frischen Asphalt.

Einsatz & Feedback

Jetzt hoffe ich, dass ich meiner Tochter damit eine Hilfe bauen konnte, schneller die Uhr zu lernen. Ich werde sie auch der Lehrerin zur Verrfügung stellen, damit vielleicht auch andere Kinder davon profitieren können. Ich bin gespannt auf Feedback, welches ich dann wieder sofort mit Lovable einarbeiten werde. Wenn du Kinder hast und tinkerClock mit ihnen ausprobierst, freue ich mich sehr über euer Feedback, besonders, was gut funktioniert und wo es noch hakt.

Was mir das Projekt gezeigt hat

Was KI angeht, muss ich sagen, bin ich Fan. Obwohl ich auch sehe, welche negativen und kritischen Aspekte generative KI mit sich bringt, so muss ich sagen, bin ich fasziniert davon, wie einfach man selbst Lösungen für Probleme schaffen kann. Hier habe ich, ohne große Coding-Skills und ohne tiefes Hosting-Know-how, eine eigene kleine Web-App bauen können. Und selbst, wenn sie nicht genutzt wird, konnte ich mir selbst zeigen, dass ich das bauen kann.