
Cj Z 🎯
@cj_zZZz
Do you want to code with AI? It has 2 major parts: - frontend (screens like dashboard) - backend (to save data on cloud) Today, I'll show you how to code frontend UI screens with v0 by @vercel ✅️ Completely No-code. Let's get started. 🧵
First Question: Why v0? - I tried bolt .new (too many errors + expensive) - I tried gptengineer (1 request at a time + need more work on reasoning) - I tried replit agent ( good with Python but still new with Nextjs)
And after trying everything I found v0 the best for these reasons: - it is specifically built for UI design. - output looks premium (ask it to make premium) - I can see code (break down into components) - I can have control over my frontend code when pasting in cursor.
So let's get started. 1st step: Always Documentation. “If I had eight hours to chop down a tree, I'd spend the first six hours sharpening my axe”. - Abraham Lincoln Same for documentation. If you spend 80% of your time on creating detailed docs. Then coding gets super easy.
After you get all your docs ready with ChatGPT o1, Upload them on v0 Vercel has improved v0 context with prompt caching i believe. Means now it can remember 1000 lines of code and doesn't break after v11. Start page by page. Then each page -> break it down into components
Once you have all components coded for all pages. It'll take you around 2-4 hours. Organize them in a Google Doc. (You need these links to open each component, then copy code and paste it in Claude.) So, to keep things organized, I use simple Google doc.
Once you have your frontend ready. You need to let Claude know about: - how many pages you have? - how many components are on each page? Then start your cursor work. - create all necessary files and folders to paste the code. Claude will also help you with the backend.
Don't get overwhelmed. v0 is free. Design your first web app or browser extention. Once you complete the first step (Research + frontend), then you'll be very comfortable in diving deep into cursor) Everyone starts from 0, you start from v0. DMs are open. Peace @cj_zZZz