Cj Z 🎯

File Structure. This is very important. If you let AI to setup your directory, it'll create a messy directory with too many sub folders. This will cause errors later on. Ask Claude: "Create simple file directory following best practices of Nextjs 14 App router"

Now go to bolt. new Paste that file directory and ask bolt to create all folders and files for you. It does a pretty good job on this. Once your project is setup and file structure is created. Now lets move to coding the frontend.

Here're few tricks. Do not start with authentication! (Creating sign in, sign up logics) It's a hit or miss with bolt. If you get stuck it'll eat your tokens in just error handling again and again. "We'll add auth later on. Lets start with coding basic skeleton"

Provide the skeleton to bolt. "The app has 2 parts: 1. Left sidebar with Navigation menu. 2. Main content area to display dynamic content based on which page user is on" Now provide your: - sidebar code to bolt - provide screenshot if you can It'll create a basic skeleton.

Now move to pages of your saas. Like: - Dashboard - History - Settings - Help Etc I use Claude to provide me the production ready code with all features working. Bcoz I attached v0 code to claude, it can read code + features i want from PRD and refine the final code.

I take that code and don't paste it in bolt chat section. (This will burn alot of tokens) I page the code in right file. Like: Dashboard > - page.tsx (I will paste Dashboard code in tsx file of Dashboard) Then I'll select all code (click on ask AI) and then ask bolt...

"I've added the code for Dashboard in app/dashboard/page.tsx Fix any errors and run the code" It'll go and update .json files install any dependencies if required. And run the code (without writing that from scratch in relevant file) This one trick saved me alot of tokens.

Now get all your pages done like this. Once you're frontend is coded and all pages are working. ✅️ sidebar ✅️ dashboard ✅️ history ✅️ settings ✅️ help It's time to get out of bolt! We used bolt to set up project super fast + setting up file directory + frontend code

Now it's time to move to cursor. Cursor is great for: - adding functionality (sign in + database + storage) - debugging errors. - refining the UI (if you want to add anything or remove) So upload your bolt project to Github then connect it with cursor.

Now you have working frontend that you assembled with bolt, opened in cursor. Now it's time to build strong "context boundary" for cursor. Cursor is dumb if you don’t add docs, don't add .cursorrules file and don’t provide step by step instructions. So add docs in .md format.

Now you can start the workflow in cursor. I start with: - auth (sign in, sign up logic) - APIs (if I use any API) - then database (to store data) I use supabase for my projects because AI can right SQL code that'll create all tables for me very easily Use claude to do that.

Now once you've added your backend and it is connected to frontend. You have a working app. Test all features, buttons, flows and ask cursor to make adjustments. Write detailed messages + attach relavent files only to ask cursor to make changes. That's it. That's the flow.

You used Cursor as your coding guide. It will provide you step by step roadmap on what should you do next. You used bolt to code the frontend (with cursor it takes 10x more time) You used Cursor to add backend and refine the project. Now you can deploy this app.

It won't be a straightforward flow. You'll encounter errors, you'll mess up few logics, but you'll pass these hurdles if you just keep on refining. Tips: - Don't get burned out. - Don't quit. You'll learn so much about coding by building things. Start today. Peace @cj_zZZz