Make a profile, give it your location. It is safe, I had my code checked :)
The idea
I struggle with note taking. Actually, I take way too many of them, never go back, edit over them. Currently, I'm over a thousand notes on my phone. So I thought: how can pollute my notes even better, what other useless information could I record to take my note taking to the next level.
20 mins in Figma and I'm starting to dream about awesome features, forgetting that I still need to build this.
Making agent create and follow a PRD
I wanted to see how far I can get and if this can be a real project. This time I asked Claude right in the Cursor chat window to write a PRD, then, define a list of features, then define a success criteria per feature.
When executing on a task agent had to re-verify all the work an d update success criteria document, then push code to sharing including summary of changes, so there was a record of changes.
Tech stack
- Shad cn
- Typescript
- Cursor + Claude
- Vercel
- Supabase
My PRD included:
- Project setup and authenticaiton
- Note creation interface
- Map integration
- User experience for interactions with notes
- Data management
- Polish and testing
Later I explored I was not specific enough with my planing.
3 hours later, MVP is out
Not perfect but super good! Still I had to do some light debugging and learning:
- Storing secrets in .env
- Some Supabase columns were missing - Claude expanded the scope of needed data later in the project, despite location working locally, it was not in production, some columns were missing.
- Using client directive, then remembering to switch it to server when deploying.
- Lint control was failing my deployment.
- Claude was using deprecated form of authentication, so I had to manually set some files up.
First I had to make sure that Leaflet could support my ambitions. I was feeling optimistic after discovering I could customize map icon.
Maximizing free credits
To this point I have been using Cursors built in Claude agent. Ive run out of free 50 monthly credits. I was happy with result, however I was curious to try out a new model.
Second popular model on open router was Google Gemini at a time. I bought 15 dollars of credits, downloaded Roo for VS code, plugged in my code. My next task was to polish UX.
Cursor Agent vs Roo Orchestrator
Super comparable user experience, I did find that Roo Orchestrator would test my code as it built it, which resulted in some debugging I did not have to do. Additionally, I could control auto-approve on some of the tasks. Once Gemini was hitting a wall I decided to give Claude 3.7 a try.
Thoughts on Claude 3.7
It costed over 6 dollars of credits to do a map rendering debugging task, it edited files outside of the scope, added enormous amount of logs that made it challenging for me to navigate my console. In comparison, Gemini would never cost me over a dollar to do debugging.
My codebase was growing, I noticed repeated logic, then authentication stopped working, so I reverted my changes and, sadly, fired Claude.
Rendering issues would persist
I was loosing my patience, but I had to get it working! Some styling and a small delete feature made it feel like one step forward, two steps back. I knew fixing rendering was critical.
Top priority items to fix:
- Rendering
- Rendering
- Rendering
and also:
- Transition between list view and note view
- Different colour for map
- Sign out broken
3 hours later. Committing +84 -1000 lines of code
I had to do my dirty laundry :
- Excessive logging functions everywhere
- Created and never used components
- if statements and ignoring already created functions
💅 Polish
And we done! I was pleasantly surprised how fast how far I could get with zero programming experience.
Big thanks to Alec with helping me debug.
Make a profile, give it your location. It is safe, I had my code checked :)
What are the takeaways?
Ambiguous tasks will result in poor results
Simply because the outcome with unmatched your expectations. It is easy to be lazy and give the model a short prompt, then be angry at it for not reading your mind.
English is not your model's best language
Humans like to communication in metaphors, storytelling is our natural way of passing information, however that's not how some of these models think. Read my food generation experiment with some explicit examples
Valeriia Zub
Adding code is easier than cleaning it
Providing the model very clear step by step instructions helped me with progressing on this project, I would commit each feature which helped me with reverting back if one functionality was added that I could not debug.
I may do more of these, let me know what you think :)
