This project was bootstrapped with Create React App.

Clone the repo

npm install

npm run start

Open http://localhost:3000 to view it in the browser.

Home (/): Show all the gnomes and a brief detail of them. You can also filter using the searchbar.

Detail (/gnome/:id): Show all the information of the specific gnome. You can also navigate to her friends cards!

404 (/NoMatch): If something goes wrong, you will be redirected here.

In the Home there are 1337 cards. When scrolling, everything is very fluid (specially at smartphone) because DOM only load ~14 cards.

Thats because the DOM virtualization:

When clicking friend links in any gnome detail, there is a Higher Order Component that inject getByName method.

getByName() method search the link name in the gnomes array and return that gnome object.