diff --git a/README.md b/README.md index 071b638..fc00c8b 100644 --- a/README.md +++ b/README.md @@ -1,89 +1,50 @@ -# 💸 App de Organização de Finanças Pessoais com Vibe Coding +# Sistema X — Demo (React + Node + PostgreSQL + Playwright) -Aprenda a **criar soluções com IA** de forma criativa, guiando ferramentas como o **Copilot** e o **Lovable** com uma comunicação simples e natural. O foco é desenvolver o conceito de um **App de Organização de Finanças Pessoais**, mas, acima de tudo, aprender o **jeito Vibe de programar com IA**. -## ✨ O que é Vibe Coding +## Visão geral +Projeto mínimo para demonstração de CRUD com testes E2E usando Playwright. -**Vibe Coding** é uma forma leve e criativa de desenvolver com IA, baseada em **conversas naturais e bem estruturadas**. Você não precisa escrever código linha por linha. Em vez disso, aprende a **guiar a IA** descrevendo suas ideias de forma clara, com **intenção e contexto**. Em outras palavras: -> Você mostra a vibe da sua ideia e a IA transforma em solução (ou em um caminho para ela). +## Pré-requisitos +- Node 18+ instalado +- Docker Desktop (recomendado) +- VS Code (recomendado) -## 🎯 Desafio -Problema: Muitas pessoas não conseguem manter um controle financeiro porque os aplicativos exigem muita entrada de dados manual, e a criação de orçamentos é vista como algo tedioso. +## Como usar (com Docker) - passos rápidos +1. `docker-compose up --build` +2. Em outro terminal: +- `docker-compose exec backend npm run prisma:generate` +- `docker-compose exec backend npm run prisma:migrate` +- `docker-compose exec backend npm run seed` +3. Acesse frontend: `http://localhost:3000` +4. Backend health: `http://localhost:4000/health` +5. Rodar testes (localmente): `npx playwright test` -Precisamos de uma solução que permita **controlar as finanças por meio de uma conversa simples**, com **agentes de IA** capazes de criar **planos de economia personalizados e automatizados**. Você deve utilizar as ideias de **Vibe Coding** e **MVP (Produto Mínimo Viável)** para desenvolver o **conceito de um aplicativo** que resolva o problema citado. -> [!IMPORTANT] -> Você **não precisa construir o código**! O foco está em **usar a IA como sua parceira criativa**, transformando boas ideias e prompts em conceitos funcionais que simulam um produto real. +## Como usar (sem Docker) - passos resumidos +1. Configure Postgres local e atualize `backend/.env` com `DATABASE_URL`. +2. No `backend/`: `npm install`, `npx prisma generate`, `npx prisma migrate dev --name init`, `npm run seed`, `npm run dev`. +3. No `frontend/`: `npm install`, `npm run dev`. -## 🪄 Etapas do Desafio -### 1. Saber o que Pedir é a Chave! Otimize seus Prompts! +## Estrutura +- `backend/` - API Express + Prisma +- `frontend/` - Vite + React +- `tests/` - Playwright E2E -Antes de pedir para a IA "criar um app", é importante definir com clareza o que você quer construir e por quê. Para isso, você vai criar um **PRD (Product Requirements Document)** simplificado, uma especificação que serve como _briefing_ para a IA entender sua ideia. -Um bom PRD deve descrever o problema, quem será beneficiado, as principais funcionalidades e o que você espera que a IA entregue. Use o modelo abaixo como ponto de partida e adapte conforme o seu estilo: +## Comandos úteis +- `docker-compose up --build` +- `docker-compose down` +- `docker-compose exec backend sh` +- `npx playwright test` +- +- [frontend.zip](https://github.com/user-attachments/files/23780717/frontend.zip) -```txt -# Contexto -Quero criar um aplicativo de Organização de Finanças Pessoais que funcione por meio de conversas com o usuário. -A ideia é facilitar o controle financeiro de forma simples e natural, sem formulários manuais ou planilhas complexas. -# Problema -Muitas pessoas desistem de controlar seus gastos porque os apps atuais exigem muita entrada manual e pouca personalização. -Quero resolver isso com uma experiência de conversa e recomendações automáticas de economia. -# Público-Alvo -Pessoas que querem começar a organizar suas finanças de forma prática e sem complicação, principalmente iniciantes. +## Observações de segurança +As senhas/seed estão em texto apenas para demo. Em produção usar bcrypt e variáveis de ambiente seguras. -# Funcionalidades-Chave -1. Registrar gastos via chat em linguagem natural. -2. Classificar automaticamente as transações. -3. Definir e acompanhar metas financeiras. -4. Receber dicas de economia do “Agente Financeiro”. -5. Visualizar relatórios simples e personalizados. -# Entregável da IA -Gerar um plano de MVP com as principais telas, recursos necessários e um esboço de validação inicial. -Usar tom educativo e linguagem acessível, em português. -``` - -Depois de preencher o modelo, use o Copilot Web para revisar e melhorar o seu prompt antes de ir ao Lovable. A ideia é lapidar o texto até que ele fique claro, direto e reflita exatamente a sua intenção. - -> [!TIP] -> Pense no PRD/Prompt como “o briefing que a IA precisa para entender sua vibe”. Portanto, quanto mais claro e intencional for o texto, mais próximas do ideal serão as respostas da IA. - -### 2. Explorando o Lovable na Prática - -Com seu PRD pronto e revisado, é hora de colocar a IA em ação. Abra o Lovable, cole seu prompt completo e peça o plano inicial do MVP do seu aplicativo. Como o plano gratuito limita você a 5 interações por dia, seja estratégico: -- Faça perguntas diretas e construtivas, como “crie o fluxo de telas com base nas funcionalidades listadas” ou “gere uma versão resumida do plano de MVP”; -- Priorize clareza nas instruções para aproveitar ao máximo cada resposta; - -Durante essa etapa, você pode orientar a IA para três entregas principais: -1. Agente Financeiro: defina o comportamento e o tom de voz de um consultor financeiro pessoal, alinhado ao público e objetivo do app. -2. Fluxo de Telas: peça à IA para gerar o fluxo conceitual de telas com base nas funcionalidades descritas no PRD, simulando a interação por conversa. -3. Plano de MVP: solicite um resumo das 5 funcionalidades principais, dos recursos necessários e um plano de validação inicial (como medir se o app cumpre seu propósito). - -> [!TIP] -> Se preferir, você pode fazer tudo com o **Copilot**. O importante é exercitar a habilidade de transformar intenções em instruções claras e testar os limites da IA como parceira criativa. - -### 3. Entregando o Desafio na DIO - -Finalize seu projeto criando um **repositório no GitHub** (pode ser um **fork** deste). -No README do seu repositório, inclua: - -- Seu **prompt final** (PRD); -- Prints ou pequenos vídeos das interações com a IA; -- Um resumo do que o seu **App de Finanças Pessoais** faz; -- Uma breve **reflexão sobre o processo**: - - O que funcionou bem? - - O que não funcionou como o esperado? - - O que aprendeu sobre conversar com IAs? - -> [!TIP] -> Publique seu repositório e compartilhe o link na plataforma da DIO! Sua entrega é a prova de que você domina o raciocínio de Vibe Coding, mesmo sem escrever uma única linha de código. - -## 💬 Conclusão - -Vibe Coding é sobre clareza, curiosidade e criatividade, não sobre perfeição técnica. O verdadeiro objetivo aqui é aprender a pensar junto com a IA, transformando ideias em conceitos reais e enxergando a tecnologia como uma extensão do seu raciocínio criativo. Cada interação é um experimento, quanto mais clara for sua intenção, mais surpreendente será o resultado.