Cj Z 🎯

Cj Z 🎯

cj_zZZz

Published: 11/8/2024
41
67
741

Free AI coding Masterclass: (for beginners) I spent 217 hours on Cursor, v0 and Claude in last 48 days. I knew nothing about Nextjs App router structure. But now I am coding 1 web app in 4-7 days. (frontend, backend, sign in, landing page) Here's all my findings: 1. Documentation is key! Spend 80% of your time with GPT4o1 model. You need to create document for everything. - Project Requirements Doc (PRD) - Each Page layout and structure - App flow doc - App functionality doc Once you have the docs. Save them in .md format and go to Claude! Yes Claude. 2. Claude will be your main brain. (Claude 3.5 sonnet available on cursor is dumb, I doubt it is 3.5 sonnet) So create a PROJECT on Claude and upload all docs you've created with o1 model. 3. Now go to v0 by vercel. (v0 will be your best frontend designer) Start a new PROJECT on v0. Take each page doc like (dashboard page, app flow and functionality docs) and paste it there. Now v0 will have the context about the project, tech stack, flow and what this app will do. Now start building frontend components. Make sure you break down each page into multiple components like - header - metrics - form Etc This will help you refine the code with v0 without breaking. Because you have all docs ready, it'll save you alot of time on v0 and v0 components will be designed quickly. (v0 starts breaking up after v10 of any component, so fork it before v10 and continue the editing) Once you have al the components ready from v0. 4. Go back to Claude and paste each page code in Claude Project. This will give Claude the context of the code + the requirements of the project. It will help you when you work on cursor. 5. Now go to replit. (Replit will help you connect Cursor + Github + Localhost) Go to Replit, start new Nextjs Repl. (I personally use Supabase + Nextjs Starter kit boilerplate from Supabase) it's good. Connect Github Connect cursor with SSH connection. 6. Now go to cursor. Create all folders and files Claude ask you to create. Run project on Replit. Paste the code in specific folders. Install all dependencies. Now you have the frontend code steup. 7. Create backend. I use Supabase to create the database, storage and even auth too. AI can code you the Database tables, that's the best part. So go to Supabase, start new project. Get your keys and paste in env.local file in cursor. Now you have connected supabase. 8. Ask AI to help you create backend (database tables, storage buckets, auth tables) Follow the instructions Claude is giving you. Once you're done. Now you'll have a proper Web app with frontend, backend and sign in sign up functionality. 9. This is debugging and refinement time. Test all features on all pages and use claude + cursor composer to get the debugging work done. 10. Design the landing page. O1 for content and lauout V0 for code. Cursor for assembling code. Replit to deploy your landing page. Now you have a Modern Web app with Modern Landing page. It looks complicated right? But it's not. It's never been as easy to hard code software before. 50 days back i didn't know; - Next js App router - database tables - auth functions - shadcn Radix - SSH connection AI helped me learn coding. Now I can code a proper web app in max 7 days. Coded 7 projects in last 30 days. Now my plan is to, not share the business plans but build businesses with AI code. And sell the projects on Acquire .com or to clients (as I'm doing right now) And repeat. I love to build, so I'll continue that. Send me a DM if you need any specific help. Share the tweet to break me free from Algo bans. Thanks. - CJ

Tweet image

Share this thread