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>
41 lines
1.8 KiB
Markdown
41 lines
1.8 KiB
Markdown
# smallengine
|
|
|
|
## Project Intent
|
|
Lead capture application for small engine repair shops (lawnmowers, snowblowers, etc.).
|
|
Captures: equipment make/model, mobile image upload, preferred date/time, contact info, and pricing estimate.
|
|
Designed to be white-labeled and deployed by many different repair shops with minimal configuration.
|
|
|
|
## Stack
|
|
- Vue 3 with `<script setup>` SFCs
|
|
- TypeScript
|
|
- Vite 8
|
|
- Tailwind CSS for styling
|
|
- PWA-capable for mobile image capture
|
|
- Fully static — no server backend required
|
|
|
|
## Architecture Principles
|
|
- **Zero server**: all form processing via free SaaS (Formspree, Netlify Forms, or similar)
|
|
- **Config-driven**: shop-specific branding, services, and pricing loaded from a JSON config
|
|
- **Mobile-first**: responsive Tailwind layout, native camera access for equipment photos
|
|
- **Multi-shop scalable**: each shop forks the repo and edits `shop.config.json`
|
|
|
|
## Commands
|
|
- `yarn build` — type-check and build for production
|
|
- `yarn preview` — preview production build
|
|
- Do NOT run `yarn dev` (per global instructions)
|
|
|
|
## Conventions
|
|
- Use Vue 3 Composition API with `<script setup lang="ts">`
|
|
- Source code lives in `src/`
|
|
- Use Tailwind utility classes; avoid custom CSS unless necessary
|
|
- Components go in `src/components/`
|
|
- Types/interfaces go in `src/types/`
|
|
- Shop configuration lives in `shop.config.json` at project root
|
|
|
|
## Decisions
|
|
- **Lead delivery**: Deferred — build lead capture UI first, then evaluate backend options
|
|
- **Pricing**: Configurable "starting at" ranges per service, defined in `shop.config.json`
|
|
- **Scheduling**: Customer preference only — date range for pickup/drop-off, no calendar integration
|
|
- **Multi-shop**: Fork-per-shop model — each shop clones repo, edits config, deploys independently
|
|
- **Shop owner dashboard**: Deferred — will be needed eventually but not in initial build
|