Work / Product case
← All workTREVOX LAB
A store and system for a 3D printing business to manage products, orders and production in one place.
Product · UX/UI · Full-stack development · Architecture · Automation
01 / Beyond the storefront
A storefront is only the surface.
Behind every piece are a catalog, production, costs, orders, payment, delivery and finances. The system was designed for a 3D-printed product operation and connects these steps, from a customer’s choice to business oversight.
02 / The problem
Five tools. Fragments of the truth.
The store lives in one tool. Costs in another. Orders, cash flow and credentials are scattered elsewhere. For a small business, that fragmentation makes it harder to understand what a piece costs and what the business earns.
- Store
- Spreadsheets
- Orders
- Finance
- Credentials
TREVOX LAB / One connected operation
Test products quickly
Launch, present and revise a piece without rebuilding the store.
Understand the real cost
Connect pricing to production requirements and operating costs.
Protect sensitive data
Treat customer data, finances and credentials as system responsibilities.
03 / The product
From discovery to management.
A purchase is one step in a longer journey. The customer experience, operations and business management share one product, with distinct responsibilities.
Customer
Discovery · Catalog · Product · Cart · Checkout · Account
Operations
Orders · Production · Customers · Products · Collections · Content
Business
Purchases · Costs · Pricing · Finance · Marketing
Platform
Authentication · Permissions · Files · Integrations · Automation
04 / Customer experience
Discover. Choose. Purchase.
Categories organize the catalog; collections give products context; launches have their own timing. From choosing a piece to checkout, the experience keeps the product, information and next action close together. The account area lets customers track orders and manage their details.
Desktop interface / swipe to inspect
Desktop interface / swipe to inspect
Customers choose a piece, review the cart and track the order in their account.
05 / A shift in perspective
What keeps the store running.
On the other side of a purchase, the team needs to track orders, maintain the catalog and coordinate operations. The backoffice brings that work together. Customers, the team and professional partners each have an experience built around their tasks.
- screens across the system
- ~50
- backoffice views
- 28
- user experiences
- 3
Desktop interface / swipe to inspect
Catalog, orders and production organized around the team’s work.
06 / Cost and pricing
Pricing needs a basis.
A physical piece involves materials, production time, operating costs, fees and margin. Trevox turns those variables into information that guides pricing and makes its basis traceable over time.
- Production inputs
- Cost model
- Price guidance
- Margin visibility
Desktop interface / swipe to inspect
07 / What the project solves
One operation. One product.
Storefront, orders, costs and finances are part of the same system. The team oversees operations, customers track their orders and pricing retains a traceable basis. The foundation can serve other physical product operations that need to connect catalog, production and management.
Next steps / exportable marketing reports, further finance automation and a premium offering for designers and architects.
08 / AI-assisted product visuals
Art direction is part of the product.
Presenting a piece involves form, texture, light and context of use. AI-assisted image production supported exploration of these choices and a consistent visual language for the catalog. The visuals put products in context and help assess their presentation in the store.
AI-created images for the demonstration. The products are fictional; the images are not photographs of manufactured pieces.
09 / Performance
Fast by architecture, not by accident.
Performance was not a late optimization: it was treated as a product requirement. From first render to visual stability, the store was built to stay fast, accessible and discoverable on mobile and desktop.
100/100
Performance · Mobile + Desktop
| Category | Mobile | Desktop |
|---|---|---|
| Performance | 100 | 100 |
| Accessibility | 100 | 100 |
| Best Practices | 100 | 100 |
| SEO | 100 | 100 |
| Agentic Navigation | 4/4 | 4/4 |
Lab metrics / Mobile
- FCPFirst Contentful Paint
- 0.9s
- LCPLargest Contentful Paint
- 1.3s
- TBTTotal Blocking Time
- 0ms
- CLSCumulative Layout Shift
- 0
- Speed Index
- 1.5s
10 / Engineering the system
One interface. Purposeful layers.
The React application connects customer and team experiences. Application services coordinate data, authentication, files and integrations. The backend controls critical operations; payments, shipping and email are handled through server services.
- Customer / Team
- React application
- Application services
- Data · Auth · Files
- Payments · Shipping · Email
Conceptual view / responsibilities, without implementation details
Architecture principle
The interface requests. The server decides.
The backend is the source of truth. Permissions and sensitive operations do not depend on hiding buttons. The interface reflects the access authorized by the server.
11 / Security by design
Protection as a product decision.
Access boundaries are part of the system. The company vault encrypts credentials in the browser before storage, so the server does not need access to their plaintext contents.
Server-side authorization
The backend decides access to sensitive data and actions.
Controlled operations
Related business steps are handled as one consistent operation.
Private files
Documents and receipts have restricted access by default.
Secrets on the backend
Integration credentials remain on the server.
12 / Technology
Tools that serve the operation.
A product application spanning the interface, data, server services and integrations for commerce and management.
Frontend
React · TypeScript · Vite · Tailwind CSS · Framer Motion
Data and forms
TanStack Query · React Hook Form · Zod
Backend
Supabase · PostgreSQL · Auth · Storage · Serverless
Integrations and infrastructure
Mercado Pago · Melhor Envio · SMTP · Vercel
13 / Explore the product
The product, open to exploration.
Explore the store from a customer’s perspective and visit the catalog, orders and finance areas from the team’s view. The public demonstration presents these journeys with fictional data to preserve real information.
In this public version, payments, shipping and email are simulated. There are no charges or message delivery.
Demonstration presented with fictional branding and data. Catalog images are AI-generated and are not photographs of manufactured pieces. The case describes the product and its decisions at a high level, without attributing transactions, customers or commercial results to the presented business.
Next projectDigital Invitation ↗