cyclelog
Schon oft dachte ich mir: «Wieso habe ich mir dieses oder jenes nicht notiert?». Erinnerungen sind flüchtig und manchmal verliert man den Überblick über die kleinen Dinge im Leben.
cyclelog ist weder ein Habit Tracker noch eine Reminder-App. Vielmehr geht es darum, die Zeiträume zwischen deinen Alltagsaktivitäten sichtbar zu machen.
Statt dich daran zu erinnern, was du tun solltest, zeigt dir die Web-App, wann du Dinge das letzte Mal gemacht hast. So behältst du den Überblick über alles, was dir wichtig ist – egal, ob du dich daran erinnern möchtest, wann du das letzte Mal ein Buch gelesen, deine Grosseltern besucht oder deine Freundin beschenkt hast.
cyclelog wurde mit dem Ziel entwickelt, sich auf das Wesentliche zu beschränken. Die minimalistische Gestaltung sorgt dafür, dass du dich ganz auf deine Aktivitäten konzentrieren kannst – ganz ohne Ablenkungen.
Probiere cyclelog selbst aus:
cyclelog.vercel.app
(pru)
Lernen, lernen und nochmals lernen
Als Basis für mein Projekt habe ich Next.js verwendet. Vor etwas mehr als einem Jahr habe ich mich zum ersten Mal mit dem auf React basierenden Framework beschäftigt. Auch in diesem Semester konnte ich wieder viel mitnehmen und die Lernkurve zeigte weiter nach oben. Vor allem im Bereich des Server-Side und Client-Side Renderings sammelte sich viel neues Wissen an.
In anderen Bereichen griff ich jedoch wie schon in den vergangenen Semestern auf mir unbekannte Technologien und Tools zurück. So habe ich für die Authentifizierung eine Kombination aus NextAuth.js und Resend verwendet, um das Login mit Magic Links zu ermöglichen. Gleichzeitig sollten Benutzer- und Session-Daten in einer Datenbank gespeichert werden. Aufgrund eines sehr grosszügigen Free Tier fiel die Wahl auf Turso. Und um die Daten schliesslich in mein Frontend zu bekommen, steht Drizzle ORM stets für die nächste Datenbankabfrage bereit.
Rückschläge
Auch wenn sich das bisher alles recht gut anhört, war das Projekt nicht immer ganz so ein Zuckerschlecken. Mit zwei Funktionen hatte ich so meine Probleme, sodass ich die eine Funktion ganz weggelassen und die andere, sagen wir, halb eingebaut habe.
Zum einen war der ursprüngliche Plan, eine zusätzliche Unterseite mit einem Chart und verschiedenen Filterfunktionen einzubauen. Das habe ich auch umgesetzt. Und zwar mit Recharts. Aber aufgrund massiver Performance-Schwankungen (vor allem die Ladezeiten waren das Problem) habe ich mich entschlossen, diese Funktion wieder zu entfernen. Warum die Performance so leidet, habe ich noch nicht herausgefunden.
Zum anderen ist es mir bis heute nicht gelungen, das Kontextmenü auf Touchgeräten zuverlässig zum Laufen zu bringen. Ich habe es zwar geschafft, dass es sich beim ersten Klick auf einen Log-Eintrag öffnet und beim zweiten Klick wieder schliesst. Wenn der User jedoch auf einen Menüpunkt klickte, wurde die Komponente in vier von fünf Fällen geschlossen, ohne die Aktion auszuführen. Aufgrund dieses Fehlverhaltens ist die Funktion nur über den Desktop nutzbar.
Mein Stack
Figma für die Gestaltung der Website
VS Code für die Umsetzung der Website
Github für die Verwaltung des Codes
Next.js als Grundlage der Website
Tailwind CSS für das Styling der Website
NextAuth.js für die Authentifizierung der User
Resend für das Versenden von Mails
Turso für die SQL-Datenbank
Drizzle ORM für Interaktionen mit Turso
React Spinners für Ladeanimationen
React Timeago für die Formatierung von Zeitstempel
Vercel für das Hosting der Website