Tl; dr

Ce blog est un court didacticiel / comment vous pouvez utiliser Supabase & Lovable pour créer des applications complètes en quelques heures au lieu des jours! J'ai créé une application Calorie / Nutrition Tracker basée sur l'IA complète en utilisant ces outils en seulement 8 heures et je montrerai le "comment" ici dans ce blog.

L'idée

Je pense à construire une application Calorie Tracker basée sur l'IA depuis longtemps pour moi depuis que j'utilise beaucoup LLMS comme Claude et Chatgpt pour utiliser le langage naturel pour suivre mes repas quotidiens, mes calories et leurs macros. Mais en tant que développeur, je savais que je pouvais rendre l'ensemble du processus plus facile et meilleur et le fait de faire exactement cela.
Munchwise crée des objectifs personnalisés pour vous en fonction de vos informations personnelles, puis vous permet de suivre vos repas en utilisant le langage humain naturel ainsi que des analyses quotidiennes complètes / hebdomadaires!

Fonctionnalités et pile technologique

Caractéristiques -

• Créer un compte et obtenir des objectifs personnalisés pour les calories / nutrition
• Suivre les repas et leurs calories / macros en utilisant le langage humain naturel
• Voir les analyses quotidiennes dédiées

Tech Stack -

• Supabase - Auth, base de données, fonctions Edge
• Vite & React - Framework, Build Tool
• Tailwind CSS - Styling
• Lovable - Génération de code

Créer le frontend

ps: Avant de commencer, vous devez vous diriger vers Lovable et créer un nouveau compte!

Pour Frontend, j'ai utilisé Lovable pour créer une interface utilisateur de travail minimale et obtenir un wireframe de base pour l'application sur laquelle je pouvais construire et que Lovable ne m'a pas déçu du tout. Le design initial que j'ai obtenu de Lovable a été assez bon pour commencer à travailler sur le backend, puis je pourrais améliorer et changer l'interface utilisateur comme je veux moi-même. Voici à quoi il ressemblait dans la première itération -

Après cela, mon objectif principal était de construire l'interface utilisateur de base pour toutes les pages, et d'utiliser d'autres invites comme celle-ci -

Après quelques invites supplémentaires, l'interface utilisateur finale faite par Lovable ressemblait à ceci -

Comme vous pouvez le voir, l'interface utilisateur a déjà l'air plutôt jolie sans que j'écrive de code! J'ai supprimé la barre latérale dans les itérations finales et j'ai décidé d'aller avec la barre de navigation supérieure sur toutes les pages.

Intégration de Supabase

L'intégration backend / API a toujours été complexe pour moi étant un ingénieur complet car je ne surginait pas mon frontend. Donc, l'adorable pouvoir faire près de 80% de la tâche backend en soi était tout simplement incroyable.
Tout ce que vous avez à faire est de cliquer sur le bouton supabase dans le coin supérieur droit de la page adorable, puis vous pouvez connecter votre compte Supabase à Lovable. Une fois connecté, vous devez utiliser à nouveau l'incitation pour créer le schéma de table, les politiques AUTH, RLS et les fonctions Edge si exigées par vous.
Mais vous devrez d'abord créer un compte Supabase si vous n'en avez pas déjà un en vous dirigeant vers https://supabase.com -

1. Créer un compte à l'aide de GitHub / Email sur Supabase
2. Une fois sur le tableau de bord, cliquez sur nouveau projet puis créez un nouveau projet.
3. Une fois que vous avez créé le projet, vous pouvez revenir à Lovable, puis connecter votre compte Supabase et choisir le projet que vous avez créé pour vous connecter.

Comme vous pouvez le voir, Lovable a créé les tables requises avec leur schéma, et les fonctions de bord requises dans mon projet Supabase, puis une fois que j'ai approuvé les modifications, il a exécuté la migration!

Ajout de superpuissances AI

L'application s'appuie sur les compléments de l'IA pour convertir le langage humain naturel aux données calorifiques et nutritionnelles du repas. J'ai utilisé l'API de Togetherai pour cette partie et je savais à nouveau exactement quoi faire! Je viens de lui demander d'utiliser ensemble AI pour la partie AI et il m'a demandé ma clé API et cela a été fait!

Vous pouvez réunir la clé API AI en créant un compte gratuit, vous aurez cependant besoin d'une carte de crédit pour ajouter plus de crédits.

Et avec cela, toutes les fonctionnalités de base de l'application étaient pratiquées de l'authentification à l'intégration du suivi et de l'analyse de l'utilisateur à des repas sans aucun code écrit par moi.

Finir l'application

Maintenant que l'application était prête, la seule chose que je devais faire était de résoudre certains problèmes liés à l'interface utilisateur ici et là et des problèmes de backend (principalement liés API ensemble). J'ai travaillé sur l'application pendant quelques heures de plus de débogage et de réparation de choses et voici à quoi ressemble l'application maintenant -

assez soigné non? Et je ne plaisante pas quand je dis que cette application a été faite en seulement 8 heures, ce que nous pouvons réaliser en utilisant l'IA ces jours-ci est inimaginable et si vous ne l'utilisez pas maintenant, vous manquez vraiment!

Links

gitHub - https://github.com/asrvd/munchwise Supabase - https://supabase.com
Lovable - https://lovable.dev