M3 Master ErgoScape An audiovisual motivation tool to support medical performance diagnostics

Team

  • To Uyen Nguyen Thi
  • Christopher Knapp
  • Julius Schultz
  • Hasan Alkurdi
  • Justin Pallas
  • Nic Rubner

Supervision

David Koschnick

ErgoScape's Tech Stack

Concept & Design

Miro
Miro was used for the initial brainstorming session, for concretising the requirements and concept, and for the wireframes. It allowed the team to discuss and visualise ideas and record decisions.

Figma
Figma was used to create the UI component library, style guide and final design of the user interface of ErgoScape.

Development

Nuxt
Nuxt is a powerful Vue.js framework that simplifies the development of universal, static, and single-page applications by providing server-side rendering, routing, state management, and other built-in features.

By harnessing Nuxt, the team was able to create reusable UI components, accelerate development speed, and deliver a modern and intuitive web application, enhancing the overall user experience.

JavaScript
JavaScript is a versatile and widely used programming language that enables the development of interactive and dynamic web applications. By leveraging JavaScript, the team was able to create engaging and responsive user interfaces, implement complex logic, and enhance the functionality of ErgoScape.

TypeScript
TypeScript is a powerful superset of JavaScript and introduces static typing. With TypeScript, errors can be caught early during development, leading to more reliable and maintainable code. The enhanced tooling support, including code autocompletion and refactoring suggestions, also contributes to increased productivity. TypeScript also ensures better collaboration among team members, improves code readability, and helps to confidently build and scale large, complex applications.

Tailwind CSS
Tailwind CSS is a preferred utility-first CSS framework for building stylish and responsive user interfaces. By providing a comprehensive set of low-level utilities, it makes it easy to create and customise consistent, visually appealing UI components, and enhances the overall efficiency of the development process.

Vite
Vite is used as a modern build tool and development server that significantly enhances the web development workflow. Vite’s fast development server with instant hot module replacement enables rapid iteration and provides quick feedback during the development process. Its efficient build process, leveraging native ES modules for production, leads to optimised and high-performance web applications.

Pinia
Pinia is a modern and lightweight alternative to Vuex for Vue 3. It provides a simple and intuitive API for managing the state of the application, making it easier to build scalable and maintainable applications.

Python
Python is a versatile and high-level programming language that is widely used for web development, data analysis, artificial intelligence, and scientific computing. By leveraging Python, the team was able to build the backend of ErgoScape, implement complex business logic, and ensure seamless communication between the frontend and the database.

Django
Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. It follows the DRY (Don’t Repeat Yourself) principle and focuses on automating as much as possible. By leveraging Django, the team was able to build a robust and scalable backend for ErgoScape, ensuring efficient data management and seamless integration with the frontend.

Codebase & Communication

GitLab
GitLab served as the chosen platform for managing the project’s codebase, with both a repository for the backend and the frontend. The built-in Kanban feature helped to create tickets and keep track of todos.

Discord
Discord served as the primary tool for communication, offering structured channels for discussions and video calls throughout the project’s duration.