"React"ing to the Front-End

An overview of our components and their relationships.

Our front-end uses React. Why?

• Because dividing our codebase into multiple components makes things easy to maintain and understand.

• We wanted to learn a new technology and see how far it took us.

• Literally every employer wants you to learn it.

Here are our main components, their descriptions, and their props.

Components

HomePageComponent

~	~
Description	Our container component - the root of the application.
Children	NavBarComponent, Route
Props

NavBarComponent

~	~
Description	The horizontal navigation bar component that has Links to other components
Children	Links
Props	None

MemeCardComponent

~	~
Description	The most important component in the application. This is where the majority of the API calls are made and most of the processing is done. This is also where you see the memes.
Children	FavoriteButtonComponent
Props	None

FavoriteButtonComponent

~	~
Description	The button on each image card used to save the image as a favorite.
Children	None
Props	imageURL

FavoriteComponent

~	~
Description	The main view for all of the user's favorited memes.
Children	None
Props	None

CustomFavoriteComponent

~	~
Description	Allows the user to submit their own imageURL to be saved as a favorite.
Children	None
Props	None