x1. Project Overview

The Pub Events Booking App is a web-based platform designed to connect pubs, event organizers, and customers in one smooth experience. It allows venue owners to list upcoming gigs, manage bookings, and promote events, while users can browse, reserve spots, and discover live happenings around town. The app aims to simplify event coordination and bring more people together for good times and great music.

2. My Role

As a solo developer and an old-school student of web creation, I began this project the way I always had - by writing HTML first, eager to show something visual to potential clients. At that stage, I wasn't aware that in the industry, there's a whole process before code: user research, UX mapping, and interface design.

Over time, I learned about modern tools like Figma and how UX/UI design plays a crucial role in planning a clear user journey and consistent interface before a single line of code is written. This project became part of that learning curve - blending my coding instincts with structured, design-driven thinking.

3. Tools & Tech

• Figma
• PHP
• JavaScript
• MariaDB
• HTML & CSS
• PowerPoint
• Photoshop

4. Goals

The project aimed to simplify event booking, streamline venue management, and deliver a smooth, uninterrupted user experience. Rather than forcing users to reload an entire page just to view event details, the app introduces a smart dropdown system that displays the information instantly.

This dropdown/drop-up interaction dynamically detects available screen space - expanding upward when space below is limited, and downward when possible - ensuring that event details remain visible and accessible on any device or viewport size.

Beyond functionality, the goal was to demonstrate how a small design decision can significantly improve usability and flow, creating a more enjoyable and efficient experience for both pub managers and customers.

What the project aimed to solve or demonstrate (e.g., simplify event booking, manage venues efficiently, make a smooth user experience)

5. Results / Outcome

The project successfully brought together design awareness and functional coding into one working concept. The dropdown event viewer performed smoothly across different screen sizes, validating the idea that usability can be achieved without overcomplicating the interface.

Through this build, I gained hands-on experience with structuring user interactions before coding, recognizing how thoughtful layout planning directly affects how users feel and navigate through an app.

The Pub Events Booking App now serves as both a demo of technical execution and a milestone in understanding the bridge between traditional HTML-first development and modern UX/UI-driven design - a smooth pour of logic and creativity that captures the spirit of the project.

x1. Planning the Flow

The first step was mapping out how people would use the app - pub owners managing events, and customers browsing and booking. Instead of starting with design software, I sketched rough layouts and thought through the navigation flow in plain HTML structure. This helped visualize the basic interactions early without getting lost in visual details.

2. Designing the Experience

Once the flow made sense, I explored how modern designers plan interfaces before coding. This was when I learned about Figma and how UX/UI design isn't just about looks - it's about predicting how users think, click, and move. I built wireframes to test screen layouts and interaction points before translating them into HTML and CSS.

3. Building the Functionality

With the structure ready, I coded the app's interface using HTML, CSS, and JavaScript, integrating dropdown/drop-up event details for smoother interaction. This feature became a small but meaningful UX improvement - giving users instant access to event info without page reloads. I also kept the layout responsive to ensure a consistent experience across devices.

4. Refining and Testing

Testing focused on how the dropdown behaved in different viewport sizes and scenarios. I adjusted positioning, animation timing, and data rendering to feel natural and consistent. Even though it wasn't a large-scale production app, the iteration process mirrored real-world development - test, tweak, repeat.

5. Reflection

This project was more than just coding - it was about unlearning habits and understanding the design process behind modern web apps. I learned that planning interactions visually before development not only saves time but results in a cleaner, more user-friendly interface. It was a step toward bridging my "old-school HTML-first" roots with a more holistic, UX-aware mindset.

Summary / Takeaway

The Pub Events Booking App project became more than just a technical exercise - it turned into a shift in how I approach building things. I learned to pause before coding, think through the user's path, and design with purpose. Each dropdown, layout tweak, and animation now feels like part of a larger story - a balance between logic, flow, and vibe.

It's a graceful gradation

From hand-coded HTML beginnings to structured design thinking in Figma. A smooth transition from habit to awareness, from doing to understanding.

It's a reminder that progress doesn't always mean starting over - sometimes, it's about refining what you already do well and letting new tools guide you forward.

Contact

Introduction

xxAs part of my UX/UI Design journey on Coursera's Google Professional Certification program, I've been exploring how design decisions shape user experiences and interactions. Throughout the course, I've learned a lot about design principles, wireframing, prototyping, and accessibility, while also developing a strong sense of how to create intuitive and engaging digital interfaces.