Production Frontend

Modern frontend stack:

Framework:

• React (most jobs).
• Next.js (React + SSR + routing).
• Vue + Nuxt.
• Svelte + SvelteKit.
• Solid + SolidStart.

Bundling:

• Vite (modern default): fast HMR.
• webpack (legacy but still used).
• esbuild, swc: faster compilers.
• Turbopack (Next.js): Rust-based.

Type checking:

• TypeScript dominates.
• Type files via DefinitelyTyped.
• VSCode integration.

State management:

• Redux (verbose but popular).
• Zustand (simpler).
• Jotai, Recoil (atomic).
• TanStack Query: server state caching.
• Context for tree-scoped state.

Routing:

• React Router (SPA).
• Next.js / Remix routing (file-based).

Styling:

• Tailwind CSS (utility classes).
• CSS Modules (scoped).
• styled-components (CSS-in-JS).
• Emotion.

Testing:

• Jest, Vitest (unit).
• React Testing Library (integration).
• Playwright, Cypress (e2e).

Deployment:

• Vercel (Next.js).
• Netlify.
• Cloudflare Pages.
• AWS Amplify.

Performance:

• Lighthouse audits.
• Core Web Vitals: LCP, FID/INP, CLS.
• Code splitting.
• Image optimization (Next.js Image).

Server-side rendering (SSR):

• Render on server, send HTML.
• Fast first paint.
• Good for SEO.
• Hydration on client.

Static site generation (SSG):

• Pre-render at build time.
• CDN-cacheable.
• Best for content-heavy.

Common bugs:

• Stale closures (effect deps).
• Hydration mismatch (server vs client diff).
• Missing keys on lists.
• Memory leaks (uncleared timers).
• Accessibility issues.

Modern trends:

• Server Components (React 19, Next.js 13+).
• Edge runtimes (Cloudflare Workers, Vercel Edge).
• Streaming HTML.
• AI-generated UIs.
• Web Components (slowly catching on).

For learning: build a tiny React, then use the real React for everything.

Don't roll your own framework for production. Use React, Vue, Svelte, or Solid based on your team's preference.