Elite Finance é um aplicativo mobile desenvolvido em React Native com Expo para gerenciamento de finanças pessoais. Permite registrar receitas e despesas, visualizar saldo e histórico de transações.
- React Native
- Expo
- React Navigation
- Styled Components
- Axios
- AsyncStorage
- React Native Calendars
- Date-fns
- Node.js instalado
- Expo CLI instalado (
npm install -g expo-cli) - Um dispositivo móvel com Expo Go ou um emulador
- Clone o repositório:
git clone https://github.com/andreluizdasilvaa/EliteFinance
cd EliteFinance- Instale as dependências:
npm install- Inicie o projeto:
npx expo start- Login de usuário
- Cadastro de novo usuário
- Persistência de sessão
- Logout
- Registro de receitas
- Registro de despesas
- Visualização de saldo atual
- Histórico de transações
- Filtro por data
EliteFinance/
├── src/
│ ├── components/ # Componentes reutilizáveis
│ ├── contexts/ # Contextos da aplicação
│ ├── pages/ # Telas do aplicativo
│ ├── routes/ # Configuração de rotas
│ └── services/ # Configuração de serviços (API)
└── assets/ # Recursos estáticos
Gerencia o estado de autenticação do usuário através do Context API.
Controla a navegação do app com base no estado de autenticação:
- AuthRoutes: Rotas para usuários não autenticados
- AppRoutes: Rotas para usuários autenticados
- SignIn: Tela de login
- SignUp: Tela de cadastro
- Home: Dashboard principal
- New: Registro de transações
- Profile: Perfil do usuário
O aplicativo se comunica com um backend através do Axios. O código fonte do backend está disponível em: https://github.com/devfraga/backend-financas
Configuração base:
const api = axios.create({
baseURL: 'http://[seu Ip]:3333'
});Para executar o backend:
# Clone o repositório do backend
git clone https://github.com/devfraga/backend-financas
cd backend-financas
# Instale as dependências
npm install
# Configure as variáveis de ambiente
# Crie um arquivo .env seguindo o exemplo do .env.example
# Inicie o servidor
npm start/users- Cadastro de usuários/login- Autenticação/receives- Gerenciamento de transações/balance- Consulta de saldo
O projeto utiliza Styled Components para estilização. Principais características:
- Design responsivo
- Temas consistentes
- Componentes estilizados reutilizáveis
Utiliza AsyncStorage para:
- Persistência do token de autenticação
- Dados do usuário logado
Implementa dois tipos de navegação:
- Stack Navigation: Para fluxo de autenticação
- Drawer Navigation: Para usuários autenticados
- Autenticação via token JWT
- Proteção de rotas
- Validação de inputs
- Tratamento de erros
Gerenciamento de estado através de:
- Context API
- useState
- useEffect
- Custom Hooks
- Componentização
- Separação de responsabilidades
- Reutilização de código
- Consistência de código