Address Mapper

Over the labor day weekend, I decided to try cursor. I think of this as the next version of github copilot. In addition to autocompletion, the entire IDE becomes a LLM workspace where anything can be used as context and also prompted against. Cursor is a fork of vscode (my primary IDE), which is to the IDE space what chrome is to browsers. When installing cursor, there's a one click process to migrate over all your extensions which smoothes out the transition.

I wanted to build a map app where I could input a series of newline delimited addresses and plot them all in a map. The use case: I just moved to the bay area and want to find good caffee places that had fast internet. Asking perplexity yielded a bunch of potential locations - I wanted to visualize them in a map but didn't want to put them in to google maps one by one. Example of the input:

270 Seventh St, San Francisco, CA
432B Octavia St, San Francisco, CA
3655 Lawton St, San Francisco, CA
672 Stanyan St, San Francisco, CA
Haus Coffee, Mission, San Francisco, CA
...

This is by no means a painkiller problem but it was a pain point for me and more importantly, was a well scoped mini project I could use to test out cursor.

Instead of going over the entire setup and prompting chronology, I'm going to skip ahead to output and takeaways.

Demo

Takeaways:

cursor is very impressive - it took me ~30min to build a web app in nextjs & typescript that fufilled the specifications as well as add some customization on top
especially useful for some of the following usecase
- changing implementation details of functions (eg. swap geocoding api from opencagedata to mapbox)
- adding logs to all function calls
- translating pseudo code into real code
- making style adjustments in english
- adding additional enhancements to the functionality (eg. modify the location marker icons so that it shows labels as text above the icon)
this was enough to make me set cursor as my default coding environment - will see if I run into any issues with this decision over the next week
one thing I worry about is the "autopilot effect" - it becomes easy to be so reliant on the ai that we lose the underlying skills to do the thing itself (eg. developing a sense of direction vs relying on google maps)
- for now, I do like to model out how I like the code to be implemented, if only in my head, and be able to still do that mental modelling so I have a baseline that I can use to compare with the output
modern web apps are way too complex
- my initial prompt (write a webapp that given a series of addresses will plot it on a google maps like interface), yielded a single html file with vanilla html and javascript that basically worked but needed to be refactored so that api keys (used for geocoding to translate human addresses to coordinates) weren't leaked on the client side
- the simple thing to do is the levels approach - write a backend in php that revelaed a single api endpoint that did the geocoding
- since most of my experience with webapps came with nextjs, I had cursor generate nextjs scaffolding (in typescript of course). getting nextjs and typescript to bootstrap properly took up most of the time in getting this app off the ground
need to figure out a good way of documenting experience with llms - copying and pasting the entire prompt and response chain is an option but much too cumbsersome and manual at this point

Created 2024-09-02T15:08:30.220000, updated 2024-09-02T20:54:04.752000 · History · Edit

Address Mapper

Demo

Takeaways:

Related