/dashgo

šŸ“ˆ Dashgo ā€” Dashboard sobre seus usuĆ”rios.

Primary LanguageTypeScript

dashgo logo

DescriĆ§Ć£o ā€¢ Tecnologias ā€¢ PrĆ©-requisitos ā€¢ Como usar ā€¢ Espiadinha

dashgo desktop

ā„¹ DescriĆ§Ć£o

Projeto desenvolvido ao longo do capĆ­tulo 4 do Ignite. šŸ‘Øā€šŸš€šŸš€

Dashgo Ʃ uma dashboard para monitoramento dos seus usuƔrios e inscritos. O projeto, alƩm de ser todo feito com Chakra UI e sua responsividade, possui funcionalidades como:

  • Na pĆ”gina de Login:
    • Fazer login atravĆ©s de um formulĆ”rio com React Hook Form e validaƧƵes com Yup, sendo direcionado para pĆ”gina Dashboard;
  • Na pĆ”gina Dashboard:
    • VisualizaĆ§Ć£o de dados atravĆ©s de grĆ”ficos com ApexCharts;
    • NavegaĆ§Ć£o para pĆ”gina Users por meio do Drawer do Chakra UI;
  • Na pĆ”gina Users:
    • Dados fakes de usuĆ”rios com Faker (versĆ£o 5.5.3) e API mock com Mirage;
    • Fetch e cache de dados com React Query e listagem de todos os usuĆ”rios (10 por pĆ”gina);
    • Prefetch de dados de tal usuĆ”rio ao passar o mouse por cima;
    • Componente Pagination para permitir a navegaĆ§Ć£o entre pĆ”ginas de usuĆ”rios;
    • Editar os dados de um determinado usuĆ”rio;
    • Na pĆ”gina Users/create:
      • CriaĆ§Ć£o de um novo usuĆ”rio com React Hook Form + Yup, com efeitos colaterais para o servidor com useMutation do React Query;
  • Entre outrosā€¦

āš’ Tecnologias

āš™ PrĆ©-requisitos

šŸ–„ Como usar

Clone o projeto e acesse a pasta

$ git clone https://github.com/EduardoReisUX/dashgo.git && cd dashgo

Siga os passos seguintes

# Instale as dependĆŖncias
$ yarn

# Rode a aplicaĆ§Ć£o
$ yarn dev

šŸ‘€ Espiadinha

šŸš§ Quase feito...

Feito com šŸ’œ por Eduardo dos Reis

Deployed by ā–² Vercel