Web Development

As part of my involvement in the UTS Programmers’ Society in 2024 and 2025 I’ve had the opportunity to work on several real-time web applications. These projects have given me hands-on experience with various technologies and architectures that enable real-time communication between clients and servers, inspiring my interest in WebRTC, WebSockets, and Server-Sent Events (SSE). Technologies Explored Throughout these projects, I’ve explored a range of technologies that facilitate real-time interactions: tRPC: A library that facilitates type-safe communication between client and server applications (provided they’re both written in TypeScript). It allows for seamless integration of real-time features using WebSockets. WebSockets: A protocol that enables two-way communication between a client and server over a single, long-lived connection. This is particularly useful for applications that require instant updates, such as the Programmers’ Society Club Voting System and FuzzJudge, a real-time competitive programming platform with live score updates. Server-Sent Events (SSE): A technology that allows servers to push updates to clients over HTTP. This is useful for applications that need to send real-time updates without requiring full-duplex communication. WebRTC: A technology that enables peer-to-peer communication between browsers. I’ve used WebRTC in projects like go2rtc-for-3dprinters to facilitate real-time video streaming from 3D printer cameras. GraphQL Subscriptions: An extension of GraphQL that allows clients to subscribe to real-time updates from the server. This is useful for applications that require dynamic data updates and can be integrated with WebSockets for efficient communication. Projects The primary projects I’ve worked on that utilize these technologies include: ...

The prevalence of component libraries and an increasingly large ecosystem of tools for building web applications has provided a litany of choices for developers looking to build modern web applications. When I started programming with React a few years ago I began making single page applications using the ever-popular react-router for routing between pages of my application. This didn’t change much as I began to build more complex applications as it scaled well enough for my needs. ...

One of the key challenges in building efficient React applications falls on managing state updates effectively. This is typically the largest problem that occurs when a React application grows in size and complexity. In this post, I’ll explore how incorrectly managed state updates can lead to performance issues and how to mitigate these problems using popular state management libraries and techniques. When you look at a typical React application (not a static website) you will often find that the depth of the component tree can grow very large. A tree with many nested components is the first and most probable cause of performance issues. If any component high up in the tree updates its state every component below it in the tree will re-render as well. If your application performs a lot of operations when a component renders or is re-rendered this can lead to a very sluggish user experience with a single page change causing multiple seconds of lag. ...