Meowmory Game

Match adorable kitty cards and embark on a fur-ociously fun adventure! Register, log in and play to gain score and advance on the Scoreboard.

Table of Contents

1. About The Project
   • Built With
2. Contributors
3. Getting Started
   • Prerequisites
   • Installation
4. Usage
5. Stopping the App
6. Troubleshooting
7. Roadmap

About The Project

The Meowmory Game is a fun, cat-themed memory game. You can play and registered users can even gain score if playing while logged in. Turn the volume on for the full experience (caution: dogs might get upset). The Meowmory Game is a MERN stack project built with MongoDB database and a Vite React frontend. Hope you have fun with it!

Built With

• Backend:
  
• Database:
  
• Frontend:
  

Contributors:

• Molnár Marianna
  GitHub: https://github.com/MariannaMolnar
  
• Szatyina Alexa
  GitHub: https://github.com/szatyinalexa
  
• Oláhné Klár Erika
  GitHub: https://github.com/o-k-e
  

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

Before running the project, ensure you have the following installed:

• Node.js (v21.4.0) – Download
• MongoDB Atlas account – Sign up

Here you find the steps of the installation of our project:

1. Clone the repository

   git clone https://github.com/CodecoolGlobal/freestyle-mern-project-2-react-szatyinalexa.git
   cd freestyle-mern-project-2-react-szatyinalexa
   

2. Configure Environment Variables

   To set up your environment variables, simply copy and rename the .env.example file to .env in the server directory. You can do this using the following terminal command:

   cp .env.example .env

   Once copied, open the .env file and update the values to match your credentials and environment settings. For example:

   /server/.env

   DATABASE_URL="your_mongodb_connection_string"
   CAT_API_KEY="your_cat_api_key"
   

   Make sure that the credentials you provide are secure and appropriate for your environment and to get your API key from The Cat API - Get your API key.

3. Running the Project

   Seed the database by running seed.js:

   cd server
   node seed.js
   

   Start the server by entering in your terminal the following command:

   cd server
   npm start
   

   Start the frontend with the following command:

   cd client
   npm run dev
   

   These commands will:

   • Build and start the MongoDB database with inital data.
   • Start the server.
   • Start the Vite React frontend.

   Now, your frontend should be running at: 🔗 http://localhost:5173 (default Vite port)

   Your backend should be running at: 🔗 http://localhost:3000 (default Express port)

   The services will be available at: 🔗 http://localhost:5173

Usage

Once the services are running, you can access the frontend to interact with the application and the backend API for examining purposes.

You can play without registering or logging in, but you are only able to gain scores if you play while logged in. Once you have a profile, you can change your password, advance in the scoreboard if keep playing and you can also delete your profile.

This is the landing page for users without login:

This is the game page:

Stopping the Project

To stop running the project by pressing following keys: CTRL + C

Troubleshooting

• Port Conflicts: Ensure ports 3000 and 5173 are not in use by other processes.
• MongoDB Connection Issues: Ensure your MongoDB Atlas cluster allows connections from your IP (0.0.0.0/0 for all IPs).
  Verify that DATABASE_URL in .env is correct.
• TheCatAPI Not Working: Ensure you have a valid API key in client/.env. Get your API key

Roadmap

• Add README
• Add difficulty levels
• Testing
  • Set up CI/CD pipeline
  • Increase coverage with unit tests