Memory Game

A full stack game project showing my skills to develop both client and server application

Visit website
Check code
  • Visual Style: CSS
  • Front End: Vue, Vuex
  • Back End: PostgreSQL, Sequelize
Landing screen of the Memory Game.

Visual Style

I want to keep the visual style simple with only two variations of light green, contrasting with the greyness of the font color.

The Memory Game color palette and logo

The Mission

Memory Game allows players to choose between three levels of the game (4, 8 and 12 cards mean easy, medium and difficult respectively)

They will then be presented with numbers on the cards and once they click PLAY, the cards will be turned down. To win the game, they are asked to range the numbers in an ascending order.

A

Back End

The server is an Express application connected to a PostgreSQL with Sequelize as ORM.

All the logics of the game are developed in the back.

Front End

The front end is built with Vue together with Vuex for state management.

I chose Vue mainly because I wanted to practice more with this framework.

A snippet from the DevTech Tools API, converting data from JSON to CSV.

Improving the Experience

The interface is currently not responsive and only limited to laptop users.

More features can be added, such as: increasing the level of difficulty if the player wins three times in a row, or having a time limit in the game.

Deployment

I used Heroku with a free account plan to deploy the server, so it sometimes is a bit slow.

The front end is deployed with Netlify.