Unit 8 (Mini) Project: Build a React App!
Directions
Congratulations! You've made it to the end of our React unit! Now it's time to solidify and extend upon your foundational knowledge by building a small project that pushes you to bring multiple concepts together.
This task is basically a remix on our Unit 6 Project. Your assignment is to build a frontend application that leverages the React library. The requirements of this project are straightforward. You must build a frontend application that fetches data from some external API and presents some novel view or insights based on that data. Like last time, I encourage you to choose a problem, data set, or API that you are personally interested in. However, the curricular focus for this project is your UI. As such, prefer simpler APIs/data sets that you can fashion complex UIs around.
Consider the following APIs:
- Yelp
- Edamam (Recipes + Food Info)
- Open Weather
- Good Reads
- GitHub
- Eventbrite
- 538
- Rap Genius
- Fortnite Stats
There is so much more out there too! Check out this repo of open APIs on GitHub!
Lastly, you can also just refactor your unit 6 project to use React! This is a great opportunity to shore up the UI for that project so that you can add it to your portfolio!
Project Guidelines
While you have learned about a number of hooks, features, and related libraries in the React ecosystem. You will not be tasked with using all of them. There are only three mandatory guidelines:
- Your UI must be composed primarily of functional componets that use React Hooks to maintain state and make your asynchronous requests.
- You must include one class component in your project.
- You must write tests for your components.
Aside from this, consider the following:
- Add some client side routing with React Router.
- Abstract some common logic by creating a custom hook.
- Add type checking with
propTypes. - If you find yourself "prop drilling" use Context to maintain some global state.
Due Date
Monday, May 11 at 9AM