Web dev

Foundations

Easy Medium Hard

HTML

CSS

Bash basics (cd, ls, pwd,

mkdir, touch, vi)

Bash medium (grep,

piping, reverse search)

Git/Github

JS Intro, Single threaded

nature of JS

Async JS, callback

queue, event loop

Creating promises, Common

Promise API methods

Common JS APIs (map, filter,

reduce, Object.keys)

Simple frontend, DOM

Easy Medium Hard

Intro to DOM, DOM Tree Structure

Common DOM APIs (getElementById,

getElementsByClassName, querySelector,
innerHTML, innerText, getAttribute,
setAttribute).

Event handlers, onClick, stopPropagation,

Easy Medium Hard

localStorage

DOM
Manipulation,
Dynamic
frontends

Creating a simple
reconciler,
Foundation for
react

Project
1. Pure frontend TODO app using DOM Manipulation
Node.js/Bun/Cloudflare Runtime - Various JS runtimes

easy medium hard

What is a JS runtime

Node.js installation, common

APIs

file system api, fetch.

External packages, axios vs

fetch

v8, cf
runtime

stream, worker threads, cluster

module,
HTTP Servers

Simple Medium Advance

What are HTTP Servers

Methods, routes, URLs, IPs and

domains

headers, body, query parameters

Intro to express, creating routes

Middlewares in express

File system like DBs

Authentication using jwts, basics of

jwts

Secret management using Doppler

NoSQL Databases

Easy Medium Hard

Intro to Databases

SQL vs NoSQL

MongoDB Intro, getting your first DB

mongoose, Schemas etc. Simple CRUD

Relationships intro

Relationsips in Mongo

Aggregations in mongo
SQL Databases

Easy Medium Hard

Recap SQL vs
NoSQL

Postgres intro, Creating schemas while dealing with

getting your free SQL databases, CREATE TABLE

Creating schemas while dealing with

SQL databases, CREATE TABLE

SQL queries (CRUD)

Indexes

Transactions and
Concurrency Control

Normalization

Sub queries, batch queries

ORMs

Simple Medium Hard

Intro to ORMs

Prisma basics, setup, schema generation and CRUD queries

Transactions and relationships in prisma

Drizzle basics, setup, schema

Txns and relationships in drizzle

React

Revise DOM, foundation of React,

why frontend frameworks

Components in react useState, useEffect

Routing in react Connecting FE to BE

useRef, useMemo,
useCallback

Custom hooks

Context API

Intro to state
management

intro to recoil, atoms

and selectors

atomFamily,
selectorFamily

Styling React apps

Easy Medium Hard

Material UI

Tailwind

Shadcn

Typescript

Easy Medium Hard

TS vs JS, why TS?

types in ts
Easy Medium Hard

interfaces in ts

Advance TS APIs (Partial, Exclude …)

Project
Pure frontend -
1. Gmail clone
Full stack
1. Excelidraw

NextJS

Easy Medium Hard

Why NextJS, SSR vs CSR

File based routing

Middlewares

SSG, ISR

Tailwind, shadcn integration

API routes

Data fetching

NextAuth, Cookie based auth

Internationalization
Monorepos, Turborepo, lints

Easy Medium Hard

What is linting

Prettier, eslint

pre commit hooks/husky

lints in CI

What is a monorepo

Basic yarn workspaces monorepo

What is turborepo

Turborepo

Websockets, rtc

Easy med hard

one way vs two way comm

what are ws, how are they diff

from http

Creating a websocket server

Client side logic to connect to a

ws server

UDP vs TCP communication,

webrtc

SFUs and
Mediasoup

Project
1. Build a chat app (simple)
2. Build a chess app/other real time game
Testing

Easy Medium Hard

Why testing?

Unit tests

Integration tests

End to end tests

Advance backend

Easy Medium Hard

Advance BE communication

queues (redis)

pub subs (redis/kafka/RabitMQ)

Scaling ws, http servers

Node.js vs golang vs rust for performance

More topics
•⁠ ⁠Zod •⁠ ⁠Serverless BE •⁠ ⁠openAPI spec •⁠ ⁠Autogenerated clients •⁠ ⁠Rate Limiting •⁠
⁠Captcha •⁠ ⁠ddos protection •⁠ ⁠sharding, replication, Resiliency •⁠ ⁠GRPC •⁠ ⁠Load Balancers
•⁠ ⁠CAP theorem
Project
1. Building codeforces/leetcode
2. Scale your realtime app
Good auxilary stacks to know -
Firebase
Strapi