Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/PrefectHQ/memory-graphql

Frontend Developer Coding Challenge
https://github.com/PrefectHQ/memory-graphql

Last synced: 5 days ago
JSON representation

Frontend Developer Coding Challenge

Awesome Lists containing this project

README 

        
# 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](https://vue-test-utils.vuejs.org/guides/#common-tips))

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](https://github.com/Akryum/vue-apollo) and the [GraphQL docs](https://graphql.org/learn/). The endpoint for the server is located at `http://localhost:4000/graphql`.



## Resources



- [Vue docs](https://vuejs.org/v2/guide/)

- [GraphQL docs](https://graphql.org/learn/)

- [Vue-Apollo Docs](https://github.com/Akryum/vue-apollo)

- [Vue Test Utils docs](https://vue-test-utils.vuejs.org/)

- [Jest docs](https://jestjs.io/)

- [Game description]()



## Project setup



```bash

nvm install

nvm use

npm install

```



### Compiles and hot-reloads client for development



```bash

npm run serve

```



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



```bash

npm run apollo

```



### Compiles and minifies for production



```bash

npm run build

```



### Run your tests



```bash

npm run test

```



### Lints and fixes files



```bash

npm run lint

```



### Run your unit tests



```bash

npm run test:unit

```



### Customize configuration



See [Configuration Reference](https://cli.vuejs.org/config/).