GeoSketch Live

I created GeoSketch Live because I'm passionate about making mapping creative, mobile, and personal. I saw how fitness apps track our daily travels and wondered: What if my walk, run, or ride could become art? I wanted to make drawing with my movements fun and easy to share, even without an internet connection. This led me to combine live location tracking, drawing, and AI.

How I Built It GeoSketch Live is a modern web app (PWA) I built to be fast, reliable, and beautiful to use.

Instantly Draw My Path: I can open the app and see my location on a dark, neon map. I just tap to start, and my movements create a glowing line that changes color based on my speed.

AI-Powered Recognition: When I'm finished, my tiny, on-device AI instantly analyzes my drawing. It turns my sketch into the closest matching shape—like a heart, circle, or star—with a smooth animation. If it doesn't match a shape, it's simply called "freeform."

Works Offline: I can draw, save, and look at my gallery of shapes even without an internet connection. My data is safely stored on my device and will automatically sync when I'm back online.

Easy to Share: I can save my creations to a gallery and easily share them with friends as a picture.

The Story Behind It Building GeoSketch Live came with a few challenges that I had to solve to make it great.

Making It Fast: I had to be very clever to make sure the app was super fast and smooth, even on slow mobile internet.

Ensuring Accuracy: GPS signals can be a bit wobbly, so I created special tools to smooth out my path, which helps the AI recognize shapes correctly.

Building a Tiny AI: Creating an AI model small enough to run right in my web browser was a unique and exciting challenge

Ultimately, I learned that technology can turn my movement into meaning. GeoSketch Live isn't just about where I wen it's about what I drew with my feet.

Built With

• and
• api-routes-(next.js:-src/app/api/shape/route.ts)
• colors
• css-masonry-columns
• custom
• custom-helpers-for-tensorflow.js-and-indexeddb
• custom-react-hooks
• deck.gl-pathlayer
• design
• ducanh2912/next-pwa
• environment-variables-from-.env
• eslint-(airbnb-config)
• firebase-firestore-lite
• for
• framer-motion-11
• github-actions
• googlemaps/js-api-loader
• html2canvas
• indexeddb-(via-idb-keyval)
• javascript
• manifest.json-(customized-for-pwa)
• next.js-14-(app-router)
• next/dynamic-(code-splitting)
• next/font-(self-hosted-inter-variable-font)
• playwright
• prettier
• react-(functional-components)
• service-worker
• tailwind
• tailwind-css-3.4
• tensorflow.js-4.15
• testing-library/react
• tflite-micro-model-(.tflite)
• tokens
• typescript-5.4
• vercel
• vitest
• workbox