[React Number Memory game with Mongodb Realm]
Tags: atlashackathon, mongodb
Published: 2022-01-13 17:52:40

---
title: [React Number Memory game with Mongodb Realm]
published: true
description: [My submission to the MongoDB Atlas Hackathon on DEV!]
tags: atlashackathon, mongodb
---


### Overview of My Submission

#### What is the Memory game
- The memory game is a pairing game that contains a pair of similar objects. In the game i am using a pair of numbers between one and eight.
- The user selects 2 cards one at a time, the idea is to select matching numbers whenever 2 cards are picked. If the cards are similar they remain open otherwise they close after 500ms and the selection process carries on until all cards are matched correctly.
- This particular is a 4 by 4 board game with pairs of numbers between one and eight inclusive.

#### MongoDb Atlas and Realm
- MongoDb atlas and Realm makes it easy to make a simple connection to a backend without hosting your own server and the best news is that these services have a free tier.
- Realm provides the use of functions and has a function editor that assist you to get started. The functions created will be used in the frontend to get the data.
- The database was created using another MongoDB atlas service known as MongoDb Compass.
- here is a sample code of the realm function used in the React Frontend application
```
exports = function(arg){
 
    let collection = context.services
                    .get("mongodb-atlas") 
                    .db("memoryGame")
                    .collection("memory");
   
  return collection.find({});
};
``` 

### Submission Category # (Action Star)

### Link to Code

[Github repository] # (https://github.com/ChamuMutezva/memory-game-2021)
[Live preview link] # (https://memory-game-chamu-2021.netlify.app/)

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info

[Mongodb Jumpstart videos] # (https://www.youtube.com/watch?v=RGfFpQF0NpE&list=PL4RCxklHWZ9v2lcat4oEVGQhZg6r4IQGV)

[Mongodb University - interactive learning] # (https://university.mongodb.com/mercury/M001/2021_December_14/chapter/Chapter_1_What_is_MongoDB_/lesson/5f5c03c704e9ff039e32729b/lecture)

[Shuffle array] # (http://stackoverflow.com/a/2450976)
[Inspiration of code drawn from] # (https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle)
```
function shuffle(array) {
    let currentIndex = array.length,
      temporaryValue, randomIndex;

    // While there remain elements to shuffle...
    while (currentIndex !== 0) {

      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  };
```
### Screenshots

[Game image 1] # (https://github.com/ChamuMutezva/memory-game-2021/blob/master/src/assets/start1.png)

[Game image 2] # (https://github.com/ChamuMutezva/memory-game-2021/blob/master/src/assets/start2.png)

[Game image 3] # (https://github.com/ChamuMutezva/memory-game-2021/blob/master/src/assets/start3.png)

[Game image 4] # (https://github.com/ChamuMutezva/memory-game-2021/blob/master/src/assets/endgame.png)