Aufbau der Applikation

Grundlagen

Bei dem Trainer handelt es sich um eine Single-Page-Application, welche mit React erzeugt wurde.

Als Programmiersprache wurde TypeScript verwendet.

Für das Styling der Applikation wurde TailwindCSS und für Code-Quality ESLint benutzt.

Als Datenbank wird eine im Browser ausgeführte SQLite Datenbank verwendet. Die Datenbank wird in dieser Form unter SQL.js als eigenständige Bibliothek auf npm angeboten. Die Dateien der Datenbank werden dabei als Webassembly Code von der Applikation auf der TaskPage-Komponente eingebunden und ausgeführt.

Der Inhalt der Datenbank wird nach des Auswahl eines Schemas asynchron in die ausgeführte Datenbank hineingeladen. Die relevanten SQLite-Datenbank-Files (.db-Dateien) sind unter /public/db zu finden.

Ordnerstruktur

Die Ordnerstruktur wurde grob NextJS nachempfunden.

Es gibt einen Components-Ordner, in welchem alle Komponenten abgelegt wurden.

Diese Komponenten unterteilen sich in die konkreten Seiten des Trainers (Pages-Ordner) visuelle Elemente (UI-Ordner), sowie den Router der die einzelnen Routen des Trainers verwaltet.

Wichtig ist außerdem die Tasks.ts-Datei, da diese alle Aufgaben des Trainers enthält. Wenn sie eigene Aufgaben hinzufügen möchten, finden Sie hierzu genauere Informationen unter Struktur der Aufgaben.