Link: unsere Webseite
Als Thematik des finalen Teamprojekts unserer einjährigen DCI-Umschulung zu Fullstack Developern (MERN-Stack) haben wir uns dazu entschieden, die bestehende Internetpräsenz des Tierschutzvereins Dachau e.V, https://www.tierschutz.dachau.net/, zu überarbeiten.
Nach Einrichtung der Arbeitsumgebung erfolgte die Planung und Erstellung eines Gantt Chart Projektplanes, welcher die verschiedenen Phasen des Projektes abbildete, darunter vor allem die folgenden wesentlichen Blöcke:
- Scope & Goal Setting
- Set up Workflow
- FRONTEND: Layout & Mockup
- FRONTEND: Component Planning
- FRONTEND: Build
- FRONTEND: Testing
- BACKEND: Endpoint Planning
- BACKEND: Build
- BACKEND: Testing
- BACKEND & FRONTEND: Combining
- Presentation
Hier ein Auszug aus dem Gantt Projektplan:
Die Erstellung der Designs erfolgte in Figma. Der Fokus lag zunächst auf dem bekannte "Mobile-first"-Ansatz. Basierend darauf wurden die Designs für die Ansichten von Pads, Laptop und Desktop via der in Tailwind CSS verfügbaren Mediaqueries erweitern.
Alle Teammitglieder arbeiteten zunächst an der Erstellung des Frontend. Die Aufteilung der Tasks erfolgte via des in Github integrierten Projektboards. Nach der Erstellung der "Mobile-first"-Ansicht fing die Hälfte des Teams mit der Erstellung des Backend an, während die andere Hälfte via Tailwind CSS Mediaqueries die Desktop Ansicht erstellte. Hier die beispielhaften Ansichten der Homepage auf mobile, tablet und desktop:
Im Backend galt es zunächste, sich für eine Technologie zu entscheiden. Schnell stand fest, dass wir eine CMS-Lösung der von MongoDB vorziehen, um die einfachere Bedienung und Einstellung von Inhalten durch das Personal des Tierheims zu ermöglichen. Die Wahl fiel schließlich auf das CMS von kontent.ai welches alle für das Projekt nötigen Umfänge in der kostenlosen Version zur Verfügung stellt. Die für Änderungen relevantesten Inhalte wurden definiert und jeweils in einer Collection angelegt. Daraus ergaben sich zunächst die folgenden Content Model, welche bei kontent.ai als Vordefinierter Datensatz fungieren:
- Termine
- Pressestimmen
- Sonstige Medienberichte
- DATZ
- Tiere
- React
- JavaScript
- Node.js
- Tailwind CSS
- CMS kontent.ai