Projekte

Was ich gemacht habe

2XKO Timing Trainer Screenshot
ÜK-Projekt

2XKO Timing Trainer

Ein interaktives Projekt zum Trainieren von Timing und Reaktionen. Zeigt, dass ich nicht nur statische Webseiten baue, sondern auch mit Benutzerinteraktion und Spiellogik umgehe.

Ziel
Ein interaktives Tool, mit dem man Timing und Reaktionsgeschwindigkeit trainieren kann.
Technologien
React (JavaScript) – mit Timer, Spiellogik und Echtzeit-Eingaben.
Meine Rolle
Im Modul 294 (Frontend einer interaktiven Webapplikation realisieren) zu zweit umgesetzt: zuerst ein Konzept erstellt, dann die Webseite mit React entwickelt.
Was ich gelernt habe
Wie man Benutzereingaben in Echtzeit verarbeitet und Spiellogik sauber in JavaScript aufbaut.
↗ GitHub → Demo ansehen
CookEasyPT Screenshot
Mobile App

CookEasyPT

Eine mobile App rund um Kochen und portugiesische Rezepte, umgesetzt mit .NET MAUI und C#. Eine bewusste Entscheidung, Neues zu lernen, obwohl C# nicht meine stärkste Sprache ist.

Ziel
Eine mobile App rund ums Kochen und portugiesische Rezepte.
Technologien
C# mit .NET MAUI für plattformübergreifende mobile Apps.
Meine Rolle
Eigenständig umgesetzt – bewusst mit C#, einer für mich neuen Sprache.
Was ich gelernt habe
Erste Erfahrung mit mobiler App-Entwicklung und wie man sich in ein neues Framework einarbeitet.
↗ GitHub
Planary Wishlist Screenshot
Praxistraining (grosses Projekt)

Planary Wishlist

Eine Wishlist-Webseite aus dem Praxistraining, die ich zusammen mit drei anderen Studenten erstellt habe. Diese zeigt Fähigkeiten in Struktur, sauberem Design und Seitenaufbau.

Ziel
Eine Wishlist-Webseite, auf der Wünsche gesammelt und übersichtlich angezeigt werden.
Technologien
HTML, CSS und JavaScript.
Meine Rolle
Teamprojekt mit drei weiteren Studenten im Praxistraining; meine Rolle war Lösungsarchitekt – zuständig für die technische Struktur und einen durchdachten, sauberen Aufbau.
Was ich gelernt habe
Als Lösungsarchitekt die Struktur eines Projekts planen und im Team sauber zusammenarbeiten.
↗ GitHub → Demo ansehen
Snake Game Jungle Edition Screenshot
Praxistraining App

Snake Game: Jungle Edition

Ein Snake-Game mit Jungle-Thema. Zeigt C#-Logik, Spielmechanik, Bewegung, Kollisionen und kreative Gestaltung.

Ziel
Eine eigene Version des Klassikers Snake mit Jungle-Thema.
Technologien
C# – mit Spielmechanik, Bewegung und Kollisionserkennung.
Meine Rolle
Im Praxistraining selbst umgesetzt.
Was ich gelernt habe
Grundlagen der Spielprogrammierung: Bewegung, Kollisionen und Spielzustände steuern.
↗ GitHub
EnerGym Screenshot
Projektwoche Webseite

EnerGym

Eine thematische Webseite zum Thema Fitness. Zeigt klare Navigation, thematisches Design und den strukturierten Aufbau von Inhaltsbereichen für ein bestimmtes Thema.

Ziel
Eine Fitness-Webseite mit klar gegliederten Inhaltsbereichen.
Technologien
React, TypeScript, Node.js und SQLite – Frontend, Backend und Datenbank zusammen.
Meine Rolle
Zu zweit über mehrere Monate umgesetzt: Projekt mit einem Kollegen gewählt, Ausgangslage definiert, die Webseite in einer Projektwoche realisiert und einer jüngeren Klasse präsentiert. Mein Kollege war eher der Entwickler, ich übernahm vor allem die Dokumentation (Konzept, Realisierung, Einführung, Schlussbericht) – geholfen haben wir uns gegenseitig.
Was ich gelernt habe
Ein grösseres Projekt über mehrere Monate planen, dokumentieren, im Team umsetzen und am Ende vor Publikum präsentieren.
↗ GitHub
Anamorph Screenshot
Web-App

Anamorph

Anamorph ist ein kleines Puzzle-Spiel für den Browser. Man zeichnet eine einfache Skizze, und das Spiel macht daraus eine 3D-Welt, die man drehen muss, um den richtigen Weg zu finden.

Ziel
Aus einer einfachen Zeichnung soll ein spielbares 3D-Rätsel werden. Man dreht die Struktur, bis die Plattformen zusammenpassen, und führt eine Figur ins Ziel.
Technologien
React, TypeScript, Vite, Tailwind CSS und Three.js (für die 3D-Grafik). Zusammenarbeit über GitHub.
Meine Rolle
Im Team mit einem Kollegen umgesetzt und die Arbeit fair aufgeteilt. Ich war vor allem für das Zeichenwerkzeug, das Speichern und Teilen der Level und einige Verbesserungen zuständig.
Was ich gelernt habe
Wie man im Team mit Git und Branches genauer arbeitet und Aufgaben fair aufteilt, und wie man mit Three.js 3D-Grafik direkt im Browser umsetzt.
↗ GitHub → Demo ansehen
How to Survive – Days of the Week Edition Screenshot
Eigenes Projekt

How to Survive – Days of the Week Edition

Eine interaktive Web-App, in der jeder Wochentag seinen eigenen Charakter hat. Nutzer können humorvolle Survival-Tipps verwalten und liken, mit Login und Stimmungs-Feature.

Ziel
Den Alltag mit humorvollen Survival-Tipps etwas leichter machen und dabei eine komplette App mit CRUD und Benutzerverwaltung bauen.
Technologien
Frontend: React (Vite), Material UI. Backend: Node.js, Express, SQLite. Login mit JWT und bcrypt.
Meine Rolle
Einzelarbeit, alles selbst: Konzept, Design, Frontend, Backend und Datenbank. Aus dem Modul 294 zum eigenen Projekt weiterentwickelt.
Was ich gelernt habe
Wie eine komplette Web-App entsteht: Client-Server mit REST-API, Login mit JWT und bcrypt, Rollen und SQL-Datenbank.
↗ GitHub → Demo ansehen
DoorSystem96 Screenshot
Experiment

DoorSystem96

Ein experimentelles Projekt im Stil eines kleinen Betriebssystems. Technisch anspruchsvoll und am Ende nicht fehlerfrei, aber ein ehrliches Beispiel, was ich aus schwierigen Projekten lerne: Planung, Struktur, realistische Ziele.

Ziel
Ein experimentelles Projekt im Stil eines kleinen Betriebssystems im Browser.
Technologien
HTML, CSS und JavaScript.
Meine Rolle
Eigenes, ambitioniertes Experiment.
Was ich gelernt habe
Gerade aus den Fehlern habe ich am meisten gelernt – über Planung, Komplexität, saubere Struktur und Fehlersuche.
→ Demo ansehen
Erste Webseite Screenshot
Erste Webseite

Erste Webseite über mich

Eine meiner ersten Webseiten und ein ehrlicher Startpunkt, der zeigt, wo ich angefangen habe und wie sich mein Verständnis für Webdesign seitdem weiterentwickelt hat.

Ziel
Eine einfache Webseite über mich – mein erster Schritt im Webdesign.
Technologien
HTML und CSS.
Meine Rolle
Ganz am Anfang selbst erstellt.
Was ich gelernt habe
Die Grundlagen von HTML und CSS – der Startpunkt, von dem aus ich mich stetig verbessert habe.
→ Demo ansehen
Geo-Kick Screenshot
Mobile App

Geo-Kick

Geo-Kick ist ein Handy-Spiel ähnlich wie Pokémon GO, aber mit Fussball. Man geht zu echten Fussballplätzen, checkt per GPS ein und bekommt Belohnungen, mit denen man sein Team aufbaut und in einer Liga aufsteigt. Man sammelt Plätze, tritt vor Ort gegen deren Teams an und zieht Spieler aus Packs mit verschiedenen Seltenheiten.

Ziel
Einen spielerischen Anreiz schaffen, öfter rauszugehen und echt Fussball zu spielen statt nur am Handy zu sitzen. Gleichzeitig werden Fussballplätze in der Umgebung sichtbar, die man vorher nicht kannte.
Technologien
React Native mit Expo, TypeScript, SQLite, OpenStreetMap für die Karte, GPS- und Bewegungssensoren, Supabase als Backend, Git/GitHub.
Meine Rolle
Ich habe das Spielkonzept entworfen, die Entwicklung geplant und geleitet und alle Funktionen selbst auf echten Plätzen getestet und verbessert.
Was ich gelernt habe
Wie eine App von der Idee bis zur fertigen Installation entsteht, und dass ein gutes Spiel vor allem durch viel Testen und Verbessern entsteht.
↗ GitHub ↓ App (.apk)
B.O.L.T Screenshot
Mobile App

B.O.L.T

B.O.L.T ist eine App fürs Sprinten mit dem Handy. Man legt per GPS eine eigene Strecke fest, sprintet sie ab, und die App stoppt die Zeit automatisch am Ziel. So braucht man keine Stoppuhr und keine zweite Person.

Ziel
Eine einzelne Person soll ihre Sprint-Zeiten einfach, genau und fair messen können. Fair heisst: Vor dem Start kommt ein zufälliges Signal (Beep). Für jeden Lauf gibt es XP und man steigt im Level auf.
Technologien
Dart (Flutter), geolocator (GPS), sensors_plus (Beschleunigungssensor), pedometer, sqflite und shared_preferences (lokale Speicherung), flutter_map mit OpenStreetMap, Git/GitLab und automatische Tests.
Meine Rolle
Teamarbeit, fair aufgeteilt (jeder etwa ein Drittel). Ich habe vor allem an der GPS-Funktion und der automatischen Zeitmessung mitgearbeitet und die ganze Dokumentation geschrieben.
Was ich gelernt habe
Wie man Sensoren wie GPS und den Beschleunigungssensor benutzt und mit GPS-Ungenauigkeiten umgeht. Ausserdem, wie man im Team mit Git und Branches zusammenarbeitet, und wie wichtig gutes Testen für eine stabile App ist.
↗ GitHub ↓ App (.apk)
PapEdit Screenshot
Web-App

PapEdit

PapEdit ist eine kostenlose Webseite, mit der man PDF-Dateien direkt im Browser bearbeiten kann, ohne Programm oder Account. Text ändern, Seiten sortieren, PDFs zusammenfügen oder teilen, unterschreiben und Formulare ausfüllen, und am Ende herunterladen.

Ziel
Ein einfacher, schöner und komplett gratis PDF-Editor, ohne Werbung oder versteckte Kosten. Wichtig war auch der Datenschutz: Alles wird nur auf dem eigenen Gerät bearbeitet und nie auf einen Server hochgeladen.
Technologien
React + TypeScript, Vite (Build), Tailwind CSS (Design), PDF.js (PDF anzeigen), pdf-lib (PDF bearbeiten).
Meine Rolle
Von der Idee bis zur fertigen Webseite selbst umgesetzt: Konzept, Auswahl der Funktionen und das komplette Design mit Logo und Farben. Ich habe die Anwendung entwickelt, laufend getestet, verbessert und am Ende online gestellt.
Was ich gelernt habe
Wie ein PDF von innen aufgebaut ist und warum sich der Text darin nicht so einfach wie in Word ändern lässt. Ausserdem, wie man PDFs mit PDF.js anzeigt und mit pdf-lib bearbeitet, und wie man eine moderne Webseite Schritt für Schritt aufbaut.
↗ GitHub → Demo ansehen