Bem-vindo ao meu portfólio! Aqui, apresento um projeto desafiador e empolgante que desenvolvi: o clone da tela inicial do aplicativo Nubank usando React Native e Expo. Este projeto demonstra meu aprendizado em desenvolvimento mobile, atenção aos detalhes e capacidade de replicar interfaces de usuário de alta qualidade.
O objetivo deste projeto foi recriar a tela inicial do aplicativo Nubank, capturando seu design moderno e funcionalidade. A aplicação foi desenvolvida utilizando React Native, uma poderosa biblioteca JavaScript para construção de interfaces móveis, juntamente com Expo, uma plataforma para desenvolvimento rápido de aplicativos nativos.
- Interface de Usuário Atraente: Uma réplica fiel da tela inicial do Nubank, com um design limpo e moderno.
- Componentes Personalizados: Criação de componentes reutilizáveis para garantir a consistência da interface.
- Responsividade: Adaptação perfeita a diferentes tamanhos de tela e dispositivos.
- Desempenho Otimizado: Uso eficiente de recursos para garantir uma experiência de usuário fluida.
- React Native: Biblioteca JavaScript para construção de interfaces móveis.
- Expo: Plataforma que facilita o desenvolvimento, a construção e a implantação de aplicativos nativos.
- JavaScript ES6: Sintaxe moderna do JavaScript para um código mais claro e conciso.
- CSS-in-JS: Estilização de componentes usando técnicas modernas.
A estrutura do projeto foi organizada de forma a garantir escalabilidade e manutenção fácil. A seguir, a estrutura de pastas principal:
/
├── assets/ # Imagens e ícones utilizados no projeto
├── src/ # Componentes reutilizáveis da interface
├── screens/ # Telas principais da aplicação
├── App.js # Arquivo principal da aplicação
├── README.md # Documentação do projeto
├── package.json # Dependências e scripts do projeto
Para executar o projeto localmente, siga as etapas abaixo:
- Clone o repositório:
git clone https://github.com/alvesmariadefatima/nubank-ui.git
cd nubank-ui- Instale as dependências:
npm install- Inicie o Expo:
npx expo start- Execute no dispositivo ou emulador:
- Escaneie o código QR com o aplicativo Expo Go (disponível na App Store e Google Play) para visualizar no seu dispositivo.
- Utilize um emulador Android ou iOS configurado em seu computador.
Aqui estão algumas capturas de tela do aplicativo Nubank:
Para mais informações sobre este projeto ou para discutir possíveis colaborações, entre em contato comigo:
- Nome: Maria de Fátima Nunes Alves
- Email: [email protected]
- GitHub: /alvesmariadefatima
- LinkedIn: Maria de Fátima Nunes Alves
2024 - Maria de Fátima Nunes Alves