Michael Mainguy
3b6c296385
Vue 3 + TypeScript + Vite + Tailwind CSS v4 multi-step lead capture form with config-driven white-labeling, externalized content (content.json), and "starting at" pricing estimates. Mobile-first with camera photo upload. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| .vscode | ||
| public | ||
| src | ||
| .gitignore | ||
| CLAUDE.md | ||
| content.json | ||
| index.html | ||
| package.json | ||
| PLAN.md | ||
| README.md | ||
| shop.config.json | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
| yarn.lock | ||
SmallEngine - Lead Capture for Small Engine Repair Shops
A lightweight, mobile-friendly lead capture app for small engine repair businesses. Customers submit their equipment details, photos, preferred service times, and contact information. Shop owners receive leads instantly with pricing estimates.
Features
- Equipment Details — capture make, model, and equipment type (mower, snowblower, chainsaw, etc.)
- Photo Upload — mobile camera integration for equipment condition photos
- Service Scheduling — date/time preference selection
- Contact Capture — name, phone, email, address
- Pricing Estimates — configurable rate card displayed to customers
- White-Label Ready — configure per-shop branding, services, and pricing via JSON
- Fully Static — no server required; deploys to any static host for free
Tech Stack
| Layer | Technology |
|---|---|
| Framework | Vue 3 + TypeScript |
| Styling | Tailwind CSS |
| Build | Vite 8 |
| Hosting | Netlify / Cloudflare Pages / Vercel (free tier) |
| Form Backend | Formspree or Netlify Forms (free tier) |
| Image Upload | Cloudinary (free tier) |
| Mobile | PWA with camera access |
Quick Start
# Install dependencies
yarn install
# Build for production
yarn build
# Preview production build
yarn preview
Configuration
Each shop customizes the app by editing shop.config.json:
{
"shopName": "Joe's Small Engine Repair",
"phone": "(555) 123-4567",
"email": "joe@example.com",
"logo": "/assets/logo.png",
"primaryColor": "#16a34a",
"services": [
{ "name": "Tune-Up", "priceRange": "$75 - $95" },
{ "name": "Blade Sharpening", "priceRange": "$25 - $35" },
{ "name": "Oil Change", "priceRange": "$40 - $55" }
],
"equipmentTypes": ["Lawn Mower", "Snowblower", "Chainsaw", "Leaf Blower", "Generator"],
"formBackend": "https://formspree.io/f/YOUR_FORM_ID"
}
Deployment
Netlify (recommended)
- Fork this repository
- Edit
shop.config.jsonwith your shop details - Connect the repo to Netlify
- Set build command:
yarn build - Set publish directory:
dist - Deploy — your site is live
Cloudflare Pages
- Fork and configure
shop.config.json - Connect to Cloudflare Pages
- Build command:
yarn build, output:dist
Manual / Any Static Host
yarn build
# Upload contents of dist/ to your host
Project Structure
smallengine/
├── shop.config.json # Shop-specific configuration
├── src/
│ ├── App.vue # Root component
│ ├── main.ts # App entry point
│ ├── components/ # Vue components
│ │ ├── LeadForm.vue # Main lead capture form
│ │ ├── EquipmentStep.vue
│ │ ├── ScheduleStep.vue
│ │ ├── ContactStep.vue
│ │ └── PricingEstimate.vue
│ ├── types/ # TypeScript interfaces
│ └── composables/ # Shared logic (config loader, form submission)
├── public/ # Static assets
├── index.html
├── tailwind.config.js
└── vite.config.ts
Multi-Shop Scaling
Each repair shop gets their own instance by:
- Forking this repository
- Editing
shop.config.json - Deploying to a free static host
No shared infrastructure, no databases, no server costs.
License
MIT