DS
React / Next.js Lead
Damco Solutions Inc
- Location not stated
- Staff / Principal
- 10 months ago
- React.js
- Next.js
- TypeScript
- Design Systems
- Redux
- Redux Toolkit
- Zustand
- Server Components
- Storybook
- Material UI
- Chakra UI
- WCAG
- Core Web Vitals
- Contentful
- React Query
- OAuth2
- JWT
- SAML
- CORS
- Devops
- CI/CD
- ESLint
- Prettier
- Jest
- Cypress
- Playwright
- Testing Library
- XSS
- CSRF
- HTML5
- CSS3
- Sass
- Styled Components
- Tailwind
- Node.js
- npm
- Yarn
- GraphQL
- Turborepo
- Webpack
- Vite
- Azure DevOps
- GitHub Actions
10 months ago
Key Responsibilities
1. Technical Leadership & Frontend Architecture
- Lead the technical direction for the React and Next.js codebase, ensuring modularity, scalability, and maintainability.
- Define architectural patterns including:
- Component architecture and atomic design
- Layout systems
- State management strategy (Redux, RTK Query, Zustand, Recoil, Context API)
- Routing and navigation patterns in Next.js
- SSR, ISR, SSG strategies
- Work closely with the Web Architect to align on frontend technical vision.
- Establish standards for folder structure, naming conventions, code patterns, and component documentation.
- Define the strategy for:
- Server-Side Rendering (SSR)
- Static Site Generation (SSG)
- Incremental Static Regeneration (ISR)
- Edge rendering and caching policies
- Optimize data-fetching using:
- getServerSideProps, getStaticProps, getStaticPaths
- New Next.js App Router features (server components, client components)
- API routes, middleware, and edge functions
- Ensure correct handling of hydration, loading states, caching, and route transitions.
- Lead integration with enterprise design systems (e.g., Storybook, Material UI, Chakra UI, custom component libraries).
- Ensure components follow accessibility guidelines (WCAG 2.1 AA).
- Enforce responsive design best practices across breakpoints, devices, and screen densities.
- Conduct UI performance optimization related to UI rendering, layout shifts, and Core Web Vitals.
- Own performance tuning efforts for:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
- Time to Interactive (TTI)
- Memory usage and rendering speed
- Optimize bundling and build processes:
- Code splitting
- Tree shaking
- Lazy loading
- Server and client-side caching
- Monitor and diagnose performance issues using:
- Lighthouse
- Web Vitals reports
- Chrome DevTools
- Next.js analyzer
- Define enterprise-grade state management strategies using:
- Redux Toolkit
- RTK Query
- Zustand
- Context API + Hooks
- React Query / SWR
- Implement data normalization, caching layers, prefetching, optimistic updates, and error boundaries.
- Ensure predictable and traceable application state flows.
- Partner with BFF developers to define efficient, secure data contracts.
- Implement authentication and authorization flows:
- OAuth2
- JWT
- SSO / SAML if applicable
- Handle robust error handling, retries, fallbacks, and data validation.
- Enforce secure API consumption patterns and CORS best practices.
- Lead code reviews with a focus on:
- Performance
- Security
- Maintainability
- Accessibility
- Best practices and style standards
- Mentor developers through pair programming, technical workshops, and architectural guidance.
- Define coding standards for:
- TypeScript
- React hooks usage
- Custom hooks development
- Component reuse
- API consumption patterns
- Collaborate with DevOps to optimize:
- CI/CD pipelines for web builds
- Linting and formatting tools (ESLint, Prettier)
- Automated testing frameworks (Jest, RTL, Cypress, Playwright)
- Static analysis tools
- Optimize build performance and environment configuration through Next.js settings.
- Define test hierarchy:
- Unit tests
- Component tests
- Integration tests
- E2E tests
- Implement testing frameworks:
- Jest + React Testing Library
- Cypress or Playwright for E2E
- Ensure proper mocking of APIs, services, and data flows.
- Enforce frontend security best practices:
- Avoiding XSS vulnerabilities
- Securing API tokens
- Sanitizing inputs
- Preventing CSRF
- Using secure cookies
- Implement role-based access controls and secure routing.
- Ensure compliance with enterprise standards for:
- Data separation
- User access
- Privacy policies
- Logging & observability
- Document architectural decisions (ADR logs).
- Maintain developer onboarding guides and coding standards.
- Create reusable component documentation and Storybook setups.
- Write technical specifications for complex front-end features.
Technical Skills
- 10+ years of frontend engineering with a specialization in React.
- 3+ years of experience with Next.js in enterprise or production settings.
- Expert in:
- React (Hooks, Context, Custom Hooks, Lifecycle)
- Next.js App Router & Pages Router
- TypeScript
- HTML5, CSS3, Sass, Styled Components, Tailwind (or equivalent)
- Node.js, npm/yarn
- Strong understanding of:
- SSR, SSG, ISR
- Web performance optimization
- Modern browser APIs
- Responsive and accessible design
- Experience integrating with REST, GraphQL, and WebSocket APIs.
- Experience with micro-frontends or monorepos.
- Familiarity with:
- NX
- Turborepo
- Webpack, Rollup, Vite
- Experience building design systems and component libraries.
- Experience with Azure DevOps pipelines or GitHub Actions.
- Excellent communication and leadership skills.
- Strong decision-making ability with architectural trade-offs.
- Collaborative mindset with cross-team empathy.
- Ability to mentor, coach, and elevate team capabilities.
- Strong ownership mentality and attention to detail.
- Ability to handle complex business requirements and break them into technical deliverables.
Education & Background
- Bachelor's or Master's degree in Computer Science, Engineering, or equivalent practical experience.
- Portfolio of large-scale React/Next.js apps or open-source contributions preferred.
React / Next.js Lead · Damco Solutions Inc