Create a simple game that tests a candidate's React and TypeScript skills. The game involves matching pairs of randomly generated shapes displayed on a grid. The candidate must demonstrate their ability to work with React components, state management, TypeScript types, and basic styling.
- The game board consists of a 4x4 grid (total of 16 cells).
- Each cell contains a randomly generated shape (circle, square, or triangle) in a random color (red, green, or blue).
- The grid should have 8 pairs of matching shapes/colors.
- When a user clicks on a cell, the shape/color is revealed.
- The user can only reveal two cells at a time.
- If the revealed shapes/colors match, the cells remain open.
- If the revealed shapes/colors don't match, the cells are automatically hidden after a 1-second delay.
- The game ends when all pairs are matched, and the user is shown a completion message with the number of attempts it took to finish the game.
- Use React and TypeScript to develop the game.
- Use functional components and React Hooks for state management.
- Create custom TypeScript types for shape, color, and game state.
- Style the game using CSS modules or styled-components.
- Ensure the game is responsive and works well on different screen sizes.
- Code quality and organization: Proper use of React components, TypeScript types, and styling techniques.
- Functionality: The game should work as described and be free of bugs.
- State management: Efficient and clean use of React Hooks for state management.
- Responsiveness: The game should look and work well on various screen sizes.
- Bonus: Add a timer to track how long it takes to complete the game.
- Bonus: Unit Testing: Writing unit tests for the components and game logic using Jest and React Testing Library is a huge plus.
- Clone this repository
- Complete the game
- Push to your git
- Submit the Git URL
This test should take a skilled React/TypeScript developer between 30-60 minutes to complete.