Travel
app
Erfasse deine Reisen und teile
sie mit deinen Liebsten.
Eine mobile App (PWA), die als privatisierte Plattform oder als Archiv genutzt werden kann. In einer Galerie können Sie Ihre Beiträge speichern, mit Bildern, Texten und Orten vervollständigen und diese später mit Ihrer Familie und Freunden teilen.
Diese Posts können beliebig erweitert und bearbeitet werden. Die App läuft offline auf Ihrem Gerät und ermöglicht es Ihnen, Geopunkte auf einer Karte mit GPS einzustellen.
Tools & Technologie: MEVN vs. MEAN-Stack, VSCode, Figma
Art der Arbeit: UI, UX und Web Projekt.
Ziel: Erste App mit Back- und Frontend. Experimentieren mit Vue.js/Angular. Arbeiten mit Komponenten, arbeiten mit einer Datenbank und Datenbankabfragen.
Technische Entscheidungen
Während einem ersten Mentorat mit Nick Niles wurde das Konzept für die Web App erstellt. Ich informierte mich über technische Voraussetzungen und entschied mich für die Technologien eines MEVN-Stacks. (MongoDB, Express, Vue.js und Node.js) Dabei erstellte ich ein erstes Sitemap und Low-Fidelity-Wireframes. Dann wurde ein Datenbank und ein Backend für die App aufgesetzt und mit Komponenten in Vue.js gearbeitet.
Während einem zweiten Mentorat mit Benji Oser entschieden wir uns das Backend der App zu erhalten und das Frontend auf Angular.js zu migirieren. Anhand eines kurzen Design Sprints wurde das Konzept überarbeitet und anschliessen in einem UX-Testing validiert. Ein Teil des Projekts konnte somit sauber in Angular umgesetzt werden.
ERste Wireframes
Homescreen ist eine Galerie, einzelne Beiträge werden angezeigt. Mit einem Plus-Button können neue Beiträge erstellt werden. Dazu muss ein Overlay-Formular ausgefüllt werden. Beim Klick wird der Inhalt des Beitrags angezeigt. Der Beitrag kann bearbeitet oder gelöscht werden. Durch Klicken auf das Hamburger-Menü wird zwischen Karte und Galerie umgeschaltet. In einem nächsten Schritt kann der Benutzer verschiedene Markierungen auf der Karte hinzufügen, um Orte nach ihrem tatsächlichen Standort zu speichern oder einen Ort mit einem bestimmten Beitrag zu verknüpfen. Innerhalb des Beitrags können weitere individuelle Inhalte hinzugefügt werden.
Sitemap & Scope
Die Umsetzung des Konzepts im vorgegebenen Zeitrahmen ist unrealistisch. Aus zeitlichen Gründen wurde der Scope weiter eingegrenzt. Dabei konzentrierten wir uns auf die Erstellung eines Posts und die Galerie, in der die einzelnen Posts betrachtet werden können.
Vue.js Frontend
Die erste Version der App wurde mit einem Vue.js Frontend umgesetzt. Die Grundstruktur und die CRUD-Commands im Backend und Features funktionieren zwar, das visuelle Resultat war nicht überzeugend.
Angular Frontend
Anstelle am bereits existierenden Frontend mit Vue weiterzuarbeiten habe ich mich entschieden Angular auszuprobieren. Durch die Begleitung von Benji Oser, ein wahrer Angular-Guru, war es möglich, die Komponenten wie gewünscht umzusetzen und den Code zu reviewen.
Im Video ist eine kurze Demo des Endprodukts zu sehen. Weiter unten sieht man die überarbeiteten Entwürfe in Figma, die als Referenz genutzt wurden, sowie weitere Ideen für künftige Features.
Reflexion
Durch das Studium bei Digital Ideation bin ich immer wieder mit der Webentwicklung in Kontakt gekommen. Die Faszination zu diesem Gebiet hat mich immer wieder zu selbstgewählten Mentoraten geführt. Ich hoffe mich in diesem Bereich noch weiterentwickeln zu können, den nichts ist zufriedenstellender als die eigenen Designs auch wirklich umsetzen zu können. Diese Arbeit war besonders fördernd, da sie mir erlaubt hat, mich mit zwei gängigen Frameworks auseinanderzusetzen und diese direkt miteinander vergleichen zu können.
Das ganze Projekt ist auf Github zu finden.