SW Frontend

Lesen Sie es FE

---

Inhaltsverzeichnis

• Um
• Bildschirmvideo von der Website und Funktionen
• Laufwerksverbindung
• Projektaufbau
• Mitwirkende

Um

• Ein Projekt, das den Frontend-Teil von reddit nachahmt.

Bildschirmvideo von der Website und Funktionen:

Benutzerauthentifizierung

• Melden Sie sich mit Google an
• Melden Sie sich über Facebook an
• Melden Sie sich an
• Login
• Passwort vergessen
• Benutzernamen vergessen
• Kennwort ändern

SW1.mp4

SW1.mp4

---

?‍♂️ Benutzerprofil

• Profilübersicht (Beiträge, Kommentare, Upvotes, Downvotes usw.)
• Ihre Beiträge
• Ihr Kommentar
• Ihre Upvotes
• Ihre Downvotes
• Ihre gespeicherten Beiträge und Kommentare
• Ihre versteckten Beiträge und Kommentare
• Ihre Geschichte
• Ihre Follower

SW4.mp4

SW4.mp4

---

Gemeinschaft (Subreddit)

• Community-Übersicht (Beiträge, Kommentare, Upvotes, Downvotes usw.)
• Community-Beiträge
• Community-Kommentar
• Community-Kategorien
• Top-Communities

SW7.mp4

SW7.mp4

---

? Post

• Erstellen Sie einen Rich-Text-Beitrag
• Erstellen Sie einen Bild- und Videobeitrag
• Linkbeitrag erstellen
• Fügen Sie dem Beitrag Flair hinzu
• Spoiler zum Beitrag hinzufügen
• NSFW zum Beitrag hinzufügen
• Upvote- und Downvote-Beitrag
• Beitrag speichern
• Beitrag ausblenden
• Beitrag teilen
• Eigenen Beitrag bearbeiten
• Eigenen Beitrag löschen
• Eigenen Beitrag sperren

SW3.mp4

SW3.mp4

---

? Suchen

• Suche per Post
• Suche nach Kommentar
• Suche nach Community
• Suche nach Personen

SW9.mp4

SW9.mp4

---

?️ Kommentar

• Erstellen Sie einen Rich-Text-Kommentar
• Verschachtelte Kommentare bis zu jeder Ebene
• Upvote- und Downvote-Kommentar
• Auf Kommentar antworten
• Eigenen Kommentar bearbeiten
• Eigenen Kommentar löschen
• Eigenen Kommentar sperren

SW2.mp4

SW2.mp4

---

? Benachrichtigungen

• Push-Benachrichtigungen
• Alle Benachrichtigungen

---

✉️ Nachrichten

• Senden Sie eine private Nachricht
• Alle Nachrichten
• Ungelesene Nachrichten
• Gesendete Nachrichten
• Antworten posten
• Erwähnungen von Benutzernamen
• Nachricht löschen
• Spam-Nachricht
• Auf Nachricht antworten

SW6.mp4

SW6.mp4

---

? Moderator

• Warteschlangen
  • Spam (nur Beiträge, nur Kommentare, Beiträge und Kommentare)
  • Bearbeitet (nur Beiträge, nur Kommentare, Beiträge und Kommentare)
  • Nicht moderiert (nur Beiträge, nur Kommentare, Beiträge und Kommentare)
• Benutzerverwaltung
  • Gesperrte Benutzer
  • Stummgeschalteter Benutzer
  • Zugelassener Benutzer
  • Moderatoren
• Flairs und Emojis
  • Fügen Sie neues Flair hinzu
  • Flair bearbeiten
  • Flair löschen
  • Flairs neu anordnen
• Regeln und Vorschriften
  • Neue Regel hinzufügen
  • Regel bearbeiten
  • Regel löschen
  • Regeln neu anordnen
• Community-Einstellungen
  • Community-Namen bearbeiten
  • Bearbeiten Sie die Community-Beschreibung
  • Community-Thema bearbeiten
  • Community-Sprache bearbeiten
  • Community-Typ bearbeiten (Öffentlich, Privat, Eingeschränkt)
  • Community-Region bearbeiten
• Einstellungen für Beiträge und Kommentare
  • Community-Spoiler-Tag aktivieren/deaktivieren
  • Bearbeiten Sie die vorgeschlagene Sortierung für Beiträge
  • Bild in Beiträgen aktivieren/deaktivieren
• Community-Verkehr
  • Wochentag
  • Monat
  • Seitenaufrufe
  • Mitglieder sind beigetreten
  • Mitglieder sind gegangen

SW8.mp4

SW8.mp4

---

Benutzereinstellungen

• Kontoeinstellung
• Profileinstellung
• E-Mail-Einstellung
• Sicherheits- und Datenschutzeinstellung
• Feed-Einstellung

SW5.mp4

SW5.mp4

---

## Hauptbefehle zum Ausführen des Projekts: ### Projekteinrichtung und Installation von Paketen

 npm install

Kompiliert und Hot-Reloads für die Entwicklung

 npm run serve

Führt das Projekt standardmäßig auf Port:8081 aus

Kompiliert und minimiert für die Produktion

 npm run build

Das Projekt befindet sich nach der Erstellung im Ordner /dist im selben Verzeichnis

Führen Sie Ihre Unit-Tests durch

 npm run test

Dieser Befehl führt alle Unit-Tests aus.

Erstellung eines Abdeckungsberichts

 npm run coverage

Dieser Befehl generiert einen Abdeckungsbericht index.html mit Details zu allen Komponenten. Der generierte Abdeckungsbericht befindet sich im Projektverzeichnis unter /coverage

Führen Sie einen Scheinserver aus

 npm run json

Läuft auf Port:3000

Erstellen Sie einen funktionalen Dokumentationsbericht

 vuese gen

Zum Generieren des Berichts im Ordner /website im Projektverzeichnis

Generieren Sie einen funktionalen Dokumentationsbericht für das Geschäft

 npm run jsdoc

Zum Generieren des Berichts im Ordner /out im Projektverzeichnis

Lints und Fixes von Dateien

 npm run lint

Schönere Dateien und behebt das Problem

 npm run prettier

Mitwirkende

Asmaa Adel

Menatalh Hossamalden

Norhan Reda

HodaGamal

abdalhamedemad

Karim Saqer