Bruin Bowl

Running the app locally

1️⃣ Initial setup

git clone https://github.com/david-sai/bruin-bowl.git

2️⃣ Frontend:

First, start in the bruin-bowl directory. Then:

cd bruin-bowl-frontend
npm install
npm start

You should now see the website at localhost:3000.

3️⃣ Backend

Open a new shell window and start in the bruin-bowl directory. Then:

cd bruin-bowl-backend
npm install

# (the following may be optional)
npm install -g --force nodemon

# go into src and setup env variables (note: the echo line should start at "echo" and end at ".env")
cd src
echo "MONGODB_URI=INSERT_MONGODB_URI_VALUE_HERE" > .env
nodemon server.js

Note

You can get the INSERT_MONGODB_URI_VALUE_HERE in our project submission document.

The server should be up and running on port 4000!

Details

This is the folder structure:

- bruin-bowl
    - bruin-bowl-frontend (frontend)
    - bruin-bowl-backend (backend)
    - readme-assets (images for this README)
    - README.md

Playthrough

1. Navigate to the home page of the app. You should see a large blue button at the bottom, with the words "Sign up to start."
2. After clicking on the button, you will be directed to the login page where you can choose a username, password, and profile picture.
   • Note that if you already have an account, you may click the "sign in" link instead to sign into your account.
3. After logging in, you may click the "Start playing" button to begin your playthrough.
4. Then, you will be redirected to select your desired question categories and gamemodes.
5. Finally, click "Start Game" to play!
   • Select your answer from the given options, then submit.
   • Getting the question right allows you to advance to the next question with the "Next Question" button.
   • Getting the question wrong, or running out of time, forces you to hit "Restart Game" in order to start a new game.
   • You may navigate to other features, such as question searching, adding questions, or leaderboard through the navigation bar at the top of the website.

Please note that if you are already logged in, you may skip steps 1 through 3.

Motivation:

When we first created a group for the CS35L project, we aimed to create a valuable, relevant, and useful web application. And as UCLA students, we unanimously agreed on a website that could test our knowledge of UCLA trivia in a fun and interactive way. As we expanded our features, we found that our website could also allow us to quiz ourselves on other subjects like computer science in an engaging format.

The original inspiration for our project is Quiz Bowl, an academic trivia competition that, like the essential gameplay of our project, awards points based on the speed of the participant’s response. This was a shared interest the we all had, and was something where we all had experience in the past. In this project, we also provided a variety of features that adapt aspects of Quiz Bowl to an appropriate web-based equivalent.

For example, the leaderboard displays scores to bolster competition.

• Above is the leaderboard, where user information is displayed and updated in real time. This fosters competition by allowing users to see how their score compares to others.

Meanwhile, the visual timer component replaces the verbal countdown of Quiz Bowl staff so players know how much time they have left before the question ends.

• 15 seconds are given for each question. Points are awarded based on the timeliness of the response.

Other features include game modes and question categories to keep each playthrough fresh and exciting.

• In the Game page, users can select the game mode and category of question which suits them best before starting the game.

And of course, to ensure that users are real people and to add an extra layer of security to the application, login requires a username, password, and profile picture.

• A sign up popup allows users to create a username, password, and choose a profile picture from a few options.

• While a different popup allows users to select a profile picture from a range of options.

Features

The three features we originally included in the project proposal are the leaderboard and point calculation (see above), category and game mode selection (see above), and profile picture selection.

When users first create their account, they have the option of selecting a profile picture.

• Users may choose a profile picture from a selection of profile pictures.

In addition to these three features, we implemented additional features in order to improve the user experience and enhance gameplay. Additional features include the "add questions" page:

• In the Add Question page, users can create a question, assign an answer and 3 incorrect options, and choose a question category. After the user hits "Submit", the resulting question will be added to the question database.

• Afterwards, a popup will confirm that the question has been added to the database. The question prompt is shown on top, with the answer in green and the wrong answers below.

The "search questions" feature:

• The question search page allows users to search through the database of questions. It displays the question category, prompt, and options.

Finally, the actual gameplay features:

• The gameplay features a number of options, which can be selected by the user.
• After clicking "Submit," the user either receives a Game Over message (if the answer is incorrect or the user ran out of time), or gains score and proceeds with the "Next Question" button.
• At the bottom are the Game Score (the current score streak) as well as the total score (of the current user) and the remaining time.

Contribution Guide

Always create a new branch from dev when working on a task or issue. Once you've made your changes, submit a PR on GitHub.

1. Switch to the dev branch and pull the newest changes:

   git switch dev
   git pull

2. Create a new branch for your work. Please name "your_task" as specific and accurate as possible (at max 4 words):

   git switch -c [your_name]/[your_task]

3. Save your files after making contributions.

   git add .
   git commit -m "Finished [your_name]/[your_task]"

4. Once you're finished, push your branch to the remote repository:

   git push origin [branch_name]

5. Go to GitHub and submit a PR to merge your changes into the dev branch.

Credits

Created by Andrew, Brayden, Daniel, David, Jonathan, Zach

Name to email mappings:

• Andrew Zheng [email protected]
• Brayden Tam [email protected]
• Daniel Guo [email protected]/[email protected]
• David Sai [email protected]/[email protected]
• Jonathan Pai [email protected]/[email protected]
• Zachary DeSoto [email protected]

CS35L Group name: Six Body Problem

Group number: 27

Credits to the React tutorial for outlining how context is used in React.

• React tutorial link

Credits to NetNinja on Youtube for foundations of using MongoDB and web development backend.

• NetNinja Youtube link

Credits to Dave Gray on Youtube for a comprehensive tutorial on the MERN stack and how to develop a web dev project.

• Dave Gray Youtube link

Credits to Daily Tuition on Youtube for a tutorial on creating leaderboards using React.

• Daily Tuition Youtube link

Credits to Hynek Schlawack for a documentation outlining the functionality and uses of argon2.

• Argon2 Documentation link

The Joe Bruin logo is the property of UCLA and its respective owners. All rights to the logo and its use are retained by UCLA. This website is not affiliated with, endorsed by, or sponsored by UCLA. The use of the Joe Bruin logo is for identification and informational purposes only.

All product names, logos, and brands are property of their respective owners. All company, product, and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement.