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