Full Stack Engineer (Next.js/Three.js)

Angry Swan Labs; Remote; GBP 100,000 - 125,000; Full time

Job summary

A leading tech company is seeking a Freelance Full-Stack Engineer with expertise in React and WebGL to develop a complex browser-based SaaS platform. The role focuses on creating an interactive 3D editor and includes project-based tasks such as real-time synchronization and media processing. Ideal candidates will have a deep understanding of 3D web development and proficiency in utilizing AI tools to enhance their efficiency. This is a remote position available for UK-based engineers, estimated to last 4-6 weeks.

Qualifications

• Experience in full-stack development with a focus on 3D applications.
• Ability to work independently and deliver end-to-end solutions.
• Understand the technical requirements and navigate complex architecture.

Responsibilities

• Architect the core web infrastructure for a SaaS platform.
• Build a sophisticated browser-based editor for 3D asset manipulation.
• Implement a secure data layer for real-time device synchronization.

Skills

Proficiency with React Three Fiber

Expertise in WebGL

Experience with WASM-based solutions

Knowledge of Zustand for state management

Skills in Next.js and TypeScript

Strong understanding of 3D graphics

Tools

Next.js

React

Three.js

Tailwind CSS

Supabase

fabric.js

Job description

Freelance Full-Stack Engineer (React / 3D)

Role: Full-Stack Developer (Next.js / WebGL)

Engagement Type: B2B Contract / Freelance (Project-Based)

Location: Remote (UK-based only)

Duration: Estimated 4-6 Weeks (Fixed Deliverables)

1. The Engagement

We are seeking a high-velocity freelance engineer to architect the core web infrastructure for a SaaS platform. The project involves building a sophisticated browser-based editor that handles 3D asset manipulation, complex state management, and client-side media processing.

Operational Model: This is a hybrid-workflow project. The contractor is explicitly encouraged to utilise AI Coding Assistants (Cursor, Copilot, etc.) to handle boilerplate and UI velocity, focusing their manual engineering effort on the complex WebGL architecture and state logic.

2. Statement of Work

The project requires the delivery of four core technical modules:

A. The 3D Editor Environment

• Requirement: Build a performant editor using React Three Fiber (R3F).
• Functionality: Implementation of a workspace allowing for the import, arrangement, and manipulation of 3D assets (.glb) using standard transform controls.
• Key Challenge: Efficiently managing scene graphs and transient updates outside the React render loop to maintain performance.

B. Browser-Based Media Generation

• Requirement: Architect a client-side pipeline to process and export canvas content.
• Functionality: The system must be able to capture frame-data from the 3D context and assemble it into media files entirely within the browser, minimizing server-side dependencies.
• Tech: Proficiency with WASM-based solutions (e.g., FFmpeg.wasm) is required.

C. Real-Time Device Synchronization

• Requirement: Create a low-latency "Handshake" and data layer between the web session and external connected clients.
• Functionality: Implement a secure pairing flow (e.g., code-based) that facilitates the bi-directional sync of JSON state data between the web app and remote sessions.

D. Interactive 2D Overlay

• Requirement: A manipulation layer for defining regions of interest.
• Functionality: Implementation of a vector-based drawing interface (using libraries like fabric.js) to generate coordinate data and masks for backend processing.

3. Tech Stack

• Frontend: Next.js 14+ (App Router), TypeScript, Tailwind CSS.
• 3D Environment: Three.js ecosystem (React Three Fiber, Drei).
• State Management: Zustand (Crucial for the 3D/UI bridge).
• Backend Infrastructure: Supabase (PostgreSQL, Auth, Storage).
• Media Processing: Browser-based encoding (WASM).

4. Contractor Profile

We are looking for a specialist who:

• Is an "AI-Native" Developer: You move faster than the average dev because you leverage AI tools to automate the mundane, allowing you to ship complex features rapidly.
• Understands 3D on the Web: You know the difference between a mesh and a geometry, you understand scene graphs, and you know how to optimize assets for browser memory limits.
• Delivers Autonomous Solutions: You can take a technical requirement and execute it end‑to‑end without daily micro‑management.

5. Timeline

• Phase 1: Core Chassis, Auth, and Asset Import.
• Phase 2: State Management & Sync Logic.
• Phase 3: Client‑Side Rendering Pipeline.
• Phase 4: API Integration & UI Polish.