Travel Map

This is a full-stack social travel mapping application built with React and Express that enables users to collaboratively share and discover travel experiences through an interactive Mapbox-powered map interface. Users can create accounts, authenticate, and drop pins at any location by double-clicking (desktop) or long-pressing (mobile) on the map, where they can add a custom title, written review, and 1-5 star rating for that place. The application provides a social layer by displaying all users' pins simultaneously on the map - a user's own pins appear in tomato red while other travelers' pins show in slate blue, creating a visual distinction between personal and community content. When clicking any pin, users can view the full review details including the place name, rating displayed as gold stars, review text, creator username, and timestamp. Users can delete their own pins, switch between six different map styles (Streets, Outdoors, Satellite, etc.), and the application features mobile-responsive design with touch-optimized interactions and an animated intro sequence, all backed by MongoDB for data persistence and supporting real-time updates as new pins are added by the community.

Technology Utilized

This Travel Map application is built using a modern full-stack JavaScript architecture deployed as separate services in the cloud on Railway, with the frontend and backend as independent Railway services that interact with each other. The frontend leverages React 18 with react-map-gl and Mapbox GL for interactive mapping capabilities, allowing users to visualize and interact with location pins on various map styles (streets, satellite, outdoors, etc.). The UI is enhanced with Material-UI (MUI) components and icons for a polished user experience, and axios handles HTTP requests to the backend API. On the backend, the application runs on Node.js with Express.js serving as the web framework, which handles RESTful API routes for user authentication and pin management. MongoDB serves as the NoSQL database with Mongoose as the ODM (Object-Document Mapper) for schema modeling and database operations. Security is implemented through bcrypt for password hashing, and CORS middleware enables secure cross-origin resource sharing between the frontend and backend services. The application uses dotenv for environment configuration management on both ends, and webpack bundles the frontend assets via Create React App's build system.

Build Context

This app was built as an improvement and continuation of the skills I learned from my bus tracking app, and as you can tell at this point, I have a love for mapping applications! I really liked the complexity of learning about mapboxes API in greater detail, such as storing location data, adding annotations to the map, and managing map-state data. It's not the first application I built with authentication, but it is one of the first I built where the authentication data influences aspects of the styling and information displayed. Also in refactoring the application, along with making it mobile responsive, I also ventured into animation by adding an intro opening sequence which was something I haven't experimented with up until this point.

Changes and Improvements

I have made a number of improvements in refactoring this application. I made the application fully responsive and fixed issues with window size, and layout. With making the application mobile responsive, I had to add a long press feature, as double tap wasn't mobile optimized. Following this, I built functionality to cancel if the user moves their finger more than 10 pixels to prevent accidental long presses while moving the map. I also added a selector so users can change what style of mapbox map is being dispayed, and this allows a more nuanced approach to information as some map styles have different information, such as contour lines on the "outdoor" style. Finally, I created an animated opening sequence to experiment with animation.