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 use AI tools.
- Other info: Great opportunity for career growth in a dynamic freelance environment.
- Why this job: Make an impact in the 3D web space while working on exciting projects.
- Qualifications: Experience with Next.js, Three.js, and a passion for 3D web development.
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)
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.
The project requires the delivery of four core technical modules:
- 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.
- 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.
- 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.
- 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.
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).
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.
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/Three.js) in Portsmouth employer: Angry Swan Labs
As a freelance Full Stack Engineer with us, you'll enjoy the flexibility of remote work while contributing to cutting-edge projects that push the boundaries of web technology. Our collaborative culture encourages innovation and the use of AI tools, providing you with the opportunity to enhance your skills and deliver impactful solutions in a dynamic environment. Join us for a rewarding experience where your expertise in 3D web development will be valued and recognised.
StudySmarter Expert Advice🤫
We think this is how you could land Full Stack Engineer (Next.js/Three.js) in Portsmouth
✨Tip Number 1
Network like a pro! Reach out to fellow developers and industry professionals on platforms like LinkedIn or Twitter. Join relevant groups and participate in discussions to get your name out there and discover potential job opportunities.
✨Tip Number 2
Show off your skills! Create a portfolio showcasing your projects, especially those involving Next.js and Three.js. Make sure to include links to live demos or GitHub repositories so potential clients can see your work in action.
✨Tip Number 3
Don’t be shy about applying! Use our website to find freelance opportunities that match your skills. Tailor your applications to highlight your experience with 3D asset manipulation and client-side media processing.
✨Tip Number 4
Prepare for interviews by brushing up on your technical knowledge. Be ready to discuss your approach to building complex web applications and how you leverage AI tools to enhance your workflow. Confidence is key!
We think you need these skills to ace Full Stack Engineer (Next.js/Three.js) in Portsmouth
Some tips for your application 🫡
Show Off Your Skills:Make sure to highlight your experience with Next.js, Three.js, and any relevant 3D web technologies. We want to see how you can bring your expertise to the table, so don’t hold back!
Tailor Your Application:Customise your application to fit the role. Mention specific projects where you've tackled similar challenges, like building performant editors or working with WebGL. This helps us see how you align with our needs.
Be Clear and Concise:Keep your application straightforward and to the point. We appreciate clarity, so avoid jargon unless it’s necessary. Make it easy for us to understand your experience and what you can bring to the project.
Apply Through Our Website:We encourage you to apply directly through our website. It streamlines the process for both you and us, ensuring we get all the info we need to consider your application seriously.
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, Three.js, and the other technologies mentioned in the job description. Brush up on your knowledge of React Three Fiber and Zustand, as they’ll be crucial for the role. Being able to discuss how you’ve used these tools in past projects will show that you’re the right fit.
✨Showcase Your 3D Knowledge
Since the role involves 3D asset manipulation, be prepared to talk about your experience with scene graphs and optimising assets for web performance. Bring examples of previous work where you tackled similar challenges, and don’t hesitate to discuss how you approached them.
✨Demonstrate Your AI-Native Skills
Highlight your experience with AI coding assistants like Cursor or Copilot. Share specific instances where these tools helped you speed up development or solve complex problems. This will show that you can leverage technology to enhance your workflow, which is a key requirement for this position.
✨Prepare for Problem-Solving Questions
Expect to face technical questions that assess your problem-solving skills, especially around real-time device synchronisation and client-side media processing. Practice explaining your thought process clearly and concisely, as this will demonstrate your ability to deliver autonomous solutions without needing constant guidance.
