Frontend Development Roadmap 2026

• ES modules and destructuring
• Closures and this
• Promises and async patterns
• Event loop
• Map, Set and immutability

Project: Build a vanilla JavaScript movie search app with debouncing, request cancellation and caching.

• Types and interfaces
• Narrowing and type guards
• Generics
• Utility and mapped types
• Strict tsconfig

Project: Convert the movie search app to strict TypeScript with typed API responses and Zod validation.

• Service workers and PWAs
• Observers and Web Workers
• History and URL APIs
• Cascade layers and tokens
• Tailwind CSS and accessibility

Project: Create an installable offline-capable notes PWA with a themed, accessible component library.

• Vite configuration
• Code splitting and tree shaking
• ESLint and Prettier
• Package managers and lockfiles
• CI with GitHub Actions

Project: Set up a pnpm monorepo with a shared UI package, linting, hooks and CI builds.

• Core Web Vitals
• Profiling long tasks
• Caching headers
• Vitest and Testing Library
• Playwright end-to-end tests

Project: Optimise a slow product listing page to pass Core Web Vitals, with tests and Lighthouse CI budgets.

• SSR, SSG and SPA trade-offs
• State management strategy
• Authentication patterns
• Observability
• Frontend system design

Project: Build and deploy a typed e-commerce storefront with SSR product pages, cart state and error monitoring.