Card Game App

Last updated: 2024-08-30

Project Overview

• The Card Game App is an educational card game web application (web app) designed for children, students, and game enthusiasts alike.
• The game features multiple categories, game modes, and difficulty levels to cater to different age groups and skill requirements.

Functional Requirements

Web App

• Responsive Support: Supports running on desktops, tablets, mobile phones, and other devices with a web browser.
• Click-to-go: No installation required; can be played directly in the browser without any downloads or setup.

Game Content

• 5+ categories
• 10+ card games available

Card Matching Types

Image-Image

1. Designed for age 3+ (grade 1+)
2. Display pairs of images representing the same thing
3. MaterialTypes = [IMAGE]

Image-Name

1. Designed for age 6+ (grade 4+)
2. Display pairs of image and related name representing the same thing
3. Multi languages (EN, TC)
4. MaterialTypes = [IMAGE, NAME]

Game Modes

Pick Cards

1. User clicks [Start] to start the game.
2. All cards faced-up.
3. User clicks each card to select.
4. System checks selected cards:

• if match: dim matched cards, update statistics
• else: unhighlight mismatched cards

Flip Cards

1. User clicks [Start] to start the game.
2. All cards faced-down.
3. User clicks each card to reveal.
4. System checks revealed cards:

• if match: dim matched cards, update statistics
• else: flip mismatched cards back

Difficulty Levels

By Grid Size

• Increase grid size (e.g., 2x3, 3x4, 4x4, 4x5, 4x6, ...)

By Material Type

• Image-Image
• Image-Image + Image-Name

By Countdown Timer

• Reduce Time Limit

Rewards

• Interesting / Educational Images to be shown after passing each level.

Technical Requirements

Frontend

• facebook/react: Use React (v18.3.1) to build the user interface and manage state changes.
• remix-run/react-router: Use React Router (v6.26.0) for creating client-side routing system easily.
• vitejs/vite: Use Vite (v5.4.0) for frontend building tool with zero config.
• twbs/bootstrap: Use Bootstrap (v5.3.3) for rapidly styling web pages quickly and consistently.
• react-bootstrap/react-bootstrap: Use react-bootstrap (v2.10.1) for creating responsive, accessible UI components.
• react-icons/react-icons: Use react-icons (v5.3.0) for adding icons to React applications easily.
• davidhu2000/react-spinners: Use react-spinners (v0.14.1) for displaying loading animations in React apps.

Backend

• json-server/json-server: Use json-server (v0.17.4) as a fake REST API by loading JSON files to retrieve game data.

Getting Started

1. Clone the repository using git clone https://github.com/befprg/cgp-card-game-app.git
2. Install dependencies using npm install
3. Start the development server using npm run dev
4. Open your web browser and navigate to http://localhost:3000
5. Start playing the game!