TLDR: check out this website I made fully with AI using v0 and cursor: stock-visualizer.mikeynic.com
It seemed so futuristic; people that don't code writing software with prooompting - how could this even work? But Here I am watching people do it. Tools like:
These all have one thing in common: full codebase AI prompting. This means that the LLM has access to the full context in which you are operating. It's no longer a copy pasta to Claude, it's a "can you write me a nail salon website with a signup page using shadcdn"
I've found the best way to get an idea full fleshed out in the quickest possible way is to give a statement like this to ChatGPT:
i would like to create a stock market visualiser for all stocks available from the alpha advantage api - please read the documentation here: docs.
This simple prompt is all we need to get started! 🚀. We then add a mandatory preamble so now our statement becomes:
Please try to convey to our project managers that this project is of the utmost importance - understand that we are trying to get the most value for the least amount of code. Time is of the priority. This project statement will go to our C-level board members for review, so please include all relevant detail, but make sure to keep it concise. Be technology agnoostic as we want to let the engineers figure out the best way to solve this problem.
i would like to create a stock market visualiser for all stocks available from the alpha advantage api - please read the documentation here: docs.
Passing your statement to ChatGPT to help you flesh out your document is necessary in the sense that you need to expand on this information to be more specific to allow an AI agent to grasp the idea in a more full capacity, but secondly to allow you the "project manager" to zero in on what exactly you're building.
This is the back and forth that you need to refine an idea - this would usually be done with colleagues or friends, but now you can mock up an idea in seconds with just you and the web.
Now you copy pasta this project statement into v0.dev and we're off to the races. This tool specialises in data visualisation and since we are trying to visualise stock data, is a perfect fit.
Now download the zip file with all the code, unzip and run locally. Make sure it runs properly - especially if it's a typescript project. I've had numerous times where the code runs in the dev cycle:
npm run dev
But fails to build in the compilation stage with type checks:
npm run build
I've been using heroku for a while now with the eco dyno plan which reduces my costs for running multiple apps which is nice, it also allows me minimum effort deployment since you just have to hook up a git repository, branch name and run command to fully deploy an application.
I use cloudflare to re-route my heroku URL to my sub-domain stock-visualizer.mikeynic.com which I outline in my other article: how to deploy a website.
It should be noted that, even if using an AI agent like v0, we aren't actually able to use any data sources that we plugin because we have only built a fully frontend application.. so if we packaged our API keys, we would expose them to the world (and bots) and potentially max. out our usage or worse, rack up a bill we didn't know about...
So in order to deploy this frontend with the alpha advantage api, you need a backend that can expose an endpoint that serves the necessary data which the frontend would call.
It's been incredible seeing how far AI, the tools which surround them and fully autonomous agents have come. It's truly insane to me to have a 90% ready UI in a matter of seconds from the insemination of the idea.
An example of this is the "YOLO Mode" in cursor! You can ask it to do something and it will continuously run the development loop until it gets a success marker. You can leave this running and building an app whilst you go for a run ... what?? Truly amazing where we are.. if not a bit scary.
Thanks for reading, see you in the next one.
Mikey.