ArtSobo
A canvas art platform where customers design custom art in the browser and order it.
01 / The problem
ArtSobo sells custom art. Customers needed to design their piece in the browser, with text, shapes, images and layers, then check out without leaving the app. I had never worked with canvas rendering before this project, and it is still the build I am proudest of.
02 / Decisions
A real editor, not a form
Layers, text with live Google Fonts, fills, shadows, flips, locking, scenes and export, all in the browser. An open source editor SDK gave me the base, and I wrote most of the editor on top of it, about 80% of the code.
Editor and shop in one flow
Firebase handles accounts and saved designs, and the finished design goes straight into the cart and checkout.
03 / The system
How the frontend fits together
04 / Results
- Live at app.artsobo.com.
More detail
The problem
ArtSobo sells custom art. Customers needed to design their piece in the browser, then order it without leaving the app. I had never worked with canvas rendering before this project.
What I built
I led the frontend and wrote most of the canvas editor myself, about 80% of the code. It is not from scratch: it sits on top of an open source editor SDK, which gave me the base to build on.
- A full design editor: layers, text with Google Fonts loaded on demand, shapes and paths, fills, shadows, opacity, flip and lock.
- Scenes and export, so a customer can work on more than one design and save the result.
- Panels that work on small screens, rebuilt several times until they felt right.
- Accounts and saved designs through Firebase.
- Cart and checkout, so the finished design goes straight to an order.
Stack
React and TypeScript on Vite, an open source canvas editor SDK, Redux Toolkit, Base Web, Firebase and i18next.
Outcome
Live at app.artsobo.com. It is still the build I am proudest of.
Next project
SpendSavvy