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.