https://github.com/umarsiddique010/rick-morty-game-react

A responsive and animated memory card game built using React class components. Featuring characters from the Rick and Morty API, persistent high score and level tracking with localStorage, and a resume feature for returning players.
https://github.com/umarsiddique010/rick-morty-game-react

accessibility api-integration class-components class-components-and-state javascript javascript-game javascript-library local memory-game mobile-first-css react react-animations react-game reactjs responsive-design rick-and-morty rick-and-morty-api vercel-deployment

Last synced: 15 days ago
JSON representation

Host: GitHub
URL: https://github.com/umarsiddique010/rick-morty-game-react
Owner: umarSiddique010
Created: 2025-05-24T12:16:55.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2025-08-08T10:57:56.000Z (10 months ago)
Last Synced: 2025-08-08T12:17:45.107Z (10 months ago)
Topics: accessibility, api-integration, class-components, class-components-and-state, javascript, javascript-game, javascript-library, local, memory-game, mobile-first-css, react, react-animations, react-game, reactjs, responsive-design, rick-and-morty, rick-and-morty-api, vercel-deployment
Language: JavaScript
Homepage: https://rick-morty-game-react.vercel.app
Size: 7.46 MB
Stars: 0
Watchers: 0
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Rick & Morty Memory Game

### A React Class-Component Masterclass.

A production-grade React application engineered to demonstrate a deep understanding of core React fundamentals. Built entirely with Class-Based Components to showcase explicit lifecycle management, rigorous state architecture, and enterprise-level CI pipelines.

View Live Production Deployment
  •
Local Setup
  •
Repository
  •
Report an Issue

[![React](https://img.shields.io/badge/React_19-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/)
[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge&logo=jest&logoColor=white)](https://jestjs.io/)
[![Motion](https://img.shields.io/badge/Motion-0055FF?style=for-the-badge&logo=framer&logoColor=white)](https://motion.dev/)
[![Husky](https://img.shields.io/badge/Husky_Hooks-42B983?style=for-the-badge&logo=git&logoColor=white)](https://typicode.github.io/husky/)
[![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white)](https://eslint.org/)
[![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=black)](https://prettier.io/)
[![GitHub Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=github-actions&logoColor=white)](https://github.com/features/actions)
[![GitHub Pages](https://img.shields.io/badge/GitHub_Pages-181717?style=for-the-badge&logo=github&logoColor=white)](https://pages.github.com/)

---

## Overview

This repository demonstrates **"Class Components done right"** — a deliberate architectural choice in an era dominated by Hooks. `App.js` acts as the single source of truth, lifting state up and passing callbacks down, ensuring strict unidirectional data flow across the entire game.

## Game Preview

![Rick & Morty Memory Game](./public/game-screenshot.webp)

## Features & Architecture

### 1. The Philosophy: Why Class Components?

In an era dominated by Functional Components and Hooks, this project serves as a deliberate architectural showcase of core React fundamentals. By strictly utilizing Class Components, this codebase demonstrates:

- **Explicit Lifecycle Management:** Granular control using `componentDidMount` (API calls and timers), `componentDidUpdate` (score tracking and game-over logic), and `componentWillUnmount` (clearing intervals and audio streams to prevent memory leaks)
- **Context Binding & `this`:** A deep understanding of JavaScript scope, `this` binding in constructors, and event handler management without relying on `useCallback`
- **State Architecture:** `App.js` as the single source of truth — state lifted up, callbacks passed down, unidirectional data flow enforced throughout

### 2. Core Gameplay

- 3 difficulty levels — Easy (210s), Medium (120s), Hard (40s)
- Click each card only once; duplicate click = Game Over
- High score persisted to `localStorage` across sessions

### 3. Key Technical Features

- **Rick & Morty API** — Characters fetched asynchronously in `CardContainer`'s `componentDidMount` with loading and error states
- **Audio Engine** — Dedicated `GameSounds.js` class managing BGM, SFX, and global mute toggle, fully decoupled from UI
- **Animations** — `motion/react` spring physics for entrance/exit transitions on the game board and modals
- **CSS Modules** — Scoped styles, zero class name collisions

### 4. Testing

- Unit tests for isolated components (`Card`, `TimerBoard`, `ScoreBoard`)
- Integration tests in `App.test.js` covering full user flows — start game, card clicks, Game Over
- `GameSounds.js` fully mocked in `src/__mocks__/`; global `fetch` mocked for deterministic API tests
- Coverage enforced in CI via `npm run test:coverage`

### 5. CI Pipeline

Every push and PR must pass `.github/workflows/ci.yml` before merging:

- ESLint → Prettier format check → Jest coverage → coverage report uploaded as CI artifact

## Tech Stack

## Setup Instructions

### Prerequisites

- Node.js v18 or v20
- npm

### 1. Clone & Install

```bash
git clone https://github.com/umarSiddique010/rick-morty-game-react.git
cd rick-morty-game-react
npm install --legacy-peer-deps
```

> `--legacy-peer-deps` is required — CRA has peer dependency conflicts with React 19.

### 2. Run

```bash
npm start
```

Open [http://localhost:3000](http://localhost:3000).

### 3. Quality Checks

```bash
npm run lint
npm run format:check
npm run test:coverage
```

### 4. Deploy to GitHub Pages

```bash
npm run deploy
```

> This runs `npm run build` then pushes the build to the `gh-pages` branch. Deployment is manual — run this only after all quality checks pass.

## Project Structure

```
src/
├── __mocks__/ # Jest mock for GameSounds and Audio API
├── __test__/ # Full test suite (Unit & Integration)
├── assets/ # Fonts, images, wallpaper
├── Components/
│ ├── Card/ # Individual memory card
│ ├── CardContainer/ # Card grid + API fetching
│ ├── GameOver/ # Game Over modal
│ ├── PlayGame/ # Main game orchestrator
│ ├── ScoreBoard/ # Score, high score, cards left HUD
│ ├── SoundToggleButton/ # Global mute control
│ ├── StartGame/ # Landing page and difficulty selection
│ └── TimerBoard/ # Countdown timer
├── App.js # Root component and state container
├── GameSounds.js # Audio class: SFX and BGM
└── index.css # Global CSS variables and resets
```