Web-App zur Verwaltung von Notizen, entwickelt mit React (Frontend) und Java Spring Boot (Backend).
- Java 21 mit Spring Boot 3.2.2
- Spring Data JPA für die Datenpersistenz
- H2 Database (In-Memory-Datenbank)
- Swagger/OpenAPI 3 für API-Dokumentation (springdoc-openapi-starter-webmvc-ui 2.3.0)
- Maven als Build-Tool
- React 19.2.4
- Axios 1.7.9
- React Scripts 5.0.1
- CSS3
- Java 21 oder höher
- Maven 3.6+
- Node.js 16+ und npm
# 1. Ins Projektverzeichnis wechseln
cd notes-app
# 2. Maven Build
mvn clean install
# 3. Anwendung starten
java -jar target/notes-app-1.0-SNAPSHOT.jar
# Alternative: Mit Maven direkt
mvn spring-boot:runDer Backend-Server läuft auf: http://localhost:8080
# 1. Ins Frontend-Verzeichnis wechseln
cd frontend
# 2. Dependencies installieren (nur einmal nötig)
npm install
# 3. Development-Server starten
npm startDas Frontend läuft auf: http://localhost:3000
| Methode | Endpunkt | Beschreibung |
|---|---|---|
| GET | /api/notes |
Alle Notizen abrufen |
| POST | /api/notes |
Neue Notiz erstellen |
| PUT | /api/notes/{id} |
Notiz aktualisieren |
| DELETE | /api/notes/{id} |
Notiz löschen |
Die vollständige API-Dokumentation ist verfügbar unter:
http://localhost:8080/swagger-ui/index.html
Die H2-Datenbank-Konsole ist verfügbar unter:
http://localhost:8080/h2-console
Verbindungsdetails:
- JDBC URL:
jdbc:h2:mem:notesdb - Username:
sa - Password: (leer lassen)
Das Backend folgt einer 3-Schichten-Architektur:
Controller (REST API)
↓
Service (Business Logic)
↓
Repository (Data Access)
↓
Database (H2)
Schichten:
- Controller (
NoteController): REST-Endpunkte, HTTP-Request/Response-Handling - Service (
NoteService): Business-Logik und Validierung - Repository (
NoteRepository): JPA-Datenzugriff mit Spring Data - Model (
Note): JPA-Entity
Das Frontend ist in folgende React-Komponenten strukturiert:
- App.jsx: Hauptkomponente, zentrales State-Management für das Laden der Notes
- NoteForm.jsx: Formular zum Erstellen neuer Notizen
- NoteList.jsx: Präsentationskomponente zur Darstellung der Notizenliste
- NoteItem.jsx: Einzelne Notiz mit Edit/Delete-Funktionalität
- api.js: Zentralisierte API-Kommunikation
notes-app/
├── backend/
│ └── src/
│ ├── main/
│ │ ├── java/com/notesapp/
│ │ │ ├── NotesApplication.java # Spring Boot Entry Point
│ │ │ ├── controller/
│ │ │ │ └── NoteController.java # REST Controller mit Swagger
│ │ │ ├── service/
│ │ │ │ └── NoteService.java # Business Logic
│ │ │ ├── repository/
│ │ │ │ └── NoteRepository.java # JPA Repository
│ │ │ ├── model/
│ │ │ │ └── Note.java # JPA Entity mit Swagger
│ │ │ └── exception/
│ │ │ └── NoteNotFoundException.java # Custom Exception
│ │ └── resources/
│ │ └── application.properties # Konfiguration (DB, Swagger, etc.)
│ └── test/
│ └── java/com/notesapp/
│ ├── controller/
│ │ └── NoteControllerTest.java # Controller Tests
│ ├── service/
│ │ └── NoteServiceTest.java # Service Tests
│ └── model/
│ └── NoteTest.java # Model Tests
├── frontend/
│ ├── public/
│ │ └── index.html # HTML Template
│ ├── src/
│ │ ├── components/
│ │ │ ├── NoteForm.jsx # Erstellen-Formular
│ │ │ ├── NoteList.jsx # Notizenliste
│ │ │ └── NoteItem.jsx # Einzelnotiz mit Edit/Delete
│ │ ├── services/
│ │ │ └── api.js # Axios API-Service
│ │ ├── App.jsx # Hauptkomponente
│ │ ├── index.js # React Entry Point
│ │ └── index.css # Globales Styling
│ └── package.json # npm Konfiguration
│
├── pom.xml # Maven Root Konfiguration
└── README.md # Dieses Dokument