WEB103 Project 2 - Ballon d'Or Catalogue

Submitted by: Don Destin Iriho

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 is a fully static site — the catalogue ships with the client and all searching and filtering happens in the browser, with no backend server or database.

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 a fully static site — no backend server and no database
• The list items are defined in the client and rendered into cards at runtime

The following optional features are implemented:

• The user can search for items by a specific attribute

The following additional features are implemented:

• Search, club, nationality, and year-range filters all run client-side with no network requests
• Added responsive card-based styling for desktop and mobile screens
• Builds with Vite to a self-contained dist/ folder that can be dropped on any static host

Video Walkthrough

Here's a walkthrough of implemented required features:

Link:

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

Running it locally

The whole app lives in ballondor/client:

cd ballondor/client
npm install
npm run dev      # local dev server
npm run build    # outputs the static site to dist/
npm run preview  # serve the built dist/ folder

The catalogue data lives in src/js/data.js. Add or edit entries there and rebuild.

Notes

This project previously ran an Express server backed by a Render PostgreSQL database. That service has been removed — the winners list now ships with the client and the site makes no network requests of its own.

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.