Overview
The web client for a generative-AI SaaS product that renders 3D assets and generates avatars directly in the browser, backed by a Django API.
Problem
Generative 3D and avatar output has to feel immediate in the browser, despite large assets to load and model-backed generation steps that take time.
My role
- Built the front end for the SaaS product.
- Implemented real-time asset loading and 3D rendering with Three.js.
- Integrated avatar generation and audio (WaveSurfer.js) against the Django backend.
- Managed client state with React Redux.
Architecture
- FrontendNext.js + React application with Redux for client state.
- RenderingThree.js scene for 3D asset and avatar display.
- MediaWaveSurfer.js for audio waveform handling.
- BackendDjango API serving generation and asset endpoints.
Technology
Interface
- Next.js
- TypeScript
- TailwindCSS
- React Redux
3D & media
- Three.js
- WaveSurfer.js
Backend
- Django
Engineering challenges
Real-time loading of large 3D assets
Immersive assets are heavy, and a blank screen while they arrive breaks the sense of a live product.
Keeping 3D rendering smooth in the browser
A long-lived WebGL scene leaks memory and drops frames without careful lifecycle management.
Coordinating async generation with the UI
Avatar and asset generation is asynchronous and multi-step on the Django side.
Solution
- S1
Real-time loading of large 3D assets
Progressive loading states around the Three.js scene so it stays interactive while assets stream in.
- S2
Keeping 3D rendering smooth in the browser
Disciplined Three.js scene setup and disposal so the render loop stays predictable across sessions.
- S3
Coordinating async generation with the UI
Modelled the workflow in Redux so the interface could reflect each stage without blocking.
Performance
- Work centred on perceived performance — progressive asset loading and rendering so the interface never blocks on a generation step.
Product experience
