Animal Facts React App
Basic App Functionality: The goal of this app is to display to the user a list of animal facts. The user can upvote and downvote each specific fact to their liking. The user can submit their own animal facts complete with a picture to be displayed in the list of facts.
There are seven components in this app. And this blog will be just breaking their functions down and explaining how they are designed to work.
App is the top most component. App contains Header, Home, FactList, and FactForm. The functionality of the App component is to make the initial Fetch() call to get data from the backend server. The data is then stored in State at this level. App has the function NewFact() to take data from FactForm and to use it to edit the State adding a new fact to the backend server. App contains the routes for address bar navigation.
Header is a container component to store the Navbar component into. It also displays a header message that remains at the top of the App at all times.
Navbar is the component that has the links to take the user through the routes. It uses an import of NavLink to manage this.
Home is a splash page welcoming the user to the app.
FactList is where the FactCard is displayed. It uses a map function to go over the data and separate each fact into something individual that can be displayed.
FactCard is an induvial fact. Depending on how many facts are saved in the backend that is how many facts will be displayed through the FactCard’s. The FactCard displays an image for each fact. The ones initially added to the backend have a picture of the animal discussed in each fact. Then it displays the name of each animal. Then it displays the actual fact. The entire point after all is to display facts. And lastly each FactCard displays a green thumbs up button and a red thumbs down button and a vote counter to know where the count is.
FactForm is where the form for the user to add their own facts is contained. FactForm had three instances of state. One for the facts image, the fact, and the name of the animal. Upon submission a fetch function is called and it makes a POST request to add the data to the backend server. Once added to the server it is then accessible to see in the FactList component.
The HTML for this app was created by the create-react-app call. The only editing of the HTML that was done for this project was adding a link to change the font from Google Fonts.
The CSS the majority of the CSS was also initialized with the create-react-app but the buttons were edited to look how they were envisioned. The upvote and downvote in the FactCard component were made to have the thumbs up and thumbs down emoji. They were color coded to make them visually make sense instantly on sight. The buttons were enlarged just as a style choice. The submit button in the FactForm component was edited for size and style as well. The green was chosen as as simple go reference and just keeping it simple throughout.
