https://github.com/digoarthur/dashboard-financeiro
IGNITE - Trilha ReactJS/ Chapter II - Esta aplicação é um Dashboard de registros financeiros para acompanhamento de valores de entrada, saída e total.
https://github.com/digoarthur/dashboard-financeiro
html5 miragejs reactjs styled-components typescript
Last synced: 6 months ago
JSON representation
IGNITE - Trilha ReactJS/ Chapter II - Esta aplicação é um Dashboard de registros financeiros para acompanhamento de valores de entrada, saída e total.
- Host: GitHub
- URL: https://github.com/digoarthur/dashboard-financeiro
- Owner: DIGOARTHUR
- Created: 2022-04-18T00:36:24.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-09T21:35:14.000Z (over 1 year ago)
- Last Synced: 2025-03-28T07:51:12.563Z (7 months ago)
- Topics: html5, miragejs, reactjs, styled-components, typescript
- Language: TypeScript
- Homepage: https://digoarthur.github.io/DashBoard-Financeiro/
- Size: 2.14 MB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#### Stacks:
#### Tools:
---
Sobre a aplicação |
Interfaces |
Stacks |
Rodando Aplicação |
Por quê? |
# 
Sobre a aplicação
> Esta aplicação é um Dashboard de registros financeiros para acompanhamento de valores de entrada, saída e total. Neste projeto é aplicado conceitos de Styled Components (Estilização) , MirageJS (API), Context, Axios, além dos conceitos básicos de ReacjJS como State, Components, Props. Recursos do JS aplicado ao Typescript como: Map, Format Currency, Spread.
# 
Interfaces
## Desktop
| Tela Principal |
| :-------------------------------------------------------------------: |
|  |
| Modal |
| :-------------------------------------------------------------------: |
|  |
## 
Stacks
### Lógica
* [`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) (Iteração com retorno de conteúdo trabalhado, com outro formato, contexto.)
* [`spread`](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_syntax)(Método usado para fazer cópia de uma array já existente)
* [`format Currency`](https://stackoverflow.com/questions/60011347/intl-numberformat-doesnt-convert-to-pt-br-locale)(Método para formatação de monetária)
### Estilização
* 
* [`Style Components`](https://styled-components.com) (Biblioteca de estilização que permite escrever CSS no formato de Javascript)
### Framework / Lib
* [`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)
* [`Context API`](https://reactjs.org/docs/context.html) (Usado para compartilhar dados de Estado, Funções etc... entre componentes diferentes. Faz com que a visão seja global.)
### Gerenciador / Pacotes
* [`MirageJS`](https://miragejs.com) (API mocking)
* [`Axios`](https://axios-http.com/ptbr/docs/intro) (Cliente HTTP )
### Versionameto
### IDE
# 
Rodando a Aplicação
1. Clonar repositório:
```
git clone https://github.com/DIGOARTHUR/DashBoard-Financeiro.git
```
2. Instalar dependências
```
yarn install
```
3. Ajustar endereço de acesso baseURL do axios para as requisições. Arquivo: `services` > `api.ts`
```
import axios from 'axios';
export const api = axios.create({
baseURL:'http://localhost:3000/api',
})
```
3. Rodar aplicativo
```
yarn start
```
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
```
A aplicação da aula do Chapter II da trilha ReactJS da [@Rocketseat](https://github.com/Rocketseat) foi muito divertida! Busco seguir essa trilha para aprender o FrontEnd de uma forma enriquecedora, onde eu possa compreender, aplicar e ver rodando o que programo. Este é o meu foco, e venho aprendendo cada vez mais isso com a Rocketseat.
---
Só tenho a agradecer! ♥
