|
1 | 1 | # 💰 Money Planner — Premium Personal Finance Tracker |
2 | 2 |
|
| 3 | +<div align="center"> |
| 4 | + |
3 | 5 |  |
4 | 6 |
|
| 7 | +**Transform your financial life with clarity and style.** |
| 8 | + |
| 9 | +[Live Demo](https://moneyplanner-demo.vercel.app/) • [Report Bug](https://github.com/Steventanardi/MoneyPlanner/issues) • [Request Feature](https://github.com/Steventanardi/MoneyPlanner/issues) |
| 10 | + |
5 | 11 | [](https://vitejs.dev/) |
6 | 12 | [](https://react.dev/) |
7 | 13 | [](https://supabase.com/) |
8 | 14 | [](https://tailwindcss.com/) |
9 | 15 | [](https://www.framer.com/motion/) |
10 | 16 |
|
11 | | -A high-end, privacy-focused financial management application built with **React 19**, **Vite**, and **Supabase**. Designed with a premium glassmorphic aesthetic and smooth micro-interactions to make managing your money feel like a breeze. |
| 17 | +</div> |
| 18 | + |
| 19 | +--- |
| 20 | + |
| 21 | +## 🌟 Overview |
| 22 | + |
| 23 | +**Money Planner** is a high-end, privacy-conscious financial management application crafted for those who value both aesthetics and functionality. Built with **React 19**, **Vite**, and **Supabase**, it delivers a premium experience with glassmorphic visuals and smooth interactive elements. |
| 24 | + |
| 25 | +Whether you're tracking daily expenses, managing multiple bank accounts, or planning for emergencies, Money Planner provides the tools you need in one beautiful interface. |
| 26 | + |
| 27 | +--- |
| 28 | + |
| 29 | +## ✨ Features Key |
| 30 | + |
| 31 | +### 📂 Smart Asset Management |
| 32 | +- **🏦 Multi-Bank Support**: Track balances across personal, joint, and savings accounts. |
| 33 | +- **🛡️ Emergency Fund**: Dedicated tracker with goal-based liquid reserve monitoring. |
| 34 | +- **🔄 Recurring Transactions**: Automate tracking for subscriptions, bills, and regular income. |
12 | 35 |
|
13 | | -## ✨ Key Features |
| 36 | +### 📊 Powerful Insights |
| 37 | +- **📈 Interactive Charts**: Dynamic data visualization using **Recharts** (Area, Bar, and Pie). |
| 38 | +- **🌍 Global Finance**: Real-time exchange rate updates for international travelers (TWD/IDR default). |
| 39 | +- **📉 Spending Breakdown**: Detailed category-wise analysis of your financial habits. |
14 | 40 |
|
15 | | -- **🏦 Smart Bank Management**: Seamlessly manage multiple banks, wallets, and joint accounts with real-time balance tracking. |
16 | | -- **📈 Advanced Insights**: Visualize your spending habits with dynamic **Recharts** area and bar charts. |
17 | | -- **💎 Premium UX/UI**: Fully responsive design with **Glassmorphism**, dark mode support, and buttery-smooth **Framer Motion** transitions. |
18 | | -- **🛡️ Emergency Fund Tracker**: Dedicated tracking for your liquid safety net with adjustable reserve goals. |
19 | | -- **🔄 Recurring Items**: Never miss a subscription or bill with automated recurring transaction management. |
20 | | -- **📂 Data Portability**: Export your entire financial history to CSV for deep analysis in Excel/Sheets. |
21 | | -- **🌍 Multi-Currency Support**: Real-time exchange rate updates (TWD/IDR and more) to keep your global finances in check. |
22 | | -- **📱 Progressive Web App (PWA)**: Installable on your mobile device for an app-like experience without the App Store. |
| 41 | +### 💎 Premium User Experience |
| 42 | +- **🎨 Glassmorphism & Dark Mode**: A stunning UI designed for modern readability. |
| 43 | +- **✨ Micro-interactions**: Buttery-smooth transitions powered by **Framer Motion**. |
| 44 | +- **📱 PWA Ready**: Install as a standalone app on your mobile device or desktop. |
| 45 | +- **🚀 Ultra-fast Performance**: Powered by Vite and TanStack Query for instant data sync. |
| 46 | + |
| 47 | +--- |
23 | 48 |
|
24 | 49 | ## 🛠️ Tech Stack |
25 | 50 |
|
26 | | -- **Core**: React 19, Vite |
27 | | -- **State Management**: Zustand |
28 | | -- **Data Fetching**: TanStack Query (React Query) |
29 | | -- **Database & Auth**: Supabase |
30 | | -- **Animations**: Framer Motion |
31 | | -- **Icons**: Lucide React |
32 | | -- **Charts**: Recharts |
33 | | -- **Styling**: Modern CSS with HSL variables |
34 | | -- **OCR**: Tesseract.js (for future receipt scanning features) |
| 51 | +- **Frontend**: [React 19](https://react.dev/), [Vite](https://vitejs.dev/) |
| 52 | +- **Styling**: [Tailwind CSS](https://tailwindcss.com/), [Lucide Icons](https://lucide.dev/) |
| 53 | +- **Animations**: [Framer Motion](https://www.framer.com/motion/) |
| 54 | +- **Backend/DB**: [Supabase](https://supabase.com/) (PostgreSQL + Auth) |
| 55 | +- **State Management**: [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction) |
| 56 | +- **Data Fetching**: [TanStack Query](https://tanstack.com/query/latest) |
| 57 | +- **Charts**: [Recharts](https://recharts.org/) |
| 58 | +- **Utilities**: [Tesseract.js](https://tesseract.projectnaptha.com/) (OCR Scanning) |
35 | 59 |
|
36 | | -## 🚀 Getting Started |
| 60 | +--- |
37 | 61 |
|
38 | | -### Prerequisites |
| 62 | +## 🚀 Getting Started |
39 | 63 |
|
40 | | -- **Node.js**: `v20.0.0` or higher |
41 | | -- **npm**: Installed with Node.js |
| 64 | +### 1. Prerequisites |
| 65 | +- **Node.js**: `v20.0.0` or higher |
| 66 | +- **Supabase Account**: A project with PostgreSQL and Auth enabled. |
42 | 67 |
|
43 | | -### Installation |
| 68 | +### 2. Environment Setup |
| 69 | +Create a `.env` file in the root directory and add your Supabase credentials: |
| 70 | +```env |
| 71 | +VITE_SUPABASE_URL=your-project-url.supabase.co |
| 72 | +VITE_SUPABASE_ANON_KEY=your-anon-role-key |
| 73 | +``` |
| 74 | +*(See `.env.example` for details)* |
44 | 75 |
|
45 | | -1. **Clone the repository**: |
46 | | - ```bash |
47 | | - git clone https://github.com/Steventanardi/MoneyPlanner.git |
48 | | - cd MoneyPlanner |
49 | | - ``` |
| 76 | +### 3. Installation & Run |
| 77 | +```bash |
| 78 | +# Clone the repository |
| 79 | +git clone https://github.com/Steventanardi/MoneyPlanner.git |
50 | 80 |
|
51 | | -2. **Install dependencies**: |
52 | | - ```bash |
53 | | - npm install |
54 | | - ``` |
| 81 | +# Enter the directory |
| 82 | +cd MoneyPlanner |
55 | 83 |
|
56 | | -3. **Run the development server**: |
57 | | - ```bash |
58 | | - npm run dev |
59 | | - ``` |
| 84 | +# Install dependencies |
| 85 | +npm install |
60 | 86 |
|
61 | | -4. **Access the app**: |
62 | | - Open [http://localhost:5173](http://localhost:5173) in your browser. |
| 87 | +# Start development server |
| 88 | +npm run dev |
| 89 | +``` |
63 | 90 |
|
64 | | -## 📜 Deployment |
| 91 | +The application will be available at `http://localhost:5173`. |
65 | 92 |
|
66 | | -The project is optimized for deployment on **Vercel** or **Netlify**. Ensure you set up your Supabase environment variables in your deployment dashboard. |
| 93 | +--- |
67 | 94 |
|
68 | | -## 🤝 Contributing |
| 95 | +## 🗺️ Roadmap |
69 | 96 |
|
70 | | -Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. |
| 97 | +- [ ] **AI-Powered OCR**: Smart receipt scanning and automatic category detection. |
| 98 | +- [ ] **Budget Forecasting**: Predictive analysis based on spending history. |
| 99 | +- [ ] **Investment Tracker**: Integrate stock and crypto portfolio monitoring. |
| 100 | +- [ ] **Multi-user Wallets**: Share specific wallets with family members or friends. |
71 | 101 |
|
72 | | -1. Fork the Project |
73 | | -2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`) |
74 | | -3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`) |
75 | | -4. Push to the Branch (`git push origin feature/AmazingFeature`) |
76 | | -5. Open a Pull Request |
| 102 | +--- |
77 | 103 |
|
78 | 104 | ## 👤 Author |
79 | 105 |
|
80 | 106 | **Steven Tanardi** |
81 | | -- GitHub: [@Steventanardi](https://github.com/Steventanardi) |
82 | | -- University: National Quemoy University (國立金門大學) |
| 107 | +*Computer Science Student* |
| 108 | +**National Quemoy University (國立金門大學)** |
| 109 | + |
| 110 | +[](https://github.com/Steventanardi) |
| 111 | +[](https://www.linkedin.com/in/steventanardi/) |
| 112 | + |
| 113 | +--- |
| 114 | + |
| 115 | +## ⚖️ License |
| 116 | + |
| 117 | +Distributed under the MIT License. See `LICENSE` for more information. |
83 | 118 |
|
84 | 119 | --- |
85 | 120 |
|
86 | | -Developed with ❤️ for better financial clarity. |
| 121 | +<p align="center"> |
| 122 | + Developed with ❤️ by Steven Tanardi |
| 123 | +</p> |
0 commit comments