Course introduction

Application demo

RxJS History

Signals and RxJS

Application setup

Introduction

Fetching and Displaying Data

Async Pipe

Operators

Filtering Data Part 1

Filtering Data Part 2

Module 2

Infinite Scrolling

MDX Powered Lesson

Codesandbox Embed Lesson

Replit Embed Lesson

Getting Oriented

( the primaryDescriptionMarkdown is long - several lines, include images, as long as you want )

In this course we <headline of what we do>. <why this technology is good> but <here's how learning it is problem>.

In <the length of these lessons> we cover <three salient points about what we cover. Your BEST points>. Its <however long it is> and comes with <these bonus features, and reasons to buy. code, etc.>

It's taught by <author name> who <credibility, reason you should listen to them>. <social proof, if you have it yet>

<then you can list other supporting stuff you want to add, anything you want here>

-------
Example:
-------

We created a free course to create your first GraphQL server (from scratch) using Node and TypeScript. TypeScript and GraphQL are a powerful combo, but there's a lot of confusing edges if you're getting it setup the first time.

In this course we cover the basics of getting TypeScript setup with Node, how GraphQL works, and how to set up a GraphQL server using Apollo server. It's two hours long, it comes with complete code examples, and we walk through the code step-by-step.

It's taught by my friend, Shopify-engineer Hassan Djirdeh and he's integrated what he's learned using GraphQL in production as an engineer at Shopify. We've already had over 1,300 students enroll and it's been getting great reviews so far.

// ... and so on

In this course we <headline of what we do>. <why this technology is good> but <here's how learning it is problem>.

( the summary is short - one or two lines )

Mastering RxJS: A Compact Journey from Beginner to Pro

This is not just an app but a learning tool, designed to make the abstract concepts of RxJS tangible and relatable. It addresses the need for a deeper understanding of reactive programming by showcasing its practical applications, thereby easing the transition for those more accustomed to imperative programming styles.

---
title: Application demo
privateVideoUrl: https://stream.mux.com/jRvypO2asQOs5q8OqqSKAfJ7oTiU8s029AkQR4hdRC6I.m3u8
isPublicLesson: true
---

This is not just an app but a learning tool, designed to make the abstract concepts of RxJS tangible and relatable. It addresses the need for a deeper understanding of reactive programming by showcasing its practical applications, thereby easing the transition for those more accustomed to imperative programming styles.

### Core Features

1.  **Infinite Scrolling**

    -   This feature enables automatic loading of additional content as users scroll down, eliminating the need for manual 'load more' clicks. It demonstrates RxJS's ability to handle dynamic, asynchronous data streams for a seamless and continuous user experience.
2.  **Real-Time Search Filtering**

    -   Users can type queries into a search bar and see results filter in real-time, showcasing RxJS's ability to handle asynchronous data streams and update the UI reactively.
3.  **Debounced API Calls**

    -   As users type in search or other input fields triggering API calls, these calls are debounced. This feature demonstrates RxJS's capability to optimize server communication, preventing overload and improving performance.
4.  **Dynamic Form Validation**

    -   Users receive instant feedback on form inputs, highlighting RxJS's utility in creating responsive, user-friendly forms with immediate validation feedback.
5.  **Live Notifications**

    -   Users get live notifications about important events, exemplifying RxJS's use in handling real-time data and event streams without needing to refresh the page.
6.  **Auto-Save Functionality**

    -   Form inputs are auto-saved at regular intervals, demonstrating RxJS's ability to handle time-based operations seamlessly.
7.  **Real-Time Data Chart**

    -   A feature displaying charts that update in real-time as new data arrives, showcasing the use of RxJS in handling dynamic data for visualization purposes.

### Addressing the Problem

-   **Bridging Paradigms:** The app serves as a practical demonstration of RxJS's power in a reactive programming context, helping backend developers and others accustomed to imperative programming understand and appreciate the declarative approach.
-   **Hands-On Learning:** By interacting with features that solve real-world problems, users can grasp RxJS fundamentals, common use cases, and best practices in a practical setting.
-   **Error Handling and Best Practices:** The app includes examples of common mistakes and how to avoid them, fostering a deeper understanding of reactive programming principles.
-   **Encouraging Reactive Mindset:** Through the demonstration of real-time data handling and efficient server communication, the app encourages users to think reactively, understanding the advantages of this approach in modern web development.


Victor

This is the application that we are going to build.

In this application, we will learn how to fetch data,

We will also learn how to filter the data, just like this.

how to do a reactive validation, for example, like this,

This might look like a simple application,

We will also cover common mistakes and best practices.

Application demo

Lesson Transcript

Masterclasses

Tutorials

Fullstack React with TypeScript