Tl; dr

Este blog é um pequeno tutorial/como você pode usar o supabase e o adorável para criar aplicativos de pilha completa em poucas horas em vez de dias! Criei um aplicativo de rastreador de calorias/nutrição baseado em pilha completa usando essas ferramentas em apenas 8 horas e mostrarei o "como" aqui neste blog.

A ideia

Estou pensando em construir um aplicativo de rastreador de calorias baseado em IA por muito tempo para mim, pois uso LLMs como Claude e Chatgpt muito para usar a linguagem natural para rastrear minhas refeições diárias, calorias e suas macros. Mas, como desenvolvedor, eu sabia que poderia tornar todo o processo mais fácil e melhor e Munchwise faz exatamente isso.
Munchwise cria metas personalizadas para você com base em suas informações pessoais e, em seguida, permite rastrear suas refeições usando a linguagem humana natural, juntamente com análises diárias/semanais completas!

Recursos e pilha de tecnologia

Características -

• Crie conta e obtenha metas personalizadas para caloria/nutrição
• rastrear refeições e suas calorias/macros usando a linguagem humana natural
• Visualizar análises diárias/semanais dedicadas

pilha de tecnologia -

• Supabase - auth, banco de dados, funções de borda
• Vite & React - Framework, Build Tool
• Tailwind CSS - Styling
• Adorável - geração de código

Criando o front -end

ps: Antes de começar, você deve ir para o adorável e criar uma nova conta!

Para o front -end, usei o adorável para criar uma interface do usuário de trabalho mínima e obter uma estrutura de arame básica para o aplicativo que eu poderia construir e adorável, não me decepcionou. O design inicial que obtive da Lovesable foi bom o suficiente para começar a trabalhar no back -end e então eu poderia melhorar e mudar a interface do usuário, como eu me quero. Aqui está o que parecia na primeira iteração -

Depois disso, meu foco principal era construir a interface do usuário básica para todas as páginas e usar mais algumas solicitações como este -

Após mais alguns avisos, a interface do usuário final feita por adorável parecia assim -

Como você pode ver, a interface do usuário já parece muito boa sem que eu escrevesse nenhum código! Eu removi a barra lateral nas iterações finais e decidi ir com o Top Navbar em todas as páginas.

Integração de supabase

A integração back-end/API sempre foi complexa para eu ser um engenheiro de pilha completa, já que não engenharia meu front-end. Então, o adorável poder fazer quase 80% da tarefa de back -end por si só foi simplesmente incrível.
Tudo o que você precisa fazer é clicar no botão supabase no canto superior direito da página adorável e, em seguida, você pode conectar sua conta Supabase ao adorável. Uma vez conectado, você precisa usar o Promping novamente para criar o esquema da tabela, as políticas de autenticação, o RLS e as funções de borda, conforme exigido por você.
Mas primeiro você precisará criar uma conta Supabase se ainda não tiver uma, indo para https://supabase.com -

1. Crie uma conta usando github/email em supabase
2. Uma vez no painel Clique em novo projeto e, em seguida, crie um novo projeto.
3. Depois de criar o projeto, você pode voltar ao adorável e conectar sua conta Supabase e escolher o projeto que você criou para se conectar.

Como você pode ver, o adorável criou as tabelas necessárias junto com o esquema deles, e as funções de borda necessárias no meu projeto Supabase e depois aprovei as alterações, ele executou a migração!

Adicionando superpotências de IA

O aplicativo conta com as conclusões da IA ​​para converter a linguagem humana natural em dados caloríficos e nutricionais da refeição. Eu usei a API de Togetheri para esta parte e adorável mais uma vez sabia exatamente o que fazer! Acabei de pedir para usar a IA juntos para a parte da IA ​​e me pediu para minha chave da API e foi feito!

você pode reunir o seu próprio API API Chave criando uma conta gratuita, você precisará de um cartões de crédito para adicionar mais créditos.

e com isso, todas as funcionalidades básicas do aplicativo estavam prontas de autenticação para integração de rastreamento e análise de usuário para refeições sem qualquer código escrito por mim, ainda.

Terminando o aplicativo

Agora que o aplicativo estava pronto, a única coisa que eu precisava fazer era corrigir alguns problemas relacionados à interface do usuário aqui e ali e alguns problemas de back -end também (principalmente relacionados juntos da API da API). Eu trabalhei no aplicativo por mais algumas horas depurando e consertando as coisas e aqui está como é o aplicativo agora -

muito legal, certo? E não estou brincando quando digo que este aplicativo foi feito em apenas 8 horas, o que podemos alcançar usando a IA hoje em dia é inimaginável e se você não estiver usando agora, está realmente perdendo!

Links

github - https://github.com/asrvd/munchwise .. Supabase - https://supabase.com
Adorável - https://lovable.dev