erik/todolist-fullstack

Fork 0

Files

Erik Silva 79eaa74651 docs: Add SESSION_3 recap and testing guide for frontend

2025-12-01 02:01:46 -03:00

7.7 KiB

Raw Blame History

🚀 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:

cd backend-api
npm run start:dev
# Deve estar rodando em http://localhost:3000

Frontend:

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/:

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

Acesse http://localhost:3001 (ou a porta do frontend)
Você será redirecionado para /auth/login
Clique em "Criar conta"
Preencha:
- Email: seu_email@test.com
- Senha: SenhaForte123!
- Confirmar: SenhaForte123!
Clique em "Criar Conta"
Você deve ser redirecionado automaticamente para o dashboard

Acesse http://localhost:3001/auth/login
Faça login com as credenciais da conta criada
Você deve ser redirecionado para /dashboard/tasks

✅ Teste 3: Criar Tarefa

No dashboard, clique no botão "Nova Tarefa" (com ícone +)
Preencha:
- Título: "Aprender React Hooks"
- Descrição: "Estudar useEffect, useState, etc"
- Data de Vencimento: Escolha uma data (opcional)
Clique em "Criar Tarefa"
A tarefa deve aparecer na lista

✅ Teste 4: Marcar como Concluído

Clique no checkbox à esquerda de qualquer tarefa
A tarefa deve aparecer com texto riscado
Clique novamente para desmarcar

✅ Teste 5: Filtrar Tarefas

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
A lista deve atualizar em tempo real

✅ Teste 6: Deletar Tarefa

Clique no botão com ícone 🗑️ (lixeira) em qualquer tarefa
Confirme a exclusão no modal
A tarefa deve desaparecer da lista

✅ Teste 7: Logout

Clique em "Sair" no canto superior direito
Você deve ser redirecionado para /auth/login
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 @/*:

{
  "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:

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:

'use client'; // No topo do arquivo

Solução: Certifique-se que:

Você executou o SQL script (SQL_TASKS_TABLE_RLS.sql) no Supabase
As credenciais de Supabase estão corretas em .env.local
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

7.7 KiB Raw Blame History