Melbourne Backpack

React Native + Firebase solution for studying in RMIT Melbourne

Demo on YouTube

Overview

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.

📌Features

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

📱 Basic Screen shots

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

---

📖 Documentation

Project Proposal	Final Report

Figma

Figma for design system and prototypes on Behance

Trello

Trello for collaboration tool that organizes our project into boards

Academic Poster

Academic Poster

---

📋 Requirements

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.

🎉Local Environment Setup

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

🧑‍🤝‍🧑Authors👭

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

Folder Structure & Architecture

├── __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

📄 License

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.