Building TV Samadhi: a live-first home for a community broadcaster

A community that lives on Facebook

TV Samadhi describes itself as Sri Lanka's cultural heartbeat: traditional performances, music and community moments, shared live from Matara. Its audience of more than 11,000 people follows it on Facebook, where the broadcasts happen.

That is a strength and a risk. Facebook is where the community is, but a page is rented space. There is nowhere to publish longer stories, nothing that shows up well in search, and no home that TV Samadhi fully controls.

The brief was to build that home without creating extra work. The website had to:

• show, immediately, when TV Samadhi is live
• bring Facebook posts onto the site automatically
• run a real blog with SEO, images and scheduling
• give the team analytics and control from one admin
• keep that admin genuinely secure

Every part had to run on its own. A small team streaming events does not have time to copy posts between platforms.

A homepage that feels like a broadcast

The design is built around the feeling of a live stage.

Soft beams of light move behind the hero, rendered in WebGL in warm gold and cool blue. The headline types itself out, the logo sits inside thin concentric rings, and the tagline is simple: A little closer to home. Next to the contact button, a Facebook button takes visitors straight to the page, alongside the size of the community and the location.

Three details matter more than the effects:

• A pause control. One button pauses the hero's animations, for visitors who prefer less motion and for phones that need to save battery.
• Motion that respects settings. The typewriter and the light beams follow the system's reduced-motion setting, and the typewriter stops when it is off screen or the tab is hidden.
• Real theming. Light and dark themes, switchable at any time.

Knowing when TV Samadhi is live

The most important feature is also the simplest to use. When TV Samadhi goes live on Facebook, the website knows.

A "We're live, watch now" button appears in the hero. It opens the live stream in a player on the site, so visitors can watch without leaving.

Behind it, the sync checks the page's live videos. When a broadcast is running, it stores the stream's details and marks the site as live. When the broadcast ends, it only switches the live flag off and keeps the last broadcast's details, so the site can still show what was streamed most recently.

Facebook content, pulled in automatically

Connecting Facebook takes one click in the admin: Connect with Facebook runs the standard login flow, exchanges the short-lived token for a long-lived one, and lets the team pick the page. A page token can also be pasted manually if needed.

From then on, each sync:

• pulls the latest posts with their text, images, links and counts of likes, comments and shares
• checks whether the page is live
• saves a daily analytics snapshot of followers, impressions and engaged users
• refreshes only the parts of the site that show Facebook data

Two choices keep it robust:

• Analytics are optional. If analytics access has not been granted, that part is skipped and the posts and live status still sync.
• Failures are visible. The admin shows the last sync time, whether it succeeded, and the exact error when it did not.

The team decides how fresh the data should be. The refresh interval can be set anywhere from 5 minutes to 24 hours, automatic syncing can be switched off, and a Sync now button is always available.

A blog built for search

Facebook posts are short and disappear from feeds quickly. The blog is where TV Samadhi's stories can live on and be found through search.

The publishing system includes:

• a full editor with categories, cover images, SEO titles and descriptions
• Markdown rendering that is sanitised before display, with code highlighting
• reading times, view counts and related posts
• scheduled posts that publish themselves at the chosen time

Performance comes from tagged caching. Public blog pages are served from cache, so they stay fast between edits. Saving a post clears exactly the cached pages it affects, so changes appear immediately instead of waiting for a timer.

The admin dashboard also runs content health checks, flagging posts that are missing a cover image, a category or an SEO description. Building those checks revealed a subtle database detail: MongoDB treats a field that was never set differently from a field set to empty. The checks handle both, so no post slips through.

Media on a CDN

Images upload directly from the browser to Cloudflare R2 through short-lived signed upload links, then load for visitors from a CDN.

One deliberate restriction: SVG uploads are blocked. An SVG file can contain scripts, and anyone who opened an uploaded SVG directly would run that script. For a media library, blocking the format is safer than trying to clean every file.

The media library also lets the team write alt text for every image, which helps both accessibility and search.

An admin locked down properly

Admin panels for small organisations are often the weakest point of a website. This one was built to a higher standard:

• Passkeys. Admins can sign in with a passkey, using a fingerprint, face or device PIN instead of a password. Sign-in challenges expire after five minutes and are only accepted from trusted origins.
• Sessions that can really be revoked. Each sign-in creates a session cookie backed by a session record in the database. Signing out, or revoking every session, takes effect immediately instead of waiting for a token to expire.
• Two rate limits. Failed sign-ins are limited per email address, which stops attacks on one account, and per network, which stops one attacker trying many accounts.
• No account guessing. When someone tries to sign in to an account that doesn't exist, the server still runs the full password check, so response times don't reveal which accounts exist.
• Private security logs. Security records keep keyed hashes instead of raw email and IP addresses, and store only a short summary of the browser instead of its full fingerprint.
• An audit trail. Security-relevant events are recorded for later review.

The passkey and privacy logic is covered by automated tests.

The stack

• Next.js 16 and React 19, with Tailwind CSS v4
• MongoDB with Prisma 6.19, the recommended Prisma version for MongoDB while support in Prisma 7 is completed
• Cloudflare R2 for media
• GSAP, Motion, Lenis and a lightweight WebGL library for the visuals
• Zod and React Hook Form for validated admin forms
• Vitest for the security-critical tests

What it adds up to

TV Samadhi now has a home it owns: one that shows when it's live, keeps itself updated from Facebook, gives its stories a searchable place to live, and keeps its admin safe.

For many creators, community pages and media brands, the job of a website has changed. It no longer needs to be a brochure. It needs to connect to the platforms where the audience already is, and run itself.