Kuya Carlos
Back to projects
Client project

K & K's Events: Marketing Site & Custom CMS

K & K's Events is an event styling team in Sta. Rosa, Laguna. I built their public website and the admin panel behind it, so the owner can publish events, moderate reviews, manage bookings, and edit every piece of site copy without touching code.

50+
events styled
5.0
average review
4 years
styling

Figures published by the client on their own homepage.

Why I built it

The owner's work changes constantly — new events most months, new photos, and client reviews sitting buried in Messenger and Viber threads. A hand-coded site would have meant emailing me every time a price changed. They needed to run the site themselves.

Project goal

Give a non-technical owner full control of their own website, while keeping the public site fast and impossible to break from the admin side.

Project overview

Client
K & K's Events
Type
Marketing site + custom CMS
Role
Solo full-stack
Status
Live in production
Architecture
Static-first hybrid

What it does

  • Public marketing site with a story page for every event
  • Passwordless admin panel controlling all site content
  • Contact form with lead pipeline and email alerts
  • One-time review invite links with a moderation queue
  • First-party, cookieless analytics dashboard

Key screens

The public site

The site visitors actually see.

  • Single scrolling page — hero, services, gallery, testimonials, about, FAQ, contact.
  • A portfolio index of every celebration, sortable by date or grouped by category.
  • Every section is editable from the admin panel, with no rebuild.

An event story page

Every published event gets its own page.

  • Title, theme, and the write-up the owner entered in the admin.
  • The colour palette pulled from the event's own photos, with hex codes.
  • Event details, styling tags, the full photo and video gallery, and the Facebook post.
  • The one route that renders per request — a new event is live the moment it's saved.

Login

No passwords are stored anywhere.

  • Enter an email, get a 6-digit code, exchange it for a 7-day session.
  • The flow never reveals whether an email address exists.

Dashboard

The landing screen summarises everything needing attention.

  • Unread inquiries, upcoming events, active leads, and pending reviews at a glance.
  • Pin any upcoming event as the spotlight shown on the public homepage.
  • Recent activity log of every content change.

Palette Studio

Pull an event's colour story straight out of a photo.

  • Extracts the dominant colours from any uploaded event photo, in the browser.
  • Tap anywhere on the photo to sample that exact pixel.
  • Up to 10 swatches, saved to the event.
  • Last slide is the result: the same palette live on that event's public page.

Reviews

Client testimonials pass through moderation before going public.

  • Approve, hide, edit, or attach an event photo to any review.
  • Generate a one-time invite link and a ready-to-paste Viber/Messenger message.
  • The client opens it, leaves a rating and quote, and it lands in the queue.
  • Links are single-use and expire.

Schedule

The booking calendar for confirmed events.

  • Colour-coded by status: Planning, Set-up, Inquiry, Done.
  • Warns before you double-book a date that already has an event.
  • Edit any booking inline, or block out unavailable dates.

Inquiries

Leads from the contact form land here with a status pipeline.

  • Track each lead as New, Replied, Booked, Declined, or Archived.
  • Reply with saved message templates, or push it straight onto the schedule.
  • The owner gets an email the moment a new inquiry arrives.

Analytics

A private, cookieless analytics dashboard built in-house.

  • Visitors, pageviews, top pages, referrers, locations, and device split.
  • Business metrics: inquiries over time, booking conversion, most-requested event types.
  • No cookies, no consent banner, no third-party tracker.
  • Superadmin-only by default, with a server-enforced toggle to open it to other admins.

Services & FAQ

The offer and the answers, both editable.

  • Edit service copy, what's included, photos, and add-ons.
  • Add, reorder, and unpublish FAQ questions with drag-to-reorder.
  • The editor explains its own layout — it tells you a service with no photos renders as a full-width text row on purpose, not as a gap.

Showcase

The photo carousel at the bottom of the public site.

  • Curate the photo set and the heading visitors see.
  • A live, resizable preview of the real component at mobile, tablet, desktop, and wide.
  • Every change saves automatically.

Settings

Business info, team, and disaster recovery.

  • Edit business name, tagline, cities served, logo, and contact channels.
  • Invite teammates, assign roles, and disable access instantly.
  • Download a full JSON snapshot of every table.

Same build, on a phone

The owner runs the whole thing from her phone browser.

Under the hood

01

The site can't be taken down by its own backend.

Every public section renders twice from one source — once at build time into static HTML, then again in the browser, patching the page only if the data actually changed. The owner edits a price and visitors see it without a rebuild. If the API is cold or down, the fetch quietly fails and visitors keep the build-time content. They never see a broken page.

02

A new event is live the second it's published.

Prerendering everything meant a freshly published event would 404 while the rebuild ran. One route renders per request instead. That cost latency — the API is in Oregon, the database in Singapore, so the naive version put every visit around 2s against the 0.78s a static CDN file managed. Caching the response at the edge fixed it: the first visitor after a change pays the round trip, everyone else is served at static speed. Measured after shipping: ~0.86s warm, confirmed cache hit.

03

No passwords are stored anywhere.

A 6-digit code is emailed, verified server-side, and exchanged for a 7-day token. A superadmin can invite teammates and revoke any active session instantly by bumping a token version the server checks on every request. Around it: rate limits on the contact form and login, a bot check in front of the contact form, and a Content-Security-Policy minted per request with a nonce — so the site's inline scripts run without unsafe-inline in the policy.

Tech stack

Astro 7React 18TypeScriptExpress 5PostgreSQLPrisma 7CloudinaryResendPlaywrightVercelRender

The public site is prerendered to static files and refreshes its content in the browser, so it stays online even if the API is down. Login is passwordless. Media uploads go straight from the browser to Cloudinary and never pass through the API server. The analytics charts are hand-drawn SVG — no charting library, no UI kit anywhere in the project.

~40 hand-built components 14 database models automated database backups, with a restore drill that was actually run

Need something similar?

This was built for a real business that needed to run its own site. If you want a marketing site with a CMS your team can actually operate — or want to talk through a custom build — reach out.