[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-data-/au/projects/saas-architecture":3,"projects-nav-list":35,"related-insights-/au/projects/saas-architecture":244},{"id":4,"slug":5,"slugId":6,"title":7,"titleId":8,"titleAu":7,"titleSg":7,"description":9,"descriptionId":10,"descriptionAu":11,"descriptionSg":11,"contentAu":12,"cover":13,"coverId":6,"category":14,"tags":16,"location":23,"links":24,"metrics":25,"status":29,"date":30,"createdAt":31,"updatedAt":32,"body":33,"_path":34,"_id":5},15,"saas-architecture",null,"Scalable Chat Commerce SaaS Architecture","Arsitektur SaaS Chat Commerce Skalabel untuk Jualan Online","Architecting a scalable conversational commerce engine using Nuxt 3 and Express js to turn standard WhatsApp chats into a fully functional sales channel.","Membangun arsitektur mesin conversational commerce skalabel menggunakan Nuxt 3 dan Express js untuk mengubah chat WhatsApp standar menjadi saluran penjualan online yang fungsional.","Architecting a scalable conversational commerce engine using Nuxt 3 and Express.js to turn standard WhatsApp chats into a fully functional sales channel.","## Building a Real-Time Commerce Engine\n\nI co-founded and led the development of **dichat** from the ground up, building and managing the engineering team, driving product decisions, and owning end-to-end delivery of a SaaS commerce platform integrated with WhatsApp. Within 3 months of launch, the platform generated over **100M IDR in revenue**.\n\nAs the Chief Technology Officer at PT Bisnis sukses dimarketing, I lead the technical development and deployment of our proprietary SaaS web application, dichat.\n\nEcommerce is shifting rapidly towards conversational commerce. My primary mission for dichat was to architect a robust platform that allows users to shop, checkout, and transact entirely within WhatsApp. Building a chat commerce engine of this scale required an architecture that could handle heavy data loads without failing. We needed a system capable of:\n\n-   Processing real-time webhooks from Meta and WhatsApp Business API without dropping requests.\n    \n-   Delivering a fast and highly interactive dashboard for merchants while maintaining perfect SEO scores for organic acquisition.\n    \n-   Syncing massive product catalogues and live cart data between the web interface and the WhatsApp chat environment seamlessly.\n    \n\n## A Decoupled High Performance Tech Stack\n\nAs the Lead Architect, I engineered a decoupled architecture using modern JavaScript ecosystems. This setup ensures scalability, security, and fast deployments.\n\n### Frontend Architecture with Nuxt 3\n\nI chose Nuxt 3 to ensure the public-facing pages and merchant dashboards were both SEO optimised and highly reactive.\n\n-   Leveraged Nuxt Server-Side Rendering (SSR) to ensure maximum search engine indexability and instant initial page loads.\n    \n-   Utilised Vue 3 Composition API for clean state management across complex merchant dashboard components.\n    \n-   Optimising asset delivery to achieve a perfect 100 Lighthouse performance score.\n    \n\n### Backend and API Gateway with Express.js\n\nThe core engine of the SaaS runs on a lightweight and highly scalable Express.js backend.\n\n-   Architected secure asynchronous endpoints to receive, validate, and process real-time messages and status updates from Meta servers.\n    \n-   Implemented strict rate limiting, secure API routing, and efficient database querying to handle high-volume conversational data during peak traffic spikes.\n    \n\nDesigned and implemented a scalable multi-tenant architecture ensuring system robustness, performance, and client-level isolation, allowing each merchant to operate in a fully independent environment.\n\n### **Third-party Platform Integrations**\n\nTo support end-to-end commerce operations, I developed and maintained core integrations with key platforms our merchants depend on.\n\n-   Midtrans: payment gateway integration for seamless in-chat transactions.\n    \n-   JNE and Grab: logistics and delivery API integrations for real-time shipping calculation and order tracking.\n    \n\n### WhatsApp Business API Integration\n\nThis is the centrepiece of the platform. I fully integrated the WhatsApp Business API to transform standard chats into interactive storefronts.\n\n-   Programmed dynamic lists, reply buttons, and product catalogue messages directly into the chat flow.\n    \n-   Engineered the logic that syncs web cart data into a seamless WhatsApp checkout experience to reduce cart abandonment rates.\n    \n\n## Scalable Conversational Commerce in Action\n\nThis architecture successfully bridged the gap between traditional web applications and modern conversational interfaces.\n\nMerchants received a fast and intuitive Nuxt 3 dashboard to manage their catalogues. End consumers enjoyed a frictionless shopping experience purely via WhatsApp. Additionally, the SSR capabilities of Nuxt 3 ensured the SaaS marketing pages ranked quickly to drive organic merchant acquisition.\n\nFrom a technical standpoint, the Express.js backend proved highly resilient. It is capable of processing thousands of concurrent WhatsApp webhooks without latency issues or server crashes.\n\nThroughout all deployments, maintaining high system reliability and consistency remained a core engineering priority. The architecture was designed with flexibility in mind, enabling different client use cases without compromising stability or performance.\n\n## Key Takeaways\n\nBuilding a Chat Commerce SaaS requires more than just API connections. It demands a holistic approach to system architecture. By decoupling a high-performance Nuxt 3 frontend from a robust Express.js backend, we built a digital ecosystem that is search-optimised and powerful enough to redefine the conversational shopping experience.","https://cdn.thismarshal.com/project/1772307566427-dichat_dash.jpg",[15],"Web Development",[17,18,19,20,21,22],"Nuxt 3","Express js","WhatsApp Business  API","Chat Commerce","SaaS Architecture","Webhooks","Jakarta, Indonesia ",{},{"Architecture type":26,"Avg response time chatbot":27,"Lighthouse score":28},"Multi-tenant","3s","100","published","2026-02-27T00:00:00.000Z","2026-02-27T11:32:55.667Z","2026-07-14T00:57:55.775Z","## The Challenge\n\nServing 1,000+ business users, the [DiChat.net](http://DiChat.net) SaaS platform (built on Laravel and Node.js) struggled with crawl efficiency and poor indexation. Beyond the technical architecture not being optimized for search engines, the product itself needed to solve a harder problem: letting businesses run full commerce operations, from customer conversation to checkout, without ever asking the customer to leave WhatsApp or install a separate app.\n\n## The Solution: Scalable Technical Architecture and In-Chat Commerce\n\nTo unlock organic growth and support the product’s core value proposition, I led a comprehensive technical SEO overhaul alongside the platform’s AI and commerce architecture.\n\n### **1\\. Crawl Efficiency and Indexation**\n\nI conducted a deep technical audit to resolve server-side rendering bottlenecks and JavaScript execution issues. By restructuring the internal linking architecture and optimizing server response times, we drastically improved how efficiently Googlebot could crawl and index the platform’s core landing pages.\n\n### **2\\. Landing Page Optimization**\n\nWe rebuilt the primary landing pages to align with specific commercial intents, using semantic HTML structuring, optimized meta tags, and content that directly answered the pain points of B2B users looking for WhatsApp API commerce solutions.\n\n### **3\\. AI-Driven Conversational Commerce**\n\nBeyond discoverability, I designed the system architecture that lets DiChat function as a replacement for human customer service agents in routine conversations. This included:\n\n-   A switching layer that routes conversations between rule-based automation (for predictable, high-volume flows like order status or FAQs) and a custom LLM-driven agent for conversations that need context, judgment, or multi-turn reasoning, so businesses aren’t forced to choose between cheap automation and capable automation.\n    \n-   A custom LLM implementation with persistent conversation memory, built to handle customer inquiries with the continuity a human agent would have, rather than treating every message as a stateless query.\n    \n-   End-to-end structured commerce inside a single WhatsApp thread, product browsing, cart, and checkout, without the customer ever needing to install a separate app or leave the conversation they’re already in.\n    \n\n## The Impact\n\nThe technical overhaul and product architecture together transformed the platform into a scalable organic growth engine with a genuinely differentiated product experience.\n\n-   **Improved Indexation**: Core product pages achieved rapid indexation and higher SERP placements.\n    \n-   **Scalable Growth**: Built a robust technical foundation that seamlessly supports the platform’s 1,000+ business users while continuously capturing new organic leads.\n    \n-   **Reduced Dependency on Human Agents**: The switch-bot and LLM architecture allows businesses to automate routine and complex customer conversations alike, without the friction of directing customers to a separate app.","/projects/saas-architecture",[36,66,93,98,123,154,186,218],{"id":37,"slug":38,"slugId":6,"title":39,"titleId":40,"titleAu":39,"titleSg":39,"description":41,"descriptionId":42,"descriptionAu":41,"descriptionSg":41,"cover":43,"coverId":6,"category":44,"tags":47,"location":55,"links":56,"metrics":57,"status":29,"date":62,"createdAt":63,"updatedAt":64,"_path":65},41,"wordpress-seo-technical-audit","WordPress SEO Migration and Technical Audit","Migrasi SEO WordPress dan Audit Teknis Website","A risk-critical migration from Yoast SEO to AISEO on a live WordPress site with established page 1 rankings, executed without any loss of indexing, rankings, or conversion tracking continuity.","Layanan migrasi SEO WordPress kritis dari Yoast SEO ke AISEO pada website live dengan peringkat halaman 1 Google. Eksekusi aman tanpa kehilangan indeksasi, penurunan peringkat ranking, atau gangguan kontinuitas pelacakan konversi analytics.","https://cdn.thismarshal.com/project/1774202649217-wordpress_migrations.webp",[45,46],"Technical SEO","SEO",[48,49,50,51,52,53,54],"Yoast SEO","AISEO","Schema Markup","Google Tag Manager","Google Analytics 4","Google Ads","301 Redirects","Auckland, New Zealand",{},{"Plugin Migrations":58,"Pages deindexed":59,"Schema":60,"Tracking":61,"Conversion events":53},"Yoast to AISEO","Zero","Cleaned up","GTM + GA4","2026-03-22T00:00:00.000Z","2026-03-22T18:04:11.558Z","2026-05-28T17:49:52.964Z","/projects/wordpress-seo-technical-audit",{"id":67,"slug":68,"slugId":6,"title":69,"titleId":70,"titleAu":71,"titleSg":71,"description":72,"descriptionId":73,"descriptionAu":72,"descriptionSg":72,"cover":74,"coverId":6,"category":75,"tags":76,"location":82,"links":83,"metrics":84,"status":29,"date":89,"createdAt":90,"updatedAt":91,"_path":92},20,"revamp-shopify-website-for-australian-beauty-brand","Shopify Website for Australian Beauty Brand","Jasa Redesign Website Shopify untuk Brand Kecantikan Australia","Revamping a Shopify Store for an Australian Beauty Brand","A complete frontend overhaul and custom feature integration for a premium eyelash and beauty brand in Australia to boost conversions and deliver a seamless shopping experience.","Jasa redesign website e-commerce dan perombakan total frontend Shopify untuk brand kecantikan premium di Australia. Web developer e-commerce kami meningkatkan konversi dan memberikan pengalaman belanja yang cepat dan lancar.","https://cdn.thismarshal.com/project/1773067531658-char_increase_analytics.jpg",[15],[77,78,79,45,80,81],"Shopify","Liquid","Frontend Optimization","UI","UX","Victoria, Australia",{},{"Load Speed":85,"Plugins Cleaned":86,"Custom":87,"Increase New User ":88},"80%","100%"," UI TikTok Scroll","11,6%","2026-03-09T00:00:00.000Z","2026-03-09T06:45:17.904Z","2026-07-14T00:08:04.807Z","/projects/revamp-shopify-website-for-australian-beauty-brand",{"id":4,"slug":5,"slugId":6,"title":7,"titleId":8,"titleAu":7,"titleSg":7,"description":9,"descriptionId":10,"descriptionAu":11,"descriptionSg":11,"cover":13,"coverId":6,"category":94,"tags":95,"location":23,"links":96,"metrics":97,"status":29,"date":30,"createdAt":31,"updatedAt":32,"_path":34},[15],[17,18,19,20,21,22],{},{"Architecture type":26,"Avg response time chatbot":27,"Lighthouse score":28},{"id":99,"slug":100,"slugId":6,"title":101,"titleId":102,"titleAu":101,"titleSg":101,"description":103,"descriptionId":104,"descriptionAu":103,"descriptionSg":103,"cover":105,"coverId":6,"category":106,"tags":107,"location":112,"links":113,"metrics":116,"status":29,"date":119,"createdAt":120,"updatedAt":121,"_path":122},1,"portfolio","Personal Portfolio Website","Website Portofolio Personal","A high-performance portfolio website built with Nuxt 4, featuring 3D animations, contact form integration, and admin CMS.","Website portofolio profesional dan berkinerja tinggi yang dibangun menggunakan Nuxt 4 oleh web developer berpengalaman. Dilengkapi animasi 3D, integrasi formulir kontak, dan CMS admin.","https://cdn.thismarshal.com/project/1770067526407-project_website_portofolio.webp",[15,45],[108,109,110,111],"Nuxt 4","Bun","Edge","Tailwind v4","Jakarta, Indonesia",{"repo":114,"preview":115,"demo":115},"https://github.com/gasmarshal/portfolio","https://www.thismarshal.com/",{"build_time":117,"lighthouse":28,"interactive":118},"-60%","\u003C50ms","2025-02-01T00:00:00.000Z","2025-12-01T12:04:06.441Z","2026-05-28T17:49:52.871Z","/projects/portfolio",{"id":124,"slug":125,"slugId":6,"title":126,"titleId":127,"titleAu":126,"titleSg":126,"description":128,"descriptionId":129,"descriptionAu":130,"descriptionSg":128,"cover":131,"coverId":6,"category":132,"tags":133,"location":112,"links":140,"metrics":142,"status":29,"date":150,"createdAt":151,"updatedAt":152,"_path":153},2,"fishery","B2B2C Fisheries Market Expansion","Ekspansi Pasar Perikanan B2B2C - Strategi SEO & Ekspor","Strategic digital transformation for a fisheries company, expanding B2B reach to global markets (Canada, US, China) and doubling sales in one quarter.","Transformasi digital strategis dan SEO perikanan untuk memperluas jangkauan ekspor B2B ke pasar global (Kanada, AS, Tiongkok) dan melipatgandakan penjualan B2C lokal dalam satu kuartal.","Strategic digital transformation for a fisheries company, expanding B2B reach into global markets (Canada, the US, China) and doubling sales in a single quarter.","https://cdn.thismarshal.com/project/1770109178048-dominated_page_1_google_for_high_competition_keywords_in_the_global_market..jpg",[46,45],[45,134,135,136,137,138,139],"Multilingual SEO","GTM","Google Analytics","Backlink Strategy","b2b2c","Growth Hacking",{"live":141},"https://aruna.id",{"traffic_increase":143,"timeframe":144,"keywords_ranked":145,"leads_generated":146,"sales_growth":147,"marketplace_rev":148,"market_reach":149},"+70%","36 months","10+ to Page 1","100 B2B Leads","2x (Doubled) in 1 Quarter","100% (Tokopedia/Shopee)","Canada, US, China, ID","2024-12-31T00:00:00.000Z","2025-12-01T12:04:06.762Z","2026-07-13T23:17:54.335Z","/projects/fishery",{"id":155,"slug":156,"slugId":6,"title":157,"titleId":158,"titleAu":159,"titleSg":159,"description":160,"descriptionId":161,"descriptionAu":162,"descriptionSg":162,"cover":163,"coverId":6,"category":164,"tags":166,"location":175,"links":176,"metrics":178,"status":29,"date":182,"createdAt":183,"updatedAt":184,"_path":185},4,"blog-optimization","Blog Content Optimization","Optimasi Konten Blog","Blog Content Optimisation","Writing and optimizing SEO-driven content across 6 client websites spanning multiple industries in both English and Indonesian, covering articles, copywriting, and UI copy.","Menulis dan mengoptimasi konten berbasis SEO di 6 situs web klien dari berbagai industri dalam bahasa Inggris dan bahasa Indonesia, mencakup penulisan artikel, copywriting, dan copy UI.","Writing and optimising SEO-driven content across 6 client websites spanning multiple industries in both English and Indonesian, covering articles, copywriting, and UI copy.","https://cdn.thismarshal.com/project/1774201984209-blog_content_optimization.webp",[165],"Content SEO & Strategy",[167,168,169,170,171,172,173,174],"Content Strategy","Content Clusters","Link Building","SEO Writing","Organic Growth","bilingual","on-page SEO","Copywriting","Indonesia & Canada",{"live":177},"#",{"Client Website":179,"Languages":180,"Content Type":181},"6 Sites","EN + ID","Articles + Copy","2024-05-20T00:00:00.000Z","2025-12-01T12:04:07.093Z","2026-05-28T17:49:52.951Z","/projects/blog-optimization",{"id":187,"slug":188,"slugId":6,"title":189,"titleId":190,"titleAu":189,"titleSg":189,"description":191,"descriptionId":192,"descriptionAu":193,"descriptionSg":193,"cover":194,"coverId":6,"category":195,"tags":196,"location":204,"links":205,"metrics":207,"status":29,"date":214,"createdAt":215,"updatedAt":216,"_path":217},5,"local-business","Local Business SEO Success","Sukses SEO Bisnis Lokal - Jasa Buat Website Jakarta","At JakWebs, a local web agency based in Jakarta, I served as both SEO specialist and web developer. My scope covered everything from building and maintaining the WordPress website to executing the full SEO strategy that ultimately turned the company website into its main revenue channel. At peak, organic search accounted for 80% of total company revenue.\n\nAlongside internal agency work, I also directly handled SEO and web development projects for 5 to 6 B2B clients across a range of industries, managing each account end to end from site build to organic growth.","Di JakWebs, sebuah agensi web lokal yang berbasis di Jakarta, saya menjabat sebagai pakar SEO dan web developer. Lingkup kerja saya mencakup segalanya mulai dari membangun dan memelihara website WordPress hingga mengeksekusi strategi SEO lengkap yang pada akhirnya mengubah website perusahaan menjadi saluran pendapatan utama. Pada puncaknya, pencarian organik menyumbang 80% dari total pendapatan perusahaan.\n\nSelain pekerjaan agensi internal, saya juga menangani langsung proyek SEO dan web development untuk 5 hingga 6 klien B2B di berbagai industri, mengelola setiap akun dari awal hingga akhir - dari pembuatan situs hingga pertumbuhan organik.","At JakWebs, a local web agency based in Jakarta, I served as both SEO specialist and web developer. My scope covered everything from building and maintaining the WordPress website to executing the full SEO strategy that ultimately turned the company website into its main revenue channel. At peak, organic search accounted for 80% of total company revenue.\n\nAlongside internal agency work, I also directly handled SEO and web development projects for 5 to 6 B2B clients across a range of industries, managing each account end-to-end from site build to organic growth.","https://cdn.thismarshal.com/project/1774125029683-jakwebs_client.jpg",[45,15],[197,198,137,199,54,200,201,202,203],"Local SEO","WordPress","XML Sitemap","web development","wordpress","blogger","wix","Indonesia",{"live":206},"https://jakwebs.com",{"platform":208,"optimization":209,"Revenue from organic":210,"Keyword ranking":211,"Keyword difficulty":212,"B2B clients handled":213},"WordPress, Blogger & Wix","Full technical SEO","80% of total sales","Page 1","44%","5-6 Clients","2024-04-12T00:00:00.000Z","2025-12-01T12:04:07.258Z","2026-05-28T17:49:52.975Z","/projects/local-business",{"id":219,"slug":220,"slugId":6,"title":221,"titleId":222,"titleAu":221,"titleSg":221,"description":223,"descriptionId":224,"descriptionAu":225,"descriptionSg":225,"cover":226,"coverId":6,"category":227,"tags":228,"location":233,"links":234,"metrics":235,"status":29,"date":240,"createdAt":241,"updatedAt":242,"_path":243},3,"healthcare","Healthcare SEO Strategy","Strategi SEO Layanan Kesehatan","Driving patient acquisition for a specialized healthcare clinic through technical SEO, local search optimization, and multi-engine visibility across Google, Bing, and Yandex.","Mendorong akuisisi pasien untuk klinik kesehatan spesialis melalui SEO teknikal, optimasi penelusuran lokal (local SEO), dan visibilitas di berbagai mesin pencari seperti Google, Bing, dan Yandex.","Driving patient acquisition for a specialised healthcare clinic through technical SEO, local search optimisation, and multi-engine visibility across Google, Bing, and Yandex.","https://cdn.thismarshal.com/project/1774120336069-hospital_project.webp",[45],[197,229,230,231,232],"Healthcare Marketing","Webmaster Tools","Medical Keywords","Multi-Engine SEO","Jakarta,Indonesia",{"live":177},{"patients_monthly":236,"ranking":211,"search_engines":237,"keyword_ranking":211,"CTR achieved":238,"Content writers led":239},"15-20 new patients","3 (Google, Bing, Yandex)","8.5%","3 People","2024-03-05T00:00:00.000Z","2025-12-01T12:04:06.930Z","2026-05-28T17:49:52.928Z","/projects/healthcare",[]]