Portflow Contextual Feedback
Project description
Fontys is currently transitioning to Portflow by Drieam as its standard digital portfolio platform. Within this system, teachers evaluate student evidence and provide feedback. However, the platform currently lacks the ability to give precise, contextual feedback on student work.
This project develops a prototype to add these missing features. Built on top of PDFSlick, the open-source PDF library already used by Drieam, the tool introduces direct on-document annotations. Additionally, it features a new hyperlink system that connects general evidence comments to specific document sections. These links live in the evidence comments, a feature that is already familiar to Portflow users.
Context
The project lies within Educational context, as Portflow is mostly used by educators and learners.
Results
During the Fall semester of 2025, several prototypes were built to exactly mimic Drieam's technology stack. The primary goal was to prove the technical feasibility of the solution using TypeScript, React and PDFSlick for the frontend, alongside Ruby on Rails for the backend.
In the Spring semester of 2026, the prototype is built using React and TypeScript, with Vite handling development and building. Styling is managed through LESS and CSS, and the development workflow includes ESLint and Prettier to maintain code quality.
The application allows annotations to be placed directly on top of the PDF document. It also includes a hyperlink system that lives within the comment tree of the evidence submission, remaining visible across different versions of that specific evidence. To support rapid prototyping, a mock backend is created, allowing features to be tested and iterated on without requiring a connection to the full Portflow system.
This prototype demonstrates to Drieam's development team how these tools can be integrated into their current evidence viewer. It provides a working reference for adding this functionality while remaining compatible with existing data structures and user workflows.
