Learning to code with Cursor

Learning to code with Cursor

I’ve used Cursor to build a web app with almost zero previous coding experience. It only took me 10 hours, and I had an absolute blast putting it together.

V1 of my app
V1 of my app

What did I build?

I’ve build an app that helps you plan your next kitesurf session. To do so it;

  • Shows you kitesurf locations (spots) close to you
  • Shows you if they are “working” or not
    • Is the wind strong enough?
    • Is it coming from the right direction?

This required getting data on the kite spots and wind predictions, and combining it into an (somewhat) intuitive interface.

How did I do it?

I basically had to do five big things:

  1. I collected data on the spots
  2. I then broke down my vision for the product to its main elements, and generated each with Cursor
  3. After which I got it working on my local environment
  4. I’ve then hosted it on Netlify
  5. And finally added Render for the backend and cronjobs to get fresh wind data

This whole process was surprisingly simple. Most of the work was in thinking about what to build and where to get the right data, both of which aren’t coding tasks, and are actually things I’m doing on a daily basis as a PM.

A bit more detail on what I’ve build with Cursor As you can see from the app, the main components I needed where:

  • Some type of cards for the spots, to show in a list for desktop, or in a bottomsheet for mobile browsers
  • A map that displays these spots, and turns them green when they are “working”
  • Which in turns requires accurate wind forecast

That’s all!

Then I asked Cursor to help me design each component. It did a great job, especially at the first 90%. Seeing something that was almost done motivated me to push trough and get the final 10% done. I’ve started a couple weeks ago and V.0.1 is done now. You can try it out here (Portugal-only for now). Building this only took me about 10 hours during some quiet moments at night or on the weekends.

My “stack”

I’ve tried to keep it as simple as possible, and use two SAAS products to run my app:

  1. Netlify: This is where I host the front-end. It was super easy to just drop my file folder into Netlify.
  2. No Github for me amigos!
    No Github for me amigos!
  3. Render: This is where my database, API’s and cronjobs live. I’ve coded everything in Python, which I had to use a tiny bit in uni. This setup was a bit of a hassle, but with the help of o1 (via ChatGPT interface, not in Cursor)I figured it out pretty quickly.
  4. Thanks @ Frandilo for the tip!
    Thanks @ Frandilo for the tip!

Why did I make this?

I’ve been making things my entire live. Be it wood working, making art, a van conversion, 3D printing, you name it. While studying as Industrial Designer (started in 2013) I made some software projects with friends and interned at a few startups. I was always in the role of designer, or “product manager” bringing together the team and setting the vision. I continued on this path after graduation, becoming a PM at Picnic (Amazon’s future competitor doing over 2B+ revenue) and now VEED.IO (one of the fastest growing startups in Sequoia’s portfolio). While I absolutely loved or love both jobs, and I really enjoy working with a team, I do sometimes miss the simple joy of creating things myself. So when Cursor became a thing on tech twitter, I decided to give it a spin. Because I believe doing, is the only way to true understanding.

My experience building with Cursor: the flow zone

I decided on how to build something in the most simple stack: vanilla JS/CSS/HTML (shout Pieter Levels), and Python for all DB-related scripts (I still knew a tiny bit of Python from uni). As I talked about earlier, the first 90% is super fast, and this speed is great opium to get me into the flow zone. The final 10% that is what gives you the headache, but to me that’s fine. Sure, I’d love to get to the end-state in one shot, but this weird feeling of “almost being done” really works for me. The effort I already sank in makes me charge like a bull at a red flag. I want to get it done. And then I do get it done. I love that feeling.

Mihaly Csikszentmihalyi’s model for Flow
Mihaly Csikszentmihalyi’s model for Flow

The second thing that Cursor does to keep me in the flow is when I hit a problem. Before, I would get stuck on something (often pretty quickly due to my skill issues) and had to comb through a bunch of nerds arguing on Stackoverflow to find the solution to my problem. And even if I found one, it was only a point solution. It never covered the full scope of my project. Hence I ended up making tons of mistakes. Now I always get my answer, and the answer comes with context.

I’m sure the experience is different for expert coders vs. myself. The engineers I talked to who are using Cursor (say that) they are using it mostly for generating boilerplate code. These anecdotes are backed up by research from Microsoft that report higher productivity gains for junior engineers. And I am a very junior engineer.

PRs, commits, builds go brrr
PRs, commits, builds go brrr

How I use Cursor

I think I use Cursor mostly like anyone else, but one thing I do that really helps me and I’d like to share: I use a lot of visuals. I have Figma open while coding and feed some image into my chat to explain what I want to do.

image

Room for improvement

It’s not all rainbows and butterflies, Cursor is still in its very early innings. At takes it can be painfully dumb, duplicating or deleting code it shouldn’t, or just choosing plain bad engineering solutions. There are a few things I would like to see before I’d feel truly empowered to write production-grade software:

  • More accuracy Smarter LLMs that make fewer mistakes and help me code in a more consistent and coherent way is #1 on my wishlist. The great thing here I think is that Cursor can simply rely on frontier models getting better. So I’m super bullish on this getting better over time.
  • Smarter prompting The responses are only as good as the prompts. Cursor sometimes doesn’t include the right files, or seems to lose some tokens. When that happens it feels like you’re running in circles. Cursor can become smarter in deciding what to include in the prompt, or remind you if something is being excluded in your conversation.
  • Better support for settings up the project When figuring out the architecture of your project, Cursor isn’t super helpful yet. For coders like me that’s a bit of a problem. I decided on the architecture and where to host it myself, but it would be great if Cursor can help with that or offer some templates (map-based web app, etc) to save you time when getting started.

I can just code things

Sama’s tweet has become a meme lately, with people sharing all the things you can just do. I’m not new to the concept of agency, this has always been my mindset. But somehow for coding this has never clicked for me until now. I never got in the flow zone. Cursor has helped me get out of that rut, it makes building fun. It has given me the confidence to just build the software I need or want. Whether it’s a complete new app as I did for kitemap.io, simple tools for day-to-day tasks, or smart automations for my job “I can just code things”.

image