danielynx / rocketseat-gobarber-mobile

GoBarber Mobile Application to manage barbershop scheduling, developed copying the instructor coding during the Rocketseat's GoStack Course.

GoBarber Mobile 💈

GoBarber Mobile Application to manage barbershop scheduling, developed copying the instructor coding during the Rocketseat's GoStack Course.

See the app on GooglePlay Store:

📱 Features

• Sign Up
• Password recovery
• Sign In
• Profile update
• Book appointment with hairdresser
• View appointments
• View app detail

🧰 Main languages and libraries

🚀 Publishing

AppCenter Platform is being used to deploy and deliver the app on Google Play. See the status:

⚙️ Setup

1. Environment: Install android emulator

2. Project

# clone this repo
$ git clone https://github.com/danielbackes/rocketseat-gobarber-mobile.git

# go to project folder
$ cd rocketseat-gobarber-mobile

# install dependencies
$ yarn install

# Config API address on src/services/api.ts

# Launching android emulator and install the app
$ yarn android

# Start React Native watcher
$ yarn start

📖 Main concepts that I learned in this project

• Use react navigation, recovery route params, create stack, tab and drawer navigation.
• Mobile application has Pixel Density concept, that need to each image 3 image with different resolution. The 1x image, named as .png; the 2x image, named @2x.png and the 3x image, named as @3x.png. The Image component, from react-native, will choose the image that will be used depending on the smartphone density.
• Use external fonts and how use icons.
• There is the react-native-iphone-x-helper library to help create styles that better fit to IOS. Also exists the Platform component, inside of react-native library, that help create styles to each mobile platform.
• React-native library has the KeyboardAvoidingView component to surround the components that should't be overlapping by the keyboard when it is shown.
• Known some attributes and functions of the TextInput: KeyboardType, AutoCorrect, AutoCapitalize, ReturnKeyType, OnSubmitEdition.
• UseImperativeHandle hook provides a way to change the ref object created by a father component inside a child component.
• Learn how use the react-native-image-picker library to create an image selector, that allow select an image from the gallery or take photo with the camera.
• Configure the jest library to execute test.
• Configure Icon and Splash image.
• Generate keystore and build Android App Bundle.
• Create an app on Google Play Store.
• Config the AppCenter Platform to deploy and deliver the app on Google Play.