Web-App

Atlas Notes

Eine kollaborative Markdown-Wissensdatenbank mit Echtzeit-Bearbeitung und einer Graphansicht verknüpfter Notizen.

Platzhalter-Vorschau der Oberfläche von Atlas Notes

Daten zum Projekt

Rolle
Frontend-Lead
Art
Web-App
Stack
  • React
  • TypeScript
  • CRDT
  • Vite
Dauer
6 Monate
Jahr
2024
Status
Live
Links
Demo

Die Herausforderung

Viele Bearbeitende, ein Dokument

Teams bearbeiteten dieselben Notizen gleichzeitig und verloren bei jedem Konfliktdialog Änderungen.

Der Editor musste außerdem vollständig per Tastatur und mit Screenreader bedienbar bleiben.

So entstand es

Der Entwicklungsprozess

Sechs Phasen vom ersten Gespräch bis zum Release. Der Balken zeigt, wie sich die Zeit verteilt hat.

7 Wochen insgesamt

  1. Analyse

    Bearbeitende beschrieben die Momente, in denen ihre Änderungen kollidierten; jeder davon wurde ein Sync-Testfall.

    3 Tage · Konfliktfälle

  2. Architektur

    Datenmodell, Rendering-Strategie und API-Verträge standen fest, bevor der erste Screen entstand.

    1 Woche · ADR, Datenmodell

  3. Oberfläche

    Ein Komponenteninventar und responsive Layouts, vollständig aus Design-Tokens aufgebaut.

    4 Tage · Token-Set, Komponenteninventar

  4. Umsetzung

    Funktionen gingen in kleinen Schritten hinter Feature-Flags live, mit typisierten Grenzen zwischen Client und Server.

    16 Tage · Feature-Schnitte

  5. Tests

    Unit-, End-to-End- und Barrierefreiheitstests liefen bei jedem Pull Request.

    1 Woche · Testsuite in der CI

  6. Deployment

    Jeder Branch bekam eine Vorschau-Umgebung; der Rollout in die Produktion war ein Klick.

    2 Tage · Vorschau- und Release-Pipeline

  7. Ergebnis

    Konfliktdialoge verschwanden, und die wöchentlich aktiven Bearbeitenden pro Workspace haben sich verdoppelt.

Ansichten

Wirkung

Die Ergebnisse

Platzhalter-Vorschau der Oberfläche von Atlas Notes

Was sich nach dem Launch verändert hat

Konfliktdialoge verschwanden, und die wöchentlich aktiven Bearbeitenden pro Workspace haben sich verdoppelt.

  • React
  • TypeScript
  • CRDT
  • Vite

Kennzahlen

Sync-Latenz
45 ms
Notizen pro Workspace
10.000
WCAG-Stufe
AA

Unter der Haube

Konfliktfrei von Grund auf

Jede Notiz ist ein CRDT-Dokument, das über WebSockets synchronisiert wird; Anwesenheitsdaten laufen über einen eigenen Kanal.

Die Graphansicht wird auf einem Canvas gezeichnet, aber zusätzlich als barrierearme Liste gespiegelt, sodass jeder Link per Tastatur erreichbar ist.

  • React
  • TypeScript
  • CRDT
  • Vite

Nächstes Projekt

So etwas geplant? Lass uns reden.

Lass uns reden

Erzähl mir von deinem Projekt. Ich antworte in der Regel innerhalb von zwei Werktagen.