Card Memory Game

Plays with cards up to 60, memorize identical cards, and win the game.

Refer to this website: https://gamecardmemory.netlify.app

Authors

• @Kamilismayilzade

Documentation

Game created with ReactJs.

Development enviroment set up with Vite.

For data fetching Pexels API is used.

React Icons applied for customization.

React Spinners applied for customization.

Learn More about React Documentation here.

Explore the Pexels API Docs.

Features

• Various 4 categories to play with.
• Choose from 4 difficulty levels that suit best for you.
• Play with a minimum of 2 cards up to 60.
• Loader
• Interactive glassmorphism background animations.
• Responsive Design

Pexels API

Search for photos

    curl -H "Authorization: {API key}" \
  "https://api.pexels.com/v1/search?query=nature&per_page=1"

Parameter	Type	Description
api_key, query	string	Required.
orientation, size	string	Optional.
per_page	integer	Optional.

Badges

Color Reference

Color	Hex
Blue Charcoal	#1C2833
Alice Blue	#FCFDFF
Azure	#FAFEFF
Mint Cream	#FBFFFC
Twilight Blue	#FEFFFA

🛠 Skills

Javascript, React, HTML, CSS,

Run Locally

Clone the project

  git clone https://github.com/Kamilismayilzade/card-memory-game-react

Go to the project directory

  cd card-memory-game-react

Install dependencies

  npm install
  npm install react-icons --save
  npm install react-spinners
  npm i prop-types

Install Dev Dependencies

  npm create vite@latest
  

Start the server

  npm run dev

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

PEXELS_API_KEY

Tech Stack

Client: React

Deployment

To deploy this project run

  npm run deploy

Appendix

For glassmorphism background animations refer here.

Screenshots

Feedback