Open to new opportunities
Looking forward to contributing to a team that values thoughtful engineering, collaboration, and continuous learning.
Full-Stack Developer
Project 01 · Team / Academic
Custom WordPress and WooCommerce café website with interactive product customization.
BCIT Café is a custom WordPress and WooCommerce website developed as a team capstone project in BCIT’s Front-End Web Development program. The project focused on creating a responsive, easy-to-manage café storefront that supports product discovery and customization, while applying industry-standard development practices, collaborative workflows, and user-centered design.
Frontend Development & Team Coordination
As a frontend and WordPress developer, I was responsible for building key customer-facing features and establishing reusable UI components. I also coordinated task assignments, managed Jira tickets, and facilitated daily team meetings to track progress, discuss blockers, and keep development aligned with project deadlines.
I established the site’s foundational design system using `theme.json`, including typography, colors, spacing, and layout, and developed reusable UI components such as CTA sections and product cards. I built the Home and Menu pages, implemented product category filtering and the product grid, and developed a custom product modal integrated with WooCommerce. I also configured product categories, attributes, and variations, and implemented responsive layouts for the primary customer-facing pages. Beyond development, I coordinated task assignments among team members, organized and tracked Jira tickets, and hosted daily check-ins to share progress, identify blockers, and support collaboration throughout the project.
03 — PROBLEM SOLVING
WooCommerce's default product page did not fully support the intended ordering experience, particularly the need for customers to customize products without leaving the Menu page.
Built a custom product modal integrated with WooCommerce's Store API, allowing customers to view product details and configure options within the Menu page. The mobile layout was designed to feel closer to a native food-ordering application.
Developing multiple customer-facing pages within a team required consistent typography, spacing, colors, and reusable interface patterns.
Multiple features and dependencies needed to be managed within a limited project schedule, while keeping team members informed of progress and blockers.
04 — DEVELOPMENT
One of my main contributions to BCIT Cafe was developing a custom product modal that allows customers to explore products, configure available options, and add items to their cart without leaving the Menu page. The implementation combines WooCommerce product data with a custom JavaScript interface to provide a streamlined, responsive ordering experience.
SYSTEM ARCHITECTURE
The custom product modal connects the Menu page with WooCommerce's Store API, allowing customers to view product details, select variations and add-ons, and add configured products to their cart without leaving the page. Product information and customization options are managed through WooCommerce, while the custom JavaScript interface provides a streamlined ordering experience.
IMPLEMENTATION NOTE
The custom product modal builds a cart payload using the selected product and quantity. For variable products, it also collects the selected attributes and their values, allowing customers to configure products directly from the Menu page without navigating to WooCommerce's default product detail page.
// Build the cart payload
const payload = {
id: isVariable ? modalState.variation.id : product.id,
quantity
};
// Include selected product variations
if (isVariable) {
payload.variation = [
...modal.querySelectorAll(
'.product-modal__variation-button.is-selected'
)
].map(option => ({
attribute: option.dataset.attribute,
value: option.dataset.value
}));
}Developed a custom product modal using JavaScript and WooCommerce's Store API to display product information and support product customization directly within the Menu page. Implemented responsive modal layouts and handled product configuration through WooCommerce's existing product data and API functionality.
05 — VISUAL SHOWCASE
Screenshots and demonstrations support the technical story rather than decorate it.
Menu page · Product discovery and category filtering
Mobile product modal · Responsive ordering experience
Product customization · Variations, add-ons, and dynamic pricing
Reflecting on the outcomes, lessons learned, and opportunities for improvement.
Delivered responsive Home and Menu pages with reusable product cards and a custom product detail modal. Rather than relying on WooCommerce’s default product page experience, the modal provides a more streamlined ordering interface inspired by familiar food-ordering platforms. On mobile, the modal uses a near-full-screen layout with a small portion of the underlying page remaining visible, creating a more app-like interaction. The instructor also gave positive feedback on the visual quality of the implementation compared with previous student projects.
This project reinforced the trade-offs between design flexibility and long-term maintainability. While plugins can accelerate development, they do not always support highly customized user experiences. Building custom solutions offers greater control, but also introduces maintenance responsibilities and potential compatibility risks when third-party platforms are updated. I learned that choosing a technical approach requires more than achieving the desired design. In a real client project, the benefits, limitations, and ongoing maintenance costs should be discussed before committing to a heavily customized solution.
A future iteration could explore a more distinctive visual identity and richer interactions, while preserving the straightforward ordering experience and ease of maintenance.
Created reusable page components and established the site's foundational design system using WordPress theme.json. Defined shared typography, colors, spacing, and layout settings to maintain consistency across pages while allowing content to be managed through the WordPress block editor.
Configured WooCommerce product categories, attributes, and variations to support the café's customizable menu. Developed product category filtering and a product grid, connecting the customer-facing interface with product information managed in WordPress.