Your First Project

Let's build a real application together — a Personal Finance Tracker that helps users manage their expenses and income.

Project Overview

We'll create an app with:

• User authentication
• Transaction tracking (income & expenses)
• Category management
• Monthly budget overview
• Charts and analytics

Step 1: Describe Your App

In the Artivision prompt, enter:

Create a personal finance tracker with:
- Email/password authentication
- Add transactions with amount, category, date, and notes
- Categories: Food, Transport, Entertainment, Bills, Income
- Dashboard showing monthly spending by category
- Line chart for spending trends over time
- Set monthly budget limits with alerts

Step 2: Review the Generated Code

Artivision will generate:

• /app — Next.js pages and routing
• /components — Reusable UI components
• /lib — Database schema and utilities
• /api — Backend API routes

Step 3: Test the Features

In the preview, try:

1. Creating a new account
2. Adding a few transactions
3. Viewing the dashboard charts
4. Setting a budget limit

Step 4: Customize

Ask for refinements:

• "Add a dark mode toggle"
• "Show a pie chart for category breakdown"
• "Add export to CSV functionality"

Step 5: Connect Real Data

By default, Artivision uses mock data. To persist data:

1. Go to Project Settings → Database
2. Click "Connect Supabase"
3. Follow the integration wizard

Step 6: Deploy

Click Deploy and share your app with the world!

Congratulations! 🎉

You've built a full-stack finance tracker. Explore the Builder Interface to learn more advanced features.