Skip to content

IGNITE - Trilha ReactJS/ Chapter II - Esta aplicação é um Dashboard de registros financeiros para acompanhamento de valores de entrada, saída e total.

Notifications You must be signed in to change notification settings

DIGOARTHUR/DashBoard-Financeiro

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

image

GitHub GitHub last commit

Stacks:

HTML5 SASS ReactJS TypeScript

Tools:

Vscode Git Git


dtmoney

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

skills 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.

skills Interfaces

Figma

Desktop

Tela Principal
image
Modal
image

skills Stacks

Lógica

Alt ou título da imagem

  • 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

  • Alt ou título da imagem
    • Style Components (Biblioteca de estilização que permite escrever CSS no formato de Javascript)

Framework / Lib

Alt ou título da imagem

  • 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

Alt ou título da imagem

Versionameto

Alt ou título da imagem

IDE

Alt ou título da imagem

skills Rodando a Aplicação

  1. Clonar repositório:
git clone https://github.com/DIGOARTHUR/DashBoard-Financeiro.git
  1. Instalar dependências
yarn install
  1. 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',
})
  1. Rodar aplicativo
yarn start
  1. 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! ♥

About

IGNITE - Trilha ReactJS/ Chapter II - Esta aplicação é um Dashboard de registros financeiros para acompanhamento de valores de entrada, saída e total.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published