SquadFinder

Introduction

Welcome to SquadFinder! This is an app made for video gamers who want to join up with other gamers to play the games that they love. Upon starting up the app, the user is prompted to log in to a profile. Once selected, the user can view their personalized list of video games, start a search for new video games to add to their collection, and invite other gamers to a 'Squad' event. Once a Squad has been created, it will appear in the users' 'My Squads' section, where they can view all of their upcoming Squads, who has been invited to each Squad, and the date and time of each event. Our application gets all of our data from our back-end API, which sources the video game data from RAWG API. RAWG is a video game database that has over 800,000 video games, so our users will be able to find whatever games they like to play, on whichever platform they prefer.

This application is our team's final Capstone Project for Turing School of Software and Design, and was built in 2 weeks by a 7 person team made up of 3 front-end students and 4 back end-students. This is the repo for the front-end team, and this is a link to the back-end repo.

Setup

This application needs to be run on an iOS simulator, Android emulator, or with Expo Go on your phone.

The iOS simulator requires Xcode. Xcode can only be run on macOS.

iOS Simulator Setup :

• Download Xcode from the App Store
• Install application

Android Emulator Setup:

• Download Android Studio
• Install application
• Open application and navigate to "More Actions"
• Open "Virtual Device Manager"
• Press "Create device" button
• Choose a device that has the "Play Store" and press "Next"
• Select a system image (operating system) and press "Next"
• Add any additional options on the "Android Virtual Device" screen
• Press "Finish"
• Press the play icon when you are ready to launch the device

Expo Go Setup:

• Download Expo Go from ether the App Store or Google Play

Cloning the Repo and Launching the Application

• Clone down the repository to your local machine
  • Run git clone [email protected]:Squadfinder/frontend.git in your terminal
  • Run cd frontend in your terminal to navigate into the repository
  • Run npm install to install required npm packages
  • Run npm start to start your local server

Running the Application on iOS:

• Press i on your keyboard while in the terminal
• Xcode will launch a iOS simulator

Running the Application on Android:

• Go to the "Virtual Device Manager" in Android Studio
• Press the play icon on your chosen phone
• Once the phone has loaded, return to your terminal
• Press a on the keyboard while in the terminal

Running the Application with Expo Go:

• Using your phone's camera, scan the QR code from the terminal

Application in Action

• User can select a profile and visit the homescreen.

• User can remove games from their favorited games.

• User can search for specific games.

• User can add games to a list of their favorites.

• User can form a squad by first choosing what game they want to squad-up to and whether they are playing casually or competitively. Choosing a game determines the possible users you can invite to squad-up with. If a user has the chosen game in their favorites list, they can be invited to the squad-up event.

• Then the User chooses a date and time for the squad-up event.

• Then the User can invite a maximum of 3 other users to the squad event. Once a user has been invited to a squad event, that event appears in each squad members "MySquads" section. If a user chooses, they can tap the "Not Going" button and end their association with that squad-up event.

Technologies

• React Native
• Jest Native
• React Native Testing Library
• Expo
• VSCode
• CircleCI

Goals, Challenges, and Wins

Goals

• Learn and implement the use of React Native.
• Collaberate with a Back-End team to create a full-stack application

Challenges

• Since React Native mainly targets mobile platforms like Android and iOS, we did not have access to the traditional Dev Tools we would have used when developing a web-based application.
• E2E testing was not achievable due to time constraints when learning how to set up the testing environment with an iOS simulator / Android emulator.

Wins

• Learning Jest / Jest Native / React Native Testing Library to perform component testing. Finding testing documentation that fit with our tech stack and time frame was a challenge. Overcoming that challenge was a highpoint.

Possible Future Extensions

• We would like to add in authentication to the login screen so that users can use a password to log in to their profile, and each user would have a truly unique and customizable accout for the app.
• In addition to the password protected profiles, we would add a profile creation form so that new users would be able to set up an account and a profile, and existing users could edit their information such as 'Gamertag'/name and their preferred gaming platform.

Sources

• React Native Docs
• Expo Docs
• MDN
• YouTube
• StackOverflow
• W3Schools

Contributors

• Anna Spitz
• Tom Fettig
• Nick Liggett

Project Specs

• The project specifications and rubric can be found here.