React Native + Firebase solution for studying in RMIT Melbourne
The name suggests a free platform that packs all necessary information about studying and living in Melbourne into a package (thus the name "Melbourne backpack") and makes it available across all mobile devices. The app, designed by RMIT students who will be transferring to RMIT Melbourne, would be ideal for anybody looking for practical tips to help them research about this information.
This React Native + Firebase + Expo app contains a few key features that all apps backed by Fireabase support:
- Registration with E-mail & Password
- Login with E-mail and Password
- Handling persisted login credentials
- Navigating between screens (react-native-navigation)
- Writing to Firestore Database
- Reading from Firestore Database
- Creating Firestore indices (for performance)
- Uploading images to Storage
- Viewing personlized data for each user
- Messaging real-time with others in the Melbourne Backpack's chat forum
- Commenting and rating on the available student living
- Viewing online Sentiment Analysis internal rating system using reviews scraped from Google and the app user
- Viewing real-time data Victoria transportation
- Viewing shopping malls near CBD Melbourne
- Viewing yours and others' profile information
- Viewing recommended videos for starting a semester in RMIT Melbourne
- Filtering base on the content of interest
- Logout the system
Splash Screen | Onboarding Screen | SignIn Screen |
Personalization Screen: campus | Personalization Screen: subjects | Personalization Screen: further info |
Housing Screen: house details | Housing Screen: all review's options | Housing Screen: app reviews example |
Transportation Screen | Shopping Screen | Community Screen |
Profile Screen | Copy other's member uid Screen | Logout Screen |
Project Proposal | Final Report |
Figma for design system and prototypes on Behance |
Trello for collaboration tool that organizes our project into boards |
Academic Poster |
This React Native app may target iOS 11.0 and Android 5.0 (API 21) or newer. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS. We used Expo to test in the development environment.
We used WebStorm as our IDE, but an IDE is not needed if you only want to run the project.
Please ensure that you have node v16.13.1
, expo-cli 5.3.0
installed on your system. No other software or libraries are required.
- Step 1:
git clone https://github.com/Melbourne-Backpack/melbourne-backpack.git
OR Download ZIP & Unzip .zip file to a location of your choice. - Step 2: Use the command line to navigate to the folder mentioned above, E.g.
cd melbourne-backpack/
- Step 3: Run
npm install
: Install NPM packages with your package manager of choice - Step 4: Start the app, and run
npm start
from the project's root. - Step 5: Download the Expo app on your phone
- Step 6: Scan the QR code in the terminal and open the app on Expo
The .csv
and .json
database files that we gave you for Firebase
reference can be found in https://github.com/Melbourne-Backpack/datasets.git
in our organization
Tran Ngoc Anh Thu Project Manager, Designer, Full Stack Developer |
Doan Yen Nhi Full Stack Developer, Github Administrator |
Du Duc Manh Full Stack Developer, Meeting Minutes Taker |
Nguyen Hoang Linh Full Stack Developer, Github Administrator |
βββ __tests__ // test for components, services etc. inside of related folder.
β βββ App-test.js
|
βββ node_modules
|
βββ .gitignore // Used by git to determine what files to ignore, when committing changes.
|
βββ assets // store all images, vectors, fonts, etc.
β βββ images
|
βββ reports // contains project's documentations
β βββ Project Proposal.pdf
|
βββ src // main container of all the code inside your application.
β βββ api
β β βββ getData
β β βββ handleData.js
β β βββ handleData.js
| |
β βββ components // store any common component that you use through the app (e.g: alert modal)
β β βββ atoms
β β βββ molecules
β β βββ organisms
| |
β βββ config // Firebase configuration
β β βββ firebase.js
| |
β βββ navigations // store the navigators
β β βββ AppNavigator.js // RootNavigator
β β βββ content-navigator.js // AppNavigator
| |
β βββ screens
β β βββ login
β β β βββ index.js // LoginScreen
β β βββ home
β β β βββ index.js // HomeScreen
β β βββ about
β β β βββ index.js // AboutScreen
| |
β βββ styles
β β βββ index.js // Export all
β β βββ colors.js // Colors pallet
β β βββ spacing.js // Paddings, margins and scale
β β βββ typography.js // Fonts types and sizes
| |
β βββ utils // store any common function such as calcutate distance, different date and string formatting functions
β βββ index.js
|
βββ App.js // Main component that starts the whole app.
βββ app.json
βββ babel.config.js
βββ package.json
βββ README.md // The first page the user will see when visiting the repo.
Modify the environment variables files in root folder .env
file
This mobile application is MIT licensed, as found in the LICENSE file.
React Native documentation is Creative Commons licensed, as found in the LICENSE-docs file.