wasabigeek / cahoots

An attempt to clone Kahoot! in React + Firebase

An experiment at making a free-to-play quiz game.

How to Play

• Go to https://wasabigeek.github.io/cahoots/
• Signup for an account and create a Game
• Start the game, and share the join URL with friends

Developing

• setup a firebase project:
  • firestore
  • authentication (email / password)
• copy .env.example and add your firebase project config
• npm start

Deploying

• deploy the firestore rules firebase deploy --only firestore:rules --project <PROJECT ID>
• npm run deploy

Dev Thoughts

There were a few things I was experimenting with:

• Firebase (also my first foray into a NoSQL database)
• Trying to follow Uncle Bob's Clean Architecture, with a "use cases" folder, and also attempting to hide the Firebase implementation behind an interface

I think the end result is still kinda messy, but it was interesting trying Clean Architecture out. I think use cases can fit pretty nicely with React's functional leanings, but it did feel like a lot of boilerplate.

I also tried to do an "entities" folder (might be using the wrong name for that) to represent the domain models more, but it seemed unnecessary given that everything's an object, and it didn't feel very React to store an OO instance (with methods) in state.

cahoots's Issues

Question related to pending and getting next question.

The original code in startNextQuestion seems to only allow the user to play the quiz once, when I tried to start the same quiz again, the const nextQuestion value in pendingQustionRoute returns undefined.
I've tried to change the code so that the quizzes can be played mulitiple times, but always face some issue. I've change the startNextQuestion file to this:

import GameStore from '../store/GameStore';
import QuestionStore from '../store/QuestionStore';

const startNextQuestion = async (gameId, currentQuestionIndex = 0) => {
  const gameStore = new GameStore();
  const questionStore = new QuestionStore();

  let game;
  try {
    game = await gameStore.get(gameId);
  } catch (error) {
    // Handle error
  }

  if (game) {
    gameStore.update(gameId, { state: 'pendingQuestion' });

    if ('currentQuestion' in game) {
      return questionStore.get(game.currentQuestion);
    } else {
      const questionArray = await questionStore.list({
        gameId,
        from: currentQuestionIndex,
        limit: 1,
      });
      const question = questionArray[0];

      if (question) {
        gameStore.update(gameId, { currentQuestionId: question.id });
      } else {
        gameStore.update(gameId, { currentQuestionIndex: 0 });
        currentQuestionIndex = 0;
        question = await startNextQuestion(gameId, currentQuestionIndex);
      }

      return question;
    }
  } else {
    return;
  }
};

export default startNextQuestion;

But it only works normally when there's only 1 question in the quiz, when there's multiple quesiton in the quiz, it will only start the last question of the quiz and end after that.
Is there anything I am doing wrong here?