Projeto To-Do Manager

Gerencie suas tarefas com eficiência | Full Stack

Visão geral

Aplicação fullstack de gerenciamento de tarefas composta por um frontend em React com Vite e Tailwind CSS, e uma API REST leve construída com JSON Server e hospedada na Vercel. Permite criar, visualizar, editar e excluir tarefas com diferentes status — not started, in progress e done —, além de exibir um dashboard com resumo geral das atividades.

API Frontend Demo Voltar para Projetos

O que o sistema entrega

Listagem de tarefas com filtro por status.
Adição de novas tarefas com validação de formulário.
Edição e atualização de tarefas existentes.
Exclusão de tarefas.
Dashboard com resumo de tarefas por status.
Visualização detalhada de cada tarefa.
Notificações toast com feedback de ações.
Interface responsiva e estilizada com Tailwind CSS.

Arquitetura do projeto

O projeto segue uma arquitetura fullstack desacoplada.
Frontend (React + Vite) responsável pela interface e experiência.
API (JSON Server + Node.js) responsável pela persistência e CRUD.
Comunicação via API REST com Axios.
Estado do servidor gerenciado com React Query (cache e sincronização).
Essa separação garante escalabilidade e manutenção facilitada.

Camada de API

API REST leve e funcional construída com JSON Server, pronta para consumo por qualquer cliente front-end. Hospedada de forma serverless na Vercel com roteamento configurado via vercel.json, oferece CRUD completo de tarefas com filtragem por status e período do dia.

JSON Server

Fake REST API completa gerada a partir de um arquivo db.json, permitindo desenvolvimento ágil sem necessidade de banco de dados dedicado.

CRUD Completo

Endpoints para criação, leitura, atualização parcial e total, e exclusão de tarefas via métodos GET, POST, PUT, PATCH e DELETE.

Filtragem

Suporte a filtragem de tarefas por status (todo, in_progress, done) e por período do dia (morning, afternoon, evening).

Deploy Serverless

Hospedagem na Vercel com rewrite configurado para compatibilidade de rotas, garantindo disponibilidade contínua sem necessidade de servidor dedicado.

Camada frontend

Interface moderna e de alta performance construída com React 18, Vite e Tailwind CSS. O gerenciamento de estado do servidor é feito com TanStack React Query, garantindo cache, sincronização e experiência fluida ao usuário.

React + Vite

Biblioteca de UI com build tool de alta performance, garantindo carregamento rápido e hot reload eficiente durante o desenvolvimento.

Tailwind CSS

Estilização utilitária que permite construir interfaces responsivas e consistentes de forma ágil, sem sair do HTML.

React Query

Gerenciamento de estado do servidor com cache automático, revalidação e sincronização de dados, eliminando chamadas redundantes à API.

React Hook Form

Gerenciamento eficiente de formulários com validação integrada, minimizando re-renderizações e melhorando a performance.

React Router DOM

Roteamento client-side para navegação entre páginas sem recarregamento, proporcionando experiência de Single Page Application (SPA).

Sonner

Notificações toast elegantes com feedback visual imediato para ações como criação, atualização e exclusão de tarefas.

Endpoints da API

Base URL: https://to-do-app-api-ten.vercel.app/api

Método	Rota	Descrição
`GET`	`/tasks`	Lista todas as tarefas
`GET`	`/tasks/:id`	Retorna uma tarefa pelo ID
`GET`	`/tasks?status=done`	Filtra tarefas por status
`GET`	`/tasks?time=morning`	Filtra tarefas por período
`POST`	`/tasks`	Cria uma nova tarefa
`PUT`	`/tasks/:id`	Atualiza uma tarefa por completo
`PATCH`	`/tasks/:id`	Atualiza parcialmente uma tarefa
`DELETE`	`/tasks/:id`	Remove uma tarefa

Modelo de dados

Cada tarefa é representada pelo seguinte objeto JSON. O campo status aceita todo, in_progress e done. O campo time aceita morning, afternoon e evening.

{
  "id": "1",
  "title": "Estudar React",
  "description": "Estudar os conceitos básicos de React e criar um projeto simples.",
  "time": "morning",
  "status": "done"
}

Estrutura dos projetos

Frontend

src/
├── assets/         # Fontes e ícones
├── components/     # Componentes reutilizáveis
├── hooks/
│   └── data/       # Hooks de dados (React Query)
├── keys/           # Chaves de queries e mutations
├── lib/            # Configuração do Axios
└── pages/          # Páginas da aplicação

API

to-do-app-api/
├── api/
│   └── server.js
├── db.json
├── package.json
└── vercel.json

Como executar

Pré-requisito: Node.js 18+

API

# Clone o repositório da API
git clone https://github.com/DevRogerFer/to-do-app-api
cd to-do-app-api

# Instale as dependências
npm install

# Inicie o servidor
npm start

O servidor estará disponível em http://localhost:3000.

Frontend

# Clone o repositório do frontend
git clone https://github.com/DevRogerFer/to-do-app
cd to-do-app

# Instale as dependências
npm install

# Inicie a API fake (json-server)
npm run server

# Em outro terminal, inicie o servidor de desenvolvimento
npm run dev

Resumo técnico

Projeto fullstack moderno focado em boas práticas de desenvolvimento front-end, separação de responsabilidades e gerenciamento de estado do servidor via React Query. Combina uma API REST leve e serverless com uma interface responsiva e acessível, demonstrando domínio do ecossistema React e integração com serviços externos. Ideal como aplicação prática de CRUD completo com deploy em produção.