Case study
Obalero
A web editor where designers upload artwork and instantly see it on a 3D packaging model. The model produces packshots, and the team leaves feedback right on it. I'm the lead developer on this long-term project, which is still in active development.
- Next.js
- Three.js
- Symfony
- Node.js
- What I worked on
- The entire front end, including in-browser 3D
- A large part of the backend
- Adobe Illustrator plugin
- Render server for packshots
- Microservices such as an image scaler and a WebSocket server
- Stripe payment integration
- Stack
- Next.js
- Three.js
- Symfony
- Node.js
- Python
- MEL
- REST API
- Website
- app.obalero.com
01
Challenge
Packaging designers need to see artwork on the real shape of the pack before it goes to print or to a photo studio. A flat preview in Illustrator can't show how a design wraps around a can.
02
Solution
An in-browser editor that applies artwork to a 3D packaging model in real time. As lead developer I built the entire front end including the Three.js 3D view, a large part of the backend and an Adobe Illustrator plugin that sends artwork to the editor without manual uploads. Packshots are produced on a render server I also built, along with other microservices such as an image scaler and a WebSocket server, and the Stripe payment integration.
03
Result
The platform is live at app.obalero.com, where designers work from first draft to finished packshots, and development continues.