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>
119 lines
3.4 KiB
Markdown
119 lines
3.4 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
# 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`:
|
|
|
|
```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)
|
|
|
|
1. Fork this repository
|
|
2. Edit `shop.config.json` with your shop details
|
|
3. Connect the repo to [Netlify](https://netlify.com)
|
|
4. Set build command: `yarn build`
|
|
5. Set publish directory: `dist`
|
|
6. Deploy — your site is live
|
|
|
|
### Cloudflare Pages
|
|
|
|
1. Fork and configure `shop.config.json`
|
|
2. Connect to [Cloudflare Pages](https://pages.cloudflare.com)
|
|
3. Build command: `yarn build`, output: `dist`
|
|
|
|
### Manual / Any Static Host
|
|
|
|
```bash
|
|
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:
|
|
1. Forking this repository
|
|
2. Editing `shop.config.json`
|
|
3. Deploying to a free static host
|
|
|
|
No shared infrastructure, no databases, no server costs.
|
|
|
|
## License
|
|
|
|
MIT
|