Skip to content

Commit bcee8f3

Browse files
author
Md Umar Siddique
committed
chore: streamline project metadata, README, and assets
- Remove redundant SEO keywords from package.json and index.html - Refine README with updated structure, deployment commands, and developer badges - Add game-screenshot.webp to public directory - Delete unused Logo.png from src/assets
1 parent 999e80a commit bcee8f3

5 files changed

Lines changed: 127 additions & 161 deletions

File tree

‎README.md‎

Lines changed: 126 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,206 +1,187 @@
1-
# <img height="45" src="./src/assets/Logo.png" alt="Logo" style="margin-bottom:-11px;"> Rick & Morty Memory Game
1+
# <img height="45" src="./public/favicon.ico" alt="Logo" style="margin-bottom:-11px;"> Rick & Morty Memory Game
22

33
<div align="center">
44

5-
![Project Banner](https://placehold.co/1200x300/183b4e/ffffff?text=Rick+%26+Morty+Memory+Game)
6-
7-
# A React Class-Component Masterclass
8-
9-
**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 and seamless deployment via GitHub Pages.**
10-
11-
[![React](https://img.shields.io/badge/React-Class_Components-61DAFB?logo=react&logoColor=black)](https://reactjs.org/)
12-
[![Jest](https://img.shields.io/badge/Jest-Tested-C21325?logo=jest&logoColor=white)](https://jestjs.io/)
13-
[![GitHub Actions](https://img.shields.io/badge/CI%2FCD-Pipeline-2088FF?logo=github-actions&logoColor=white)](https://github.com/features/actions)
14-
[![Framer Motion](https://img.shields.io/badge/Framer_Motion-Animation-0055FF?logo=framer&logoColor=white)](https://www.framer.com/motion/)
15-
[![Prettier](https://img.shields.io/badge/Code_Style-Prettier-F7B93E?logo=prettier&logoColor=black)](https://prettier.io/)
16-
[![ESLint](https://img.shields.io/badge/Linter-ESLint-4B32C3?logo=eslint&logoColor=white)](https://eslint.org/)
5+
### A React Class-Component Masterclass.
6+
7+
<p align="center">
8+
<strong>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.</strong>
9+
</p>
10+
11+
<p align="center">
12+
<a href="https://umarsiddique010.github.io/rick-morty-game-react/"><strong>View Live Production Deployment</strong></a>
13+
&nbsp;&nbsp;&bull;&nbsp;&nbsp;
14+
<a href="#setup-instructions"><strong>Local Setup</strong></a>
15+
&nbsp;&nbsp;&bull;&nbsp;&nbsp;
16+
<a href="https://github.com/umarSiddique010/rick-morty-game-react"><strong>Repository</strong></a>
17+
&nbsp;&nbsp;&bull;&nbsp;&nbsp;
18+
<a href="https://github.com/umarSiddique010/rick-morty-game-react/issues"><strong>Report an Issue</strong></a>
19+
</p>
20+
21+
[![React](https://img.shields.io/badge/React_19-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/)
22+
[![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)
23+
[![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge&logo=jest&logoColor=white)](https://jestjs.io/)
24+
[![Motion](https://img.shields.io/badge/Motion-0055FF?style=for-the-badge&logo=framer&logoColor=white)](https://motion.dev/)
25+
[![Husky](https://img.shields.io/badge/Husky_Hooks-42B983?style=for-the-badge&logo=git&logoColor=white)](https://typicode.github.io/husky/)
26+
[![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white)](https://eslint.org/)
27+
[![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=black)](https://prettier.io/)
28+
[![GitHub Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge&logo=github-actions&logoColor=white)](https://github.com/features/actions)
29+
[![GitHub Pages](https://img.shields.io/badge/GitHub_Pages-181717?style=for-the-badge&logo=github&logoColor=white)](https://pages.github.com/)
1730

1831
</div>
1932

2033
---
2134

22-
---
23-
24-
## 🚀 Features & Architecture
35+
## Overview
2536

26-
### 🧐 The Philosophy: Why Class Components?
37+
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.
2738

28-
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:
39+
## Game Preview
2940

30-
- **Explicit Lifecycle Management:** Granular control over component behavior using `componentDidMount` (for API calls and timers), `componentDidUpdate` (for score tracking and game-over logic), and `componentWillUnmount` (for preventing memory leaks by clearing intervals and audio streams).
31-
- **Context Binding & `this`:** A deep understanding of JavaScript scope, `this` binding in constructors, and event handler management without relying on `useCallback`.
32-
- **State Architecture:** `App.js` acts as the single source of truth, lifting state up and passing callbacks down to children like `ScoreBoard` and `Card`, ensuring unidirectional data flow.
41+
![Rick & Morty Memory Game](./public/game-screenshot.webp)
3342

34-
### ⚡ Core Functionality
43+
## Features & Architecture
3544

36-
- **REST API Integration:** Asynchronously fetches character data from the **Rick and Morty API**, handling loading states and errors gracefully within the `CardContainer` lifecycle.
37-
- **Fluid Animations:** Utilizes **Framer Motion** (`motion/react`) to orchestrate complex entrance and exit animations for the game board, modals, and score updates.
38-
- **Immersive Audio Engine:** Features a dedicated `GameSounds.js` class that manages `Audio` instances, background music loops, and sound effects with a global mute toggle.
39-
- **Responsive UI:** Built with **CSS Modules** to ensure locally scoped styles, preventing class name collisions while maintaining a fully responsive design across devices.
45+
### 1. The Philosophy: Why Class Components?
4046

41-
---
47+
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:
4248

43-
## 🛠 Tech Stack
49+
- **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)
50+
- **Context Binding & `this`:** A deep understanding of JavaScript scope, `this` binding in constructors, and event handler management without relying on `useCallback`
51+
- **State Architecture:** `App.js` as the single source of truth — state lifted up, callbacks passed down, unidirectional data flow enforced throughout
4452

45-
| Category | Technology |
46-
| :----------------------- | :---------------------------------- |
47-
| **Core Framework** | React 19 (Class-Based Architecture) |
48-
| **Language** | JavaScript (ES6+) |
49-
| **Styling** | CSS Modules, Utility Classes |
50-
| **Animation** | Framer Motion (`motion/react`) |
51-
| **Testing** | Jest, React Testing Library |
52-
| **Linting & Formatting** | ESLint, Prettier |
53-
| **CI & Hosting** | GitHub Actions, GitHub Pages |
53+
### 2. Core Gameplay
5454

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

57-
## 🧪 Testing Strategy
59+
### 3. Key Technical Features
5860

59-
This project employs a "Test-Driven mindset" with a robust suite covering Unit, Integration, and Logic tests.
61+
- **Rick & Morty API** — Characters fetched asynchronously in `CardContainer`'s `componentDidMount` with loading and error states
62+
- **Audio Engine** — Dedicated `GameSounds.js` class managing BGM, SFX, and global mute toggle, fully decoupled from UI
63+
- **Animations** — `motion/react` spring physics for entrance/exit transitions on the game board and modals
64+
- **CSS Modules** — Scoped styles, zero class name collisions
6065

61-
- **Unit Testing:** Individual components like `Card.js` and `TimerBoard.js` are tested in isolation to ensure they render props correctly and fire events as expected.
62-
- **Integration Testing:** `App.test.js` simulates full user flows—starting the game, clicking cards, and triggering game-over states—to verify component interaction.
63-
- **Mocking:**
64-
- **Audio API:** The `GameSounds.js` class is fully mocked in `src/__mocks__/GameSounds.js` to prevent audio playback issues in the test environment.
65-
- **Fetch API:** Global `fetch` is mocked to simulate API responses for deterministic testing of the `CardContainer`.
66-
- **Coverage:** The pipeline enforces high test coverage, runnable via `npm run test:coverage`.
66+
### 4. Testing
6767

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

70-
## ⚙️ CI, Quality Assurance & Deployment
73+
### 5. CI Pipeline
7174

72-
Code quality is enforced via a strict **GitHub Actions** pipeline defined in `.github/workflows/ci.yml`. No code reaches production without passing these gates:
75+
Every push and PR must pass `.github/workflows/ci.yml` before merging:
7376

74-
1. **Dependency Installation:** Ensures a clean slate using `npm install --legacy-peer-deps`.
75-
2. **Linting:** Runs `npm run lint` (ESLint) to catch static errors and enforce coding standards.
76-
3. **Formatting:** Runs `npm run format:check` (Prettier) to ensure stylistic consistency.
77-
4. **Test Suite:** Executes `npm run test:coverage` to verify business logic and prevent regressions.
78-
5. **Deployment (GitHub Pages):** Utilizes `gh-pages` for controlled manual deployments. This leverages GitHub's native ecosystem to securely and freely host the static React build, ensuring only fully-tested code reaches production.
77+
- ESLint → Prettier format check → Jest coverage → coverage report uploaded as CI artifact
7978

80-
---
79+
## Tech Stack
8180

82-
## 🚀 Setup Instructions
81+
| Category | Technology | Usage |
82+
| :----------------- | :---------------------------- | :------------------------------------------------------------------------------------ |
83+
| **Core Framework** | **React 19** | Class-Based Components, lifecycle methods |
84+
| **Bundler** | **Create React App** | Build tooling; intentionally chosen over Vite for CRA + class component compatibility |
85+
| **Language** | **JavaScript (ES6+)** | Class architecture, `this` binding |
86+
| **Styling** | **CSS Modules** | Scoped styles, zero collisions |
87+
| **Animation** | **Motion (`motion/react`)** | Spring physics, entrance/exit animations |
88+
| **Audio** | **Web Audio API** | Custom `GameSounds` class for SFX and BGM |
89+
| **Testing** | **Jest + RTL** | Unit and integration tests |
90+
| **Code Quality** | **ESLint + Prettier + Husky** | Pre-commit and CI enforcement |
91+
| **CI** | **GitHub Actions** | Lint → Format → Test → Coverage artifact |
92+
| **Hosting** | **GitHub Pages** | Manual deployment via `npm run deploy` |
8393

84-
Follow these steps to run the application locally.
94+
## Setup Instructions
8595

8696
### Prerequisites
8797

88-
- Node.js (v18 or v20 recommended)
98+
- Node.js v18 or v20
8999
- npm
90100

91-
### Installation
92-
93-
1. **Clone the repository:**
94-
95-
```bash
96-
git clone https://github.com/umarSiddique010/rick-morty-game-react.git
97-
98-
cd rick-morty-game-react
99-
```
101+
### 1. Clone & Install
100102

101-
2. **Install dependencies:**
102-
_Note: The project uses React 19 with some legacy dependencies._
103-
104-
```bash
105-
npm install --legacy-peer-deps
106-
```
103+
```bash
104+
git clone https://github.com/umarSiddique010/rick-morty-game-react.git
105+
cd rick-morty-game-react
106+
npm install --legacy-peer-deps
107+
```
107108

108-
3. **Start the development server:**
109+
> `--legacy-peer-deps` is required — CRA has peer dependency conflicts with React 19.
109110
110-
```bash
111-
npm start
112-
```
111+
### 2. Run
113112

114-
4. **Run Quality Checks**
113+
```bash
114+
npm start
115+
```
115116

116-
```bash
117-
# Run Linter
118-
npm run lint
117+
Open [http://localhost:3000](http://localhost:3000).
119118

120-
# Check Formatting
121-
npm run format:check
119+
### 3. Quality Checks
122120

123-
# Run Test Suite with Coverage
124-
npm run test:coverage
125-
```
121+
```bash
122+
npm run lint
123+
npm run format:check
124+
npm run test:coverage
125+
```
126126

127-
### Development Commands
127+
### 4. Deploy to GitHub Pages
128128

129-
| Command | Description |
130-
| :---------------------- | :----------------------------------------------------------- |
131-
| `npm start` | Runs the app in development mode at `http://localhost:3000`. |
132-
| `npm run test` | Launches the test runner in interactive watch mode. |
133-
| `npm run test:coverage` | Runs tests once and generates a coverage report. |
134-
| `npm run lint` | Checks the codebase for linting errors. |
135-
| `npm run format` | Auto-formats code using Prettier. |
129+
```bash
130+
npm run deploy
131+
```
136132

137-
---
133+
> 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.
138134
139-
## 📂 Project Structure
135+
## Project Structure
140136

141-
```text
137+
```
142138
src/
143-
├── __mocks__/ # Jest mocks for GameSounds and Audio
144-
├── __test__/ # Comprehensive test suite (Unit & Integration)
145-
├── assets/ # Fonts, Images, and Wallpapers
139+
├── __mocks__/ # Jest mock for GameSounds and Audio API
140+
├── __test__/ # Full test suite (Unit & Integration)
141+
├── assets/ # Fonts, images, wallpaper
146142
├── Components/
147-
│ ├── Card/ # Individual Memory Card component
148-
│ ├── CardContainer/ # Grid layout and API fetching logic
149-
│ ├── GameOver/ # Game Over modal with score summary
150-
│ ├── PlayGame/ # Main game orchestrator
151-
│ ├── ScoreBoard/ # HUD for Score, High Score, and Cards Left
152-
│ ├── SoundToggleButton/# Global audio control
153-
│ ├── StartGame/ # Landing page and Level selection
154-
│ └── TimerBoard/ # Countdown timer logic
155-
├── App.js # Root Component & State Container
156-
├── GameSounds.js # Audio Class for SFX and BGM management
157-
├── index.css # Global variables and resets
158-
└── setupTests.js # Jest configuration
143+
│ ├── Card/ # Individual memory card
144+
│ ├── CardContainer/ # Card grid + API fetching
145+
│ ├── GameOver/ # Game Over modal
146+
│ ├── PlayGame/ # Main game orchestrator
147+
│ ├── ScoreBoard/ # Score, high score, cards left HUD
148+
│ ├── SoundToggleButton/ # Global mute control
149+
│ ├── StartGame/ # Landing page and difficulty selection
150+
│ └── TimerBoard/ # Countdown timer
151+
├── App.js # Root component and state container
152+
├── GameSounds.js # Audio class: SFX and BGM
153+
└── index.css # Global CSS variables and resets
159154
```
160155

161156
---
162157

163-
## 🤝 Contributing
164-
165-
Contributions are welcome! Please follow these steps:
166-
167-
1. Fork the repository.
168-
2. Create a feature branch (`git checkout -b feature/AmazingFeature`).
169-
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`).
170-
4. Push to the branch (`git push origin feature/AmazingFeature`).
171-
5. Open a Pull Request.
172-
173-
## 📝 License
174-
175-
Distributed under the MIT License. See `LICENSE` for more information.
158+
<div align="center">
176159

177-
---
160+
### Developer & Maintainer
178161

179-
<div align="center">
180-
<p><strong>Developed by Md Umar Siddique</strong></p>
162+
**Md Umar Siddique**
181163

182-
<a href="https://www.linkedin.com/in/md-umar-siddique-1519b12a4/">
183-
<img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn" />
184-
</a>
185-
<a href="https://www.npmjs.com/~umarSiddique010">
186-
<img src="https://img.shields.io/badge/npm-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="NPM" />
164+
<p align="center">
165+
<a href="https://www.umarsiddique.dev/">
166+
<img src="https://img.shields.io/badge/Portfolio-umarsiddique.dev-000000?style=flat-square&logo=googlechrome&logoColor=white" alt="Portfolio Website" />
187167
</a>
188-
<a href="https://dev.to/umarsiddique010">
189-
<img src="https://img.shields.io/badge/DEV.to-0A0A0A?style=for-the-badge&logo=dev.to&logoColor=white" alt="DEV Community" />
168+
<a href="https://www.linkedin.com/in/md-umar-siddique-1519b12a4/">
169+
<img src="https://img.shields.io/badge/LinkedIn-0077B5?style=flat-square&logo=linkedin&logoColor=white" alt="LinkedIn" />
190170
</a>
191171
<a href="https://github.com/umarSiddique010">
192-
<img src="https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub" />
172+
<img src="https://img.shields.io/badge/GitHub-181717?style=flat-square&logo=github&logoColor=white" alt="GitHub" />
193173
</a>
194-
<a href="mailto:us70763@gmail.com">
195-
<img src="https://img.shields.io/badge/Email-D14836?style=for-the-badge&logo=gmail&logoColor=white" alt="Email" />
174+
<a href="https://www.npmjs.com/~umarsiddique010">
175+
<img src="https://img.shields.io/badge/NPM-CB3837?style=flat-square&logo=npm&logoColor=white" alt="NPM" />
176+
</a>
177+
<a href="https://dev.to/umarsiddique010">
178+
<img src="https://img.shields.io/badge/Dev.to-0A0A0A?style=flat-square&logo=dev.to&logoColor=white" alt="Dev.to" />
196179
</a>
180+
<a href="mailto:us70763@gmail.com">
181+
<img src="https://img.shields.io/badge/Email-D14836?style=flat-square&logo=gmail&logoColor=white" alt="Email" />
182+
</a>
183+
</p>
197184

198-
<br/><br/>
185+
&copy; 2024 - Present. Released under the MIT License.
199186

200-
<p>
201-
<strong>Project Links:</strong>
202-
<a href="https://umarsiddique010.github.io/rick-morty-game-react/">🚀 Live Demo</a> •
203-
<a href="https://github.com/umarSiddique010/rick-morty-game-react/issues">🐞 Report an Issue</a> •
204-
<a href="https://github.com/umarSiddique010/rick-morty-game-react">⭐ Star this Repo</a>
205-
</p>
206187
</div>

‎package.json‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,7 @@
44
"homepage": "https://umarSiddique010.github.io/rick-morty-game-react",
55
"private": true,
66
"type": "module",
7-
"description": "A Rick and Morty-themed memory card game built with React using class-based components. Match characters, race against the clock, and challenge your memory!",
8-
"keywords": [
9-
"Rick and Morty",
10-
"memory game",
11-
"card game",
12-
"React",
13-
"class-based components",
14-
"online game",
15-
"puzzle",
16-
"free game",
17-
"memory challenge"
18-
],
7+
"description": "A Rick and Morty-themed memory card game built with React class-based components. Match characters, beat the clock across 3 difficulty levels, and challenge your memory!",
198
"author": "Md Umar Siddique",
209
"dependencies": {
2110
"@testing-library/dom": "^10.4.0",

‎public/game-screenshot.webp‎

313 KB
Loading

‎public/index.html‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@
99
name="description"
1010
content="Play the ultimate Rick and Morty Memory Card Game! Test your memory skills with your favorite characters. Fun, challenging, and free to play online."
1111
/>
12-
<meta
13-
name="keywords"
14-
content="Memory Game, Rick and Morty, Card Game, Online Game, Free Game, Memory Challenge, React App"
15-
/>
1612
<meta name="author" content="Md Umar Siddique" />
1713
<title>Rick and Morty Memory Card Game – Test Your Memory Skills Online</title>
1814
</head>

‎src/assets/Logo.png‎

-1.04 MB
Binary file not shown.

0 commit comments

Comments
 (0)