https://github.com/digoarthur/dashgo
IGNITE - Trilha ReactJS/ - Neste projeto é aplicado conceitos de do NextJS, ChakraUI (estilização), ReactQuery (otimização carregamento dos dados), 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.
https://github.com/digoarthur/dashgo
chakra-ui editorconfig html5 miragejs nextjs reactquery typescript
Last synced: 3 months ago
JSON representation
IGNITE - Trilha ReactJS/ - Neste projeto é aplicado conceitos de do NextJS, ChakraUI (estilização), ReactQuery (otimização carregamento dos dados), 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.
- Host: GitHub
- URL: https://github.com/digoarthur/dashgo
- Owner: DIGOARTHUR
- License: mit
- Created: 2022-07-23T19:57:51.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-23T20:59:28.000Z (11 months ago)
- Last Synced: 2025-04-14T19:41:46.799Z (6 months ago)
- Topics: chakra-ui, editorconfig, html5, miragejs, nextjs, reactquery, typescript
- Language: TypeScript
- Homepage:
- Size: 626 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
#### Stacks:
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`](https://www.typescriptlang.org/) (TypeScript é uma linguagem de programação fortemente tipada que se baseia em JavaScript, oferecendo melhores ferramentas em qualquer escala.)
* [`Map`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map) (Método que executa uma iteração em uma array com retorno de outra array formatada, trabalhada de diversas formas.)
* [`Async/await`](https://www.w3schools.com/js/js_async.asp) (Método utilizado para transformar funções em assíncronas. Usado para chamadas de APIs.)
### Estilização
* [`Styled System`](https://chakra-ui.com/docs/styled-system/style-props)(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`](https://reactjs.org/docs/components-and-props.html) (Uso de componentes)
* [`Estado`](https://reactjs.org/docs/state-and-lifecycle.html) (Uso de hooks para controle de estado e ciclo de vida da aplicação)
* [`Props`](https://reactjs.org/docs/state-and-lifecycle.html) (Recurso utilizado para passar atributos de um componente pai para outro componente filho)
### Gerenciador / Pacotes
* [`chakra-ui`](https://chakra-ui.com) (Biblioteca que fornece Estilo, Componentes, Hooks para a aplicação React que facilita a construção da IU)
* [`miragejs`](https://miragejs.com) (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`](https://tanstack.com/query/v4/?from=reactQueryV3&original=https://react-query-v3.tanstack.com/) (Biblioteca utilizada para otimizar a busca, armazenamento em cache e atualização dos dados remotos)
* [`apexcharts`](https://apexcharts.com) (Biblioteca que oferece ferramentas para contrução de gráfico interativos e modernos)
* [`axios`](https://axios-http.com/docs/intro) (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
:warning: 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
```
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](https://github.com/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 ♥
