Marka Promosindo — A Souvenir Catalog That Runs Itself

A marketing site and product catalog for a Jakarta custom-souvenir business. I built the storefront and the CMS behind it, so the owner can update products, prices, and photos on their own instead of calling a developer every time.

The Brief

Marka Promosindo makes custom-printed souvenirs and merchandise: tumblers, kipas, goodie bags, powerbanks, earphones, mostly for corporate events, weddings, and personal occasions. They already had a site, but it was static. Changing a price or adding a product meant editing code and redeploying, and for a catalog that turns over as often as theirs, that got in the way constantly.

The site had to do two things at once: make a small business look as trustworthy as a big one, and be something the owner could actually run. Products, hero images, and FAQs all needed to be editable by someone who doesn't write code, without the storefront getting slower or messier for it.

Visual Direction

Most souvenir vendors look cluttered and interchangeable. I wanted the opposite here: a catalog that reads more like a magazine than a marketplace. The brand's tagline set the tone, "Setiap Momen Layak Dikenang" (Every Moment Deserves to Be Remembered).

Key Pages

Homepage

The homepage walks a visitor through the questions they'd ask anyway, roughly in order. Who is this (the hero, plus a few numbers: 30+ products, 5 categories, fully customizable). What do they make (a category grid). How do I order (three steps, "Pesan dalam 3 langkah"). What's popular (best-sellers). And can I trust them (values and an FAQ), before a final call to action.

Product Catalog

30 products across 5 categories, in a grid you can filter and search. The category chips carry live counts, search updates as you type, and all of it comes from the CMS. Two details I'm happy with: a quick-view modal with the gallery, price, and custom options, and an "Unduh katalog PDF" button that builds a branded, multi-page catalog right in the browser, which is handy when a sales rep needs to send the whole range over WhatsApp.

Ordering over WhatsApp

There's no checkout, because the business doesn't need one. Every "Pesan" button opens WhatsApp with the message already written out: product name, price, size, category. That's how buyers here actually order, and it drops the lead straight into the owner's chat.

Design and Engineering Decisions

A CMS the owner actually owns

I set up Payload with collections for Products, FAQs, and Media, plus a Hero global. The owner adds a product, swaps a photo, or reworks an FAQ from the admin panel, and the live site picks it up. No redeploy, and no me in the loop.

Data fetched on the server

Route loaders in TanStack Start fetch from the CMS on the server, so pages arrive already filled in. That's better for SEO and first paint than shipping an empty shell and hydrating it in the browser.

Filters that live in the URL

Category and search are URL search params, validated where the route is defined. The upshot: filters are shareable, the back button behaves, and there are no surprises at runtime.

Performance and accessibility

Product images lazy-load, every animation checks prefers-reduced-motion, and uploads are optimized with Sharp and served from Vercel Blob.

Mobile laid out on its own

On mobile the hero stack drops away to keep the top of the page clean and the buttons in thumb reach, and the nav becomes a blur-backdrop drawer. I designed each breakpoint on its own rather than shrinking the desktop version to fit.

Tech Stack

Outcome

The result is a real storefront with a CMS the owner keeps up to date without me: 30 products live, WhatsApp ordering, and a catalog they can export and send. It runs as two Vercel deployments, the storefront at marka-promosindo-website.vercel.app and the Payload admin (login-gated). Of everything in this portfolio, it's the project I owned the most of.

At BRI, design and development sit in separate teams. Marka was the opposite: I did the brand, the UI, the frontend, the backend and CMS, and the deployment, and handed over something the business can keep running on its own.