tiberiog / reaktor-webapp

Assignment for junior devs at Reaktor, a React, Redux, Saga web application

Reaktor junior dev assignment

This repo contains code written to solve the pre-assigment to apply for the position "2021 Summer junior developer intern" at Reaktor

Brief

Your client is a clothing brand that is looking for a simple web app to use in their warehouses. You need to provide a fast and simple listing page per product category, where is possible to check simple product and availability information from a single UI. There are three product categories for now: gloves, facemasks, and beanies. One requirement is to be easily able to switch between product categories quickly. You are provided with two different legacy APIs that combined can provide the needed information. The legacy APIs are on critical-maintenance-only mode, they have a built-in intentional failure case

Architectural design

My solution consists in a React web application which is responsible of calling the two API and display the reqested info.

Production website

Live version is available at https://reaktorapp.tiberiogalbiati.com/

Screenshot

Implementation details

• Redux state management
• Redux-saga middleware to fetch data and create a local cache
• Automatic retry of fetching data if a error happens
• Products categories can be easily added if needed
• Custom styled HTML table based on a headless library to access data more easily
• Infinite scroll, with automatic load on bottom reached
• Fast switch of categories
• Skeleton loaders for slow API response
• Dynamic display of item colors
• Configured a server-side proxy to handle CORS errors
• Sticky header
• Searching and filtering
• Improved responsiveness
• Test automation

Libraries used

• React
• Redux
• Redux Saga
• Styled Components
• React Table
• react-infinite-scroll-component
• react-loader-spinner

Author

• Tiberio Galbiati