Case study / 02 / Responsive business and marketing website
Yhan’s Catering Services
A responsive marketing website that brings catering packages, menus, past events, booking details, and customer inquiries into one clear experience.
Yhan’s Catering Services / Interface overview
01 / Context
The problem to solve.
The catering business’s packages, menus, event work, booking details, and contact information were scattered across social-media posts and private messages, making it harder for potential customers to understand the full service offering before inquiring.
02 / Approach
From need to interface.
Created one organized marketing website where customers can explore the business, services, packages, menus, past events, service areas, and booking process before requesting a quotation through Facebook.
What I built
- Responsive desktop, tablet, and mobile layouts
- Packages, customizable menus, grazing tables, food trays, and packed meals
- Filterable previous-event gallery and business story
- Service areas, booking process, contact details, hours, and payment methods
- Facebook inquiry and quotation calls to action
- SEO, structured data, sitemap, accessibility, and automated testing
03 / Implementation
How it fits together.
A React 19 and TypeScript single-page application built with Vite 8, Tailwind CSS 4, and React Router DOM 7. Dedicated Home, Packages & Services, Events, and About & Contact routes organize the public content. Locally hosted Fontsource packages provide Inter, Cormorant Garamond, and Great Vibes typography.
Decisions that shaped the build
- Structured content across four focused routes
- Used clear Facebook inquiry calls to action instead of implying online ordering
- Added filterable events and service-specific sections to help customers find relevant information quickly
Challenges
- Organizing a broad service catalog without turning the site into an ordering platform
- Keeping package and event content easy to browse on small screens
- Presenting business information clearly while preserving direct quotation and booking workflows
04 / Delivery & lessons
Built, tested, and still learning.
Testing
Vitest, React Testing Library, jsdom, Playwright, and Axe cover unit, component, end-to-end, and accessibility behavior.
Deployment
Deployed to Vercel through a GitHub-based production workflow.
What I took forward
- A service-business website needs clear boundaries between discovery and booking
- Centralized content reduces repetitive questions before inquiries
- Accessibility, SEO, and responsive behavior are core parts of a professional marketing site