React Auto-Shop AI Quote App
Budget: $750 – $1,500 USD
I need a single-page React + Supabase application that lets my auto-body customers preview color changes and receive an instant repair estimate, while giving my sales team the tools to adjust and approve those numbers.
How it should work
1. A user uploads one clear photo of their car.
2. On the server we run Meta’s Segment-Anything Model (SAM) once, store the resulting mask in Supabase Storage, and keep the original image.
3. In the browser we overlay that mask on a canvas element so the user can recolor the vehicle in real time with blend modes—no extra API calls, zero per-interaction cost.
4. The same image is sent to a damage-pricing microservice that calls a pre-trained model API; it returns detected damage types and a price sheet we save to Supabase.
5. A secured salesman dashboard (SSO via our Azure AD) lets staff review the AI’s numbers, tweak them, and send the final quote.
Salesman dashboard must include
• View and edit quotes
• Customer details management
• Sales performance statistics
Core stack & expectations
• React (TypeScript) on the front end; Supabase for auth, DB, functions, and storage.
• Canvas or WebGL for the live recolor layer.
• SAM inference may run in a lightweight Python service or a Supabase Edge Function—whichever fits best.
• Clean component architecture, clear env variable handling, and concise README so I can redeploy in one command.
Deliverables
1. Git repo with all source code.
2. Supabase SQL / Edge Function scripts.
3. Instructions to connect our Azure AD tenant for SSO.
4. Short video or Loom walk-through proving the full workflow from upload to approved quote.
Acceptance criteria
• Mask is generated only once per image and cached.
• Recolor interaction responds in under 50 ms.
• Damage pricing API latency hidden behind optimistic UI; final figures match API payload.
• Role-based access enforced: public users vs. SSO salesmen.
If you’ve built with SAM, Canvas, or Supabase Functions before, that’s exactly the experience I’m after. Let’s ship something slick and dependable.
How it should work
1. A user uploads one clear photo of their car.
2. On the server we run Meta’s Segment-Anything Model (SAM) once, store the resulting mask in Supabase Storage, and keep the original image.
3. In the browser we overlay that mask on a canvas element so the user can recolor the vehicle in real time with blend modes—no extra API calls, zero per-interaction cost.
4. The same image is sent to a damage-pricing microservice that calls a pre-trained model API; it returns detected damage types and a price sheet we save to Supabase.
5. A secured salesman dashboard (SSO via our Azure AD) lets staff review the AI’s numbers, tweak them, and send the final quote.
Salesman dashboard must include
• View and edit quotes
• Customer details management
• Sales performance statistics
Core stack & expectations
• React (TypeScript) on the front end; Supabase for auth, DB, functions, and storage.
• Canvas or WebGL for the live recolor layer.
• SAM inference may run in a lightweight Python service or a Supabase Edge Function—whichever fits best.
• Clean component architecture, clear env variable handling, and concise README so I can redeploy in one command.
Deliverables
1. Git repo with all source code.
2. Supabase SQL / Edge Function scripts.
3. Instructions to connect our Azure AD tenant for SSO.
4. Short video or Loom walk-through proving the full workflow from upload to approved quote.
Acceptance criteria
• Mask is generated only once per image and cached.
• Recolor interaction responds in under 50 ms.
• Damage pricing API latency hidden behind optimistic UI; final figures match API payload.
• Role-based access enforced: public users vs. SSO salesmen.
If you’ve built with SAM, Canvas, or Supabase Functions before, that’s exactly the experience I’m after. Let’s ship something slick and dependable.