Back to blocks

Desenvolvendo COMIDINHAS-123

4.0
ptDesenvolvimento de AplicativosReact NativeSupabaseExpo

Prompt

Quero que você gere o aplicativo COMIDINHAS-123 a ser desenvolvido em React Native com Expo e com Supabase. Ele devera ter autenticação por e-mail e se prestará a fazer orçamentos de bolos.

No login, deverá haver a tela de login e de signup para quem não tem conta.
Uma vez logado, o login deverá ser persistente.

Depois de logado, deverá ir para a tela Home. Nessa tela, deverá ter dois tipos de navegação: 

1) Drawer - onde deverá ter opção de Logout bem como o atalho para as telas de cadastro: clientes e produtos.
    Descrição das tabelas no Supabase. Atenção: todas já estão criadas:
	
Tabela de clientes:
clientes:
       id bigint (identity not null),
	  created_at timestamp (with time zone not null default now()),
	  nome text not null,
	  endereco character varying null,
	  fone character varying not null,
	  email character varying null,
	  notas character varying null,
	  constraint clientes_pkey primary key (id)

Tabela de Produtos
produtos:
	  id bigint(identity not null),
	  created_at timestamp (with time zone not null default now()),
	  nome text not null,
	  descricao character varying null,
	  preco_unitario double precision not null,
	  constraint produtos_pkey primary key (id)

Estrutura do menu Drawer na página Home:
      Clientes
      Produtos      
      Logout

Implementar o método CRUD nas telas Clientes e Produtos 
No Logout, fazer o logout no app e voltar para a tela de Login.

Na tela Home, deverá ser implementada a navegação por Expo Tabs.


Resultado Gerado

import React, { useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { supabase } from './supabaseClient';
import HomeScreen from './screens/HomeScreen';
import LoginScreen from './screens/LoginScreen';
import SignupScreen from './screens/SignupScreen';
import ClientesScreen from './screens/ClientesScreen';
import ProdutosScreen from './screens/ProdutosScreen';

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();

const App = () => {
 const [isLoggedIn, setIsLoggedIn] = useState(false);

 useEffect(() => {
 const session = supabase.auth.session();
 setIsLoggedIn(!!session);
 }, []);

 const handleLogout = async () => {
 await supabase.auth.signOut();
 setIsLoggedIn(false);
 };

 return (
 <NavigationContainer>
 {isLoggedIn ? (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeTabNavigator} />
 <Drawer.Screen name="Clientes" component={ClientesScreen} />
 <Drawer.Screen name="Produtos" component={ProdutosScreen} />
 <Drawer.Screen
 name="Logout"
 listeners={{
 focus: handleLogout,
 }}
 component={HomeTabNavigator}
 />
 </Drawer.Navigator>
 ) : (
 <Tab.Navigator>
 <Tab.Screen name="Login" component={LoginScreen} />
 <Tab.Screen name="Signup" component={SignupScreen} />
 </Tab.Navigator>
 )}
 </NavigationContainer>
 );
};

const HomeTabNavigator = () => (
 <Tab.Navigator>
 <Tab.Screen name="Home" component={HomeScreen} />
 </Tab.Navigator>
);

export default App;

Mais Recomendações

Ver Todos

Finanças a Dois: React + Firebase

Desenvolvimento de Aplicativospt
4.0

Gerar um aplicativo react + Firebase (Clean Architecture) chamado “Finanças a Dois”, para o casal acompanhar contas pagas e a pagar, metas de gastos/poupança e gestão de empréstimos, com projeção anual e alertas inteligentes. PILARES DE NEGÓCIO 1. Visão clara do fluxo de caixa mensal (valor pago vs. pendente). 2. Automação de despesas fixas e lembretes. 3. Decisão orientada sobre quitar ou amortizar empréstimos. 4. Experiência colaborativa (dois usuários na mesma “casa”). STACK TÉCNICO - Flutter 3.22 (Material 3, `Riverpod`, `go_router`, `intl`) - Firebase - Auth (e-mail/senha) + deep-link convite de casal - Firestore (coleções descritas abaixo) - Cloud Functions (Node 20) - Cloud Storage (comprovantes) - FCM (push lembretes) - CI/CD: GitHub Actions → Firebase App Distribution MODELOS FIRESTORE - `/households/{hid}` → { name, createdAt, memberIds[] } - `/users/{uid}` → perfil, notificationPrefs, householdId - `/bills/{hid}/{yyyyMM}/{billId}` { title, amount, category, dueDate, recurrence, status, paidAt, paymentMethod{bank,channel}, attachmentUrl } - `/recurringTemplates/{hid}/{templateId}` { title, amount, category, dueDay, paymentMethod, active, createdAt } - `/goals/{hid}/{goalId}` { type:SAVINGS|DEBT, title, targetAmount, currentAmount, deadline } - `/loans/{hid}/{loanId}` { title, principal, interestRateAnnual, termMonths, startDate, paymentDay, paidPrincipal, paidInterest, nextDueDate, remainingInstallments, status } - `/loanPayments/{hid}/{loanId}/{yyyyMM}/{id}` { installmentNumber, amountPrincipal, amountInterest, paidAt, paymentMethod, attachmentUrl } - `/summaries/{hid}/{yyyyMM}` → { totalPaid, totalPending, updatedAt } - `/projections/{hid}/{year}` → { monthTotals{“01”:val, …}, updatedAt } CLOUD FUNCTIONS 1. recurringScheduler (Pub/Sub diário 00:10) - Lê `/recurringTemplates` ativos e gera contas futuras em `/bills`. 2. monthlySummaryCache (Pub/Sub diário 00:30) - Soma bills por status e grava em `/summaries`. 3. loanStatusUpdater (Pub/Sub diário 01:00) - Marca empréstimos como OVERDUE se nextDueDate < hoje. 4. suggestEarlyPayoff (HTTPS Callable) - Recebe loanId, calcula saldo devedor (Price/SAC), compara taxa × CDI líquido e retorna canPayoff, interestSaved.

ReactFirebaseClean Architecture15/06/2025