Map Republic

Map Republic is a full-stack web application developed for the Berlin Institute of Technology, specifically the Institute for Urban Development. The project aimed to study the adolescent perception of spaces in both physical and virtual contexts. Myself, Lukas Mehling and Max Kreis were responsible for developing the tablet-based frontend of the application, working under the supervision of the design studio Visual Intelligence.

The application allows users to freely draw on a canvas, zoom in and out, pan around, paste icons, and manipulate them by dragging, scaling, and rotating. They can also add annotations in the form of text, emojis, and images. The images are stored using Cloudinary. Additionally, users can connect icons on the map to establish relationships between them. They can save their maps to the backend and authenticate using JWT.

The frontend of the application was built using Next.js, Konva.js, and Zustand. The backend was developed using Strapi, which utilizes a PostgreSQL database to store data. The backend also provides a dedicated editor role for moderators to manage content. In addition to the main frontend, there is an admin panel within the Next.js app. This admin panel allows for the creation and management of studies, including user registration via QR code, analysis of user maps with metadata, and recursive deletion of studies and user photos stored on Cloudinary.