Sellify

E-Commerce · 2023

PHP
Symfony
Docker
Tailwind CSS
Vue
JavaScript
Progressive Web App
Gitlab CI/CD
Deployer
Single Page Application
Screenshot Startseite

Anforderungen

Im Rahmen des schulischen Teils meiner Ausbildung habe ich dieses spannende Projekt umgesetzt. Zielformulierung war die Entwicklung einer E-Commerce-Plattform, die das Anlegen und Verwalten eines Online-Shops ermöglicht. Der Fokus lag hier auf einer möglichst hohen Anpassbarkeit des Webshops durch die Administrationsoberfläche sowie einer intuitiven und benutzerfreundlichen Navigierbarkeit.

Funktionen

Shop

  • Kategorieseiten
  • Produktdetailseiten
  • Warenkorb
  • Kontakt-Formular
  • Checkout-Prozess
  • Bezahlung via. Stripe

Administration

  • Dashboard
  • Bestellliste
  • Nutzerverwaltung
  • Seitenverwaltung
  • Produktverwaltung
  • Medienbibliothek
  • Filter-Funktionen
  • Listen-Pagination
  • Dienstleisteradministration
  • Kontaktanfragenverwaltung
  • API für Produkte, Bestellungen und Dienstleister

UI/UX

  • Full responsive Shop
  • Dark-/Light-Mode
  • Progressive Web App
Produktverwaltung
Nutzerverwaltung
Seitenverwaltung
Medienverwaltung
API-Dokumentation

130h

Umsetzungszeit

8/10

Komplexität

9500+

Zeilen Code

Herausforderungen

Neben dem hohen Funktionsumfang dieses Projekts lagen die Herausforderungen in folgenden Punkten:

Stripe-Anbindung:

Die Anbindung eines Sandbox-Accounts des Zahlungsanbieters Stripe war für mich eine neue Herausforderung. Wie gestalte ich den Checkout-Prozess? Wie wird der Bezahlstatus in der Projekt-Datenbank persistiert? Wie geht man mit abgebrochenen Bezahlprozessen um? Diese und viele weitere Fragen entstanden vor und im Laufe der Entwicklung.
Dank der hervorragenden API-Dokumentation seitens Stripe und der konsistenten Code-Infrastruktur innerhalb meines Projekts, konnte ich diese Aufgabe in kurzer Zeit meistern.

Deployment:

Eine weitere Herausforderung war die Umsetzung einer leicht bedienbaren Deployment-Infrastruktur. Da die Bereitstellung der Produktiv-Anwendung auf einem Webserver eines externen Hosting-Anbieters erfolgen sollte, musste es möglich sein, Updates und Fixes ohne großen manuellen Aufwand deployen zu können.
Als langjähriger Nutzer der DevOps-Plattform "Gitlab" bot sich zur Bewerkstelligung dieser Herausforderung die dort zur Verfügung stehende CI/CD Pipeline-Infrastruktur an. Eine Pipeline besteht aus mehreren Schritten, die der Code der Anwendung automatisiert durchläuft.

Folgende Pipeline wurde für dieses Projekt implementiert:

1

Environment-Setup

Einrichtung des Docker-Containers. Download aller verwendeten Dependencies.

2

Webpack-Build

Build-Prozess aller JS-Komponenten.

3

Deployment

Upload der Assets und des neuen Codes auf den Produktiv-Server.

Die jeweiligen Schritte werden innerhalb eines selbst-konfigurierten Docker-Containers ausgeführt, der exakt auf die Bedürfnisse der Anwendung zugeschnitten ist. Nach einmaliger Konfiguration dieser Pipeline kann nun jede Anpassung der Anwendung automatisiert in die Produktivumgebung deployed werden.

Technische Umsetzung

PHP
65%
Twig
16%
CSS
10%
JavaScript
6%
Sonstige
3%

Ergebnis

Die Umsetzung dieses Projekts war ein voller Erfolg. Alle gegebenen Anforderungen wurden erfüllt. Besonders das Design, der Funktionsumfang sowie die fein ausgearbeiteten Details wurden in der Bewertung lobend erwähnt. Das gesamte Projekt erhielt in der finalen Bewertung die Note 1.