rxjs-challenge
A collection of interactive RxJS puzzles to practice Observable manipulation through real-world UI challenges.
What is rxjs-challenge?
RxJS Challenge is a collection of interactive coding puzzles designed to practice and improve skills in reactive programming using RxJS. It provides daily challenges that require solving real-world UI interaction problems—such as creating sticky headers, handling focus, managing loading states, and implementing gestures—by building Observable streams. The project helps developers move beyond basic RxJS tutorials and apply reactive patterns to practical scenarios.
Frontend developers, especially those using Angular or React with RxJS, who want to deepen their understanding of Observables and reactive programming through hands-on exercises. It's also suitable for developers transitioning from imperative to reactive UI development.
Unlike typical RxJS tutorials, this project offers a curated set of real-world UI challenges with interactive templates and detailed solutions, enabling developers to learn by doing. It bridges the gap between RxJS theory and practical application, focusing on patterns that are immediately useful in production web apps.
Overview
A set of little RxJS puzzles to practice your Observable skills
Use Cases
Best For
- Practicing RxJS operator composition with concrete examples
- Learning reactive approaches to common UI problems like modals, loaders, and notifications
- Improving skills in handling user interactions (scroll, drag, focus) with streams
- Preparing for technical interviews involving reactive programming challenges
- Transitioning from imperative JavaScript to a reactive programming mindset
- Angular developers looking to master RxJS for state management and side effects
Not Ideal For
- Developers seeking comprehensive RxJS API documentation or quick reference guides
- Teams needing pre-built, production-ready Observable utilities for immediate integration
- Projects using non-reactive frameworks or vanilla JavaScript without RxJS setup
Pros & Cons
Pros
Challenges simulate practical web development scenarios like sticky headers, modal closing, and pull-to-refresh, directly applicable to building interactive interfaces.
Each challenge includes a StackBlitz template for hands-on coding without local setup, enabling immediate practice and experimentation.
Solutions are accompanied by Medium articles that break down reactive patterns and operator usage, offering insights from experienced developers like Alex and Roman.
From basic focus tracking in Day 01 to advanced image transformations in Day 16, the challenges cater to varying skill levels, aiding gradual learning.
Cons
Solutions and explanations are hosted externally on Medium, not consolidated in the GitHub repo, making access less convenient and dependent on third-party platforms.
Focuses heavily on UI interactions, missing broader RxJS applications like server-side data fetching, testing strategies, or integration with state management libraries.
Lacks a forum or discussion platform for learners to ask questions, share solutions, or seek help, limiting collaborative learning opportunities.
Frequently Asked Questions
Related Projects
redux-observableRxJS middleware for action side effects in Redux using "Epics"
learn-rxjsClear examples, explanations, and resources for RxJS
rxjs-courseRxJs In Practice Course - https://angular-university.io/course/rxjs-course
ngx-operatorsRxJS operators for Angular
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.