Homepage
The countdown banner spans the full width of the page to ensure visibility and used #C0392B to create contrast while still complimenting the brand colours.
Goal: Create a simple, easy-to-use online catalogue and order system. Vendors will each have their own profile and list of products. Customers will be able to browse items, add them to cart and place an order for pickup.
Role: Designer & Developer
Technologies: HTML, CSS, JavaScript, MySQL, PHP
Project Type: Academic Project
Completed: December 2025
View on GitHub Visit Link
The countdown banner spans the full width of the page to ensure visibility and used #C0392B to create contrast while still complimenting the brand colours.
Chose to include each of the vendors logo for easy distinction and representation.
Utilized flex to emphasize each individual vendor description while showcasing their products. The booth number is shown with #C0392B for contrast and clarity.
Pagination was used for showing products at a limit of 24 at a time.
Achieved this by writing queries to pull data from phpMyAdmin for product variants and used JavaScript to make the product image dynamic with the chosen variant.
Chose to display the products in each category the same as the products page to make it cohesive.
Chose to conclude the about page with direct links to Vendors and Products to align with user intent and provide a clear next step, reducing friction and supporting intuitive user flow.
Positioned the cart items alongside the checkout form to reinforce purchase confidence by allowing users to confirm their selections while completing their order.
A personalized order confirmation reassures users their submission was successful and improving overall user experience.