Das StartUp Unternehmen „Ikonity“ mit Sitz in Wieselburg, ist ein Onlineshop für nachhaltige und fair erzeugte Kleidung. Da einer der Firmengründer mit mir befreundet ist, habe ich dieses Unternehmen schon länger verfolgt, und immer wieder den Webshop betrachtet. Ein lustiger Zufall beim Umtausch eines geschenkten T-Shirts brachte uns dazu, mehr über den Webshop und vieles andere zu Plaudern – bis ich schließlich das restliche Team kennenlernte und meine Meinung zu Design und UX abgab. Als ich auf der Suche nach einem möglichen Semesterprojekt im Sommersemester 2021 war, ergab sich die Chance beim Redesign und der Neuauflage des Webshops zu helfen.

Der Plan

Wir planten welche Aufgaben ich übernehmen könnte, sodass ich etwas lerne und auch die junge Firma unterstützen kann. Im Frühjahr 2021 wurde der Shop mit Shopify als Backend und einem Shopify Theme als Frontend umgesetzt. Da die Anforderungen an den Webshop ständig steigen war der Wunsch nach einem Custom Framework im Frontend da. Aus diesem Grund viel die Wahl auf VueStorefront welches eine gute Anbindung zu Shopify versprach. Zusätzlich wurde die Lieferkettendarstellung mit einem zweitem Backend, nämlich Squidex gelöst. Bei jedem Produkt sind die einzelnen Schritte in der Produktion nun darstellbar und für die Konsumenten klar ersichtlich. Diese Darstellung ist ein besonderes Feature welches Ikonity im Vergleich zur Konkurrenz bietet – einer der USP sozusagen.

Geplanter Stack

Frontend: VueStorefront inkl. NuxtJS
Backend: Shopify
Backend Nr.2: Squidex oder Storyblok

Hands On!

Nach vielen Stunden Brainstorming, Recherche, Design begann der Prozess bei der Umsetzung des Shops. Die Umsetzung der Lieferkettendarstellung (oder Supply-Chain) erfolgte zu Beginn, da diese auch in der bestehenden Website implementiert wurde.
Beispiel: https://ikonity.at/pages/krxln

Die VueStorefront bietet einiges an Dokumentation und auch an Tutorials. Ein richtiger Durchbruch war, als die Kommunikation zu Shopify funktionierte und auch das Einkaufen möglich war. Dafür stellten sich andere Dinge wiederum als schwierig dar. Zum Beispiel die Navigation. Eine etwas aufwendigere Navigation wäre schon machbar gewesen, doch nur statisch und ohne Anbindung ans Backend. Andere Dinge wie auch die Suchfunktion gestalteten sich ebenfalls als mühsam umzusetzen.

Abbruch VueStorefront

Die oben genannten Erschwernisse wären bestimmt noch zu Verkraften gewesen, und für manche Tasks hätte sich abseits von VueStorefront noch eine Lösung finden lassen. Jetzt kommt das große aber. Im Sommer wurde von Shopify der Online Store 2.0 vorgestellt, der viele out-of-the-box Lösungen bietet die sonnst nur langwierig umsetzbar gewesen wären. Ebenfalls kam hinzu, dass einer der neuen Modedesigner ein Plugin zur individuellen Bestickung der Kleidung benötigte welches ebenfalls sehr mühsam umzusetzen gewesen wäre.

meine Learnings

• erstes Projekt mit Nuxt.js
• erstes eCommerce Projekt
• einblick in Shopify
• einblick GraphQl
• übersicht Squidex
• übersicht VueStorefront

Fazit

Technologische Möglichkeiten ändern sich laufend, und sehr kurzfristig. Hier am Laufenden zu bleiben und zu betrachten welche Lösung für das (realworld) Produkt, die Entwickler:innen und vor allem für die Konsument:innen am besten ist, macht einerseits Freude andererseits Kopfzerbrechen. Eine 100% optimale Lösung kann es wohl nie geben, doch durch Recherche sowie „Trial and Error“ lassen sich auch zufriedenstellende Lösungen finden.

App Anniv

Als für mich die Entwicklung beim Webshop endete, nahm ich mir vor, an einer eigenen Idee für eine App weiterzumachen. Schon seit langem wollte ich eine App programmieren, die in der Basisversion ein simpler Geburtstagskalender ist, und modular erweitert werden kann. Die erste Überlegung war wie ich den Datensatz so sortieren kann, dass es wie auf einem typischen Geburtstagskalender (oder wie auf Facebook) aussieht. Die von mir angewendete Lösung legt einen eigenen Eintrag in der Datenbank an, welcher das Geburtsjahr mit dem Jahr 2000 überschreibt. So kann ich im Frontend den Datensatz sehr einfach sortieren.

Als das erledigt war musste ich mich für ein Framework entscheiden. Da die verfügbare Zeit schon dem Ende zuging, habe ich mich für VueJS entschieden welches ich bereits mehrmals verwendet haben. Als Backend sprang mir Firebase ins Auge, da ich nicht sehr viele Funktionen benötige und ich Firebase schon immer einmal ausprobieren wollte.

Bei der Verbindung von Frontend und Backend half mir eines der vielen „Vue Firebase Crud“ Tutorials die im Netzt angeboten werden.  

Meine Learnings

• Firebase erstmals verwendet
• Crud App
• Konzeption / Design / Programmierung

Future Todos

• App mit Ionic oder React Native neu Programmieren
• Features wie Push Notifications, Favoriten, automatische Nachrichten