Frontend app url - https://front-task-api.vercel.app/
Backend Project URL - https://github.com/Medeiros000/task_api
Aplicação web moderna para gerenciamento de tarefas. Uma interface intuitiva e responsiva construída com React, permitindo aos usuários criar, visualizar, atualizar e gerenciar suas tarefas de forma eficiente.
- ✅ Autenticação de Usuários - Sign in e sign out com JWT
- 📝 Gerenciamento de Tarefas - Criar, ler, atualizar e deletar tarefas
- 🔍 Visualização Detalhada - Informações completas de cada tarefa
- 👤 Perfil do Autor - Veja quem criou cada tarefa
- ✨ Interface Moderna - Design responsivo e intuitivo
- 🌙 Dark Mode - Suporte para tema escuro
- 📱 Mobile Friendly - Totalmente responsivo
- React 19.2.6 - Library UI
- Vite 8.0.12 - Build tool e dev server
- React Router DOM 7.15.0 - Roteamento
- Axios 1.16.0 - HTTP client
- JWT Decode 4.0.0 - Decodificação de tokens
- ESLint - Code linting
src/
├── api/
│ ├── authService.ts # Serviços de autenticação
│ ├── taskService.ts # Serviços de tarefas
│ ├── axios.ts # Configuração do Axios
│ └── ...
├── components/
│ ├── NavBar.jsx # Barra de navegação
│ ├── TaskNavBar.jsx # Navegação de tarefas
│ └── ...
├── pages/
│ ├── Home.jsx # Página inicial
│ ├── SignIn.jsx # Página de login
│ ├── tasks/
│ │ ├── Tasks.jsx # Container de tarefas
│ │ ├── TaskList.jsx # Lista de tarefas
│ │ ├── TaskDetails.jsx # Detalhes da tarefa
│ │ ├── TaskInfo.jsx # Informações da tarefa
│ │ └── TaskForm.jsx # Formulário de tarefa
│ └── ...
├── types/
│ └── class.ts # Tipos TypeScript
├── App.jsx # Componente raiz
├── App.css # Estilos globais
├── main.jsx # Entry point
└── index.css # Estilos base
- Node.js 16+
- npm ou yarn
- Clone o repositório:
git clone <url-do-repositorio>
cd react_front_api- Instale as dependências:
npm install- Configure as variáveis de ambiente:
Copie o arquivo .env.example para .env.local:
cp .env.example .env.localEdite o arquivo .env.local e configure a URL da sua API:
# Para desenvolvimento local
VITE_API_URL=http://localhost:3000/api
# Para produção no Vercel/outro host
VITE_API_URL=https://seu-backend-api.com/apiNota: O arquivo .env.local é ignorado pelo git e não será commitado. Use .env.example como referência.
ℹ️ Para mais detalhes sobre configuração da API, veja: API_SETUP.md
npm run devO servidor de desenvolvimento será iniciado em http://localhost:5173
npm run buildOs arquivos otimizados estarão em dist/
npm run preview| Rota | Descrição |
|---|---|
/ |
Página inicial |
/sign-in |
Página de login |
/tasks |
Lista de tarefas |
/tasks/new |
Criar nova tarefa |
/tasks/:id/info |
Informações da tarefa |
/tasks/:id/update |
Editar tarefa |
A autenticação é feita via JWT (JSON Web Token):
- Token é armazenado em
localStorage - Token é validado automaticamente
- Token expirado é removido automaticamente
- É necessário estar autenticado para gerenciar tarefas
// Exemplo de login
import { signIn } from './api/authService';
const handleLogin = async (email, password) => {
try {
const token = await signIn(email, password);
localStorage.setItem('token', token);
setToken(token);
} catch (error) {
console.error('Erro de login:', error);
}
};O projeto se integra com uma API backend. Os serviços estão em src/api/:
import { taskService } from './api/taskService';
// Obter todas as tarefas
const tasks = await taskService.getAll();
// Obter tarefa por ID
const task = await taskService.getById(id);
// Criar tarefa
await taskService.create(taskData);
// Atualizar tarefa
await taskService.update(id, taskData);
// Deletar tarefa
await taskService.delete(id);import { signIn, signUp, isTokenExpired } from './api/authService';
// Login
const token = await signIn(email, password);
// Registro
const user = await signUp(name, email, password);
// Validar token
const expired = isTokenExpired(token);O projeto utiliza CSS customizado com:
- Variáveis CSS para cores e tipografia
- Design system consistente
- Temas light/dark automáticos
- Responsive design mobile-first
- Animações suaves
Principais cores:
- Primary:
#aa3bff(Roxo) - Background:
#ffffff(Light) /#16171d(Dark)
Navegação principal com links para Home, Tasks e Sign In/Out.
Exibe todas as tarefas em cards com:
- Título e descrição
- Status (Completed/Pending)
- Autor da tarefa
Container para detalhes completos da tarefa com:
- Botões de navegação (Info, Update, Delete)
- Outlet para renderizar rotas aninhadas
Formulário para criar/editar tarefas com:
- Campos: Título, Descrição, Status
- Validação de campos
- Submit automático
Exibição das informações da tarefa:
- Título, descrição e status
- Nome do autor
App.jsx (Estado de autenticação)
├── NavBar (Exibe perfil do usuário)
├── Routes
│ ├── Home
│ ├── SignIn
│ └── Tasks (Estado de tarefas)
│ ├── TaskList (Renderiza tarefas)
│ ├── TaskForm (Cria/Edita)
│ └── TaskDetails (Detalhes)
│ ├── TaskInfo
│ └── TaskForm (Nested)
- O projeto usa Vite para build rápido
- React Router v7 para roteamento
- Axios com interceptadores para autenticação
- State management com hooks (useState, useEffect)
- Context API para compartilhar dados entre rotas
Este erro é do backend, não do frontend. Certifique-se de que o backend está rodando corretamente.
Causa: A URL da API está incorreta ou o backend não responde.
Solução:
- Verifique se o arquivo
.env.localexiste e contém a URL correta:
VITE_API_URL=http://localhost:3000/api- Certifique-se que o backend está rodando:
# No diretório do backend
npm run dev- Teste a URL manualmente:
curl http://localhost:3000/api/sign-inCausa: Você não está autenticado.
Solução:
- Faça login usando credenciais válidas
- O token será automaticamente armazenado em
localStorage
Causa: Backend não está disponível ou token expirou.
Solução:
- Verifique se o backend está rodando
- Faça login novamente
- Verifique o console do navegador para mensagens de erro detalhadas
Causa: O backend não está configurado para aceitar requisições do frontend.
Solução: Configure CORS no backend:
// No backend (Express)
const cors = require('cors');
app.use(cors({
origin: 'http://localhost:5173',
credentials: true
}));Para contribuir:
- Crie uma branch:
git checkout -b feature/sua-feature - Commit suas mudanças:
git commit -m 'Add sua feature' - Push para a branch:
git push origin feature/sua-feature - Abra um Pull Request
Este projeto está sob a licença MIT.
Desenvolvido com ❤️ por jrmedeiros.dev@gmail.com
Para dúvidas ou problemas, abra uma issue no repositório.