WEB103 Project 4 - Furina Custom Studio

Submitted by: Jingyi He

About this web app: Furina Custom Studio is a React web app where users can create and save custom Furina designs by choosing her alignment outfit, pose, expression, and background. The app updates the visual preview and total price dynamically, saves designs to a PostgreSQL database, and allows users to view, edit, or delete their saved creations.

Time spent: 6.8 hours

Required Features

The following required functionality is completed:

• The web app uses React to display data from the API.
• The web app is connected to a PostgreSQL database, with an appropriately structured CustomItem table.
  • NOTE: Your walkthrough added to the README must include a view of your Render dashboard demonstrating that your Postgres database is available
  • NOTE: Your walkthrough added to the README must include a demonstration of your table contents. Use the psql command 'SELECT * FROM tablename;' to display your table contents.
• Users can view multiple features of the CustomItem (e.g. car) they can customize, (e.g. wheels, exterior, etc.)
• Each customizable feature has multiple options to choose from (e.g. exterior could be red, blue, black, etc.)
• On selecting each option, the displayed visual icon for the CustomItem updates to match the option the user chose.
• The price of the CustomItem (e.g. car) changes dynamically as different options are selected OR The app displays the total price of all features.
• The visual interface changes in response to at least one customizable feature.
• The user can submit their choices to save the item to the list of created CustomItems.
• If a user submits a feature combo that is impossible, they should receive an appropriate error message and the item should not be saved to the database.
• Users can view a list of all submitted CustomItems.
• Users can edit a submitted CustomItem from the list view of submitted CustomItems.
• Users can delete a submitted CustomItem from the list view of submitted CustomItems.
• Users can update or delete CustomItems that have been created from the detail page.

The following optional features are implemented:

• Selecting particular options prevents incompatible options from being selected even before form submission

The following additional features are implemented:

• Added a custom 404 Not Found page for incorrect URLs.
• Added browser tab titles for different pages.
• Added a live visual preview using layered background and Furina images.
• Added dynamic total price calculation.
• Added a reusable form component for both create and edit pages.
• Added frontend and backend validation for impossible combinations. Added a blue-themed responsive layout.

Video Walkthrough

Here's a walkthrough of implemented required features:

GIF created with ScreenToGif

Notes

Describe any challenges encountered while building the app or any additional context you'd like to add.

License

Copyright [2026] [Jingyi He]

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.