Social App
Eine responsive Social-Media-Webanwendung mit React. Nutzer können sich anmelden, Beiträge entdecken, Text- und Bildinhalte veröffentlichen, Kommentare schreiben und ihre Profile verwalten. Die Anwendung verwendet eine externe REST API mit Axios und TanStack React Query sowie geschützte Routen, schema-basierte Formularvalidierung, wiederverwendbare UI-Komponenten und responsive Layouts.
Verwendete Technologien
Projektübersicht
Social App ist eine responsive Social-Media-Anwendung, in der Nutzer Konten erstellen, sich anmelden, Beiträge durchsuchen, Text- und Bildupdates veröffentlichen, Kommentare hinzufügen und ihre Profile verwalten können. Öffentliche Seiten sind von geschützten Bereichen wie Feed, Beiträgen, Profil und Einstellungen getrennt. React Context verwaltet Authentifizierung und Benutzerdaten, während geschützte Routen den Zugriff angemeldeter Nutzer steuern. Axios verbindet die Anwendung mit einer externen REST API und TanStack React Query verwaltet Serverdaten und Aktualisierungen. React Hook Form und Zod übernehmen die Validierung, während FormData Bild-Uploads mit Vorschauen und Dateibeschränkungen unterstützt. Wiederverwendbare Komponenten, Modals, Benachrichtigungen und responsive Layouts sorgen für ein konsistentes Erlebnis. Funktionen wie Freunde hinzufügen und Beiträge teilen sind derzeit nur UI-Elemente.
Wichtige Funktionen
Nutzer können Konten erstellen, sich anmelden und geschützte Seiten aufrufen.
Nutzer können einen paginierten Feed durchsuchen und Text- oder Bildbeiträge erstellen.
Nutzer können Kommentare zu Beiträgen anzeigen, hinzufügen und löschen.
Nutzer können ihr Profil anzeigen, ein Profilbild hochladen und ihr Passwort ändern.
Formulare werden mit React Hook Form und Zod validiert und unterstützen Bild-Uploads.
Wiederverwendbare Komponenten sorgen für ein konsistentes Erlebnis auf Desktop- und Mobilgeräten.
Screenshots
Registrierung
Auf der Registrierungsseite können Nutzer ein neues Konto erstellen.
Nutzerbereich
Der Nutzerbereich zeigt Beiträge anderer Nutzer und ermöglicht das Erstellen neuer Beiträge.
Nutzerprofil
Im Nutzerprofil können Nutzer Beiträge erstellen und ihre persönlichen Informationen sehen.
Nutzereinstellungen
In den Nutzereinstellungen können Nutzer Kontoeinstellungen und Präferenzen verwalten.
Kommentar erstellen
Die Kommentarfunktion ermöglicht es Nutzern, Beiträge zu kommentieren.
Löschen
Die Löschfunktion ermöglicht es Nutzern, eigene Beiträge oder Kommentare zu entfernen.
Herausforderungen und Lösungen
- Authentifizierung nach dem Aktualisieren der Seite erhalten
- Asynchrone API-Zustände verwalten
- Formulare und Benutzereingaben validieren
- Bild-Uploads verbessern
- Wiederverwendbare Komponenten für Beiträge und Kommentare entwickeln
- Das Layout responsive halten
- Daten nach Änderungen aktualisieren
- React Context, Browser-Speicher und geschützte Routen stellen Sitzungen wieder her und kontrollieren den Zugriff.
- TanStack React Query, Ladezustände und Toast-Benachrichtigungen geben Feedback zu Anfragen.
- React Hook Form und Zod bündeln Validierungsregeln und Feldfehler.
- Vorschauen, FormData-Uploads sowie Prüfungen von Dateityp und Dateigröße wurden ergänzt.
- Wiederverwendbare Komponenten und aktuelle Benutzerdaten steuern gemeinsame Inhaltsaktionen.
- HeroUI und responsive Tailwind CSS-Layouts unterstützen Mobilgeräte, Tablets und Desktops.
- React Query aktualisiert und lädt betroffene Daten neu, damit sie mit der API synchron bleiben.