- React
- TypeScript
- StyledComponents
- Jest
- You need to create your own public repository from this boilerplate (Do not create a fork).
- Run the app and inspect the components. The base design is already implemented.
- Write test cases for the base design; the test statements are already provided.
- Ensure that all components are responsive, following the test-case statements.
- Maintain proportional design for all screen/viewport sizes. For example:
- The game container component (GameBox) has a maximum width and height of 360px x 640px (9/16 ratio). If the viewport width is less than 360px or greater than 640px, the container should adapt accordingly. For example, if the viewport is 320px x 800px, then GameBox should be 320px x 569px. For 800px x 600px, GameBox should be 337.5px x 600px.
- Ensure that fonts are also responsive. All configuration values are provided assuming the GameBox is 360px x 640px. When it's smaller, fonts, border-radius, etc., should be updated accordingly.
- Update all test cases to verify that the responsiveness is working correctly.
- A game screen with a responsive component design.
- Implementation of all necessary test cases.
This project was bootstrapped with Create React App. Please refer to Create React App's documentation for instructions on running the project.