Tint & Ceramic Visualizer — Workflow Demo (Sanitized Portfolio Repo)

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.

---

Why this tool exists

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.

---

What this demo demonstrates

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

---

What’s included

• 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

---

What’s intentionally omitted

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)

---

Local development

1) Install dependencies

From the project root:

npm install

2) Start the backend API

Open Terminal tab 1:

cd server
npm install
npm run dev

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

3) Start the web app

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

4) Configure the API URL

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

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

---

API contract (preview)

POST /api/preview

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

---

Notes for reviewers

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.