• 

  Dashboard for trainee planning

OpenBerichtsheft: Project Documentation

Inspiration

Vocational training documentation is fundamentally stuck in the past. Trainees lose hours every week wrestling with outdated Word templates or physical paperwork, while instructors and supervisors spend valuable time chasing down missing logs. We wanted to build a modern, digital-first, and open-source solution that transforms this tedious compliance chore into a highly efficient, automated workflow.

What it does

OpenBerichtsheft digitizes the entire vocational training ecosystem across four distinct user roles (Admin, Instructor, Training Officer, and Trainee):

• Trainees: Can seamlessly write weekly reports using an intuitive editor featuring debounce-based autosave, automatic pre-fills from previous weeks, and a continuous progress overview via a Heatmap-style Year-Calendar.
• Instructors & Officers: Gain access to dedicated dashboards to review, comment on, approve, or return reports, alongside an interactive, drag-and-drop Gantt chart for deployment planning.
• Administrators: Effortlessly manage user creation, structural assignments (matching trainees to instructors), and profession profiles (e.g., FiAE, FiSi, KVF).

How we built it

We engineered a production-ready, enterprise-grade architecture completely written in TypeScript:

• Framework: Next.js 16 (App Router) leveraging server-side rendering and strict route guarding.
• Styling: Tailwind CSS 4 utilizing a modern design system with a clean Token-Architecture supporting native Light and Dark modes.
• Database & ORM: PostgreSQL 16 managed seamlessly through Prisma 6.
• Authentication: Auth.js 5 (NextAuth) utilizing secure JSON Web Tokens (JWT).
• Infrastructure & Tooling: Containerized environment with Docker and Docker Compose, robust API protection with rate-limiting, and an extensive test runner pipeline powered by Vitest and Playwright for End-to-End (E2E) automation.

Challenges we ran into

One of our greatest hurdles was building the interactive Gantt chart schedule coupled with robust recurrence rules (e.g., alternating schedules for vocational school, operations, or internal courses). Syncing recurring database states elegantly with draggable frontend timelines while keeping server-side authorization completely airtight on every specific API route required intricate state design and meticulous middleware handling.

Accomplishments that we're proud of

• Zero Data Loss: Implemented a bulletproof autosave mechanism that prevents trainees from losing progress due to sudden disconnects.
• GDPR Anonymization Engine: Built a privacy-first layer that fully anonymizes user records instead of deleting rows outright, neatly resolving the conflict between data privacy laws and legal corporate record-retention requirements.
• Extensive Testing Rig: Achieved clean test separation and high code reliability by implementing parallelized unit, API, component, and E2E browser tests.

What we learned

We mastered advanced multi-tenant role structures and dynamic access control filters within Next.js Server Components. We also learned how to handle complex asynchronous tasks under high concurrency, such as dynamically generating clean, predictable individual or bulk PDF report exports without degrading API performance.

What's next for OpenBerichtsheft

• AI Assistance: Implementing context-aware entry suggestions that cross-reference the trainee's deployment schedule to pre-populate log text.
• Digital Signatures: Incorporating cryptographic digital signatures to achieve 100% legally binding paperless handoffs.
• IHK/HWK Integration: Developing automated export modules aligned directly with the digital portal standards of German Chambers of Commerce.

Built With

• typescript