[{"data":1,"prerenderedAt":303},["ShallowReactive",2],{"navigation":3,"socials":68,"post-\u002Fsongquiz":83,"project-\u002Fsongquiz":84},{"id":4,"extension":5,"footer":6,"header":56,"meta":65,"stem":66,"__hash__":67},"navigation\u002Fnavigation.yml","yml",[7,26,38],{"label":8,"items":9,"path":25},"Web development",[10,13,16,19,22],{"label":11,"path":12},"Vue web development","\u002Fvue-js-development-services",{"label":14,"path":15},"React development services","\u002Freact-js-development-services",{"label":17,"path":18},"Laravel development services","\u002Flaravel-development-services",{"label":20,"path":21},"Shopify developers Melbourne","\u002Fshopify",{"label":23,"path":24},"Next.js developers Melbourne","\u002Fnext-js-framework","",{"label":27,"items":28,"path":25},"Cyber security",[29,32,35],{"label":30,"path":31},"Cyber security for small business","\u002Fcyber-security\u002Fsmall-business",{"label":33,"path":34},"Lessons from famous breaches","\u002Fcyber-security\u002Fbreach-lessons",{"label":36,"path":37},"Free cyber health check","\u002Fcyber-security\u002Fsmall-business\u002Fdiy-cyber-security-health-check",{"label":39,"items":40},"Navigate",[41,44,47,50,53],{"label":42,"path":43},"Home","\u002F",{"label":45,"path":46},"Case Studies","\u002Fcase-studies",{"label":48,"path":49},"Cyber Security","\u002Fcyber-security",{"label":51,"path":52},"Contact Us","\u002Fcontact",{"label":54,"path":55},"Editorial Policy","\u002Feditorial-policy",[57,60,61,62],{"label":58,"path":59},"Web Development","\u002Fweb-development",{"label":45,"path":46},{"label":48,"path":49},{"label":63,"path":64},"About","\u002Fabout",{},"navigation","vaEm85Hrq3ctMNbTgmkywbdLEBklhE1-5zsuR9ZI5Oo",{"id":69,"extension":5,"items":70,"meta":80,"stem":81,"__hash__":82},"socials\u002Fsocials.yml",[71,74,77],{"type":72,"link":73},"facebook","https:\u002F\u002Fwww.facebook.com\u002Fitclub.com.au",{"type":75,"link":76},"linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fitclub\u002Fabout\u002F",{"type":78,"link":79},"behance","https:\u002F\u002Fwww.behance.net\u002Felenaitclub\u002F",{},"socials","R3zh7G2Yeky6IFraIEG2izmfHXa3EG7r0rHl4YbjpWk",null,{"id":85,"title":86,"body":87,"card":273,"description":282,"extension":283,"meta":284,"metadata":285,"navigation":288,"path":289,"platform":290,"quote":83,"quoteAuthor":83,"seo":291,"sitemap":292,"stem":293,"subtitle":294,"summary":295,"technologies":296,"__hash__":302},"projects\u002Fsong-quiz.md","Multiplayer Music Game",{"type":88,"value":89,"toc":265},"minimark",[90,95,108,120,123,127,130,152,156,159,191,198,202,205,231,234,238,247,262],[91,92,94],"h2",{"id":93},"real-time-multiplayer-game-development","Real-time multiplayer game development",[96,97,98,99,103,104,107],"p",{},"Rebuilding a browser game where several players compete in the same room at the same time is a very different challenge from developing a classic website. For ",[100,101,102],"strong",{},"SongQuiz.io",", our team redesigned and rebuilt the existing ",[100,105,106],{},"real-time multiplayer music quiz game"," as a fast and responsive web app. The new version has improved UI\u002FUX and keeps players, scores and game rounds synchronised across every device.",[109,110,111],"blockquote",{},[96,112,113,119],{},[114,115,102],"a",{"href":116,"rel":117},"https:\u002F\u002Fsongquiz.io\u002F",[118],"nofollow"," is a free online guess-the-song game. Players choose a playlist, listen to short audio clips and identify the song title and artist from the available options. They can play solo, with friends in private multiplayer rooms or take part in a daily Heardle-style challenge.",[96,121,122],{},"The game runs entirely in the browser, with no downloads or registration. This means every interaction must feel immediate: pages have to load quickly, audio has to start without delay, and scores have to update for every player in real time.",[91,124,126],{"id":125},"web-development-services-for-a-multiplayer-browser-game","Web development services for a multiplayer browser game",[96,128,129],{},"Our project manager, UI\u002FUX designer and software engineers delivered the complete redevelopment of the web application, including:",[131,132,133,137,140,143,146,149],"ul",{},[134,135,136],"li",{},"UI\u002FUX design for desktop and mobile",[134,138,139],{},"Front-end development with Svelte",[134,141,142],{},"Back-end development with Node.js and WebSockets",[134,144,145],{},"Database design and query optimisation",[134,147,148],{},"SEO optimisation to support organic growth",[134,150,151],{},"Project management and delivery.",[91,153,155],{"id":154},"tech-stack-for-a-real-time-multiplayer-game","Tech stack for a real-time multiplayer game",[96,157,158],{},"Low latency was one of the main technical requirements, so our engineers chose a tech stack built for speed:",[131,160,161,167,173,179,185],{},[134,162,163,166],{},[100,164,165],{},"Frontend:"," Svelte - a compiler-based JavaScript framework that produces lightweight applications and keeps the game interface responsive even on older mobile devices.",[134,168,169,172],{},[100,170,171],{},"Real-time layer:"," WebSockets provide two-way communication between the browser and server. Guesses, scores and round changes are sent to every player instantly rather than repeatedly requested by the browser.",[134,174,175,178],{},[100,176,177],{},"Back end",": Node.js manages the game logic, player actions and communication between connected users.",[134,180,181,184],{},[100,182,183],{},"In-memory data:"," Redis stores live game state, room activity and real-time messaging between server instances - the key to scaling multiplayer rooms horizontally. It help the application support multiple multiplayer rooms.",[134,186,187,190],{},[100,188,189],{},"Database:"," PostgreSQL stores persistent data such as playlists, song metadata, daily challenges and player statistics.",[96,192,193,194,197],{},"This combination of ",[100,195,196],{},"Svelte, Node.js, WebSockets, Redis and PostgreSQL"," allows the game handle many concurrent rooms while keeping every player's screen in sync.",[91,199,201],{"id":200},"multiplayer-game-features","Multiplayer game features",[96,203,204],{},"The rebuilt music trivia web application includes:",[131,206,207,210,213,216,219,222,225,228],{},[134,208,209],{},"Real-time multiplayer rooms",[134,211,212],{},"Private rooms with custom invite codes",[134,214,215],{},"Public multiplayer rooms",[134,217,218],{},"A daily Heardle-style song challenge",[134,220,221],{},"Music Trivia Arcade mode with autoplay",[134,223,224],{},"Quizzes by various music genres",[134,226,227],{},"Responsive UI\u002FUX for desktop and mobile",[134,229,230],{},"SEO-optimised landing pages",[232,233],"hr",{},[91,235,237],{"id":236},"hire-developers-for-your-real-time-web-application","Hire developers for your real-time web application",[109,239,240],{},[96,241,242,243,246],{},"Multiplayer games, live dashboards, chat platforms, auctions and collaborative tools - anything where users see each other's actions instantly needs a reliable real-time architecture. Our experienced JavaScript developers have rebuilt and developed ",[114,244,245],{"href":46},"web applications"," with Node.js, WebSockets, Redis and PostgreSQL and can help you modernise an existing application, improve its performance or choose the right tech stack for a new real-time project.",[248,249,253],"div",{"dataCmsId":250,"className":251},"cta-button",[252],"align-center",[248,254,257],{"className":255},[256],"button",[114,258,261],{"href":52,"className":259},[260],"cta","Get in touch",[263,264],"br",{},{"title":25,"searchDepth":266,"depth":266,"links":267},2,[268,269,270,271,272],{"id":93,"depth":266,"text":94},{"id":125,"depth":266,"text":126},{"id":154,"depth":266,"text":155},{"id":200,"depth":266,"text":201},{"id":236,"depth":266,"text":237},{"title":86,"summary":274,"hubSummary":275,"image":276,"logo":277,"order":280,"background":281},"A real-time multiplayer music quiz where players guess songs in the browser.","A real-time browser-based music quiz where players guess songs. We rebuilt the platform to support synchronised multiplayer rooms, daily challenges and solo trivia for thousands users each month.","portfolio\u002Fsongquiz\u002Fsong-quiz-card-image.png",{"width":278,"src":279},173,"companies\u002Fsong-quiz-long-logo.png",4,"#f4f4f4","A real-time multiplayer browser game built with Svelte, WebSockets, Node.js, Redis and PostgreSQL.","md",{},{"title":286,"description":287},"Real-Time Multiplayer Game Development with Svelte","See how IT Club rebuilt SongQuiz.io using Svelte, Node.js, WebSockets, Redis and PostgreSQL to deliver fast, synchronised multiplayer gameplay.",true,"\u002Fsongquiz","Web",{"title":86,"description":282},{"loc":289},"song-quiz","UI\u002FUX | Real-time multiplayer game development","We rebuilt and modernised an existing multiplayer music quiz where players guess songs together in the browser in real time. Built with Svelte, WebSockets, Node.js, Redis and PostgreSQL.",[297,298,299,300,301],"Svelte","WebSockets","Node.js","Redis","PostgreSQL","cmL7Ctg15-xpw-oUGM1O64FOaCCqeViFJ7t4_2IKDnY",1785204198522]