← Selected workDetailDesk
COLLEGE TEAM PROJECT / ACTIVE PROTOTYPE

DetailDesk.

A web-based virtual receptionist and lead pipeline for auto detailers.

Developed as a collaborative college team project with classmates Quincy and Dominique, DetailDesk is an active working prototype designed to help independent auto detailers capture inquiries, prevent quoting mistakes, and manage customer leads through a real-time owner dashboard.

Private source repository My contributions
Active PrototypeCollege team project
9 Verified TestsVitest & Node API suites
Team WorkflowGit branching & PR reviews

Collaborative prototype developed with classmates Quincy and Dominique. Verified locally through automated test suites and component validation.

Detailers lose revenue when they can't answer the phone.

Independent auto detailers spend their workdays polishing paint and steam-cleaning interiors—meaning missed phone calls turn directly into lost customers.

Mobile detailers and solo shop owners are frequently unable to pick up phone calls or reply to repetitive text messages regarding pricing packages, service radiuses, and availability while actively working on vehicles. Potential customers often move on to competitors after an unanswered call.

Furthermore, when customers do reach out via text or social media, requests are frequently vague ("how much to clean my SUV?"). Without knowing vehicle condition (pet hair, deep carpet stains, exterior oxidation), detailers cannot accurately estimate time or cost, leading to awkward surprises upon arrival.

DetailDesk tackles this challenge with a two-part solution: an automated, business-grounded virtual receptionist that answers routine questions 24/7 without making up prices, paired with a structured vehicle quote intake engine that captures condition ratings and vehicle photos directly into an owner management dashboard.

Frontend engineering, critical bug fixes, and testing.

DetailDesk is a team effort. Quincy developed the initial prototype specifications, core server routes, and mobile receptionist layout; Dominique implemented mobile navigation headers and collaborated on reviews. My contributions centered on frontend architecture, input validation, bug fixes, visual styling, and pull request reviews.

01

Quote Form Bug Fixes & Refactoring (PR #5)

Resolved a critical timezone offset bug where new Date().toISOString() shifted evening appointment selections to next-day UTC dates by implementing a local date formatter. Fixed a photo re-upload failure by decoupling the hidden file input with React's useRef, ensuring file values properly reset on removal, validation failure, and resubmission.

02

UI Personalization & Design Polish (PR #14)

Polished the visual identity across the customer request flow, virtual receptionist, and owner dashboard. Implemented custom CSS tokens, refined card layouts, and improved responsive ergonomics on tablet and mobile viewports.

03

Mobile Usability & Header Layout (PR #3)

Streamlined the quote request form for narrow phone screens, optimizing form control spacing, vehicle condition rating buttons, and progress headers to eliminate layout shifts on mobile devices.

04

Test Reviews & Quality Assurance (PR #9 & PR #13)

Reviewed, refined, and merged automated Vitest component tests for the quote request form (validating image preview, non-image rejection, and input reset behavior) and verified Node.js API status transition tests.

Team Collaboration: Initial prototype specifications and core server routes were authored by Quincy. Mobile navigation layout was contributed by Dominique. All features were coordinated across Git branches and reviewed collaboratively before merging.

Decoupled full-stack architecture with zero-dependency SQLite.

The system pairs a lightweight React client with an Express API backend, using Node's native SQLite module for frictionless local persistence without complex database setup.

SYSTEM MAPSIMPLIFIED ARCHITECTURE, NOT A SCREENSHOT
01 / CLIENT INTERFACEReact 18 + Vite 5Quote Request Form · Virtual Receptionist · Owner Dashboard
02 / PROXY & ROUTINGVite Development ProxyTransparently routes /api/* and /uploads/* to Express backend
03 / SERVER APINode.js + Express 4REST endpoints for quote submissions, lead workflow, and settings
04 / MULTIPART HANDLINGMulter Storage MiddlewareValidates and stores vehicle photos locally with file type/size limits
05 / PERSISTENCENative Node SQLite (node:sqlite)Zero external C++ build dependencies on Windows; synchronized transactions
06 / OWNER INTERFACELead Dashboard & SettingsInstant lead status transitions and live FAQ/pricing synchronization

Conceptual flow based on the repository architecture. All services run locally in a decoupled client-server setup.

What works in the prototype today.

01

Structured Quote & Appointment Engine

Customers enter contact details, vehicle specifications (year, make, model), preferred appointment date with local timezone validation, a 4-point condition rating (pet hair, stains, odor, paint condition), and an optional vehicle photo upload with instant preview and removal.

02

Rule-Based Virtual Receptionist

Provides 24/7 automated responses regarding detailing packages, starting prices, service radius, and common FAQs strictly based on SQLite business records. It enforces strict guardrails by refusing to invent custom discounts or quotes, directing customers to the quote form.

03

Owner Lead Management Dashboard

Detailing shop owners can view incoming leads in real time, transition statuses (New → Contacted → Booked → Closed), inspect vehicle photos, search customer records, and filter by status or service package.

04

Live Business Profile & Pricing Sync

An owner settings editor allows updating business hours, service radius, packages, starting prices, and approved FAQs. Updates instantly synchronize with the receptionist's knowledge base without server restarts.

Tested components and verifiable results.

Because DetailDesk is an active project, code quality and bug fixes were verified with automated test suites before merging pull requests.

Vitest component test suite (4 tests passed)

Verifies QuoteRequestForm file input handling: accepts valid images (PNG/JPG/WebP), displays preview thumbnails, rejects non-image formats with error notices, and properly resets input values on photo removal.

Node.js backend API test suite (5 tests passed)

Verifies PATCH /api/leads/:id/status: validates normal transitions (New → Contacted), later-stage transitions (Booked), rejects invalid status strings, checks missing payloads, and catches non-existent lead IDs.

Git branching & peer review workflow

Team development maintained via feature branches (jose/*, quincy-*, dominique/*), pull requests, and peer reviews before merging into the main branch.

Active status and planned next steps.

The prototype proves the core customer-to-owner workflow. Future development will focus on production integrations and cloud infrastructure.

01

Modular LLM Integration

Upgrade the virtual receptionist from rule-based matching to a generative model (Gemini API or OpenAI) bounded by strict grounding prompts and system instructions to handle varied natural language questions.

02

Two-Way SMS Notifications

Integrate Twilio to automatically send text confirmations to customers when a quote is submitted and alert owners of new leads immediately while detailing vehicles.

03

Deposit & Payment Processing

Incorporate Stripe or Square to collect non-refundable booking deposits, reducing no-shows and securing scheduled detailing slots.

04

Cloud Storage & Calendar Sync

Migrate vehicle photo uploads from local server storage to cloud object storage (AWS S3 / Google Cloud Storage) and sync appointments with Google Calendar.

What I learned collaborating on a full-stack product.

Building in a team environment highlighted the importance of clear branch hygiene, communicative PR reviews, and defensive frontend validation.

Working alongside Quincy and Dominique taught me how collaborative engineering differs from solo development. Agreeing on interface contracts between the React client and Express endpoints early prevented merge conflicts and duplicate work.

Solving specific bugs—like tracking down UTC timezone shifts in date inputs and managing unmounted DOM file inputs with React refs—reinforced the value of disciplined testing. Seeing teammate contributions merge smoothly into a unified prototype made this one of my most rewarding college software projects.