WorldWise Full Stack App

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

  1. 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.
  2. 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

Features

  • React/Vite
  • Mongoose/MongoDB
  • Styled Component CSS Framework
  • Bcrypt & JSON Web Token
  • Cookies Authentication
  • Render (hosting platform) will make you wait up to 1-2 min while it spins up a free server