Desafio Laravel + React

Aplicação full stack de lista de tarefas pessoais, desenvolvida como parte de um desafio técnico para processo seletivo. O projeto separa backend (API REST) e frontend (SPA), permitindo autenticação de usuários, gerenciamento completo de tarefas e notificações no Slack ao concluir uma tarefa.

Sobre o desafio

Este repositório documenta a solução entregue no contexto de uma vaga de emprego. O objetivo foi demonstrar domínio de:

• API REST com Laravel (validação, autenticação, autorização e integrações)
• Interface com React (rotas protegidas, formulários e consumo de API)
• Boas práticas como Form Requests, Policies/Gates, Sanctum e organização em camadas

Funcionalidades

• Cadastro e login de usuários
• Autenticação via token Bearer (Laravel Sanctum)
• CRUD de tarefas vinculadas ao usuário autenticado
• Marcar tarefa como concluída ou pendente
• Autorização por Policy e Gates (usuário só altera/remove suas próprias tarefas)
• Validação de dados no backend (Form Requests) e no frontend (Formik + Yup)
• Notificação no Slack quando uma tarefa é marcada como concluída
• Rotas privadas no frontend (redirecionamento para login sem token)
• Seeders com usuários e tarefas de exemplo (Faker)

Stack tecnológica

Camada	Tecnologias
Backend	PHP 8.1+, Laravel 10, Laravel Sanctum, MySQL
Frontend	React 18, React Router 6, Formik, Yup, Tailwind CSS, js-cookie, react-toastify
Integração	Fetch API, CORS, notificações Slack

Estrutura do projeto

desafio_laravel_react/
├── backend/          # API Laravel
│   ├── app/
│   │   ├── Http/Controllers/   # AuthController, TaskController
│   │   ├── Http/Requests/      # Validação de login, registro e tarefas
│   │   ├── Models/             # User, Task
│   │   ├── Policies/           # TaskPolicy
│   │   └── Notifications/      # SlackNotification
│   ├── database/migrations/
│   └── routes/api.php
└── frontend/         # SPA React (Create React App)
    ├── src/
    │   ├── Components/
    │   ├── Pages/              # Welcome, Login, Register, Tasks
    │   ├── Services/Api.js     # Cliente HTTP da API
    │   └── Helpers/
    └── public/

Pré-requisitos

• PHP >= 8.1 com extensões comuns do Laravel
• Composer
• Node.js e npm
• MySQL (ou outro banco compatível com Laravel)
• (Opcional) Workspace e bot no Slack para notificações

Como executar

1. Backend (Laravel)

cd backend
composer install
cp .env.example .env
php artisan key:generate

Configure o banco no arquivo .env:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=backend
DB_USERNAME=root
DB_PASSWORD=sua_senha

Crie o banco de dados e rode as migrations (e seeders, se desejar dados de teste):

php artisan migrate
php artisan db:seed   # opcional: 10 usuários com 5 tarefas cada
php artisan serve     # API em http://localhost:8000

2. Frontend (React)

Em outro terminal:

cd frontend
npm install
npm start             # App em http://localhost:3000

A URL base da API está definida em frontend/src/Services/Api.js como http://localhost:8000/api/. Ajuste se o backend rodar em outra porta ou host.

3. Slack (opcional)

Para receber notificações ao concluir tarefas, configure no .env do backend:

SLACK_BOT_USER_OAUTH_TOKEN=seu_token_do_bot
SLACK_BOT_USER_DEFAULT_CHANNEL=id_ou_nome_do_canal

Sem essas variáveis, a conclusão de tarefas continua funcionando; apenas a notificação no Slack não será enviada.

API REST

Todas as rotas de tarefas exigem o header Authorization: Bearer {token} (token retornado no login).

Método	Rota	Descrição
POST	/api/register	Cadastro de usuário
POST	/api/login	Login (retorna token Sanctum)
GET	/api/tasks	Lista tarefas do usuário autenticado
POST	/api/tasks	Cria nova tarefa
GET	/api/tasks/{id}	Exibe uma tarefa
PUT	/api/tasks/{id}	Atualiza tarefa
DELETE	/api/tasks/{id}	Remove tarefa
PUT	/api/tasks/{id}/update-status	Altera status completed (0 ou 1)

Exemplo de corpo — criar tarefa

{
  "task": "Estudar Laravel Sanctum",
  "description": "Revisar documentação de autenticação por token"
}

Exemplo de corpo — atualizar status

{
  "completed": 1
}

Modelo de dados

users

• name, email, password
• role: admin | manager | user (padrão no cadastro: user)

tasks

• task (título), description, completed (boolean)
• user_id (FK para users)

Autenticação e autorização

• Sanctum: tokens com ability baseada no role do usuário (user no registro padrão).
• TaskPolicy: regras para criar, editar, excluir e alterar status apenas nas tarefas do próprio usuário.
• Gates registrados em AuthServiceProvider (createTask, updateTask, deleteTask, updateTaskStatus).
• No frontend, o token é armazenado em cookie (js-cookie) e rotas /tasks são protegidas por componente PrivateRoute.

Fluxo da aplicação

1. Usuário acessa a página inicial e pode ir para login ou registro.
2. Após login bem-sucedido, o token é salvo e o usuário é redirecionado para /tasks.
3. Na lista de tarefas é possível criar, editar, excluir e marcar como concluída.
4. Ao marcar como concluída (completed = 1), o backend dispara SlackNotification para o canal configurado.

Scripts úteis

Backend

php artisan migrate:fresh --seed   # recria banco e popula dados
php artisan test                   # testes PHPUnit

Frontend

npm run build    # build de produção
npm test         # testes (Jest / Testing Library)

Observações

• O CORS está configurado para aceitar requisições do frontend em desenvolvimento (config/cors.php).
• Mensagens de validação da API estão em português.
• Os READMEs dentro de backend/ e frontend/ são os padrão do Laravel e Create React App; este arquivo na raiz concentra a documentação do desafio como um todo.

Licença

Projeto desenvolvido para fins de avaliação técnica. Consulte os arquivos de licença dos frameworks utilizados (Laravel — MIT, React — conforme package.json).