{"id":19153425,"url":"https://github.com/alexandrecpedro/rocket-help","last_synced_at":"2026-04-10T00:07:25.283Z","repository":{"id":46272322,"uuid":"515282987","full_name":"alexandrecpedro/Rocket-Help","owner":"alexandrecpedro","description":"Rocket Help - an user request support mobile app","archived":false,"fork":false,"pushed_at":"2022-07-20T18:25:32.000Z","size":1167,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-03T19:16:45.243Z","etag":null,"topics":["android","expo","figma","firebase","ignite-rocketseat","ignitelab","ios","native-base","phosphoricons","react","react-native","reactnative","reactnavigation","rocketseat","typescript","vscode"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexandrecpedro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-18T17:39:11.000Z","updated_at":"2023-03-04T01:45:55.000Z","dependencies_parsed_at":"2022-08-31T00:22:29.001Z","dependency_job_id":null,"html_url":"https://github.com/alexandrecpedro/Rocket-Help","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2FRocket-Help","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2FRocket-Help/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2FRocket-Help/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandrecpedro%2FRocket-Help/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexandrecpedro","download_url":"https://codeload.github.com/alexandrecpedro/Rocket-Help/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240236344,"owners_count":19769581,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","expo","figma","firebase","ignite-rocketseat","ignitelab","ios","native-base","phosphoricons","react","react-native","reactnative","reactnavigation","rocketseat","typescript","vscode"],"created_at":"2024-11-09T08:23:04.309Z","updated_at":"2025-12-30T20:05:11.373Z","avatar_url":"https://github.com/alexandrecpedro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align = \"center\"\u003e\n    \u003ch1\u003e Rocket Help \u003c/h1\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv align = 'center' justify-content = 'space-around' \u003e\n   \u003cimg src= './src/assets/project/logo/logo_primary.svg' alt = 'Rocket Help' \u003e\n\u003c/div\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003ch3 align = \"center\"\u003e\n  IGNITE LAB 3 - REACT NATIVE\n\u003c/h3\u003e\n\n| | | | |\n|:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:|\n|\u003cimg width=\"1604\" alt=\"Login\" src=\"./src/assets/project/screens/project-1.1.png\"\u003e |\u003cimg width=\"1604\" alt=\"Home - no calls\" src=\"./src/assets/project/screens/project-1.2.png\"\u003e | \u003cimg width=\"1604\" alt=\"Home - calls in progress\" src=\"./src/assets/project/screens/project-1.3.png\"\u003e|\u003cimg width=\"1604\" alt=\"Home - completed calls\" src=\"./src/assets/project/screens/project-1.4.png\"\u003e|\u003cbr\u003e\n|\u003cimg width=\"1604\" alt=\"New request\" src=\"./src/assets/project/screens/project-1.5.png\"\u003e|\u003cimg width=\"1604\" alt=\"Request in progress\" src=\"./src/assets/project/screens/project-1.6.png\"\u003e|\u003cimg width=\"1604\" alt=\"Completed request\" src=\"./src/assets/project/screens/project-1.7.png\"\u003e|\n\u003cbr\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"#target\"\u003eTarget\u003c/a\u003e •\n \u003ca href=\"#technologies\"\u003eTechnologies\u003c/a\u003e •\n \u003ca href=\"#route\"\u003eRoute\u003c/a\u003e \n\u003c/p\u003e\n\u003cbr\u003e\n\n\u003cdiv id=\"target\"\u003e\n\u003ch2\u003e 💡 Target \u003c/h2\u003e\nBuild an user request support mobile app for Android and iOS (Hybrid) using React Native\n\u003c/div\u003e\n\u003cbr\u003e\n\n\u003cdiv id=\"technologies\"\u003e\n\u003ch2\u003e 🛠 Technologies \u003c/h2\u003e\nThe main technologies that has been used in this project were:\n \n |                  Type                  |                Tools                |                                 References                                  |\n| :------------------------------------: | :---------------------------------: | :-------------------------------------------------------------------------: |\n|       Programming Language (App)       |                REACT NATIVE                 |              https://reactnative.dev/                           | \n|       Programming Language (App)       |                TYPESCRIPT                   |              https://www.typescriptlang.org/                    | \n|       Open source platform             |           EXPO BARE WORKFLOW                |              https://expo.dev/                                  | \n|                   IDE                  |        VISUAL STUDIO CODE (VS CODE)         |              https://code.visualstudio.com/                     |\n|        Design Interface Tool           |         FIGMA  (Prototype - UX/UI)          |              https://www.figma.com/                             |\n|   UI Utility-first Component Library   |                  NATIVE BASE                |              https://nativebase.io/                             |\n|              Graphic components        |                 PHOSPHOR ICONS              |              https://phosphoricons.com/                         |\n|       Navigation between pages         |              REACT NAVIGATION               |              https://reactnavigation.org/                       |\n|             Database                   |                    FIREBASE                 |              https://console.firebase.google.com/               |\n| React Native support Library for Firebase |             REACT NATIVE FIREBASE           |              https://rnfirebase.io/                             |\n\n\u003cbr\u003e\n\n\u003cdiv align = 'center'\u003e\n  \u003ch3\u003eDatabase\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eIDE\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vscode/vscode-original.svg\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eUX/UI\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg\" /\u003e\n  \u003cimg height =' 100px ' src=\"./src/assets/project/logo/phosphor-icons_logo.png\"/\u003e\n  \u003cimg height =' 100px ' src=\"./src/assets/project/logo/nativebase_logo.svg\" /\u003e\n  \u003cbr\u003e\n  \u003ch3\u003eFrontend\u003c/h3\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg\" /\u003e\n  \u003cimg height =' 100px ' src=\"https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg\" /\u003e\n  \u003cimg height =' 100px ' src=\"./src/assets/project/logo/react_navigation.svg\" /\u003e\n  \u003cimg height =' 100px ' src=\"./src/assets/project/logo/expo.png\" /\u003e\n  \u003cbr\u003e\n\u003c/div\u003e\n\n\u003cdiv id=\"route\"\u003e\n\u003ch2\u003e 🔎 Route \u003c/h2\u003e\n\n\u003col\u003e\n    \u003cli\u003ePart 1 - The beginning of the React Native specialization\n      \u003cul\u003e\n        \u003cli\u003eBuild the project prototype: https://www.figma.com/file/15HnazfsI1NFV13fIXy1wu/React-Native-Insider-5?node-id=0%3A1\u003c/li\u003e\n        \u003cli\u003eInstall VS Code (IDE)\u003c/li\u003e\n        \u003cli\u003eInstall \"R Component\" extension at VS Code\u003c/li\u003e\n        \u003cli\u003eInstall Expo CLI: npm install --global expo-cli\u003c/li\u003e\n        \u003cli\u003eCreate a new project: expo init my-app (bare workflow)\u003c/li\u003e\n        \u003cli\u003eNavigate to project directory: cd my-app\u003c/li\u003e\n        \u003cli\u003eOpen the project on VS Code: code .\u003c/li\u003e\n        \u003cli\u003eChange App.js to App.tsx\u003c/li\u003e\n        \u003cli\u003eCreate and set tsconfig.json at root\u003c/li\u003e\n        \u003cli\u003eInstall Native Base on project:\n          \u003cul\u003e\n            \u003cli\u003eyarn add native-base\u003c/li\u003e\n            \u003cli\u003eexpo install react-native-svg \u003c/li\u003e\n            \u003cli\u003eexpo install react-native-safe-area-context\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003eInstall React Navigation on project:\n          \u003cul\u003e\n            \u003cli\u003eexpo install @react-navigation/native\u003c/li\u003e\n            \u003cli\u003eexpo install react-native-screens\u003c/li\u003e\n            \u003cli\u003eexpo install react-native-safe-area-context\u003c/li\u003e\n            \u003cli\u003eexpo install @react-navigation/native-stack\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003eStart the development server: expo start\u003c/li\u003e\n        \u003cli\u003eConfigure the Expo Go on a mobile device or use an emulator\u003c/li\u003e\n        \u003cli\u003eOpen the app on a mobile device:\n          \u003cul\u003e\n            \u003cli\u003eOn your iPhone or iPad, open the default Apple \"Camera\" app and scan the QR code you see in the terminal\u003c/li\u003e\n            \u003cli\u003eOn 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.\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cbr\u003e\n    \u003cli\u003ePart 2 - Visual design project \u0026 Navigation\n      \u003cul\u003e\n        \u003cli\u003eSet project assets and styles\u003c/li\u003e\n        \u003cli\u003eInstall fonts on project: expo install expo-font @expo-google-fonts/roboto\u003c/li\u003e\n        \u003cli\u003eCreate screens: \n          \u003cul\u003e\n            \u003cli\u003eSignin.tsx\u003c/li\u003e\n            \u003cli\u003eHome.tsx\u003c/li\u003e\n            \u003cli\u003eRegister.tsx\u003c/li\u003e\n            \u003cli\u003eDetails.tsx\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003eCreate new components: \n          \u003cul\u003e\n            \u003cli\u003eLoading.tsx\u003c/li\u003e\n            \u003cli\u003eInput.tsx\u003c/li\u003e\n            \u003cli\u003eButton.tsx\u003c/li\u003e\n            \u003cli\u003eFilter.tsx\u003c/li\u003e\n            \u003cli\u003eOrder.tsx\u003c/li\u003e\n            \u003cli\u003eHeader.tsx\u003c/li\u003e\n            \u003cli\u003eCardDetails.tsx\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003eCreate DTOs (Data Transfer Object): \n          \u003cul\u003e\n            \u003cli\u003eOrderFirestoreDTO.ts\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003eProcedure to project recognize svg files:\n          \u003cul\u003e\n            \u003cli\u003eInstall React-Native-SVG-Transformer library: yarn add --dev react-native-svg-transformer\u003c/li\u003e\n            \u003cli\u003eSet metro.config.js\u003c/li\u003e\n            \u003cli\u003eSet svg.d.ts file: ./src/@types/svg.d.ts\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003eInstall Phosphor React Native Icons: yarn add phosphor-react-native\u003c/li\u003e\n        \u003cli\u003eAdding Phosphor Icons to SignIn screen\u003c/li\u003e\n        \u003cli\u003eAdd components at Home screen: ./src/screens/Home.tsx\u003c/li\u003e\n        \u003cli\u003eAdd Header, Input and Button components at Register screen: ./src/screens/Register.tsx\u003c/li\u003e\n        \u003cli\u003eAdd Header component at Details screen: ./src/screens/Details.tsx\u003c/li\u003e\n        \u003cli\u003eCreate routes:\n          \u003cul\u003e\n            \u003cli\u003eAppRoutes: ./src/routes/app.routes.tsx\u003c/li\u003e\n            \u003cli\u003eRoutes: ./src/routes/index.tsx\u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003eSet navigation types: ./src/@types/navigation.d.ts\u003c/li\u003e\n        \u003cli\u003eImplement navigation function at Home screen: ./src/screens/Home.tsx\u003c/li\u003e\n        \u003cli\u003eImplement return button at Header component: ./src/components/Header.tsx\u003c/li\u003e\n        \u003cli\u003eApply useRoute hook at Details screen: ./src/screens/Details.tsx\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003cbr\u003e\n    \u003cli\u003ePart 3 - Integration with Firebase\u003c/li\u003e\n      \u003cul\u003e  \n        \u003cli\u003eWe still can't run Firebase in Expo Go development environment. Set the environment:\u003cbr\u003e\n            https://react-native.rocketseat.dev/\u003c/li\u003e\n        \u003cli\u003eCreate a Firebase account, if you don't have one\u003c/li\u003e\n        \u003cli\u003eCreate a project on Firebase\u003c/li\u003e\n        \u003cli\u003eSet the Firebase Authentication, enabling only \"E-mail/password\"\u003c/li\u003e\n        \u003cli\u003eAdd an user: eg. email = alex@email.com | password = 123456\u003c/li\u003e\n        \u003cli\u003eSet the Firebase FirestoreDatabase, enabling on \"Start at test mode\"\u003c/li\u003e\n        \u003cli\u003eConnecting Firebase with our application\n          \u003cul\u003e \n            \u003cli\u003eSet React Native Firebase library (http://rnfirebase.io)\n              \u003cul\u003e\n                \u003cli\u003eInstall \u0026 setup the app module: yarn add @react-native-firebase/app\u003c/li\u003e\n                \u003cli\u003eInstall settings with Expo at app.json (plugin)\u003c/li\u003e\n                \u003cli\u003eAdd Firebase config (Google services) files for iOS and Android at project root\u003c/li\u003e\n                \u003cli\u003ePrebuild project: expo prebuild\u003c/li\u003e\n                \u003cli\u003eInstall the firestore module: yarn add @react-native-firebase/firestore\u003c/li\u003e\n                \u003cli\u003eInstall the authentication module: yarn add @react-native-firebase/auth\u003c/li\u003e\n              \u003c/ul\u003e\n            \u003c/li\u003e\n          \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003eImplement Auth Service at SignIn screen: ./src/screens/Signin.tsx\u003c/li\u003e\n        \u003cli\u003eStart application (emulator): expo run:android\u003c/li\u003e\n        \u003cli\u003eReact Hooks usage at Routes: ./src/routes/index.tsx\u003c/li\u003e\n        \u003cli\u003eFormat date from Firestore database: ./src/utils/firestoreDateFormat.ts\u003c/li\u003e\n        \u003cli\u003eImplement Logout, Auth Service and Firestore at Home screen: ./src/screens/Home.tsx\u003c/li\u003e\n        \u003cli\u003eImplement React Hooks, navigation and Firestore at Register screen: ./src/screens/Register.tsx\u003c/li\u003e\n        \u003cli\u003eSet OrderFirestoreDTO (data delivered by Firestore): ./src/DTOs/OrderFirestoreDTO.ts\u003c/li\u003e\n        \u003cli\u003eImplement React Hooks, navigation, types and Firestore at Details screen: ./src/screens/Details.tsx\u003c/li\u003e\n        \u003cli\u003eSetting CardDetails component: ./src/components/CardDetails.tsx\u003c/li\u003e\n        \u003cli\u003eImplement CardDetails at Details screen: ./src/screens/Details.tsx\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/li\u003e\n\u003c/ol\u003e\n\u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrecpedro%2Frocket-help","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandrecpedro%2Frocket-help","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandrecpedro%2Frocket-help/lists"}