https://github.com/ramankishore08/personal-finance-tracker

Personal Finance Visualizer is a React-based web app for tracking expenses. Add, edit, and delete transactions, view lists, and analyze spending with Recharts. Built with Node.js, Express, and MongoDB for speed and reliability. Future updates include category tracking, budgeting, and dashboards. Stay on top of your finances effortlessly!
https://github.com/ramankishore08/personal-finance-tracker

cors expreesjs git mongodb mongodb-atlas nodejs onrender-deploy react recharts-library shadcn-ui vercel-deployment

Last synced: 3 months ago
JSON representation

Personal Finance Visualizer is a React-based web app for tracking expenses. Add, edit, and delete transactions, view lists, and analyze spending with Recharts. Built with Node.js, Express, and MongoDB for speed and reliability. Future updates include category tracking, budgeting, and dashboards. Stay on top of your finances effortlessly!

• Host: GitHub
• URL: https://github.com/ramankishore08/personal-finance-tracker
• Owner: RamanKishore08
• Created: 2025-02-16T02:16:20.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-02-16T05:24:09.000Z (over 1 year ago)
• Last Synced: 2026-01-03T14:31:31.264Z (6 months ago)
• Topics: cors, expreesjs, git, mongodb, mongodb-atlas, nodejs, onrender-deploy, react, recharts-library, shadcn-ui, vercel-deployment
• Language: JavaScript
• Homepage: http://expense-trackermern.vercel.app/
• Size: 310 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Personal Finance Tracker

![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

![Express.js](https://img.shields.io/badge/Express.js-000000?style=for-the-badge&logo=express&logoColor=white)

![Node.js](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=node.js&logoColor=white)

![MongoDB](https://img.shields.io/badge/MongoDB-47A248?style=for-the-badge&logo=mongodb&logoColor=white)

![Recharts](https://img.shields.io/badge/Recharts-FF6384?style=for-the-badge&logo=recharts&logoColor=white)

![shadcn-ui](https://img.shields.io/badge/shadcn%2Dui-000000?style=for-the-badge&logo=ui&logoColor=white)

![Material-UI](https://img.shields.io/badge/Material%20UI-007FFF?style=for-the-badge&logo=mui&logoColor=white)

---

Personal Finance Visualizer is a React-based web app for tracking expenses. Add, edit, and delete transactions, view lists, and analyze spending with Recharts. Built with Node.js, Express, and MongoDB for speed and reliability. Future updates include category tracking, budgeting, and dashboards. Stay on top of your finances effortlessly!

---

## 🛠️ Local Setup  

Run **Backend** first, then start **Frontend**.

### Clone the Repository  

```bash

git clone https://github.com/RamanKishore08/Personal-Finance-Tracker.git

```

### Open file directory

```bash

cd Personal-Finance-Tracker

```

### Open Backend

```bash

cd backend

```

### Install Backend lib

```bash

npm install express mongoose cors

```

### Run the Server

```bash

node server.js

```

### Open Frontend

```bash

cd Frontend

```

### Install necessary libraries

```bash

npm install @shadcn/ui recharts axios @mui/material @emotion/react @emotion/styled

```

### Run Frontend

```bash

npm run dev

```

# SCREENSHOTS

### Home Page

![image](https://github.com/RamanKishore08/Personal-Finance-Tracker/blob/main/Screenshots/Index.jpg)

### CRUD

![image](https://github.com/RamanKishore08/Personal-Finance-Tracker/blob/main/Screenshots/Performance.jpg)

### Chart Visualization

![image](https://github.com/RamanKishore08/Personal-Finance-Tracker/blob/main/Screenshots/Chart.jpg)

### Can Edit and delete data(CRUD)

![image](https://github.com/RamanKishore08/Personal-Finance-Tracker/blob/main/Screenshots/Edit.jpg)

### MongoDB Storage

![image](https://github.com/RamanKishore08/Personal-Finance-Tracker/blob/main/Screenshots/MongoDB.jpg)