https://github.com/ak4shkr/expense-tracker
A modern solution to track your expenses, analyze spending patterns, and stay financially smart.
https://github.com/ak4shkr/expense-tracker
axios jwt-authentication mantine-ui nodejs reactjs reactquery
Last synced: 3 months ago
JSON representation
A modern solution to track your expenses, analyze spending patterns, and stay financially smart.
- Host: GitHub
- URL: https://github.com/ak4shkr/expense-tracker
- Owner: Ak4shKr
- Created: 2025-04-27T20:31:21.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-04-28T20:07:06.000Z (9 months ago)
- Last Synced: 2025-04-30T09:48:09.994Z (9 months ago)
- Topics: axios, jwt-authentication, mantine-ui, nodejs, reactjs, reactquery
- Language: JavaScript
- Homepage: https://expense-tracker-opal-ten-54.vercel.app
- Size: 267 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 💸 Expense Tracker Application
*A modern solution to track your expenses, analyze spending patterns, and stay financially smart.*
---
## 🌟 Features
- Add, Edit, and Delete your expenses effortlessly
- Authentication with separate user, seprate data
- search across the list
- Stats Cards for quick insights
- Monthly-wise Expense Chart
- Category-wise Expense Distribution
- Responsive design for all devices
- Real-time updates with React Query
- Toast Notifications for feedback
---
## 🛠️ Tech Stack
### Backend
| Technology | Purpose |
|------------|---------|
| Express.js | Server-side Framework |
| Node.js | Backend Runtime |
| JWT | Authentication |
| MongoDB | Database |
| CORS | Cross-Origin Resource Sharing |
| Nodemon | Development Server |
| Bcrypt | Password Encryption |
### Frontend
| Technology | Purpose |
|------------|---------|
| React | Frontend Library |
| React Query | caching |
| Mantine | UI Components |
| Tailwind CSS | Styling |
| Axios | API Requests |
---
## 📂 Project Structure
```
src/
│
├── components/ // Reusable UI components
├── hooks/ // Custom React hooks
├── utils/ // Utility functions
├── pages/ // pages screen
└── App.jsx // Main Application File
```
---
## 📊 Highlights
- **Monthly Expense Charts**: Visualize your monthly spending.
- **Category Breakdown**: See where your money is going.
- **Stat Cards**: Quick view of total expenses, number of transactions, and highest category.
- **Edit/Delete**: Modify or remove expenses with a click.
- **Notifications**: Get instant feedback on actions.
## Performance on TOP
---
## 🚀 Getting Started
```bash
git clone https://github.com/ak4shKr/expense-tracker
```
### Backend Setup
1. **Install dependencies:**
```bash
cd backend
npm install
```
2. **Set up `.env` file:**
```
DB_URL=your_mongodb_connection_string
JWT_SECRET=your_secret_key
PORT=3000
```
3. **Run the server:**
```bash
npm start
```
---
### Frontend Setup
1. **Navigate to frontend directory and install dependencies:**
```bash
cd frontend
npm install
```
2. **Run the frontend:**
```bash
npm run dev
```
---
## 📸 Screenshots
**Responsive Application for all devices and with good sense of design and colors with impressice UI, acroos the platform we setted modal, drawer, scrollable list, sticky navbar, consistent colors...
please check it out below shots.**:
---
## ❤️ Special Thanks
Built with passion, precision, and a little bit of coffee ☕.
---