Job Title: Senior Next.js Engineer – AI Driven Developer

Location: Cape Town, South Africa (Hybrid, in-office 3 days a week Monday

through Wednesday, Remote)

Reports to: Senior Director, Engineering

About NYSHEX

NYSHEX is a leading platform in the shipping industry, solving the critical issue of contract fulfillment for carriers, shippers, and NVOCCs. Our mission is to unite these stakeholders through shared digital infrastructure, improving performance and reducing manual workloads.

Job Summary:

• We are seeking an experienced Senior React Engineer to join our growing team. You will be

• responsible for developing and maintaining high-performance, scalable web applications

• using React.js and Next.js. The ideal candidate must be proficient in Next.js and familiar

• with AI productivity tools (like GitHub Copilot). A passion for AI and the ability to integrate

• new technologies quickly is essential. Additionally, we are looking for someone with an

• interest in design and forward-thinking solutions, as we currently do not have a dedicated

• designer and do not plan to hire one in the near future. A key focus of this role will also be

• building intuitive UI for complex data visualizations, which requires unique problem-solving and UI design skills.

Key Responsibilities:

Core Next.js & React Development

• Design, develop, and maintain Next.js applications using server-side rendering (SSR), static site generation (SSG), and incremental static regeneration (ISR).

• Build reusable React components and layouts, emphasizing separation of concerns, performance, and maintainability.

• Collaborate closely with backend engineers to consume and optimize RESTful and GraphQL APIs.

• Ensure code is clean, modular, and well-documented, following industry best practices (e.g., TypeScript typing, linting, formatting).

AI-Enabled Front-End Features

• Integrate LLM-powered agents or experiences (e.g., via AWS Bedrock,

• Anthropic Claude, AWS QuickSightor OpenAI API) directly into Next.js pages for customer support, data lookup, or guided workflows.

• Develop AI-driven, interactive data visualizations that can surface insights in real time - leveraging libraries like D3.js or Recharts combined with on-the-fly model inference for intelligent graphing.

• Implement intelligent form autofill, code-snippet previews, or suggestion panels using GenAI APIs (e.g., GitHub Copilot suggestions embedded into a code-editing interface).

• Collaborate with Design and Data Science to prototype and iterate on AI-augmented UI patterns.

GenAI-Assisted Productivity & Tooling

• Leverage AI-powered coding assistants (GitHub Copilot, Cursor, CodeWhisperer) in your IDE to write boilerplate, generate test cases, and propose UI component variations.

• Use AI to automatically generate or update unit tests, integration tests,and UI snapshots, ensuring high coverage (e.g., with Jest, React Testing Library, and Playwright).

• Continuously evaluate emerging AI productivity tools (e.g., Figma AI Plugins, GitHub Copilot Chat for Front-End) to streamline design handoffs, component creation, and accessibility audits.

• Champion best practices around validating AI-generated code—verifying suggestions for security, performance, and maintainability before merging.

UI/UX & Design Collaboration

• Own the front-end design system: develop and maintain a component library (e.g., using Tailwind CSS or Styled-Components) that scales withAI-driven theming and internationalization (i18n).

• Contribute to design discussions, especially around AI-enabled features —helping to wireframe and prototype mockups in Figma (including Figma AI Plugins) before handing off to engineering.

• Since NYSHEX currently lacks a dedicated designer, provide front-end design leadership: define style guidelines, accessibility standards (WCAG 2.x), and UX flows—particularly for complex data visualizations.

• Partner with product stakeholders to translate requirements into mockups that illustrate AI-driven user experiences, such as dynamic filtering driven by model inference or natural language query

• interfaces.

Testing, Debugging & Quality Assurance

• Implement and maintain automated test suites using Jest, React

• Testing Library, and Playwright—leveraging AI tools to update tests when the DOM structure changes.

• Ensure high test coverage for critical workflows, including AI-powered components (e.g., mocking model endpoints to validate chat or recommendation widgets).

• Proactively debug front-end issues in staging and production, using browser-based profiling (Chrome DevTools) and APM integrations (e.g.,

• AWS X-Ray or Datadog Real-User Monitoring) to surface performance bottlenecks.

• Enforce security best practices (e.g., sanitizing user inputs, avoiding XSS vectors in code and AI-rendered content).

Performance, Scalability & Observability

• Optimize Next.js applications for maximum speed: leverage code splitting, image optimization (Next/Image), and smart caching strategies (ISR, SWR).

• Monitor AI endpoint latency and error rates, ensuring that LLM calls or model-backed APIs degrade gracefully (e.g., fall back to static recommendations or cached responses).

• Integrate observability tools (e.g., Sentry for error tracking, Datadog or CloudWatch for front-end metrics) to measure key UX KPIs such as Time-to-Interactive (TTI), First Contentful Paint (FCP), and first AI response time.

• Participate in on-call rotations to triage critical front-end incidents, including those involving third-party AI services (rate limits, auth failures, etc.).

Mentorship & Technical Leadership

• Mentor and pair-program with mid-level and junior front-end engineers—teaching them how to properly integrate and test AI-powered components.

• Lead code reviews with a focus on design patterns for AI integration, accessibility (ARIA attributes), and Next.js best practices (API routes, image optimization, internationalization).

• Drive architectural discussions around introducing new AI frameworks (e.g., LangChain.js, Tiptap + AI plugins) and maintaining the front-end roadmap.

• Contribute to Architecture Decision Records (ADRs) that document AI-related front-end trade-offs, such as choosing between client-side LLM calls vs. server-side orchestration.

Process Improvement & Innovation

• Research emerging AI-enabled front-end trends—innovations in on-device inference (e.g., TensorFlow.js), in-browser embeddings, or browser-based LLM runtimes—and propose proof-of-concepts when appropriate.

• Identify opportunities to streamline the SDLC by automating repetitive tasks with AI: from PR triage (labeling, sentiment analysis) to accessibility audits (using tools like axe-core + AI-based code suggestions).

• Advocate for improved collaboration between front-end, design, and data-science teams: introduce regular “AI demo days” where teams showcase new model capabilities or integrations.

Key Performance Indicators (KPIs)

• AI Feature Adoption: Percentage of new UI features that leverage an AI component (e.g., chat assistance, model-driven recommendations) and their user engagement metrics (e.g., click-through rates, session length).

• Code Quality & Coverage: Maintain ≥ 85% test coverage across front-end code; demonstrate a 20% reduction in post-release defects through AI-augmented testing.

• Performance Metrics: Achieve < 2.5 s Time-to-Interactive (TTI) on core pages and < 500 ms average LLM/API response time for AI-powered components.

• GenAI Productivity: Track percentage of pull requests that include AI-generated code or tests—aim for ≥ 50% by Q4.

• Mentorship & Collaboration: Conduct ≥ 2 internal workshops or brown-bags on AI-enabled front-end techniques per quarter.

Tech Stack

Languages & Frameworks

• Primary: JavaScript/TypeScript (ESNext), React 18+, Next.js 13+.

• Component Libraries: Tailwind CSS, shadcn/ui, Styled-Components or Emotion.

• AI Integration: Familiarity with integrating LLMs (e.g., via AWS Bedrock,

• OpenAI, Anthropic) into React components; experience with on-device models (TensorFlow.js) is a plus.

• Testing: Jest, React Testing Library, Playwright (end-to-end).

AI Productivity Tools

• IDE Assistants: GitHub Copilot, Amazon CodeWhisperer, Cursor.

• Design Tools with AI: Figma (including Figma AI Plugins), Framer Motion (with AI-assisted animation suggestions).

• AI in CI/CD: Integrate AI-driven security scans (e.g., SonarQube, Snyk +

• AI vulnerability analysis) and code-quality tools (e.g., DeepSource,

• CodeQL).

Cloud & Infrastructure

• Hosting: Vercel or AWS Amplify for Next.js deployments; proficient with

• AWS services (S3, CloudFront, Lambda@Edge) to serve static assets and edge functions.

• AI Agents: AWS Bedrock, Anthropic Claude, or OpenAI endpoints—experience deploying and securing model endpoints is a plus.

• Data Fetch: RESTful APIs or GraphQL (Apollo Client or Relay); use SWR or React-Query for data fetching and caching.

• Real-Time & Streaming: WebSockets (e.g., Socket.io) or Server-Sent Events for live AI annotation feeds or chat updates.

Data & Visualization

• Visualization Libraries: D3.js, Recharts, or Victory—able to bind data from AI-powered inference (e.g., clustering, sentiment).

• Charting & Dashboards: Integrate QuickSight or Superset if embedding BI dashboards is required, and layer AI insights on top.

• State Management: React Context, Zustand, or Redux Toolkit with

• middleware for handling AI request states (loading, error, success).

CI/CD & DevOps

• Source Control: GitHub, GitHub Actions—familiarity with AI-driven CI steps, such as auto-generated release notes or PR summaries.

• Infrastructure as Code: Terraform or AWS CDK for provisioning AI endpoints and front-end hosting.

• Monitoring & Observability: Sentry (front-end error tracking), Datadog Real-User Monitoring (RUM), or AWS CloudWatch Browser RUM for UX and AI endpoint latency.

Security

• Front-End Security: OWASP Top 10 awareness (XSS, CSRF)—especially when rendering AI-generated HTML/content safely.

• Authentication/Authorization: Integrate with Auth0 or AWS Cognito; secure API keys for AI services in environment variables or AWS SecretsManager.

• Compliance: Ensure GDPR/CCPA compliance if user data is fed into third-party AI models; sanitize PII before sending to third-party endpoints.

• SonarQube, Snyk or Burp Suite, and AWS Inspector or Black Duck forAI-scanned vulnerabilities

Required Qualifications

• 6+ years of professional front-end development experience, with a strong focus on React and Next.js.

• Proven track record integrating AI-powered features (e.g., chat assistants, model-driven recommendations, dynamic data

• visualizations) into production applications.

• Hands-on experience using GenAI productivity tools (GitHub Copilot, Amazon CodeWhisperer, Cursor) daily to expedite coding, testing, and documentation.

• Deep understanding of Next.js internals: SSR, SSG, ISR, API routes, andedge rendering.

• Strong proficiency in TypeScript, with an emphasis on type safety and code scalability.

• Excellent debugging skills—able to profile performance bottlenecks in complex AI pipelines (front-end→LLM→back-end).

• Demonstrated ability to lead design discussions and produce high-fidelity prototypes (in Figma), especially when no dedicated designer isavailable.

• Solid grasp of accessibility (WCAG 2.x) and responsive design principles for complex data-heavy UIs.

Preferred Qualifications

• Experience building AI-augmented documentation portals or developer tools (e.g., code-sandboxed playgrounds with live model inference).

• Familiarity with in-browser ML/AI frameworks (TensorFlow.js, ONNX Runtime Web).

• Prior exposure to AWS GenAI stack (Bedrock, QuickSight Q, Nova) from a front-end perspective—embedding or orchestrating model calls.

• Experience with design-system tooling that integrates AI suggestions (e.g., Figma AI Plugins for generating variants, optimizing color palettes).

• Knowledge of real-time front-end frameworks (e.g., Next.js App Router with React Server Components) and how to layer server-side AI calls forperformance.

• Background in data visualization best practices—comfortable translating ML outputs (e.g., embeddings, cluster assignments) into intuitive charts.

• Understanding of prompt engineering for LLMs, and how to manage prompt templates dynamically within a React environment.