Frontend Lead

Job Description

As the Frontend Lead, you will be a technical authority for our web platforms. You will bridge the gap between design and engineering, ensuring our Next.js and Reactapplications are performant, accessible, and rock-solid. You will lead the implementation of a "shifted-left" testing strategy, combining unit, visual (Chromatic),and end-to-end (Cypress) testing to ensure a defect-free user experience. You will ensure the frontend implementation aligns perfectly with strategic product goals andUI/UX vision. You will be responsible for building authenticated experiences and Single Page Applications (SPA) that are scalable and maintainable over time.

Key Responsibilities

● Design & Best Practices: Lead the design of scalable SPA architectures using Next.js. Define patterns for state management, data fetching, and component composition.

● Component Excellence: Oversee a robust component library, built from a Figmadesign library and implemented using ShadCN components with Tailwind CSS,ensuring strict adherence to design tokens and accessibility standards.

● E2E Testing Strategy: Act as the champion for Cypress, establishing best practicesfor end-to-end testing, including custom commands, intercepting API calls, andCI/CD integration.

● Visual Quality Assurance: Manage visual regression workflows using Chromaticand Storybook to ensure pixel-perfect UI across all deployments.

● Technical Mentorship: Conduct high-impact code reviews, mentor mid-level devs,and maintain a high bar for frontend engineering excellence.

● Frontend Command: Take absolute ownership of the frontend architecture,specifically leveraging Next.js's App Router paradigm to maximize performance(SSR/SSG).

● Code Purity & Principles: Enforce rigorous coding standards, promoting principlessuch as SOLID and functional programming to ensure the codebase remainsmaintainable and debt-free.

● Developer Ergonomics: Prioritize the development experience, specifically withinthe Component-Driven Development (CDD) workflow, by optimizing componentauthoring, documentation, and the overall developer setup.

● Performance Optimization: Take ownership of web performance metrics (Core WebVitals), implementing strategies for efficient resource loading, image optimization,and bundle splitting.

● API Integration & Data Handling: Define best practices for seamless integrationwith back-end services (RESTful APIs, GraphQL) and efficient client-side datacaching/state management.

● Cross-functional Collaboration: Serve as the primary technical point-of-contact,collaborating closely with UX/UI designers, product managers, and back-endengineers to deliver cohesive features.

● Tooling & Workflow: Standardize and manage the entire frontend developmenttoolchain.

Technical Requirements

● React & Next.js Mastery: Deep expertise in the React ecosystem (Hooks, Context,Server Components) and Next.js optimization (ISR/SSR/SSG).

● Advanced Testing: Extensive experience with Cypress for E2E testing (writingresilient selectors, managing test data, and debugging).

● Visual Testing: Proven track record using Chromatic for UI regression and Storybook for component-driven development.

● Tailwind CSS: Expert-level utility-first styling, including complex layouts, responsive design, and design system implementation.

● Tooling & CI/CD: Proficiency in modern build tools and integrating Cypress/Chromatic suites into automated deployment pipelines.

● Advanced Next.js Architecture: Demonstrated capability to utilize and optimize the Next.js App Router for complex, production-grade applications, focusing on data fetching and caching strategies.

● Testing Ecosystem Mastery: Expert-level proficiency not just in E2E (Cypress) and Visual (Chromatic), but also in setting up and enforcing comprehensive Unit and Integration testing using frameworks like Jest and React Testing Library orPlaywright.

● UX/UI Translation: Collaborate with UX team to make joint decisions between FEand UX. Must have exceptional ability to translate complex UI/UX requirements into structured, high-quality code while applying modern frontend design patterns.

● State Management: Proven experience with modern state management libraries beyond Context API (e.g., Redux Toolkit/RTK Query or equivalent).

● Debugging & Profiling: Expert skills in browser-based performance profiling and debugging tools to diagnose and resolve complex runtime issues and memory leaks.

● Accessibility: Deep commitment to and experience in building WCAG-compliant interfaces, including ARIA best practices and keyboard navigation.