{"id":30697489,"url":"https://github.com/umarsiddique010/rick-morty-game-react","last_synced_at":"2026-05-17T17:08:24.181Z","repository":{"id":295248078,"uuid":"989591516","full_name":"umarSiddique010/rick-morty-game-react","owner":"umarSiddique010","description":"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.","archived":false,"fork":false,"pushed_at":"2025-08-08T10:57:56.000Z","size":7819,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-08T12:17:45.107Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://rick-morty-game-react.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umarSiddique010.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-24T12:16:55.000Z","updated_at":"2025-08-08T10:57:59.000Z","dependencies_parsed_at":"2025-05-24T13:41:25.578Z","dependency_job_id":"a6c04494-e748-4a07-9037-2f5d3e307ecd","html_url":"https://github.com/umarSiddique010/rick-morty-game-react","commit_stats":null,"previous_names":["umarsiddique010/rick-and-morty-memory-card-game","umarsiddique010/rick-morty-memory-game-react","umarsiddique010/rick-morty-game-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/umarSiddique010/rick-morty-game-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Frick-morty-game-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Frick-morty-game-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Frick-morty-game-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Frick-morty-game-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umarSiddique010","download_url":"https://codeload.github.com/umarSiddique010/rick-morty-game-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2Frick-morty-game-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273258391,"owners_count":25073684,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-02T02:00:09.530Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-09-02T09:10:25.159Z","updated_at":"2026-05-17T17:08:24.148Z","avatar_url":"https://github.com/umarSiddique010.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cimg height=\"45\" src=\"./public/favicon.ico\" alt=\"Logo\" style=\"margin-bottom:-11px;\"\u003e Rick \u0026 Morty Memory Game\n\n\u003cdiv align=\"center\"\u003e\n\n### A React Class-Component Masterclass.\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003eA 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.\u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://umarsiddique010.github.io/rick-morty-game-react/\"\u003e\u003cstrong\u003eView Live Production Deployment\u003c/strong\u003e\u003c/a\u003e\n  \u0026nbsp;\u0026nbsp;\u0026bull;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"#setup-instructions\"\u003e\u003cstrong\u003eLocal Setup\u003c/strong\u003e\u003c/a\u003e\n  \u0026nbsp;\u0026nbsp;\u0026bull;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://github.com/umarSiddique010/rick-morty-game-react\"\u003e\u003cstrong\u003eRepository\u003c/strong\u003e\u003c/a\u003e\n  \u0026nbsp;\u0026nbsp;\u0026bull;\u0026nbsp;\u0026nbsp;\n  \u003ca href=\"https://github.com/umarSiddique010/rick-morty-game-react/issues\"\u003e\u003cstrong\u003eReport an Issue\u003c/strong\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n[![React](https://img.shields.io/badge/React_19-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB)](https://reactjs.org/)\n[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n[![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge\u0026logo=jest\u0026logoColor=white)](https://jestjs.io/)\n[![Motion](https://img.shields.io/badge/Motion-0055FF?style=for-the-badge\u0026logo=framer\u0026logoColor=white)](https://motion.dev/)\n[![Husky](https://img.shields.io/badge/Husky_Hooks-42B983?style=for-the-badge\u0026logo=git\u0026logoColor=white)](https://typicode.github.io/husky/)\n[![ESLint](https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge\u0026logo=eslint\u0026logoColor=white)](https://eslint.org/)\n[![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge\u0026logo=prettier\u0026logoColor=black)](https://prettier.io/)\n[![GitHub Actions](https://img.shields.io/badge/GitHub_Actions-2088FF?style=for-the-badge\u0026logo=github-actions\u0026logoColor=white)](https://github.com/features/actions)\n[![GitHub Pages](https://img.shields.io/badge/GitHub_Pages-181717?style=for-the-badge\u0026logo=github\u0026logoColor=white)](https://pages.github.com/)\n\n\u003c/div\u003e\n\n---\n\n## Overview\n\nThis 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.\n\n## Game Preview\n\n![Rick \u0026 Morty Memory Game](./public/game-screenshot.webp)\n\n## Features \u0026 Architecture\n\n### 1. The Philosophy: Why Class Components?\n\nIn 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:\n\n- **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)\n- **Context Binding \u0026 `this`:** A deep understanding of JavaScript scope, `this` binding in constructors, and event handler management without relying on `useCallback`\n- **State Architecture:** `App.js` as the single source of truth — state lifted up, callbacks passed down, unidirectional data flow enforced throughout\n\n### 2. Core Gameplay\n\n- 3 difficulty levels — Easy (210s), Medium (120s), Hard (40s)\n- Click each card only once; duplicate click = Game Over\n- High score persisted to `localStorage` across sessions\n\n### 3. Key Technical Features\n\n- **Rick \u0026 Morty API** — Characters fetched asynchronously in `CardContainer`'s `componentDidMount` with loading and error states\n- **Audio Engine** — Dedicated `GameSounds.js` class managing BGM, SFX, and global mute toggle, fully decoupled from UI\n- **Animations** — `motion/react` spring physics for entrance/exit transitions on the game board and modals\n- **CSS Modules** — Scoped styles, zero class name collisions\n\n### 4. Testing\n\n- Unit tests for isolated components (`Card`, `TimerBoard`, `ScoreBoard`)\n- Integration tests in `App.test.js` covering full user flows — start game, card clicks, Game Over\n- `GameSounds.js` fully mocked in `src/__mocks__/`; global `fetch` mocked for deterministic API tests\n- Coverage enforced in CI via `npm run test:coverage`\n\n### 5. CI Pipeline\n\nEvery push and PR must pass `.github/workflows/ci.yml` before merging:\n\n- ESLint → Prettier format check → Jest coverage → coverage report uploaded as CI artifact\n\n## Tech Stack\n\n| Category           | Technology                    | Usage                                                                                 |\n| :----------------- | :---------------------------- | :------------------------------------------------------------------------------------ |\n| **Core Framework** | **React 19**                  | Class-Based Components, lifecycle methods                                             |\n| **Bundler**        | **Create React App**          | Build tooling; intentionally chosen over Vite for CRA + class component compatibility |\n| **Language**       | **JavaScript (ES6+)**         | Class architecture, `this` binding                                                    |\n| **Styling**        | **CSS Modules**               | Scoped styles, zero collisions                                                        |\n| **Animation**      | **Motion (`motion/react`)**   | Spring physics, entrance/exit animations                                              |\n| **Audio**          | **Web Audio API**             | Custom `GameSounds` class for SFX and BGM                                             |\n| **Testing**        | **Jest + RTL**                | Unit and integration tests                                                            |\n| **Code Quality**   | **ESLint + Prettier + Husky** | Pre-commit and CI enforcement                                                         |\n| **CI**             | **GitHub Actions**            | Lint → Format → Test → Coverage artifact                                              |\n| **Hosting**        | **GitHub Pages**              | Manual deployment via `npm run deploy`                                                |\n\n## Setup Instructions\n\n### Prerequisites\n\n- Node.js v18 or v20\n- npm\n\n### 1. Clone \u0026 Install\n\n```bash\ngit clone https://github.com/umarSiddique010/rick-morty-game-react.git\ncd rick-morty-game-react\nnpm install --legacy-peer-deps\n```\n\n\u003e `--legacy-peer-deps` is required — CRA has peer dependency conflicts with React 19.\n\n### 2. Run\n\n```bash\nnpm start\n```\n\nOpen [http://localhost:3000](http://localhost:3000).\n\n### 3. Quality Checks\n\n```bash\nnpm run lint\nnpm run format:check\nnpm run test:coverage\n```\n\n### 4. Deploy to GitHub Pages\n\n```bash\nnpm run deploy\n```\n\n\u003e 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.\n\n## Project Structure\n\n```\nsrc/\n├── __mocks__/             # Jest mock for GameSounds and Audio API\n├── __test__/              # Full test suite (Unit \u0026 Integration)\n├── assets/                # Fonts, images, wallpaper\n├── Components/\n│   ├── Card/              # Individual memory card\n│   ├── CardContainer/     # Card grid + API fetching\n│   ├── GameOver/          # Game Over modal\n│   ├── PlayGame/          # Main game orchestrator\n│   ├── ScoreBoard/        # Score, high score, cards left HUD\n│   ├── SoundToggleButton/ # Global mute control\n│   ├── StartGame/         # Landing page and difficulty selection\n│   └── TimerBoard/        # Countdown timer\n├── App.js                 # Root component and state container\n├── GameSounds.js          # Audio class: SFX and BGM\n└── index.css              # Global CSS variables and resets\n```\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n### Developer \u0026 Maintainer\n\n**Md Umar Siddique**\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.umarsiddique.dev/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Portfolio-umarsiddique.dev-000000?style=flat-square\u0026logo=googlechrome\u0026logoColor=white\" alt=\"Portfolio Website\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.linkedin.com/in/md-umar-siddique-1519b12a4/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/LinkedIn-0077B5?style=flat-square\u0026logo=linkedin\u0026logoColor=white\" alt=\"LinkedIn\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/umarSiddique010\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/GitHub-181717?style=flat-square\u0026logo=github\u0026logoColor=white\" alt=\"GitHub\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/~umarsiddique010\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/NPM-CB3837?style=flat-square\u0026logo=npm\u0026logoColor=white\" alt=\"NPM\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://dev.to/umarsiddique010\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Dev.to-0A0A0A?style=flat-square\u0026logo=dev.to\u0026logoColor=white\" alt=\"Dev.to\" /\u003e\n  \u003c/a\u003e\n   \u003ca href=\"mailto:us70763@gmail.com\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Email-D14836?style=flat-square\u0026logo=gmail\u0026logoColor=white\" alt=\"Email\" /\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\n\u0026copy; 2024 - Present. Released under the MIT License.\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumarsiddique010%2Frick-morty-game-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumarsiddique010%2Frick-morty-game-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumarsiddique010%2Frick-morty-game-react/lists"}