Checkup Navigator — Your compass for medical checkups

This project was carried out as part of the TechLabs “Digital Shaper Program” in Hamburg (winter term 2023/2024) — track: Web Development.

Short Summary

The German government has been pushing the use of electric cars for some years. We aim to gain insights into the current situation and the development of the charging infrastructure for electric vehicles.

Mapping the distribution of charging stations across Germany helps us identify areas with higher concentration or gaps in charging infrastructure.

Understand the growth trend and mayor players in the industry to figure out how concentrated the market is. This may be of interest to stakeholders such as government authorities, companies and consumers.

The Problem

The German health care system offers a vast variety of medical checkups of which many are paid by the public health care insurances. Truth be told: Missing a checkup won’t have negative consequences for your health in most cases. However, detecting early stages of diseases like cancer can have a crucial impact on your life. Yet surveys show that a lot of people don’t take advantage of these checkup offers. Why is that? Most checkups are aimed towards healthy individuals. Without any symptoms reminding you of scheduling appointments, it’s just too easy to forget about them in our busy everyday lives. Furthermore, many people aren’t even aware of all the checkups they are eligible for. Even though there is plenty of information available, you must actively look for it.

Our Solution

We built a web app that makes keeping track of medical checkups as easy as possible. The app allows the user to register and create a profile where they can enter their data (name, sex, date of birth).

Our database has all the medical checkups and the app adds them to the user’s profile automatically.

To keep track of checkups for multiple people (like children, spouses or elderly parents), a user can create multiple profiles in their account. They can also edit the profiles and delete them, so we implemented all basic CRUD-operations (create, read, update, delete) on the frontend and backend.

In the future, other helpful features would be

• to remind users of checkups,
• to allow users to add their last examination dates,
• to allow users to add individual checkups based on their health conditions.

The Journey

Shortly after deciding on our project during the ideation workshop hosted by TechLabs, our group met in person to discuss further steps and get everyone onto the same page. We decided on a minimum viable product (MVP): A webpage where you can enter your sex and age and in return receive a list of available checkups. We discussed what parameters would be needed to be passed from the database to the frontend for this and created our repo on GitHub. Despite planning on developing the MVP first, we quickly added the features of user registration and profile creation to the list of to-do-tasks. Thus, our project had three main parts: Frontend, backend and user authentication.

Initially, there were two group members each for the frontend and backend tasks and one group member who was responsible for the user authentication. We agreed on weekly online meetings to discuss the progress in each part.

The user authentication was implemented via the Auth0 identity platform. By registering, each user is assigned a unique identifier which is then used to link profiles to the user account in the database.

On the backend side, we had two major tasks: First, we needed a database for the checkups and user data. Then, we would have to build an API. We created a database using MongoDB and connected our app to it via MongoDB’s cloud service, Atlas. In the database, we added two collections — one as a library of checkups and another one for the user and profile data. Whereas the library of checkups was quickly finished, it took some trial and error to get the user data collection right.

In the end, we decided on creating a database entry for each user and list all their profiles as subdocuments. For the checkups however, only their respective IDs (as provided by MongoDB) would be added to each profile subdocument to avoid overloading the collection with data. Via the populate() method complete checkup data could then be displayed upon request. For the API we followed the RESTful routing principles. CRUD-operations were implemented via HTTP requests, using GET, POST, PUT, and DELETE methods.

Finally, we cleaned up the code by separating it into several files and connecting them with the router provided by Express. During the development of the code, the backend switched from using JavaScript to using Typescript. This proved to be helpful in identifying errors before they could crash the app.

On the frontend side, we decided together with our mentor to use the React component library MUI Core, so that we would spend less time styling components and could focus more on the tricky parts of receiving data from the backend via the API and handling state in React.

Since our project was a bit more complex than the teaching projects from the React course, this turned out to be a good decision. We ran into some problems with CORS errors between frontend and backend as well as the tricky parts of state management in React. With the help of Google and our mentor, we managed to fix these issues.

Our online course taught us how to build small components to keep the code clean and reusable, which in the end saved a lot of time. For example, we reused the profile card component on multiple pages. But at the same time that meant, that we had to share state information across multiple components, for example to update the list of profiles in the navigation whenever a profile was created, changed or deleted.

Since our group members had already finished most of the course material by the start of the project phase, we could start the development right away. Thus, we had a lot of progress in the early phase. But life happens — due to personal obligations, work and differing availabilities, progress slowed. One group member dropped out, leaving only one person who had completed the frontend course material. We decided not to stress about implementing additional features. Instead, we focused on developing a steady and functioning version of our MVP. With our final commit to GitHub and the achievement of having developed our very own app, we close this chapter and finish our TechLabs journey.

Final thoughts

Our group fortunately didn’t run into any major problems, and we were able to develop the project as it was planned. Even though we couldn’t include all the features we initially had in mind, we are nonetheless proud of what we achieved! TechLabs has been an amazing journey — thanks to the TechLabs staff for making this unique opportunity possible. Also special thanks to our mentor Alex, who didn’t shy away from spontaneous, hour-long online meetings whenever help was needed :)

Some takeaways and final thoughts for everyone contemplating participating:

• Not only learning the coding skills but also using them to develop a real project in a group setting is what made the difference in the learning process.
• It takes time and commitment: Learning and understanding code can be challenging and overwhelming, even more so as a beginner. The estimated 5–10h of workload per week are in fact realistic. Make sure that you can spare the time and commitment, especially during the project phase.
• Finishing most of the course material before the start of the project phase proved to be really helpful in order to start development right away and not lose precious developing time.
• For web development: If possible, don’t restrict yourself to only frontend or backend course material, so that — if needed — you can help the other side. Our project might have gotten farther if we had done this.
• Most importantly: Allow for trial and error. You will get stuck frequently — it’s normal! Google is your best friend :)

Group Members

• Stefanie Kruse (frontend)
• Jan-Paul Lüdtke (user authentication)
• Daniel Gäpel (backend)
• Tiana Barnekow (backend)

Mentor

Alexander Bauer