/trackit

A habits tracker app, built with ReactJs to help you manage your habits in a easy and comfortable way.

Primary LanguageJavaScript

Requisitos

  • Geral

    • Manipule o HTML usando somente React (você não deve manipular o DOM diretamente com querySelector, innerHTML, classList)
    • Para controlar os dados dinâmicos da aplicação, utilize as ferramentas de gerenciamento de estado do React (não utilize variáveis globais)
    • Para estados globais (como usuário logado e progresso do dia) utilize ContextAPI. Local Storage só deve ser usada para armazenar as credenciais do usuário, enviadas pelo servidor. Session Storage não deve ser utilizado.
    • Versionamento usando Git é obrigatório, crie um repositório público no seu perfil do GitHub
    • Faça commits a cada funcionalidade implementada

  • Layout

    • Aplicar layout, seguindo figma fornecido

      TrackIt

    • O CSS deve ser implementado utilizando Styled Components

    • Não é necessário fazer a versão para desktop, somente mobile

  • Tela Login (rota /)

    • Deve ser enviado o email e senha para a API conforme documentação

    • Enquanto estiver carregando, os campos e o botão devem ser desabilitados, conforme layout

      Dica: para fazer a animação de loading, utilize a biblioteca react-loader-spinner

    • Em caso de sucesso, o usuário deve ser redirecionado para a rota /hoje

    • Em caso de falha, deve ser exibido um alert informando para o usuário e os campos/botão devem ser habilitados novamente

    • Ao clicar no link para se cadastrar, o usuário deve ser redirecionado para a rota /cadastro

  • Tela Cadastro (rota /cadastro)

    • Os dados devem ser enviados para a API conforme documentação
    • Enquanto estiver carregando, os campos e o botão devem ser desabilitados, conforme layout
    • Em caso de sucesso, o usuário deve ser redirecionado para a rota / (rota de Login)
    • Em caso de falha, deve ser exibido um alert informando para o usuário e os campos/botão devem ser habilitados novamente
    • Ao clicar no link para logar, o usuário deve ser redirecionado para a rota / (rota de Login)

  • Topo e Menu

    • Topo e menu devem ter posicionamento fixo

    • No topo deve ser exibida a foto do usuário conforme layout

      OBS: Utilize ContextAPI para compartilhar o estado do usuário logado globalmente entre os componentes.

    • No menu, os 3 botões de Hábitos, Hoje e Histórico devem redirecionar o usuário para as rotas /habitos, /hoje e /historico respectivamente

    • O botão de Hoje deve exibir uma barra de progresso circular indicando a porcentagem de conclusão de hábitos de hoje do usuário

      Dica: utilize a biblioteca react-circular-progressbar

      OBS: Esse progresso deve ser atualizado automaticamente conforme o usuário for concluindo os hábitos. Utilize ContextAPI para compartilhar esse estado globalmente entre os componentes.

  • Tela Hábitos (rota /habitos)

    • Carregar os hábitos do usuário, mandando request pra API conforme documentação e exibindo abaixo conforme layout
    • Ao clicar para deletar um hábito, deve ser exibido um confirm para confirmar se o usuário gostaria realmente de apagar o hábito. Se sim, deve ser enviado um request pra API conforme documentação e os hábitos recarregados logo em seguida.
    • Caso o usuário não tenha nenhum hábito cadastrado, deve ser exibido o texto conforme layout
    • Ao clicar no botão de "+", deve-se exibir um formulário de cadastro de hábito logo abaixo do título conforme layout
    • O usuário deve inserir o nome do hábito em um campo de texto e selecionar os dias da semana que deseja realizar o hábito conforme layout
    • Ao salvar, devem ser enviados os dados para API conforme documentação
    • Enquanto estiver carregando, o campo de texto e o botão devem ser desabilitados, conforme layout. Os botões dos dias da semana devem ser desabilitados, porém não é necessária mudança visual durante o loading.
    • Em caso de sucesso, os campos devem ser limpos e reabilitados, o formulário deve ser escondido novamente e a lista de hábitos abaixo recarregada
    • Em caso de erro, os campos devem ser reabilitados e um alerta deve indicar o problema para o usuário
    • Ao Cancelar, o formulário deve ser escondido. Caso tenha dados já preenchidos, os mesmos devem ser mantidos caso o usuário reabra o formulário de criação.

  • Tela Hoje (rota /hoje)

    • Carregar os hábitos de hoje do usuário, mandando request pra API conforme documentação e exibindo abaixo conforme layout

    • O título da tela deve exibir o dia de hoje conforme layout

      Dica: utilize a biblioteca dayjs para isso

    • No subtítulo deve ser exibida a frase "Nenhum hábito concluído ainda" ou "x% dos hábitos concluídos", dependendo do progresso do usuário

    • Ao marcar ou desmarcar um hábito como concluído, deve ser enviado um request pra API conforme documentação. Não é necessário colocar loading.

    • Ao marcar um hábito como concluído, deve ser colocada em verde a contagem da sequência atual

    • Caso a sequência atual seja igual ao recorde do usuário, este também deve ser exibido em verde

  • Tela Histórico (rota /historico)

    • Deve ser exibido o texto conforme layout

Bônus (opcional)

  • Persistência de login

  • Tela Histórico (rota /historico)

    • Nesta tela deve ser exibido um calendário, conforme layout

      Dica: Utilize a biblioteca react-calendar

    • No calendário, deve ser exibido destacado em verde os dias em que o usuário completou todos os hábitos que deveria ter completado (ex: tinha 3 hábitos para fazer e completou os 3)

      Dica: Explore a prop formatDay que a biblioteca aceita e, para manipular data, pesquise pela biblioteca dayjs

    • Já os dias que o usuário tinha hábitos para completar, porém não completou todos, devem ser destacados em vermelho (ex: tinha 3 hábitos pra fazer mas só completou 2)

      Dica: mesmas dicas acima

    • Nos dias que o usuário não tinha nenhum hábito a concluir, não devem ser destacados (continuam com o fundo branco)

  • Clique no dia