“I was often confused about my savings and their calculations. Now, here is my tool to maintain regular income management!”
The Personal Finance Tool is your all-in-one solution for tracking income, managing expenses, and visualizing your financial health. Built with cutting-edge technologies like Next.js and React, it combines functionality with an engaging, modern interface to simplify personal finance management. This tool is designed to help you stay on top of your finances, make informed decisions, and achieve your long-term goals.
Whether you're budgeting for the month, reviewing expenses, or celebrating financial milestones, this tool is designed to empower you with clear insights and seamless usability.
| Feature | Description |
|---|---|
| 🔐 Password Protection | Safeguard your financial data with secure login access. |
| 📈 Transaction Management | Add, view, and categorize your income and expenses effortlessly. |
| 🎨 Interactive Charts | Gain insights into your financial activities over time with dynamic and responsive visualizations. |
| 📺 Responsive Design | Optimized for both desktop and mobile devices for on-the-go tracking. |
| 🎮 Animated UI | Enjoy smooth animations and transitions, making finance management engaging. |
| 🌌 Dark Mode | Switch to dark mode for a comfortable experience in low-light environments. |
| 🎉 Celebratory Effects | Celebrate milestones like reaching savings goals with confetti animations! |
This project leverages modern frameworks and libraries to deliver a powerful and delightful user experience:
- Next.js 13: Utilizes the App Router for scalable and dynamic web applications.
- React 18: Provides the foundation for building reusable and interactive components.
- TypeScript: Ensures type safety and better maintainability of the codebase.
- Tailwind CSS: Simplifies styling with utility-first classes and responsive designs.
- Framer Motion: Adds smooth and modern animations to the UI.
- Recharts: Implements beautiful and customizable data visualizations.
- Canvas Confetti: Elevates the user experience with celebratory animations.
- Shadcn UI: Delivers polished and reusable UI components.
Ensure you have the following installed on your machine:
- Node.js (v14 or later)
- npm or yarn
Follow these steps to set up the project locally:
-
Clone the Repository:
git clone https://github.com/hari7261/Finance-Wallet.git
-
Navigate to the Project Directory:
cd Finance-Wallet -
Install Dependencies:
npm install # or yarn install -
Start the Development Server:
npm run dev # or yarn dev -
Open your browser and visit:
http://localhost:3000
- Log in with your secure credentials.
- Add income or expense transactions using the intuitive form.
- Categorize and track your financial activities instantly.
- View dynamic charts to understand your spending patterns.
- Use filters to customize data visualizations by date or category.
- Achieve your savings goals and watch celebratory confetti animations bring a touch of joy to your accomplishments!
-
Upcoming Features:
- Budgeting tools for setting monthly limits.
- AI-based financial advice and insights.
- Multi-language support for global users.
-
Enhancements:
- More chart types for deeper financial analysis.
- Offline access to financial records.
We welcome feedback and contributions to improve the Personal Finance Tool. Feel free to:
- Report issues: GitHub Issues
- Contribute: Fork the repo, make changes, and submit a pull request.
Check out the live demo: Personal Finance Tool Demo
Developed with ❤️ by Hari. For inquiries, connect via LinkedIn.
This project is licensed under the MIT License. See the LICENSE file for details.