davidmoed/roundforest

Roundforest take home

Task: Build a responsive e-commerce product page with API communication and state management. You have been tasked with building a product page for an e-commerce website. The page must be responsive, communicate with an API to retrieve product information and use state management to handle user interactions. Here are the requirements:

1. Design: Use your creativity and design skills to create a visually appealing product page. You can use any color scheme and fonts, but make sure the design is consistent and modern.
2. API communication: Use an API to retrieve product information. The API should provide the following information about the product: ● Product Name ● Product Description ● Product Image ● Product Price ● Product Rating (out of 5 stars) ● Product Reviews You can use any API you choose, or create a mock API using a tool like JSON Server.
3. State management: Use state management to handle user interactions, such as adding the product to the cart. You can use any state management library of your choice, such as Redux, MobX, or React Context API.
4. Layout: The layout should be flexible and responsive. The page should adapt to different screen sizes and orientations.
5. Navigation: Include a navigation bar that allows users to navigate to other pages on the website easily.
6. User Interaction: Include at least one interactive element on the page, such as a button or form. Use state management to handle the user interaction.
7. Accessibility: Ensure the page is accessible to all users, including those with disabilities. Use semantic HTML and include alt tags for images.
8. Code Quality: Write clean and maintainable code. Use best practices such as TypeScript, CSS preprocessors, semantic HTML, and appropriate naming conventions. Bonus points: ● Use a CSS framework such as Bootstrap or Materialize to speed up development time. ● Implement a filtering or sorting feature for the reviews. ● Use CSS animations or transitions to enhance the user experience. Deliverables: ● A GitHub repository with your code. ● A live demo of the product page hosted on a public URL. Good luck!