1 Hour to Cursor: Ship Your First AI-Powered Project

By the end of this hour, you'll have a live AI-powered web application deployed to the internet, built entirely with Cursor's AI assistance.

🎯 What You'll Build

A personal expense tracker with AI-powered categorization that automatically sorts your expenses and provides spending insights.

// AI will help you build this
const categorizeExpense = async (description: string) => {
  const categories = await ai.classify(description, {
    food: "restaurants, groceries, snacks",
    transport: "gas, uber, parking, transit",
    entertainment: "movies, games, subscriptions"
  });
  return categories.bestMatch;
};

⏱️ Time Breakdown

📋 Prerequisites

• Basic HTML/JavaScript knowledge
• Node.js 18+ installed
• A Vercel account (free)
• OpenAI API key ($5 credit sufficient)

Step 1: Setup Cursor and Project Foundation (0–10 min)

Download Cursor from cursor.sh and install it.

Open Cursor and press Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows), type "Cursor: New Project" and select it.

Create a new folder called expense-tracker and open it in Cursor.

Press Cmd+K and type this prompt:

Create a Next.js project structure for an expense tracker app with:
- TypeScript setup
- Tailwind CSS
- A simple homepage with a form to add expenses
- Package.json with all dependencies

Let Cursor generate the files. Run the setup:

npm install
npm run dev

Step 2: Build Smart Expense Form (10–25 min)

Select the main page component and press Cmd+K. Prompt Cursor:

Update this form to:
- Have better styling with Tailwind
- Include amount (number), description (text), date (date picker)
- Store expenses in localStorage
- Show a list of added expenses below the form
- Add delete functionality for each expense

Create an .env.local file and add your OpenAI key:

OPENAI_API_KEY=sk-your-key-here

Install the OpenAI SDK:

npm install openai

Test adding a few expenses like "Coffee at Starbucks" and "Uber ride home".

Step 3: Implement AI Categorization (25–40 min)

Create pages/api/categorize.ts and prompt Cursor:

Create an API endpoint that:
- Takes an expense description
- Uses OpenAI to categorize it into: Food, Transport, Entertainment, Shopping, Bills, Other
- Returns the category and confidence score
- Handles errors gracefully

Update your main component to use AI categorization. Select the form submission logic and prompt:

Modify the expense submission to:
- Call /api/categorize with the description
- Auto-assign the returned category to the expense
- Show a loading state while categorizing
- Fall back to "Other" if API fails

Add category badges to your expense list:

const categoryColors = {
  Food: "bg-green-100 text-green-800",
  Transport: "bg-blue-100 text-blue-800", 
  Entertainment: "bg-purple-100 text-purple-800",
  Shopping: "bg-pink-100 text-pink-800",
  Bills: "bg-red-100 text-red-800",
  Other: "bg-gray-100 text-gray-800"
};

Step 4: Add Dashboard and Insights (40–55 min)

Create a new component for the dashboard. Press Cmd+K and prompt:

Create a dashboard component that shows:
- Total spending this month
- Spending by category (pie chart or bars)
- Recent expenses (last 5)
- Biggest expense this week
Use chart.js or a simple CSS solution for visualizations

Install chart dependencies:

npm install chart.js react-chartjs-2

Add the dashboard to your main page below the expense form.

Create a simple analytics function that Cursor can help you build:

const getSpendingInsights = (expenses: Expense[]) => {
  // Let Cursor implement this
  const thisMonth = expenses.filter(/* this month logic */);
  const byCategory = groupBy(thisMonth, 'category');
  const trends = calculateTrends(expenses);
  return { thisMonth, byCategory, trends };
};

Step 5: Ship It (55–60 min)

Connect your project to GitHub:

git init
git add .
git commit -m "Initial expense tracker with AI"
git branch -M main
git remote add origin https://github.com/yourusername/expense-tracker.git
git push -u origin main

Deploy to Vercel:

1. Go to vercel.com
2. Click "New Project"
3. Import your GitHub repo
4. Add your OPENAI_API_KEY in Environment Variables
5. Deploy

Test your live app by adding expenses and sharing the URL.

🎉 You've built and deployed an AI-powered expense tracker in one hour!

🎁 Bonus

• Add expense photos with AI-powered receipt scanning using OpenAI Vision API
• Implement spending goals and AI-powered budget recommendations
• Create expense export to CSV with AI-generated spending reports

📚 Next Steps

🔗 Resources

• Cursor Documentation
• OpenAI API Reference
• Next.js Deployment Guide
• Tailwind CSS Components
• Vercel Environment Variables