Skip to main content
CourseFlix

Frontend System Design Essentials

5h 55m 36s
English
Paid

This course teaches you how to design strong frontend systems. You learn how parts of an app fit together. You see how data moves, how views update, and how your choices shape the whole system.

What You Will Learn

You explore patterns that help you build apps that scale. You learn how to read a problem and choose the right approach.

  • You learn core patterns in frontend design and why they matter.
  • You gain skill in building clear and stable systems, not loose piles of features.
  • You build a solid model for data work: load, change, and show data with care.
  • You work with patterns that real teams use in real projects.
  • You create a final project you can show at interviews.
  • You pick up a senior mindset: choose tools on purpose and know the cost of each choice.

Who This Course Helps

This course fits you if you already build apps with React or a similar tool and want to design whole systems, not just single screens.

If you have dealt with messy state, unclear data flow, or slow parts of the app, this course gives you clear ways to fix those problems.

Think in Systems

You can build a feature like search or a table. But once the app grows, each part affects many others. Data load, data change, render work, and layout all tie together.

This course shows you how to see the full picture. You learn to design systems that stay clear as they grow, not patch them when they break.

About the Author: Juntao Qiu

Juntao Qiu thumbnail

Hello! I'm Juntao — an experienced software developer specializing in clean architecture, performance, and frontend system design. Over the years, I've repeatedly seen how tangled states, unsuccessful data flows, and short-sighted rendering decisions can lead projects to failure, and my goal is to help developers avoid these pitfalls. In my books Test-Driven Development with React (2021), Maintainable React (2022), and React Anti-Patterns (2024), as well as on my YouTube channel I Code It, I share practical approaches to refactoring, testing, and building scalable frontend applications. My main goal is to teach you to think like a system architect, rather than just implementing features, and to help you grow into a confident senior-level engineer.

Watch Online 47 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 47 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Welcome & Course Roadmap
All Course Lessons (47)
#Lesson TitleDurationAccess
1
Welcome & Course Roadmap Demo
04:26
2
Walk Through the Starter Project
07:34
3
Checkpoint: Rendering Your First Avatar from the API
03:08
4
Understand Why Data Modeling Matters
05:04
5
Case Study — Modeling “Features” on a Menu Item
07:39
6
Normalization - Identifying the Real Problem
05:38
7
Normalization in Practice — Step-by-Step Refactor
09:06
8
Fixing A Defect We Introduced
06:02
9
Checkpoint - AssigneeList — Before & After Normalization
01:24
10
Evaluating Trade-offs in Store Design
02:45
11
Introducing Data Fetching
02:39
12
Requests Management: Request Cancelation
07:27
13
Requests Management: Debounce & Throttling
10:50
14
Pagination Strategies: Offest-based, Cursor-based and Infinite Scrolling
08:32
15
Implement Pagination in The Board Application
06:37
16
Caching Strategies in Frontend Applications
09:26
17
Introducing Data Mutation
08:32
18
Checkpoint - Implementing Deletion
05:28
19
Real-Time Updates Patterns
07:06
20
Real-Time Updates in Action - Using Server-Sent Event
12:18
21
Building Optimistic UI with Rollback
10:38
22
Introducing Performance Enhancement
03:23
23
Rendering With The Right Strategy
10:09
24
Server-Side Rendering In Action
13:38
25
Enhancing Perceived Performance
05:31
26
Implementing Skeleton Pattern in Board View
06:22
27
Prefetching Data When User Shows Intention
10:55
28
Introducing Lazy Loading
11:45
29
Checkpoint - Lazy Loading List View
03:57
30
Measure and Improve Performance
12:16
31
Optimizing Performance with HTTP Caching
18:21
32
Testing Strategy and Unit Testing Essentials
10:34
33
End-to-End Testing the Feature with Playwright
07:57
34
Frontend Security: Understanding XSS
06:54
35
Frontend Security: Applying CSP Effectively
05:39
36
Frontend Security: Sanitizing User Input Safely
06:21
37
Designing for Inclusivity and Accessibility
11:04
38
Handling Failures with Error Boundaries
08:32
39
Introducing Capstone Project
01:42
40
Structuring your React Project Effectively
06:13
41
Cleaning up the Codebase for Future Changes
08:19
42
Implementing Editing Modal for Card
08:45
43
Implementing Lazy Loading With Multiple Pages
10:55
44
Making Drag-and-drop Card Accessible
11:06
45
Wrapping Up Capstone Project
01:08
46
Recap the Six Pillars of Frontend System Design
06:37
47
Frontend System Design in AI Era
05:14
Unlock unlimited learning

Get instant access to all 46 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Books

Read Book Frontend System Design Essentials

#TitleTypeOpen
1Frontend System Design Essentials Community Edition (Book)
2Frontend system design common pitfalls

Related courses

  • Advanced FrontEnds thumbnail

    Advanced FrontEnds

    Sources: Gary Simon
    "Advanced FrontEnds" is a comprehensive course by Gary Simon, focusing on creating highly animated, interactive landing pages. It covers JavaScript, GSAP, and Three.js, with a…
    8 hours 58 minutes 38 seconds
  • Advanced Frontend Course - Master Professional Frontend Development thumbnailNew

    Advanced Frontend Course - Master Professional Frontend Development

    Sources: Dmitriy Zhiganov
    An advanced course for middle and junior front-end developers. Master tool selection and reasoning behind solutions in order to successfully grow and pass inter
  • B-Sides, Bonuses and Oddities thumbnail

    B-Sides, Bonuses and Oddities

    Sources: Carl (Creative Coding Club)
    After completing the basics of GreenSock in the "Express" and "Beyond the Basics" courses, we will now apply the acquired knowledge in practice, sometimes...
    17 hours 55 minutes 38 seconds
  •  Code With Antonio Workshops thumbnail

    Code With Antonio Workshops

    Sources: Code With Antonio
    Workshops include detailed instructions on creating applications using modern technologies, providing participants with the opportunity to deeply...
    17 hours 3 minutes 7 seconds