alura-tracker

Esse projeto foi desenvolvido ao longo dos três cursos da formação Vue.js 3 da Alura.

Sobre o projeto

O Tracker é uma ferramenta para cronometrar o tempo gasto com tarefas.

Para registrar uma tarefa basta iniciar o crônometro e encerrá-lo ao concluir a tarefa. Você pode adicionar uma descrição e escolher um projeto para cada tarefa, mas isso é opcional. As tarefas registradas são listadas abaixo da barra de pesquisa. Você pode pesquisar tarefas pelo nome usando a barra de pesquisa.

A página de Projetos lista os projetos cadastrados. Aqui é possível remover e editar os projetos existentes, assim como adicionar novos projetos. Após adicionados, os projetos podem ser usados no registro de novas tarefas.

O Tracker também possui um modo escuro. Para ativá-lo basta usar o botão na barra lateral.

---

Executando o projeto

Primeiro, clone esse repositório e entre no diretório criado:

git clone [email protected]:andrefelipeos/vue-js-alura.git && cd vue-js-alura

Antes de executar o projeto, é preciso simular um back end. Para isso instale o pacote json-server.

sudo npm install -g json-server

Com o json-server você pode simular uma API que armazena os dados das tarefas e dos projetos.

json-server --watch db.json

Agora basta instalar as dependências do projeto.

npm install

E então executá-lo.

npm run serve

Você pode acessar o Tracker pelo seu navegador no endereço http://localhost:8080. Alternativamente, você pode acessar https://tracker-afos.vercel.app logo após iniciar o json-server.

---

Sobre a formação Vue.js 3 da Alura

A formação é composta por três cursos ao longo dos quais conheci vários detalhes do Vue. Alguns conteúdos foram mais praticados que outros e por isso geraram um apredizado mais profundo.

Alguns dos pontos abordados foram os seguintes:

• o uso do vue-cli para criar novos projetos Vue.js
• a utilização do TypeScript e as vantagens disso
• a criação de componentes e a interação com e entre eles
• bastante da Options API, um pouco da Compositon API
• o ciclo de vida dos componetes
• a passagem de dados para componetes com props
• a emissão de eventos utilizando emit
• várias diretivas, como v-model, v-for, v-bind, etc
• rederização condicional com v-if e v-show
• o uso extensivo do Vuex, incluindo estados, stores, mutations, actions e módulos
• a utilização básica do Vue Router
• o uso do Vue DevTools para depuração da aplicação