In this project, building a Match Game by applying the concepts we have learned till now in React development. We'll utilize state management to keep track of the game's progress, including which cards are flipped and matched. By breaking down the user interface into reusable components such as ImgItem, TabItem, we'll ensure a structured and maintainable codebase. Event handling will play a crucial role as we implement functionality to flip cards upon clicking and check for matches. Additionally, we'll employ conditional rendering to dynamically display the cards' faces or backs based on their current state. Finally, we'll enhance the visual appeal and responsiveness of the game by applying CSS styling techniques. Through these concepts, we'll create an engaging and interactive Match Game experience for players to enjoy.

Refer to the video below:

[output video](#2 (comment))

Design Files

Click to view

• Extra Small (Size < 576px) and Small (Size >= 576px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Match Game
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px) - Scorecard

Set Up Instructions

Click to view

• Download dependencies by running npm install
• Start up the app using npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

• Initially,

  • Score should be 0 and time should be 60 sec
  • The image to be matched should have the src attribute value as the value of the key imageUrl from the first object in imagesList provided
  • The Fruits tab should be active and the thumbnails with FRUIT as their category should be displayed

• The timer should start running backwards from the 60 sec

• When a tab is clicked, then the thumbnails in the corresponding category should be displayed

• When a thumbnail is clicked, if that is matched with the image to be matched,

  • Score is incremented by one
  • The new image to be matched should be generated randomly among the value of the key imageUrl from imagesList provided

• When a thumbnail is clicked, if it is not matched with the image to be matched,

  • The game should end, and the Scorecard view should be displayed
  • When PLAY AGAIN button is clicked, then we should be able to play the game again
    • The score and time values should be reset to 0 and 60 sec respectively
    • The image to be matched should reset to the value of the key imageUrl from the first object in imagesList provided
    • The active tab should reset to Fruits, and the thumbnails with FRUIT as their category should be displayed

• When the timer reached 0 sec, then the game should end, and the Scorecard view should be displayed

• The App is provided with tabsList. It consists of a list of tabItem objects with the following properties in each tabItem object

  Key	Data Type
  tabId	String
  displayText	String

• The App is provided with imagesList. It consists of a list of imageItem objects with the following properties in each imageItem object

  Key	Data Type
  id	String
  imageUrl	String
  thumbnailUrl	String
  category	String