Your Full-Stack Study Notes

A personal, visual reference built alongside the LibraryManagementSystem project. Every concept you learn gets a page here — with diagrams, examples, and the exact mistakes you hit (so you never repeat them).

How to use these notes Read the page for a concept after you build with it — it locks in what your hands just did. When you're stuck later, come back here first. Open any file by double-clicking it; everything works offline, no internet needed.

Phase 1 & 2 — HTML, CSS & JavaScript

HTML Basics

Structure, tags, headings, lists, links, tables, and forms — the skeleton of every web page.

✔ Complete

CSS Basics

Selectors, the box model, classes, block vs inline, and flexbox layout.

✔ Complete

JavaScript

The full working Library: variables → objects → DOM → events → CRUD by id, map/filter/find/sort, localStorage, references. 28 sections.

✔ Core complete — the app is built

Phase 3 — TypeScript

TypeScript

JS with a proofreader: annotations, interfaces, unions, narrowing, DOM typing — and how each of your real JS bugs gets caught at compile time. 14 sections.

✔ PHASE 3 COMPLETE (2026-08-30) — conversion + capstone (loans, due dates, fines) built & verified

Phase 4 — Node.js + Fastify

Node.js & Fastify

JS leaves the browser: npm, modules (the exports-crash explained), what a server really is, HTTP, and your first Fastify routes. 11 sections.

▶ Current phase — read first, then the hello-server task

Phase 5 — SQL, PostgreSQL & Prisma

SQL & Prisma

Tables = your interfaces, WHERE = your filter, JOIN = your renderLoans lookup — and your bookId becomes a real foreign key. Prisma makes it all typed. 10 sections.

🔜 Notes ready — starts after Phase 4

Phase 6 — React + Vite

React

UI = f(state): the save→render spine you drilled by hand becomes automatic. Components, JSX, useState, the no-mutation rule, fetch. 11 sections.

🔜 Notes ready

Phase 7 — Tailwind + Zustand

Tailwind & Zustand

Utility CSS (your CSS knowledge, new spelling) + one tidy home for app state. Short phase, big polish. 5 sections.

🔜 Notes ready

Phase 8 — Auth

Auth

Who are you (bcrypt, JWT) and what may you do (roles, 401 vs 403). Guard clauses grow up and stand at the door. 7 sections.

🔜 Notes ready

Phase 9 — Desktop & Mobile (optional)

Electron & React Native

The same skillset shipping installers and phone apps — what transfers, what changes, and when a plain website is the right answer. 5 sections.

🔜 Notes ready — optional phase

Phase 10 — Git, Servers & Deployment

Git & Deployment

Version control (your frozen-copy instinct, done right), SSH, nginx, PM2, HTTPS, backups — ship a change to a live server with zero help. 12 sections.

🔜 Notes ready — the finale; then the Real Projects track

Maintained by your mentor. New pages appear as you advance through the roadmap.