Bytesnitch

Case study

3D product catalog

A 3D product catalog API for scene graphs, materials, and GLB meshes. The editor stays a separate application. The notes record a scene-load figure.

Illustrative example of a 3D product catalog showcase with laptop storefront, product detail and design board panels.

Summary

A 3D interior catalog and editor API: scene graphs, physically based materials, GLB meshes, and favorites. Express with a domain layout and Prisma on a Mongo replica set. The frontend is a separate application.

Role. The engineering history describes a collaborative real-time 3D design canvas with object placement, physics, and multi-material texturing. The product name in those notes is Mood Mosaic. This study is the catalog and scene-graph API. The editor is a separate application.

Outcome. The project notes record scene load times improved by 48 percent. This study is the API: scene graphs and the material catalog in Mongo, rate limits in Redis, and GLB meshes and maps on S3 or MinIO. Twilio sends OTP. SMTP sends mail. reCAPTCHA covers public forms.

The business gap

The gap

A 3D catalog has to store scene graphs, materials, and mesh files without folding the editor into the same codebase. Load time is the constraint the notes measure.

Why it was built

The notes describe a design canvas for object placement, physics, and multi-material texturing. The API had to serve that editor as a separate application.

How the build closed it

A separate 3D frontend consumes an Express API laid out by domain, with custom dependency injection, Passport JWT, optional Google sign-in, and ADMIN and USER roles. A Mongo replica set stores scene graphs and the material catalog. Redis is the rate-limit adapter, which can also run in memory. S3 or MinIO holds GLB files and maps. Favorites and recently used span objects, materials, accessories, colors, and projects. Twilio sends OTP. SMTP sends mail. reCAPTCHA covers public forms. The project notes record a 48 percent improvement in scene load time. The material and GLB catalog stays at editor scale. Prisma on a Mongo replica set is a different layout from the Django products in the same notes.

Architecture

The source notes describe this system as a graph, not as a picture file. The diagram below is that graph: every box and every link is a node or an edge from the notes.

Design frontendClientExpressAPIMongo replicaDataRedisDataS3 / MinIODataTwilioExternalSMTPExternalreCAPTCHAExternal
Scene-graph and material catalog API. The frontend is a separate app.
  • Client
  • API
  • Queue
  • Data
  • External

Parts

  • Design frontend: 3D editor and catalog consumer.
  • Express: Custom dependency injection, Prisma on Mongo, JWT and Google.
  • Mongo replica: Projects, meshes, materials, and favorites.
  • Redis: Rate-limit adapter.
  • S3 / MinIO: GLB meshes and material maps.
  • Twilio: OTP.
  • SMTP: Transactional mail.
  • reCAPTCHA: Public forms.

Connections

  • Design frontend to Express: scene graph.
  • Express to Mongo replica: catalog.
  • Express to Redis: limit.
  • Express to S3 / MinIO: GLB and maps.
  • Express to Twilio: OTP.
  • Express to SMTP: mail.
  • Express to reCAPTCHA: forms.

High-level design

  • A separate 3D frontend consumes an Express API laid out by domain.
  • A Mongo replica set stores scene graphs and the material catalog. Redis rate-limits. S3 or MinIO holds GLB files and maps.
  • Twilio sends OTP. SMTP sends mail. reCAPTCHA covers public forms.

Low-level design

  • Custom dependency injection, Passport JWT, optional Google sign-in, and roles ADMIN and USER.
  • Favorites and recently used span objects, materials, accessories, colors, and projects.
  • The rate-limit adapter is memory or Redis. Files sit on S3 or MinIO.

Infrastructure and services

  • Mongo replica. Projects, meshes, materials, and favorites.
  • Redis. Rate-limit adapter.
  • S3 / MinIO. GLB meshes and material maps.
  • Twilio. OTP.
  • SMTP. Transactional mail.
  • reCAPTCHA. Public forms.

Tech stack

  • Express logoExpress
  • React logoReact
  • Three.js logoThree.js
  • Prisma logoPrisma
  • MongoDB logoMongoDB
  • Redis logoRedis
  • MinIO logoMinIO
  • Amazon S3 logoAmazon S3
  • Twilio logoTwilio
  • reCAPTCHA

Logos are Simple Icons shipped with this site. Where a brand mark is unavailable, the name is shown on its own.

Client review

Scene graphs, materials and GLB meshes are handled with a clear API boundary. Keeping the editor separate stopped the storefront from bloating.

Engineering manager, retail tech

Client testimonial

Merchandisers can review a 3D SKU beside the product API without waiting on a full release. That made catalog reviews much faster.

Digital catalog owner

Constraints in the source

  • The material and GLB catalog stays at editor scale without coupling the frontend into this repository.
  • Prisma targets a Mongo replica set, which is a different layout from the Django products.

All projectsDiscuss a projectServices