WEB103 Unit 4 - Bolt Bucket 🏎️

Submitted by: Duc Tran

About this web app: Bolt Bucket is a car customizer that lets users design their own custom car by choosing exterior color, roof type, wheels, and interior. The price updates dynamically as options are selected, and an SVG car preview changes visually in real time. Users can save their custom cars, then view, edit, or delete them from a list backed by a PostgreSQL database.

Time spent: ___ hours

Required Features

The following required functionality is completed:

• The web app uses React to display data from an API
• Data is supplied to the app using a Render PostgreSQL database
  • The web app uses a Render PostgreSQL database
  • The PostgreSQL database includes a table that matches the data displayed in the web app
• The web app has a well-structured user interface
  • The app provides multiple features of the CustomItem (car) for the user to customize: Exterior Color, Roof Type, Wheels, and Interior
  • Each customizable feature has multiple options to choose from (e.g. Exterior: Black, Red, Blue, White, Silver)
  • The price of the CustomItem changes dynamically as different options are selected
  • The visual interface changes in response to at least one customizable feature (SVG car preview updates color, roof shape, wheel color, and interior color in real time)
• The web app allows the user to save new CustomItems
  • The user can submit their choices to save the CustomItem to the list of created CustomItems
  • Users can view a list of all submitted CustomItems
  • If a user submits a feature combo that is impossible (Convertible roof + Off-Road wheels), they receive an appropriate error message
• Saved CustomItems can be updated and deleted
  • 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

The following optional features are implemented:

• User is alerted to impossible combos early (before form submission)

Video Walkthrough

Here's a walkthrough of implemented required features:

GIF created with LICEcap / ScreenToGif

Notes

The main challenge was setting up the PostgreSQL connection with Render and structuring the Express API routes to correctly handle all CRUD operations. The SVG car preview required careful coordinate planning to visually represent all customization options in real time.

License

Copyright 2026 Duc Tran

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.