240 lines
7.7 KiB
Markdown
240 lines
7.7 KiB
Markdown
# 🚀 Frontend Interface Pronto para Testes
|
|
|
|
## ✅ O que foi criado
|
|
|
|
Acabei de implementar a interface completa do frontend Next.js com as seguintes páginas:
|
|
|
|
### Páginas de Autenticação (`app/(auth)/`)
|
|
- **Login** (`login/page.tsx`) - Formulário de login com validação
|
|
- **Signup** (`signup/page.tsx`) - Criação de conta com confirmação de senha
|
|
- **Layout** (`layout.tsx`) - Redireciona usuários autenticados para o dashboard
|
|
|
|
### Dashboard (`app/(dashboard)/`)
|
|
- **Tasks Page** (`tasks/page.tsx`) - Listagem e gerenciamento de tarefas com:
|
|
- ✅ Criar nova tarefa
|
|
- 🔄 Marcar como concluído/pendente
|
|
- 🗑️ Deletar tarefa
|
|
- 🔍 Filtrar por status (todas, pendentes, concluídas)
|
|
- 📊 Filtrar por prioridade (baixa, média, alta)
|
|
- 📂 Filtrar por categoria (trabalho, pessoal, saúde, compras)
|
|
- 📅 Exibir data de vencimento
|
|
|
|
- **Layout** (`layout.tsx`) - Proteção de rota (redireciona para login se não autenticado)
|
|
|
|
### Página Raiz
|
|
- **Home** (`page.tsx`) - Redireciona automaticamente baseado na autenticação
|
|
|
|
## 🛠️ Arquitetura
|
|
|
|
### Fluxo de Autenticação
|
|
```
|
|
Usuário não autenticado
|
|
↓ (acessa /)
|
|
Home (page.tsx) → Redireciona para /auth/login
|
|
↓
|
|
Login Page
|
|
├─ Entrada: email + senha
|
|
├─ Integração com: useAuth() store (Zustand)
|
|
├─ API: POST /auth/login
|
|
└─ Sucesso: Redireciona para /dashboard/tasks
|
|
↓
|
|
Dashboard Layout
|
|
├─ Verifica autenticação (useAuth hook)
|
|
└─ Renderiza Tasks Page se autenticado
|
|
```
|
|
|
|
### Fluxo de Tarefas
|
|
```
|
|
Dashboard Tasks Page
|
|
├─ Carrega tarefas: useTasks().fetchTasks()
|
|
├─ Cria: useTasks().createTask()
|
|
├─ Atualiza: useTasks().updateTask()
|
|
├─ Deleta: useTasks().deleteTask()
|
|
└─ Filtra: useTasks().setFilters()
|
|
```
|
|
|
|
## 🎯 Como Testar
|
|
|
|
### 1. Preparação do Ambiente
|
|
|
|
**Backend:**
|
|
```bash
|
|
cd backend-api
|
|
npm run start:dev
|
|
# Deve estar rodando em http://localhost:3000
|
|
```
|
|
|
|
**Frontend:**
|
|
```bash
|
|
cd frontend-next
|
|
npm install
|
|
npm run dev
|
|
# Deve estar rodando em http://localhost:3000 (ou 3001 se porta ocupada)
|
|
```
|
|
|
|
### 2. Variáveis de Ambiente
|
|
|
|
Certifique-se de ter `.env.local` configurado no `frontend-next/`:
|
|
|
|
```env
|
|
NEXT_PUBLIC_API_URL=http://localhost:3000/api
|
|
NEXT_PUBLIC_SUPABASE_URL=https://supabase.stackbackup.cloud
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=seu_anon_key_aqui
|
|
```
|
|
|
|
### 3. Teste Completo do Fluxo
|
|
|
|
#### ✅ Teste 1: Criar Conta
|
|
1. Acesse http://localhost:3001 (ou a porta do frontend)
|
|
2. Você será redirecionado para `/auth/login`
|
|
3. Clique em "Criar conta"
|
|
4. Preencha:
|
|
- Email: `seu_email@test.com`
|
|
- Senha: `SenhaForte123!`
|
|
- Confirmar: `SenhaForte123!`
|
|
5. Clique em "Criar Conta"
|
|
6. Você deve ser redirecionado automaticamente para o dashboard
|
|
|
|
#### ✅ Teste 2: Login
|
|
1. Acesse http://localhost:3001/auth/login
|
|
2. Faça login com as credenciais da conta criada
|
|
3. Você deve ser redirecionado para `/dashboard/tasks`
|
|
|
|
#### ✅ Teste 3: Criar Tarefa
|
|
1. No dashboard, clique no botão "Nova Tarefa" (com ícone +)
|
|
2. Preencha:
|
|
- **Título**: "Aprender React Hooks"
|
|
- **Descrição**: "Estudar useEffect, useState, etc"
|
|
- **Data de Vencimento**: Escolha uma data (opcional)
|
|
3. Clique em "Criar Tarefa"
|
|
4. A tarefa deve aparecer na lista
|
|
|
|
#### ✅ Teste 4: Marcar como Concluído
|
|
1. Clique no checkbox à esquerda de qualquer tarefa
|
|
2. A tarefa deve aparecer com texto riscado
|
|
3. Clique novamente para desmarcar
|
|
|
|
#### ✅ Teste 5: Filtrar Tarefas
|
|
1. Use os selects no topo para filtrar:
|
|
- **Filtro de Status**: Pendentes, Concluídas, Todas
|
|
- **Filtro de Prioridade**: Alta, Média, Baixa
|
|
- **Filtro de Categoria**: Trabalho, Pessoal, Saúde, Compras
|
|
2. A lista deve atualizar em tempo real
|
|
|
|
#### ✅ Teste 6: Deletar Tarefa
|
|
1. Clique no botão com ícone 🗑️ (lixeira) em qualquer tarefa
|
|
2. Confirme a exclusão no modal
|
|
3. A tarefa deve desaparecer da lista
|
|
|
|
#### ✅ Teste 7: Logout
|
|
1. Clique em "Sair" no canto superior direito
|
|
2. Você deve ser redirecionado para `/auth/login`
|
|
3. Tentar acessar `/dashboard/tasks` deve redirecionar novamente para login
|
|
|
|
## 📁 Estrutura de Arquivos Criada
|
|
|
|
```
|
|
frontend-next/
|
|
├── app/
|
|
│ ├── page.tsx # Home com redirecionamento
|
|
│ ├── globals.css # Estilos globais
|
|
│ ├── layout.tsx # Layout raiz
|
|
│ ├── (auth)/
|
|
│ │ ├── layout.tsx # Layout da área de auth
|
|
│ │ ├── login/
|
|
│ │ │ └── page.tsx # Página de login
|
|
│ │ └── signup/
|
|
│ │ └── page.tsx # Página de signup
|
|
│ └── (dashboard)/
|
|
│ ├── layout.tsx # Layout protegido
|
|
│ └── tasks/
|
|
│ └── page.tsx # Dashboard com listagem
|
|
├── components/
|
|
│ ├── Button.tsx # Componente Button
|
|
│ ├── Input.tsx # Componente Input
|
|
│ ├── Card.tsx # Componente Card
|
|
│ ├── Checkbox.tsx # Componente Checkbox
|
|
│ └── index.ts # Exports
|
|
├── lib/
|
|
│ ├── types.ts # Tipos TypeScript
|
|
│ ├── api.ts # Cliente Axios
|
|
│ └── stores/
|
|
│ ├── auth.store.ts # Store de autenticação
|
|
│ ├── tasks.store.ts # Store de tarefas
|
|
│ └── index.ts # Exports
|
|
├── .env.example # Template de env vars
|
|
├── package.json # Dependências
|
|
└── tsconfig.json # Config TypeScript
|
|
```
|
|
|
|
## 🐛 Possíveis Erros e Soluções
|
|
|
|
### Erro: "Cannot find module '@/components'"
|
|
**Solução**: Certifique-se de que o `tsconfig.json` tem o path alias `@/*`:
|
|
```json
|
|
{
|
|
"compilerOptions": {
|
|
"baseUrl": ".",
|
|
"paths": {
|
|
"@/*": ["./*"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Erro: "api.ts - Cannot GET /auth/login"
|
|
**Solução**: Verifique se o backend está rodando e se `NEXT_PUBLIC_API_URL` está correto:
|
|
```env
|
|
NEXT_PUBLIC_API_URL=http://localhost:3000/api
|
|
```
|
|
|
|
### Erro: "ReferenceError: localStorage is not defined"
|
|
**Solução**: Isso é esperado durante build (SSR). O Zustand com `persist` é client-only, então use:
|
|
```tsx
|
|
'use client'; // No topo do arquivo
|
|
```
|
|
|
|
### Tasks não carregam após login
|
|
**Solução**: Certifique-se que:
|
|
1. Você executou o SQL script (`SQL_TASKS_TABLE_RLS.sql`) no Supabase
|
|
2. As credenciais de Supabase estão corretas em `.env.local`
|
|
3. O backend tem acesso ao Supabase
|
|
|
|
## 📊 Checklist de Validação
|
|
|
|
- [ ] Backend rodando em http://localhost:3000
|
|
- [ ] Frontend rodando em http://localhost:3001 (ou porta livre)
|
|
- [ ] Variáveis de ambiente configuradas
|
|
- [ ] Consegui criar conta
|
|
- [ ] Consegui fazer login
|
|
- [ ] Consegui criar tarefa
|
|
- [ ] Consegui marcar tarefa como concluída
|
|
- [ ] Consegui filtrar tarefas
|
|
- [ ] Consegui deletar tarefa
|
|
- [ ] Consegui fazer logout
|
|
- [ ] Redireciona para login quando não autenticado
|
|
|
|
## 🎨 Design System Aplicado
|
|
|
|
- **Cores**: Azure blue (#2563EB) para primário, cinza para secundário
|
|
- **Tipografia**: Inter para body, Poppins para headings
|
|
- **Espaçamento**: Sistema de 8px (xs, sm, md, lg, xl, 2xl, 3xl, 4xl)
|
|
- **Componentes**: Button (4 variantes), Input, Card, Checkbox reutilizáveis
|
|
|
|
## 📝 Próximos Passos (Fora do Escopo)
|
|
|
|
- [ ] Editar tarefa inline
|
|
- [ ] Drag & drop para reordenar
|
|
- [ ] Temas dark/light
|
|
- [ ] Notificações em tempo real (WebSocket)
|
|
- [ ] Export/Import tarefas
|
|
- [ ] Histórico de atividades
|
|
- [ ] Colaboração (compartilhar tarefas)
|
|
- [ ] Aplicativo Flutter mobile
|
|
|
|
---
|
|
|
|
**Status**: ✅ Pronto para testes completos
|
|
**Data**: 1º de Dezembro de 2025
|
|
**Commit**: a59a9a9
|