In diesem Blogbeitrag möchte ich euch die Entwicklung meines neuesten Projekts vorstellen: die Link Sharing App. Diese Full-Stack-Anwendung wurde entwickelt, um Nutzer:innen zu ermöglichen, personalisierte Profile mit Links zu ihren Social-Media-Konten zu erstellen und zu teilen. Die App bietet eine sichere Authentifizierung, Echtzeit-Updates und ein vollständig responsives Design – ein schönes Beispiel für die Leistungsfähigkeit moderner Webtechnologien.
Überblick
Die Link Sharing App ist eine voll funktionsfähige Full-Stack-Anwendung, in der Nutzer:innen:
- Ihre Social-Media-Links erstellen, bearbeiten und löschen können.
- Links per Drag-and-Drop neu anordnen.
- Profilbilder hochladen und verwalten.
- Ihr Profil anpassen können, indem sie Vorname, Nachname und E-Mail-Adresse bearbeiten.
- Eine Echtzeit-Vorschau ihres Profils während der Bearbeitung sehen.
- Ihr Profil über eine öffentliche URL teilen.
- Ein nahtloses, responsives Design auf jedem Gerät genießen.
Dieses Projekt zeigt, wie man moderne Frontend- und Backend-Technologien zu einer einheitlichen Anwendung kombiniert.
Tech-Stack
Die App wurde mit einer Reihe moderner Tools und Frameworks entwickelt, um Skalierbarkeit, Leistung und eine exzellente Nutzererfahrung zu gewährleisten:
- Frontend & Backend: Next.js für Server-Side Rendering, Routing und Server Actions.
- TypeScript: Starke Typisierung für bessere Wartbarkeit und weniger Laufzeitfehler.
- Tailwind CSS: Utility-First CSS-Framework für schnelles, sauberes und responsives UI-Design.
- Zustand: Leichtgewichtiges State Management für die Synchronisierung des App- und Formularzustands in Echtzeit.
- React Hook Form: Vereinfachtes Formular-Handling mit Performance-Optimierung.
- Zod: Schema-Validierung zur Gewährleistung der Datenintegrität auf Client- und Serverseite.
- Prisma: ORM (Object Relational Mapper) für effiziente und sichere Datenbankzugriffe.
- PostgreSQL: Zuverlässige und skalierbare relationale Datenbank für die Speicherung von Nutzer:innen-Daten und Links.
- Azure Blob Storage: Speicherung der Profilbilder.
- Storybook: Zum Dokumentieren und Testen der UI-Komponenten.
Hauptfunktionen
1. Benutzerauthentifizierung
Die App bietet ein sicheres Login- und Registrierungssystem mit NextAuth. Die Zugangsdaten werden sowohl auf Client- als auch auf Serverseite validiert, um Sicherheit und Zuverlässigkeit zu gewährleisten.
2. Link-Management
Nutzer:innen können ihre Social-Media-Links hinzufügen, bearbeiten, löschen und neu anordnen. Eine Echtzeit-Vorschau zeigt alle Änderungen sofort an.
3. Drag-and-Drop-Neuanordnung
Die App unterstützt Drag-and-Drop-Funktionalität zur Neuanordnung der Links. Änderungen werden sofort im App-State übernommen und beim Speichern in die Datenbank übertragen.
4. Profilanpassung
Nutzer:innen können Profilinformationen wie Vorname, Nachname, E-Mail-Adresse und Profilbild aktualisieren. Für den Upload der Profilbilder kommt Azure Blob Storage zum Einsatz.
5. Responsives Design
Die App ist vollständig responsiv und passt sich nahtlos an mobile Geräte, Tablets und Desktop-Bildschirme an. Tailwind CSS sorgt für ein konsistentes und sauberes Design auf allen Geräten.
6. Formular-Handling und Validierung
Alle Formulare in der App werden mit React Hook Form verwaltet, während Zod eine robuste Schema-Validierung liefert. So bleibt die Datenqualität stets hoch.
7. Öffentliches Profil teilen
Nutzer:innen können einen öffentlich teilbaren Link zu ihrem Profil erstellen. Mit einem Klick auf die Schaltfläche „Link teilen“ wird dieser Link direkt in die Zwischenablage kopiert.
Herausforderungen und Lösungen
1. Echtzeit-Updates
Die Synchronisierung der Vorschau mit dem Formularzustand war eine Priorität. Durch Zustand-Management mit Zustand blieb die App leichtgewichtig und reaktionsschnell.
2. Profilbild-Management
Der direkte Upload von Bildern in Azure Blob Storage erforderte eine sorgfältige Konfiguration hinsichtlich Dateigrößenlimits und Benutzerfeedback. Durch die Integration mit Prisma wurden die Bild-URLs sicher in der Datenbank gespeichert.
3. Drag-and-Drop-Funktionalität
Die Umsetzung von Drag-and-Drop inklusive Datenbanksynchronisation war anspruchsvoll. Dank Zustand und Prisma konnte eine nahtlose Lösung realisiert werden.
Erkenntnisse
Dieses Projekt hat mein Verständnis für die Integration von Frontend- und Backend-Technologien in einer Full-Stack-Anwendung deutlich vertieft. Meine wichtigsten Erkenntnisse:
- Die Bedeutung von Schema-Validierung mit Tools wie Zod zur Vermeidung fehlerhafter Dateneingaben.
- Die Vorteile von Next.js beim Bau von Full-Stack-Anwendungen mit Server Actions und effizientem Routing.
- Die Leistungsfähigkeit von Tailwind CSS für schnelle, responsive UI-Entwicklung.
- Der Mehrwert von Zustand für unkompliziertes State Management ohne übermäßige Komplexität.
Projekt entdecken
Hier findest du den Quellcode und die Live-Demo:
- GitHub Repository: GitHub Link
- Live-Demo: Live-Demo Link
- Video-Demo: YouTube Link
Fazit
Die Link Sharing App ist mehr als nur ein Portfolio-Projekt – sie ist eine produktionsreife Anwendung, die moderne Webentwicklung in Perfektion zeigt. Sie vereint Leistung, Skalierbarkeit und großartige Nutzererfahrung in einem Projekt. Ich bin stolz auf das Ergebnis und freue mich darauf, in Zukunft noch robustere Anwendungen zu entwickeln.
Danke fürs Lesen! Ich freue mich auf euer Feedback und den Austausch!