MailPlanet🌍: Visualize email origins on a global map

This is a submission for the Postmark Challenge: Inbox Innovators.

What I Built: MailPlanet

Ever wondered where on Earth your emails are really coming from?
Well, Ethically, that's not really possible but we still can know where the email provider is sending that email from and now you can see it — literally.

That is what MailPlanet is for, a Next.js-powered space station (okay, it's a web app, but let me dream) that pinpoints the origin of incoming emails and drops them on a glowing globe.

It listens for emails using Postmark's inbound webhooks, geolocates the sender’s IP using Abstract API, stores the data with Drizzle ORM, and then — voilà — launches a little marker on the globe using Mapbox.

Demo

• Check it live here: https://mailplanet.vercel.app

• Preview Screenshot:

Testing Instructions

1. Visit the live link above.
2. Send an email to this Postmark inbound address ([e-mail]) — don’t worry, any subject and body will do.
3. Wait a few seconds for MailPlanet to pick it up, geo-locate it, and drop a marker from space.
4. Click the marker on the globe to see who emailed and from where

Code Repository

Code’s open source and ready for launch:

Ionfinisher / mail-planet

MailPlanet 🌍📧

MailPlanet is a Next.js application that visualizes the geographic origin of incoming emails on an interactive 3D globe. It processes inbound emails via Postmark webhooks, performs IP geolocation, and displays the data on a Mapbox map.

Features

• Interactive 3D Globe: Visualizes email origins using Mapbox GL JS.
• Real-time Updates: New emails appear on the map as they are processed.
• IP Geolocation: Determines the location of the email sender's IP address (actually the email provider's address).
• Email Data Display: Shows details like sender, subject, and location on map markers.
• Database Integration: Stores and retrieves IP location data using Drizzle ORM.
• Postmark Webhook: Processes inbound emails received through Postmark.

Tech Stack

• Framework: Next.js
• Language: TypeScript
• Mapping: Mapbox GL JS
• Database ORM: Drizzle ORM
• Styling: Tailwind CSS (Assumed, common with Next.js)
• Inbound Email: Postmark
• Geolocation API: Abstract API…

View on GitHub

How I Built It

Here’s how it all came together:

1. Email Receiving – Powered by Postmark

• Set up an inbound stream and webhook that sends all incoming emails to my Next.js API route /api/inbound-email. (Can only receive up to 99-ish emails so be kind 😁)

2. Geolocation

• Grabbed the sender's mail service IP from the email headers.
• Fed that IP into the Abstract IP Geolocation API to get the country, lat/lng, and flag.

3. Data Persistence

The decision to actually use a database came into play as I'm using free tier only services and I had to gatekeep all the API calls.

• Used Drizzle ORM to define the schema and store everything: IPs, locations, email counts, etc.
• If an IP shows up again, it just increments the count like a loyal globe-tracker.

4. Globe Rendering

• Built a slick Mapbox globe via [src/components/Planet.tsx].
• Pulled geolocation data from /api/iplocations and mapped every email sender in real-time.
• Clicking a marker shows details like subject and sender.

---

Tech Stack

Feature	Tool
Framework	Next.js
Language	TypeScript
Emails	Postmark
Geolocation	Abstract API
Database	Drizzle ORM
Maps	Mapbox GL JS

Experience with Postmark

MailPlanet was built with one goal: use the Postmark inbound email feture to make emails less boring with a sprinkle of creativity. And Postmark made it really simple to do so, from getting my account verified, to configuring the inbound mail server in just a few steps.

Thanks Postmark for the stellar tools. ✨

Now go forth and send an email — MailPlanet is watching. 🌎