Expense Tracker App

Live Link

Live link

API Documentation

API Documentation Link

---

Folder Structure

Backend

backend/
├── database/
│   └── db_connect.js            # Handles database connection logic
├── node_modules/                # Auto-generated folder for npm dependencies
├── routes/                      # API route definitions
│   ├── transactions.route.js    # Routes for transaction-related APIs
│   ├── users.route.js           # Routes for user-related APIs
├── schemas/                     # Mongoose schemas
│   ├── transactions.expense-schema.js  # Schema for managing expense transactions
│   ├── transactions.fund-schema.js     # Schema for managing fund transactions
│   └── users.schema.js                # Schema for user data
├── services/                    # Business logics
│   ├── forecasting.services.js  # Logic for expense forecasting
│   ├── transactions.services.js # Service functions for transaction operations
│   └── user.services.js         # Service functions for user operations
├── .env                         # Environment variables (e.g., database URL, port)
├── app.js                       # Main server entry point for the backend
├── swagger.js                   # Swagger configuration for API documentation
├── swagger-output.json          # Output file generated by Swagger

FrontEnd

frontend/
├── node_modules/        # Contains all npm dependencies (auto-generated during installation)
├── public/              # Public files served directly by the server
├── src/                 # Source files for the application
│   ├── assets/          # Static assets
│   ├── components/      # Reusable UI components (Sidebar, TopBar, etc.)
│   ├── context/         # Global context for state management
│   ├── pages/           # Application pages, divided into features/modules
│   │   ├── Auth/        # Pages for authentication (Login, Register)
│   │   ├── Expense/     # Pages and components for managing expenses
│   │   │   ├── AddExpense/            # Component for adding expenses
│   │   │   ├── ExpenseTrackByDay/     # Component for tracking daily expenses
│   │   │   ├── RecentExpenses/        # Component for viewing recent expenses
│   │   │   ├── expense.css            # Styles specific to expense-related pages
│   │   │   ├── index.jsx              # Entry point for Expense pages
│   │   ├── Fund/                      # Pages and components for managing funds
│   │   │   ├── components/            # Sub-components for Fund management
│   │   │   │   ├── AddForm/           # Component for adding funds
│   │   │   │   ├── BalanceCard/       # Component for displaying balance summary
│   │   │   │   ├── ForecastData/      # Component for expense forecasting for the next 7 days
│   │   │   ├── styles/                # CSS specific to Fund pages
│   │   │   ├── fund.css               # Main styles for Fund pages
│   │   │   ├── index.jsx              # Entry point for Fund pages
│   │   ├── Reports/                   # Pages for viewing reports
│   │   │   ├── components/            # Sub-components for reports
│   │   │   │   ├── ExpenseByDate/     # Component for date-range reports
│   │   │   │   ├── ExpensePieChart/   # Component for visualizing expenses in a pie chart
│   │   │   ├── report.css             # Styles specific to Reports pages
│   │   │   ├── index.jsx              # Entry point for Reports pages
├── App.css             # Global CSS for the application
├── App.jsx             # Main React component for the app
├── GLOBAL_URL.js       # Configuration file for API endpoints or global constants
├── index.css           # Base CSS for the application
├── main.jsx            # Main entry file/Application Entry point

---

Features

1. Easy UI for Adding Funds

A streamlined and intuitive interface designed for quick and hassle-free addition of funds. Users can add funds with just a few clicks, ensuring a seamless user experience.

---

2. Forecasting Future Expenses from Historical Data

Leverage data-driven insights to predict your future expenses based on past trends. This feature uses statistical algorithms to provide you with an estimate of upcoming expenditures, helping you plan better.

---

3. Managing Recent Expenses with Updates

Track your recent expenses and make real-time updates. Modify entries, adjust amounts, or delete outdated records with ease to keep your data accurate and up-to-date.

---

4. Managing Reports from Date Range

Generate detailed reports for a specific date range. Reports include:

• Pie Charts: Visualize your expense distribution.
• Expense Lists: Access itemized lists for transparency and detailed tracking.

Recenet Expense Management	Specified expenses from date range

---

5. Material Design

The app leverages Material Design principles to provide a sleek, modern, and user-friendly interface. The design ensures consistency, responsiveness, and accessibility across devices.

---

Installation and Setup

1. Clone the repository:

   git clone https://github.com/yourusername/expense-tracker.git

2. Navigate to the project directory:

   cd expense-tracker

3. Install dependencies for frontend:

   cd frontend
   npm install

4. Install dependencies for backend:

cd backend
npm install

4. Start the application: backend

   npm start

   frontend

   npm run dev

---

Technology Stack

• Frontend: React with Material-UI
• Backend: Node.js with Express
• Database: MongoDB
• APIs: RESTful APIs with Axios integration

---