Traveling World Map
An interactive map of the countries, cities and theme parks I've visited.
Tech stack
- React
- TypeScript
- Leaflet
- Fastify
- Drizzle ORM
- PostgreSQL
- Node.js
A Leaflet world map that highlights visited countries and drills through a country to city to theme park to ride hierarchy, with a detail panel per park (photos, favourite coaster and flat ride) and a stats panel totalling countries, cities, parks and coasters. An admin mode adds places and manages the login.
Features
- Visited countries highlighted on a Leaflet world map, with city and theme-park markers.
- Hover a country for its city list, a city for photos, a park for its favourite coaster and flat ride.
- Click any element for a detail panel drilling country → city → theme park → rides.
- Admin mode (password) adds inline forms to create, edit and delete countries, cities, parks and rides, with a pick-on-map location picker.
- Stats panel with totals and lists of countries, parks and favourite coasters.
About this project
Visited countries are highlighted on a react-leaflet world map, with city and theme-park markers and a top toolbar. Selecting a park opens a detail panel with photos, the favourite coaster and flat ride, and the full ride list; a stats panel totals countries, cities, theme parks and coasters.
Admin mode adds a country with a been-here or want-to-go status and an optional year, and the login password can be changed from within the app.
The project is an npm workspaces monorepo: a shared package of TypeScript types, a Fastify plus Drizzle plus Postgres REST API, a React map client, and a Vercel function entrypoint that runs the server as a single serverless function.