[{"data":1,"prerenderedAt":260},["ShallowReactive",2],{"portfolio-doc-email-platform-lab-en":3},{"id":4,"title":5,"body":6,"description":234,"extension":235,"meta":236,"navigation":252,"path":253,"seo":254,"stem":255,"__hash__":256,"baseSlug":257,"localeTag":258,"image":238,"category":237,"stack":240,"tags":259,"projectUrl":239,"date":184,"featured":252},"portfolio/portfolio/email-platform-lab.md","Email Platform Lab",{"type":7,"value":8,"toc":216},"minimark",[9,14,22,26,32,48,52,62,87,94,115,122,140,144,161,165,186,190,193],[10,11,13],"h2",{"id":12},"project-summary","Project Summary",[15,16,17,18,21],"p",{},"Email Platform Lab is a production-style email platform I built end-to-end to showcase advanced email templating and campaign operations.",[19,20],"br",{},"\nThe project evolved from a static template exercise into a complete workflow system with rendering safeguards, QA checkpoints, and internal tooling for campaign approvals.",[10,23,25],{"id":24},"why-i-built-it","Why I Built It",[15,27,28,29,31],{},"I wanted a portfolio project that proves practical delivery, not just UI polish.",[19,30],{},"\nEmail is a high-friction channel where small HTML/CSS mistakes can break business-critical communication, so I built this lab to demonstrate:",[33,34,35,39,42,45],"ul",{},[36,37,38],"li",{},"robust responsive email template development;",[36,40,41],{},"cross-client compatibility engineering;",[36,43,44],{},"workflow automation for marketing operations;",[36,46,47],{},"maintainable architecture for fast iteration.",[10,49,51],{"id":50},"platform-structure","Platform Structure",[53,54,56,57,61],"h3",{"id":55},"_1-email-lab-appsemail-lab","1) Email Lab (",[58,59,60],"code",{},"apps/email-lab",")",[33,63,64,67,81,84],{},[36,65,66],{},"Handcrafted HTML templates for newsletter, promo, and transactional use cases.",[36,68,69,70,73,74,73,77,80],{},"Component-style partials (",[58,71,72],{},"header",", ",[58,75,76],{},"button",[58,78,79],{},"footer",") with token hydration.",[36,82,83],{},"Build pipeline that sanitizes output, compiles templates, and generates a preview index.",[36,85,86],{},"Payload size tracking to avoid Gmail clipping and improve deliverability readiness.",[53,88,90,91,61],{"id":89},"_2-growth-admin-portal-appsadmin-portal","2) Growth Admin Portal (",[58,92,93],{},"apps/admin-portal",[33,95,96,99,109,112],{},[36,97,98],{},"React + TypeScript interface to manage campaign status and review flow.",[36,100,101,102],{},"Zustand state model with guarded transitions:\n",[33,103,104],{},[36,105,106],{},[58,107,108],{},"Draft -> In Review -> Approved/Rejected",[36,110,111],{},"Role-based permissions and audit events for traceability.",[36,113,114],{},"QA and content validation before approval to reduce publishing errors.",[53,116,118,119,61],{"id":117},"_3-visual-email-builder-appsemail-builder","3) Visual Email Builder (",[58,120,121],{},"apps/email-builder",[33,123,124,131,134,137],{},[36,125,126,127,130],{},"Next.js + React drag-and-drop editor with ",[58,128,129],{},"@dnd-kit",".",[36,132,133],{},"Block-based composition for reusable email sections.",[36,135,136],{},"Inspector controls for spacing, typography, and content overrides.",[36,138,139],{},"JSON import/export to bridge visual prototyping and production templates.",[10,141,143],{"id":142},"technical-decisions-and-solutions","Technical Decisions and Solutions",[33,145,146,149,152,155,158],{},[36,147,148],{},"Implemented bulletproof CTA behavior with Outlook VML fallback and standard links for modern clients.",[36,150,151],{},"Added sanitization rules to normalize problematic markup patterns and reduce rendering regressions.",[36,153,154],{},"Included dark mode resilience patterns to handle forced inversion and logo swapping safely.",[36,156,157],{},"Created accessibility/localization test templates to validate long text, RTL, and semantic structure.",[36,159,160],{},"Built a realistic QA checklist around Apple Mail, Gmail, Outlook, and Yahoo behavior.",[10,162,164],{"id":163},"build-timeline-from-git-history","Build Timeline (from Git History)",[166,167,168,174,180],"ol",{},[36,169,170,173],{},[58,171,172],{},"2026-02-09",": initial scaffold of the course-driven email lab and admin workflow.",[36,175,176,179],{},[58,177,178],{},"2026-02-22",": launch of the visual email builder and expanded documentation.",[36,181,182,185],{},[58,183,184],{},"2026-02-23",": naming and structural refinements after stabilization.",[10,187,189],{"id":188},"freelancer-relevant-outcomes","Freelancer-Relevant Outcomes",[15,191,192],{},"This project demonstrates the exact capabilities needed for modern freelance email engineering:",[33,194,195,198,201,204,207,210,213],{},[36,196,197],{},"responsive HTML email coding;",[36,199,200],{},"newsletter template systems;",[36,202,203],{},"transactional email implementation;",[36,205,206],{},"Outlook/Gmail compatibility fixes;",[36,208,209],{},"email QA process design;",[36,211,212],{},"internal tooling for marketing and CRM teams;",[36,214,215],{},"full-stack product ownership from architecture to release quality.",{"title":217,"searchDepth":218,"depth":218,"links":219},"",2,[220,221,222,231,232,233],{"id":12,"depth":218,"text":13},{"id":24,"depth":218,"text":25},{"id":50,"depth":218,"text":51,"children":223},[224,227,229],{"id":55,"depth":225,"text":226},3,"1) Email Lab (apps/email-lab)",{"id":89,"depth":225,"text":228},"2) Growth Admin Portal (apps/admin-portal)",{"id":117,"depth":225,"text":230},"3) Visual Email Builder (apps/email-builder)",{"id":142,"depth":218,"text":143},{"id":163,"depth":218,"text":164},{"id":188,"depth":218,"text":189},"A complete email engineering lab with handcrafted templates, an approval portal, and a visual block builder.","md",{"category":237,"image":238,"projectUrl":239,"stack":240,"tags":241,"date":184,"featured":252},"Full-Stack Application","/images/works/work8.jpg","https://github.com/alefb/kake/tree/main","Node.js, React, TypeScript, Next.js, Vite, Tailwind CSS, Zustand, dnd-kit",[242,243,244,245,246,247,248,249,250,251],"Email Development","HTML Email Templates","Newsletter Builder","Transactional Emails","React","Next.js","TypeScript","Tailwind CSS","QA Workflow","CI/CD",true,"/portfolio/email-platform-lab",{"title":5,"description":234},"portfolio/email-platform-lab","7usylsOCFH1l6kVaCMQsI7chZzZsKKGqumvZUK74Fco","email-platform-lab","default",[242,243,244,245,246,247,248,249,250,251],1773091123858]