Project assigment for Reaktor's junior position.
Open app on Heroku »
A responsive frontend React web application. Instructions for the assignment can be found at https://www.reaktor.com/junior-dev-assignment/
- Three categories of products to display: gloves, facemasks and beanies.
- List of products can be viewed with an infinitely scrolling page. Enjoy thousands of products!
After cloning or downloading the project, install the dependencies with npm install.
Start the project on localhost port 3000 with npm run dev.
Build and serve the project on localhost port 5000 with npm run bns.
Click a category on the navigation bar on the left side to view a product list.
App component uses the useInitData-hook to initialize data. Categories are stored in config.ts from which the category slice of Redux state gets its initial state. Once all the products are stored and an useEffect fires, the hook finds all different manufacturers and stores those in the state. Tracking those with another useEffect, the hook then sends a dispatch to get their availability/stock data from another api endpoint.
Products reducer has two async actions, one for fetching products by category and one for fetching availability by manufacturer.
Once the GetProducts function gets a response, it maps all the returned products so that their availability status is set to loading.
The GetAvailability function runs until it gets a valid response from the api and proceeds turning that data into a record with product ids as keys and Availability enums as values before sending a dispatch to store it.
- Add a search and filters to find specific products.
- Endless scroll hook could use some cleaning up.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent