FML - Fix My Lovable

Ship the last 20% of your project with AI agents or human experts.

Overview

FML is a production-ready marketing site and onramp flow that helps developers turn their prototypes into production-ready software. The application features:

• Marketing Site: Modern landing page with hero, features, testimonials, and pricing
• 3-Step Onramp Wizard: Intake → Analysis → Plan flow
• Task Board: Kanban-style project management with real-time chat
• Summon System: On-demand AI agents or human experts
• Mock Checkout: Credit-based payment simulation

Tech Stack

• Framework: Next.js 14 (App Router, TypeScript)
• Styling: TailwindCSS + shadcn/ui components
• State Management: Zustand with persistence
• Forms: React Hook Form + Zod validation
• Charts: Recharts for analytics visualization
• Animations: Framer Motion (subtle transitions)
• Icons: Lucide React

Getting Started

Prerequisites

• Node.js 18+
• npm or pnpm

Installation

1. Clone the repository:

   git clone <repository-url>
   cd fml-app

2. Install dependencies:

   npm install
   # or
   pnpm install

3. Start the development server:

   npm run dev
   # or
   pnpm dev

4. Open http://localhost:3000 in your browser.

Project Structure

src/
├── app/                 # Next.js App Router pages
│   ├── api/            # API routes (mocked)
│   ├── start/          # Onramp wizard page
│   ├── tasks/          # Task board page
│   └── checkout/       # Checkout page
├── components/         # React components
│   ├── marketing/      # Landing page components
│   ├── onramp/         # Wizard flow components
│   ├── tasks/          # Task board components
│   ├── shared/         # Reusable components
│   └── ui/             # shadcn/ui components
├── store/              # Zustand state stores
├── lib/                # Utility functions
└── styles/             # Global styles

Features

Marketing Site

• Hero section with CTAs
• Feature cards (Fix It, Protect It, Grow It, Teach Me)
• How it works (3-step process)
• Readiness score demo with gauge
• Testimonials and pricing
• FAQ section

Onramp Wizard

• Step 1: Project intake (Builder/Figma URL input)
• Step 2: Analysis with readiness score and recommendations
• Step 3: Plan review with execution mode selection

Task Board

• Kanban columns (Backlog, In Progress, Review, Done)
• Task cards with progress tracking
• Quick actions bar
• Right panel with:
  • Chat system with mock responses
  • People & Agents management
  • Task load distribution chart

Summon System

• AI Agent summoning (instant, standard rates)
• Human Expert summoning (PM/FE/BE roles, timezone selection)
• Global "FML Button" for emergency help

Mock APIs

All API endpoints return realistic mock data:

• /api/analyze - Project analysis with readiness score
• /api/plan - Task planning with estimates
• /api/tasks - Task creation and management
• /api/summon - Agent/human summoning
• /api/checkout/session - Payment processing

Analytics

The app includes analytics hooks (/lib/analytics.ts) with event tracking:

• cta_clicked - CTA button interactions
• analysis_started - Project analysis initiation
• plan_created - Plan generation
• task_summoned - Help summoning
• checkout_started/completed - Purchase flow

Accessibility

• Semantic HTML structure
• Keyboard navigation support
• Focus states on interactive elements
• ARIA labels where needed
• Screen reader friendly

Customization

Adding Real Integrations

1. Analytics: Replace no-op functions in src/lib/analytics.ts with PostHog/Segment
2. Payments: Update checkout API to integrate with Stripe
3. Authentication: Add auth provider to layout
4. Database: Replace Zustand with real database for persistence
5. Real-time: Add WebSocket support for live chat

Environment Variables

Create .env.local for configuration:

NEXT_PUBLIC_ANALYTICS_KEY=your_analytics_key
STRIPE_SECRET_KEY=your_stripe_key
DATABASE_URL=your_database_url

Deployment

The app is ready for deployment on Vercel, Netlify, or any platform supporting Next.js:

npm run build
npm start

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests and linting
5. Submit a pull request

License

MIT License - see LICENSE file for details.