Tl; dr

Dieses Blog ist ein kurzes Tutorial/Anleitungen darüber, wie Sie Supabase und liebenswert verwenden können, um innerhalb von Stunden statt Tage Full-Stack-Apps zu erstellen! Ich habe in nur 8 Stunden eine AI-basierte KI-basierte Kalorien-/Ernährungs-Tracker-App erstellt, und ich werde das "Wie" hier in diesem Blog zeigen.

Die Idee

Ich habe darüber nachgedacht, eine KI -basierte Kalorien -Tracker -App für mich selbst zu erstellen, da ich LLMs wie Claude und Chatgpt viel benutze, um natürliche Sprache für die Verfolgung meiner täglichen Mahlzeiten, Kalorien und deren Makros zu verwenden. Aber als Entwickler wusste ich, dass ich den gesamten Prozess einfacher und besser machen konnte, und Munchwise tut genau das.
Munchwise erstellt personalisierte Ziele für Sie basierend auf Ihren persönlichen Informationen und ermöglicht es Ihnen, Ihre Mahlzeiten mit natürlicher menschlicher Sprache zusammen mit vollständiger täglicher/wöchentlicher Analyse zu verfolgen!

Funktionen & Tech Stack

Merkmale -

• Konto erstellen und personalisierte Ziele für Kalorien/Ernährung erhalten
• Verfolgen Sie die Mahlzeiten und ihre Kalorien/Makros mit natürlicher menschlicher Sprache
• Dedicated Daily/Weekly Analytics
ansehen

Tech Stack -

Supabase - Auth, Datenbank, Edge -Funktionen
Vite & react - Framework, Build Tool
Tailwind CSS - Styling
Liebenswert - Code Generation

Erstellen des Frontends

ps: Bevor du anfängst, solltest du dich zu liebenswert machen und ein neues Konto erstellen!

Für Frontend habe ich liebenswert verwendet, um eine minimale funktionierende Benutzeroberfläche zu erstellen und einen grundlegenden Drahtmodell für die App zu erhalten, auf die ich aufbauen konnte und liebenswert mich überhaupt nicht enttäuscht hat. Das ursprüngliche Design, das ich von liebenswert erhielt, war gut genug, um am Backend zu arbeiten, und dann konnte ich die Benutzeroberfläche verbessern und ändern, wie ich es selbst will. So sah es in der ersten Iteration aus -

Danach war mein Schwerpunkt darauf, die grundlegende Benutzeroberfläche für alle Seiten zu erstellen und einige weitere Aufgaben wie diese zu verwenden -

Nach ein paar weiteren Aufforderungen sah die endgültige Benutzeroberfläche von Liebenswerten so aus -

Wie du sehen kannst, sieht die Benutzeroberfläche schon ziemlich gut aus, ohne dass ich einen Code schreibe! Ich habe die Seitenleiste in den endgültigen Iterationen entfernt und beschlossen, auf allen Seiten mit der Top -Navigation zu gehen.

Supabase integrieren

Die Backend/API-Integration war für mich immer komplex, da ich mein Frontend nicht zu übergießen bin. Daher war es einfach erstaunlich, fast 80% der Backend -Aufgabe selbst zu erledigen. Alles, was Sie tun müssen, ist auf die Schaltfläche supabase
oben rechts von der liebenswerten Seite und dann können Sie Ihr Supabase -Konto mit liebenswerter Verbindung herstellen. Sobald Sie miteinander verbunden sind, müssen Sie erneut die Aufforderung zur Erstellung von Tabellenschema, Auth, RLS -Richtlinien und Kantenfunktionen verwenden, wie dies von Ihnen erforderlich ist.

Aber zuerst müssen Sie ein Supabase -Konto erstellen, wenn Sie noch keinen haben, indem Sie zu https://supabase.com -

gehen
Konto mit Github/E -Mail auf Supabase
2. erstellen Einmal im Dashboard klicken Sie auf
neues Projekt
3. und erstellen Sie dann ein neues Projekt.

Sobald Sie das Projekt erstellt haben, können Sie zu liebenswürdigem Rückgang zurückkehren und dann Ihr Supabase -Konto verbinden und das Projekt auswählen, das Sie erstellt haben, um sich damit zu verbinden.

Wie Sie sehen können, haben liebenswerte die erforderlichen Tabellen zusammen mit ihrem Schema und die erforderlichen Kanten in meinem Supabase -Projekt erstellt und dann, sobald ich die Änderungen genehmigte, führte die Migration aus!

Hinzufügen von AI -Supermächten

Die App basiert auf KI -Fertigstellungen, um die natürliche menschliche Sprache in die kalorischen und ernährungsbedingten Daten der Mahlzeit umzuwandeln. Ich benutzte die API von Todai für diesen Teil und wusste noch einmal genau, was zu tun ist! Ich habe es gerade gebeten, KI für den KI -Teil zusammen zu verwenden, und es fragte mich nach meinem API -Schlüssel und es war fertig!

Sie können Ihren eigenen AI -API -Schlüssel zusammenbringen, indem Sie ein kostenloses Konto erstellen. Sie benötigen jedoch eine Kreditkarten, um weitere Credits hinzuzufügen.

und damit waren alle grundlegenden Funktionen der App von der Authentifizierung bis zum Onboarding von Benutzer bis zur Mahlzeitverfolgung und -analytik ohne einen von mir geschriebenen Code.

Beenden Sie die App ab

Jetzt, da die App fertig war, musste ich nur einige Probleme mit der UI -verwandten Probleme sowie einige Backend -Probleme (hauptsächlich verwandte Zusammenschlüsse von Todai's API) beheben. Ich habe noch ein paar Stunden in der App gearbeitet, um Dinge zu debuggen und zu reparieren, und hier ist, was die App jetzt aussieht -

Ziemlich ordentlich richtig? Und ich scherze nicht, wenn ich sage, dass diese App in nur 8 Stunden hergestellt wurde. Was wir heutzutage mit KI erreichen können, ist unvorstellbar und wenn Sie sie inzwischen nicht verwenden, verpassen Sie wirklich!

Links

github - https://github.com/asrvd/munchwise

Supabase - https://supabase.com

Liebenswert - https://lovable.dev

Vielen Dank für das Lesen!