gofinances | Ignite - React-Native

O projeto gofinances é um aplicativo mobile para cadastrar gastos e faturamentos recebidos além de realizar uma análise básica sobre os gastos do usuário e um resumo.

<h2 align="center">gofinances</h2>

---

<h3 align="center"> <a href="#information_source-sobre">Sobre</a>&nbsp;|&nbsp; <a href="#interrobang-motivo">Motivo</a>&nbsp;|&nbsp; <a href="#art-design">Design</a>&nbsp;|&nbsp; <a href="#seedling-requisitos-mínimos">Requisitos</a>&nbsp;|&nbsp; <a href="#rocket-tecnologias-utilizadas">Tecnologias</a>&nbsp;|&nbsp; <a href="#package-como-baixar-e-executar-o-projeto">Baixar e Executar</a>&nbsp; </h3>

---

<div align="center" ><img src="https://i.imgur.com/J0ceChO.gif" width="200"> </div>

• Link do vídeo completo sobre o projeto

---

:information_source: Sobre

O 2º projeto do bootcamp Ignite na trilha react-native, é o 1º projeto com o auxílio e configurações do Expo(Barer workflow), além disso é explicado mais sobre componentes do react-native como a Flatlist, responsividade, Async-Storage, Axios, Login Social com o OAuth(Google e IOS), e sobre navegação em aba e em pilha além de suas configurações

• Página Inicial:

<div align="center" > <img src="https://i.imgur.com/fZWajck.gif" width="200">__________________<img src="https://i.imgur.com/nT53FGX.jpg" width=250> </div>

• Autenticação com Google:

<div align="center" > <img src="https://i.imgur.com/cniojdz.gif" width="200">___________________________<img src="https://i.imgur.com/ZOB5Vvc.png" width=250> </div>

---

:interrobang: Motivo

Esse projeto tem por objetivo por em introduzir os conceitos básicos de React Native no desenvolvimento mobile no 2º capítulo do curso Ignite de React Native.

Assim, nesse projeto criamos a listagem geral de gastos e faturamentos, além do cadastro e do gráfico sobre a rentabilidade do usuário utilizando os conceitos e tecnologias já citadas aqui envolvendo o React Native como o uso e configuração do Expo, Style Components, Flatlist, Contexto, hooks, autenticação, navegação e formulário e por fim armazenamento local por meio do Async Storage.

• Cadastro:

<div align="center" > <img src="https://i.imgur.com/J0ceChO.gif" width="200">______ <img src="https://i.imgur.com/Ii1HZU3.png" width=250>_______ <img src="https://i.imgur.com/BtZMS1T.gif" width=200> </div>

• Gráfico de gastos:

<div align="center" > <img src="https://i.imgur.com/Wkd1Ioy.gif" width="200">___________________________<img src="https://i.imgur.com/2GwXzzi.png" width=250> </div> ___

:art: Design

<h2 align="center">GoFinances - Figma</h2> <img src="https://i.imgur.com/JHJCXRe.png" width="870">

---

:seedling: Requisitos Mínimos

• Android Studio
• Async-Storage
• Celular(Opcional)
• Expo(desktop)
  • Expo Go(Mobile) opcional.
• JSON-Server
• Node.js
• React
• React-Native
• TypeScript
• Yarn(ou NPM)

---

:rocket: Principais Tecnologias Utilizadas

O projeto foi desenvolvido utilizando as seguintes tecnologias:

• Android Studio
• Async Storage
• Autenticação Expo
• Expo
• Javascript
• NodeJS
• React
• React-Native
• React Navigation
• TypeScript
• Victory-Native
• Yarn

---

:package: Como baixar e executar o projeto

• Clonar o projeto:

   git clone https://github.com/Aszurar/gofinances.git
  

• É necessário a instalação do yarn de acordo com seu sistema operacional, para isso veja como no site do Yarn
• Instalação das dependências:
  • Execute o comando abaixo dentro da pasta do projeto

    yarn
  

• É necessário a instalação do emulador Android Studios e das tecnologias requesitadas acima no:seedling: <a href="#seedling-requisitos-mínimos">Requisitos</a>
• Também é necessário a instalação/configuração de outras tecnologias, para isso siga os passos indicados nessa página de acordo com seu sistema operacional: Executando uma Aplicação React-Native emulando Windows/Linux/MacOS ou direto no dispositivo mobile Android/IOS
• É necessário a instalação do Expo
• Execução - Abra a pasta do projeto com alguma IDE(Vscode) ou simplesmente abra o terminal na pasta do projeto e execute o comando abaixo:

     expo start
  

• Abra o emulador ou conecte o celular(É necessário a instalação do Expo Go) e execute:

      a
  

• Lembrando que, caso seja executado pelo emulador, o ideal é sempre deixa-lo aberto antes de aplicar os comandos acima.

---

Desenvolvido por :star2: Lucas de Lima Martins de Souza.