Graasp is a digital learning platform developed at EPFL (École Polytechnique Fédérale de Lausanne) to support collaborative, inquiry-based education. Designed for educators, students and researchers, it provides an environment where users can create, share and manage interactive learning activities. With a strong focus on scientific and inquiry-driven approaches, Graasp facilitates collaboration and includes tools for learning analytics to track student engagement and progress.
Graasp is a non-lucrative association and the platform is open-source. It is used by several educational institutions in Switzerland and around the world, including universities, schools, and research organizations.
Development
At Graasp, I'm responsible for designing and implementing new features on the platform. I lead a small team of developers, managing projects and coordinating our work using agile practices. Each feature is thoughtfully designed, tested, and reviewed before it's deployed, following a clear workflow from development, staging and then to production. This approach helps us maintain quality while continuously improving the platform.
The frontend application is built using React.js and TypeScript. Although a separated React Native app (developed with Expo) was in progress for about a year, it was eventually deprecated in favor of enhancing responsive accessibility within the web application.
Key libraries and tools used in the project include Material-UI for design components, React Query for data fetching, Storybook for UI development, and Cypress for end-to-end testing.
The backend application is built using Node.js with the Fastify framework, chosen for its speed and low overhead. PostgreSQL serves as the primary relational database. The entire backend is containerized using Docker, ensuring consistent environments across development and production. Infrastructure as Code (IaC) practices are employed to manage and automate deployment on AWS.
Landing Page
Home page of the Library
A learning activity shared in the Library
A learning activity in the Player
Pages
To enhance the user experience across the platform, we're developing a real-time collaborative WYSIWYG editor. Built with Lexical and Yjs, the editor aims to make content creation more intuitive and efficient. Users can easily add and format elements while immediately seeing how they will appear to readers, reducing friction in the editing process. Real-time collaboration allows multiple users to edit simultaneously, improving teamwork and overall productivity.
This work is still in progress and will be deployed soon.
Desktop version of a Capsule Summary
Desktop version of the Edition View
Desktop version of Read View
Mobile view of a Capsule Summary
Mobile view of the Read View
Mobile view of a Draft Page
Library
The Library is a repository of open-source educational resources created by and for teachers. While its core feature is the powerful search among resources, the homepage originally lacked clarity and didn't effectively communicate the richness of its content. To address this, a new homepage was designed to better showcase what the Library offers. It features prominent, content-rich collections curated within Graasp, offering immediate value to educators. Key statistics and trending topics highlight the diversity and educational focus of the platform. Additionally, sections for recently added and most liked collections reflect community activity and engagement, bringing the platform's dynamic nature to the forefront.
This work is still in progress and will be deployed soon.
Proposition for the landing page for the Library
Landing page for the Library as of 9.25