Designed and built a React-based interactive game for participatory health education, replacing physical materials across 255 school deployments.

Building an Interactive Game for Participatory Health Education

Designed and delivered a clinical module on vaping health effects, then trained ~100 final-year pharmacy students to facilitate it across 255 school deployments.

Training 100 Future Pharmacists to Teach What Vaping Does to the Body

Designed and deployed a fully automated product warranty system handling customer registration, multi-step validation, WhatsApp-based activation messaging in Malay, and admin notifications.

Nadi: End-to-End Warranty Automation for a Malaysian Product Company

Designed and built a modern SaaS landing page with an AI-powered chatbot for a Malaysian custom labels and branding business.

SaaS Landing Page & AI Chatbot for a Custom Labels Business

Reflections from facilitating an emotional resilience workshop for vocational students. On teaching coping skills, bullying intervention, and showing up for young people.

When Life Gets Loud: Reflections from MyPEACE at Kolej Vokasional Sepang

A clinician's perspective on Malaysia's 999 emergency system. What it feels like to call it as a doctor, what's broken for laypeople, and a working proof of concept built in 24 hours on a home server.

Redesigning NG-999: What a Next-Generation Emergency System Could Look Like

A bilingual clinical tools platform built with Next.js 14, featuring neobrutalism design, English/Malay support, and Docker-ready deployment.

DrMSR Clinical Tools: Bilingual Clinical Platform

System designs for a geospatial analysis platform detecting regulatory violations on protected land, and an AI-assisted content monitoring pipeline with human-in-the-loop editorial review.

Geospatial Oversight & AI Content Monitoring: System Design for Civic Infrastructure

Built and operated the complete production pipeline for a weekly subscriber newsletter serving 2,200+ subscribers, covering editorial coordination, template engineering, asset delivery, and SMTP relay management.

End-to-End Newsletter Engineering: From Editorial Workflow to Inbox

Designed and operated a self-healing deployment architecture that kept a civic publication accessible despite active DNS-level blocking by a national regulator.

Outrunning the Block: Ephemeral Deployment Architecture for Censorship-Resistant Publishing

Conducted a comprehensive open-source intelligence profile on a Malaysian SME, synthesizing findings from 15+ data sources across two languages to produce a structured dossier with confidence-graded assessments.

Corporate Intelligence & OSINT Research

DRMSR Digital & Health Solutions is now live. Medical intelligence meets intelligent automation.

Welcome to DRMSR

We review your team's workflows and identify where generative AI tools can create immediate, measurable improvements.

AI Workflow Consulting

Bridging the gap between clinical practice and AI systems. Built by a doctor who codes.

Healthcare AI Integration

Cloud architecture, API integrations, and automation pipelines. Infrastructure that runs itself.

Digital Infrastructure & Automation

A 5-machine Tailscale mesh running a self-hosted deployment platform, Traefik, MinIO, a WhatsApp API gateway, and monitoring infrastructure. Includes a real security incident response to CVE-2025-66478 that validated the architecture's resilience.

Self-Hosted Infrastructure Stack: 5-Machine Tailscale Mesh

A lightweight admin dashboard on Cloudflare's edge network with D1 (SQLite-at-the-edge), providing a simplified operational view on top of Shopify for a non-technical business owner.

Building a Lightweight Admin Dashboard with Cloudflare Pages and D1

Designed a structured advisory engagement for a bootstrapped social enterprise, replacing ad-hoc free consulting with a sustainable fortnightly model.

Designing a Sustainable Advisory Model for Mission-Driven Organizations

System architecture for an AI persona cloning framework: an 8-axis fidelity model, 4-tier distribution system, OSINT-fed personality pipeline, and MCP server integration for deploying high-fidelity digital personas.

Σ1 (SomeOne): AI Persona Cloning System Design

A consolidated view of production workflow automation work across multiple clients: e-commerce order pipelines, WhatsApp sales automation, event registration systems, and operational dashboards, all built on a workflow automation engine with edge worker integration.

Workflow Automation Practice: Orchestration Engines, Edge Workers, and Operational Pipelines

Diagnosed systemic platform governance risks in a bootstrapped social enterprise, including a live production system deployed on a third party's personal account.

Untangling a Startup's Technical Debt Before It Becomes a Crisis

Migrated a mental health social enterprise off overprovisioned legacy hosting, centralised their DNS on Cloudflare, and reduced monthly infrastructure costs by 85%.

Cutting 85% Hosting Costs for a Mental Health Startup

A neo-brutalist design system for the personal finance dashboard: cream and orange palette, bold typography, thick borders, and deliberate rawness that makes financial data feel approachable rather than corporate.

Neo-Brutalist Brand & Design System: Dashboard Visual Identity

The infrastructure design behind the personal finance dashboard: a 3-container Docker architecture running on the self-hosted Tailscale mesh, with automated backups and zero-downtime deployments.

Self-Hosted 3-Container Architecture: Dashboard Infrastructure

Product design for a personal finance dashboard using a three-zoom-level information architecture: overview (am I okay?), analysis (what's happening?), and detail (show me the transactions).

Three-Zoom-Level Product Design: Dashboard UX Architecture

A data engineering pipeline that ingests, cleans, and structures Malaysian government open data for integration into the personal finance dashboard's economic context layer.

Government Open Data Pipeline: Data Engineering for the Dashboard

A personal finance dashboard built as a full-stack application: Next.js frontend, Supabase backend, with transaction categorization, budget tracking, and trend visualization.

Personal Finance Dashboard: Full-Stack Engineering

Built a complete full-stack application in 24 hours at the Deriv AI Hackathon. Contextual transaction analytics using news vectorization, semantic analysis, and the O1 reasoning model.

Unleashed AI: Contextual Transaction Analytics

Platform migration and business modernization for a boutique flower delivery business. From diagnosis through custom Shopify theme build, DNS migration, and integration architecture.

From WordPress to Shopify: Modernizing a Boutique Flower Delivery Business

Discovery-first, value-based consulting methodology. Illustrated through a real e-commerce modernization engagement with a non-technical business owner.

How I Structure Technical Consulting Engagements

A clean, modern prayer times web app for Muslims in Malaysia. Geolocation, JAKIM data, Hijri calendar, and mobile-first design with 43+ commits of iterative development.

Solat Today: Prayer Times for Malaysia

A medical second opinion tool that uses AI to analyze uploaded clinical documents, combining OCR with multi-model AI analysis for structured diagnostic support.

2Opinion: AI-Assisted Medical Document Analysis

Led multiple iterations of healthcare AI product development, from patient-facing chatbots with empathic voice interfaces to clinical knowledge retrieval systems.

Healthcare AI Product Development: From Prototypes to Clinical Tools

Collaborator on an open-source, MIT-licensed mosque management system designed for non-technical users.

E-Masjid.My: Open-Source Mosque Management

Featured across major Malaysian media outlets including The Star, Free Malaysia Today, Malay Mail, Malaysiakini, SoyaCincau, and Lowyat.NET. Covering public health advocacy, cybersecurity disclosure, and medical misinformation work.

National Press & Media Appearances

The Rakyat Post covered the public interest dimension of a national database launching with a fundamental authentication flaw, following the PADU security disclosure.

The Rakyat Post: PADU Public Interest Dimension

Lowyat.NET, Malaysia's largest technology forum and news site, covered the technical details of the PADU security vulnerability disclosure.

Lowyat.NET: PADU Security Technical Coverage

Malay Mail reported on the responsible disclosure of a critical security vulnerability in Malaysia's national PADU database, covering the disclosure process and its implications.

Malay Mail: PADU Security Vulnerability Disclosure

SoyaCincau, a major Malaysian tech publication, reported on the PADU security vulnerability disclosure with a focus on the implications for citizen data security.

SoyaCincau: PADU Data Security Implications

Discovered and responsibly disclosed a critical password reset vulnerability in PADU, Malaysia's national citizen database, within hours of its public launch. The disclosure reached 1.3 million views, prompted a same-day ministerial response, and was covered by 6+ major media outlets.

PADU Security Disclosure: Finding a Critical Vulnerability in Malaysia's National Database

A mobile e-commerce application built with React Native and Expo, featuring geolocation-based services, Firebase backend, and native UI components.

BeliBarang: React Native E-Commerce App

A game built during the 42KL Game Jam. Exploring interactive design and rapid prototyping under time constraints.

GameJam 42KL

A medical narrative published through MPH, one of Malaysia's major publishing houses. The title plays on the Malay word for diagnosis and the apocalyptic weight that a diagnosis can carry.

DIAgnosis Apokalips: Published by MPH

The English-language follow-up to 25 Kes, rated 3.86/5 on Goodreads. More medical case narratives, now reaching an international readership.

That One Case: The English Sequel

Awarded 'Wira Vaksin' (Vaccine Hero) by Malaysia's Ministry of Health, presented by the Health Minister, in recognition of sustained work combating vaccine misinformation.

Wira Vaksin: Ministry of Health Award for Vaccine Advocacy

Free Malaysia Today, in collaboration with the Vaccine Confidence Project, covered the work around debunking anti-vaccination misinformation during a period of rising vaccine hesitancy in Malaysia.

Free Malaysia Today: Vaccine Confidence & Anti-Misinformation

A collection of 25 medical case narratives written in Malay, published by Kata-Pilar Books. Each chapter captures the human dimensions of clinical encounters that textbooks tend to flatten.

25 Kes: A Medical Anthology in Malay

Malaysiakini covered the medical myths debunking work, focusing on specific examples of health misinformation in Malaysian social media and the systematic approach to countering them.

Malaysiakini: Medical Myths Debunking Coverage

A feature article on jering nephropathy published in Majalah iSihat and syndicated across Malaysian health media, translating an obscure but locally significant clinical entity for public understanding.

Jering Nephropathy: Medical Journalism for iSihat

Health Analytics Asia published a profile piece on the Medical Mythbusters Malaysia co-founders, focusing on the intersection of healthcare communication and digital reach in Southeast Asia.

Health Analytics Asia: M3 Co-Founders Profile

The Star featured Medical Mythbusters Malaysia (M3) as a doctor-led initiative combating medical misinformation, profiling the organization's approach and founding team.

The Star: Medical Mythbusters Malaysia Feature

A medical explainer on Ludwig's angina that went viral with approximately one million readers and over 4,000 shares, published through Medical Mythbusters Malaysia (M3).

Bull's Neck: The Viral Medical Article That Reached a Million Readers

Co-founded Medical Mythbusters Malaysia (M3) with approximately 28 doctors, building a health misinformation response platform that reached over a million readers and earned a government award for vaccine advocacy.

Medical Mythbusters Malaysia (M3): Co-Founding a Million-Reader Health Platform

An early-career project compiling Malay-English medical terminology, addressing the gap in standardized bilingual medical reference materials for Malaysian healthcare practitioners.

Malay-English Medical Terminology Dictionary


# SaaS Landing Page & AI Chatbot

**Project Type:** Client Work
**Deliverable:** Landing page + AI chatbot platform
**Tech Stack:** Next.js 16, Tailwind CSS, Shadcn UI, Framer Motion, Docker
**Features:** Responsive landing page, AI-powered product consultation chatbot, dark mode

---

## What Was Built

A modern web platform for a Malaysian business specializing in custom labels, stickers, and branding solutions. The project comprised two main components: a responsive landing page designed to convert visitors into leads, and an AI-powered chatbot interface ready for integration with conversational AI backends.

![SaaS landing page and AI chatbot platform architecture](/images/portfolio/labelsendiri-1.png)


## Tech Stack

**Framework:** Next.js 16 with App Router, representing the latest in the Next.js ecosystem.
**UI:** Tailwind CSS with Shadcn UI components and Radix UI primitives for accessible, composable interfaces.
**Animations:** Framer Motion for smooth page transitions and micro-interactions that add polish without sacrificing performance.
**Icons:** Lucide React for a consistent, modern icon set.
**Deployment:** Docker and Docker Compose for production-ready containerized deployment.

## Design Approach

The landing page was designed with a mobile-first responsive approach and full dark mode support. The chatbot interface was built as a standalone component ready for backend AI integration (ChatKit/OpenAI), allowing the business to offer automated product consultations: customers describe what they need, and the chatbot guides them through material options, sizing, quantity pricing, and order placement.

## What This Demonstrates

End-to-end client delivery: from understanding a non-technical client's business needs to shipping a containerized, production-ready platform. The combination of a conversion-focused landing page with an AI chatbot represents the kind of practical AI application that small businesses can actually use, not a research project, but a tool that answers customer questions and drives revenue.

*\* Images are conceptualized, not the real implementation to protect client's intellectual right*
