Tech Stack

React + CSS Modules

Component-based UI with scoped styling

Context API

State management solution

React Router

Navigation and routing

Geolocation API Leaflet Maps

User location tracking

Project Journey

A Visual Journey Through My Travels

This project is a rework of an older version I had previously built. I upgraded the map feature by switching from Leaflet to the more modern Mapbox API. The app includes interactive pins marking the places I've visited, along with photos from each adventure to give a more personal and visual touch.

Code Highlights

Map.jsx
1 2const Map = () => { 3 return ( 4 <div className={styles.mapContainer}> 5 <MapContainer 6 center={mapPosition} 7 // center={[lat, lng]} 8 zoom={3.1} 9 scrollWheelZoom={true} 10 className={styles.map}> 11 <TileLayer 12 attribution='&copy; 13 <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> 14 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" 15 /> 16 {cities.map((city) => ( 17 <Marker 18 position={[city.position.lat, city.position.lng]} 19 key={city.id}> 20 <Popup> 21 <div>{city.notes}</div> 22 <br /> 23 <div>{city.emoji}</div> 24 <div>{city.cityName}</div> 25 </Popup> 26 </Marker> 27 ))} 28 29 <ChangeCenter position={[lat || 36.1699, lng || 2.1398]} /> 30 <DetectClick /> 31 </MapContainer> 32 </div> 33 ); 34} 35 36