Mein Fullstack-Journey mit Flutter, NextJS, NestJS & Firebase

Was braucht die Welt noch dringender als eine ToDo-App? Richtig: eine ToDo-App, die man selbst baut. 😅
Klingt banal, ist aber perfekt, um die volle Bandbreite von Fullstack-Entwicklung zu zeigen – von Server über Backend bis Mobile App. Und genau das ist das Ziel dieser Blogreihe: Wir bauen gemeinsam eine ToDo-App, die Login per Firebase bietet und ToDos speichern, anzeigen, bearbeiten und löschen kann. Das Ganze läuft auf einem eigenen VPS (Virtual Private Server) mit nginx, NestJS, NextJS, Flutter und Firebase.

In diesem ersten Teil gebe ich dir einen Überblick, was dich erwartet und wie unser Projekt strukturiert ist.

Warum ein eigenes Fullstack-System?

Viele Entwickler starten mit einzelnen Tools oder Cloud-Lösungen. Aber ich wollte:

• Alles aus einem Guss – Website, App und Backend greifen ineinander.

• Kontrolle – mein eigener VPS als Fundament.

• Praxis pur – kein Beispiel „Hello World“, sondern eine funktionierende Anwendung.

Unsere ToDo-App ist dafür ideal: Sie ist simpel genug, um nicht im Chaos zu versinken, und komplex genug, um Authentifizierung, Datenbanken, API-Calls und State Management abzubilden.

Der Tech-Stack für die ToDo-App

Damit es konkret wird, hier mein Setup:

• VPS + nginx 👉 Hosting, Routing & Sicherheit

• NestJS 👉 API-Backend (CRUD für ToDos, Userverwaltung)

• NextJS 👉 Website-Frontend (ToDos im Browser verwalten)

• Flutter 👉 Mobile App für iOS & Android

• Firebase 👉 Authentifizierung (Login/SignUp), Push Notifications, ggf. Cloud Storage

Architektur: So spielen die Komponenten zusammen

Das Grundprinzip ist einfach:

1. Nutzer loggt sich via Firebase Auth ein.

2. Daten (ToDos) werden in einer Datenbank gespeichert (z. B. MySQL via NestJS).

3. Die Flutter-App und die NextJS-Webseite kommunizieren mit der NestJS-API.

4. nginx kümmert sich darum, dass alles sauber erreichbar ist (https, Subdomains).

👉 Hier bietet sich gleich ein Diagramm an: VPS → Backend → (App, Website), mit Firebase als Baustein für Auth.

Was dich in dieser Blogreihe erwartet

• Teil 1 (dieser Artikel): Überblick, Architektur & Setup.

• Teil 2: VPS einrichten mit nginx als Basis.

• Teil 3: NestJS-Backend – unsere ToDo-API mit CRUD-Endpoints.

• Teil 4: NextJS-Website für die ToDos.

• Teil 5: Flutter-App für iOS & Android.

• Teil 6: Firebase einbinden (Auth, Notifications).

• Teil 7: Alles zusammenführen – das Ökosystem.

• Teil 8: Learnings & Best Practices.

• Teil 9: Fazit & Ausblick.

Am Ende haben wir gemeinsam eine ToDo-App, die sich wirklich nutzen lässt.

Meine Ziele mit der Serie

• Nachbaubar: Du kannst jeden Schritt 1:1 mitmachen.

• Direkt anwendbar: Keine graue Theorie, sondern echte App.

• Motivierend: Lernen darf Spaß machen – und eine ToDo-App, die man selbst gebaut hat, macht einfach stolz.

Fazit & Ausblick

Damit ist das Fundament gelegt. Wir wissen, was wir bauen und mit welchen Tools wir es bauen. Im nächsten Artikel geht’s ans Eingemachte: Wir nehmen uns den VPS vor, richten nginx ein und schaffen die Grundlage dafür, dass unsere App überhaupt erreichbar ist.

Bleib dran – ab jetzt wird’s praktisch. Und hey, vielleicht wirst du am Ende sogar der stolze Besitzer deiner ganz eigenen, selbst gehosteten ToDo-App. 😉