To run this project, just run npm install and once that's done, run npm run dev
- Thank you for the opportunity! This was a fun little exercise, I got my inspiration from Google's color picker, which was why I went with two sliders for the saturation and lightness. I went with react-query to prevent any over-usage of useEffects and provide a clean usage of the API. I also went with useReducer to prevent over-usage of useStates, and keep state management a little cleaner. I also added some fun animations via a familiar library called framer-motion, which just makes render transitions look a little cleaner. To prevent 360 api calls from happening, I implemented a stepwise to prevent any dupe names from coming in per the req, reduce the amount of api calls actually triggered, while also maintaining a solid skip gave a good spread of colors without overwhelming the server/making the user wait a super long time for some data. Now the api still takes a good 4 seconds, which is why I placed a linear progress loader to make it clear it's loading, but with that being said, to somewhat get around longer loading times, I cached the lightness and saturations selections via useRef to provide a quicker response time if the user went back for a prior selection. Had I more time, I probably would have liked to see if it were possible to provide sort of a shadow state of the incoming colors and fill each one in as the respective request finished, but to keep things short and sweet, this was what I went with. Again, thanks for the opportunity!