Objective

Create a responsive multi-page app using react-router to display data fetched from an API.

Learning Outcome(s)

• Use react-router to create multiple pages (e.g., contact, about, etc.)
• Clear usage of a component tree to structure data flow.
• Understanding of when and where to use hooks or not.
• Ability to break down a website into reusable components.
• Clear folder structure and architecture.
• Isolated CSS to each component where necessary.

Notes

• Use functional components and hooks to create their projects.
• Dynamically add child components
• Show and hide some elements on screen, conditional rendering
• Filter data and show only relevant content
• Include form as a contact form
• Implement a search function

Resources

• Link to API
• Link to Figma

Criteria for Assessment

• Clear component tree for data flow
• Correct use of react router
• Correct api implementation to meet the project requirements (on page load? after button click?)
• Correct use of hooks and state management
• File architecture is structured and consistent