Task Manager Frontend React

Uma aplicação frontend moderna para gerenciamento de tarefas, desenvolvida com React e Next.js. Oferece uma interface intuitiva para criar, editar, visualizar e gerenciar tarefas, com funcionalidades de autenticação, dashboard com estatísticas e gráficos interativos.

Funcionalidades

• Autenticação de Usuários: Login e registro de usuários.
• Gerenciamento de Tarefas: Criar, editar, excluir e visualizar tarefas.
• Dashboard Interativo: Estatísticas, gráficos de barras e linhas para acompanhar o progresso das tarefas.
• Filtros e Pesquisa: Filtrar tarefas por status, prioridade e data.
• Interface Responsiva: Design adaptável para desktop e mobile.
• Tema Personalizável: Suporte a temas claros e escuros.
• Testes Automatizados: Cobertura de testes com Vitest.

Tecnologias Utilizadas

• Framework: Next.js - Framework React para produção.
• Linguagem: TypeScript - Superset JavaScript com tipagem estática.
• Estilização: Styled Components - Biblioteca para estilos CSS-in-JS.
• Estado e Dados: React Query - Gerenciamento de estado e cache de dados.
• HTTP Client: Axios - Cliente HTTP para requisições API.
• Testes: Vitest - Framework de testes rápido e moderno.
• Gráficos: Recharts - Biblioteca para gráficos em React.
• Outros: ESLint, Prettier, Husky para qualidade de código.

Instalação

1. Clone o repositório:

   git clone https://github.com/seu-usuario/task-manager-frontend.git
   cd task-manager-frontend

2. Instale as dependências:

   npm install
   # ou
   yarn install
   # ou
   pnpm install

3. Configure as variáveis de ambiente: Crie um arquivo .env.local na raiz do projeto e adicione as variáveis necessárias (ex: URL da API backend).

4. Execute o servidor de desenvolvimento:

   npm run dev
   # ou
   yarn dev
   # ou
   pnpm dev

   Abra http://localhost:3000 no navegador para visualizar a aplicação.

Estrutura do Projeto

src/
├── app/                    # Páginas e layouts do Next.js App Router
│   ├── (dashboard)/        # Grupo de rotas do dashboard
│   ├── fonts/              # Configurações de fontes
│   ├── login/              # Página de login
│   └── register/           # Página de registro
├── components/             # Componentes reutilizáveis
│   ├── dashboard/          # Componentes do dashboard
│   ├── layout/             # Componentes de layout (Header, Sidebar)
│   ├── tasks/              # Componentes relacionados a tarefas
│   └── ui/                 # Componentes de UI básicos
├── hooks/                  # Hooks customizados
├── lib/                    # Utilitários e configurações
│   ├── api/                # Configurações de API
│   └── utils.ts            # Funções utilitárias
├── providers/              # Context Providers
├── styles/                 # Estilos globais e tema
├── tests/                  # Arquivos de teste
└── types/                  # Definições de tipos TypeScript

Scripts Disponíveis

• npm run dev - Inicia o servidor de desenvolvimento.
• npm run build - Constrói a aplicação para produção.
• npm run start - Inicia o servidor de produção.
• npm run lint - Executa o linter ESLint.
• npm test - Executa os testes com Vitest.
• npm run test:coverage - Executa os testes e gera relatório de cobertura.

Testes

Os testes são escritos com Vitest e incluem testes unitários para componentes e utilitários. Para executar os testes:

npm test

Para visualizar a cobertura de testes:

npm run test:coverage

Contribuição

Contribuições são bem-vindas! Siga estes passos:

1. Fork o projeto.
2. Crie uma branch para sua feature (git checkout -b feature/nova-feature).
3. Commit suas mudanças (git commit -m 'Adiciona nova feature').
4. Push para a branch (git push origin feature/nova-feature).
5. Abra um Pull Request.

Licença

Este projeto está licenciado sob a MIT License.

Contato

Para dúvidas ou sugestões, entre em contato através do GitHub Issues.

---

Desenvolvido com Next.js e React.