The Project
This Full Stack App keeps track of your travel adventures by using your GPS coordinates or entering location details in a form after clicking a location on an interactive Global Map, leveraging two great open-source tools: Leaflet and Open Street Map. The project started in a Udemy course, and expand into this full stack app with login authentication capabilities.
Stack
The frontend is built using React with Vite and Mongoose to support the backend architecture, while secure user login is managed with MongoDB architecture on the backend. Styling is implemented with the Styled Component CSS Framework, encryption is handled with Bcrypt, tokens are managed with JSON Web Token (securely transferring data within parties using a JSON object), and those tokens are verified with cookies. This last step ensures you can send them whenever you make an HTTP request without worry versus using local storage, which is not entirely secure.
Register, log in, and begin clicking anywhere on the map to autofill your personalized location and date details, and submit to add it to your custom list.
Or log in, explore, and test with this dummy account:
email: user123@user123.com
password: user123
Two Important Notes
- Render (the hosting platform I’m using) will make you wait up to 1 or 2 minutes until you can log in. That’s how long it generally takes to spin up a free working server on demand. It’s a great platform for building and testing new projects without paying hosting fees.
- LLMs were very helpful in quickly learning how to use new libraries, and tracking and fixing bugs, without which this project would have taken significantly more time.
Github Repo: https://github.com/osalvatierra/worldwise-full-mern
