FinEase

FinEase is a personal finance management web application that helps users manage their income, expenses, and savings goals efficiently. It allows users to record transactions, set monthly budgets, and view insightful financial summaries with charts and reports.

This project demonstrates CRUD operations, authentication, backend integration, and data visualization — ideal for showcasing full-stack development skills.

---

Project Overview

FinEase is designed to help individuals track and manage their personal finances in a simple and organized way. Users can record income and expense transactions, monitor their financial balance, and visualize spending patterns through interactive charts.

The platform provides secure authentication, private routes for personal financial data, and powerful data visualization tools to help users understand their financial habits and make better financial decisions.

---

Live Links

• Live Website: https://b12-m11-session-aa418.web.app
• Client Repository: https://github.com/Fahmida0010/FinEase-client.git
• Server Repository: https://github.com/Fahmida0010/FinEase-Server.git

---

Key Features

• User Authentication: Email/password & Google login via Firebase
• Transaction Management (CRUD): Add, update, delete, and view personal transactions
• Reports with Charts: Visualize income & expenses using Pie and Bar charts
• Light/Dark Mode: Switch between light and dark themes
• SweetAlert Notifications: Modern popups for success/error messages
• Responsive Design: Fully optimized for desktop, tablet, and mobile
• Custom 404 Page: Friendly “Not Found” page for invalid routes

---

Main Pages & Functionalities

Home Page

• Motivational banner section

• Overview of total income, expense, and balance (from database)

• Two static sections:

  • Budgeting Tips
  • Why Financial Planning Matters

---

Authentication

• Signup: Name, Email, Password, PhotoURL
• Login: Email/Password & Google Login

Password validation rules:

• At least one uppercase and lowercase letter
• Minimum length: 6 characters

All messages shown via SweetAlert (no default alerts)

---

Private Routes

Accessible only to logged-in users:

• /add-transaction
• /my-transactions
• /transaction/:id
• /transaction/update/:id
• /reports
• /profile

---

Transaction Operations (CRUD)

Add Transaction

• Fields: Type, Category, Amount, Description, Date, User Email & Name
• Stores data in MongoDB
• Shows success message after submission

Update Transaction

• Pre-filled form with existing data
• Updates instantly after saving

Delete Transaction

• SweetAlert confirmation before deletion
• Instantly updates UI after removing

View Transaction Details

• Full details including Type, Category, Amount, and Date
• Displays total amount per category

---

Reports Page

• Displays income & expense summary using Recharts
• Supports filtering by month
• Pie Chart (by category) and Bar Chart (monthly totals)

---

My Profile

• Displays name, photo, and email
• Allows profile updates

---

Main Technologies Used

Frontend

• React (Vite)
• React Router
• Tailwind CSS
• SweetAlert2
• Recharts
• Firebase Authentication

Backend

• Node.js
• Express.js
• MongoDB
• Firebase Admin SDK (Authorization)

---

Dependencies Used

Frontend Dependencies

• react
• react-router-dom
• firebase
• tailwindcss
• sweetalert2
• recharts
• axios

Backend Dependencies

• express
• cors
• dotenv
• mongodb
• firebase-admin
• jsonwebtoken

---

How to Run the Project Locally

Step 1: Clone the Client Repository

git clone https://github.com/Fahmida0010/FinEase-client.git

Step 2: Clone the Server Repository

git clone https://github.com/Fahmida0010/FinEase-Server.git

---

Step 3: Navigate to the Client Folder

cd FinEase-client

---

Step 4: Install Client Dependencies

npm install

---

Step 5: Run the Client

npm run dev

Client will run on:

http://localhost:5173

---

Setup and Run the Server

Open a new terminal and run:

Step 6: Navigate to the Server Folder

cd FinEase-Server

---

Step 7: Install Server Dependencies

npm install

---

Step 8: Setup Environment Variables

Create a .env file and add:

MONGODB_URI=your_mongodb_connection_string
FIREBASE_ADMIN_KEY=your_firebase_admin_key
JWT_SECRET=your_secret_key

---

Step 9: Run the Server

node index.js

Server will run on:

http://localhost:3000

---

---

🗄️ Database Example (MongoDB)

{
  "type": "expense",
  "category": "home",
  "amount": 1000,
  "description": "house rent",
  "date": "2025-01-15T00:00:00.000Z",
  "email": "xyz@gmail.com",
  "name": "Hero"
}

🤝 Contributing

Contributions are always welcome!

If you'd like to improve FinEase, feel free to fork this repository, create a new branch, and submit a pull request.

You can contribute by:

• ✨ Adding new features and functionalities
• 🎨 Improving UI/UX and responsiveness
• 🐛 Fixing bugs and performance issues
• 📊 Enhancing financial reports and data visualization
• 🔒 Improving security and authentication flows
• 📝 Updating documentation and code quality

Contribution Steps

1. Fork the repository
2. Create a feature branch

git checkout -b feature/your-feature-name

3. Commit your changes

git commit -m "Add: your feature description"

4. Push to your fork

git push origin feature/your-feature-name

5. Open a Pull Request

Every contribution, no matter how small, helps make FinEase better. Thank you for your support and happy coding! 🚀

❤️ Thank You for Visiting

Thank you for taking the time to explore FinEase.

I hope this project gives you a clear idea of my full-stack development skills and passion for building practical, user-friendly web applications.

If you found this project helpful or interesting, feel free to ⭐ the repository, fork it, and contribute to its future improvements.

Your support, feedback, and contributions are greatly appreciated.

Happy Coding! 🚀