|
1 | | -# React + Vite |
| 1 | +# 💰 Money Planner — Premium Personal Finance Tracker |
2 | 2 |
|
3 | | -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. |
| 3 | + |
4 | 4 |
|
5 | | -Currently, two official plugins are available: |
| 5 | +[](https://vitejs.dev/) |
| 6 | +[](https://react.dev/) |
| 7 | +[](https://supabase.com/) |
| 8 | +[](https://tailwindcss.com/) |
| 9 | +[](https://www.framer.com/motion/) |
6 | 10 |
|
7 | | -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh |
8 | | -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh |
| 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. |
9 | 12 |
|
10 | | -## React Compiler |
| 13 | +## ✨ Key Features |
11 | 14 |
|
12 | | -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). |
| 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. |
13 | 23 |
|
14 | | -## Expanding the ESLint configuration |
| 24 | +## 🛠️ Tech Stack |
15 | 25 |
|
16 | | -If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project. |
| 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) |
| 35 | + |
| 36 | +## 🚀 Getting Started |
| 37 | + |
| 38 | +### Prerequisites |
| 39 | + |
| 40 | +- **Node.js**: `v20.0.0` or higher |
| 41 | +- **npm**: Installed with Node.js |
| 42 | + |
| 43 | +### Installation |
| 44 | + |
| 45 | +1. **Clone the repository**: |
| 46 | + ```bash |
| 47 | + git clone https://github.com/Steventanardi/MoneyPlanner.git |
| 48 | + cd MoneyPlanner |
| 49 | + ``` |
| 50 | + |
| 51 | +2. **Install dependencies**: |
| 52 | + ```bash |
| 53 | + npm install |
| 54 | + ``` |
| 55 | + |
| 56 | +3. **Run the development server**: |
| 57 | + ```bash |
| 58 | + npm run dev |
| 59 | + ``` |
| 60 | + |
| 61 | +4. **Access the app**: |
| 62 | + Open [http://localhost:5173](http://localhost:5173) in your browser. |
| 63 | + |
| 64 | +## 📜 Deployment |
| 65 | + |
| 66 | +The project is optimized for deployment on **Vercel** or **Netlify**. Ensure you set up your Supabase environment variables in your deployment dashboard. |
| 67 | + |
| 68 | +## 🤝 Contributing |
| 69 | + |
| 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**. |
| 71 | + |
| 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 |
| 77 | + |
| 78 | +## 👤 Author |
| 79 | + |
| 80 | +**Steven Tanardi** |
| 81 | +- GitHub: [@Steventanardi](https://github.com/Steventanardi) |
| 82 | +- University: National Quemoy University (國立金門大學) |
| 83 | + |
| 84 | +--- |
| 85 | + |
| 86 | +Developed with ❤️ for better financial clarity. |
0 commit comments