SmartBudget

SmartBudget is a powerful, user-friendly web application that helps individuals manage their expenses, set financial goals, and track savings—all in one place. Built with a modern MERN stack, it delivers a polished UI and real-time data handling for seamless budgeting.

Key Features

• Expense Tracking: Add, edit, and delete expenses with support for recurring entries.
• Income Management: Manage multiple income sources, set income goals, and track performance.
• Budget Setting: Configure category-based budgets with custom intervals (weekly, monthly, etc.).
• Savings & Goals: Allocate savings ratios, set deadlines, and monitor progress toward specific goals.
• Responsive UI: A sleek interface optimized for both desktop and mobile views.
• Profile Customization: Upload profile photos, update personal info, and secure your account with JWT authentication.

Technology Stack

Layer	Tech / Tools
Frontend	React, Axios, React Router, CSS/SCSS
Backend	Node.js, Express.js, Helmet, Morgan
Database	MongoDB Atlas
APIs	RESTful endpoints (Express routes), JSON Web Tokens
Hosting	- Backend/Frontend on Render

Live Demo

Visit: SmartBudget

The app is fully deployed. Feel free to explore and test.

Getting Started

Prerequisites

• Node.js (v18+)
• npm or yarn
• A MongoDB Atlas database (or local MongoDB instance)

Installation & Setup

1. Clone this repository:

   git clone https://github.com/PrthD/SmartBudget.git
   cd SmartBudget

2. Install dependencies in both frontend and backend folders:

   # In project root
   cd frontend
   npm install
   # or yarn install
   
   cd ../backend
   npm install
   # or yarn install

3. Environment Variables: In the backend/.env, set:

   PORT=5000
   MONGODB_URI=YOUR_MONGODB_ATLAS_URL
   JWT_SECRET=YOUR_SECRET_KEY

   In the frontend/.env, set:

   REACT_APP_API_URL=http://localhost:5000

   Adjust these as needed for production vs. local dev.

4. Run the backend server:

   cd backend
   npm run dev
   # Runs on http://localhost:5000

5. Run the frontend dev server:

   cd frontend
   npm start
   # Runs on http://localhost:3000

To replicate this:

1. Create an account on Render.
2. Deploy each folder (backend, frontend) as separate web services.
3. Update environment variables on Render for both services.
4. Reference the correct REACT_APP_API_URL in the frontend .env.

Video Walkthrough

Click on the thumbnail above to watch a detailed video walkthrough of the application.

Contributing

Pull requests are welcome. For major changes, open an issue first to discuss what you would like to change.

License

This project is licensed under the MIT License.

---

_{SmartBudget – Helping you manage and grow your finances, one step at a time.}