Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

457 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

TravelMap logo

TravelMap is my personal travel archive: an interactive map, trip browser, photo gallery, timeline, and stats dashboard built around the places I have visited, lived in, or plan to visit.

The live app is available at map.pivi.dev.

What It Does

  • Shows visited, lived, and future cities on an interactive world map.
  • Draws trip routes and opens city tooltips directly from the map.
  • Groups trips by year, with detail pages for route, dates, duration, and cities.
  • Displays city photo galleries with a full-screen lightbox.
  • Tracks timeline and stats: distance, transport mode rankings with km, airline and ferry company rankings, continents, countries, currencies, timezones, UNESCO sites, and media count.
  • Supports English and Italian, light and dark themes, and mobile / desktop layouts.

Stack

React TypeScript PNPM NodeJS React Router HTML5 Python ESLint SASS Vite

Repository

.
β”œβ”€β”€ .github
β”‚   └── copilot-instructions.md
β”œβ”€β”€ AGENTS.md
β”œβ”€β”€ CLAUDE.md
β”œβ”€β”€ CODING_GUIDELINES.md
β”œβ”€β”€ logos
β”œβ”€β”€ scripts
β”‚   └── uploader
└── travel-map
    β”œβ”€β”€ public
    └── src
  • travel-map is the React application.
  • scripts: Contains a folder with the scripts used to process and upload images/videos and generate the JSON file.
    • Uploader: generates compressed and thumbnail images from travel photos and videos. It uploads them to bunnyCDN and generates a JSON file with the metadata. This JSON file is then used by the React app to display the galleries.
  • logos contains app and README logo assets.
  • CODING_GUIDELINES.md is the single source of truth for code style and engineering conventions.
  • AGENTS.md, CLAUDE.md, and .github/copilot-instructions.md configure Codex, Claude, and GitHub Copilot to follow those same guidelines for every code file.

Local Development

cd travel-map
pnpm install
pnpm dev

Useful commands:

pnpm run check
pnpm run lint
pnpm run format
pnpm run build
pnpm run knip
pnpm run security:audit

pnpm run check runs TypeScript checking, ESLint with zero warnings, a Prettier formatting check, unused-code analysis, and React Doctor. Run it before committing. The Husky pre-commit hook also checks staged TypeScript, TSX, JavaScript, styles, markup, and data files.

ESLint uses eslint-plugin-jsdoc to enforce the canonical documentation layout, including component titles, declaration spacing, typed parameters, documented destructured props, return values, and documentation for every named function, class, method, type, interface, and enum.

Dependency installation uses pnpm's seven-day release quarantine. The package update command also respects peer compatibility, while time-sensitive security patches are exempted and known-incompatible formatter, linter, and TypeScript releases are excluded. Transitive overrides replace vulnerable legacy releases. Run pnpm run security:audit for the JavaScript dependency audit. The uploader's Python pins can be checked with uvx pip-audit -r scripts/uploader/requirements.txt from the repository root.

Deploy

cd travel-map
pnpm run deploygh

About

βœˆοΈπŸ—ΊοΈ Travel Map is a personal web app built to track and relive my travel experiences. It features an interactive map with markers for every destination I’ve visited, allowing me to visualize my journeys at a glance. For each location, I can browse a curated gallery of photos, preserving the highlights of my adventures.

Resources

Stars

5 stars

Watchers

1 watching

Forks

Used by

Contributors

Languages