Generated by Spark: integrate with superbase auth

Author: Frederick-S

.env.example

@@ -0,0 +1,10 @@
+# Supabase Configuration
+# Replace with your actual Supabase project values
+VITE_SUPABASE_URL=https://your-project-id.supabase.co
+VITE_SUPABASE_ANON_KEY=your-anon-key-here
+
+# Get these values from:
+# 1. Go to https://supabase.com/dashboard
+# 2. Create a new project or select existing
+# 3. Go to Settings > API
+# 4. Copy the Project URL and anon/public key

README_NEW.md

@@ -0,0 +1,86 @@
+# 记账 (Vue Expense Tracker)
+
+A modern, secure expense tracking application built with Vue 3, Vuetify (Material Design), and Supabase authentication.
+
+## ✨ Features
+
+- 🔐 **Secure Authentication** - Email/password login with Supabase Auth
+- 💰 **Easy Expense Entry** - Quick expense recording with categories and notes
+- 📊 **Visual Charts** - Monthly/yearly expense analysis with category breakdowns
+- 📱 **Mobile-First Design** - Optimized for iPhone and mobile devices
+- 🎨 **Material Design** - Beautiful, intuitive interface with Vuetify 3
+- ☁️ **Cloud Sync** - Secure data storage with Supabase
+- 🔒 **Data Privacy** - Row-level security ensures your data stays private
+
+## 🚀 Quick Start
+
+### Prerequisites
+
+1. **Supabase Account** - Sign up at [supabase.com](https://supabase.com)
+2. **Node.js** - Version 18+ recommended
+
+### Setup
+
+1. **Configure Supabase**
+   ```bash
+   # Copy environment template
+   cp .env.example .env
+   
+   # Edit .env with your Supabase credentials
+   # Get these from your Supabase dashboard
+   ```
+
+2. **Create Database Schema**
+   - Open your Supabase dashboard
+   - Go to SQL Editor
+   - Run the contents of `supabase-schema.sql`
+
+3. **Install & Run**
+   ```bash
+   npm install
+   npm run dev
+   ```
+
+4. **Start Tracking!**
+   - Register with your email
+   - Confirm your email address
+   - Start tracking expenses
+
+## 🛠️ Tech Stack
+
+- **Framework**: Vue 3 with Composition API
+- **UI Library**: Vuetify 3 (Material Design)
+- **Backend**: Supabase (Auth + Database)
+- **Build Tool**: Vite
+- **Charts**: Chart.js with vue-chartjs
+- **Icons**: Material Design Icons
+
+## 📋 Setup Details
+
+For detailed setup instructions, see [SUPABASE_SETUP.md](./SUPABASE_SETUP.md)
+
+## 🏗️ Architecture
+
+- **Authentication**: Supabase Auth with Row Level Security
+- **Database**: PostgreSQL with user-isolated expense data
+- **Frontend**: Vue 3 Composition API with TypeScript
+- **Styling**: Vuetify 3 Material Design components
+- **Charts**: Chart.js for expense visualization
+
+## 🔒 Security
+
+- User authentication required for all data access
+- Row Level Security ensures data isolation
+- Environment variables for sensitive configuration
+- No user data stored locally
+
+## 📱 Mobile Optimization
+
+- Responsive Material Design interface
+- Touch-friendly interactions
+- Optimized for iPhone 12 mini and similar devices
+- Bottom navigation for easy thumb access
+
+## 📄 License
+
+MIT License - see LICENSE file for details

SUPABASE_SETUP.md

@@ -0,0 +1,61 @@
+# Supabase Setup Instructions
+
+## 1. Create Supabase Project
+
+1. Go to [https://supabase.com](https://supabase.com)
+2. Sign up/Login and create a new project
+3. Wait for the project to be provisioned
+
+## 2. Configure Database
+
+1. Go to your Supabase dashboard
+2. Navigate to SQL Editor
+3. Copy and paste the contents of `supabase-schema.sql`
+4. Run the SQL to create the expenses table and policies
+
+## 3. Configure Environment Variables
+
+1. Copy `.env.example` to `.env`
+2. Go to Settings > API in your Supabase dashboard
+3. Copy the Project URL and anon/public key
+4. Update the values in `.env`
+
+```
+VITE_SUPABASE_URL=https://your-project-id.supabase.co
+VITE_SUPABASE_ANON_KEY=your-anon-key-here
+```
+
+## 4. Authentication Setup
+
+The app is configured to use email/password authentication. Users will need to:
+- Sign up with email and password
+- Confirm their email (check Supabase email settings if needed)
+- Sign in to access the expense tracking features
+
+## 5. Row Level Security
+
+The database is configured with Row Level Security (RLS) to ensure:
+- Users can only see their own expenses
+- Users can only modify their own data
+- Data is properly isolated between users
+
+## Features Included
+
+- ✅ User registration and login
+- ✅ Secure expense storage per user
+- ✅ Real-time data sync with Supabase
+- ✅ Logout functionality
+- ✅ User profile display in header
+
+## Database Schema
+
+```sql
+expenses:
+- id (UUID, Primary Key)
+- user_id (UUID, Foreign Key to auth.users)
+- amount (Decimal)
+- category (Text)
+- note (Text)
+- date (Date)
+- created_at (Timestamp)
+```

package-lock.json

@@ -15,6 +15,7 @@
         "@github/spark": "^0.0.1",
         "@mdi/font": "^7.4.47",
         "@phosphor-icons/vue": "^2.2.1",
+        "@supabase/supabase-js": "^2.52.1",
         "@tailwindcss/vite": "^4.0.17",
         "@vitejs/plugin-vue": "^6.0.0",
         "@vue/typescript": "^1.8.20",