Skip to content

Projeto Final: Aplicativo de Gerenciamento de Tarefas

O projeto final para o curso será o desenvolvimento de um aplicativo de gerenciamento de tarefas chamado TaskManager. O objetivo deste aplicativo é permitir que os usuários criem, visualizem, modifiquem e excluam tarefas, além de categorizá-las. O aplicativo usará Vue.js com Pinia para o gerenciamento de estado e terá integração com uma API externa para persistência dos dados. Além disso, o projeto incluirá autenticação de usuários e roteamento avançado com Vue Router.

Requisitos do Projeto

  1. Autenticação de Usuários: Os usuários devem ser capazes de se registrar e fazer login. A autenticação será manipulada através de uma API externa.
  2. Gerenciamento de Tarefas: Os usuários devem poder criar, visualizar, editar e deletar tarefas.
  3. Categorias: As tarefas podem ser categorizadas. Os usuários podem criar e editar categorias.
  4. Roteamento Avançado: Uso do Vue Router para navegar entre diferentes vistas e estados do aplicativo.
  5. Estado Global com Pinia: Uso do Pinia para gerenciar o estado da aplicação, incluindo o estado de autenticação e o estado das tarefas.

Tecnologias e Ferramentas

  • Vue 3: Framework front-end.
  • Pinia: Gerenciamento de estado.
  • Vue Router: Gerenciamento de rotas.
  • Axios: Para chamadas de API.
  • Vite: Como bundler e servidor de desenvolvimento.
  • PrimeVue: Para estilização.
  • JSON Server ou Firebase: Para back-end simulado ou real.

Etapas do Desenvolvimento

  1. Configuração do Projeto:

    • Crie o projeto com Vite e Vue 3.
    • Instale e configure Pinia e Vue Router.
    • Configure PrimeVue para o projeto.
  2. Desenvolvimento da Interface do Usuário:

    • Crie componentes para as tarefas e formulários de tarefa.
    • Desenvolva componentes para autenticação (login e registro).
    • Implemente a navegação usando Vue Router.
  3. Integração com a API:

    • Configure Axios para fazer chamadas HTTP.
    • Desenvolva serviços para interagir com a API de autenticação e gerenciamento de tarefas.
  4. Gerenciamento de Estado com Pinia:

    • Defina stores para usuários e tarefas.
    • Implemente funcionalidades para manipular o estado baseado nas interações do usuário e respostas da API.
  5. Autenticação:

    • Implemente o fluxo de autenticação usando JWT ou sessões, dependendo da API.
    • Garanta que as rotas sejam protegidas com guardas de rota do Vue Router.
  6. Testes e Depuração:

    • Realize testes manuais para garantir que todas as funcionalidades estejam funcionando como esperado.
    • Use ferramentas como Vue Devtools para depurar o estado e os componentes.
  7. Deploy:

    • Prepare o aplicativo para produção.
    • Faça o deploy usando plataformas como Netlify, Vercel ou qualquer servidor que suporte aplicações estáticas.

Documentação e Entrega

  • Documentação do Código: Comente o código extensivamente para garantir que seja fácil de entender e manter.
  • Documentação do Projeto: Prepare um README com instruções sobre como configurar e executar o projeto localmente.

Este projeto não só testará as habilidades adquiridas durante o curso mas também servirá como um excelente portfólio de trabalho para demonstrar competências práticas em desenvolvimento front-end com Vue.js, Pinia e integrações de API.