Skip to content
This repository has been archived by the owner on Feb 15, 2023. It is now read-only.
/ memory-graphql Public archive

Frontend Developer Coding Challenge

Notifications You must be signed in to change notification settings

PrefectHQ/memory-graphql

Repository files navigation

Memory

Memory (also known as Concentration) is a card game played with one or more players. Using a standard card deck (including both jokers) the players shuffle the deck and lay all of the cards face down on a surface and two cards are flipped face up over each turn. The object of the game is to turn over pairs of matching cards. Concentration can be played with any number of players or as solitaire. Wikipedia has a good description of the game.

Your challenge is to build Memory in the browser with the requirements below.

Guidelines

Setting Up

Please don't fork this repository

Because this repository is public, all of it's forks are public. Instead, please follow the instructions below:

  1. Clone this repository to your machine
  2. Create a new private repository on your github account
  3. Change the remote of the local repository to your new remote
  4. Push code to that remote
  5. Develop

To Submit

  1. Add github user znicholasbrown as a collaborator to your private repository

The Game

  1. Fetch the Deck from the GraphQL server
  2. Shuffle the deck
  3. Display all 54 cards (jokers included) face down
  4. Clicking the back of a card should turn a card over
  5. Player can turn over 2 cards at a time
  6. When two cards are turned over:
    • if the number and color of the cards match, the player collects the pair and the cards are removed from the board
    • if the cards do not match, they turn back over and remain in position
  7. When a player has found all 27 pairs, the player should see a success message

Requirements

  1. One player can play one entire game
  2. Sensible tests (see @vue/test-utils)
  3. Clear commit messages & history
  4. Well-styled & readible cards
  5. Responsive (Fully Mobile & Tablet Friendly)

Bonus Points

  1. Animations for card flips
  2. Snapshot tests
  3. Shuffle the deck before returning it from the server
  4. Reset Button that starts an in-progess game over from the beginning
  5. Track the score
  6. Multiple player support

Note on the server

This repository includes an Apollo GraphQL server. Much of the code that implements this server is located in dependencies. This is because we've done the work to set up the server for you already, and there's only one function you should need to alter to fulfil a bonus requirement. If you're unfamiliar with GraphQL, you should be able to get started after a brief study of the Vue-Apollo Docs and the GraphQL docs. The endpoint for the server is located at http://localhost:4000/graphql.

Resources

Project setup

nvm install
nvm use
npm install

Compiles and hot-reloads client for development

npm run serve

Compiles and hot-reloads server for development (do this in a separate terminal)

npm run apollo

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Run your unit tests

npm run test:unit

Customize configuration

See Configuration Reference.

About

Frontend Developer Coding Challenge

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published