AisleStudio Labs

Transform your products into an immersive AI-powered 3D showroom in minutes.

Comment

Build Story: How I Built This

I built this project in three layers: data, logic, and experience.

Step 1: Data Connectivity

I started with Shopify sync first because I wanted real product data from day one. I avoided hard-coded demo products and made the backend cache synced data behind clean endpoints. That gave me a stable base to build the rest of the app.

Step 2: AI and Layout Logic

Then I added services that turn raw product lists into showroom decisions:

  • store branding metadata
  • layout rationale decisions
  • render placements by zone and priority

I also made sure every AI path had a fallback. If external services are unavailable, the app still returns usable showroom output.

Step 3: Immersive Experience

Finally, I connected the dashboard flow to the Three.js scene engine. The experience is intentionally step by step:

  1. Connect store
  2. Generate layout
  3. Render showroom

That sequence made the workflow easier to debug and easier to explain during demos.

What I Learned

  1. Data contracts matter more than visuals in the early stage.
  2. Fallback-first design is critical when AI features are involved.
  3. 3D quality comes from many small details, not just fancy models.
  4. Explainability helps users trust AI-generated decisions.

Challenges I Faced

  1. Keeping async steps in sync without stale UI states.
  2. Balancing visual quality and browser performance in 3D.
  3. Handling missing or inconsistent Shopify metadata gracefully.
  4. Moving quickly in a hackathon while keeping APIs clean.

Current Status

  • End-to-end local workflow works: Shopify sync -> layout generation -> 3D preview.
  • Backend supports no-product and no-AI-key fallback behavior.
  • Frontend has a guided setup dashboard and interactive showroom scene.

Next Improvements

  1. Add persistent storage for synced products and generated layouts.
  2. Add full observability (structured logs, tracing, metrics).
  3. Harden API error taxonomy and retry strategy.
  4. Add end-to-end tests across dashboard and render-plan flow
  5. Make real 3d renders using render engine

Built With

Share this project:

Updates