My goals in working on this app were as follows: to practice working with React Context API to manage data in a simpler & more efficient way than prop drilling, practice working efficiently with RESTful APIs (2 different ones used in this app), practice working with React Router, practice using React hooks (both custom & native), & to practice writing clean code.
From the users' perspective, the app presents info on the national parks of the United States. I used data from the National Parks Service API to display a card on the homepage (not all at once; user can choose to load more by clicking a button the displays as they scroll down) for each park. To get data on only national parks & not on all parks included in the API, I had to limit the results to only parks whose designation contained the strings "National Park" or "National and State Parks", which was easy to do by using a .filter() method on the data returned by the API. Since there are over 60 parks, I built a tool by which users can filter parks by state or territory, as well as search funtionality, whereby users can see parks that meet at least one of several criteria.
These park cards on the homepage contain (an) image(s) of the park (which the user can click through one at a time if there are more than one), the park name, location (in terms of states/territories), a brief description, & a button that will render a component containing further info on the park (React Router is used to give this "page" its own URL). In order to load this component for a given park, I made use of the useParams hook. In addition, some images for some parks that are contained in the API no longer exist, i.e., return a '404' error when fetched or applied to an image's 'src' property. To alleviate this, I used a callback function in the image tag's onError property to call the next non-erroneous image in the order in which the user was scrolling through the images. The end result of this is that only images will display, not their alt text in the event that the images don't exist.
On each park's page, users can see the name, location (states/territories (some JS was used to make list display in a nicer way than what was provided by the API), latitude & longitude), as well as any current alerts for the park & how long ago this info was updated. To accomplish this, I took the date string provided by the API & performed some wizardry on it, which involved parsing a Date object from it & converting it & the current time at which the user rendered the page to UTC, then doing some math in order to display how many days, hours, & minutes passed since the alert had been updated. The user can also see the current weather conditions in the park, the information for which I got by passing in the park's longitude & latitude to an API request that returns weather info for the park at the most recent quarter of an hour. I also provide a link to the park's Google Maps page, which opens in a new tab should the user click it. As the user scrolls down, they can see another click-through-able slideshow of park images next to the park's description & general weather information. Further down the page, users can see activities, costs of entry, available passes, contact information, & nearby parks (links to parks in same state(s)/territory/ies, if any, in the form of a condensed version of park cards as compared to those on the homepage).
In addition to browsing info on all the parks, users can test their knowledge by playing a quiz, for which I created my own questions (maybe by reading one of these in particular, you can guess which state I'm from). The quiz is pretty simple; users can play a round of 15 or 30 questions, after which, they find out how they did. A random pool of questions is selected for the round, and answer options also display in random order. Upon selecting an answer, the user can see if they were right or wrong by observing the right answer displaying with a green outline, & the answer they selected, if wrong, displaying with a red outline. In addition, if the question object includes a "comment" property, this will display once the user selects an answer. These comments simply provide additional info on the piece of trivia in question.
WHAT I LEARNED:
I learned a lot in this project about different things that can be done to limit requests made to an API, which could save money in the case that a paid API is used. On this particular project, I make one request to the NPS API when the app first loads, and this returns all info for the national parks in the API. I then work with this data returned by the initial fetch to display search/filter results & the park page for a given park. In relation to the individual park pages, the page is populated with pertinent data, which is filtered out of the data hauled in by the initial fetch, unless that doesn't exist yet (e.g., the user navigates directly to a park page without having loaded the homepage), in which case, data for only the given park is fetched directly from the API. I set up the logic for this functionality inside of a useEffect hook in the component for park pages.
I learned the value of working with React Router in helping reduce renders by using the component in the react-router-dom library, instead of tags. Using also eliminates the need to figure out file paths relative to the file in which is used, which can save some time. One thing I had to learn the hard way was that any paths in Router that begin with "/" are absolute, & any that don't, are relative.
Finally, various JavaScript principles, as well as ability to set up contexts with React Context API, the ability to write efficient (yet readable) code, & the ability to provide a good-looking UI/UX via CSS (and a bit of JS ;), including applying principles & practices to make the site display well on desktop, tablet, & phone screens, were enforced.
If you are kind enough to check out the project in action or read through my code, I'd love to hear you roast it or praise it. I'm always open to feedback on what I am doing well & on things I can improve on.