Fallstudie

WebXRFlow

Eine frühe Browser-CMS für WebXR-Szenen. Konten und Projektdaten sind vorhanden. Der 3D-Editor und immersive Sitzungen sind in diesem Repository nicht enthalten.

Role
Solo developer
Period
2025–2026
Project type
WebXR-CMS-Prototyp
  • Vue 3
  • TypeScript
  • Pinia
  • Firebase
  • GitHub Pages
Marketing-Startseite der live WebXRFlow-Demo. Navigation: WebXR CMS, Gallery, Sign In und Get Started.
Marketing-Startseite. Der Produkttitel in der Oberfläche ist WebXR CMS. Die Überschrift beschreibt das Produktziel. Drag-and-drop-Bearbeitung ist in diesem Repository nicht implementiert.

Overview

Ein Projekt-Dashboard vor einem künftigen Editor.

Geplant ist ein Bereich nach Anmeldung, in dem Nutzer Projekte erstellen, 3D-Szenen bearbeiten, als JSON speichern und im Browser, in AR oder VR öffnen. Läuft derzeit der Konten- und Projekt-Teil: Anmeldung per E-Mail und Google, Dashboard zum Erstellen, Auflisten und Löschen von Projektdokumenten sowie Routen für Editor, Galerie und Viewer.

Die Marketing-Startseite beschreibt die Produktrichtung für AR- und VR-Szenen im Web. Planungsnotizen skizzieren ein MVP für einen Entwickler. Die laufende Version ist eine frühe Browser-CMS mit Authentifizierung, Projektverwaltung und Firebase — keine live Creator-Plattform und kein fertiger visueller Editor.

My role

Architektur, Vue-App und Firebase.

Ich habe die Anwendungsstruktur definiert, die Bildschirme gebaut und Firebase Authentication sowie Firestore angebunden. Jeder Commit auf main stammt von mir. Die Commits vom Oktober 2026 veröffentlichen die Demo auf GitHub Pages.

Kernimplementierung

Anmelden, dann ein Projektdokument.

  1. 01

    Registrierung oder Anmeldung per E-Mail und Passwort oder Google-Popup. Beim ersten Login wird ein Profil unter users/{uid} angelegt.

  2. 02

    Das Dashboard listet die Projekte dieser Person, erstellt eines über einen Dialog und löscht es nach Bestätigung.

  3. 03

    Ein neues Dokument speichert Titel, Beschreibung, isPublished: false und sceneData mit Version 1.0 und leerem objects-Array.

  4. 04

    Von dort öffnen sich Editor-, Galerie- und Viewer-Routen. Sie laden das Dokument nicht und rendern keine Szene.

Anmeldebildschirm mit E-Mail- und Passwortfeldern, Sign in und Continue with Google.
Anmeldung. E-Mail, Passwort und das Google-Popup nutzen Firebase Authentication.

Architecture

Vue und Pinia vor Firebase.

Vue-App

Router, Pinia und die Bildschirme. Route Guards lesen den Auth-Store und rufen Firebase nicht direkt auf.

Auth-Store

Pinia kommuniziert mit Firebase Authentication und schreibt das Profil users/{uid} in Firestore.

Projekte-Store

Pinia nutzt die Collection projects. Das Dashboard ist der Bildschirm, der sie verwendet.

Editor, Galerie und Viewer halten lokalen Zustand. Upload-Helfer liegen im Repo, kein Bildschirm ruft sie auf. Es gibt keinen Anwendungsserver.

Entwicklungsherausforderungen

Unterpfad-Deploy, Projektabfrage und Auth-Guard.

  1. 01

    Die Demo läuft unter /webxrflow/ auf einer bestehenden Site, lokale Entwicklung unter /. Die Vite-Basis ist /webxrflow/ nur wenn GITHUB_PAGES gesetzt ist; der Router nutzt diese Basis. GitHub Pages schreibt unbekannte Pfade nicht um, daher kopiert der Workflow index.html nach 404.html. Deep Links liefern HTTP 404 mit App-Shell, Vue startet trotzdem.

  2. 02

    Die Projektliste filtert nach userId und sortiert nach updatedAt im Browser — ohne zusammengesetzten Firestore-Index. Die Abfrage veröffentlichter Projekte nutzt weiterhin orderBy, kein Bildschirm ruft sie auf.

  3. 03

    Firebase stellt den Nutzer asynchron wieder her. Der Route Guard wertet einen leeren Nutzer als abgemeldet und wartet nicht — ein Dashboard-Refresh kann auf der Login-Seite landen. Diese Lücke ist offen.

Project status

Funktionierende Datensätze, Prototyp-Bildschirme.

In diesem Repository

  • Registrierung per E-Mail und Passwort, Google-Anmeldung und Abmeldung.
  • Projektdokumente erstellen, auflisten und löschen.
  • Leeres Szenen-JSON-Feld in jedem neuen Projekt.
  • Client-Routen und GitHub-Pages-Deploy.
  • WebXR-Unterstützungsprüfung im Viewer.

Für eine spätere Phase

  • 3D-Renderer, Szeneneditor und Objekttransformationen.
  • AR- und VR-Sitzungen.
  • Veröffentlichung und Galerie aus Firestore-Daten.
  • Asset-Upload aus der Oberfläche.

Links

Interesse an Zusammenarbeit? Kontakt aufnehmen.

Zurück zu Arbeit