LOMO In Person Gaming App

Logo created by Carla Delima ✨

LOMO In Person Gaming App

Keywords

Lomo, gaming, social media, social gaming, web app, geolocation, map, real-time, networking

Project Abstract

It facilitates in-person gaming in a real time environment using geolocation on a 2d map and networking between users and their posts. This service is made to address those who want to play games that have little to no online functionality and those who want to make friends beyond exclusively online environments.

When a user opens the app, they will see the interface of a 2d map in a top down perspective. A user can see a list of people that currently want to play games, and can choose to let others know they want to play something as well. When a user has a game they want to find people to play, they establish a “Beacon” that details how many people they want, what the game is, and a list of other factors that detail what those viewing the beacon can expect. Users can then apply to a beacon, with their name, supplies they can provide, and an optional attached message. Users will be able to browse beacons by category, distance, and by friends/groups only. Being friends with someone lets the user create more beacons tailored to them only, such as ones with more detailed and personal information. The user will also be able to adjust their preferences for their profile pertaining to games, controllers they have, and tags that tell others what they want to do.

High Level Requirement

Conceptual Design

This will be a progressive web application using React as a frontend with Laravel PHP serving as our backend. Our backend will use PostgreSQL for establishing and maintaining a database. Laravel provides many built-in functions that can be expanded on to meet the needs of the project in a more productive fashion.

Background

This app is similar to Niantic Campfire, which is a companion app developed for Niantic games meant to facilitate in-person meetups for games like Pokemon Go. While many features in Pokemon Go require players to be in close proximity, the mainstream gaming environment today is primarily online. In many cases, there are people that, as much as they want to make in-person friends and play in-person games, they have a hard time finding a good method to do so. The name LOMO is inspired by the term FOMO, which stands for “fear of missing out”. For those that want an in-person connection when gaming, Lomo is intended to be as non-invasive as possible, where only essential communication is used by the app to facilitate getting together.

Required Resources

A background/understanding of web app development would be required. For software, React is most likely to be used. The utilization of APIs will also be required, such as a comprehensive list of games that the app can update and utilize. Everyone will need proper workspaces such as laptop or desktop computers compatible with our software. Software requirements include Docker, Git and Github.

Setup Instructions

Instructions on how to setup a local instance of the app.

System requirements and prerequisites

Any of these operating systems should work for development:

Windows 10 and above, or any Windows version that can run WSL2 and Docker Desktop 4+
Ubuntu 22.04.3 LTS (Jammy Jellyfish) and above
MacOS 10.15.7 Catalina and above
Other OS's that can run Docker Desktop 4+

Your system MUST have these installed:

Docker Desktop 4+
node 18.18+ (should come installed with npm 8+)
npm 8+
yarn 1.22+
serve 14.2+ (or something similar)
git 2+
(For Windows machines only) WSL2 + Ubuntu 22.04.3 LTS (Jammy Jellyfish)
1. Install WSL2 with Ubuntu 22.04.2 LTS
2. Setup Docker Desktop with WSL2
3. If using Visual Studio Code, setup WSL2 with vscode and install the "WSL" extension into the WSL's version of vscode. (Also install the "Docker" extension if you want the Docker Desktop Dashboard inside vscode).

Setup local machine

For Windows users only, start up and use WSL2 as your development machine.

1. Git clone the repo

git clone https://github.com/Capstone-Projects-2023-Fall/project-lomo-in-person-gaming-app.git

2. Setup frontend

Go to the frontend/ folder
```
cd frontend
```
Install node dependencies:
```
npm install
```

Copy the .env.example file to .env

cp .env.example .env
# add secret keys to .env

3. Setup backend

Go to the backend/ folder
```
cd backend
```
Start the Docker Desktop application (Docker Desktop must be running the background to run any docker commands)
Install composer dependencies (composer is a package manager for php)
```
docker run --rm -u "$(id -u):$(id -g)" -v "$(pwd):/var/www/html" -w /var/www/html laravelsail/php82-composer:latest composer install --ignore-platform-reqs
```
- PROBLEM: If you run into problems installing dependencies, then first check to make sure that you're in the backend folder and on the correct branch
- PROBLEM: If you continue to have problems with docker, then install php82, php82-openssl, and composer onto your machine, and use your machine's composer to install the dependencies composer install --ignore-platform-reqs. IMPORTANT! Afterwards, only use the container's composer and php commands so that they'll make changes to the container and not to your machine! sail composer and sail php

Copy the .env.example file to .env

cp .env.example .env
# add secret keys to .env

Build the image and start the docker container (in detached mode)
```
./vendor/bin/sail up -d
```
Generate Laravel app key
```
./vendor/bin/sail artisan key:generate
```

Go to http://localhost in your browser to make sure that you can see the laravel welcome screen, and you're set!

PROBLEM: If you see a 500 server error and no detailed explanation of the error, then you forgot to copy the env file

PROBLEM: If you get permission errors for the storage/ folder. Run the commands below one line at a time, in order:

# enter the docker container command line as the root user
./vendor/bin/sail root-shell

# recursively change permissions on storage to allow read,write,execute for owner and group
chmod -R 777 storage/

# recursively change owner and group to root
chown -R root:root storage/

# setup the storage link between storage/ and public/storage folders
php artisan storage:link

# clear the cache and config
php artisan cache:clear
php artisan config:clear

# exit the docker container command line
exit

To stop the container: from your terminal, run ./vendor/bin/sail down

(Optional) Setup sail alias

Add this line to your ~/.bashrc or ~/.zshrc in your home directory:

alias sail="./vendor/bin/sail"

4. Setup docusaurus

Go to documentation/ folder
```
cd documentation
```
Install node dependencies:
```
yarn install
```

Run

Run the app

Start the backend server
```
cd backend
```
```
./vendor/bin/sail up -d
```
Start frontend server Use build files, otherwise development server can sometimes cause Beacon display issues.
```
cd ../frontend
```
```
npm run build
serve -s build
```
Go to https://localhost:3000 to see the app

Stop running the app

Stop backend
```
./vendor/bin/sail down
```
Stop the frontend server: enter Ctrl+C or Cmd-C into the terminal tab running the frontend server.

Run docusaurus

Go into the documentation/ folder and run:

cd documentation

yarn start-lomo

# or use the long form
# PROJECT_NAME=project-lomo-in-person-gaming-app ORG_NAME=Capstone-Projects-2023-Fall yarn start

Collaborators

_{Jonathan Altenburg}

_{Andy Olshanky}

_{Emma Pincus}

_{Ziyi Ke}

_{Carla Delima}

_{Alan Uthuppan}

_{Jennifer Lieu}

_{Ian Tyler Applebaum}

LOMO In Person Gaming App

Keywords​

Project Abstract​

High Level Requirement​

Conceptual Design​

Background​

Required Resources​

Setup Instructions​

System requirements and prerequisites​

Setup local machine​

1. Git clone the repo​

2. Setup frontend​

3. Setup backend​

(Optional) Setup sail alias​

4. Setup docusaurus​

Run​

Run the app​

Stop running the app​

Run docusaurus​

Collaborators​