Task Manager - Frontend

Interface de utilizador moderna e reativa para a Task API, construída com Angular.

---

🔗 Repositório do Backend

Importante: Esta é uma aplicação frontend que consome uma API. O projeto backend (construído em NestJS) precisa de estar em execução para que esta aplicação funcione.

➡️ Repositório do Backend: Link para o repositório da API NestJS

---

📑 Índice

• Sobre o Projeto
• ✨ Features
• 🛠️ Tecnologias Utilizadas
• 🚀 Como Rodar a Aplicação
• 📸 Screenshots

---

📖 Sobre o Projeto

Este projeto é a interface de utilizador (UI) para a Task API. Ele oferece uma experiência de utilizador fluida e reativa para o registo, autenticação e gestão de tarefas. A aplicação foi construída utilizando as mais recentes práticas do Angular, incluindo componentes standalone, Reactive Forms e um fluxo de autenticação seguro baseado em JWT.

O design é limpo, profissional e responsivo, adaptando-se a diferentes tamanhos de ecrã, desde telemóveis a monitores de desktop.

---

✨ Features

• ✅ Fluxo de Autenticação Completo: Páginas e lógica para Registo e Login de utilizadores.
• 🔐 Gestão de Token JWT: O token de acesso é guardado no localStorage após o login.
• 🚀 Interceptor HTTP: Anexa automaticamente o token JWT a todas as requisições para endpoints protegidos da API.
• 🛡️ Rotas Protegidas: Utilização de Guardas de Rota (CanActivate) para proteger o dashboard, impedindo o acesso de utilizadores não autenticados.
• 🗂️ CRUD de Tarefas Completo:
  • Create: Formulário para criar novas tarefas.
  • Read: Visualização da lista de tarefas do utilizador.
  • Update: Funcionalidade para alterar o status da tarefa.
  • Delete: Funcionalidade para apagar tarefas.
• 📝 Formulários Reativos: Uso de ReactiveFormsModule para formulários robustos com validação em tempo real.
• 📱 Design Responsivo: Layout que se adapta a desktops, tablets e telemóveis.

---

🛠️ Tecnologias Utilizadas

• Angular (v17+): Framework principal para a construção da interface.
• TypeScript: Superset do JavaScript que adiciona tipagem estática.
• SCSS: Pré-processador de CSS para estilos mais organizados e poderosos.
• RxJS: Biblioteca para programação reativa, usada extensivamente no Angular, especialmente para lidar com chamadas HTTP.
• Angular CLI: Ferramenta de linha de comando para gerir o projeto.

---

🚀 Como Rodar a Aplicação

Siga os passos abaixo para configurar e executar o projeto no seu ambiente local.

Pré-requisitos

• Git
• Node.js (v18 ou superior)
• A API do Backend (NestJS) deve estar em execução em http://localhost:3000.

Passo a Passo

1. Clone o repositório:

   git clone <https://github.com/gacneto/angular-task-manager-app-frontend.git>
   cd angular-task-manage-app-frontend

2. Instale as dependências:

   npm install

3. Execute a aplicação:

   ng serve

   A aplicação estará disponível em http://localhost:4200/. Ela irá conectar-se automaticamente à API que está a ser executada em http://localhost:3000.

---

📸 Screenshots

Tela de Login

Tela de Registro

Dashboard de Tarefas

---

📄 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.

Feito por [Lucas Barcelar](https://github.com/gacneto)