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 (TypeScript é uma linguagem de programação fortemente tipada que se baseia em JavaScript, oferecendo melhores ferramentas em qualquer escala.)
  • map (Iteração com retorno de conteúdo trabalhado, com outro formato, contexto.)
  • spread(Método usado para fazer cópia de uma array já existente)
  • format Currency(Método para formatação de monetária)

Estilização

• 
  • Style Components (Biblioteca de estilização que permite escrever CSS no formato de Javascript)

Framework / Lib

• 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)
• Context API (Usado para compartilhar dados de Estado, Funções etc... entre componentes diferentes. Faz com que a visão seja global.)

Gerenciador / Pacotes

• MirageJS (API mocking)
• Axios (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

⚠️ 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

A aplicação da aula do Chapter II da trilha ReactJS da @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! ♥