GeoNotes (Track 1)

This project lets you interact with a live Google Map, place pins at any location, attach notes to those pins and share your pins to others.

Comment

Inspiration

Earth sciences can often feel abstract and challenging to fully grasp when learned only through textbooks and theory. Concepts like cultural traditions, geological formations, or the significance of certain places become much easier to understand when they are tied to real-world locations. GeoNotes was created to bridge that gap to help learners connect earth sciences topics to real-world locations on a map. By turning static information into a dynamic, place-based experience, GeoNotes makes earth sciences more engaging, memorable, and meaningful.

What it does

GeoNotes transforms learning earth sciences into an interactive experience. Instead of memorizing abstract facts, users can drop pins on a live map and attach notes that capture cultural traditions, geological features, food experiences, personal observations and more. Each pin is stored and organized in categories, allowing learners to build their own knowledge map of places around the world. And guess what, you can also share your pin to others!!!

Over time, GeoNotes becomes both a personal learning journal and a visual tool that makes earth sciences easier to understand, explore, and remember.

How we built it

We built GeoNotes with a combination of frontend and backend technologies that work together to create a seamless experience. On the backend, we used Node.js with Express to create a REST API that handles storing, retrieving, updating, and deleting pins and notes. Data is persisted in a JSON-based storage file for simplicity, with MongoDB support prepared for future scalability.

On the frontend, we used the Google Maps JavaScript API to render an interactive world map. Users can click anywhere to drop a pin, which then triggers a popup for writing notes. Notes are saved through API calls to the backend and displayed in a sidebar interface that organizes pins for easy browsing.

To improve our workflow, we used Nodemon for automatic server restarts during development and dotenv to manage configuration like server ports and API keys. Together, these pieces gave us a fully functional, interactive map tool designed specifically for learning earth sciences.

Challenges we ran into

  • Code bugs.
  • Outdated data.
  • Code merging conflicts.

Accomplishments that we're proud of

  • Built a fully functional interactive map with pin and note-taking features.
  • Designed and connected a database where pins and notes are stored, ensuring persistence across sessions.
  • Enabled user interaction and sharing, so pins and notes can be shared and exchanged between users.
  • Successfully integrated the Google Maps API to support location-based learning.
  • Created a sidebar interface that makes browsing, editing, and managing notes intuitive.
  • Developed a flexible category system to organize pins by themes.

What we learned

  • Implemented a fully functional NoSQL database.
  • Designed the layouts and UI.
  • Teamworking.
  • Integrated multiple APIs.

What's next for GeoNotes

  • More drawing and noting features, for example: Drawing on the map, attaching picture,...
  • AI integration: Included AI to help the users take notes, search,...
  • Support more languages
  • Dark mode
  • More themes, templates and layouts
  • Support more platforms (Mobiles, tablets,...)
  • More sharing features between the users (Share real-time locations,...)

Built With

  • google-platform-api
  • mern
Share this project:

Updates