BUILD YOUR OWN AI TOOL TRACKER!

Copy and paste the text below into Bolt.new. And you have your own app. Play around with the AI chatbot in Bolt to make your app customized to your needs. Have fun! You can’t break it, so keep testing to see what it can do.

Project: “AI Tool Tracker”
Stack: React + TypeScript + Vite (frontend only for v1), no external UI kits.
Goal: A single-page app to track all the AI tools I use. I need CRUD, search/filter, renewal math, CSV import/export, and persistent storage.

Entities & Schema (TypeScript)

type BillingCycle = "monthly" | "quarterly" | "yearly" | "one-time"; type Tool = { id: string; // uuid name: string; // “ChatGPT”, “Midjourney” category?: string; // “Writing”, “Design”, “AEC” purpose?: string; // short sentence of how I use it website?: string; // https://… plan?: string; // “Pro”, “Team”, etc. costUsd?: number; // numeric; store as USD cycle: BillingCycle; // billing cadence startDate?: string; // yyyy-mm-dd nextRenewal?: string; // yyyy-mm-dd (auto-calculated if absent) subscriptionLengthMonths?: number; // overall contract length (optional) seats?: number; // number of seats/licenses owner?: string; // “Kristin”, “JAM Ops” notes?: string; // freeform autoRenew: boolean; // default true createdAt: string; updatedAt: string; }

Derived Calculations

  • Normalized monthly spend:

    • monthly → cost

    • quarterly → cost/3

    • yearly → cost/12

    • one-time → 0 (exclude from monthly burn)

  • Auto-calc nextRenewal if startDate + cycle exists.

  • “Renewals this month” = count of tools whose nextRenewal is in the current month.

Features

  • Top header with quick stats cards: Monthly spend (normalized), Annualized spend (recurring), Renewals this month.

  • Table of tools with: Tool, Plan, Cycle, Cost, Monthly (norm.), Owner, Start, Next renewal, Seats, Notes, Actions.

  • Search (name/plan/category/purpose/owner) and Cycle filter (All, Monthly, Quarterly, Yearly, One-time).

  • Add/Edit drawer with a validated form for every field above. “Auto” button to compute the nextRenewal from startDate + cycle.

  • CRUD: create, edit, duplicate, delete (confirm on delete).

  • CSV Export/Import

    • Export CSV with headers:
      name,category,purpose,website,plan,costUsd,cycle,startDate,autoRenew,subscriptionLengthMonths,nextRenewal,seats,owner,notes

    • Import CSV using those headers; generate id, set timestamps.

  • Persistence: use localStorage key ai_tool_tracker.v1.
    (Please implement a simple storage service with     load(), save().)

  • UX details: inline date inputs (yyyy-mm-dd), currency formatting (USD), basic empty state, responsive layout without external CSS frameworks (use plain CSS modules or inline styles).

  • Quality: organize code into components/, lib/ (date & currency helpers), storage/. Include lightweight unit tests for helpers.

Nice-to-haves (if time permits)

  • Column sorting (name, cost, nextRenewal).

  • Duplicate row action creates “(copy)” suffix.

  • Simple reminders panel listing renewals happening within the next 30 days (read-only list, no notifications for v1).

Deliverables

  • A running Vite app with the page at /.

  • Seed it with 3 example tools so I can see the totals instantly.

  • Clear README with how to run, build, and where data lives.