SportsHub - A React Native mobile application that aims to connect athletes all across New Zealand

by React Native Example

SportsHub

SportsHub is a React Native mobile application that aims to connect athletes all across New Zealand with each other through sporting events.This application allows users to create, join, and view user-created teams and sporting events.SportsHub enables users to communicate with each other in a public chatroom with real-time updates.Finding sporting events is made easy, by allowing users to filter events by sports preferences.The SportsHub application also provides a built-in dark / light mode toggle for both day and night usage.

Implementation:

  • Uses Firebase authentication to store accounts.
  • Uses Firebase’s firestore database to store data.
  • The application is developed using Javascript with the React Native framework.
  • The project is initialized using Expo.

How to build the project:

  • Download the “Expo Go” app from the app store, available both on Android Google Play Store and the IOS App store.
  • Type expo start into the terminal to build the project. This will open metro bundler and will provide a QR code to scan using either the camera app (IOS) or the Expo Go app (Android).
  • (In the case that dependencies are missing from the project upon build, type npm ci to perform a clean installation of dependencies).

Authors:

  • Ivan Czar
  • Kyle Francis
  • Cameron Graham
  • Aashish Kulkarni
  • Kealen Pillay

Dependencies:

  • “@react-native-community/datetimepicker”: “4.0.0”
  • “@react-native-community/masked-view”: “^0.1.11”
  • “@react-navigation/bottom-tabs”: “^6.3.1”
  • “@react-navigation/core”: “^6.2.1”
  • “@react-navigation/native”: “^6.0.10”
  • “@react-navigation/native-stack”: “^6.6.2”
  • “@react-navigation/stack”: “^6.2.1”
  • “@types/react-native”: “^0.67.5”
  • “expo”: “~44.0.0”
  • “expo-blur”: “~11.0.0”
  • “expo-clipboard”: “~2.1.0”
  • “expo-image-picker”: “~12.0.1”
  • “expo-linear-gradient”: “~11.0.3”
  • “expo-status-bar”: “~1.2.0”
  • “firebase”: “^9.6.10”
  • “native-base”: “^3.4.3”
  • “react”: “17.0.1”
  • “react-dom”: “17.0.1”
  • “react-native”: “0.64.3”
  • “react-native-chip”: “^2.1.8”
  • “react-native-element-dropdown”: “^1.8.10”
  • “react-native-flash-message”: “^0.2.1”
  • “react-native-gesture-handler”: “~2.1.0”
  • “react-native-get-random-values”: “^1.7.2”
  • “react-native-gifted-chat”: “^0.16.3”
  • “react-native-google-maps-directions”: “^2.1.1”
  • “react-native-google-places-autocomplete”: “^2.4.1”
  • “react-native-paper”: “^4.12.0”
  • “react-native-platform-searchbar”: “^1.2.3”
  • “react-native-ratings”: “^8.1.0”
  • “react-native-reanimated”: “~2.3.1”
  • “react-native-safe-area-context”: “3.3.2”
  • “react-native-screens”: “~3.10.1”
  • “react-native-toast-message”: “^2.1.5”
  • “react-native-web”: “0.17.1”

Example Usage:

GitHub

View Github