Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexandrecpedro/rocket-help
Rocket Help - an user request support mobile app
https://github.com/alexandrecpedro/rocket-help
android expo figma firebase ignite-rocketseat ignitelab ios native-base phosphoricons react react-native reactnative reactnavigation rocketseat typescript vscode
Last synced: 10 days ago
JSON representation
Rocket Help - an user request support mobile app
- Host: GitHub
- URL: https://github.com/alexandrecpedro/rocket-help
- Owner: alexandrecpedro
- Created: 2022-07-18T17:39:11.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-07-20T18:25:32.000Z (over 2 years ago)
- Last Synced: 2023-03-05T12:39:19.546Z (over 1 year ago)
- Topics: android, expo, figma, firebase, ignite-rocketseat, ignitelab, ios, native-base, phosphoricons, react, react-native, reactnative, reactnavigation, rocketseat, typescript, vscode
- Language: TypeScript
- Homepage:
- Size: 1.11 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Rocket Help
IGNITE LAB 3 - REACT NATIVE
| | | | |
|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|
|
|
| 
|
|
|
|
|
|
Target •
Technologies •
Route
💡 Target
Build an user request support mobile app for Android and iOS (Hybrid) using React Native
🛠 Technologies
The main technologies that has been used in this project were:
| Type | Tools | References |
| :------------------------------------: | :---------------------------------: | :-------------------------------------------------------------------------: |
| Programming Language (App) | REACT NATIVE | https://reactnative.dev/ |
| Programming Language (App) | TYPESCRIPT | https://www.typescriptlang.org/ |
| Open source platform | EXPO BARE WORKFLOW | https://expo.dev/ |
| IDE | VISUAL STUDIO CODE (VS CODE) | https://code.visualstudio.com/ |
| Design Interface Tool | FIGMA (Prototype - UX/UI) | https://www.figma.com/ |
| UI Utility-first Component Library | NATIVE BASE | https://nativebase.io/ |
| Graphic components | PHOSPHOR ICONS | https://phosphoricons.com/ |
| Navigation between pages | REACT NAVIGATION | https://reactnavigation.org/ |
| Database | FIREBASE | https://console.firebase.google.com/ |
| React Native support Library for Firebase | REACT NATIVE FIREBASE | https://rnfirebase.io/ |
Database
IDE
UX/UI
Frontend
🔎 Route
- Part 1 - The beginning of the React Native specialization
- Build the project prototype: https://www.figma.com/file/15HnazfsI1NFV13fIXy1wu/React-Native-Insider-5?node-id=0%3A1
- Install VS Code (IDE)
- Install "R Component" extension at VS Code
- Install Expo CLI: npm install --global expo-cli
- Create a new project: expo init my-app (bare workflow)
- Navigate to project directory: cd my-app
- Open the project on VS Code: code .
- Change App.js to App.tsx
- Create and set tsconfig.json at root
- Install Native Base on project:
- yarn add native-base
- expo install react-native-svg
- expo install react-native-safe-area-context
- Install React Navigation on project:
- expo install @react-navigation/native
- expo install react-native-screens
- expo install react-native-safe-area-context
- expo install @react-navigation/native-stack
- Start the development server: expo start
- Configure the Expo Go on a mobile device or use an emulator
- Open the app on a mobile device:
- On your iPhone or iPad, open the default Apple "Camera" app and scan the QR code you see in the terminal
- On your Android device, press "Scan QR Code" on the "Projects" tab of the Expo Go app and scan the QR code you see in the terminal.
- Part 2 - Visual design project & Navigation
- Set project assets and styles
- Install fonts on project: expo install expo-font @expo-google-fonts/roboto
- Create screens:
- Signin.tsx
- Home.tsx
- Register.tsx
- Details.tsx
- Create new components:
- Loading.tsx
- Input.tsx
- Button.tsx
- Filter.tsx
- Order.tsx
- Header.tsx
- CardDetails.tsx
- Create DTOs (Data Transfer Object):
- OrderFirestoreDTO.ts
- Procedure to project recognize svg files:
- Install React-Native-SVG-Transformer library: yarn add --dev react-native-svg-transformer
- Set metro.config.js
- Set svg.d.ts file: ./src/@types/svg.d.ts
- Install Phosphor React Native Icons: yarn add phosphor-react-native
- Adding Phosphor Icons to SignIn screen
- Add components at Home screen: ./src/screens/Home.tsx
- Add Header, Input and Button components at Register screen: ./src/screens/Register.tsx
- Add Header component at Details screen: ./src/screens/Details.tsx
- Create routes:
- AppRoutes: ./src/routes/app.routes.tsx
- Routes: ./src/routes/index.tsx
- Set navigation types: ./src/@types/navigation.d.ts
- Implement navigation function at Home screen: ./src/screens/Home.tsx
- Implement return button at Header component: ./src/components/Header.tsx
- Apply useRoute hook at Details screen: ./src/screens/Details.tsx
- Part 3 - Integration with Firebase
- We still can't run Firebase in Expo Go development environment. Set the environment:
https://react-native.rocketseat.dev/
- Create a Firebase account, if you don't have one
- Create a project on Firebase
- Set the Firebase Authentication, enabling only "E-mail/password"
- Add an user: eg. email = [email protected] | password = 123456
- Set the Firebase FirestoreDatabase, enabling on "Start at test mode"
- Connecting Firebase with our application
- Set React Native Firebase library (http://rnfirebase.io)
- Install & setup the app module: yarn add @react-native-firebase/app
- Install settings with Expo at app.json (plugin)
- Add Firebase config (Google services) files for iOS and Android at project root
- Prebuild project: expo prebuild
- Install the firestore module: yarn add @react-native-firebase/firestore
- Install the authentication module: yarn add @react-native-firebase/auth
- Implement Auth Service at SignIn screen: ./src/screens/Signin.tsx
- Start application (emulator): expo run:android
- React Hooks usage at Routes: ./src/routes/index.tsx
- Format date from Firestore database: ./src/utils/firestoreDateFormat.ts
- Implement Logout, Auth Service and Firestore at Home screen: ./src/screens/Home.tsx
- Implement React Hooks, navigation and Firestore at Register screen: ./src/screens/Register.tsx
- Set OrderFirestoreDTO (data delivered by Firestore): ./src/DTOs/OrderFirestoreDTO.ts
- Implement React Hooks, navigation, types and Firestore at Details screen: ./src/screens/Details.tsx
- Setting CardDetails component: ./src/components/CardDetails.tsx
- Implement CardDetails at Details screen: ./src/screens/Details.tsx