|
1 | | -# ✨ Welcome to Your Spark Template! |
2 | | -You've just launched your brand-new Spark Template Codespace — everything’s fired up and ready for you to explore, build, and create with Spark! |
| 1 | +# 记账 (Vue Expense Tracker) |
3 | 2 |
|
4 | | -This template is your blank canvas. It comes with a minimal setup to help you get started quickly with Spark development. |
| 3 | +A modern, secure expense tracking application built with Vue 3, Vuetify (Material Design), and Supabase authentication. |
5 | 4 |
|
6 | | -🚀 What's Inside? |
7 | | -- A clean, minimal Spark environment |
8 | | -- Pre-configured for local development |
9 | | -- Ready to scale with your ideas |
10 | | - |
11 | | -🧠 What Can You Do? |
| 5 | +## ✨ Features |
12 | 6 |
|
13 | | -Right now, this is just a starting point — the perfect place to begin building and testing your Spark applications. |
| 7 | +- 🔐 **Secure Authentication** - Email/password login with Supabase Auth |
| 8 | +- 💰 **Easy Expense Entry** - Quick expense recording with categories and notes |
| 9 | +- 📊 **Visual Charts** - Monthly/yearly expense analysis with category breakdowns |
| 10 | +- 📱 **Mobile-First Design** - Optimized for iPhone and mobile devices |
| 11 | +- 🎨 **Material Design** - Beautiful, intuitive interface with Vuetify 3 |
| 12 | +- ☁️ **Cloud Sync** - Secure data storage with Supabase |
| 13 | +- 🔒 **Data Privacy** - Row-level security ensures your data stays private |
14 | 14 |
|
15 | | -🧹 Just Exploring? |
16 | | -No problem! If you were just checking things out and don’t need to keep this code: |
| 15 | +## 🚀 Quick Start |
17 | 16 |
|
18 | | -- Simply delete your Spark. |
19 | | -- Everything will be cleaned up — no traces left behind. |
| 17 | +### Prerequisites |
20 | 18 |
|
21 | | -📄 License For Spark Template Resources |
| 19 | +1. **Supabase Account** - Sign up at [supabase.com](https://supabase.com) |
| 20 | +2. **Node.js** - Version 18+ recommended |
22 | 21 |
|
23 | | -The Spark Template files and resources from GitHub are licensed under the terms of the MIT license, Copyright GitHub, Inc. |
| 22 | +### Setup |
| 23 | + |
| 24 | +1. **Configure Supabase** |
| 25 | + ```bash |
| 26 | + # Copy environment template |
| 27 | + cp .env.example .env |
| 28 | + |
| 29 | + # Edit .env with your Supabase credentials |
| 30 | + # Get these from your Supabase dashboard |
| 31 | + ``` |
| 32 | + |
| 33 | +2. **Create Database Schema** |
| 34 | + - Open your Supabase dashboard |
| 35 | + - Go to SQL Editor |
| 36 | + - Run the contents of `supabase-schema.sql` |
| 37 | + |
| 38 | +3. **Install & Run** |
| 39 | + ```bash |
| 40 | + npm install |
| 41 | + npm run dev |
| 42 | + ``` |
| 43 | + |
| 44 | +4. **Start Tracking!** |
| 45 | + - Register with your email |
| 46 | + - Confirm your email address |
| 47 | + - Start tracking expenses |
| 48 | + |
| 49 | +## 🛠️ Tech Stack |
| 50 | + |
| 51 | +- **Framework**: Vue 3 with Composition API |
| 52 | +- **UI Library**: Vuetify 3 (Material Design) |
| 53 | +- **Backend**: Supabase (Auth + Database) |
| 54 | +- **Build Tool**: Vite |
| 55 | +- **Charts**: Chart.js with vue-chartjs |
| 56 | +- **Icons**: Material Design Icons |
| 57 | + |
| 58 | +## 📋 Setup Details |
| 59 | + |
| 60 | +For detailed setup instructions, see [SUPABASE_SETUP.md](./SUPABASE_SETUP.md) |
| 61 | + |
| 62 | +## 🏗️ Architecture |
| 63 | + |
| 64 | +- **Authentication**: Supabase Auth with Row Level Security |
| 65 | +- **Database**: PostgreSQL with user-isolated expense data |
| 66 | +- **Frontend**: Vue 3 Composition API with TypeScript |
| 67 | +- **Styling**: Vuetify 3 Material Design components |
| 68 | +- **Charts**: Chart.js for expense visualization |
| 69 | + |
| 70 | +## 🔒 Security |
| 71 | + |
| 72 | +- User authentication required for all data access |
| 73 | +- Row Level Security ensures data isolation |
| 74 | +- Environment variables for sensitive configuration |
| 75 | +- No user data stored locally |
| 76 | + |
| 77 | +## 📱 Mobile Optimization |
| 78 | + |
| 79 | +- Responsive Material Design interface |
| 80 | +- Touch-friendly interactions |
| 81 | +- Optimized for iPhone 12 mini and similar devices |
| 82 | +- Bottom navigation for easy thumb access |
| 83 | + |
| 84 | +## 📄 License |
| 85 | + |
| 86 | +MIT License - see LICENSE file for details |
0 commit comments