At a Glance
- Tasks: Build a cutting-edge 3D web editor and manage complex state logic.
- Company: Join a forward-thinking tech company focused on innovative SaaS solutions.
- Benefits: Flexible remote work, competitive pay, and the chance to work with AI tools.
- Why this job: Make an impact by creating sophisticated web applications that push boundaries.
- Qualifications: Experience in full-stack development, especially with Next.js and 3D technologies.
- Other info: Exciting project-based work with opportunities for growth and learning.
The predicted salary is between 36000 - 60000 £ per year.
Freelance Full-Stack Engineer (React / 3D)
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.
Full Stack Engineer (Next.js in Norwich employer: Angry Swan Labs
Contact Detail:
Angry Swan Labs Recruiting Team
StudySmarter Expert Advice 🤫
We think this is how you could land Full Stack Engineer (Next.js in Norwich
✨Tip Number 1
Network like a pro! Join online communities and forums related to Full Stack Engineering, especially those focusing on Next.js and WebGL. Engaging with others in the field can lead to job opportunities that aren't even advertised yet.
✨Tip Number 2
Show off your skills! Create a portfolio showcasing your projects, especially any 3D applications or complex state management systems you've built. This will give potential clients a taste of what you can do and set you apart from the competition.
✨Tip Number 3
Don’t be shy about reaching out! If you see a project that excites you, drop the hiring manager a message. Express your interest and highlight how your skills align with their needs. A personal touch can make all the difference.
✨Tip Number 4
Apply through our website! We’ve got loads of freelance opportunities that might just be perfect for you. Plus, applying directly gives you a better chance to stand out and get noticed by our team.
We think you need these skills to ace Full Stack Engineer (Next.js in Norwich
Some tips for your application 🫡
Show Off Your Skills: Make sure to highlight your experience with Next.js, React, and 3D technologies in your application. We want to see how you've tackled similar projects before, so don’t hold back on the details!
Tailor Your Application: Customise your application to fit the role. Use keywords from the job description to show us you understand what we're looking for. This helps us see that you're a great match for our needs.
Be Clear and Concise: Keep your application straightforward and to the point. We appreciate clarity, so avoid jargon unless it’s relevant. Let us know exactly what you can bring to the table without fluff.
Apply Through Our Website: We encourage you to apply directly through our website. It makes the process smoother for both of us and ensures your application gets the attention it deserves!
How to prepare for a job interview at Angry Swan Labs
✨Know Your Tech Stack Inside Out
Make sure you’re well-versed in Next.js, React, and the 3D technologies mentioned in the job description. Brush up on your knowledge of Three.js, Zustand, and WASM-based solutions. Being able to discuss these technologies confidently will show that you're the right fit for the role.
✨Showcase Your Problem-Solving Skills
Prepare to discuss specific challenges you've faced in previous projects, especially those related to 3D asset manipulation or state management. Use examples that highlight your ability to deliver autonomous solutions without needing constant guidance.
✨Familiarise Yourself with AI Tools
Since the role encourages the use of AI coding assistants, be ready to talk about how you’ve used tools like Cursor or Copilot in your work. Share examples of how these tools have helped you streamline your development process and focus on complex tasks.
✨Prepare Questions About the Project
Have a few insightful questions ready about the project phases and deliverables. This shows your genuine interest in the role and helps you understand the expectations better. Ask about the team dynamics and how they envision collaboration during the project.