Field Notes

A comprehensive guide on how to navigate this knowledge base and make the most of the learning materials.

HTML, CSS, and DOM Essentials HTML gives content meaning, CSS controls presentation, and the DOM is the browser’s JavaSc...

Git and GitHub Learning Notes Git records project history locally. GitHub hosts Git repositories and adds collaboration...

Commands and Keyboard Shortcuts This is a macOS first quick reference for everyday development. ⌘ is Command, ⌥ is Optio...

JavaScript Learning Notes This is a revision guide from JavaScript basics to advanced concepts. JavaScript is the langua...

TypeScript Learning Notes TypeScript is JavaScript with a static type system. It catches many mistakes before code runs,...

Browser Developer Tools for Full Stack Applications Browser DevTools let you inspect the page the user actually receives...

React Learning Notes React is a JavaScript library for building user interfaces from components. A component receives in...

React State Management Learning Notes State management means deciding where a piece of data should live, who can change...

Next.js Learning Notes Next.js is a React framework for building web applications with file system routing, server rende...

Next.js Authentication and Authorization Notes Authentication is not one feature. It is a chain of decisions: Read nextj...

Frontend Design and UI Library Learning Notes Frontend design is the practical skill of turning product intent into scre...

UI Pattern Cookbook This is a compact cookbook for common frontend product screens and components. Use it after frontend...

Color Guide for Frontend UI Color in UI is a communication system. It creates hierarchy, shows state, supports brand, an...

Tailwind CSS Learning Notes Tailwind CSS is a utility first CSS framework. Instead of writing many custom class names fi...

shadcn/ui Learning Notes shadcn/ui is a collection of component recipes and a CLI that copies component source code into...

Frontend Testing Learning Notes Frontend testing proves that the UI behaves correctly for users, not just that component...

Full Stack Libraries Learning Notes This guide covers small, reusable libraries commonly used around a full stack applic...

Prisma Learning Notes This project is a small TypeScript + Prisma + PostgreSQL practice project. Current models: User To...

7. Prisma Client Setup In src/index.ts: Why $disconnect() matters: Prisma opens a database connection. At the end of you...

15. Upsert upsert means: If it exists, update it. If it does not exist, create it. This is useful with unique fields. Th...

23. Transactions A transaction means: Run multiple database operations together. If one fails, all fail. If all pass, al...

31. Practice Tasks Try these one by one in src/index.ts. Task 1: Create users Create three users with different username...

Backend from First Principles — learning notes Source playlist: Backend from First Principles by Sriniously. This folder...

Full Stack Practice Lab — React, Next.js, TypeScript, Backend, and DevOps This is a deeper companion to the study guides...

Backend Practice Lab — TypeScript and Node.js This is a shared hands on path for the study guides. It is added teaching...

A running list of side project ideas, from plausible to absurd.

Books and articles I want to get through, with quick impressions.

Notes Status Tracker Goal Keep this folder as a practical JavaScript, TypeScript, React, Prisma, browser tooling, and fu...

Archived Notes Expansion Plan This is the original planning content that was replaced when plan.md became the current st...

Notes A practical revision notebook for JavaScript, TypeScript, React, Prisma, browser tooling, commands, and backend fu...