SoundVent Product Creation App
Founder & Lead Engineer
Ecommerce
Product Builder
Creator Tools
SaaS
Next.js
Supabase
Next.js
React
Supabase
PostgreSQL
Zustand
TailwindCSS
shadcn/ui
TypeScript
The SoundVent Product Creation App is a core part of the platform's marketplace ecosystem — a fully custom-built tool that allows creators to design, manage, and publish products with the same level of polish and control they'd expect from Shopify or Printful. Instead of relying on third-party dashboards, the system gives SoundVent complete flexibility over product data, media, workflows, and presentation.
Overview
At its core, the product builder is a structured, multi-step creation flow designed for clarity and precision. Creators can upload images, configure variants, define pricing, and map metadata — all with live validation, autosaving, and real-time UI feedback. The system is deeply integrated with Supabase, allowing product data, variants, images, and relationships to be stored cleanly and accessed throughout the platform.
The result is a scalable foundation for SoundVent's commerce layer, engineered to support both simple creator products and more sophisticated multi-variant offerings.
Architecture
The Product Creation App is built using Next.js, Supabase, Zustand, and a modular component system shared across the entire SoundVent platform.
Key architectural concepts:
• Step-based workflow — Each step — details, images, variants, pricing, publish settings — is independently validated and saved
• Autosaving with Supabase — Data writes occur as the user progresses, preventing loss and keeping drafts consistent
• Relational product schema — Products, variants, images, categories, and metadata are normalized into clean join tables for long-term scalability
• Global state for in-progress product data — Zustand handles local editing state before syncing changes to Supabase
• Async media handling — Images are uploaded to Supabase Storage, processed, and immediately available inside the UI
• Strict type safety — Every field, step, and validation rule is fully typed to prevent malformed product configurations
This architecture allows the builder to behave like a desktop app while remaining entirely web-based and serverless.
UI/UX
The interface is designed around clarity and low cognitive load — a guided process that helps creators move step-by-step without overwhelm.
Highlights include:
• Clean, step-driven layout that mirrors enterprise dashboards
• Instant visual feedback: image previews, live error states, and contextual helpers
• Variant matrix UI for handling complex combinations
• Autosave indicators so users never worry about losing work
• Consistent components from SoundVent's design system for a seamless, predictable feel
• Responsive grid layouts that adapt to any screen size
• A "draft vs publish" workflow that feels intuitive and reduces mistakes
The goal was to give creators a powerful tool disguised as a simple one — professional capability with a frictionless experience.
Challenges & Solutions
1. Keeping the workflow smooth across many steps
Large creation flows often feel heavy. To avoid this, each step loads only the required data and writes asynchronously.
Solution: modular steps, Zustand local staging, Supabase row updates per step.
2. Handling complex product variants
Variants quickly become messy when mixing sizes, colors, and images.
Solution: a dynamic variant matrix that generates combinations, validates them, and stores them in a clean relational structure.
3. Preventing data loss during long editing sessions
Creators often move back and forth between steps or leave mid-session.
Solution: autosave on every meaningful change, backed by "draft" tables and optimistic UI.
4. Integrating media uploads smoothly
Images need to upload quickly, appear instantly, and map correctly to products or variants.
Solution: media uploads flow through Supabase Storage with local preview support and immediate syncing.
5. Ensuring the builder could grow with SoundVent
The system needed to support more than v1 features.
Solution: strictly typed data models, predictable component patterns, and normalized relationships.
Impact
The Product Creation App became a cornerstone of SoundVent's marketplace architecture. It transformed product creation from a manual, error-prone process into a guided, professional workflow that creators could trust.
For the platform, it unlocked:
• Consistent, structured product data
• A scalable foundation for marketplace features
• Seamless integration with media, profiles, and commerce flows
• A fully custom system that doesn't depend on external dashboards
And for creators, it provided a clean, intuitive way to publish products without learning a new platform — a natural extension of the SoundVent environment.