Skip to main content
​
23.05.2025
Tag 4
Heute haben wir das Projekt beziehungsweise den Release 1.1 erfolgreich abgeschlossen. Wir haben alle geplanten Features implementiert plus noch die Zeit des Trails.
Ja heute gab es eine einzige nervende Herausforderung. Da Dario und ich beide an der gleichen Datei gearbeitet haben, gab es einige Merge Conflicts. Das problem war aber auch, dass wir am stylen waren und beide gegenseitig immer die styles überschrieben haben. Das war sehr mühsam und hat viel Zeit gekostet. Aber wir haben es schlussentlich geschafft.
Ich habe gelernt, wie man mit tailwind CSS mobile friendly Designs erstellt. Auch “Klassen” (also Types) in TypeScript sind mir jetzt viel klarer.
Ich habe gelernt beziehungsweise bemerkt, dass es besser ist, wenn man ähnliche stylings eines Komponenten, anstatt direkt in jedes einzelne Element zu schreiben, die styles direkt in den Komponenten von der Component Library zu definieren. Das macht es einfacher wiederholende styles zu verwenden und auch die Übersichtlichkeit ist viel besser.
Nein. All unsere Probleme konnten gelöst werden.
Ich bin mir zufrieden mit dem Vorgehen von heute. Was vielleicht eine gute Idee für die Zukunft wäre, dass wenn Dario und ich am gleichen File arbeiten, dass wir es zusammen am gleichen Laptop machen (siehe Pair Coding via WebStorm). Das würde uns viel Zeit sparen und auch die Merge Conflicts wären nicht so schlimm.
​
16.05.2025
Tag 3
Heute konnte ich endlich mit dem Programmieren anfangen. Wir haben am Vormittag zusammen mit Dario das Wireframe und das Mockup fertig gestellt. Danach haben wir zuerst zusammen und dann alleine an der Website gearbeitet. Wir haben mit Ui/Shadcn Komponenten gearbeitet und ich habe die Header, Footer und Main Content erstellt.
Ja, der Umgang mit Tailwind war am Anfang etwas schwierig (da ich es noch nie verwendet habe). Ich habe aber noch relativ schnell gelernt.
Ich habe die folgenden Dinge gelernt:
  • Umgang mit TailwindCss
  • Umgang mit Shadcn/ui
  • Atomare Design Prinzipien
Jedes Komponent kann einen default export haben, der das importieren vereinfacht, da man nur noch import Header from './Header' anstatt import { Header } from './Header' verwenden muss. Das ist viel einfacher und übersichtlicher.Ich habe auch über das modularisieren von CSS erfahren. Das ist eine gute Methode, um den Code übersichtlicher zu gestalten.

Nein, ich habe alles geschafft, was ich mir vorgenommen habe.

Nichts. Ich muss einfach schneller werden, weil sonst schaffen wir es nicht rechtzeitig fertig!
​
09.05.2025
Tag 2
Heute habe ich hauptsächlich an der Dokumentation gearbeitet. Am Anfang habe ich die Variant Decision verbessert und danach habe ich mit absprache mit Dario an der Usability and UI Choices Page gearbeitet. Danach konnte ich auch noch das Wireframe erledigen, während Dario am Mockup gearbeitet hat. Am Schluss setzte ich noch die develupment environment mit Vite, React, Tailwind, TypeScript und shadcn/ui auf.Was ich auch nicht vergessen darf, war die Auswahl des Farbschemas. Das hat mega viel Zeit in Anspruch genommen, da wir beide nicht wirklich wussten, wie schöne Farben zusammenpassen. Wir haben uns dann schlussendlich für ein Farbschema entschieden, das wir beide sehr schön finden.
Herausforderungen an sich gab es keine (Ausser das Farbschema auszuwählen). Das Ding ist jedoch, dass es einfach mega viel zu lernen/machen gibt. Ich musste mich manchmal wirklich fokussieren, um nicht abgelenkt zu werden. Ich habe auch ein bisschen mit ChatGPT gearbeitet, um meine Unsicherheiten zu klären. Das hat mir sehr geholfen.
Ich habe heute effektiv gelernt, wie man mit Vite, React, Tailwind und TypeScript wirklich arbeitet. Zum Beispiel, wie man die verschiedene React Komponenten erstellt und verbindet.
Ich habe gelernt, dass man React Komponente in /src/components ablegen sollte. Das ist eine gute Struktur, die ich auch in Zukunft verwenden werde. Ich habe auch gelernt, dass man für

Nein, ich habe alles geschafft, was ich mir vorgenommen habe.

Ich könnte mich vielleicht noch mehr fokussieren. Ich möchte ehrlich gesagt dieses Projekt vor den Abschlussprüfungen abschliessen, damit ich mich auf die Prüfungen konzentrieren kann.
​
02.05.2025
Tag 1
  • Einführung zu Kanban (Board) und Kaizen
  • Wiederholung/Auffrischung von SCRUM Methoden und Begriffen
  • Erstellung des GitHub Projekts für unseren Auftrag mit den meisten Milestones, Features, Tasks, Issues und Sub-Issues
  • Node.Js, NPM und NVM angeschaut
  • ChatGPT zu all meinen Unsicherheiten befragt (Was ist React? Unterschied zwischen npx und npm? Was ist Vite/Build-Tools?)

Die einzige Herausforderung war das Erstellen von Issues im GitHub Projekt. Aufgrund eines Bugs konnten Issues nur im Repo erstellt werden, das zuletzt gepusht wurde. Das hat Zeit gekostet, aber wir haben es schlussendlich geschafft.

  • Kaizen
  • React
  • NVM, NPX, Vite, UI Libraries
  • TypeScript, JSX, TSX
  • React Router, useState, useEffect
  • Tailwind CSS

React lernen funktioniert sehr gut mittels kleinen Beispielen, die man im Internet finden kann.

Nein, nicht wirklich.

Ich wüsste nicht wie… vielleicht mich nicht so viel von anderen Klassenkammeraden ablenken lassen (also nicht Dario, aber andere, die manchmal einfach vorbeikommen).

⌘I