Get Started. It's Free
or sign up with your email address
Frontend Roadmap by Mind Map: Frontend Roadmap

1. React

1.1. Components

1.1.1. Functional components

1.1.2. Class Components

1.1.3. JSX

1.1.4. Props and state

1.1.5. Conditional rendering

1.1.6. Composition

1.2. Rendering

1.2.1. Component life cycle

1.2.2. Lists and keys

1.2.3. render props

1.2.3.1. useRender

1.2.4. Refs

1.2.5. Events

1.2.6. HOCs

1.3. Hooks

1.3.1. useState

1.3.2. useEffect

1.3.3. useRef

1.3.4. useCallback

1.3.5. useMemo

1.3.6. useReducer

1.3.7. useContext

1.3.8. Custom Hook

1.4. Routers

1.5. State management

1.5.1. Redux

1.5.1.1. Redux Toolkit (RTK)

1.5.2. Zustand

1.5.3. MobX

1.5.4. Context

1.6. Styling

1.6.1. Inline styles

1.6.2. CSS modules

1.6.3. Tailwind

1.6.4. Emotion

1.6.5. Styled Components

1.7. API calls

1.7.1. Grapql

1.7.1.1. Apollo

1.7.2. Rest

1.7.2.1. SWR

1.7.2.2. React-Query

1.7.2.3. Axios

1.8. Forms

1.8.1. React Hook Form

1.8.2. Formik

1.9. Optimization

1.9.1. DevTools

2. Next.js

2.1. File structures

2.2. Creating and rendering pages

2.3. Routing

2.3.1. Dynamic Routing

2.3.2. Url params

2.4. Server/Client components

2.5. SSR

2.6. SSG

2.7. Incremental Static Regeneration

2.8. Data fetching methods

2.9. Error handling

2.10. API routes and serverless functions

2.11. Optimization

3. Typescript

3.1. Basics

3.1.1. Variables and types

3.1.2. Functions and parameter typing

3.1.2.1. Function overloading

3.1.3. Object types and interfaces

3.1.4. Arrays and tuples

3.1.5. Type inference

3.1.6. Type casting

3.2. Advanced Concepts

3.2.1. Union and interaction types

3.2.2. Type guards and type narrowing

3.2.3. Type aliases and type assertions

3.2.4. Generics and generic functions

3.2.5. Type manipulation and conditional types

3.2.6. Utility types

3.2.7. Mapped types

3.2.8. Conditional types

3.2.9. Template literal types

3.2.10. Recursive types

3.2.11. Using decorators and metadata reflections

3.3. TS with React

3.3.1. Typing React Components and props

3.3.2. With React Hooks

3.3.3. Typing event handlers and event objects

3.3.4. HOCs

3.4. Error handling

3.5. TS configuration

3.6. Modules

3.7. TS and Design Patterns

3.7.1. Singleton

3.7.2. Factory

3.7.3. Decorator

4. Common

4.1. OOP

4.2. GIT

4.3. Algoritms

4.3.1. Graphs

4.3.2. Search algorithms

4.4. Code complexity

4.4.1. Big O notation

4.5. Code styles

4.5.1. DRY

4.5.2. SOLID

5. Testing

5.1. Unit tests

5.2. Integration tests

5.3. e2e tests

6. Functional programming

6.1. Pure functions

6.2. Immutability

6.3. HOF

6.4. Function composition

6.5. Memoization

6.6. Recursion

7. Code Quality

7.1. Linters

7.2. Prettier

8. Architecture

8.1. Build tools

8.1.1. Webpack

8.1.2. Snowpack

8.1.3. Vite

8.2. Task runners

8.2.1. Yarn

8.2.2. Npm

8.2.3. pnpm

8.3. Performance optimization

9. HTML

9.1. Tags

9.2. Writing semantic HTML

9.3. Forms and validations

9.4. SEO Basics

9.5. Accessibility

10. CSS

10.1. Basics

10.2. Making layout

10.3. Resposive design and Media Queries

11. Javascript

11.1. Syntax and Basics

11.1.1. Variables

11.1.1.1. Declaration

11.1.1.2. Hoisting

11.1.1.3. Naming rules

11.1.1.4. Variable Scopes

11.1.2. Equality comparisons

11.1.3. Use strict

11.1.4. Alert, promt, confirm

11.1.5. Type convertion

11.1.6. Basic and Math operators

11.1.7. Conditional operators

11.1.8. Logical operators

11.1.9. For and while loop

11.1.9.1. Break and continue

11.1.10. IF and switch

11.1.11. nullish operator

11.2. Exception Handling

11.2.1. try / catch / finally

11.2.2. throw statement

11.2.3. Utilizing Error objects

11.3. Data types

11.3.1. Number

11.3.1.1. Methods

11.3.2. String

11.3.2.1. Methods

11.3.3. Undefined

11.3.4. Null

11.3.5. Object

11.3.5.1. Copy and link

11.3.5.2. this

11.3.5.3. Constructor, new

11.3.5.4. Optional chain ?

11.3.5.5. Object destructuring

11.3.5.6. Convert objects to primitves

11.3.5.7. Object prototyping

11.3.6. Symbol

11.3.6.1. Use Symbol as object keys

11.3.7. BigInt

11.4. Data structures

11.4.1. Array

11.4.1.1. Methods

11.4.2. Map

11.4.2.1. WeakMap

11.4.3. Set

11.4.3.1. WeakSet

11.4.4. JSON

11.5. Functions

11.5.1. Function Declaration

11.5.2. Function Expression

11.5.3. Arrow functions

11.5.4. Function Parameters

11.5.5. IIFE

11.5.6. Arguments

11.5.7. Recursion

11.5.8. Closures

11.5.9. Call/apply

11.5.10. Bind

11.5.11. Carrying

11.6. ES6+

11.7. DOM mantipulation

11.8. Asynchronous

11.8.1. Callbacks

11.8.1.1. Callback hell

11.8.2. Promises

11.8.2.1. async/await

11.8.3. setTimeout and setInterval

11.8.4. Event loop

11.8.4.1. Call Stack

11.8.4.2. Tasks

11.8.4.3. Browser API

11.9. Network Requests

11.9.1. Fetch API

11.9.2. XMLHTTPRequest

11.9.3. Websocket

11.10. Iterators and Generators

11.10.1. Asynchronous Iterators and Generators

11.11. Modules in JS

11.11.1. Common JS

11.11.2. Ecmascript modules

11.12. Memory management

11.12.1. Memory management

11.12.2. Garbage Collection

11.13. Classes