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 Figma design 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 practices for end-to-end testing, including custom commands, intercepting API calls, and CI/CD integration.

? Visual Quality Assurance: Manage visual regression workflows using Chromatic and 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 Front End engineering excellence.

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

? Code Purity & Principles: Enforce rigorous coding standards, promoting principles such as SOLID and functional programming to ensure the codebase remains maintainable and debt-free.

? Developer Ergonomics: Prioritize the development experience, specifically within the Component-Driven Development (CDD) workflow, by optimizing component authoring, documentation, and the overall developer setup.

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

? API Integration & Data Handling: Define best practices for seamless integration with Back End services (RESTful APIs, GraphQL) and efficient client-side data caching/state management.

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

? Tooling & Workflow: Standardize and manage the entire Front End development toolchain.

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 (writing resilient 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 or Playwright.

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

? State Management: Proven experience with modern state management libraries beyond Context API (eg, 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.