Volleyball E-commerce Website Personal Practice

Capstone Project at the Workforce Development Agency

In 2024, while taking a course at the Workforce Development Agency, I built this site using my instructor's teaching template, a "drugstore e-commerce site," as the base code. I then redesigned the front end with my own design (at the time, my skills weren't yet good enough to modify the back end). It supports member account creation and login authentication, a shopping cart, and order placement. The back end uses PHP and MySQL, with jQuery and AJAX handling back-end data updates. The front end is plain CSS and Bootstrap. Anyone who has used Bootstrap knows it's a template framework for rapid development: it's fast and looks decent. But customizing it is a real pain, because you have to override styles one by one, to the point that writing styles from scratch would be easier. However, the instructor's code relied so heavily on Bootstrap that rewriting everything wasn't realistic, so I just had to grit my teeth and modify it. After finishing, for practice, I replaced the AJAX on some pages with fetch calls to APIs I wrote myself and rendered the content with JS. Also, besides images from free stock libraries, the product images include some href="https://www.oh9.com.tw/" target="_blank">product photos from a real retailer and game photos of some star players.

Development Process

The instructor started by showing us projects from previous students and gave each of us two sheets of A4 paper to sketch our designs for the final project. One thing that really stuck with me was the instructor saying, "When you go to job interviews in the future, just show them your sketches and the finished product, and they'll definitely hire you!" It filled me with determination at the time. Looking back now, it probably only demonstrates a little design planning ability and the most basic skill of turning a layout into code. Since I love playing volleyball, I naturally chose it as my theme. Once the sketches were done, the instructor collected them and didn't return them until final grading was over (points could be deducted if the finished site differed too much). Over the following months, the instructor taught us page by page, component by component. It was strictly follow-along: we typed the code exactly as shown on the screen, with no copy-pasting. The instructor's approach was to have PHP output HTML structures and SQL strings directly, concatenating them with dots and PHP variables. In places with complex logic, mistakes came easily: a missing dot, an extra space, a loop wrapped around the wrong section, and so on. The stronger classmates could sometimes get it right on the first try, and others would pull them in as helpers to debug together. By the way, the transparent player image in the homepage hero and the background illustration on the product list page were made and drawn by me in Photoshop.

Room for Improvement

The product images don't account for aspect ratio. The containers should have a fixed ratio, with images filling the space and centered. The homepage splash screen should only appear on the first visit, not on every refresh. The image files are all too large and weren't optimized. The layout design is ugly (even though I was very happy with it at the time). The routing for the Class page was never built. I shouldn't have used other people's images without permission. They should all be replaced with free stock assets or standard placeholder images. The site is still on free hosting without an SSL certificate, and it's slow, so I need to find time to migrate it... The list goes on. For now, I'll leave it as is. When I have time in the future, I'll build a separate 2.0 version so I can compare the before and after myself.