CF

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

Juntao Qiu is a Chinese-Australian software engineer and the author of Maintainable React and several other books on the engineering side of front-end work. He focuses on the architectural patterns underneath maintainable front-end codebases.

His CourseFlix listing carries Frontend System Design Essentials — a structured treatment of the architectural concerns underneath large-scale front-end applications: state management, code organisation, the testing layers, performance patterns, and the system-design decisions that show up in real production codebases.

Material is paid and aimed at intermediate-and-up front-end developers ready to think architecturally. For broader content, see CourseFlix's Frontend topic.

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) PDF
2Frontend system design common pitfalls PDF

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
Before enrolling in this course, you should have experience building applications with React or a similar framework. The course is designed for those who are ready to move beyond developing single screens and want to learn how to design entire frontend systems. Familiarity with common frontend challenges such as messy state management, unclear data flows, or slow application parts will be beneficial.
What kind of project will I build in this course?
You will work on a final project that you can showcase in interviews. This project will involve applying the patterns and methods learned in the course to create a clear and stable frontend system. You'll learn to model data, handle data mutations, manage real-time updates, and implement performance enhancements, all of which contribute to building a robust system.
Who is the target audience for this course?
This course is ideal for frontend developers who already have experience with React or similar tools and are looking to improve their skills in designing complete systems rather than individual components. It's particularly suitable for those who have encountered issues like messy state management or unclear data flows and want to learn effective solutions.
How does this course compare in depth and scope to other frontend development courses?
Unlike many frontend development courses that focus on individual components or features, this course emphasizes the design of entire systems. It covers advanced topics such as data modeling, real-time updates, performance optimization, and security. The course aims to equip you with a senior mindset, enabling you to make informed decisions about tool choices and understand the implications of those decisions on system design.
What specific tools or platforms will I learn to use in this course?
Throughout the course, you will engage with tools and concepts such as React for building applications, Playwright for end-to-end testing, and techniques for managing requests, caching, and real-time updates. The course also covers frontend security measures like applying Content Security Policies (CSP) and sanitizing user input.
Are there any topics that are not covered in this course?
The course does not cover backend development or server-side programming in detail. While server-side rendering is discussed as part of enhancing perceived performance, the focus remains on frontend system design. The course centers on building scalable, efficient frontend systems and does not delve into mobile-specific development or native application frameworks.
What is the expected time commitment for this course?
The course includes 47 lessons, and although the exact runtime is not specified, each lesson is designed to provide a deep dive into the aspects of frontend system design. You should be prepared to commit several hours each week to engage with the material, complete exercises, and work on the capstone project, ensuring a comprehensive understanding of the course content.