ETH Toggle

A comprehensive time tracking and academic planning platform for students

---

Overview

This project started from a personal need of wanting to have an app where I can track my study sessions. It then expanded to other features like: statistics on dashboard for my learning, exam planner integration, trainingsplan integration, where training plans can be generated with AI.

ETH Toggle is a full-stack web application that combines Toggl-style time tracking with academic planning features for students. The application addresses the disconnect between time tracking and academic planning by allowing students to track study sessions linked directly to subjects or exam preparation tasks, automatically aggregating data for insights into study patterns, goal progress, and exam readiness.

Built with Next.js 16, React 19, and PostgreSQL, the application features a dark-themed UI, comprehensive analytics dashboards, intelligent exam planning with nested task management, and integrations with external services like Strava for athletic training plans.

<video controls> <source src="/images/study-tracker/demo.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

---

Key Features

• Unified Time Tracking: Track study sessions linked to subjects, exam todos, or personal projects with a Toggl-style timer. Sessions automatically aggregate to subjects and feed into analytics.

• Intelligent Exam Planner: Create nested todo hierarchies for exam preparation, link todos to study materials (slides, scripts, books, videos), and track time spent on each task. Auto-scheduling algorithm distributes tasks across available days.

• Comprehensive Dashboard: Real-time analytics including study streaks, goal progress (weekday/weekend goals), time analysis by day of week and time of day, calendar heatmap, and subject breakdowns.

• Training Plan Integration: Import and manage athletic training plans with weekly workout schedules. AI-powered plan modification using OpenAI, merge capabilities, and Strava integration for activity syncing.

• Calendar View: Week-based calendar showing all time sessions (study, projects, external activities) in a 24-hour grid with visual representation of study patterns.

---

Technical Implementation

Architecture & Data Flow

ETH Toggle uses Next.js App Router with React Server Components by default, minimizing JavaScript bundle size. The database schema centers around the user, with all resources cascading from the user to ensure data isolation.

The application's features are interconnected through the time tracking system:

Time Session Centrality: Time sessions connect all features—linking to subjects, exam todos, or projects. Optimistic updates immediately reflect in the dashboard, which aggregates sessions to calculate streaks, goal progress, and time analysis.

Exam Planning: Exams contain Materials and nested Todos. Materials convert to Todos, and time tracking links to both the todo and parent subject. An auto-scheduling algorithm distributes tasks across available days.

Training Plans: Stored as JSON (Zod-validated) and expanded into workout records. Supports plan merging, AI-powered modifications, and token-based sharing.

Technology Stack

Next.js 16 (App Router) with React 19 and React Compiler, Prisma ORM for type-safe database access, NextAuth v5 for JWT authentication, and PostgreSQL. Performance optimizations include dashboard caching, optimistic UI updates, and strategic database indexing.

---

Key Decisions & Trade-offs

JWT Sessions: Reduces database queries for serverless deployments, but sessions can't be invalidated server-side without additional infrastructure.

Nested Todos: Unlimited nesting depth requires recursive queries, adding complexity but providing maximum flexibility for exam planning.

Training Plans as JSON: Flexible structures and easier import/export, with reduced query flexibility as the trade-off.

Optimistic Updates: Dashboard updates immediately without conflict checks, safe because time sessions are append-only.

---

Challenges & Learnings

React 19 Compatibility: Early adoption required working around compatibility issues with libraries like BlockNote, with careful testing of the React Compiler's automatic optimizations.

Complex Data Aggregations: The dashboard aggregates time sessions across multiple dimensions. Implemented efficient queries using Prisma's aggregation features without loading all sessions into memory.

Nested Todo Flattening: Calculating exam planner statistics requires flattening nested hierarchies while preserving relationships. The recursive query pattern became a reusable utility.

Real-time Updates: Implementing optimistic updates that stay in sync with server state required careful event handling when multiple components react to timer events.

---

Results/Impact

ETH Toggle successfully integrates time tracking with academic planning, demonstrating full-stack TypeScript development with strict type safety, modern React patterns (Server Components, optimistic updates), complex data relationships handled through Prisma, and an extensible architecture supporting external integrations.

---

Tech Stack

Frontend: Next.js 16.1.1, React 19.2.3, TypeScript 5, Tailwind CSS 4.1.18, shadcn/ui, Recharts, BlockNote

Backend: Prisma 6.19.1, PostgreSQL, NextAuth v5, Zod 4.2.1

External Services: Google OAuth, OpenAI API, Strava API

---

Team

Solo Project - Full-stack development, UI/UX design, and feature implementation by Oliver Baumgartner.