map & meet

"A collaborative web app for our cartographic journey"

A Sneak Peak of the map & meet application.

What it is about

The Cartography M.Sc. distinguishes itself from other programs with its four different study locations. The student life is determined by moving to those different cities, exploring, and finding new places to visit and meet. For this reason, I wanted to create a web application for our carto group to gather our favorite spots during our journey. Therefore, the app offers not only information about different places, but also provides a tool that can generate suggestions for places based on the users desired activity and participating member’s home location.

How I built it

The interactive map is displayed as a web app using a client-server architecture. I have used JavaScript, specifically React, CSS and HTML for the frontend (client). MapLibre GL JS is rendering the interactive map provided by MapTiler. On the server side, I have used PostgreSQL to store the data in a database. The initial data was collected manually online and is based on recommendations of several people from our carto program. The icons and symbols were taken from svgrepo.com and modified (size and colors) in Figma. The process of the development was realized in a step-by-step implementation.

Challenges I ran into

A big challenge was the lack of a complete design. Not having a background in design brought several challenges in designing and developing the web app. Furthermore, I didn’t know how the final schema of the database should look like which made it difficult to collect the data in the beginning.

What I am proud of

Despite all ups and downs, I am proud that I was able to finish implementing a working web application with an interactive map as intended. I am very happy how the design turned out, especially using the carto-colors in many details.

What I learned

Even though I had programming skills before, it was the first time I went through the process of setting up a whole web app by myself: e.g. creating a new database and setting up a server. Additionally, I have gained a lot of insights in using design and presentation tools!

What's next

I would like to improve some features such as incorporating optimal routing options, having live locations and make everything more dynamic! In future, map & meet can be extended to the other cities allowing a usage across all intakes.