todolist-fullstack/docs/instrucoes-gerais.md

📱 TASK MANAGER - Plano de Desenvolvimento

🎯 Objetivo

Criar uma aplicação multi-plataforma sincronizada em tempo real de gerenciamento de tarefas para estudar desenvolvimento fullstack moderno com TypeScript.

---

🛠️ Stack Tecnológica

Backend

• NestJS - Framework Node.js com TypeScript
• Supabase (https://supabase.stackbackup.cloud) - PostgreSQL + Auth + Realtime
• PostgreSQL - Banco de dados relacional
• Docker - Containerização

Frontend Web

• Next.js 14 - Framework React com App Router
• TailwindCSS - Framework CSS utility-first
• TypeScript - Linguagem principal
• Supabase Client - Cliente JavaScript

Mobile

• Flutter - Framework multi-plataforma (Android/iOS)
• Dart - Linguagem do Flutter
• Provider - State management
• Supabase Flutter - Cliente Dart

Ferramentas

• Git/GitHub - Controle de versão
• VS Code - IDE

---

📋 Funcionalidades (MVP)

Autenticação

• Cadastro de usuário (email + senha)
• Login
• Logout
• Recuperação de senha
• Sessão persistente

Gerenciamento de Tarefas (CRUD)

• Criar tarefa (título + descrição opcional)
• Listar tarefas do usuário
• Marcar como concluída/pendente
• Editar tarefa
• Deletar tarefa
• Filtrar (Todas/Ativas/Concluídas)

Sincronização em Tempo Real

• Supabase Realtime (WebSockets)
• Sincronização instantânea entre web e mobile
• Atualização automática em múltiplos dispositivos

---

🗄️ Banco de Dados

Tabela: tasks

id (UUID) - Chave primária
user_id (UUID) - Referência ao usuário (RLS habilitado)
title (TEXT) - Título da tarefa
description (TEXT) - Descrição opcional
completed (BOOLEAN) - Status da tarefa
created_at (TIMESTAMP) - Data de criação
updated_at (TIMESTAMP) - Data de atualização

Segurança

• Row Level Security (RLS) habilitado
• Usuário só acessa suas próprias tarefas

---

📦 Estrutura do Projeto

task-manager/
├── backend/
│   ├── src/
│   │   ├── auth/
│   │   ├── tasks/
│   │   ├── common/
│   │   └── main.ts
│   ├── .env
│   ├── Dockerfile
│   └── package.json
├── frontend-web/
│   ├── src/
│   │   ├── app/
│   │   ├── components/
│   │   ├── lib/
│   │   └── styles/
│   ├── .env.local
│   └── next.config.js
├── mobile/
│   ├── lib/
│   │   ├── models/
│   │   ├── services/
│   │   ├── screens/
│   │   ├── widgets/
│   │   └── main.dart
│   └── pubspec.yaml
├── docker-compose.yml
└── README.md

---

🚀 Roadmap de Desenvolvimento

Fase 1: Backend (NestJS + Supabase)

• Configurar projeto NestJS com TypeScript
• Integrar Supabase SDK
• Criar módulo de Autenticação
• Criar módulo de Tarefas
• Implementar RLS no banco
• Documentar API
• Dockerfile para backend

Fase 2: Frontend Web (Next.js)

• Criar projeto Next.js 14
• Configurar Supabase Client
• Implementar layout e componentes
• Integrar autenticação
• Criar páginas de tarefas
• Implementar Realtime
• Responsividade com Tailwind
• Dockerfile para frontend

Fase 3: Mobile (Flutter)

• Criar projeto Flutter
• Integrar Supabase Flutter SDK
• Implementar autenticação
• Criar telas de tarefas
• State management com Provider
• Sincronização em tempo real
• Build para Android e iOS

Fase 4: DevOps e Deploy

• Docker Compose para local
• CI/CD pipeline
• Deploy backend (Railway/Render)
• Deploy frontend (Vercel)
• Deploy mobile (App Store/Play Store)

---

📚 Conhecimentos a Adquirir

TypeScript

• Tipos básicos e avançados
• Interfaces e tipos genéricos
• Decoradores (usado no NestJS)

NestJS

• Módulos e Providers
• Controllers e Services
• Middleware e Guards
• Integração com banco de dados

Supabase

• Row Level Security (RLS)
• Autenticação com JWT
• Realtime Subscriptions
• Migrations SQL

Next.js 14

• App Router vs Pages Router
• Server Components e Client Components
• API Routes
• Deployment na Vercel

Flutter

• Widgets e layouts
• State management (Provider)
• HTTP client
• Navegação

---

⚙️ Variáveis de Ambiente

Backend (.env)

SUPABASE_URL=https://supabase.stackbackup.cloud
SUPABASE_KEY=[SUPABASE_ANON_KEY]
JWT_SECRET=[SEU_JWT_SECRET]
DATABASE_URL=[CONNECTION_STRING]

Frontend Web (.env.local)

NEXT_PUBLIC_SUPABASE_URL=https://supabase.stackbackup.cloud
NEXT_PUBLIC_SUPABASE_ANON_KEY=[SUPABASE_ANON_KEY]

Mobile (flutter_dotenv)

SUPABASE_URL=https://supabase.stackbackup.cloud
SUPABASE_ANON_KEY=[SUPABASE_ANON_KEY]

---

🔗 Referências Úteis

• Supabase: https://supabase.stackbackup.cloud
• NestJS Docs: https://docs.nestjs.com
• Next.js Docs: https://nextjs.org/docs
• Flutter Docs: https://flutter.dev/docs
• Supabase Flutter: https://supabase.com/docs/reference/flutter/introduction

---

✅ Checklist de Início

• Criar repositório GitHub
• Clonar e configurar localmente
• Testar acesso ao Supabase
• Instalar dependências
• Executar docker-compose
• Rodar servidor local
• Validar fluxo de autenticação

---

📌 Próximos Passos

1. Hoje: Revisar este plano
2. Amanhã: Começar pelo Backend (NestJS)
3. Depois: Frontend Web (Next.js)
4. Então: Mobile (Flutter)

Tudo em TypeScript, tudo integrado, tudo em tempo real! 🔥