Web Development Project 7 - Sanrio Dream Team

Submitted by: Kelly Chan

This web app: lets users create and collect their own Sanrio-inspired characters. Users can add details like name, color, personality, hobbies, and favorite food. They can also edit, delete, and view each character on a separate page. It's a fun way to build a dream team of cute characters!

Time spent: 3 hours spent in total

Required Features

The following required functionality is completed:

• The web app contains a page that features a create form to add a new crewmate
  • Users can name the crewmate
  • Users can set the crewmate’s attributes by clicking on one of several values
• The web app includes a summary page of all the user’s added crewmatese
  • The web app contains a summary page dedicated to displaying all the crewmates the user has made so far
  • The summary page is sorted by creation date such that the most recently created crewmates appear at the top
• A previously created crewmate can be updated from the list of crewmates in the summary page
  • Each crewmate has an edit button that will take users to an update form for the relevant crewmate
  • Users can see the current attributes of their crewmate on the update form
  • After editing the crewmate's attribute values using the form, the user can immediately see those changes reflected in the update form and on the summary page
• A previously created crewmate can be deleted from the crewmate list
  • Using the edit form detailed in the previous crewmates can be updated feature, there is a button that allows users to delete that crewmate
  • After deleting a crewmate, the crewmate should no longer be visible in the summary page
  • Each crewmate has a direct, unique URL link to an info page about them
    • Clicking on a crewmate in the summary page navigates to a detail page for that crewmate
    • The detail page contains extra information about the crewmate not included in the summary page
    • Users can navigate to to the edit form from the detail page

Video Walkthrough

Here's a walkthrough of implemented user stories:

GIF created with Adobe Express

Notes

This was my first project working with a database, so one of the biggest challenges was understanding how to set up and interact with Supabase. Learning how to fetch, insert, update, and delete data asynchronously was new for me, and I had to spend time debugging issues with data not appearing or updating correctly. Another challenge was managing state and ensuring that the UI updated properly after database operations, especially after deletes or edits. I also had to get comfortable using useEffect and useState to keep everything responsive and reactive. Styling across different components posed some difficulty as well. Sometimes changes made in one CSS file unexpectedly affected other pages, so I had to be more intentional about scoping my styles and organizing my CSS to avoid conflicts.

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.