wpdas / nubank-mobile-app

Mobile application developed using React Native and TypeScript. This application is based on the Nubank user interface (Brazilian company) and was made from scratch.

Nubank Mobile App (React Native) - Replica

Content in Portuguese

Mobile app developed using React Native. This application is based on the Nubank user interface (Brazilian company) and was made from scratch.

Project developed using TypeScript and some packages for implementing features in the app like i18n (internationalization), styled-components. I'm also using tools for code quality, build and compiler, they are tslint, prettier, tslint-react, babel and others. Dynamic Context APIs was used to create Theme and Locate Provider components (internationalization).

Native resources: Animation, Easing, StyleSheet, Gesture Handler, Swiper, Navigation, QRCode, Vector Icons, Svg, and others;
React APIs: createContext, useContext, useState;
Third-party: styled-components and i18n.
Font: NunitoSans

🎨 Demo GIF

Watch the vídeo

⁉️ Why

My interest in developing this project started after seeing the wonderful work of @ildaneta through LinkedIn and I also took advantage of the period at home during the Covid-19 pandemic to put certain projects into practice.

🎓 How to use

After cloning the repository, run the following commands:

# Updates the required packages and dependencies:
yarn

# Runs the project
yarn start

# Runs the app on an Android Device / Emulator
yarn android

# Runs the app on an iOS simulator
yarn ios

📗 Good to know

The bases for the TypeScript import function are configured in the tsconfig.json andbabel.config.js files:

"@components/*": "src/components/*",
"@assets/*": "src/assets/*",
"@theme": "src/theme/index.tsx",
"@locale": "src/locale/index.tsx"

🔍 Helpful content

• Nubank Design material - Andrea & André
• Nunito Sans - Google Fonts
• Setup guide - Rocketseat
• Initial Nubank UI - Rocketseat
• General React Native content - The Net Ninja
• Internationalization using i18n - Isac
• Flexbox - CSS Tricks
• UI - Advanced Style Components
• Icons - Simple Line Icons
• Setup custon fonts - Tamas Szikszai

Author

Wenderson Pires - Linkedin