Roadmap notes
Capture module-level gaps, repeated mistakes, and what to review before continuing.
1
Module 1: Foundations
Phase 1 of your journey.
4. Improve a functionPRO
How do you check if an object has a property?
5. Throttle
Classical vs prototypal inheritance
13. Deep Clone
AbortController — cancelling async work the right way
14. Event EmitterPRO
How do you reliably check if an object is empty?
66. Promise MethodsPRO
How do you check the data type of a variable?
19. Memoize I
Anonymous functions — what they are and where they shine
86. API RetryPRO
Why array indices make bad React keys
Polyfill: call( )PRO
2
Module 2: Advanced Patterns
Phase 2 of your journey.
aria-label, aria-labelledby, and aria-live in practice
mul(a)(b)(c)
async/await — syntactic sugar over promises
sum(a)(b)(c).....(n)
How to test asynchronous code without flaky tests
Flatten Array
What are common async data loading patterns in React?
Polyfill: map( )
What are React Fragments used for?
City Fetcher APIPRO
How does the box model work in CSS?
promise.all( )PRO
What is React hydration?
promise.allSettled( )PRO
How do you iterate over object properties?
3
Module 3: Mastery
Phase 3 of your journey.
promise.any( )PRO
What does box-sizing: border-box mean?
promise.race( )PRO
What is difference between sync and async function?
Reverse Words in a String
What is the difference between React Node, React Element, and React Component?
promise.reject()
What are the benefits of using hooks in React?
composeAsyncPRO
What tools help find security vulnerabilities?
Sequential AsyncPRO
What are React Portals?
Debounce IIPRO
How does caching improve performance?
Promise MergePRO
4
Module 4: Mastery
Phase 4 of your journey.
How do you decide between React state, context, and external state managers?
ChunkPRO
What is the difference between call( ) and bind( )?
Polyfill: Array.prototype.reduce
What are callback functions?
JSON.stringify (Basic)
What is the difference between call( ) and apply( )?
JSON.stringify II (Advanced)PRO
What is the prototype pattern?
React Hook: useTimeoutPRO
What is the difference between Client side rendering and Server side rendering?
FillPRO
What is the Beacon API?
Data Merging (Gym Sessions)PRO
Using closures for private variables
5
Module 5: Mastery
Phase 5 of your journey.
React Tic-Tac-Toe Engine
What are common data fetching pitfalls in React?
Performant Image Slider
What AJAX actually means today
API Search and Render ImagePRO
What is code coverage?
Accessible React Tabs
querySelector vs getElementById
Recursive File Explorer
CommonJS vs ES Modules
Build a Resilient Test Runner
Common 'this' pitfalls
Traffic Light
Explain the composition pattern in React
Star RatingPRO
6
Module 6: Mastery
Phase 6 of your journey.
What is Cross-Site Scripting (XSS)?
Accordion
How do you organize code in a JavaScript project?
Auto-completePRO
What is clickjacking and how do you prevent it?
Modal System
Critical Rendering Path
PaginationPRO
What is CSRF?
Multi-step Form
What is the CSS display property and what are examples of its use?
Toast NotificationPRO
What is callback hell?
Virtual List (Windowing)PRO
What is CSS selector specificity and how does it work?
7
Module 7: Mastery
Phase 7 of your journey.
Custom Query HookPRO
What are the pros and cons of compiling to JavaScript?
Kanban Board (DnD)
What are the pros and cons of CSS preprocessors?
Nested Checkboxes (Tri-state)PRO
What do you like and dislike about CSS preprocessors?
Product DashboardPRO
How does positioning work in CSS?
Form Builder (JSON Schema)PRO
What is the command pattern?
Infinite ScrollPRO
How do you handle browser-specific styling issues?
Analog ClockPRO
What is the difference between controlled and uncontrolled components in React?
Memory GamePRO
8
Module 8: Mastery
Phase 8 of your journey.
default vs named export
Poll WidgetPRO
What is a static method in a class?
Transfer ListPRO
How do you debug React applications?
Progress BarPRO
What is the difference between debouncing and throttling?
Global Scope, Function Scope, and Block Scope
What is dangerouslySetInnerHTML and why is it dangerous?
How do you optimize DOM manipulation?
What is doctype in HTML in start of HTML file?
Why is document.write() considered bad practice?
Attribute vs property in the DOM
What is currying in JavaScript?
What is the Constraint Validation API?
9
Module 9: Mastery
Phase 9 of your journey.
What is the event loop in JavaScript?
What are common CSS efficiency gotchas?
How do you handle errors in asynchronous operations?
What are ES2015 classes and how do they differ from ES5 function constructors?
What is event delegation in JavaScript?
What are error boundaries in React?
Error handling with try...catch
How does error propagation work in JavaScript?
Describe event capturing in JavaScript
What is forwardRef() in React?
What are default parameters?
What CSS frameworks have you used?
What is difference between a map object and a plain object in JavaScript?
Why are functions first-class objects?
What data structure is used to represent the DOM?
10
Module 10: Mastery
Phase 10 of your journey.
What is the decorator pattern?
What is destructuring assignment?
What is the purpose of break and continue?
Hoisting pitfalls and how to avoid them
How do you create a constructor function?
How to prevent the UI from blocking during a long running task?
How would you style an SVG?
What is Cross-Origin Resource Sharing (CORS)?
Where should CSS links and JS scripts be placed in HTML?
How do iframes communicate with the parent page?
Why is input validation important?
What are the HTTP methods?
How would you implement dark mode and light mode?
Why does React recommend against mutating state?
What are iterators and generators in JavaScript?