How to use Cursor AI build & deploy production app in 20 mins

[@AIJasonZ]

Join my community club for more cursor tips!: 2ly.link/1z94G :)

[@75M]

@@AIJasonZ Cool! Do we need any paid plan to follow this project step by step?

[@scrapycholo2659]

So where's ya million dollar funding 😂😂😂

[@amandamate9117]

now its time to utilize the new o1-mini or o1-preview and make some crazy projects.

[@Akira71]

Hmm, the link seems to be down for me. Any chance to check this out? Love to see what the community is about.

[@seregamozetmnoga1700]

“Without any programming knowledge” - that’s the only phrase in the entire video I understood.

[@isko4173]

😂😂

[@chusanchusi7518]

😆

[@szihai]

I started to use Cursor a couple weeks ago. I can say if you know what you are doing, yes you can get what you want fairly quickly. But if you soly rely on Cursor and Claude to design, implement and debug your code, it's gonna take way longer.

[@AIJasonZ]

Yea I think you need basic understanding of web dev for sure, to know how to prompt it effectively; That’s why want to cover the workflow and how to do certain parts like auth & backend :)

[@PubgSpeed-wl8yo]

@@AIJasonZ I've been creating websites using website builders for 12 years. What he showed me was a very dense forest in which you don’t know where to go. And for a simple user this is equivalent to higher mathematics. So this is a crutch that can only be used by those who do serious programming.

[@softwear4u-twt]

@@szihai I'd say this is the case for any AI

[@spforward918]

okay sherlock

[@camilovilla8434]

For debugging nowadays using the latest model from OpenAI o1 is incredible. It will save you so much time

[@MK-jn9uu]

Seriously, one of few people online that knows wtf they’re talking about ❤ thank you

[@lkd982]

You are doing a wonderful service for the community who like me are self-taught, self-doubting, proficient but not very good even after many years of effort, adhd, and wandering focus, who just need all the MISSING BITS that you provide, respeck!!! When it comes to the Supabase schema you make it seem as though a person actually needs to think fo themself, but you could just ask cursor for the appropriate schema!

[@nsdalton]

You can also put your frontend instructions into a .cursorrules file at the root of the project. Make sure cursor is using the file by going to cursor settings and checking in the general tab.

[@fractalarbitrage]

Front and back mixed or seperate like video?

[@harryzachariou1]

Great video! I'm a full stack javascript developer and I created my first macOS swift app using Cursor AI and Sonnet, what a fantastic IDE it is!

[@The-Sentinel]

did you still need a Mac device to compile the package? is there a way around this?

[@harryzachariou1]

@@The-Sentinel still have to use a Mac

[@aduhaneh1057]

@@The-Sentinel yes, but if you don't have mac you could try and use a different stack instead of swift

[@The-Sentinel]

What stacks out there don’t require a Mac to compile and deploy?

[@JO-cw7ju]

@@The-Sentinel Do you use premium Sonnet ??

[@ruiqiliu1966]

谢谢，系统性地帮助新人入门。举例来说，其他youtuber是没有讲NPX是什么的，那就成为了学习过程中的噪音。同样还有“我们只需要关注app的子页面”等。这种视角的讲解方式对不懂编程的人太重要了，是目前看到最好的讲解视频。

[@nimblename]

This is the best tutorial I’ve watched on cursor based development! Thank you sir. Lots of helpful tips along the way (ie when to use composer vs chat, using product requirements documentation for the AI etc). I got a little lost during the database setup so I’ll need to watch some more to get up to speed. Would love a beginner setup tutorial for GitHub! And process for commit/rolling back etc

[@sammykins7778]

reaaly wanted this to work as a non developer. Tried making my own app (three times!) but Cursor AI gave different answers the more questions it was given and couldn't fix my issues. So developer jobs are safe. lolz!

[@powerofashish215]

Your content is always so insightful, thorough, and professional. Been watching your videos for a while and just want to say thank you for your insights to those wanting to learn!!!

[@Keksent]

This is the quickstart into this new stuff I needed. Thank you Jason your videos are always good and cutting edge.

[@richardadonnell]

🎯 Key points for quick navigation: 00:03 *💻 Introduction to Cursor AI and Project Setup* - Introduces Cursor AI as an accessible code editor enabling anyone to build apps, - Describes using libraries like Next.js, React, and Tailwind for project setup, - Outlines the plan to create an Emoji generator app with authentication and tracking features. 02:35 *🔧 Explanation of Frameworks and Tools* - Covers the role of JavaScript, TypeScript, React, and Next.js in web development, - Introduces component libraries like Chakra UI and Tailwind CSS for ready-made designs, - Describes the folder structure and the importance of correct file placement in Next.js projects. 07:07 *📝 Creating a Requirements Document for Development* - Highlights the importance of writing detailed product requirements for AI-based development, - Mentions specifying API endpoints and desired UI libraries to guide Cursor AI, - Emphasizes providing a clear file structure to improve accuracy when using Cursor AI. 09:09 *🌐 Implementing and Troubleshooting API Integration* - Walks through setting up the API call to the emoji generation model hosted on Replicate, - Describes using Next.js config settings to enable image loading from trusted sources, - Explains how to fix client-side rendering issues by adding the `use client` directive. 12:49 *🎨 Building and Testing App Features* - Describes building the Emoji generator and display grid components, - Demonstrates real-time feedback and bug fixing using Cursor AI’s chat interface, - Implements basic functionality such as generating and displaying emojis. 15:51 *📥 Adding Download and Like Features* - Walks through adding download functionality for emojis, - Implements a like button with visual feedback and increments a like counter, - Uses Zustand for state management to update the emoji grid dynamically. 19:34 *🔑 Setting Up User Authentication with Clerk* - Introduces Clerk as a user management platform for authentication, - Describes setting up middleware to manage access control across pages, - Explains how to integrate Clerk credentials for seamless sign-up and login flows. 21:53 *🔑 Implementing Authentication with Clerk* - Demonstrates setting up sign-in and user profile components using Clerk, - Explains wrapping the layout with the Clerk provider to manage authentication, - Users can log in with Google or email, access their profile, and sign out. 23:15 *🗄️ Connecting Backend and Storage with Supabase* - Introduces Supabase as an open-source alternative to Firebase and AWS Amplify, - Describes setting up tables for users, profiles, and emojis, - Configures Supabase storage buckets for managing and accessing image files. 27:53 *📋 Creating Tables and Configuring Database in Supabase* - Walks through using the SQL editor to create user and emoji tables, - Configures default values and constraints like credits and subscription tiers, - Sets up the storage bucket to allow public access for emoji images. 29:02 *🛠️ Building Backend Functionality with Cursor* - Uses Cursor AI to implement user profile creation and emoji generation logic, - Explains handling authentication, uploading images, and managing likes, - Resolves client-server issues by adding `use client` and debugging with AI chat. 32:40 *📦 Integrating Storage and Image Display Features* - Configures the backend to upload emoji files to Supabase storage, - Adds logic to fetch and display emoji images in the front-end grid, - Debugs security settings by updating Next.js config to allow trusted domains. 35:45 *❤️ Implementing Like and Interaction Features* - Adds a like interaction system with state management using a new table, - Ensures users can only like an emoji once, with toggled like buttons, - Syncs UI updates and backend state to reflect real-time changes. 39:00 *🚀 Deploying the App on Vercel* - Explains deploying the Next.js app on Vercel with environment variables, - Uses GitHub for continuous deployment and resolves production-specific issues, - Highlights differences between local and production environments during debugging. 41:44 *🎉 Final Overview and Additional Resources* - Recaps the process of building and deploying a production app using Cursor, - Invites viewers to join the AI Builder Club for further learning and collaboration, - Promotes the community for sharing challenges and code examples. Made with HARPA AI

[@InternetStranger10101]

Thanks! Huge help

[@UmutUcler]

Wow, just wow! Incredible to see a real example from idea to production. Fantastic video my good sir

[@venderednev]

Input in the Markdown at 9:30: import Replicate from "replicate"; const replicate = new Replicate( auth: process.env.REPLICATE_API_TOKEN ); const output = await replicate.run( "fofr/sdxl-emoji:dee76b5afde21b0f01ed7925f0665b7e879c50ee718c5f78a9d38e04d523cc5e", { input: { width: 1024, height: 1024, prompt: "A TOK emoji of a man", refine: "no_refiner", scheduler: "K_EULER", lora_scale: 0.6, num_outputs: 1, guidance_scale: 7.5, apply_watermark: false, high_noise_frac: 0.8, negative_prompt: "", prompt_strength: 0.8, num_inference_steps: 50 } } ); console.log(output)

[@Willifordwav]

Imagine thinking that someone with no coding experience could understand this 💀💀

[@henno6207]

V0 from vercel can be used to handle the design. Replit also has a pretty good agent that can launch things pretty quickly.

[@lu3bw]

Jason, this is actually the best explanation for tech but non coding specimens like myself. THANK YOU!

[@holetarget4925]

I usually use cursor directory to get most up to date HQ prompts from senior devs. Very very useful website

[@Mattbe72]

awesome video, super cool to have a demo on how Cursor can be used for an end to end process. Really enjoyed the presentation of the other SaaS you presented too (Clerk, Supabase and Vercel). Thanks a lot !

[@aiplusi]

As usual you have made an amazing and informative video, thank you!

[@phillonc]

This is on point, I've been searching for a video that breaks things down logically. Thank you

[@joxxen]

This has to be the best video on the internet, thanks!

[@serendipity-108]

Jason does an excellent job explaining things clearly. Thank you!!!!

[@nikhil_no_1]

This was a great 1st build using AI video for me. Thank You.

[@heliolucio7691]

This made me want to build something so bad! Amazing video, these tips about prompting, image inputting and markdown were killer, for sure I'll start use them in my daily dev

[@mrd6869]

build cheesburgers.

[@AIJasonZ]

Glad is helpful!

[@jasonfinance]

This is sick, always had lots of trouble getting backend & auth setup, this is helpful!

[@thePocketWatch45]

this video just changed my life...keep them comin

[@johnlin6121]

This is next-level stuff. Very impressive!

[@kgarbaya]

Thanks for the amazing tutorial; love how every instruction is clear

[@mazidcouk]

Liked it before playing the video lol coz Jasons going to drop pure game on this one :D

[@j05hau]

Great introduction. Thanks.

[@alanayoubi1]

This is amazing. Finally a video that covers everything. Do you have some kind of 1:1 consultation? I want to have 1 hour call with you

[@unclesam007]

30:58 you thought we didnt notice but we did 😂 great vid btw

[@Jim-ey3ry]

Really helpful! This will totally change my workflow; I think for auth, it might be better to implement signup & signin page too;

[@martinsherry]

i am six minutes in and ive learned more in six minutes here than the six hours i have spent watching other yt’ers on the very same topic. great video.

[@dhirajkhanna-thebeardedguy]

You can use tree in the terminal to generate the directory structure in ascii and even specify depth

[@subramanianchenniappan4059]

I am a java tech lead. first time hearing cursor

[@dinesh-cf4qs]

thank you for the tutorial.

[@theycallmetheboss]

absolute legend

[@Joe-bp5mo]

Thank you for sharing those golden nuggets!

[@VaibhavShewale]

the problem is not building but coming with the idea that is new and also unique and interesting

[@andreialcaza]

Look what people are wanting

[@muffafaYoutube]

Love from Turkey 🧡

[@fredericherrera]

very complete - well done

[@razdingz]

this iz good one man , making more like this things

[@Rollinsonn]

Genius! nice vid

[@phaZZi6461]

imagine this: google form to collect customer feedback, automatically turned into github issues (with some ai formating). then let the ai implement a solution by itself. or developers creating issues themselves. have some automated tests in place (written by ai of course). requires some good prompt workflows and (for now) educated devs to set these up, but at this point it seems inevitable that well replace ourselves with ai devs in the next few years.

[@AIJasonZ]

This is freaking insane hah love it

[@proflead]

Very interesting! Saved!

[@nikksanirudh]

thank you Jason

[@musumo1908]

nice idea - some cool cursor approach tips in here..did try but seems some key bits missing - looks like you were swapping between yarn and npm also?? Gave up after much fun and games..you really have to be a programmer to run this....

[@joseduarte1240]

Why you didnt use V0 to do the sign in option?

[@VipulChaudhary1337]

In Jian Yang we trust

[@NakedSageAstrology]

This was very helpful, thank you.

[@sohaib07]

Wow damn that's sooooo helpful

[@elpablitorodriguezharrera]

This is awesome, can you make more real scenario building an entire app including the landing page then the app itself? Maybe cloning the entire cursor with cursor😂

[@r34ct4]

Very nice. how much did the API calls cost to claude for this project?

[@LegalAutomation]

Exactly 😂

[@gabrieleferrari2266]

Hey dude, this video is simply amazing! Maybe others too. I want to create a web app using React and Node.js from scratch. Please include something that also uses a MySQL database with the mysql2 library. Maybe add some auth with email and login. Email login would be good. Compliments!

[@moea5298]

Ive been using cursor and its simply mind boggling. the ability to parse the codebase, multi-file edit, one-click apply the generated code, finally makes AI code generation a coding standard. However, im personally still struggling with UI/UX prompts, and longer chain of prompt commands. I know there is v0, but i think at this point, its like taking a small u-turn after going straight for so long

[@thabangmoiloa4178]

Could you please also create a full-stack project but for mobile application instead of web application ?

[@ylohnitram]

You don't have to use screenshots and AI. Just use the "tree" utility for generating the file structure - it's as simple as that.

[@AIJasonZ]

Great tip, thanks mate!

[@quierovivirensanantoniotex7407]

what do I have to do to make out of this and IOS app??

[@FRANKWHITE1996]

wanted to subscribe but already subscribed!!!

[@bsick6856]

9:30 where did you get that input from?

[@AIWorkforceEvolution1]

"Great video! Your explanation of [topic] is super informative. I create videos on this topic as well, and it’s inspiring to see how you approach it. Thanks for the inspiration!"

[@ritaverissimo1720]

Hi, thanks for this video :) How do you handle the database import when deploying? Thanks!

[@cj1903m]

Great video, thank you. What theme are you using for Cursor?

[@75M]

Do you need (or is it recommended) to have a paid plan to follow this project?

[@GAGONMYCOREY]

I tried with free and it worked p well

[@raymondong349]

hi Jason, thanks for the video. Got me real excited about using Cursor AI as part of my workflow. Can you help me understand whether you are using any external LLM or built in Cursor AI LLM? In that case how much money would you be incurring for the prompts related to building a project like this?

[@googleyoutubechannel8554]

use Cursor AI... and 10 years of programming experience in web dev and js.... oh wait... you didn't mention that part...

[@andrewpawlak1482]

Is it worth even attempting to build an Enterprise SaaS application with user permissions and role hierarchy structure or is that going to be too much? Also, I'm not technical but do have a lot of experience in the space (2x SaaS co-founder) and know the business rules, user stories, and requirements for what I'm trying to build very well

[@HelpHub150]

I think the back end development is going to be hard just with genAI just my opinion

[@matthewt6071]

Icp bro

[@amandamate9117]

now its time to utilize the new o1-mini or o1-preview and make some crazy projects.

[@thebardlydm]

Was the free tier or paid tier of cursor used here?

[@amulbhatia-te9jl]

when I mention clerk in my requirements, I get errors around clerk to begin with, any suggestions how to have it not build everything out at once?

[@THOTHO-ie5lz]

can you do one for django-cms-shopping cart? Or creating shopping cart for any headless cms via Cursor AI.

[@pranavbobde2529]

14:31: wow you actually wrote "errro" lmao 🤣

[@monhack582]

this is very good, Jason, thank you very much. This is exactly what I wanted. how things work. so we can prompt ai more effectively. I have question, is there a place where I can ask you questions directly, do you provide 1:1 coaching ?

[@AIJasonZ]

Yes! I have a community where you can join and ask questions, I will jump on from time to time or other community members will help answer too :)

[@AIJasonZ]

2ly.link/1z94G

[@SejalDatta-l9u]

Great video. Did you have issues with cursor changing/breaking existing code? If so - how did you overcome this (without pulling out your hair?!)

[@idincern]

you can push your working code to the git system. if it ruins it, you can come back

[@seawatts12]

Why not use .cursorrules file?

[@vjatseslavjertsalov2829]

Looks good but how do you monetise this project? Using SD models, Supabase, Versel in cloud costs money. Can you cover it in the next video?

[@jacob_the_parson]

Just found you, amazing content and explanations. What little interface are you using to make those git commits?

[@AIJasonZ]

Thanks Jacob! You mean GitHub desktop app?

[@AteAdv]

nice content

[@The-Sentinel]

why didn't you want to use supabase for authentication too? is clark way more powerful?

[@AIJasonZ]

I didn’t want to build out whole UI flow to handle different sorts of auth methods

[@ylohnitram]

That clerk auth solution is very unfarovable. It can become very pricy and it's a vendor lock, since there is no way to migrate the users anywhere else. I use supabase instead.

[@wormholeinteractive]

Firebase is a good option and not too hard to implement

[@jessicalewisjessielew3399]

if this video is 42 minutes long and was released 10 minutes ago how come there are comments that imply they already have seen the video ? 🤔

[@anreoil]

I never watch his videos, as I can't stand his accent. I give AI the link to the video, which is then analysed, and I'm reading it as a shorter lecture summary. So, technically, I can comment in 10 minutes. Just to illustrate, this is how it looks on my end: Today, I want to show you how you can use Cursor to build a production-ready full-stack application without any programming knowledge. We'll cover everything from ideation, setup, building the frontend and backend, implementing authentication, and deploying the application online. First, let's talk about Cursor. If you're not familiar, Cursor is an AI-native code editor that enables almost anyone to build any application they want. It's so user-friendly that even an 8-year-old can create a full web application in just 45 minutes. People have already used Cursor to build high-quality production-level applications like video editors, Chrome extensions, and even crypto exchanges. However, most tutorials only show how to build simple demos. Today, I want to demonstrate the full potential of Cursor by building a complete, production-ready application. The application we'll build is an emoji generator. Users can type in any prompt to generate emojis, see emojis created by others, like them, and download them. The app will also include a full authentication flow and a backend to track all generated emojis and users. ### Setting Up the Project To start, we'll set up the project using libraries like Next.js and React, which simplify development. We'll also use UI component libraries like ShadCN and Tailwind CSS to make our code cleaner and more readable. 1. **Initialize the Project:** - Open Cursor and the terminal. - Run the command: `npx shadcn@latest init`. - When prompted, type `y` to proceed. - Choose to set up a new Next.js project by typing `yes`. - Name the app "Emoji Maker". - Select the "New York" style for a more condensed view. - Choose a neutral color scheme. - Confirm the CSS variable format. etc etc, blah blah

[@kforrisw9148]

@@anreoil you are gonna miss his accent if Jason all of the sudden has the most perfect English accent in the next videos. we all know how

[@AIJasonZ]

Hahah, god, should I go and improve my accent or keep it as my channel signature style 😂

[@TylerReedAI]

@@AIJasonZ haha bro, nothing wrong with it, you better never change it! Cursor is amazing. It's really helped out, and I've tried starting like llamaindex, crewai and autogen agents, and it can I assume based on understanding the functions fill in parameters for you. Cool stuff!

[@KasunWijesekara]

@@AIJasonZbro I have been watching u from day one and I’m not a native English my self. And I fully understand you even at 1.75x speeds 😂 Trust me ur content is like gold to me and even if u talk in ur native language I’d put the effort to translate and learn from you lol. I don’t think anyone cares about the accent other than the value u give to the community. I have learned so much from u dude ❤️ keep it up

[@kumarbanavathu7716]

How much it would cost to build production grade application?

[@qingtian1691]

could you please provide mockup.png? thanks!

[@PhotoshoppersStop]

Thanks

[@BillionaireTriumps]

i encountered so many errors in the starting which i am not able to resolve like MODULE NOT FOUND Webgpu not exported It would be a great help if anyone could to tell how to resolve this error

[@forseth5514]

Isn't it better if you use "cursorrules" instead of frontend_instructions?

[@saiprakash6483]

Is cusor ai better than claudedev + continue + vs code + local/openrouter/claude api/openai api ?

[@gedasv]

what is the github app that you are using?t

[@EmblazNOR]

Why not use supabase auth? Sponsored or other reason?

[@AIJasonZ]

Supabase auth is good, but require you build out the whole UI flow, and different types of auth

[@jessicalewisjessielew3399]

cursor or replit?

[@alqods80]

If you are not a developer and just want a simple mvp then replit agent

[@PreetiSingh-n3y]

Two questions:- 1.) do we need to be a coder to use these tools or not. 2.) will no code apps and dev jobs are in danger?

[@macacovelho94]

So why did he completely skip how he created the code for headers.tsx ? Overall good video but some parts were completely skipped - 0 chance a non programmer can follow along to this.

[@anelm.5127]

It would be creat if u added payment, rate limiting and real domain for illustration purposes - otherwise great video

[@arnx-zd9oe]

Imagine referring to this as "production" 💀

[@Timbuktu420]

Yo noob here. Can anyone tell me which Github extension he was using?

[@AbhishekKumar-u6r5s]

video title: "How to use Cursor AI build & deploy production app in 20 mins" video length: 42 minutes. Irony