Skip to content

Location-based notes web application built during an internship. Create and manage geolocated notes using Google Maps API integration. Built with Vue.js and Supabase.

Notifications You must be signed in to change notification settings

kodzukye/geonotes

Repository files navigation

📍 Geonotes

Web application for geolocated notes developed during an internship

A location-based notes web application that allows users to create, manage, and visualize notes attached to specific geographic locations using an interactive map interface.

Vue.js Supabase Google Maps

🎯 Overview

Geonotes is a full-stack web application developed during an internship that enables users to pin notes to real-world locations. Whether you're documenting points of interest, creating location-based reminders, or organizing information spatially, Geonotes provides an intuitive interface powered by Google Maps integration.

✨ Features

  • Interactive Map Interface: Browse and navigate using Google Maps API
  • Create Location-Based Notes: Pin notes to specific geographic coordinates with a simple click
  • Responsive Design: Seamless experience across desktop and mobile devices
  • User Authentication: Secure login and user management

🛠️ Tech Stack

  • Frontend Framework: Vue.js
  • Backend & Database: Supabase (PostgreSQL, Authentication)
  • Maps Integration: Google Maps JavaScript API
  • Languages: JavaScript, HTML, CSS

📋 Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js
  • npm or yarn
  • A Supabase account
  • A Google Cloud Platform account with Maps API enabled

🚀 Getting Started

1. Clone the repository

git clone https://github.com/kodzukye/geonotes.git
cd geonotes

2. Install dependencies

npm install

3. Run the development server

npm run dev

The application will be available at http://localhost:5173

📖 Usage

  1. Sign Up/Login: Create an account or log in to access the application
  2. View Map: The main interface displays an interactive Google Map
  3. Create a Note: Click on any location on the map to create a new note
  4. View Notes: Click on existing markers to view note details
  5. Edit/Delete: Manage your notes with edit and delete options

🎓 About This Project

This application was developed as part of an internship project, demonstrating:

  • Full-stack web development capabilities
  • Third-party API integration (Google Maps)
  • Data management with Supabase
  • Modern JavaScript framework implementation (Vue.js)
  • Responsive web design principles

About

Location-based notes web application built during an internship. Create and manage geolocated notes using Google Maps API integration. Built with Vue.js and Supabase.

Topics

Resources

Stars

Watchers

Forks