Ali Farag80-Day Roadmap

Free Curriculum · Zero to Senior

Learn React & React Native
from Scratch in 80 Days

A day-by-day path from JavaScript engine internals to React Fiber, the React Native New Architecture, full system design case studies, and mock interviews — written the way I wish I'd had it, with a real explanation, real code, and a custom visualization for every single day.

80

Days

16

Weeks

137+

Code Examples

94+

Visualizations

Your Progress

0 / 80 days

Start Day 1

Prefer the plan at a glance? Jump straight to any month below, or start from Day 1.

Month 1Month 2Month 3Month 4

Month 1

JavaScript Engine, Internals & Core Patterns

How the JS engine actually runs your code, plus the array/tree/graph problem-solving patterns that show up in every technical screen.

Week 1

Days 1–5
Day 1
JavaScript Core

Execution Context, Call Stack & Hoisting Mechanics

Understand exactly what happens when the JS engine "runs" your code — from parsing to the creation and execution phases of every context — so hoisting stops feeling like magic.

Day 2
JavaScript Core

Scope Chain, Lexical Environment & Closures

See closures as a natural consequence of how the engine links execution contexts together via the scope chain — not a special trick.

Day 3
JavaScript Core

The Event Loop, Callbacks, Microtasks vs Macrotasks

Trace exactly why Promise callbacks run before setTimeout callbacks — by understanding the queues the event loop drains and in what order.

Day 4
JavaScript Core

Promises Under the Hood (Building a Custom Polyfill)

Implement a spec-compliant-enough Promise from scratch to internalize state transitions, the microtask scheduling of .then, and chaining.

Day 5
JavaScript Core

async/await, Generators & Iterators Internals

Understand async/await as syntactic sugar over generators + promises, and know how the iterator protocol powers for...of, spread, and generators.

Week 2

Days 6–10
Day 6
JavaScript Core

this Keyword Mechanics, Call, Apply, Bind & Arrow Functions

Stop guessing what `this` refers to — learn the deterministic rule set the engine follows, and how arrow functions opt out of it entirely.

Day 7
JavaScript Core

Prototypes, Prototypal Inheritance & Class Transpilation

See JS classes for what they really are — sugar over prototype chains — so inheritance bugs and `instanceof` checks stop being mysterious.

Day 8
JavaScript Core

Garbage Collection Mechanics & Memory Leak Detection

Understand mark-and-sweep and generational GC well enough to reason about real leaks in long-running SPAs, and practice finding one in DevTools.

Day 9
JavaScript Core

Event Bubbling, Capturing, and Event Delegation Patterns

Master the DOM event flow well enough to build one delegated listener that replaces hundreds of individual ones, and to reason about stopPropagation correctly.

Day 10
JavaScript Core

Deep vs Shallow Copy, Object Mutability & Proxy/Reflect API

Know precisely which copy method solves which problem, and use Proxy/Reflect to understand how libraries like Vue and Immer intercept object access.

Week 3

Days 11–15
Day 11
DSA

Array Manipulation & Hash Maps Pattern

Default to a hash map whenever a problem needs fast "have I seen this before?" lookups — turning O(n²) brute force into O(n).

Day 12
DSA

Two Pointers Technique

Recognize sorted-array and palindrome-style problems that collapse from O(n²) to O(n) with two pointers moving toward or away from each other.

Day 13
DSA

Sliding Window Algorithm (Fixed & Dynamic)

Turn "find the best contiguous subarray/substring" brute force into O(n) by growing and shrinking a window instead of re-scanning from scratch.

Day 14
DSA

Fast & Slow Pointers (Cycle Detection)

Use Floyd's Tortoise and Hare to detect and locate cycles in linked lists (and equivalent problems) in O(n) time and O(1) space.

Day 15
DSA

Monotonic Stack & Queue Problems

Recognize "next greater/smaller element" style problems and solve them in O(n) using a stack that only ever grows or shrinks monotonically.

Week 4

Days 16–20
Day 16
DSA

Recursion & Backtracking Fundamentals

Build the muscle memory for the choose → explore → un-choose backtracking template that solves permutations, combinations, and subsets.

Day 17
DSA

Binary Search Patterns

Go beyond "find x in a sorted array" — recognize and solve the "search on the answer space" variant that shows up in most real binary search interview questions.

Day 18
DSA

Trees: BFS (Breadth-First Search) Traversal

Use a queue to process a tree level by level, and recognize the family of "shortest path" / "level order" problems this unlocks.

Day 19
DSA

Trees: DFS (Depth-First Search) Traversal

Master the three DFS orderings (pre/in/post) both recursively and iteratively, and know which one each problem type needs.

Day 20
DSA

Basic Graph Traversals (Adjacency Matrix/List)

Represent graphs correctly and apply BFS/DFS to non-tree structures, handling the one thing trees never require: cycle-safe visited tracking.

Month 2

React Core Internals & Native Architecture

Fiber, hooks, state management, and the React Native New Architecture (JSI, Fabric, TurboModules) from first principles.

Week 5

Days 21–25
Day 21
React (Web)

Virtual DOM, Reconciliation Algorithm & React Fiber Architecture

Understand why React diffs a virtual tree instead of touching the DOM directly, and what Fiber actually changed about how that diffing happens.

Day 22
React (Web)

Component Lifecycle vs useEffect Mechanics & Cleanups

Stop mapping useEffect to componentDidMount/Update/Unmount by rote — understand it as "synchronize with an external system" and reason correctly about dependency arrays.

Day 23
React (Web)

State Batching & Concurrent Features (useTransition, useDeferredValue)

Use React 18's automatic batching and Concurrent APIs to keep typing/interaction responsive while expensive re-renders happen in the background.

Day 24
React (Web)

Custom Hooks Design Patterns & Composition

Design custom hooks that compose cleanly — extracting stateful logic without leaking implementation details or breaking the Rules of Hooks.

Day 25
React (Web)

React Context Optimization & Re-render Profiling

Diagnose and fix the #1 real-world React performance complaint: Context causing far more re-renders than expected.

Week 6

Days 26–30
Day 26
React (Web)

Global State Architecture: Redux Toolkit Mechanics

Understand the unidirectional data flow Redux enforces and why Redux Toolkit's "mutating" reducers are actually safe under the hood.

Day 27
React (Web)

Atomic & Unidirectional State: Zustand vs Jotai

Understand the two dominant lightweight state models — single-store-with-selectors (Zustand) vs atomic composition (Jotai) — and when to reach for each over Redux.

Day 28
React (Web)

React Query / RTK Query Internals (Caching, Stale Time, Invalidation)

Understand server-state caching as a distinct problem from client state, and reason correctly about staleTime, cacheTime, and invalidation.

Day 29
React (Web)

Next.js & Web Rendering: SSR vs SSG vs ISR vs CSR

Choose the right rendering strategy per route by understanding exactly WHEN each one generates HTML and what that trades off.

Day 30
React (Web)

Micro-Frontends & Module Federation Basics

Understand why and how large orgs split one frontend into independently deployable pieces, and the core mechanics of Webpack Module Federation.

Week 7

Days 31–35
Day 31
React Native

RN Old Architecture: Bridge, Serialization & Async Bottlenecks

Understand exactly why the classic React Native Bridge causes jank — the async, JSON-serialized, batched messaging model — before comparing it to JSI.

Day 32
React Native

RN New Architecture: JSI (JavaScript Interface) Overview

Understand JSI as a synchronous, direct-memory-reference bridge replacement, and why it removes serialization from the equation entirely.

Day 33
React Native

Fabric Renderer & TurboModules Mechanics

Understand Fabric as React Native's Fiber-aware, JSI-backed renderer, and TurboModules as lazily-loaded, synchronously-callable native modules.

Day 34
React Native

Codegen & C++ Native Bindings Basics

Understand Codegen as the type-safety and boilerplate-elimination layer that turns a JS/TS spec into generated native glue code for both platforms.

Day 35
React Native

Native Modules Integration (iOS Swift/Objective-C & Android Kotlin/Java)

Write, register, and call a real native module on both platforms end to end — the practical skill underneath everything from Days 31-34.

Week 8

Days 36–40
Day 36
React (Web)

Web Performance: Code Splitting, Lazy Loading & Bundle Analysis

Reduce the JS a user must download before your app becomes interactive by finding and cutting what does not need to ship on day one.

Day 37
React Native

Mobile Performance: FlatList vs FlashList & Virtualization Tuning

Understand list virtualization deeply enough to correctly tune FlatList/FlashList props instead of cargo-culting them.

Day 38
React Native

UI Threading & Animations: Reanimated 3 Engine Mechanics

Understand worklets and the UI thread execution model well enough to write animations that never drop a frame due to JS thread congestion.

Day 39
React Native

Image Optimization, Memory Profiling & Hermes Engine

Understand where mobile memory actually goes (images, mostly) and how Hermes changes JS startup and runtime memory characteristics.

Day 40
React Native

Profiling Tools: React DevTools, Flipper, & Xcode/Android Studio Profilers

Build a habit of profiling before optimizing, using the right tool for each layer of the stack: React renders, native bridge/network, and native memory/CPU.

Month 3

System Design & Architecture (Frontend & Mobile)

Component libraries, monorepos, networking, offline-first design, five full system design case studies, security, and machine coding builds.

Week 9

Days 41–45
Day 41
System Design

Scalable Component Library Design (Design Tokens, Storybook)

Design a component library around design tokens as the single source of visual truth, so design and code never drift apart across a growing product.

Day 42
System Design

Monorepo Management (Turborepo / Nx Setup & CI Strategy)

Structure a multi-package monorepo with correct dependency graphs and CI caching so builds/tests only run for what actually changed.

Day 43
System Design

Network Layer Architecture: REST, GraphQL, and WebSockets

Choose the right network paradigm per use case by understanding the real tradeoffs — request shape, over/under-fetching, and connection lifetime.

Day 44
System Design

Client Caching Strategies & HTTP Caching Headers

Use HTTP caching headers correctly to skip network round trips entirely for unchanged data, layered underneath application-level caches like React Query.

Day 45
System Design

Offline-First Architecture: MMKV, SQLite & Sync Engine Design

Design a mobile app that is fully usable offline by treating local storage as the source of truth and the network as an eventually-consistent sync target.

Week 10

Days 46–50
Day 46
System Design

Design: Real-time Chat Application (Slack/WhatsApp Web)

Practice a full frontend system design answer for a chat app: connection strategy, message ordering/delivery guarantees, and optimistic UI.

Day 47
System Design

Design: Social Media Feed with Infinite Scroll (Twitter/Instagram)

Design a feed that scales to thousands of items, handles new-content insertion gracefully, and stays smooth via virtualization and pagination.

Day 48
System Design

Design: Collaborative Document Editor (Google Docs/Figma)

Understand the two dominant conflict-resolution models for real-time collaborative editing — Operational Transformation and CRDTs — and their tradeoffs.

Day 49
System Design

Design: E-Commerce Checkout Flow with State Machines

Model a multi-step checkout flow as an explicit finite state machine to eliminate the impossible-state bugs ad-hoc boolean flags create.

Day 50
System Design

Design: Video Streaming Platform Interface (YouTube/Netflix)

Design the CLIENT side of adaptive video streaming: manifest-based bitrate switching, buffering strategy, and a performant, virtualized browse UI.

Week 11

Days 51–55
Day 51
System Design

Authentication Systems: OAuth2, JWT, Refresh Tokens & Secure Storage

Understand the OAuth2 flows actually used by client apps, what a JWT does and does not guarantee, and where tokens should live on web vs mobile.

Day 52
System Design

Web & Mobile Security: OWASP Top 10, XSS, CSRF, & SSL Pinning

Recognize and defend against the vulnerability classes most likely to show up in both a real security review and an interview.

Day 53
React (Web)

PWA Mechanics & Service Workers

Understand the Service Worker lifecycle and caching strategies well enough to build a PWA that reliably works offline without serving stale content forever.

Day 54
System Design

Analytics, Logging & Error Tracking Architectures (Sentry, Datadog)

Design an observability setup that lets you find and diagnose a production bug from a user report, without needing to reproduce it locally.

Day 55
System Design

CI/CD Pipelines for Web & Mobile (Fastlane, GitHub Actions)

Design a CI/CD pipeline that catches problems early (lint/type/test) and safely automates the genuinely painful parts of mobile release (signing, store submission).

Week 12

Days 56–60
Day 56
React (Web)

Build: Custom Autocomplete / Typeahead Component

Build a fully accessible, debounced, keyboard-navigable autocomplete from scratch — a machine-coding interview staple.

Day 57
React (Web)

Build: Virtualized List Component from Scratch

Implement the core virtualization algorithm by hand — no library — to fully internalize what FlatList/FlashList/react-window do under the hood.

Day 58
React (Web)

Build: Drag-and-Drop Kanban Board

Implement drag-and-drop reordering across multiple columns using native HTML5 DnD events and correct, immutable state updates.

Day 59
React (Web)

Build: Custom Form Validation Engine

Design a small, schema-driven validation engine — the core idea behind libraries like Zod/Yup + React Hook Form, built from first principles.

Day 60
React (Web)

Build: Infinite Canvas / Image Viewer with Zoom & Pan

Implement zoom-to-cursor and drag-to-pan with a single 2D transform matrix — the technique behind Figma/Miro-style infinite canvases.

Month 4

Mock Interviews, Fine-Tuning & Advanced DS/Algo

Advanced DSA, system design refinement, behavioral prep, four full mock interviews, and a deliberate final review week.

Week 13

Days 61–65
Day 61
DSA

Advanced Array & String Manipulations

Consolidate array/string techniques (prefix sums, in-place rotation, frequency counting) into a fast pattern-recognition toolkit for interviews.

Day 62
DSA

Interval-based Algorithms (Merge Intervals, Overlaps)

Master the sort-then-sweep pattern that solves the entire family of interval-overlap, merging, and scheduling problems.

Day 63
DSA

Dynamic Programming: Top-Down vs Bottom-Up Basics

Recognize overlapping subproblems and optimal substructure, then implement the same solution both top-down (memoized recursion) and bottom-up (tabulation).

Day 64
DSA

Dynamic Programming: Common Patterns (Knapsack, Subsequences)

Recognize the handful of DP "shapes" that cover most interview DP questions — 0/1 knapsack, unbounded knapsack, and longest common subsequence.

Day 65
DSA

Graph Traversal Optimization & Shortest Path (Dijkstra)

Extend BFS shortest-path thinking to WEIGHTED graphs using Dijkstra's algorithm and a priority queue, and know when it breaks down.

Week 14

Days 66–70
Day 66
Interview Prep

System Design Framework: How to Structure a 45-min Interview

Internalize a repeatable structure for ANY frontend/mobile system design prompt, so you never freeze on "where do I even start".

Day 67
System Design

Trade-offs Analysis: Client-side vs Server-side Rendering

Build a crisp, defensible framework for the "CSR vs SSR" question that goes beyond "SSR is better for SEO" into real product/business tradeoffs.

Day 68
System Design

Trade-offs Analysis: Native vs Cross-Platform Performance

Give a nuanced, evidence-based answer to "why not just build native" that acknowledges real performance gaps without overselling them.

Day 69
System Design

Deep Dive: Micro-frontend vs Monolithic SPA

Argue both sides of the micro-frontend question with concrete organizational and technical criteria, not just a stated preference.

Day 70
Interview Prep

System Design Mock Practice

Run a full, timed, unaided system design mock end to end, applying Days 66-69's framework under realistic time pressure.

Week 15

Days 71–75
Day 71
Interview Prep

Behavioral: STAR Method for Senior/Lead Engineering Experiences

Prepare 5-6 STAR stories from real experience that demonstrate senior-level judgment, not just individual contribution.

Day 72
Interview Prep

Mock Interview 1: Core JS & React Internals

Run a timed mock covering Month 1-2 internals (event loop, closures, prototypes, Fiber, hooks) with rapid-fire depth, the way a real technical screen runs.

Day 73
Interview Prep

Mock Interview 2: Machine Coding & Live Coding Round

Rehearse building one Week 12-style component end to end, live, under time pressure, with correct incremental scoping.

Day 74
Interview Prep

Mock Interview 3: Frontend/Mobile System Design

Run a full timed system design mock on an unfamiliar prompt, applying the Day 66 framework and Day 67-69 trade-off instincts together.

Day 75
Interview Prep

Mock Interview 4: Dynamic Problem Solving

Practice adapting when a familiar-looking DSA problem turns out to need a different pattern than your first instinct — the realistic interview experience.

Week 16

Days 76–80
Day 76
JavaScript Core

Review JS Engine Edge Cases & Tricky Concepts

Drill the specific edge cases that separate a confident answer from a shaky one across execution context, closures, the event loop, and prototypes.

Day 77
React (Web)

Review React Fiber & New Architecture Highlights

Consolidate the two biggest architectural threads of the roadmap — React Fiber and React Native's New Architecture — into a single, confidently-explainable narrative.

Day 78
Interview Prep

Resume & Portfolio Alignment with Targeted Roles

Align your resume and portfolio artifacts to surface exactly the signals a senior React/React Native role screens for, in the first 6 seconds of a scan.

Day 79
Interview Prep

Interview Day Checklist & Code Communication Practice

Prepare the logistics and communication habits that let 80 days of preparation actually show up clearly on interview day.

Day 80
Interview Prep

Final Rest & Mental Preparation

Deliberately stop consuming new material, consolidate confidence in what you have already built, and arrive rested rather than cramming.