https://github.com/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.
https://github.com/wpdas/nubank-mobile-app
Last synced: about 1 year ago
JSON representation
Mobile application developed using React Native and TypeScript. This application is based on the Nubank user interface (Brazilian company) and was made from scratch.
- Host: GitHub
- URL: https://github.com/wpdas/nubank-mobile-app
- Owner: wpdas
- License: mit
- Created: 2020-04-15T20:19:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-05T20:52:52.000Z (over 3 years ago)
- Last Synced: 2025-04-09T05:33:23.062Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 3.55 MB
- Stars: 4
- Watchers: 2
- Forks: 2
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Nubank Mobile App (React Native) - Replica
[Content in Portuguese](https://github.com/Wpdas/nubank-mobile-app/blob/master/README_pt_BR.md)
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
### :art: Demo GIF
[Watch the vídeo](https://drive.google.com/open?id=1F5cHaX9DcOC8FvKBc4SjbE8RLZaMe550)
## :interrobang: Why
My interest in developing this project started after seeing the wonderful work of [@ildaneta](https://github.com/ildaneta) through LinkedIn and I also took advantage of the period at home during the Covid-19 pandemic to put certain projects into practice.
## :mortar_board: How to use
After cloning the repository, run the following commands:
```bash
# Updates the required packages and dependencies:
yarn
```
```bash
# Runs the project
yarn start
```
```bash
# Runs the app on an Android Device / Emulator
yarn android
```
```bash
# Runs the app on an iOS simulator
yarn ios
```
## :green_book: Good to know
The bases for the TypeScript import function are configured in the `tsconfig.json` and`babel.config.js` files:
```json
"@components/*": "src/components/*",
"@assets/*": "src/assets/*",
"@theme": "src/theme/index.tsx",
"@locale": "src/locale/index.tsx"
```
## :mag: Helpful content
- [Nubank Design material - Andrea & André](https://www.behance.net/gallery/42918779/Nubank)
- [Nunito Sans - Google Fonts](https://fonts.google.com/specimen/Nunito+Sans)
- [Setup guide - Rocketseat](https://react-native.rocketseat.dev/)
- [Initial Nubank UI - Rocketseat](https://www.youtube.com/watch?v=DDm0M_rZLJo&t=1s)
- [General React Native content - The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)
- [Internationalization using i18n - Isac](https://medium.com/reactbrasil/internacionaliza%C3%A7%C3%A3o-em-react-native-77fb1a56f8e9)
- [Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [UI - Advanced Style Components](https://styled-components.com/docs/advanced)
- [Icons - Simple Line Icons](https://simplelineicons.github.io/)
- [Setup custon fonts - Tamas Szikszai](https://medium.com/better-programming/using-custom-fonts-in-react-native-2019-289099609837)
## :bowtie: Author
[Wenderson Pires - Linkedin](https://www.linkedin.com/in/wenderson-pires-silva/)