Memory Mapper

Memory Mapper is a tool that helps users map out their memories and experiences.

Explanation:

During my recent trip to Canada, I struggled to find an app that effectively combined mapping, photo integration, and journaling to document my journey. This inspired me to create my own travel mapping app – a digital companion that plots routes and serves as an interactive journal. The app I envision would feature custom map markers, seamless photo integration, and detailed location notes, allowing travelers to capture the essence of their experiences. By developing it myself, I can tailor it to specific needs and include sharing capabilities for friends and family. This project not only allows me to expand my skills in web development and mapping technologies but could also evolve into a versatile tool for other travelers. Ultimately, it aims to transform how we remember and share travel experiences, turning each journey into a vivid, digital story.

Challenges:

• Integrating Mapbox for interactive maps and custom markers.
• Creating a seamless photo integration system.
• Designing an intuitive interface for location notes and journal entries.
• Developing a system for secure user authentication and data storage.
• Implementing a media management system to allow users to add, edit, and delete memories and photos.
• Allowing users to edit their trips and memories after they submit them.

Implementation Details:

My first step was to research on my options for mapping, I was looking for a solution that was React friendly and cost effective. I found many options such as Google Maps, Mapbox and Leaflet. After evaluating the pros and cons of each option, I decided to use Mapbox as it has a generous free tier and is well documented.

What I Learned:

• Learned how to use Mapbox and how to implement custom markers and interactivity into the map.
• Gained experience in using Supabase for authentication and data storage, and Resend for sending emails.
• Enhanced my skills in media management and how to store and retrieve media from a database.
• Learned how to implement a rich text editor that allows users to add and edit memories and photos.

Changes:

I would take a different approach in the system design of the website, I would create a more modular and scalable architecture. I would also spend more time on the frontend design of the website to make it more aesthetically pleasing.