WEB103 Project 4 - Build My Supra

Submitted by: Mycah Accad

About this web app: Build My Supra is an interactive web application that lets users design and customize their own Toyota Supra with a wide range of options. Users can personalize features across exterior, interior, performance, and technology categories, with real-time updates to pricing and selected components.

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

Video Walkthrough

Here's a walkthrough of implemented required features:

Create a new build

User submits a feature combo that is impossible

Edit a build

Delete a build in list view

GIF created with ScreenToGif

License

Copyright [2026] [Mycah Accad]

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.