MapMe

MapMe combines the functionality of route tracking with the personal touch of location-based memories.

Comment

Inspiration

The idea for MapMe was born out of a desire to capture the essence of our life's journey in a more meaningful way. Traditional methods of preserving memories often lack spatial context, making them less vivid. MapMe aims to bridge this gap by allowing users to geotag their memories, creating a personalized map of their life's journey.

What it does

MapMe is a web application that allows users to journal their memories with an interactive mapping experience. It combines the functionality of route tracking with the personal touch of location-based memories. Features:

  • Tracks user routes in real-time with GPS functionality
  • Allows users to draw custom routes on the map
  • Supports adding photos and notes to markers for documenting memories
  • Provides a comprehensive view of all saved routes and markers
  • Login in securely with Google sign-in

Benefits:

  • Geographic Context: Memories are given a spatial context, making them easier to recall and relive.
  • Personal Reflection: Regularly revisit memories to foster personal growth.
  • Security: Obtain a peace of mind that your memories are secure and safe.

How we built it

Technology Stack:

  • React.js for frontend
  • shadcn for reusable components
  • Next.js for the frontend framework
  • TypeScript for type-safe code
  • MongoDB for data storage
  • Google Maps API for mapping functionality
  • Tailwind CSS for styling
  • Google OAuth 2.0 API
  • GitHub Actions for CI/CD pipeline (Jest for testing, CodeQL for code scanning)

Challenges we ran into

Technical Challenges:

  • Implementing smooth real-time route tracking
  • Setting up API keys and servers
  • Getting the right environment variables

UX Challenges:

  • Balancing functionality with simplicity
  • Creating intuitive interfaces for map interactions
  • Smoothening the transition between auth page and homepage

Accomplishments that we're proud of/What we learned

Technical Achievements:

  • Clean, maintainable codebase with TypeScript
  • Responsive and intuitive UI design
  • Using APIs correctly and managing no-SQL databases
  • Automated tests done on pull requests and merge

What's next for MapMe

Feature Enhancements:

  • Mobile app development
  • Collaborative features like memory sharing between friends
  • Adding video support

Built With

Share this project:

Updates