Skip to content

kellykchan/Project6-DataDashboard2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

Web Development Project 6 - Rick and Morty Characters - Data Dashboard

Submitted by: Kelly Chan

This web app: lets you easily browse through all the Rick and Morty characters. You can search by name, filter by status or species, and even pick how many episodes a character shows up in. It also shows some quick stats like how many characters there are and status of those characters, and there's two main statistic charts to show the different spreads of Species and Status. Plus, you get to see their pictures and basic info in a simple, clean layout, or when you click on their names, you get to find more details about them. It’s a fun way to check out your favorite (or weirdest) characters from the show!

Time spent: 1.5 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

Video Walkthrough

Here's a walkthrough of implemented user stories:

Video Walkthrough

GIF created with Adobe Express

Notes

Building this app had its challenges. Figuring out how to fetch data and update the UI smoothly took some trial and error, especially with routing to show character details. Moving styles from inline to CSS was a bit tricky but made the code cleaner. Adjusting the charts so long names didn’t get cut off or overlap took some tweaking. Adding an About page and extra info on the dashboard helped make the app easier to use.

License

Copyright 2025 Kelly Chan

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.

About

Week 7: Project 6 - Data Dashboard Part 2

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published