WEB103 Project 2 - Ballon d'Or Catalogue

Submitted by: Don Destin Iriho

About this web app: About this web app: This website is a Ballon d’Or Winners Catalogue that lets users explore football players who have won the Ballon d’Or award throughout history. It displays each winner in a player card showing their name, nationality, club, and winning year. It used a postgresSQL fetch mechanism instead of just having the databse hardcoded locally.

Time spent: 7 hours

Required Features

The following required functionality is completed:

• The web app uses only HTML, CSS, and JavaScript without a frontend framework
• The web app is connected to a PostgreSQL database, with an appropriately structured database table for the list items
  • 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.

The following optional features are implemented:

• The user can search for items by a specific attribute

The following additional features are implemented:

• Added a database seed script that creates and populates the list_items table
• Added environment variable support for Render PostgreSQL credentials
• Added responsive card-based styling for desktop and mobile screens
• Added client and server npm scripts for local development and production builds

Video Walkthrough

Here's a walkthrough of implemented required features:

Link:

https://drive.google.com/drive/folders/1UoUJeBwJbsZYuXHXL9cdQe0FTD1Lju8m?usp=sharing

Notes

none

License

Copyright [2026] [diriho]

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.