Ein Web-Aufbau Projekt von Anna-Lisa Merkel, Salma Alkhaiyal, Sarah Schelle, Luca Voges, Molham Al-Khodari
Link zum Frontend Server - Repository
Link zum Backend Server - Repository
Link zur Präsentation (twanimal-abschlusspraesentation.pdf)
Zugangsdaten für Testaccount auf dem Live-Server:
E-Mail Adresse: [email protected]
Passwort: hannelore123.
Wir möchten einen Client erstellen, welches sich an das Netzwerk Twitter orientiert, wo Haustiere die Nutzer sind.
Was wir damit meinen ist, dass Haustierbesitzer im Namen ihrer Haustiere Accounts erstellen können und Beiträge teilen können. Man hat die Möglichkeit Bilder, Texte und Videos hochzuladen und andere können diese Beiträge kommentieren, liken, teilen und im schlimmsten Falle melden. Accounts können auf der Plattform anderen Accounts folgen und mit ihnen interagieren.
Eine Besonderheit an der Plattform ist, dass die am häufigsten bewerteten Haustiere auf einer Unterseite präsentiert werden, kategorisiert nach der Art des Hautieres und eventuell Rasse. Zusätzlich können Haustierbesitzer unter ihrem Profil angeben, dass die Haustiere einen Spielpartner oder Gassipartner benötigen. Somit haben andere Accounts die Möglichkeit eine Anfrage zum gemeinsamen Spielen oder Gassigehen zu erstellen.
Wir haben ein kleines soziales Netzwerk für Haustiere erstellt, auf dem sich Haustierbesitzer registrieren und anmelden können. Grundlegende Funktionen, wie das Teilen, Erstellen, Bewerten und Kommentieren von Beiträgen ist komplett integriert und funktioniert. Dazu kann man sein eigenes Profil frei gestalten und anpassen. Man kann anderen Profilen folgen, deren Beiträge lesen und Teilen. Auf jeder Profilseite gibt es rechts Vorschläge für andere Profile, denen man noch nicht folgt.
Die Funktion des Gassigehens und am häufigsten bewertete Haustiere wurde nicht in die finale Fassung übernommen, da diese Funktionen den Rahmen gesprengt hätten.
- Anna-Lisa Merkel - Profil
- Salma Alkhaiyal - Profil
- Sarah Schelle - Profil
- Luca Voges - Profil
- Molham Al-Khodari - Profil
Wie wird gearbeitet?
- Wöchentliche Meetings
- Vorstellung der erledigten Aufgaben
- Verteilung von neuen Aufgaben
- Besprechung von Ideen und Vorschlägen
- “Team Programming”
- Weitere Meetings in kleineren Gruppen
- Pair Programming
- Branch erstellen
- Branch pushen & Pull Request
- Branch mergen & löschen
| Name | Aufgabe |
|---|---|
| Alle | Idee und Mockup ausdenken und erstellen Clean-Up, Formattierung und gleichmäßige Struktur Backend mit Frontend verknüpfen (Abfragen) |
| Luca Voges | Initialisierung des Frontend-Servers Router, Backend & Sessions Responsive |
| Molham Al-Khodari | Funktionalität Login & Registrierung Such-Seite |
| Sarah Schelle | Beiträge Über Uns - Seite |
| Salma Alkhaiyal | Profilseite Clean-Up Post-Content vorbereitet |
| Anna-Lisa Merkel | Startseite Error-Page Footer |
| Molham Al-Khodari Anna-Lisa Merkel |
Login und Registrierung |
| Salma Alkhaiyal Sarah Schelle |
Impressum & Datenschutz |
| Sarah Schelle Anna-Lisa Merkel |
Beitrags-Seite |
| Luca Voges Salma Alkhaiyal |
Profilseite anpassen |
Ein Zeitaufwand kann nicht angegeben werden, da zur Bearbeitung kein Timer gestellt wurde. Durch wöchentliche Meetings mit mindestens 2h Gesprächszeit, kleineren Gruppen und Einzelaufgaben kommen wir sicherlich auf über 60h Aufwand pro Person.
- Git
- GitHub
- Discord
- Visual Studio Code
- Figma
- Postman
- fontawesome
Alle Bilder entstammen aus unsplash.com und eigenen Aufnahmen
HTTPS-Variante:
git clone https://github.com/fh-erfurt/webaufbau-twanimal
SSH-Variante:
git clone [email protected]:fh-erfurt/webaufbau-twanimal.git
git init
git remote add origin https://github.com/fh-erfurt/webaufbau-twanimal
git pull origin main
NPM-Variante: npm install
YARN-Variante: yarn install
Öffnen Sie die config.js - Datei, um den Backend-Server einzustellen mit Hostname und Port.
Sollten Sie ein eigenes Backend benutzen abseits https://twanimal.vogeslu.de, so lesen Sie sich bitte die Dokumentation vom Backend-Server durch.
Um den Server zu starten, geben Sie bitte folgenden Befehl ein
NPM-Variante: npm start
YARN-Variante: yarn start
Der Server wird erreichbar sein über den in der .env - Datei eingestellten Port.
Um den Server zu verpacken, geben Sie bitte folgenden Befehl ein
NPM-Variante: npm build
Das fertige Projekt wird dann unter dem neu erstellten Ordner build/ zu sehen sein mit einer aufrufbaren index.html
Komplexere Stellen im Quellcode wurden dokumentiert. Andere Stellen wurden ausgelassen, da in der Regel der Quellcode bereits genug selbst dokumentiert.