Stacks:

Tools:

---

Sobre a aplicação   |    Interfaces   |    Stacks   |    Rodando Aplicação   |    Por que?   |   

Sobre a aplicação

Essa é uma aplicação voltado para o desenvolvimento de Dashboard que aborda apresentação e exemplo de autenticação de login, implementação de uso de gráficos, crud de usuários, listagem. Aqui o destaque vai para o uso do ChakraUI para estilização, MirageJS para implementar uma API no FrontEnd, Autenticação JTW e o uso do ReactQuery para a otimização de carregamento de dado na página. Aborda também conceitos do Yup (tratamento caixas de entrada), MirageJS (API), Context, Axios, além dos conceitos básicos de ReacjJS como State, Components, Props. Recursos do JS como: Map.

FIGMA

Interfaces

DESKTOP

Tela de Login

Dashboard

Usuários

Criar Usuário

Ferramenta React Query

Stacks

Linguagem

• TypeScript (TypeScript é uma linguagem de programação fortemente tipada que se baseia em JavaScript, oferecendo melhores ferramentas em qualquer escala.)
  • Map (Método que executa uma iteração em uma array com retorno de outra array formatada, trabalhada de diversas formas.)
  • Async/await (Método utilizado para transformar funções em assíncronas. Usado para chamadas de APIs.)

Estilização

• Styled System(ChakraUI possibilita a experiência própria de estilização, sendo repassado por Props.)

Framework / Lib

• Estrutura (Estruturação de pastas e arquivos)
• Evitar conflito CSS(.modules)
• next/link (Aplicação de rotas)
• Componente (Uso de componentes)
• Estado (Uso de hooks para controle de estado e ciclo de vida da aplicação)
• Props (Recurso utilizado para passar atributos de um componente pai para outro componente filho)

Gerenciador / Pacotes

• chakra-ui (Biblioteca que fornece Estilo, Componentes, Hooks para a aplicação React que facilita a construção da IU)
• miragejs (Biblioteca de simulação de API que permite criar, testar e compartilhar um aplicativo JavaScript completo e funcional sem precisar depender de nenhum serviço de back-end.)
• react-query (Biblioteca utilizada para otimizar a busca, armazenamento em cache e atualização dos dados remotos)
• apexcharts (Biblioteca que oferece ferramentas para contrução de gráfico interativos e modernos)
• axios (Biblioteca utilizada para fazer chamadas HTTP Client. Chamadas em uma API ou a partir de um Back-end construído.)

Versionameto

IDE

Rodando a Aplicação

1. Clonar repositório:

git clone https://github.com/DIGOARTHUR/Dashgo.git

2. Instalar dependências

yarn install

3. Rodar aplicativo

yarn dev

4. Acesse http://localhost:3000/ e navegue pelo site

⚠️ 5. Trocar URL do repositorio remoto (caso necessário)

5.1 Ver qual o repositorio atual

git remote -v

5.2 Mudar a URL do repositorio remoto

git remote set-url origin <LinkDoNovoRepositorio>

5.3 Verifique se a mudança foi realizada

git remote -v

Por que?

Seguindo o curso IGNITE já em reta final, esse foi um dos projetos mais legais dentro trilha ReactJS. A @Rocketseat sempre trazendo novidades a cada aplicação, ferramentas que abrem fronteiras para aplicação e criatividade em projetos pessoais e profissionais.

---

Só tenho agradecer ♥