gzakhar88/paf-frontend-exercise-master

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. [X]
2. Use modern CSS to produce the layout with a mobile first approach [X] 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 [X]
4. Use React to generate the elements/components based on the fetched JSON-data. [X]
5. Create a search/filter component based upon the JSON-data. [X]

• Implement your own design for the search/filter component[X]
• Should be a component[X]
• Should filter the JSON-data based on user input [X]
• Should display up to 10 previous searches [X]
• Should persist search history on reload [X]
  Don't use autocomplete="on" [X] //Turned OFF manually!

Author your solution in the following places:

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

Getting started

There are two avaliable development environments

• Localhost
• Code Sandbox

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-1.0.0.tgz.

Sandbox

This is the web based setup that only requires a modern browser to get you started.

1. Open a new Codesandbox.
2. When done, send us your Codesandbox-link.

Solution

https://codesandbox.io/s/y2kc6