About | Layout | Setup | Technologies | License

💻 About

Esta aplicação de nome DT Money consiste basicamente em um aplicativo mobile de gerenciamento de finanças pessoais, que permite o cadastro, edição e exclusão de transações, classificação de transações por categorias e tipos de transações (entrada ou saída), além de apresentação de um resumo das transações (entradas, saídas e total).

Os principais conhecimentos aplicados nesta aplicação foram:

• Consumo de APIs no React Native;
• Utilização do Context API para gerenciamento de estados globais na aplicação;
• Utilização do NativeWind(biblioteca de estilização baseada no TailwindCSS) para estilização de componentes;

🎨 Layout

Você pode visualizar o layout do projeto através desse link. É necessário ter conta no Figma para acessá-lo.

A seguir, veja uma demonstração das principais telas da aplicação:

Sign In

Sign Up

Home

New Transaction

Swipeable Delete

Delete Transaction

Swipeable Edit

Edit Transaction

Filter Transactions

⚙ Setup

📝 Requisites

Antes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:

• Git
• NodeJS
• NPM ou Yarn

Além disto é bom ter um editor para trabalhar com o código como VSCode

Cloning and Running

Passo a passo para clonar e executar a aplicação na sua máquina:

# Clone este repositório
$ git clone git@github.com:pabloxt14/dt-money-rn.git

# Configure a API back-end
$ cd dt-money-rn/api
$ npm install # Instala as dependências
$ npm run dev # Executa a API back-end

# Acesse a pasta do projeto mobile no terminal
$ cd ../mobile

# Instale as dependências
$ npm install

# Em src/shared/api/dt-money.ts, altere a BASE_URL para a sua API back-end (de acordo com o endereço da sua máquina)
# Exemplo: BASE_URL = "http://192.168.2.123:3001"

# Execute a aplicação em modo de build de desenvolvimento
$ npx expo prebuild # Faz o build da aplicação (necessário para o expo run:android e expo run:ios)
$ npx expo run:android # Para Android
$ npx expo run:ios # Para iOS

🛠 Technologies

As seguintes principais ferramentas foram usadas na construção do projeto:

• React Native
• Expo
• TypeScript
• Nativewind
• Expo Vector Icons
• Axios
• Bottom Sheet
• Async Storage
• React Hook Form
• Zod
• Date Fns

Para mais detalhes das dependências gerais da aplicação mobile veja o arquivo package.json

Para mais detalhes das dependências da API back-end veja o arquivo package.json

📝 License

Este projeto está sob a licença MIT. Consulte o arquivo LICENSE para mais informações

Feito com 💜 por Pablo Alan 👋🏽 Entre em contato!