A gamified Brainscape clone in the style of the old video game series .Hack.

Welcome to GameScape!

Live Link: GameScape

GameScape is inspired by BrainScape and is a retro, gamified studying application where users can create their own flash card decks to review and save other decks to review.

Home Page

Technologies

Front End

React
Redux
CSS styling
Font Awesome library for icons
Hosted on Heroku

Back End

Built with Express.js
Uses a PostgreSQL Database
Sequelize.js
Express Validator Library
CSURF Library

Features

Secure authentication using bcryptjs library
Only grants access to features studying and saving deck features to logged in users
Uses React / Redux to conditionally render and save user scores while studying
Includes protection from csrf attacks and performs front-end and back-end validation on forms
Searching for new decks using similar tags
Saving and creating decks to study for later
Record tracking of average and high scores for each deck

Code Snippets

User scores are kept recorded after each question is answered, along with their top and higher scores. The new average score is calculated as the last study card is answered based on previous average and times the deck has been studied.

const askRandomQuestion = useCallback(() => {
    if (!studyingBegan) {
      setStudyingBegan(true);
    }
    if (unansweredQuestions.length === 0) {
      setFinishedState(true);
      const calcScore = currentScore + 1;
      const averageScore = deck.averageScore || 0;
      const bestScore = deck.bestScore || 0;
      const timesStudied = deck.timesStudied || 0;
      const newAverageScore = (averageScore*timesStudied + calcScore)/(timesStudied+1);
      deck.averageScore = newAverageScore;
      deck.timesStudied = timesStudied + 1;
      if (bestScore < calcScore) {
        deck.bestScore = calcScore;
      };
      dispatch(updateDeckScoreThunk(deck));
      return;
    }
    const questionIndex = Math.floor(
      Math.random() * unansweredQuestions.length
    );
    const question = unansweredQuestions[questionIndex];
    const newUnansweredQuestionsArray = [
      ...unansweredQuestions.slice(0, questionIndex),
      ...unansweredQuestions.slice(questionIndex + 1, questionIndex.length),
    ];
    setAnsweredState(false);
    setUnansweredQuestions(newUnansweredQuestionsArray);
    setCurrentQuestion(question);
  }, [unansweredQuestions, studyingBegan, currentScore, dispatch, deck]);

Future Implementations

Deck Review and Comments

dupchurch93/GameScape