Projeto realizado ao final do segundo módulo do curso de Formação em Desenvolvimento Full Stack da Kenzie Academy Brasil
O objetivo desse projeto é, em equipe, desenvolver do zero uma aplicação, desde a sua estrutura (HTML) e estilização (CSS) até as suas funcionalidades (Javascript).
Principais conceitos utilizados:
- OOP;
- Spread Operator;
- Desconstrução;
- Consumo de API;
- LocalStorage;
- DOM;
- Mobile First.
Aspectos técnicos/ funcionalidades:
- Tela de Login:
- Presença de um formulário contendo um botão de "Entrar", o qual faz uma requisição a API. Caso a requisição de login esteja correta, o token e os dados do usuário são adicionados ao localstorage. Caso esteja incorreta, o usuário é redirecionado para a homepage;
- Há um retorno visual caso o usuário passe dados inválidos nos inputs.
- Tela Homepage:
- Possibilidade de criação de um novo hábito;
- Renderização da lista de hábitos na página;
- Renderização do nome e imagem do usuário (dados salvos no localstorage);
- Ao clicar na foto do usuário, abre um dropDownMenu com as funcionalidades de editar perfil e logout;
- No dropDownMenu ao escolher a opção de editar perfil, abre-se um menu de edição do usuário;
- No dropDownMenu ao escolher a opção de logout, apagasse os dados do localstorage e redireciona o usuário para a página de login;
- Há um botão de "Concluídos" que exibe apenas os hábitos concluídos;
- Há um botão "Todos" que exibe todos os hábitos do usuário;
- Há um botão "Criar" que abre um modal para criação de novos hábitos;
- Os 'cards' dos hábitos possuem um botão "..." que abre um modal para atualizar o hábito;
- Dentro do modal de atualização de hábito também tem a opção de o excluir, a qual realiza uma requisição de delete;
- Há um checkbox que realiza uma requisição de atualizar o hábito o tornando concluído ou não concluído.
- Extras:
- Animação nos botões;
- Animação durante as transições de tela;
- Animação durante o popup dos modais;
- Popup de erro para as requisições;
- Os commits seguem um padrão Padrão de commits Coventional Commits.