How I built a REAL Full Stack App in 5hr using Cursor

preview_player
Показать описание
Cursor is a powerful new code editor that makes coding much faster with the help of AI. In this video I will use Cursor and Claude Sonnet 3.5 to build a REAL full stack app ("Survey Mage") from scratch and deploy it.

This realistic hands-on tutorial goes in depth and beyond simple demos you'll often see elsewhere.

I want to show you how you can actually use Cursor in a real-world project (not just as a toy). I implement everything including the UI, server, APIs, database integration, authentication, and deploy the app.

📚 Resources:

🔧Tools Used:
- Cursor + Claude Sonnet 3.5
- MERN (Mongo, Express, React, NodeJS)
- Tailwind
- Cloudflare Pages, Registrar, Wrangler API
- Google App Engine (GAE)
- Firebase Auth
- GitHub

🚀 In This Video, You'll learn:
- How to use Cursor AI
- Coding with Cursor and Sonnet 3.5
- The best way to code with AI in 2024
- How to code with Cursor AI
- How to use AI to code faster
- How to use AI to write code for you
- How to troubleshoot code with AI
- How to deploy AI-generated apps
- Prompts to code with ChatGPT
- What is the cursor composer
- How to chat with Cursor AI
- Best way to use Cursor to code
- Coding in 2024
- Web Development 2024

💡 Perfect for Viewers Interested in:
- Full Stack software development
- Web Development
- Best AI coding tools
- Software Development
- Future of coding
- Learning to code in 2024
- Using AI to code
- Coding with AI
- Learning about the latest AI tech
- Generative AI

Subscribe for more tutorials on AI and programming and to stay up to date on the latest AI updates and news!!

💬 Questions or Feedback? Drop your thoughts in the comments below, and I'll be sure to get back to you!

#ai #artificialintelligence #coding #futureofwork #codewithai #aicoding #chatgpt #programming #software #softwaredev #webdevelopment #webdev #claude #sonnet3.5 #cursor #cursorai

Chapters
00:00:00 - Project Preview
00:00:49 - Tech Stack + Requirements
00:04:07 - Project Setup
00:08:40 - Survey Designer UI
00:34:17 - Auth
00:48:28 - Server Setup + Integration
01:00:22 - Survey UI Improvements
01:17:39 - React Router
01:24:32 - Survey Response Handling
01:47:40 - Analytics Dashboard
02:18:31 - Finishing Touches
02:33:01 - Deployment
Рекомендации по теме
Комментарии
Автор

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.

gautammandewalker
Автор

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

faaiqster
Автор

Thank you so much for this video. It was really nice to see the way you handle all the stuff.

jnmldo
Автор

I like your workflow, not blindly accepting all but rather individually ensuring the right changes are being made.

lilan
Автор

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😀

andreasscheller
Автор

Looking forward to your increasing update frequency, I have been waiting

ddwinhzy
Автор

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.

djahandrews
Автор

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.

floramerano
Автор

Thank you for sharing this. it was really helpful

codewithmoses
Автор

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!

prathyusha
Автор

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.

yurijmikhassiak
Автор

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

dommafia
Автор

Would love to see a video with Clerk Auth and cursor to see how it could work! Great video!

hackerdotdev
Автор

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

morten-punnerud_engelstad
Автор

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.

kirso
Автор

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?

zGev
Автор

Hi! Your videos are so detailed and useful! Do you consider a sponsorship?

Alisa-ld
Автор

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?

AJOld-ms
Автор

one tip, use the command + i, it opens composer and it is insane

cryptophani
Автор

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?

prathyusha