💰 BudgetBuddy - Expense Tracker

A modern, full-stack expense tracking application built with Next.js, React, TypeScript, and MongoDB. BudgetBuddy helps you manage your finances with an intuitive interface, beautiful visualizations, and powerful tracking features.

✨ Features

🔐 Authentication

• User Registration - Create a new account with email, password, and personal details
• User Login - Secure JWT-based authentication
• Protected Routes - Middleware-protected dashboard and expense pages
• Session Management - Auto-logout with token expiration

📊 Dashboard

• Expense Overview - Real-time summary of total spending and budget
• Visual Charts - Pie chart for expense breakdown by category and Line chart for daily spending trends
• Budget Tracking - Set and monitor monthly budget with visual progress indicator
• Quick Stats - View total spent, remaining budget, and highest spending category

💳 Expense Management

• Add Expenses - Create new expense entries with title, amount, category, and date
• View Expenses - Browse all expenses in a clean, organized table
• Edit Expenses - Modify existing expense details inline
• Delete Expenses - Remove unwanted expense records
• Category Filter - Filter expenses by category
• Search - Find expenses by title
• Sorting - Sort by date or amount

🎨 User Interface

• Dark Theme - Modern glassmorphic design
• Responsive Design - Works on desktop and mobile
• Animated Backgrounds - Beautiful blob animations
• Smooth Interactions - Hover effects and transitions

🚀 Tech Stack

Frontend

• Framework: Next.js 16.0.7 (React 19.2.1)
• Language: TypeScript 5
• Styling: Tailwind CSS 4
• Charts: Chart.js 4.5.1 with react-chartjs-2 5.3.1
• State Management: React Hooks & Context API

Backend

• Runtime: Node.js
• Framework: Next.js API Routes
• Authentication: JWT (JSON Web Tokens) 9.0.2
• Password Security: bcryptjs 2.4.3

Database

• Database: MongoDB 7.0.0
• ODM: Mongoose 8.20.0

📦 Installation

Prerequisites

• Node.js (v18 or higher)
• npm or yarn
• MongoDB Atlas account (or local MongoDB)

Setup Steps

1. Clone the repository

git clone https://github.com/angelabera/BudgetBuddy.git
cd BudgetBuddy

2. Install dependencies

npm install

3. Set up environment variables

# Copy the example environment file
cp .env.example .env.local

# Edit .env.local with your actual values
# Required variables:
# MONGO_URI - Your MongoDB connection string
# JWT_SECRET - A secure random string for JWT tokens

4. Run the development server

npm run dev

5. Open in browser Navigate to http://localhost:3000

🚀 Deployment

Environment Variables for Production

When deploying to platforms like Vercel, Netlify, or Railway, set these environment variables in your deployment platform's dashboard:

• MONGO_URI - Your MongoDB Atlas connection string
• JWT_SECRET - A secure, random string (at least 32 characters)

Supported Platforms

• Vercel (Recommended): Connect your GitHub repo and deploy automatically
• Netlify: Drag & drop or connect via Git
• Railway: Connect GitHub repo for seamless deployment
• Heroku: Use the Heroku CLI or Git deployment

Build Commands

npm run build    # Build for production
npm run start    # Start production server

📖 Usage

Getting Started

1. Sign Up - Create a new account on the register page
2. Login - Enter your credentials to access the dashboard
3. View Dashboard - See your expense summary and charts
4. Add Expense - Click "Add Expense" button to track spending
5. Manage Expenses - View, edit, or delete expenses
6. Set Budget - Update your monthly budget
7. Logout - End your session

Demo Credentials

• Email: [email protected]
• Password: demo123

🔑 Key Components

Pages

• / - Dashboard
• /login - Authentication
• /register - Account creation
• /expenses - Expense management
• /add-expense - New expense form

API Routes

• POST /api/auth/register - Registration
• POST /api/auth/login - Login
• GET /api/expenses - Fetch expenses
• POST /api/expenses - Create expense
• PUT /api/expenses - Update expense
• DELETE /api/expenses - Delete expense

🛡️ Security Features

✅ JWT Authentication with secure token management
✅ Password hashing with bcryptjs
✅ Protected routes with middleware
✅ HTTP-Only cookies for session storage
✅ Server-side validation
✅ Environment variables for sensitive data
✅ TypeScript for type safety
✅ Input sanitization and validation

🎨 Design Highlights

• Glassmorphic UI - Semi-transparent cards with backdrop blur
• Gradient Accents - Beautiful gradient buttons
• Dark Mode - Easy on the eyes
• Smooth Animations - Beautiful transitions
• Clean Data - Emoji-stripped categories

📊 Visualizations

• Pie Chart - Expense distribution by category
• Line Chart - Daily spending trends
• Color Coded - Easy identification

🚀 Recent Updates

• ✅ Security Enhancements: Environment variables properly secured with .env.example template
• ✅ Type Safety: Added TypeScript type definitions for all dependencies
• ✅ Dependency Updates: Updated to latest stable versions of Next.js, React, and MongoDB
• ✅ Authentication middleware with protected routes
• ✅ Emoji stripping from category names for cleaner data
• ✅ Enhanced UI: 2-column layout for register page and improved dashboard
• ✅ Functional logout with proper session management
• ✅ Deployment Ready: Configured for easy deployment to Vercel, Netlify, etc.

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 Development

Available Scripts

npm run dev      # Start development server
npm run build    # Build for production
npm run start    # Start production server
npm run lint     # Run ESLint

Project Structure

BudgetBuddy/
├── app/                 # Next.js app directory
│   ├── api/            # API routes
│   ├── components/     # Reusable components
│   ├── context/        # React context providers
│   └── ...             # Page components
├── lib/                # Utility functions and database
├── models/             # Mongoose models
├── public/             # Static assets
└── ...                 # Config files

👤 Author

Angela Bera

• GitHub: @angelabera
• LinkedIn: Angela Bera

---

Made with 💙 by Angela Bera

Happy budgeting! 💸