npm start & visit localhost:3000
Please submit a URL to a private Github repo that accomplishes the swaps display. The codebase should:
- Be bootstrapped by create-react-app, Typescript template.
- Use Chakra-ui components as the primary building blocks. Use styled-components to modify the style of stock Chakra-ui components if needed.
- Minimise repetition by reusing code as much as possible.
- In Figma, orders are represented as squares with random colours. Please generate those colours from a combination of order’s tokenAddress and tokenId.
- Please don’t feel obligated to proceed to the bonus tasks until the main task is perfectly
Bonus task #1 The Figma design is not mobile-friendly. Can you imagine and implement a mobile-first display?
- Response:
- In order to implement a solution that satisfied the constraints of the baseline test I chose not to implement a mobile solution with Chakra UI. The product layout provided and Chakra UI do not complement each other, but yes, I can see a more flexible product solution and implement it programatically. That would have required me to have excluded Chakra UI in the solution, and thus not meet project requirements. I look forward to discussing this further with you and showing you my product approach to this layout during next steps.
Bonus task #2 If Chakra and styled-components are not ideal to implement that design, please explain how you would have implemented it otherwise.
- Response:
- Styled-components, grid and flexbox are more than enough to effectively build the product mockup provided as well as make it responsive and mobile friendly quickly with excellent browser support. Chakra UI proved to be the largest barrier during this project. I look forward to going into more detail to discuss both my coding approach as well as my product approach.