Minifigs
Get your own Harry Potter for free 😉
Story
Have you ever dreamt that with just a few clicks you could become a happy owner of Harry Potter figurine? Surely, you haven't. And now I've made it happen. Of course not me alone, the site owners have biggest and primary contribution, there is no doubt about it. My role was to create a page where users could request a free bonus Harry Potter minifig from online store of https://rebrickable.com/. Why just Harry Potter? It remains a sweet secret of the hiring company staff. Currently, the programme strictly follows the task requirement of selecting HP; however, in the coming weeks, I hope to include a selection tool for individuals who do not like the Young Wizard from Hogwarts.Tech
The hardest aspect was retrieving data. Rebrickable had only recently launched V2 version of their API and one could not get what needed with just a single request. One must fetch data pages one by one and extract HP-related records. Furthermore, admin imposed restrictions in requests rate, what altogether makes the application needs more then 1 minute to collect all data. Considering the foregoing, as well as the fact that each set held also vital elements of its successor URL, I decided to write a custom thunk function based on Axios.
To keep the client waiting so long, I have decided to add the functionality of displaying both set number and latest figurine.
Initially, three figurines are drawn from the fetched set, and it's up to the customer to choose one. Having that done, user is taken to a third page with detailed description of the figurine's parts and promted to provide dispatch details. The entered data is subject to rigorous validation using powers of react-hook-form. After auspicious validation, the request with both customer and figurine details packed with FormData is sent to the fake API, and if processed OK, an adequate message is displayed.
As the app, in general, displays images, there is logic in place to wait for all of them to load before displaying them in order to avoid screen blinking. The data on each page is kept persistent allowing users to navigate between the pages without losing content.
The application requires an API key, which presence is checked at an early stage to prevent consequent errors. That may appear redundant, but it is useful if someone copies the repository content and builds app in their own environment.
The software is designed relatively persistent to avoid loosing long-fetching data when navigating between pages
For the future: now that app follows strictly task requirement of selecting HP. I'd like to add selection options.