This repository showcases a user-centered visual preview workflow designed to help customers see a product before they commit to purchasing it.

The core idea is simple:
reduce uncertainty, build confidence, and make decision-making easier — especially for local service businesses where trust and clarity matter more than flashy tech.

While this repo is a sanitized demo, the architecture reflects real production thinking.

For many customers, phrases like “20% tint” or “ceramic package” are abstract. They require imagination, prior knowledge, or blind trust.

This workflow turns those abstract options into something concrete: a visual preview that helps customers understand what they’re buying before money changes hands.

From an engineering standpoint, the focus is not just rendering images — it’s supporting better conversations between businesses and their customers.

An end-to-end preview pipeline:

1. User uploads a photo of their vehicle
2. A window mask is selected (heuristic fallback with optional AI enhancement)
3. Tint overlay is applied
4. Ceramic overlay is applied
5. A final preview image is returned via an API

Each step is designed to be:

• predictable
• repeatable
• easy to reason about during QA and iteration

• Web app (Vite + React) for upload, option selection, and preview display
• Backend API (Node) that performs image processing and compositing
• Deterministic overlay behavior suitable for demos, QA, and client review
• Demo-safe configuration using .env.example

To keep this repository portfolio-safe and respectful of client privacy, it excludes:

• Client names or branding
• Proprietary assets or real customer photos
• API keys or paid credentials (developers supply their own locally)

From the project root:

npm install

Open Terminal tab 1:

cd server
npm install
npm run dev

The API runs at: http://localhost:3001

Open Terminal tab 2:

npm run dev

The web app will run at a local Vite address (shown in your terminal), typically: http://localhost:5173

Create a local file named .env.local (never commit this):

VITE_PREVIEW_API_URL=http://localhost:3001/api/preview

POST /api/preview

Accepts an image and rendering options (tint level, ceramic package). Returns a generated preview image.

This project is intentionally practical.

It’s meant to demonstrate:

• thoughtful UX decisions embedded in backend logic
• clean separation between UI and processing layers
• guardrails and fallbacks that keep the experience stable
• how “AI” can enhance a workflow without being the centerpiece

The emphasis is on building tools that serve real people — not just impressive demos.