Notes

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

Start Here

• JavaScript: language fundamentals, browser APIs, Node basics, production guidance, commands, resources, and interview questions.
• TypeScript: strict-mode typing, narrowing, generics, runtime validation cautions, Prisma examples, production practices, and interview questions.
• React: components, JSX, state, forms, effects, Hooks, context, reducers, TypeScript, styling, routing/data loading, testing, production architecture, accessibility, and security.
• Frontend Design: CSS foundations, responsive layout, typography, spacing, color, accessibility, design tokens, Tailwind, headless UI, component libraries, icons, animation, charts, tables, and drag/drop.
• Color Guide: UI color roles, contrast, palette structure, brand and semantic colors, data colors, dark mode, CSS tokens, Tailwind tokens, and shadcn/ui theming.
• Tailwind CSS: setup, utility classes, responsive design, theme tokens, dark mode, class composition, forms, dashboards, mistakes, and production checks.
• shadcn/ui: setup, CLI workflow, components.json, component anatomy, theming, Tailwind v4 notes, forms, customization, updates, and accessibility checks.
• Frontend Testing: Vitest, Testing Library, MSW, Playwright, Storybook, accessibility checks, visual regression, CI strategy, and testing practice path.
• UI Patterns: practical cookbook for forms, settings pages, dashboards, tables, filters, empty states, loading, errors, dialogs, command menus, uploads, navigation, toasts, and destructive actions.
• State Management: React built-ins, server state, TanStack Query, Zustand, Redux Toolkit, Jotai, Recoil status, URL state, form state, persistence, and choosing the right tool.
• Next.js: App Router, layouts, Server and Client Components, data fetching, caching, Server Functions, Route Handlers, Prisma boundaries, security, testing, and deployment.
• Next.js Auth: authentication, sessions, cookies, Auth.js, credentials, OAuth, authorization, CSRF, XSS, multi-tenant roles, rate limiting, and auth testing.
• Prisma: schema basics, Prisma Client, CRUD, relations, migrations, seeding, transactions, production database practices, commands, and exercises.
• Full-Stack Libraries: Zod, bcrypt, JWTs, fetch/Axios, security middleware, logging, utility libraries, testing tools, and how they fit together.
• Browser DevTools: Elements, Console, Sources, Network, storage, performance, security, and production debugging workflows.
• Commands and Shortcuts: terminal, Git, Node/npm, Prisma, VS Code shortcuts, and project checks with safety labels.

Other Notes

• Web Basics: foundational web concepts.
• Git and GitHub: Git/GitHub notes.
• Backend From First Principles: backend study guides, video notes, and practice labs.

Planning

• Status Tracker: completed notes, current backlog, and maintenance checklist.
• Archived Expansion Plan: original roadmap content kept for history.

Suggested Learning Order

1. web-basics.md
2. javascript.md
3. typescript.md
4. command.md
5. browser-tools.md
6. react.md
7. frontend-design.md
8. color.md
9. tailwind.md
10. shadcn.md
11. frontend-testing.md
12. ui-patterns.md
13. state-management.md
14. nextjs.md
15. nextjs-auth.md
16. Prisma.md
17. libraries.md
18. Backend-from-first-principle/README.md

Use the order loosely. When building projects, jump between the language notes, command reference, DevTools guide, and production checklists as needed.