This small React app is an exercise to display data that was pulled from an external site using an API. I chose the cat facts website (https://meowfacts.herokuapp.com/), which displays a new cat fact on each request.

This was created to submit for an assignment in Module 15 of the MIT xPRO Full Stack Development course (Fall 2022).

The requirements for the assignment are listed below:

By now, you know how to fetch, manipulate, and render data from an external source. In this challenge, you may refactor the Fetching Data From Hacker News exercise or create your own project that fetches and renders data from an external source with React. Consider the following when planning your project:

• Data source: Fetch data from an external source and build a site and user experience around those data. Review this list of public APIs (Links to an external site.) for inspiration.
• Data rendering and manipulation: Organize and display the data you fetch in a way that is appropriate to the story you are trying to tell with the data (e.g., you would likely display weather data differently than a list of books). In this case, it is important to ensure that your React components are clean and organized. This is an opportunity to practice with useEffect and useReducer.
• Styles: Explore Bootstrap themes to style your site and display your data. Reflect on common conventions you’ve experienced on websites as a user and try to replicate what seemed intuitive to you.

View live project here. Alternatively, you can download the source code and run it on a local http-server.