TL;DR: TravelMap is an app that allows you to visualize your travels on a map.

Context

Each year I travel to several places and each year I write reflections with a summary of my experiences and learnings. This means I always have a section dedicated to talking ab my travels as that ends up being a large chunk of my year (22% in 2023).

But I've never really had a good format for these things.

• Tried lists - Boring
• Included IG pictures - Too long, a lot of work, makes my page load slow, and prob boring for others
• Back to lists - still boring

So I've just used lists for the past couple reflections but it doesn't really do a good job of representing these travels in a concise, meaningful way.

I previously tried to solve this way back in 2018 with Geolog but that interface ended up being too clunky for me to use regularly and for anyone else to reasonably use it at all.

TravelMap for visualizing travels

My 2023 Travels - visualized with TravelMap.

TravelMap is my latest iteration on this problem, trying to make mapping my own travels easier so I can better share where I've been.

It's currently very simple - mapping a list of (Latitude, Longitude) locations on a crude map. It's a bit clunky (and ugly) but it does the job so sharing it out now to see if there's interest for using / improving.

How it's built

I love building things so ofc there will be a section on how I built it. TravelMap is built with my typical tech stack - boring, battle-tested technologies I'm comfortable with. I spent a little bit of complexity budget on exploring mapping software (for the product) and low-js frontend tech (for my own research).

Here I'll list my tech stack and relevant guides on how I use / think ab these things.

Frontend: Server-side-rendered HTML with Giraffe.ViewEngine and AlpineJS for clientside logic

• Giraffe.ViewEngine: Server-side HTML Rendering with F# and Giraffe.ViewEngine
• AlpineJS: HTMX vs AlpineJS - Which should you use for your web app?

Map: LeafletJS - Free and pretty easy to use

Backend: F# / Giraffe - My go-to for spinning up fullstack apps quickly

• Project Boilerplate: CloudSeed Quickstart (Fullstack F# app in 10 minutes)
• F# / Giraffe: Build a simple F# web API with Giraffe

Hosting: Serverless containers on Digital Ocean App Platform

• Serverless container platforms: Digital Ocean App Platform vs Google Cloud Run Pricing (2024)

Next

Next time you want to visualize your travels, consider TravelMap!

Any and all feedback is greatly appreciated! I'm particuarly interested in how to make the mobile web experience better and ways to make the inputs / sharing experience easier overall.

If you liked this post you might also like:

• Shutting down my first startup
• My journey from Software Engineer to Entrepreneur and back again
• How I host my Server-Side-Rendered F# site on Google Cloud for less than $1 per month