audreypatricia / GAHOOT-client

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Project 2 - GAHOOT

Click here to see our Kahoot clone as a host GAHOOT-host or here to sign in as a player: GAHOOT-player

Link to GAHOOT-server

View the project backend made with Ruby on Rails here

Overview:

The objective of this project was to create a clone of the trivia application Kahoot. Audrey came up with the idea and the rest of us joined her team with 7 days to create the application.

The Journey:

We started off by creating our database tables and models with Postgresql using the Ruby on Rails framework. We planned out the models on the first day over Zoom using Miro and Lucid Chart to help us all visualise how this project would come to life. We decided on 5 models and 1 joining table and created some seed data so that we could deploy to our cloud platform (Heroku) on day one.

We agreed on using React for our front end and divided up the components for each team member to work on over the weekend and the following week. By Tuesday we started to merge all of the components that we could and we were hopeful that by the end of the day we would be able to run a complete game from start to finish. Unfortunately we ran into a fair few bugs and had to refactor a lot of code as well as re-thinking our models and how we would access and render our data. We spent some time discussing the flow of our application, who needed what and where and trying to accomodate each others needs by passing our data through React however we could. After a couple of days of refactoring our project we managed to get a game to run late Thursday afternoon. We added styling and some more quiz data so that we could present on the Friday. We are all very proud of our achievements this week.

How to play:

To play you need someone to be a host of the game. They sign up as a host through the homepage and then select a quiz from the quiz index page. Once they select play on a quiz they are taken to the game start page where they then need to click "create game" to create a game for other players to enter.

Once clicked the pin can be distributed to players who then sign in via the "player sign-in" option on the home page. Once all players have signed in (which the host can see) the host then clicks the "start game" button. The quiz questions will render on all player's screens and they then simply need to select the correct answer and flow through the questions until the quiz is over. Scores can be viewed on the Host's screen as players fight to win the championship title!

Things we love:

  • The learning experiences including:
    • Debugging
    • Collaboration
    • Communication
    • Time management
  • It works!
  • Our team!

Challenges:

  • Merging components
  • Understanding each others code
  • Dealing with asynchonous problems
  • Dealing with rendering the game on multiple browsers
  • Passing data through React components

Stretch Goals:

  • Capturing the time and adding this to players as their score

Tech Stack:

  • HTML/CSS
  • React/Javascript
  • Ruby on Rails
  • Postgresql
  • Heroku
  • Cloudinary

Future Improvements:

  • clearing out player database every so often, so player names do not always have to be unique
  • setting score for each correct answer based on how fast questions are answered
  • allowing for the host to be able to share their screen of questions and players viewing only answer options

Our Awesome Team!

Team\

Created by Audrey, David, Katie, Paul and Sam

Special thanks to Joel and Mai for their invaluable insights and support

About


Languages

Language:JavaScript 78.7%Language:CSS 18.7%Language:HTML 2.7%