I think this is the most useful tutorial on Cursor AI so far. I have watched all the other tutorials, and usually, we see some silly games built or high-level information about the tool. But tutorials like this one are really helpful. Thanks for posting this video.
@@VoloBuildsI wish you could do more videos like these. I'm fairly new to coding - coming from the medical sciences; I like to pretend I know R at least - and I'm seriously flirting with developing some local apps, specially regarding research, for my own and colleagues uses. But after some prototyping and tinkering, I know see that this kind of job ain't as straightforward as some folks of the AI hype like to put - and that's where practical full stack developments videos like yours really shine. Anyway, thanks.
@@levi4328 Thank you! I am curious to understand how you watch a video like this - do you watch it in one sitting or in parts? Do you try to replicate what I am building or just pull insights out of what I'm saying? Either way, glad it helped!
@@VoloBuilds Well i watched it in mostly 1 go. Today's my freetime. I've fed the videos transcript into chatgpt for some further breakdown of some points and to ensure i understand everything fully. I also plan, later tomorrow, sit a little bit to make some tests (and that involves replication) to further familiarize myself with the languages/tools you leveraged - as many things are still too new to me. But to further add to the feedback, i really these long format videos as they provide rather invaluable insights into the workflow and decision-making process involved, which is something that cant really be elicited with mere study and tinkering - and is specially crucial for people like me who have nearly 0 idea of what it takes to develop things from scratch. It's like watching surgery videos: i may already now the full basis and procedure, but how these theoretical concepts orchestrate to achieve operative success in practice involves more than their mere knowledge - it takes your own decisions and approaches.
@@VoloBuilds Well i watched it in mostly 1 go. Today's my freetime. I've fed the videos transcript into chatgpt for some further breakdown of some points and to ensure i understand everything fully. I also plan, later tomorrow, sit a little bit to make some tests (and that involves replication) to further familiarize myself with the languages/tools you leveraged - as many things are still too new to me. But to further add to the feedback, i really these long format videos as they provide rather invaluable insights into the workflow and decision-making process involved, which is something that cant really be elicited with mere study and tinkering - and is specially crucial for people like me who have nearly 0 idea of what it takes to develop things from scratch. It's like watching surgery videos: i may already now the full basis and procedure, but how these theoretical concepts orchestrate to achieve operative success in practice involves more than their mere knowledge - it takes your own decisions and approaches.
Thank you! Yes it definitely helps to actually understand how to code... Lots of people will get 90% of the way there with AI but spend 90% of their time stuck in a troubleshooting loop before giving up.. Understanding how to code helps prevent this!
Love this tutorial. thank you so much for doing everything step by step and showing us the entire process. Only minor thing i'd recommend if possible is to make your camera a bit smaller in the video as i find it covers the screen quite a bit or increase the transparency of your video so we can see behind it :) thank you so much! Amazing work
@@VoloBuilds Thank you for the video, but what I'm wondering is: Can someone who is considering a career in data analysis make comprehensive projects for their CV as you do? Should I buy the cursor?
So you also need to familiarize yourself with the code and not just blindly following whatever Cursor is telling you because as we've seen here, Cursor can still get confused. You need to study your code and get comfortable with it to even get an idea of what questions to ask and what query to make.
Yep! Even if you're a non-coder using these tools for the first time, I think it's good to try and get an idea of what the code is actually doing because otherwise you could end up with bugs and the software won't work the way you intended
yeah you are exactly right. If you don't know what its output is working, sometimes can lead to throw an error and this error may cause spending more time to correct whole project working again.
This was great. I want to see a video where the limits are pushed and something simple, yet more advanced with great looking ai. so many people create these simple apps, but i think it would be more inspiring seeing someone push the limits on whats possible.
Thanks Djah! I did hit some limits in the video when I submitted too much context - and that seems to be the biggest problem. I've also learned to be very proactive with refactoring code to ensure my files are ~100 lines or less because this leads to the best results for the AI and allows me to tag just the relevant context. If you keep your codebase organized like that, then even in a large project you'd have a similar experience as I showed in this video. I've used it in large projects as well for writing enterprise software for my clients.
To create new files from chat add to cursor rules requirements "if sugesting creating files, folders or running terminal commands do it in the bush code block. It works 2/3 of the time. Than just clich run in block and it runs the command in active terminal.
Thanks for the tip! I'll have to try that out. Believe it or not, I have never modified my cursor rules 😅 I just use the defaults! But that's a good idea there.
Eagerly waiting for the video on google app engine or google cloud services ... I have a tough time with it too.. Thanks so much for the video here! Helped me understand a lot! Specifically, how following through what and where it's changing each time .. and how being planned w.r.t design, routing, in general logic goes a long way.. How it sort of helps maximise on what already has been made easy!
Glad you are enjoying all the videos :) thanks for sharing your thoughts! I do plan to make a video at some point about deploying - trying to find a clean and easy way to do it so I can explain it clearly and help people get their apps onto real websites.
Funny about v0. It does designs really well and I am writing in Svelte. I thought simply copy pasting and asking cursor to translate React into Svelte 5 code would work, but Cursor starts hallucinating and uses Reacts mental model in Svelte with a bunch of TS errors. Another way how to do it is to use a screenshot and ask Cursor to use it as an inspiration.
Ouch! Yeah I have been fortunate to use full-stack JS with React as my primary combo which just happens to be what Cursor / Sonnet 3.5 is most effective at writing haha. Yeah being able to use screenshots is a great feature!
Great, thank you! I had the same experience as you, and sometimes I try to solve some impossible things for the LLM myself. It gives me a pleasant feeling😀
Yes! It really becomes a collaborative effort haha - the key is knowing when to pause and think about the problem vs just let the AI chug away at solving it :) Thanks for watching, Andreas!
Recommend opening the Console in Chrome, and paste back any errors. Often faster to fix errors, and don’t get messed up code because Cursor try out different things without cleaning up afterwards
When it makes a mistake and you ask/help it to fix it... (e.g, the tailwind mis-config). Does Cursor have the ability to learn from its mistakes/shortcomings? If you were to start a new project with similar tech stack and requirements, would it now ensure the style js files are included?
Hey Gevik, great question. Cursor does not "learn" in any way. It uses the context that you give it when you start a new chat. You can tag specific files or have it search across your codebase. You can also create a ".cursorrules" file that will instruct it how it should behave at all times - so if I really wanted to, I could manually update that file and tell it about the tailwind thing. But I prefer to keep it lightweight because the more context you give it, the more "confused" I've seen the AI get. So in that case, I'd rather just take a mental note for myself and write the prompt better next time.
Thank you! Yeah there is a balance to it for sure but I try to be aware of what is actually happening in the code. Sometimes I go too fast and stuff breaks unintentionally but I'm never too far from fixing it by hand if I have to :) thanks for watching!
great great video!! I'm going to be studying this all week. Cursor has been so fun to use and I'm actually learning a lot when I have to fix some of the mistakes it makes lol
Thank you!! Glad the video is helpful :) Cursor can be a great learning tool for sure. Are you just getting started with coding? Let me know if there are any topics that you'd like to learn more about!
@@VoloBuilds Yea but I would say getting re-started since I used to code in the ancient times of internet Explorer 8 😂 cursor has been a blessing to get back to enjoying coding again. Made my first chrome extension with 0 knowledge of what it would entail 1 week ago! I don't have any topic in mind, I'm just enjoying the ride right now. Anything that shows how yo leverage cursor ai is fine with me 💪
Relatively new to coding.. Why did you combine the files surveyviewer and survey taker (sorry not the same names... but you know what I mean).. You had it conditionally display the trash button and drag buttons. But, seperate files were working well.. Until it had to change everything upon your request .. Does it help to have a single file vs 2. Does it help with processing speed?
Great question! This is what we call "refactoring" where we like to regroup code occasionally so that it is easier to navigate and modify in the future. It does not help with processing speed, but it makes it easier for me to make changes in the future where I just have to change one file instead of two. Let's say I added a new question type. If I have just one component (in one file), then I only need to make that change in one place. It's easier to make that change. But more importantly, I won't accidentally forget to update the second file! If I kept it as 2 files and added the new question type to only one of them... Then the second would accidentally break! So refactoring and keeping our code organized can help prevent such issues :)
I keep trying Composer and wanting to like it but I keep getting disappointed :( I am not sure what the difference is, but whenever I use it, Cursor seems to be x5 as likely to generate incomplete code or introduce bugs that I don't expect. Also difficult to roll back those changes. I've found the sidebar chat to be way more reliable. I hope they fix it though because I do like the concept a lot, but I've just had a lot of code quality issues with it.
Composer can quickly mess up in multiple files. It good to create multiple files with mock data in a bulk, but it can't even reliably handle refactoring, such as splitting one file into 3 files.
@@yurijmikhassiak7342 Exactly!! This is the experience I've had with it. I wish it did what Chat can do - or if chat could just add the file creation button. Thanks for the cursor rules tip in the other thread btw!
Thanks for the suggestion! I was gravitating towards those sort of auth solutions like Clerk but recently realized that Cursor was able to implement the sign in screens for me and use out of the box firebase auth apis very quickly... now I am thinking of trying Supabase and maybe self-hosting it to reduce my dependence on these services even further.
That's a great video! "im trying to jump in a cursor as well but it's quite complicated with no code experience at all. Is there any chance I can ask you some questions or consult?
Feel free to ask me here or on X (VoloBuilds)! I don't do 1:1 mentoring but happy to questions publicly or make videos that cover topics people are interested in. So let me know what you'd like to learn about! Thanks for watching
Thanks for the suggestion - I may open source it in the future but for now I am still considering if I may build this into a revenue-generating app, so I'm holding on to the code for now. Thanks for watching!
Wonderful, thanks! It was all fine until you started setting up the server... then I got lost. Particularly as I did not have the model code you entered to help cursor. The architecture I got was completely different than yours so I could not follow. Can you help?
That's an interesting new sort of problem with doing tech tutorials I guess haha - it makes it difficult to precisely follow along. I think the best thing to do is to try to follow conceptually rather than recreating exact code. What is the part you are referring to (timestamp) and what was the difference between mine and yours?
Congrats on getting started and great question. The client (ui) / server split is a fundamental concept in web dev. There are frameworks that try to blur this line like NextJS but in my opinion they are doing a disservice to anyone learning full stack development because the client and server are fundamentally separate things. Let me explain: When you open a web page, a request goes out and retrieves the html, css, and javascript for that page. These files make up the client code (UI). All of this runs within the browser and is public information that the user can see/modify, etc. It's also using their computer's resources to render the page and execute and "client side" javascript logic. JavaScript is the only language that runs in the browser. Now, for a lot of things like retrieving personal data or calling an API with a secret API key, you cannot afford to have this data be publicly accessible. You may also need to run some compute-intensive logic that takes additional resources. This is why we have the *server*. It is software that is running on a different computer, typically deployed in a cloud like AWS (or using Google App Engine in my case). Your server will generally have an API (part of the server code) which is used as a means of communication. The client-side UI code will make API calls to request data or submit data to the server. The server can then verify that it is coming from a legitimate user, and retrieve the data for that specific user. So there is an inherent security boundary between the two that I like to make crystal clear when I am working on my applications. Also, when it comes to deploying your software, you will need to use the client/server approach to deploy them separately unless everything is SSR (server-side rendered) but that's a whole complex topic. Clouds like Vercel will try to convince you that it's easier to just ignore this paradigm and build everything as one NextJS full-stack thing, but this is just a way to get you locked into using their services. It is very valuable to understand the difference between the client and the server and understand how they are individually deployed. I suggest having a nice long conversation with ChatGPT about it :) Thanks for watching!
Thank you for the video, but what I'm wondering is: Can someone who is considering a career in data analysis make comprehensive projects for their CV as you do? Should I buy the cursor?
Hey there! I think it's a great idea to make projects like this to demonstrate your capabilities. I'm not sure what type of data analysis you are planning to do - but you can get a lot out of just using free ChatGPT for that sort of purpose. I would switch to Cursor if you're looking to build full applications - but ChatGPT is good enough for scripts to clean data and such.
I'm using the Cursor Pro subscription, so for $20 / month I just saved probably 8hr of my time building this. Unless they changed it, you need Pro to do the "Apply changes" thing which honestly is the biggest time saver
Yes - I believe context control is the #1 skill using these AI tools to code! Too little and it makes incorrect assumptions. Too much and it becomes disorganized and confused. Optimal performance seems to be a paragraph-sized prompt and tagging 3-4 files that are ~100-150 lines or so.
It would be helpful if they told us how to tag files. Sometimes it confuses reference file with file to edit. Common case if you have one file where scroll is correct, you ask cursor to use the same approach in a new file but it proposes to edit correct file. You have to be very direct saying what you need. It doesn't understand that active file in editor is the target.
@@yurijmikhassiak7342 Haha yes I have also seen this. I can tell that you really use the product too based on your comments 😂 that's another great tip (to be direct about what to modify). I like to reference function/class names when I write the prompt if the file names are ambiguous
Hey, good question and congrats on getting started! When I start a program in the terminal (such as my UI or server) it begins to show me logs for that program and keeps the program running until I terminate it. Seeing the logs for the programs I am running in separate windows helps me figure out if issues are happening on the server or the UI. Unless I run the programs "in the background", they essentially take up that terminal window, so I use multiple so that I can (1) run the UI, (2) run the server, (3) run commands like installing new packages/dependencies. Hope that helps!
Refactoring is when you move parts of your code around to make it more organized and reduce individual file sizes. AI has a hard time working with long files (500+ lines) and you will see performance decrease. This is why it is important to 'refactor' or re-organize your code when files get long. It's better to break up your code into dedicated 'components' that are responsible for specific things. If we take the UA-cam codebase for example - instead of having the code for the entire page in one file, they probably have separate files for: Video Player, Comment Section, Suggested Videos, etc. Each of those components likely also has sub-components like "Comment" or "Video Listing" for example. Let's say we were working on the Video Player component for a while and adding things like the play button, progress bar, video resize, playback speed, etc. Now we might have a huge file doing a lot of stuff. We might 'refactor' that file to simplify the logic in Video Player and move some of those new features into a 'Video Player Controls' component that we use within the Video Player.
It's good that you were able to think for yourself, like how can we make this better etc. But what I tend to do is I just let the AI handle all those thinking and then just implement them. Because it's so exhausting for me to think like that.
Haha thank you - yeah there's a balance to strike there. I just get frustrated when I "let the AI handle the thinking" and an hour passes by and code still doesn't work 🫠
Oh thought they charged that separately when I tried it. I use Aider and have to pay for the API costs separately. The main reason I stick with Aider is the ability to customise it whenever I want, Cursor is limited in this regard
@@MarvijoSoftware That's cool! What sort of customizations are you using? I've been pretty happy with Cursor's default stuff but I'm curious what is possible
@@VoloBuildsI have ASPNET Clients, so some of the LLMs aren't familiar with C# industry standards. Cursor rules and Copilot Instructions didn't seem to stick with some LLMs (Deepseek 2.5 for larger codebases because it's cheap). I installed a dev version of Aider and can modify prompts directly and have an option to submit PRs if changes can benefit others. Also, I can tell Aider to just reiterate on integration tests until they pass and go sleep, a feature I didn't find in Cursor (which I use), nor Cline
If you liked Cursor, you'll love Fine. Fine can do more than just build - it saves work from the entire SDLC. From planning and designing, all through to testing and CI/CD. You can choose Sonnet if you like though most of our users are now trying o1 :)
Is it more like Cursor or Replit agents? I like to know exactly what my code is doing and make incremental changes (rather than ask it to build it and cross my fingers that it does so correctly). The scope of apps I am building exceeds context windows so can't be built in one-shot but needs to be built iteratively as in the video. How can AI be used to improve CI/CD?
@@VoloBuilds It has aspects similar to both and unique aspects. In terms of building, you give it a task, it creates an implementation plan, you can edit the step-by-step of what it does, then it executes that particular plan. If you like the code, you can merge the PR. If you want to make changes, you can. In terms of CI/CD - depends what you've already got in place and what your requirements are but the basic principle is when the pipeline fails, the AI can analyze the logs and suggest (or commit) a fix. We're not encouraging one-shot... we're focused on the daily grind. Add a feature, fix a bug, make an improvement...
@@jarad4621 There are a couple of videos and more on the way as we've just reworked large parts of the interface based on user feedback. 100% correct it's for real devs, the idea isn't to let it build tic-tac-toe in a web app and share it on X, it's to optimise the entire SDLC.
Keen eye :) I was planning to use TS because I wanted to start with v0 and shadcn but got stuck with some dependencies. Decided to just move forward with what I knew would work so used JS instead. Since then, I've figured out how to get everything working well with TS so my latest projects are using TS!
Hey Volo , really nice video ! I was wondering if I could help you with more Quality Editing in your videos and also make a highly engaging Thumbnail and also help you with the overall youtube strategy and growth ! Pls let me know what do you think ?
After using cursor for many hours, I came to a conclusion that there is never any chance for an ai tool to replace a human dev for a simple reason that human can spot patterns very quickly whereas these tools can never do this. This is the beauty of our brains
I have found AIs to be increasingly good at spotting patterns, but the thing they can't really really replace is our actual intent. We build stuff in a certain way because *we* want it to work that way. The things we delegate to the AI should be things where we don't care about the specifics too much (or assume that whatever is "standard" will be acceptable for our case)
@@VoloBuilds for comparaison, a baby human being can feel the danger of green snake handing from a tree from a certain distance without any pre-knowledge. This is what I wanted to say and cursor is just an ide using plaint text prompts. We are just using an easy way to tell the computer what to do, but I will always be the same
I think this is the most useful tutorial on Cursor AI so far. I have watched all the other tutorials, and usually, we see some silly games built or high-level information about the tool. But tutorials like this one are really helpful. Thanks for posting this video.
Thank you so very much, Gautam :) glad it was helpful!!
@@VoloBuildsI wish you could do more videos like these. I'm fairly new to coding - coming from the medical sciences; I like to pretend I know R at least - and I'm seriously flirting with developing some local apps, specially regarding research, for my own and colleagues uses. But after some prototyping and tinkering, I know see that this kind of job ain't as straightforward as some folks of the AI hype like to put - and that's where practical full stack developments videos like yours really shine. Anyway, thanks.
@@levi4328 Thank you! I am curious to understand how you watch a video like this - do you watch it in one sitting or in parts? Do you try to replicate what I am building or just pull insights out of what I'm saying? Either way, glad it helped!
@@VoloBuilds Well i watched it in mostly 1 go. Today's my freetime. I've fed the videos transcript into chatgpt for some further breakdown of some points and to ensure i understand everything fully. I also plan, later tomorrow, sit a little bit to make some tests (and that involves replication) to further familiarize myself with the languages/tools you leveraged - as many things are still too new to me.
But to further add to the feedback, i really these long format videos as they provide rather invaluable insights into the workflow and decision-making process involved, which is something that cant really be elicited with mere study and tinkering - and is specially crucial for people like me who have nearly 0 idea of what it takes to develop things from scratch. It's like watching surgery videos: i may already now the full basis and procedure, but how these theoretical concepts orchestrate to achieve operative success in practice involves more than their mere knowledge - it takes your own decisions and approaches.
@@VoloBuilds Well i watched it in mostly 1 go. Today's my freetime. I've fed the videos transcript into chatgpt for some further breakdown of some points and to ensure i understand everything fully. I also plan, later tomorrow, sit a little bit to make some tests (and that involves replication) to further familiarize myself with the languages/tools you leveraged - as many things are still too new to me.
But to further add to the feedback, i really these long format videos as they provide rather invaluable insights into the workflow and decision-making process involved, which is something that cant really be elicited with mere study and tinkering - and is specially crucial for people like me who have nearly 0 idea of what it takes to develop things from scratch. It's like watching surgery videos: i may already now the full basis and procedure, but how these theoretical concepts orchestrate to achieve operative success in practice involves more than their mere knowledge - it takes your own decisions and approaches.
Best Cursor tutorial. I learnt a lot. Thanks
You're very welcome! :) Have a great day
amazing tutorial that show how powerful this tools are when you know what are you doing 👏
Thank you! Yes it definitely helps to actually understand how to code... Lots of people will get 90% of the way there with AI but spend 90% of their time stuck in a troubleshooting loop before giving up.. Understanding how to code helps prevent this!
Love this tutorial. thank you so much for doing everything step by step and showing us the entire process. Only minor thing i'd recommend if possible is to make your camera a bit smaller in the video as i find it covers the screen quite a bit or increase the transparency of your video so we can see behind it :) thank you so much! Amazing work
Thanks for watching and thanks for the tip! Will keep that in mind for future videos! :)
@@VoloBuilds Thank you for the video, but what I'm wondering is: Can someone who is considering a career in data analysis make comprehensive projects for their CV as you do? Should I buy the cursor?
This was insane! Amazing build
Thanks Danish :)) glad you enjoyed it!
So you also need to familiarize yourself with the code and not just blindly following whatever Cursor is telling you because as we've seen here, Cursor can still get confused. You need to study your code and get comfortable with it to even get an idea of what questions to ask and what query to make.
Yep! Even if you're a non-coder using these tools for the first time, I think it's good to try and get an idea of what the code is actually doing because otherwise you could end up with bugs and the software won't work the way you intended
Learning code with Replit 100days of code to get up to scratch
yeah you are exactly right. If you don't know what its output is working, sometimes can lead to throw an error and this error may cause spending more time to correct whole project working again.
Coder spotted....
This was great. I want to see a video where the limits are pushed and something simple, yet more advanced with great looking ai. so many people create these simple apps, but i think it would be more inspiring seeing someone push the limits on whats possible.
Thanks Djah! I did hit some limits in the video when I submitted too much context - and that seems to be the biggest problem. I've also learned to be very proactive with refactoring code to ensure my files are ~100 lines or less because this leads to the best results for the AI and allows me to tag just the relevant context.
If you keep your codebase organized like that, then even in a large project you'd have a similar experience as I showed in this video. I've used it in large projects as well for writing enterprise software for my clients.
To create new files from chat add to cursor rules requirements "if sugesting creating files, folders or running terminal commands do it in the bush code block. It works 2/3 of the time. Than just clich run in block and it runs the command in active terminal.
Thanks for the tip! I'll have to try that out. Believe it or not, I have never modified my cursor rules 😅 I just use the defaults! But that's a good idea there.
Looking forward to your increasing update frequency, I have been waiting
Haha appreciate your enthusiasm :) I'm not quite a full time UA-camr so have to find time here and there to make videos but I'm doing my best!
Thank you so much for this video. It was really nice to see the way you handle all the stuff.
Glad you enjoyed it!
Eagerly waiting for the video on google app engine or google cloud services ... I have a tough time with it too..
Thanks so much for the video here! Helped me understand a lot! Specifically, how following through what and where it's changing each time .. and how being planned w.r.t design, routing, in general logic goes a long way.. How it sort of helps maximise on what already has been made easy!
Glad you are enjoying all the videos :) thanks for sharing your thoughts! I do plan to make a video at some point about deploying - trying to find a clean and easy way to do it so I can explain it clearly and help people get their apps onto real websites.
Funny about v0. It does designs really well and I am writing in Svelte. I thought simply copy pasting and asking cursor to translate React into Svelte 5 code would work, but Cursor starts hallucinating and uses Reacts mental model in Svelte with a bunch of TS errors. Another way how to do it is to use a screenshot and ask Cursor to use it as an inspiration.
Ouch! Yeah I have been fortunate to use full-stack JS with React as my primary combo which just happens to be what Cursor / Sonnet 3.5 is most effective at writing haha. Yeah being able to use screenshots is a great feature!
Great, thank you! I had the same experience as you, and sometimes I try to solve some impossible things for the LLM myself. It gives me a pleasant feeling😀
Yes! It really becomes a collaborative effort haha - the key is knowing when to pause and think about the problem vs just let the AI chug away at solving it :) Thanks for watching, Andreas!
Recommend opening the Console in Chrome, and paste back any errors. Often faster to fix errors, and don’t get messed up code because Cursor try out different things without cleaning up afterwards
Yeah the console is definitely a great place to get the full context of the errors, good tip!
When it makes a mistake and you ask/help it to fix it... (e.g, the tailwind mis-config). Does Cursor have the ability to learn from its mistakes/shortcomings? If you were to start a new project with similar tech stack and requirements, would it now ensure the style js files are included?
Hey Gevik, great question. Cursor does not "learn" in any way. It uses the context that you give it when you start a new chat. You can tag specific files or have it search across your codebase. You can also create a ".cursorrules" file that will instruct it how it should behave at all times - so if I really wanted to, I could manually update that file and tell it about the tailwind thing. But I prefer to keep it lightweight because the more context you give it, the more "confused" I've seen the AI get. So in that case, I'd rather just take a mental note for myself and write the prompt better next time.
I like your workflow, not blindly accepting all but rather individually ensuring the right changes are being made.
Thank you! Yeah there is a balance to it for sure but I try to be aware of what is actually happening in the code. Sometimes I go too fast and stuff breaks unintentionally but I'm never too far from fixing it by hand if I have to :) thanks for watching!
That’s a low bar….
Thank you for sharing this. it was really helpful
Glad you enjoyed it Moses, thanks for watching! Good luck with your channel!
Thanks for sharing this . Will have to try cursor out 👍
Glad it was helpful! Have fun - and share whatever you build!
great great video!! I'm going to be studying this all week. Cursor has been so fun to use and I'm actually learning a lot when I have to fix some of the mistakes it makes lol
Thank you!! Glad the video is helpful :) Cursor can be a great learning tool for sure. Are you just getting started with coding? Let me know if there are any topics that you'd like to learn more about!
@@VoloBuilds Yea but I would say getting re-started since I used to code in the ancient times of internet Explorer 8 😂 cursor has been a blessing to get back to enjoying coding again. Made my first chrome extension with 0 knowledge of what it would entail 1 week ago! I don't have any topic in mind, I'm just enjoying the ride right now. Anything that shows how yo leverage cursor ai is fine with me 💪
@@dommafia That's awesome! Welcome back and enjoy the ride! :)
Relatively new to coding.. Why did you combine the files surveyviewer and survey taker (sorry not the same names... but you know what I mean).. You had it conditionally display the trash button and drag buttons. But, seperate files were working well.. Until it had to change everything upon your request ..
Does it help to have a single file vs 2. Does it help with processing speed?
Great question! This is what we call "refactoring" where we like to regroup code occasionally so that it is easier to navigate and modify in the future. It does not help with processing speed, but it makes it easier for me to make changes in the future where I just have to change one file instead of two.
Let's say I added a new question type. If I have just one component (in one file), then I only need to make that change in one place. It's easier to make that change. But more importantly, I won't accidentally forget to update the second file! If I kept it as 2 files and added the new question type to only one of them... Then the second would accidentally break! So refactoring and keeping our code organized can help prevent such issues :)
@@VoloBuilds Ah! That makes sense!
Thank you so much for explaining it!
one tip, use the command + i , it opens composer and it is insane
I keep trying Composer and wanting to like it but I keep getting disappointed :( I am not sure what the difference is, but whenever I use it, Cursor seems to be x5 as likely to generate incomplete code or introduce bugs that I don't expect. Also difficult to roll back those changes. I've found the sidebar chat to be way more reliable. I hope they fix it though because I do like the concept a lot, but I've just had a lot of code quality issues with it.
@@VoloBuilds composer can automatically edit multiple files. I think that's the main difference from chat.
Composer can quickly mess up in multiple files. It good to create multiple files with mock data in a bulk, but it can't even reliably handle refactoring, such as splitting one file into 3 files.
@@yurijmikhassiak7342 Exactly!! This is the experience I've had with it. I wish it did what Chat can do - or if chat could just add the file creation button. Thanks for the cursor rules tip in the other thread btw!
@@VoloBuilds yup jusdt got it, i got all features and it took away all that
Would love to see a video with Clerk Auth and cursor to see how it could work! Great video!
Thanks for the suggestion! I was gravitating towards those sort of auth solutions like Clerk but recently realized that Cursor was able to implement the sign in screens for me and use out of the box firebase auth apis very quickly... now I am thinking of trying Supabase and maybe self-hosting it to reduce my dependence on these services even further.
That's a great video! "im trying to jump in a cursor as well but it's quite complicated with no code experience at all. Is there any chance I can ask you some questions or consult?
Feel free to ask me here or on X (VoloBuilds)! I don't do 1:1 mentoring but happy to questions publicly or make videos that cover topics people are interested in. So let me know what you'd like to learn about! Thanks for watching
Can you share the code you used for inspiration for MongoDB connection?
Hi! Your videos are so detailed and useful! Do you consider a sponsorship?
Thank you, Alisa! Really appreciate it - but I am not looking for sponsors at this time :)
can you please share the source code (github/replit) source coe of this project please
Thanks for the suggestion - I may open source it in the future but for now I am still considering if I may build this into a revenue-generating app, so I'm holding on to the code for now. Thanks for watching!
Wonderful, thanks! It was all fine until you started setting up the server... then I got lost. Particularly as I did not have the model code you entered to help cursor. The architecture I got was completely different than yours so I could not follow. Can you help?
That's an interesting new sort of problem with doing tech tutorials I guess haha - it makes it difficult to precisely follow along. I think the best thing to do is to try to follow conceptually rather than recreating exact code. What is the part you are referring to (timestamp) and what was the difference between mine and yours?
Have you tried supabase for auth?
I gotta try it! Do you use self-hosted or managed?
@@VoloBuilds self-hosted
@@Novu_ai Cool - where do you deploy it? Do you need to host a postgres instance for it as well? Do you dockerize all of that or?
@@VoloBuilds I'm not sure about all of that, I'm just a beginner and one of my mentors suggested supabase for me
@@Novu_ai Oh ok cool! Well thanks for the suggestion! I'll do some more research :)
I'm new in web dev. Why split your code in 2? I mean server and client UI? It's a concept/workflow that I would like to understand
error handling at scale.
When you have a scalable app, business logic gets separated out even more.
Congrats on getting started and great question. The client (ui) / server split is a fundamental concept in web dev. There are frameworks that try to blur this line like NextJS but in my opinion they are doing a disservice to anyone learning full stack development because the client and server are fundamentally separate things. Let me explain:
When you open a web page, a request goes out and retrieves the html, css, and javascript for that page. These files make up the client code (UI). All of this runs within the browser and is public information that the user can see/modify, etc. It's also using their computer's resources to render the page and execute and "client side" javascript logic. JavaScript is the only language that runs in the browser.
Now, for a lot of things like retrieving personal data or calling an API with a secret API key, you cannot afford to have this data be publicly accessible. You may also need to run some compute-intensive logic that takes additional resources. This is why we have the *server*. It is software that is running on a different computer, typically deployed in a cloud like AWS (or using Google App Engine in my case).
Your server will generally have an API (part of the server code) which is used as a means of communication. The client-side UI code will make API calls to request data or submit data to the server. The server can then verify that it is coming from a legitimate user, and retrieve the data for that specific user.
So there is an inherent security boundary between the two that I like to make crystal clear when I am working on my applications. Also, when it comes to deploying your software, you will need to use the client/server approach to deploy them separately unless everything is SSR (server-side rendered) but that's a whole complex topic.
Clouds like Vercel will try to convince you that it's easier to just ignore this paradigm and build everything as one NextJS full-stack thing, but this is just a way to get you locked into using their services. It is very valuable to understand the difference between the client and the server and understand how they are individually deployed. I suggest having a nice long conversation with ChatGPT about it :)
Thanks for watching!
@@VoloBuilds That was very informative. I understand now. Thanks a lot!!!
Awesome! Glad I could help!
Thank you for the video, but what I'm wondering is: Can someone who is considering a career in data analysis make comprehensive projects for their CV as you do? Should I buy the cursor?
Hey there! I think it's a great idea to make projects like this to demonstrate your capabilities. I'm not sure what type of data analysis you are planning to do - but you can get a lot out of just using free ChatGPT for that sort of purpose. I would switch to Cursor if you're looking to build full applications - but ChatGPT is good enough for scripts to clean data and such.
how much did ot cost using claude api? or with subscription?
I'm using the Cursor Pro subscription, so for $20 / month I just saved probably 8hr of my time building this. Unless they changed it, you need Pro to do the "Apply changes" thing which honestly is the biggest time saver
this was great!
Thank you!! :)
I have the same feeling, when the context is getting more complex, Cursor becomes crazy. Very hard to get the correct code suggestion.
Yes - I believe context control is the #1 skill using these AI tools to code! Too little and it makes incorrect assumptions. Too much and it becomes disorganized and confused. Optimal performance seems to be a paragraph-sized prompt and tagging 3-4 files that are ~100-150 lines or so.
It would be helpful if they told us how to tag files. Sometimes it confuses reference file with file to edit. Common case if you have one file where scroll is correct, you ask cursor to use the same approach in a new file but it proposes to edit correct file. You have to be very direct saying what you need. It doesn't understand that active file in editor is the target.
@@yurijmikhassiak7342 Haha yes I have also seen this. I can tell that you really use the product too based on your comments 😂 that's another great tip (to be direct about what to modify). I like to reference function/class names when I write the prompt if the file names are ambiguous
One quick question why did you create so many terminals , ( beginner )
Hey, good question and congrats on getting started! When I start a program in the terminal (such as my UI or server) it begins to show me logs for that program and keeps the program running until I terminate it. Seeing the logs for the programs I am running in separate windows helps me figure out if issues are happening on the server or the UI.
Unless I run the programs "in the background", they essentially take up that terminal window, so I use multiple so that I can (1) run the UI, (2) run the server, (3) run commands like installing new packages/dependencies. Hope that helps!
Best tutorial out there!
Thank you very much :)
What do you mean by refactoring?
Refactoring is when you move parts of your code around to make it more organized and reduce individual file sizes. AI has a hard time working with long files (500+ lines) and you will see performance decrease. This is why it is important to 'refactor' or re-organize your code when files get long. It's better to break up your code into dedicated 'components' that are responsible for specific things.
If we take the UA-cam codebase for example - instead of having the code for the entire page in one file, they probably have separate files for: Video Player, Comment Section, Suggested Videos, etc. Each of those components likely also has sub-components like "Comment" or "Video Listing" for example. Let's say we were working on the Video Player component for a while and adding things like the play button, progress bar, video resize, playback speed, etc. Now we might have a huge file doing a lot of stuff. We might 'refactor' that file to simplify the logic in Video Player and move some of those new features into a 'Video Player Controls' component that we use within the Video Player.
It's good that you were able to think for yourself, like how can we make this better etc. But what I tend to do is I just let the AI handle all those thinking and then just implement them. Because it's so exhausting for me to think like that.
Haha thank you - yeah there's a balance to strike there. I just get frustrated when I "let the AI handle the thinking" and an hour passes by and code still doesn't work 🫠
Nice vid bud. How much did this cost?
Thank you! Cursor is $20/mo - everything else I used was free!
Oh thought they charged that separately when I tried it. I use Aider and have to pay for the API costs separately. The main reason I stick with Aider is the ability to customise it whenever I want, Cursor is limited in this regard
@@MarvijoSoftware That's cool! What sort of customizations are you using? I've been pretty happy with Cursor's default stuff but I'm curious what is possible
@@VoloBuildsI have ASPNET Clients, so some of the LLMs aren't familiar with C# industry standards.
Cursor rules and Copilot Instructions didn't seem to stick with some LLMs (Deepseek 2.5 for larger codebases because it's cheap). I installed a dev version of Aider and can modify prompts directly and have an option to submit PRs if changes can benefit others.
Also, I can tell Aider to just reiterate on integration tests until they pass and go sleep, a feature I didn't find in Cursor (which I use), nor Cline
If you liked Cursor, you'll love Fine. Fine can do more than just build - it saves work from the entire SDLC. From planning and designing, all through to testing and CI/CD.
You can choose Sonnet if you like though most of our users are now trying o1 :)
Is it more like Cursor or Replit agents? I like to know exactly what my code is doing and make incremental changes (rather than ask it to build it and cross my fingers that it does so correctly). The scope of apps I am building exceeds context windows so can't be built in one-shot but needs to be built iteratively as in the video. How can AI be used to improve CI/CD?
No explanation or demo videos on your channel to find out more, also seems like it's for real devs not noobs right?
@@VoloBuilds It has aspects similar to both and unique aspects.
In terms of building, you give it a task, it creates an implementation plan, you can edit the step-by-step of what it does, then it executes that particular plan. If you like the code, you can merge the PR. If you want to make changes, you can.
In terms of CI/CD - depends what you've already got in place and what your requirements are but the basic principle is when the pipeline fails, the AI can analyze the logs and suggest (or commit) a fix.
We're not encouraging one-shot... we're focused on the daily grind. Add a feature, fix a bug, make an improvement...
@@jarad4621 There are a couple of videos and more on the way as we've just reworked large parts of the interface based on user feedback. 100% correct it's for real devs, the idea isn't to let it build tic-tac-toe in a web app and share it on X, it's to optimise the entire SDLC.
tnx!
Welcome! :)
you told it to use typescript in the beginning, but the code looks like js
Keen eye :) I was planning to use TS because I wanted to start with v0 and shadcn but got stuck with some dependencies. Decided to just move forward with what I knew would work so used JS instead. Since then, I've figured out how to get everything working well with TS so my latest projects are using TS!
cool!
Hey Volo , really nice video ! I was wondering if I could help you with more Quality Editing in your videos and also make a highly engaging Thumbnail and also help you with the overall youtube strategy and growth ! Pls let me know what do you think ?
Hey Divy, thanks for the offer but I am not looking for an editor or designer at the moment. Good luck and thanks for watching!
Supabase could be a potential replacement for Firebase. Great video, keep it up 👍🏽
Thank you so much :) I'll have to try Supabase. Do you use self-hosted or the managed version?
Cool
After using cursor for many hours, I came to a conclusion that there is never any chance for an ai tool to replace a human dev for a simple reason that human can spot patterns very quickly whereas these tools can never do this. This is the beauty of our brains
I have found AIs to be increasingly good at spotting patterns, but the thing they can't really really replace is our actual intent. We build stuff in a certain way because *we* want it to work that way. The things we delegate to the AI should be things where we don't care about the specifics too much (or assume that whatever is "standard" will be acceptable for our case)
@@VoloBuilds for comparaison, a baby human being can feel the danger of green snake handing from a tree from a certain distance without any pre-knowledge. This is what I wanted to say and cursor is just an ide using plaint text prompts. We are just using an easy way to tell the computer what to do, but I will always be the same
So you still ended up using Stackoverflow and searching for an answer for that draggable error. Smh.
Lol I know, I felt the irony in that moment 😂