Moscow · BudgetingApp Frontend

A dark-themed React dashboard for the BudgetingApp Spring Boot backend.

Structure

src/
├── api.js                    # All API calls (maps to your Spring endpoints)
├── App.jsx                   # Root + routing
├── App.css                   # Global design system
├── main.jsx                  # Entry point
├── components/
│   ├── Sidebar.jsx           # Navigation sidebar
│   └── Sidebar.css
└── pages/
    ├── Dashboard.jsx         # Overview with stats + recent data
    ├── Budgets.jsx           # Budget CRUD
    ├── Transactions.jsx      # Transaction CRUD + income/expense filter
    ├── Categories.jsx        # Category CRUD (card layout)
    ├── SavingsGoals.jsx      # Savings goals with progress bars
    └── Users.jsx             # User management + active user switcher

Setup

npm install
npm run dev

App runs at http://localhost:5173.
Backend expected at http://localhost:8080.

The Vite dev server proxies /api → http://localhost:8080 automatically.

API Endpoints Used

Page	Endpoints
Dashboard	GET /budgets/user/:id, /transactions/user/:id, /savings-goals/user/:id
Budgets	GET/POST/PUT/DELETE /budgets, /budgets/user/:id
Transactions	GET/POST/PUT/DELETE /transactions, /transactions/user/:id
Categories	GET/POST/PUT/DELETE /categories, /categories/user/:id
Savings Goals	GET/POST/PUT/DELETE /savings-goals, /savings-goals/user/:id
Users	GET/POST/PUT/DELETE /users, /users (all)

Notes

• Default userId is 1 — switch users from the Users page.
• Field names in forms use common conventions (name, amount, userId, etc.). Adjust in api.js if your model field names differ.
• The base URL is in src/api.js — change BASE if your backend runs elsewhere.