Frontend System Design Essentials: Real-time updates

👉 Frontend System Design Essentials — Course (Now Available):
https://icodeit.thinkific.com/courses/frontend-system-design-essentials

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

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-design-essentials
👉 React Data Fetching Patterns: https://leanpub.com/react-data-fetching-patterns
👉 Maintainable React (Udemy Course): https://udemy.com/course/mastering-maintainable-react
👉 React Anti-Patterns (Amazon): https://www.amazon.com/dp/1805123971
👉 More Tutorials on Advanced Patterns: https://icodeit.com.au/tutorials/advanced-network-patterns-react

[STAY CONNECTED]
🧠 Newsletter (system design & clean code): https://juntao.substack.com/
🌐 Website & Blog: https://icodeit.com.au/
🐦 Twitter / X: http://twitter.com/JuntaoQiu
📺 YouTube (subscribe): https://www.youtube.com/@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

Видео Frontend System Design Essentials: Real-time updates канала I Code It