Frontend — Maqbool Thoufeeq Tharayil

TharayilMaqbool Thoufeeq

Projects
Blogs
Contact
Hub

Engineering Notes

Frontend

Engineering

Frontend

Working notes on the frontend stack I build with — React and Next.js (App Router), TypeScript, Tailwind, data fetching and state, performance, forms, accessibility, and the tooling that ships it.

10 subtopics

Subtopics10

01componentReact FundamentalsComponents, the hooks rules, the render model, and the traps that cause most React bugs.1 item

02layout-templateNext.js (App Router)Server vs client components, file-based routing, data fetching, caching, and server actions on the App Router.1 item

03file-typeTypeScript for FrontendTyping props and hooks, generics, narrowing, discriminated unions, and the utility types worth knowing.1 item

04database-zapState Management & Data FetchingServer state vs client state, when to use Context, Zustand, or a query library, and avoiding global-state overreach.1 item

05paletteStyling & TailwindUtility-first styling, design tokens, composing variants, responsive and dark mode, keeping class soup readable.1 item

06gaugePerformance & RenderingBundle size, code splitting, memoization done right, images and fonts, and the Core Web Vitals that matter.1 item

07clipboard-listForms & ValidationControlled vs uncontrolled inputs, React Hook Form, Zod schema validation, server actions, and error UX.1 item

08accessibilityAccessibility & UXSemantic HTML, keyboard and focus management, ARIA used correctly, color contrast, and respecting user preferences.1 item

09wrenchBuild, Tooling & DeploymentBundlers, linting and formatting, env handling, type-checking in CI, and shipping a Next.js app to production.1 item

10linkReference LinksOfficial docs and primary references for everything in these frontend notes.1 item