Frontend System Design Essentials: Real-time updates

👉 Frontend System Design Essentials — Course (Now Available):
https://icodeit.thinkific.com/courses...

👉 Frontend System Design Essentials — Book:
https://leanpub.com/frontend-system-d...

In this episode of *Frontend System Design Essentials**, we’re talking about **real-time updates* — how apps like Trello, Slack, or Google Docs stay in sync without needing manual refreshes or button clicks.

I’ll show you exactly how I implemented *real-time card updates* in *Fellow**, a Trello-like app I’m building, using **Relay* and *GraphQL Subscriptions* — and walk you through everything you need to know as a frontend developer to do the same.

You’ll learn:

When real-time updates make sense (and when they don’t)
How polling, WebSockets, and subscriptions compare — with examples
How to implement subscriptions with Relay + GraphQL
What to consider when scaling real-time systems
And how this ties back to a previous video where we used polling (hint: it’s still valid — just a different tradeoff!)

If you’re building collaborative tools, dashboards, or any UI where “what you see should always be fresh,” this episode will help you understand not just the *how**, but also the **why* of real-time design.

[MY BOOKS & COURSES]
👉 Frontend System Design Essentials: https://leanpub.com/frontend-system-d...
👉 React Data Fetching Patterns: https://leanpub.com/react-data-fetchi...
👉 Maintainable React (Udemy Course): https://udemy.com/course/mastering-ma...
👉 React Anti-Patterns (Amazon): https://www.amazon.com/dp/1805123971
👉 More Tutorials on Advanced Patterns: https://icodeit.com.au/tutorials/adva...

[STAY CONNECTED]
🧠 Newsletter (system design & clean code): https://juntao.substack.com/
🌐 Website & Blog: https://icodeit.com.au/
🐦 Twitter / X:   / juntaoqiu  
📺 YouTube (subscribe):    / @icodeit.juntao  

[Question for You]
Have you implemented real-time features in your app before?
What tech did you use — polling, raw sockets, or subscriptions?
Let me know in the comments ↓

#frontend #reactjs #systemdesigninterview #websockets #graphql #relay #webdevelopment