[{"data":1,"prerenderedAt":405},["ShallowReactive",2],{"/projects/valorant-live-robot":3},{"id":4,"title":5,"body":6,"description":368,"extension":389,"featured":390,"meta":391,"navigation":392,"path":393,"seo":394,"sortOrder":395,"stem":396,"tagline":397,"tags":398,"__hash__":404},"projects/projects/valorant-live-robot.md","Valorant Live Interaction System",{"type":7,"value":8,"toc":367},"minimark",[9,59,63,67,76,79,84,87,90,93,96,98,102,131,133,137,140,143,145,149,152,155,182,185,187,191,196,213,217,231,235,246,250,261,263,267,275,279,290,294,305,309,323,325,329,355,357,361,364],[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/riot.png","Riot Games",[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      Riot Games - São Paulo, Brazil\n    ",[60,61],"stack-chips",{":items":62},"[\"Node.js\", \"NestJS\", \"WebSocket\", \"MongoDB\", \"JavaScript/TypeScript\"]",[64,65],"media-carousel",{":items":66},"[{\"type\": \"image\", \"src\": \"/images/projects/riot/cover.jpeg\", \"caption\": \"Live Valorant broadcast setup where selected Twitch viewers controlled a physical studio robot.\"}, {\"type\": \"image\", \"src\": \"/images/projects/riot/fromrobot.jpeg\", \"caption\": \"Robot perspective during the live challenge track controlled by a remote participant.\"}, {\"type\": \"image\", \"src\": \"/images/projects/riot/chat.jpeg\", \"caption\": \"Twitch chat participation flow used to select viewers for the live control session.\"}, {\"type\": \"video\", \"src\": \"/images/projects/riot/overview.mp4\", \"poster\": \"/images/projects/riot/overviewcover.png\", \"caption\": \"End-to-end interaction: participant selection, joystick control, backend bridge, and robot response in real time.\"}]",[68,69,72],"callout",{"title":70,"type":71},"Context","info",[73,74,75],"p",{},"This system was built for a live Valorant broadcast on Twitch. Selected viewers from chat could control a physical car robot in the studio using a joystick on mobile or desktop.",[77,78],"hr",{},[80,81,83],"h2",{"id":82},"overview","Overview",[73,85,86],{},"The Valorant Live Interaction System was built for a live Twitch broadcast. During the show, selected viewers from chat could remotely control a physical car robot inside the studio using a joystick interface on mobile or desktop.",[73,88,89],{},"The goal was to complete a physical track as fast as possible.",[73,91,92],{},"The project created a real-time connection between an online audience and a physical setup in a live studio.",[73,94,95],{},"I built the full application layer: joystick frontend and backend bridge.",[77,97],{},[80,99,101],{"id":100},"my-role","My Role",[103,104,106],"contribution",{"role":105},"Full-Stack Engineer",[107,108,109,113,116,119,122,125,128],"ul",{},[110,111,112],"li",{},"Built the joystick web interface used by selected participants",[110,114,115],{},"Built the backend system that received joystick data and forwarded it to the robot",[110,117,118],{},"Managed real-time communication between participant and robot using WebSocket",[110,120,121],{},"Implemented participant registration and unique access link flow",[110,123,124],{},"Managed active session control so only the selected user could drive the robot",[110,126,127],{},"Added validation to prevent multiple users controlling the robot at the same time",[110,129,130],{},"Focused on frontend and backend application logic for live broadcast reliability",[77,132],{},[80,134,136],{"id":135},"problem","Problem",[73,138,139],{},"The live show needed a reliable way for a selected viewer to control a physical robot remotely. The system had to keep commands fast, block non-selected users, and stay stable during the broadcast.",[73,141,142],{},"Any delay or control conflict would affect the live segment immediately.",[77,144],{},[80,146,148],{"id":147},"solution","Solution",[73,150,151],{},"I built a simple real-time flow at the application level:",[73,153,154],{},"The workflow operated as follows:",[156,157,158,161,164,167,170,173,176,179],"ol",{},[110,159,160],{},"A viewer was selected from Twitch chat.",[110,162,163],{},"Our team confirmed their participation.",[110,165,166],{},"I registered the participant in the system.",[110,168,169],{},"The participant received a unique link.",[110,171,172],{},"The link opened a joystick interface in the browser.",[110,174,175],{},"The joystick sent X and Y movement values to the backend.",[110,177,178],{},"The backend forwarded those values to the robot via WebSocket.",[110,180,181],{},"The robot responded in real time.",[73,183,184],{},"The backend acted as the bridge between the joystick interface and the physical robot.",[77,186],{},[80,188,190],{"id":189},"application-features","Application Features",[192,193,195],"h3",{"id":194},"joystick-frontend","Joystick Frontend",[107,197,198,201,204,207,210],{},[110,199,200],{},"Browser-based joystick accessible from mobile or desktop",[110,202,203],{},"Sent X and Y movement values in real time",[110,205,206],{},"WebSocket connection from frontend to backend",[110,208,209],{},"Participant ID validation before control started",[110,211,212],{},"Smooth interaction designed for live use",[192,214,216],{"id":215},"backend-bridge","Backend Bridge",[107,218,219,222,225,228],{},[110,220,221],{},"WebSocket server for real-time communication",[110,223,224],{},"Forwarded joystick input to the robot",[110,226,227],{},"Managed active participant sessions",[110,229,230],{},"Restricted control to one selected user at a time",[192,232,234],{"id":233},"session-access-control","Session & Access Control",[107,236,237,240,243],{},[110,238,239],{},"Only the active participant could send control commands",[110,241,242],{},"Blocked simultaneous control attempts from other users",[110,244,245],{},"Controlled start and end of each live session",[192,247,249],{"id":248},"live-broadcast-flow","Live Broadcast Flow",[107,251,252,255,258],{},[110,253,254],{},"Participant registration and unique control link generation",[110,256,257],{},"Quick handoff from Twitch selection to joystick access",[110,259,260],{},"Stable command flow during the on-air segment",[77,262],{},[80,264,266],{"id":265},"technical-highlights","Technical Highlights",[268,269,272],"decision",{"title":270,"tradeoff":271},"Real-time communication using WebSocket with control restricted to the active participant","Strict session control logic → reliable live interaction",[73,273,274],{},"WebSocket handled the live joystick stream. Session checks ensured only the selected participant could control the robot at any time.",[192,276,278],{"id":277},"real-time-communication","Real-Time Communication",[107,280,281,284,287],{},[110,282,283],{},"WebSocket communication from joystick frontend to backend bridge",[110,285,286],{},"Low-latency transfer of joystick X/Y values",[110,288,289],{},"Real-time forwarding from backend to robot",[192,291,293],{"id":292},"frontend","Frontend",[107,295,296,299,302],{},[110,297,298],{},"Simple joystick interface for mobile and desktop",[110,300,301],{},"Participant ID validation in the control flow",[110,303,304],{},"Focused UI to reduce mistakes during live interaction",[192,306,308],{"id":307},"backend","Backend",[107,310,311,314,317,320],{},[110,312,313],{},"Active participant session management",[110,315,316],{},"Control restriction to one user at a time",[110,318,319],{},"Reliable bridge between web interface and robot controller",[110,321,322],{},"Stable behavior under live broadcast conditions",[77,324],{},[80,326,328],{"id":327},"what-this-project-demonstrates","What This Project Demonstrates",[107,330,331,334,337,340,343,346,349,352],{},[110,332,333],{},"Real-time system design",[110,335,336],{},"WebSocket implementation",[110,338,339],{},"Hardware control via backend bridge architecture",[110,341,342],{},"Live broadcast engineering",[110,344,345],{},"Session control and validation",[110,347,348],{},"Full-stack application ownership",[110,350,351],{},"Low-latency interaction handling",[110,353,354],{},"Production reliability during live event conditions",[77,356],{},[80,358,360],{"id":359},"impact","Impact",[73,362,363],{},"The system enabled selected Twitch viewers to control a physical robot during a live broadcast with low latency and stable control.",[73,365,366],{},"My work ensured reliable real-time communication, correct session control, and smooth live operation at the application layer.",{"title":368,"searchDepth":369,"depth":369,"links":370},"",2,[371,372,373,374,375,382,387,388],{"id":82,"depth":369,"text":83},{"id":100,"depth":369,"text":101},{"id":135,"depth":369,"text":136},{"id":147,"depth":369,"text":148},{"id":189,"depth":369,"text":190,"children":376},[377,379,380,381],{"id":194,"depth":378,"text":195},3,{"id":215,"depth":378,"text":216},{"id":233,"depth":378,"text":234},{"id":248,"depth":378,"text":249},{"id":265,"depth":369,"text":266,"children":383},[384,385,386],{"id":277,"depth":378,"text":278},{"id":292,"depth":378,"text":293},{"id":307,"depth":378,"text":308},{"id":327,"depth":369,"text":328},{"id":359,"depth":369,"text":360},"md",false,{},true,"/projects/valorant-live-robot",{"title":5,"description":368},5,"projects/valorant-live-robot","Real-time audience control platform for a live Twitch broadcast",[399,400,401,402,403],"Node.js","NestJS","WebSocket","MongoDB","JavaScript/TypeScript","CTdfIqjXK2CIR6OcsWDDxDWTwJ2C5_Ji1kvQXljnyjA",1778044212350]