Paf frontend exercise

Objective

Translate the provided design mocks into a working solution with HTML, CSS, Typescript, and React. Do not add any other frameworks or libraries.

Requirements

1. Use modern HTML to produce a semantic information structure.
2. Use modern CSS to produce the layout with a mobile first approach
   Should support screen resolutions from small screens (320px+) up to big screens (1920px+)
3. Fetch JSON-data from the following url: /api/games/lists.json
4. Use React to generate the elements/components based on the fetched JSON-data.
5. Create a search/filter component based upon the JSON-data.
   • Implement your own design for the search/filter component
   • Should be a component
   • Should filter the JSON-data based on user input
   • Should display up to 10 previous searches
   • Should persist search history on reload
     Don't use autocomplete="on"

Author your solution in the following places:

• index.html
• src/styles.css
• src/scripts.tsx

Getting started

There are two avaliable development environments

• Localhost

Localhost

This setup provides a development server to be used in your machine.
Prerequisites are node.js (LTS) (and git if you clone the repo)

1. Install dependencies:

   npm ci

2. Start server:

   npm start

3. When done, package your solution with the following command:

   npm pack

4. And then send us your paf-frontend-exercise-2.1.0.tgz.

Evaluation

Your code test will be evaluated against the following criteria:

• Meets the stated requirements.
• Ability to implement and adapt a given design to a responsive design
• Creativity shown in implementing a custom search feature
• Simple over clever
• Understanding of:
  • React fundamentals
  • TypeScript
  • Immutability vs. mutability