[{"data":1,"prerenderedAt":404},["ShallowReactive",2],{"/projects/twitchcon-photo-system":3},{"id":4,"title":5,"body":6,"description":365,"extension":386,"featured":387,"meta":388,"navigation":389,"path":390,"seo":391,"sortOrder":392,"stem":393,"tagline":394,"tags":395,"__hash__":403},"projects/projects/twitchcon-photo-system.md","TwitchCon - The Emotifier",{"type":7,"value":8,"toc":364},"minimark",[9,59,63,67,76,79,84,87,90,93,95,99,135,137,141,144,161,164,166,170,173,176,200,203,205,209,214,225,229,240,244,252,256,264,266,270,278,282,296,300,311,315,326,328,332,352,354,358,361],[10,11,26,27,26,36],"div",{"className":12},[13,14,15,16,17,18,19,20,21,22,23,24,25],"mb-8","flex","items-center","gap-4","rounded-xl","border","border-slate-200","bg-white/60","px-4","py-3","backdrop-blur","dark:border-slate-800","dark:bg-slate-950/50","\n  ",[28,29],"img",{"src":30,"alt":31,"className":32},"/images/logos/twitch.png","Twitch",[33,34,35],"h-12","w-auto","object-contain",[10,37,41,42,41,51,26],{"className":38},[14,39,40],"flex-col","leading-tight","\n    ",[43,44,50],"span",{"className":45},[46,47,48,49],"text-xs","font-medium","text-slate-500","dark:text-slate-400","\n      Client\n    ",[43,52,58],{"className":53},[54,55,56,57],"text-sm","font-semibold","text-slate-900","dark:text-slate-100","\n      TwitchCon 2022 - San Diego, USA\n    ",[60,61],"stack-chips",{":items":62},"[\"Node.js\", \"Vue.js\", \"NestJS\", \"Quasar Framework\", \"MongoDB\", \"SendGrid\", \"AWS S3\", \"JavaScript/TypeScript\"]",[64,65],"media-carousel",{":items":66},"[{\"type\": \"image\", \"src\": \"/images/projects/twitchcon/stand.jpeg\", \"caption\": \"Main Emotifier display wall showing approved photos during TwitchCon event.\"}, {\"type\": \"image\", \"src\": \"/images/projects/twitchcon/IMG_6305.jpg\", \"caption\": \"Built photo booth system managing captures, accessories, and processing pipeline.\"}, {\"type\": \"video\", \"src\": \"/images/projects/twitchcon/visu.mov\", \"poster\": \"/images/projects/twitchcon/poster.png\", \"caption\": \"Touchscreen photo management interface used to customize and send images.\"}]",[68,69,72],"callout",{"title":70,"type":71},"Context","info",[73,74,75],"p",{},"Developed for TwitchCon 2022, this system powered an interactive event experience where attendees could take photos, apply digital accessories, and instantly view their images on large event screens while receiving personalized copies via email.",[77,78],"hr",{},[80,81,83],"h2",{"id":82},"overview","Overview",[73,85,86],{},"The Emotifier was an interactive stand at TwitchCon 2022 in San Diego, USA. Visitors entered the experience, took a photo using a tablet, applied digital accessories (such as glasses and hats), and instantly saw their image displayed on large event screens. They also received a personalized copy of their photo via email.",[73,88,89],{},"The system required real-time image processing, moderation control, cloud storage, and live display integration during a high-traffic public event.",[73,91,92],{},"I was responsible for building the backend system and the CMS used to manage and moderate the experience.",[77,94],{},[80,96,98],{"id":97},"my-role","My Role",[100,101,103],"contribution",{"role":102},"Backend & CMS Developer",[104,105,106,110,117,120,123,126,129,132],"ul",{},[107,108,109],"li",{},"Built the backend APIs for photo ingestion, moderation, and event screen delivery",[107,111,112,113],{},"Received images from the tablet application and stored them in ",[114,115,116],"code",{},"AWS S3",[107,118,119],{},"Saved participant and photo data in the database",[107,121,122],{},"Implemented moderation logic (approve/reject) before public display",[107,124,125],{},"Sent approval-based email flows for participants",[107,127,128],{},"Built the CMS moderation dashboard for event managers",[107,130,131],{},"Enabled managers to review submissions, approve/reject photos, and monitor activity",[107,133,134],{},"Ensured only approved images reached the live event screens",[77,136],{},[80,138,140],{"id":139},"problem","Problem",[73,142,143],{},"The event needed a reliable system that could:",[104,145,146,149,152,155,158],{},[107,147,148],{},"Handle live photo submissions",[107,150,151],{},"Display approved images instantly on large screens",[107,153,154],{},"Send personalized emails automatically",[107,156,157],{},"Prevent inappropriate content from being shown publicly",[107,159,160],{},"Remain stable during high visitor traffic",[73,162,163],{},"Because this was a public live event, failures or delays would immediately impact the experience.",[77,165],{},[80,167,169],{"id":168},"solution","Solution",[73,171,172],{},"I built a backend system that connected the tablet application, cloud storage, moderation dashboard, email system, and live display panels.",[73,174,175],{},"The workflow worked as follows:",[177,178,179,182,185,188,191,194,197],"ol",{},[107,180,181],{},"User takes photo on tablet",[107,183,184],{},"Tablet sends image to backend API",[107,186,187],{},"Image is stored in AWS S3",[107,189,190],{},"Photo appears in CMS moderation dashboard",[107,192,193],{},"Admin approves or rejects the photo",[107,195,196],{},"Approved photos are pushed to the event display screens",[107,198,199],{},"User receives an automated email with their image",[73,201,202],{},"This created a controlled, real-time content pipeline for a live event environment.",[77,204],{},[80,206,208],{"id":207},"application-features","Application Features",[210,211,213],"h3",{"id":212},"live-photo-processing","Live Photo Processing",[104,215,216,219,222],{},[107,217,218],{},"API-based image ingestion from external application",[107,220,221],{},"Secure cloud storage via AWS S3",[107,223,224],{},"Real-time moderation workflow",[210,226,228],{"id":227},"moderation-content-control","Moderation & Content Control",[104,230,231,234,237],{},[107,232,233],{},"Admin approval / rejection system",[107,235,236],{},"Prevention of inappropriate public display",[107,238,239],{},"Separate email flows for approved and rejected photos",[210,241,243],{"id":242},"event-screen-integration","Event Screen Integration",[104,245,246,249],{},[107,247,248],{},"Automatic push of approved images to large display panels",[107,250,251],{},"Controlled content flow to public screens",[210,253,255],{"id":254},"email-automation","Email Automation",[104,257,258,261],{},[107,259,260],{},"Automated personalized email delivery",[107,262,263],{},"Approval-based email logic",[77,265],{},[80,267,269],{"id":268},"technical-highlights","Technical Highlights",[271,272,275],"decision",{"title":273,"tradeoff":274},"Moderated publish flow before live screen display","Extra moderation step → safer public content and more reliable live operations",[73,276,277],{},"I implemented a moderation-first pipeline where photos were reviewed in CMS before being published to event screens. This reduced the risk of inappropriate content and kept operations controlled during peak traffic.",[210,279,281],{"id":280},"backend-system-design","Backend System Design",[104,283,284,287,290,293],{},[107,285,286],{},"REST API design for external application consumption",[107,288,289],{},"Image upload handling and cloud storage integration",[107,291,292],{},"Moderation state management",[107,294,295],{},"Reliable email automation workflows",[210,297,299],{"id":298},"cms-development","CMS Development",[104,301,302,305,308],{},[107,303,304],{},"Built custom dashboard for live moderation",[107,306,307],{},"Clear UI for fast decision-making during event traffic",[107,309,310],{},"Real-time updates for image status changes",[210,312,314],{"id":313},"event-reliability","Event Reliability",[104,316,317,320,323],{},[107,318,319],{},"Built for live production environment",[107,321,322],{},"Stable under high user interaction",[107,324,325],{},"Designed to prevent inappropriate public content",[77,327],{},[80,329,331],{"id":330},"what-this-project-demonstrates","What This Project Demonstrates",[104,333,334,337,340,343,346,349],{},[107,335,336],{},"Backend ownership for live event system",[107,338,339],{},"Real-time media handling and moderation",[107,341,342],{},"Cloud storage integration (AWS S3)",[107,344,345],{},"API design for external client applications",[107,347,348],{},"Email automation workflows",[107,350,351],{},"Production reliability in high-traffic environments",[77,353],{},[80,355,357],{"id":356},"impact","Impact",[73,359,360],{},"The Emotifier successfully powered a live interactive experience at TwitchCon 2022, allowing visitors to instantly see their customized images on public screens while receiving personalized digital copies.",[73,362,363],{},"My backend and CMS ensured content control, automation, and operational stability throughout the event.",{"title":365,"searchDepth":366,"depth":366,"links":367},"",2,[368,369,370,371,372,379,384,385],{"id":82,"depth":366,"text":83},{"id":97,"depth":366,"text":98},{"id":139,"depth":366,"text":140},{"id":168,"depth":366,"text":169},{"id":207,"depth":366,"text":208,"children":373},[374,376,377,378],{"id":212,"depth":375,"text":213},3,{"id":227,"depth":375,"text":228},{"id":242,"depth":375,"text":243},{"id":254,"depth":375,"text":255},{"id":268,"depth":366,"text":269,"children":380},[381,382,383],{"id":280,"depth":375,"text":281},{"id":298,"depth":375,"text":299},{"id":313,"depth":375,"text":314},{"id":330,"depth":366,"text":331},{"id":356,"depth":366,"text":357},"md",false,{},true,"/projects/twitchcon-photo-system",{"title":5,"description":365},7,"projects/twitchcon-photo-system","Real-time photo management platform built for a large-scale live event",[396,397,398,399,400,401,116,402],"Node.js","Vue.js","NestJS","MongoDB","Quasar Framework","SendGrid","JavaScript/TypeScript","hQK1ln3eyLwFXqL6S6W_NSpW-r9WWJy2h2Ntg_HS5RE",1778044212587]