Tech Stack

MapBoxAPI

High End API Used For High Quality, Customizable Maps With Interactive Features.

Tanstack Query

Handles Server State & Caching For Efficient Data Fetching.

React Router FrameWork

Enables Structured, Route Based Navigation Similar to Remix.

Zustand

Minimal Boilerplate. Works Well Alongside TanStack Query to Keep Client & Server State Cleanly Separated.

Made Using: npx create-react-router@latest

Project Journey

A Visual Journey Through My Travels

This project is a revamped version of an earlier build. I upgraded the mapping functionality by replacing Leaflet with the more modern Mapbox API. The app features interactive pins highlighting places I’ve visited, each paired with personal photos to create a more engaging and visual experience.

Code Highlights

1 2// 404 already provided in root.tsx file by React Router 3export default [ 4 index("routes/Home.jsx"), 5 layout("layouts/WorldLayout.jsx", [ 6 route("past-adventures", "routes/Past-Adventures.jsx"), 7 route("future-adventures", "routes/Future-Adventures.jsx"), 8 ]), 9] satisfies RouteConfig; 10