Tl; Dr

¡Este blog es un breve tutorial/cómo hacer sobre cómo puede usar Supabase & Levable para crear aplicaciones de pila completa en cuestión de horas en lugar de días! Creé una aplicación de rastreador de calorías/nutrición basada en AI completa usando estas herramientas en solo 8 horas y mostraré el "cómo" aquí en este blog.

La idea

He estado pensando en construir una aplicación de rastreador de calorías basada en AI por mucho tiempo, ya que uso LLM como Claude y Chatgpt mucho para usar un lenguaje natural para rastrear mis comidas diarias, calorías y sus macros. Pero como desarrollador sabía que podría hacer que todo el proceso sea más fácil y mejor y Munchwise hace exactamente eso.
¡Munchwise crea objetivos personalizados para usted en función de su información personal y luego le permite rastrear sus comidas utilizando un lenguaje humano natural junto con análisis completos diarios/semanales!

Características y pila tecnológica

Características -

• Crear cuenta y obtener objetivos personalizados para calorías/nutrición
• rastrea las comidas y sus calorías/macros usando lenguaje humano natural
• Ver analítico diario/semanal dedicado

Tech Stack -

• Supabase - Auth, Base de datos, Funciones de borde
• Vite & React - Framework, Build Tool
• Tailwind CSS - Styling
• Adorable - generación de código

Creando el frontend

PS: Antes de comenzar, debe dirigirse a Levable y crear una nueva cuenta!

Para Frontend, usé adorable para crear una interfaz de usuario mínima que funcione y obtener una estructura de alambre básica para la aplicación en la que podría construir y adorable no me decepcionó en absoluto. El diseño inicial que obtuve de adorable fue lo suficientemente bueno como para comenzar a trabajar en el backend y luego pude mejorar y cambiar la interfaz de usuario, sin embargo, me quiero. Así es como se veía en la primera iteración -

Después de esto, mi enfoque principal era construir la interfaz de usuario básica para todas las páginas, y usar algunas indicaciones más como esta -

Después de algunas indicaciones más, la interfaz de usuario final realizada por lovable se veía así -

Como puede ver, ¡la interfaz de usuario ya se ve bastante bien sin que yo escriba ningún código! Quité la barra lateral en las iteraciones finales y decidí ir con Top Navbar en todas las páginas.

Integrando Supabase

La integración de backend/API siempre ha sido compleja para ser un ingeniero de pila completa, ya que no engendro mi frontend. Por lo tanto, adorable poder hacer casi el 80% de la tarea de backend por sí misma fue simplemente increíble.
Todo lo que tiene que hacer es hacer clic en el botón Supabase en la esquina superior derecha de la página adorable y luego puede conectar su cuenta de Supabase a adorable. Una vez conectado, debe usar la solicitud nuevamente para crear el esquema de la tabla, la autenticación, las políticas RLS y las funciones de borde según lo requiera.
Pero primero deberá crear una cuenta de Supabase si aún no tiene una dirigiéndose a https://supabase.com -

1. Crear cuenta usando GitHub/correo electrónico en Supabase
2. Una vez en el tablero, haga clic en nuevo proyecto y luego cree un nuevo proyecto.
3. Una vez que haya creado el proyecto, puede volver a adorable y luego conectar su cuenta de Supabase y elegir el proyecto que creó para conectarse con él.

Como puede ver, adorable creó las tablas requeridas junto con su esquema, y ​​las funciones de borde requeridas en mi proyecto Supabase y luego, una vez que aprobé los cambios, ejecutó la migración!

Agregar superpoderes de IA

La aplicación se basa en las terminaciones de IA para convertir el lenguaje humano natural en los datos nutricionales y calóricos y nutricionales de la comida. ¡Usé la API de AgaNai para esta parte y adorable una vez más, sabía exactamente qué hacer! ¡Solo le pedí que usara AI juntos para la parte AI y me pidió mi clave API y estaba hecho!

Puede obtener la clave AI API de AI creando una cuenta gratuita, necesitará una tarjetas de crédito para agregar más créditos.

y con esto, todas las funcionalidades básicas de la aplicación estaban listas desde la autenticación hasta la incorporación del usuario al seguimiento de comidas y el análisis sin ningún código escrito por mí.

Terminando la aplicación

Ahora que la aplicación estaba lista, lo único que tenía que hacer era solucionar algunos problemas relacionados con la interfaz de usuario aquí y allá y algunos problemas de backend también (en su mayoría relacionados con la API de Tesai). Trabajé en la aplicación durante unas horas más de depuración y arreglando cosas y así es como se ve la aplicación ahora -

bastante bien, ¿verdad? Y no estoy bromeando cuando digo que esta aplicación se realizó en solo 8 horas, lo que podemos lograr usando AI en estos días es inimaginable y si no la estás usando ahora, ¡realmente te estás perdiendo!

Campo de golf

github - https://github.com/asrvd/munchwise&&&&] Supabase - https://supabase.com
Adorable - https://lovable.dev