Submitted by: Nathan Espina

This web app: Contains an additional features page that users can access through a link, and two rechart graphs that show the calorie and ingredient count for each recipe

Time spent: 4 hours spent in total

Required Features

The following required functionality is completed:

• Clicking on an item in the list view displays more details about it
  • Clicking on an item in the dashboard list navigates to a detail view for that item
  • Detail view includes extra information about the item not included in the dashboard view
  • The same sidebar is displayed in detail view as in dashboard view
  • To ensure an accurate grade, your sidebar must be viewable when showing the details view in your recording.
• Each detail view of an item has a direct, unique URL link to that item’s detail view page
  • To ensure an accurate grade, the URL/address bar of your web browser must be viewable in your recording.
• The app includes at least two unique charts developed using the fetched data that tell an interesting story
  • At least two charts should be incorporated into the dashboard view of the site
  • Each chart should describe a different aspect of the dataset

The following optional features are implemented:

• The site’s customized dashboard contains more content that explains what is interesting about the data
  • e.g., an additional description, graph annotation, suggestion for which filters to use, or an additional page that explains more about the data
• The site allows users to toggle between different data visualizations
  • User should be able to use some mechanism to toggle between displaying and hiding visualizations

The following additional features are implemented:

• Used useLocation() to access data from the previous page to improve loading time on the additional features page

Video Walkthrough

Here's a walkthrough of implemented user stories:

GIF created with ...

ScreenToGif for Windows

Notes

The react-router-dom felt pretty intuitive for me, and it didn't end up being too much of an issue. I had more trouble trying to navigate through using the recharts library since I had limited practice with it. Eventually, I did get through it.

License

Copyright 2025 Nathan Espina

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.