Simple, responsive, highly performant UI built with React and Typescript. This app test a person's prowess in Star Wars knowledge by taking the quiz.
All data is provided in a unique JSON file which is loaded by the application for rendering each question with its respective answer options or a fee text input field, depending on the question type, and making any other sort of calculation such as answers checking and getting the Fan score.
This app uses the BEM (Block Element Modifier) styling method for achieving a responsive, friendly, pixel-perfect, user experience in vanilla CSS. No UI library was required.
The entire app was built using truly-reusable, testable functional components and Hooks. It also takes adventage of design patterns such as composition and separating presentational components from container components which allowed building generic components that were used all across the app as building-block base for crafting customized components.
Due the size of the project there was no need of any state management library. The useState Hook was implemented for managing state.
TypeScript was set up along with React by the create-react-app package for ensuring props type checking and enhancing code reliability.
| Mobile | Desktop |
|---|---|
 |
 |
| Mobile | Desktop |
|---|---|
 |
 |
 |
 |
 |
 |
| Mobile | Desktop |
|---|---|
 |
 |
 |
 |