Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/esr-style/expense-tracker

A full stack website which i built for my own personal use for tracking my expenses
https://github.com/esr-style/expense-tracker

expense-tracker fullstack nodejs postgres recharts

Last synced: 22 days ago
JSON representation

A full stack website which i built for my own personal use for tracking my expenses

Awesome Lists containing this project

README

        

# SpendSage - Personal Expense Tracker
A full-stack web application for tracking personal expenses with detailed analytics and visualization.

## Features
- 🔐 User authentication with JWT
- 💰 Track daily and monthly expenses
- 📊 Visual analytics with charts
- 📱 Responsive design for mobile and desktop
- 🔍 Filter transactions by date
- 📋 CRUD operations for expenses and loans
- 📈 Expense trends visualization
- 🔄 Real-time updates
- 💸 Manage loans with detailed records

## Tech Stack
### Frontend
- React.js
- TailwindCSS
- Recharts for data visualization
- React Router for navigation

### Backend
- Node.js
- Express.js
- PostgreSQL
- JWT for authentication
- bcrypt for password hashing

## Installation
1. Clone the repository
```bash
git clone https://github.com/ESR-style/Expense-tracker.git
```

2. Install dependencies for frontend
```
npm install
```

3. Install dependencies for backend
```
cd backend
npm install
```

4. Set up PostgreSQL database
```
CREATE DATABASE expense_tracker;
CREATE TABLE users (
user_id SERIAL PRIMARY KEY,
email VARCHAR(255) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL,
name VARCHAR(255) NOT NULL,
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE transactions (
transaction_id SERIAL PRIMARY KEY,
user_id INTEGER REFERENCES users(user_id),
type VARCHAR(50) NOT NULL,
category VARCHAR(100) NOT NULL,
amount DECIMAL(10,2) NOT NULL,
description TEXT,
date TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE loans (
loan_id SERIAL PRIMARY KEY,
user_id INTEGER REFERENCES users(user_id),
person_name VARCHAR(255) NOT NULL,
amount DECIMAL(10,2) NOT NULL,
type VARCHAR(50) NOT NULL,
description TEXT,
date TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
);
```

5. Create .env file in backend directory
```
DB_USER=your_username
DB_PASSWORD=your_password
DB_HOST=localhost
DB_PORT=5432
DB_DATABASE=expense_tracker
JWT_SECRET=your_jwt_secret
```

## Usage

1. Start the backend server
```
cd backend
node server.js
```

2. Start the frontend application
```
npm run dev
```

## API Documentation

### Authentication
| Method | Endpoint | Description |
|--------|----------|-------------|
| POST | `/api/register` | Register new user |
| POST | `/api/login` | Login user |

### Expenses
| Method | Endpoint | Description |
|--------|----------|-------------|
| GET | `/api/expenses` | Get all expenses |
| POST | `/api/expenses` | Create new expense |
| PUT | `/api/expenses/:id` | Update expense |
| DELETE | `/api/expenses/:id` | Delete expense |

### Loans
| Method | Endpoint | Description |
|--------|----------|-------------|
| GET | `/api/loans` | Get all loans |
| POST | `/api/loans` | Create new loan |
| PUT | `/api/loans/:id` | Update loan |
| DELETE | `/api/loans/:id` | Delete loan |

## Screenshots

### Homepage
![Homepage Screenshot](/public/Screenshot%20(190).png)

### Expenses Page
![Expenses Page Screenshot](/public/Screenshot%20(191).png)

### Loans Page
![Loans Page Screenshot](/public/Screenshot%20(192).png)