DearMap

What if your memories could glow on a globe, just the way you felt them? DearMap turns your emotions into living moments, mapped beautifully across your world.

Comment

Inspiration💡

We live in moments, but they fade.

A shared laugh on a busy street, a tear by the window, a hug at the train station, they pass like shadows and slowly get buried inside screenshots, folders, or just forgotten.

One quiet evening, I found myself wondering, what if memories had a place to live? Not just in our heads or hearts, but on the actual world. What if emotions could be mapped? From that thought, DearMap was born. A gentle space where every feeling like love, heartbreak, hope, gratitude, can be softly placed on the Earth like emotional stars. Not just data, not just media, but a visual diary that ties your story to a place, a moment to a map. It turns every location into something deeply yours. Because some places aren’t just on the map. They are stories we once lived.

What it does 🌍

DearMap is an interactive emotional globe. It lets you pin your personal memories on a beautifully rendered 3D Earth.

In memory mode, Each memory can include a title, an image or video, a specific date, and most importantly, an emotion. Whether it’s love, sadness, gratitude, or excitement, every emotion is represented through expressive emojis and glowing visuals. When you click on any spot on the globe, a memory card comes to life, styled with mood specific gradients, emojis, and floating animations.

It doesn’t stop there. In Explore mode, Users can explore mood based places near their current location. If you’re feeling romantic, DearMap can suggest cafés and scenic spots. If you need peace, it can show you libraries and parks. Everything is powered by real time Google Maps data. There’s also a search feature that lets you fly to any location on Earth just by typing its name. Every interaction, from camera motion to hover animations, is designed to feel magical and deeply personal.

How I built it ⚙️

DearMap was a personal journey, every interaction, animation, and architectural choice was shaped with intention and care. At its heart is a photorealistic 3D globe built using CesiumJS and Google’s Photorealistic Tileset. I used Next.js with TypeScript to structure the frontend and backend, integrating Firebase Firestore to store user memories in real-time. The media files are securely uploaded to Firebase Storage, and I implemented both frontend and backend APIs to handle this seamlessly.

The project leverages several Google Maps Platform APIs. The Places API helps fetch mood-specific suggestions based on the user’s location and emotion. The Geocoding API is used to transform address searches into exact map coordinates. I used Tailwind CSS to bring softness and responsiveness to the UI, while Framer Motion added life through animations. Hover effects, glowing pins, camera fly transitions, and floating emojis were all custom-designed to make the experience feel alive.

Challenges I ran into 😤

One of the first major challenges was integrating Cesium’s globe with Next.js. Since Cesium isn’t server-rendering friendly, I had to carefully handle the rendering lifecycle and isolate the client-side code. Creating mood-based pin logic was also complex, the map had to differentiate between user memories, nearby mood-places, and decorative emoji pins floating around the Earth. Performance became a concern, especially when managing large datasets or animating multiple layers.

Media uploads needed to be secure, fast, and reliable. Working with Firebase Storage required proper error handling and a custom upload API that could deal with both images and videos. Finally, I had to find a balance between design and function, every emotional interaction had to feel soft and personal, while keeping the app fast and smooth on any device.

Accomplishments that I'm proud of 🏆

I’m proud that I was able to bring an idea like this to life entirely on my own. From the emotional concept to the technical architecture, everything reflects my vision. The globe feels magical, not just because of the technology, but because of the emotions it carries. I didn’t just build a memory-storing tool, I built an experience. An experience that listens, reflects, and remembers.

What also makes me proud is how much I was able to do with Google Maps Platform. I used it not just as a navigation tool, but as an emotional guide. The project doesn’t just serve a function, it creates a feeling.

What I learned 🙌

This project taught me how to bring together deeply technical concepts with soft, emotional design. I learned how to work with CesiumJS in a dynamic frontend environment and how to make it work alongside Google’s new 3D tileset. I became much more confident with APIs like Google Maps Places and Geocoding, handling data transformations and making them feel effortless to the user. I also explored Firebase in depth, from Firestore structure to secure media handling.

More than anything, I learned how to translate emotion into code. How to build something that isn’t just usable but memorable. DearMap made me realize that code can hold feelings, if you let it.

What's next for DearMap? 🚀

There’s so much more I want to add to DearMap. The next step is to introduce user accounts and memory privacy settings, so users can choose which memories to share or keep private. I want to bring in a timeline view that lets you travel through your memories chronologically, almost like reliving your emotional story across the world map.

One day, I dream of integrating DearMap into augmented reality, so that standing at a place could literally show you your past, layered softly over your present.

DearMap is more than a project. It’s my way of telling people that their emotions matter. That their memories deserve a home. And that even in a digital world, we can make space for things that are deeply human.

Built With

Share this project:

Updates