Select your current position
Pick a role and level — we'll show the growth path, skills and gap analysis.
Development path
Junior
0-2 years
Responsibility: Building components from designs (Figma). Developing UI components with React. State management (useState/useReducer). Writing basic tests.
Key skills:
Middle
2-5 years
Responsibility: Designing component architecture. State management (Zustand/Redux Toolkit). Render optimization (memo, useMemo). API integration. Accessibility (a11y).
Key skills:
Senior
5-8 years
Responsibility: Frontend application architecture. Bundle size and Core Web Vitals optimization. Design system development. SSR/SSG strategies. Team mentoring.
Key skills:
Lead / Staff
7-12 years
Responsibility: Frontend platform: mono-repo, CI/CD, design system. TypeScript standards. Coordination with design and backend. Micro-frontends when needed.
Key skills:
Principal
10+ years
Responsibility: Company frontend strategy. Framework selection. Build system optimization. Performance culture. Open-source contributions.
Key skills:
Gap analysis: skills to develop
To reach the next level you'll need to develop:
Optimizes Core Web Vitals in React/Next.js applications: LCP through load prioritization and Server Components, INP through useTransition and handler debouncing, CLS through reserving space for dynamic content and font display swap.
Implements complex React UI components using styled-components or Emotion with dynamic theming and responsive styles. Optimizes rendering performance by avoiding unnecessary style recalculations. Writes unit tests for styled components and applies proper CSS-in-JS patterns for state-driven styling.
Implements advanced data fetching patterns in React: mutations with optimistic updates in TanStack Query, infinite scroll through useInfiniteQuery, parallel and dependent queries. Configures global error handling and retry strategies.
Independently implements complex UI components with Next.js. Optimizes rendering performance. Writes tests. Applies state management tools.
Applies OWASP recommendations in React/Next.js applications: security headers configuration (CSP, HSTS, X-Frame-Options) through next.config.js, secure authentication through NextAuth.js, API route protection from injection. Conducts security code review, uses npm audit.
Implements PWA functionality in React/Next.js applications: caching strategies (cache-first, network-first) through Workbox, push notifications, offline fallback. Configures precaching of critical resources and runtime caching for API responses.
Implements complex UI components with advanced React patterns like compound components and render props. Optimizes rendering with useMemo, useCallback, and React.memo. Writes comprehensive unit and integration tests with React Testing Library.
Implements advanced rendering patterns in Next.js App Router: streaming SSR with Suspense, ISR with revalidate, parallel and intercepting routes. Optimizes TTFB through Server Components, configures data and full-page caching.
Designs state management in React applications: separation of server (TanStack Query) and client (Zustand/Jotai) state, re-render optimization through selectors and atomic state. Implements derived state, middleware in Zustand for logging and persistence.
Creates custom Tailwind CSS configuration for React projects: extends theme, creates plugins, uses @apply for reusable styles. Integrates with Radix UI and Headless UI, configures purge for optimal bundle size with Vite.
Configures advanced Vite setup for React: custom plugins, dependency optimization through optimizeDeps, API proxy configuration. Configures Vitest as test runner, env variables through .env files, production build setup.
Integrates advanced Web APIs in React applications: IntersectionObserver for lazy loading through hooks, ResizeObserver for adaptive components, History API for custom navigation. Creates reusable React hooks for typical Web API patterns.
Creates React wrappers for Web Components with correct TypeScript typing: property mapping, event forwarding, ref support. Implements bidirectional integration between React components and Custom Elements for use in other frameworks.
Configures visual regression testing for React components: Storybook integration with Chromatic for automatic screenshot comparison, Playwright visual testing for E2E scenarios. Covers key states: responsive breakpoints, dark mode, loading states.
Implements accessible React components: uses React Aria (Adobe) or Radix UI for accessible primitives, manages focus through useRef and focus management, implements keyboard navigation for custom components. Tests with axe-core and verifies through screen readers (VoiceOver/NVDA).
Creates comprehensive React component tests: mocking hooks and contexts, testing async operations with waitFor, integration tests with MSW for API mocking. Configures coverage reports, tests accessibility through jest-axe.
Optimizes React application bundle: configures chunk splitting in Vite for optimal caching, implements route-based code splitting in Next.js, tree-shaking for UI libraries. Configures bundle size limits in CI, analyzes and eliminates dependency duplication.
Creates reusable React components for design system based on Radix UI primitives: compound components, polymorphic components through asChild. Documents in Storybook with interactive examples, types props through TypeScript.
Uses advanced CSS capabilities in React components: container queries, :has(), @layer for specificity management, CSS logical properties. Configures CSS Modules with typing through typed-css-modules, animations through Framer Motion.
Career transitions
Possible career trajectories for the Frontend Developer (React) role
📈 Growth 1
Where you can grow from this role
↔️ Lateral 3
Adjacent roles for a lateral move
╨Я╨╡╤А╨╡╤Е╨╛╨┤ ╨╝╨╡╨╢╨┤╤Г frontend-╤Д╤А╨╡╨╣╨╝╨▓╨╛╤А╨║╨░╨╝╨╕
╨а╨░╤Б╤И╨╕╤А╨╡╨╜╨╕╨╡ ╨▓ fullstack ╤З╨╡╤А╨╡╨╖ ╨┤╨╛╨▒╨░╨▓╨╗╨╡╨╜╨╕╨╡ backend-╨╜╨░╨▓╤Л╨║╨╛╨▓