Eine moderne Full-Stack Budget-Tracking-Applikation mit React Frontend und Node.js/Express Backend, die mit MongoDB Atlas verbunden ist.
- Überblick
- Features
- Technologie-Stack
- Installation
- Verwendung
- API-Dokumentation
- Projektstruktur
- Entwicklung
- Autor
Der Budget Tracker ist eine Webanwendung zur Verwaltung persönlicher Finanzen. Die App ermöglicht das Tracken von Einnahmen und Ausgaben sowie das Setzen und Verfolgen von Sparzielen.
- ✅ Transaktionen erfassen (Einnahmen & Ausgaben)
- ✅ Sparziele erstellen und verfolgen
- ✅ Automatische Berechnung von Saldo und Summen
- ✅ Such- und Filterfunktionen
- ✅ Responsive Design mit modernem UI
Projektzeitraum: 10. Januar 2026 - 8. Februar 2026
Status: ✅ Abgeschlossen
Die Applikation implementiert 12 zentrale Features:
- GET - Alle Transaktionen laden und anzeigen
- POST - Neue Transaktion erstellen
- DELETE - Transaktion löschen
- GET - Alle Sparziele laden
- POST - Neues Sparziel erstellen
- PATCH - Sparziel aktualisieren (Betrag hinzufügen)
- DELETE - Sparziel löschen
- Suche - Transaktionen durchsuchen nach Beschreibung
- Filter - Transaktionen nach Typ filtern (Einnahmen/Ausgaben/Alle)
- Sortierung - Sparziele alphabetisch sortiert anzeigen
- Berechnung - Automatische Summenberechnung (Einnahmen, Ausgaben, Saldo)
- Limit - Anzeige der letzten 10 Transaktionen
📄 Detaillierte Feature-Dokumentation: features.md
- React 18.x - UI-Framework
- Axios 1.13.2 - HTTP-Client für API-Requests
- CSS3 - Styling mit Gradients und modernen Effekten
- Node.js - JavaScript Runtime
- Express.js - Web Framework
- MongoDB Atlas - Cloud-Datenbank
- Mongoose - ODM für MongoDB
- Visual Studio Code - Code-Editor
- npm - Package Manager
- Git - Versionskontrolle
📄 Technische Details: technical.md
- Node.js (v16 oder höher)
- npm oder yarn
- MongoDB Atlas Account (oder lokale MongoDB-Installation)
# 1. Repository klonen
git clone https://github.com/christophejenzer-collab/BUDGET.git
cd BUDGET
# 2. Backend-Dependencies installieren
cd backend
npm install
# 3. Umgebungsvariablen konfigurieren
# Erstelle .env Datei im backend/ Ordner:
# MONGODB_URI=deine_mongodb_connection_string
# PORT=5000
# 4. Backend starten
npm start
# Server läuft auf http://localhost:5000# 1. Frontend-Dependencies installieren
cd ../frontend
npm install
# 2. Frontend starten
npm start
# React App läuft auf http://localhost:3000📄 Ausführliche Setup-Anleitung: setup.md
Einfachster Weg: Mit Docker läuft alles mit einem Befehl!
# Repository klonen
git clone https://github.com/christophejenzer-collab/BUDGET.git
cd BUDGET
# .env konfigurieren (MongoDB Connection String)
cp backend/.env.example backend/.env
# Trage deinen MongoDB Atlas URI ein
# Starten
docker-compose upFertig! ✅
- Frontend: http://localhost:3000
- Backend: http://localhost:5000
📄 Detaillierte Docker-Anleitung: DOCKER.md
- Beschreibung eingeben (z.B. "Gehalt", "Einkauf")
- Betrag eingeben
- Typ wählen: Einnahme oder Ausgabe
- "Hinzufügen" klicken
- Zielname eingeben (z.B. "Urlaub", "Auto")
- Zielbetrag festlegen
- "Sparziel erstellen" klicken
- Bei einem Sparziel auf "Betrag hinzufügen" klicken
- Betrag eingeben
- ✓ bestätigen
- Suchfeld: Transaktionen nach Beschreibung durchsuchen
- Filter-Dropdown: Nur Einnahmen, Ausgaben oder Alle anzeigen
Die Hauptansicht zeigt Einnahmen, Ausgaben, Saldo und alle Funktionen:
Verwalte deine Einnahmen und Ausgaben mit Such- und Filterfunktion:
Erstelle und verfolge deine Sparziele mit visuellen Fortschrittsbalken:
Durchsuche und filtere deine Transaktionen:
http://localhost:5000/api
| Method | Endpoint | Beschreibung |
|---|---|---|
| GET | /transactions |
Alle Transaktionen abrufen |
| POST | /transactions |
Neue Transaktion erstellen |
| DELETE | /transactions/:id |
Transaktion löschen |
| Method | Endpoint | Beschreibung |
|---|---|---|
| GET | /savings-goals |
Alle Sparziele abrufen |
| POST | /savings-goals |
Neues Sparziel erstellen |
| PATCH | /savings-goals/:id |
Sparziel aktualisieren |
| DELETE | /savings-goals/:id |
Sparziel löschen |
📄 Vollständige API-Dokumentation: api_documentation.md
BUDGET/
├── backend/
│ ├── models/
│ │ ├── SavingsGoal.js
│ │ └── Transaction.js
│ ├── routes/
│ │ ├── savingsGoals.js
│ │ └── transactions.js
│ ├── server.js
│ ├── package.json
│ └── .env
│
├── frontend/
│ ├── public/
│ │ ├── index.html
│ │ └── manifest.json
│ ├── src/
│ │ ├── components/
│ │ │ └── Dashboard.js
│ │ ├── App.js
│ │ ├── App.css
│ │ └── index.js
│ ├── package.json
│ └── README.md
│
├── README.md
├── features.md
├── api_documentation.md
├── setup.md
├── technical.md
└── journal.md
Start: 10. Januar 2026
Abgabe: 8. Februar 2026
- 12.01.2026 - Backend und Frontend Setup fertig
- 17.01.2026 - Alle notwendigen Dateien erstellt, Grundstruktur aufgebaut
- 24.01.2026 - UI-Optimierung, Such- und Filterfunktion verbessert
- Schnelle Umsetzung und guter Projektfortschritt
- Technisches Verständnis kontinuierlich erweitert
- Projekt-Struktur klar verstanden
- Verschiedene KI-Tools lieferten unterschiedliche Lösungsansätze
- Code musste mehrfach umgeschrieben und optimiert werden
- Scope-Erweiterung durch neue Ideen während der Entwicklung
📄 Vollständiges Entwicklungstagebuch: journal.md
Christophe Jenzer
Budget Tracker - Projektarbeit
GitHub: @christophejenzer-collab
Dieses Projekt wurde im Rahmen einer Bildungseinrichtung erstellt.
- MongoDB Atlas für die Cloud-Datenbank
- React Community für ausgezeichnete Dokumentation
- Dozent für Feedback und Unterstützung
⭐ Wenn dir dieses Projekt gefällt, gib ihm einen Star!