How To Build Web Apps using V0 + Claude AI + Cursor AI

Поділитися
Вставка
  • Опубліковано 26 гру 2024

КОМЕНТАРІ • 396

  • @castandspear
    @castandspear 3 місяці тому +96

    I'd love watching you build something from start to finish with no steps skipped :)

    • @idjumatov
      @idjumatov Місяць тому +1

      hey, but he did just that. Well he skipped the part of copy-pasting, but anyway.

  • @rasmic
    @rasmic  3 місяці тому +330

    like if ur nice to your ai when prompting

    • @kaelsurtour
      @kaelsurtour 3 місяці тому +17

      Always great them and say thank you and goodbye. No Ouija shit, I just want them to remember I always been nice to them just in case. 😬.
      I'm Barely kidding 😂

    • @iAmDonH
      @iAmDonH 3 місяці тому +6

      You never know man… they might end up being disgruntled employees… 😂😂 I’m very polite to them 😅

    • @rasmic
      @rasmic  3 місяці тому +1

      @@iAmDonH smart man

    • @realg701
      @realg701 3 місяці тому +3

      I'm nice to everything. 🕊

    • @pollywops9242
      @pollywops9242 3 місяці тому

      Someone asked why LLM hallucinates and is so convinced the info they give then is correct, I replied it's because we taught them gaslighting with reinforcement learning

  • @nimblename
    @nimblename 3 місяці тому +37

    Designer here trying to catch the wave - i like your style sir, and would love a full walkthrough series!

    • @rasmic
      @rasmic  3 місяці тому +11

      Thanks, will do my g

    • @stanford19
      @stanford19 3 місяці тому +3

      Designer here too, I am already coding my ideas hahaha

    • @jace.cheung.7
      @jace.cheung.7 21 день тому

      @@stanford19 What a party of designers - let's go!

  • @jerrod-tuck
    @jerrod-tuck 3 місяці тому +5

    Well done. I appreciate your statement about not being a finished application, but rather providing a starting point. This aspect is the most frustrating for me in any stack. This is fantastic.

  • @mosessmax
    @mosessmax 3 місяці тому +59

    the "remember app router" prompt too real.

    • @rasmic
      @rasmic  3 місяці тому +2

      it be forgetting sometimes lol

    • @resxurrection9846
      @resxurrection9846 3 місяці тому

      bro I been trying to tell chatgpt this shii for soo loong everytime when the app router was new lmaoo

    • @elektro9te
      @elektro9te 15 днів тому

      😂😂😂

  • @prakharmathur619
    @prakharmathur619 3 місяці тому +9

    Bro!!! This is exactly what I was looking for. Thank you so much for creating this video. As a full time frontend developer, I can see how useful it could be to me. And also for my side projects, this will help me get up and running quickly (that's the hard part you know, "The initial setup"). Thanks, and keep making such videos. We would love an in depth tutorial series of you making an app or saas type product using this flow. Cheers!

  • @dave9527
    @dave9527 3 місяці тому +46

    Awesome. You turned a simple HTML page into 20 different TS files.

    • @karanmaheshwari167
      @karanmaheshwari167 3 місяці тому +1

      😂😂

    • @LixT-b1t
      @LixT-b1t 3 місяці тому +2

      Yeah the KISS inverted now, just got to remember your versions and prevent updates, not to miss anything fundamentally prevent spaghetti code when in a lazy state. AI should be improving in background aswell along with versions.

    • @X3S000
      @X3S000 3 місяці тому

      And how long would that typically take someone? Bro I did so much shit with chatGPT it’s ridiculous.
      Some people just don’t know how to leverage tools efficiently but chatGPT alone can replace humans.
      I’m currently working on a program that can update its own code and continue improving itself to get better at making code.
      I basically built a weaker version of copilot in less than 24 hours, let that sink in, chatGPT can manage my files by interacting with an interface that it built…
      The future depends on how companies decide to proceed. They could easily fire half of their dev staff right now.

    • @aaagaming2023
      @aaagaming2023 3 місяці тому +4

      He turned a one file generation into appropriate folder structure according to best practice.

    • @dave9527
      @dave9527 3 місяці тому

      @@aaagaming2023 Subjective nonsense. For example I have a giant Elm file in one of my projects, it's organized very well and is super easy to edit and refactor with a decent editor (Vim w/ a code folding plugin). Breaking this into 20 files would add a ton of bloat and misdirection... and this is for a real app, not some marketing page.

  • @saodbing
    @saodbing 3 місяці тому +17

    Articulate, knowledgeable and direct. We like this.

    • @rasmic
      @rasmic  3 місяці тому +2

      thanks u g

    • @Bartofii95
      @Bartofii95 3 місяці тому

      bro that was not direct wtf lmao

    • @saodbing
      @saodbing 3 місяці тому

      @@Bartofii95 which bit do you think should have been shorter?

  • @JJ-tr8cu
    @JJ-tr8cu 3 місяці тому +20

    I like your realist style. Keep it up, looking forward to more videos

    • @rasmic
      @rasmic  3 місяці тому +1

      thank g

  • @sulavbaral9972
    @sulavbaral9972 3 місяці тому +11

    These are useful for repetative tasks like making these static pages and stuff, helps speed up the process and focus on other important tasks in the codebase

    • @rasmic
      @rasmic  3 місяці тому +2

      facts

  • @FuzzyAnkles
    @FuzzyAnkles 3 місяці тому +12

    AI is still a baby. I remember just year ago i was learning context api with AI and it was struggling. Now we are already building components and much more. I am super stoked to see whats going to be next year September. Nice content Ras !

    • @rasmic
      @rasmic  3 місяці тому +1

      thanks for the comment my g

  • @aaagaming2023
    @aaagaming2023 3 місяці тому +1

    This is definitely the best approach Ive seen presented on how to code with this stack. Sincerely, thank you!

  • @abdellahbenkorich8052
    @abdellahbenkorich8052 3 місяці тому +9

    One thing I do to avoid copy/paste, I just ask claude to generate a bash script for the generated files with thier contents, then I execute it in the project dir

  • @RexRoca1
    @RexRoca1 3 місяці тому

    I really like the balance of not saying AI will replace all devs and not saying it's useless. Thanks for sharing!

    • @martino6172
      @martino6172 Місяць тому

      Yes, it will not replace developers, it will just increase productivity by writing boring, repetitive blocks of code. Similarly, when engineering adopted CAD software, engineers didn't spend 90% of their time drawing lines on paper. This didn't decrease the number of engineers needed, it just increased the opportunity to create really complex designs.

  • @alexanderalexander3194
    @alexanderalexander3194 3 місяці тому +1

    Hey @rasmic, I just wanted to say thank you for continuing to make content. I like the short format and how clear you are, which makes you different from other content creators. Hope to see you grow!

  • @mattk2531
    @mattk2531 3 місяці тому

    Ras - your perspective on this is absolutely spot on. I’ve watched a ton of content about the latest in AI development tools and far too many people are coming at it from the perspective of a traditional developer. When speaking to people coming from no code or people that aren’t technical at all, most of the content fails to strike the right note with this latter audience. I think he did a great job speaking to the non-technical audience here.

  • @mikemarrotte
    @mikemarrotte 3 місяці тому +1

    Bruh you’re making building ideas AND AI interaction so accessible for people! Thanks for sharing, keep doing great work 🔥

  • @gianni.santi.
    @gianni.santi. 2 місяці тому

    "Always be nice to your AI"
    You are absolutely correct.

  • @KhuramMalikme
    @KhuramMalikme 3 місяці тому +1

    I'm only 3mins into this video and I already liked and subscribed. As a no-coder/low-coder this is exactly the content and guidance I'm looking for. I'll be very keen to see a further fuller tutorial also.

  • @MarcoKotrotsos
    @MarcoKotrotsos 3 місяці тому

    Awesome. Small note: It might not replace developers (I am one too) but what I am seeing in the market is that the open listings for freelancers are drying up quickly and companies are re-evaluating new hires. When the current flock of developers can 2x, 5x, or even 10x- supported by the organization- new developers are not needed as much anymore. Which can cause burnout, stress and dev. fatigue for current developers. You might be able to go 5x, but your organisation is going to start expecting it soon enough. Keep up the awesome work!

  • @schoren
    @schoren 3 місяці тому +5

    this was super helpul. i've been wanting to find tools like this to get started quickly with frontend stuff. would love to see a full tutorial including backend too!

  • @paullopez_ai
    @paullopez_ai 3 місяці тому +2

    You are absolutely on the money! I’ve been using cursor for a couple of weeks, before that I was just using GPT4. Today, cursor was getting confused with crewai project templates using poetry, along with other python files I had in the project. I finally had to step in and fix it. I was using Claude sonnet 3.5 with cursor, I wonder if using OpenAI I would’ve been better.

  • @NDIZITV
    @NDIZITV 3 місяці тому +2

    Please teach us how to build a fullstack app using this framework. You’re my favorite teacher already

  • @JosephDefendre
    @JosephDefendre 3 місяці тому +2

    V0 + shadcn cli + cursor = game changer!!

  • @TimothiusMartin
    @TimothiusMartin 2 місяці тому

    Thank you brother, I honestly can't believe I'm watching this for free. I'm a complete newbie in cursor and v0, but I can follow this quite easily.

  • @grayvision946
    @grayvision946 3 місяці тому

    Bro you are about to blow up. thanks for creating this content

  • @godswilugbosanmi2479
    @godswilugbosanmi2479 Місяць тому

    I must say: I love your workflow. I have been trying to build a full stack app using different AI models, though it has been helpful so far but not perfect as I have to keep going back and forth with debugging but I’m definitely going to try this out!
    Thanks for sharing!

  • @drummermike5150
    @drummermike5150 2 місяці тому

    Great video. Your last part of the video about the developer mindset is spot on! Subbed!

  • @aguinaga
    @aguinaga 3 місяці тому +1

    Great vid bro. I will try this soon!

    • @rasmic
      @rasmic  3 місяці тому

      thank u g, have fun

  • @BobBobIsSwag
    @BobBobIsSwag 3 місяці тому +3

    You a legend fr ong No Cap No Kizzy Let’s Get This Bread gang 🙌🤑

    • @rasmic
      @rasmic  3 місяці тому +1

      appreciate u gang

  • @raeRegano
    @raeRegano 3 місяці тому

    I like the change in tone after the header problem

  • @toddwmac
    @toddwmac 27 днів тому

    Good stuff and you had me from... "Always be nice to your AI" Cheers!

  • @dasheck0876
    @dasheck0876 2 місяці тому

    Never used cursor AI before but will look into it. Did you see Claude Dev already. Looks similar to Cursor AI. Besides that we have pretty much the same flow. Also glad to see someone trying to place AI correctly. AI will replace us eventually, but for now it is a very strong copilot everyone should have

  • @MemberWing
    @MemberWing 3 місяці тому

    Ras is a wise man! Love your content and insights 👍

  • @araimarodriguez6325
    @araimarodriguez6325 3 місяці тому

    On point . Waiting for more tutorials like this.

  • @EnesKab
    @EnesKab 2 місяці тому

    The problem is all examples people demonstrating on UA-cam is very general purpose, very simple kind of apps/websites. The real use cases or edge cases are the ones we need to see. Maintaining a real life project, adding new features, building a complex type of SaaS etc. A pipeline that works in real life.

  • @Opeyemi.sanusi
    @Opeyemi.sanusi 3 місяці тому +5

    Claude is the best at coding tasks. Nice video!

    • @rasmic
      @rasmic  3 місяці тому +2

      for sure!! thanks for watching

  • @schurrle27
    @schurrle27 Місяць тому

    Nice video man this is my framework as well + o1-preview for document generation

  • @javi_park
    @javi_park 3 місяці тому +5

    more v0 -> claude -> cursor projects plz! lets get crazy

    • @rasmic
      @rasmic  3 місяці тому +3

      will do my g

  • @safifaruqi
    @safifaruqi Місяць тому

    wonderful found! thank you so much im building a saas product and this is incredible useful!

  • @paulmiller591
    @paulmiller591 3 місяці тому +2

    Wow, that's inspiring. Like your approach.

    • @rasmic
      @rasmic  3 місяці тому

      i appreciate that homie

  • @Agababaable
    @Agababaable 2 місяці тому

    i've noticed v0 is indeed much superior and great to start with

  • @davidheidari2188
    @davidheidari2188 2 місяці тому

    You're awesome, my friend! Keep up the great work!

  • @awesomeworstgamer
    @awesomeworstgamer 2 місяці тому

    Just stumbled on your video and I must congratulate you! Well explained and appreciate the time you've spent in showing your workflow. Instant sub!

  • @mbrink816
    @mbrink816 3 місяці тому

    thanks! for sure would love a video on more complex web apps. for some inspiration, maybe show the process of creating components in v0, organizing in Claude or ChatGPT, adding the components to Cursor, adding a database, connecting some workflows, showing how two different user types with two different interfaces can share that database, deploying the app somewhere and then making edits/debugging from there.

  • @JoxnieD
    @JoxnieD 2 місяці тому

    Buddy this is amazing! I watched you in a podcast with Greg Isenberg and as a product designer who wants to learn about code and leverage the AI this blows my mind.
    If possible, I would love to see this framework you are using but in a case where you want to build an iOS app in Swift.
    Keep on great work ❤‍🔥

  • @UmarHamza
    @UmarHamza 3 місяці тому

    Thanks man. I like the way you break down how to use various tools.

  • @homiecoder
    @homiecoder 3 місяці тому +2

    dope vid again my dude!
    Appreciate your real perspective,
    and this vid was like perfect timing,
    peace! from da homie!👊

    • @rasmic
      @rasmic  3 місяці тому

      appreciate u gangy!!!

  • @OkGeneral1
    @OkGeneral1 3 місяці тому +7

    After writing the whole code in chat bot ask the AI this "can you write it in a bashcript so that i can easily copy it to my desktop"
    It will significantly reduce the work load to get the files and code in your PC.

    • @rasmic
      @rasmic  3 місяці тому +2

      ohh that's smart

  • @ahmedwaleed6094
    @ahmedwaleed6094 3 місяці тому

    Love the tutorial. Continue rocking and sharing man

  • @JorgeMenaDev
    @JorgeMenaDev 3 місяці тому +1

    Man, you’re the best. Keep it up!!!

    • @rasmic
      @rasmic  3 місяці тому

      I appreciate you gang

  • @NoCodePro-cc8oi
    @NoCodePro-cc8oi 3 місяці тому

    Looking forward to watching the full tutorial.

  • @AltafRehmani
    @AltafRehmani 3 місяці тому

    Thanks for this - i believe this workflow will all come together when either of vercel or replit brings this all together with agents to provide a end to end experience. also we need to think of databases , security, scalability and deployment of these as we move beyond POCs

  • @avawill_survive6203
    @avawill_survive6203 Місяць тому

    Very useful and intriguing tutorial😂 THANKS SO MUCH

  • @mohamedbouhout7023
    @mohamedbouhout7023 3 місяці тому

    Congratulations bro for your videos. Greetings from Spain

  • @abdulmuizzkelani3760
    @abdulmuizzkelani3760 2 місяці тому

    This is awesome, I use the same framework, would love to see you Implement a full tutorial with it. Thanks.

  • @JiMixJP
    @JiMixJP 3 місяці тому +1

    That was a perfect video about using tools i wait for next video which you create whole application :D

    • @rasmic
      @rasmic  3 місяці тому

      will do g

  • @SzczepanBentyn
    @SzczepanBentyn 3 місяці тому +2

    I like that flow

    • @rasmic
      @rasmic  3 місяці тому

      thanks g

  • @eliskucevic340
    @eliskucevic340 3 місяці тому +1

    Great video. I would want to see more videos about creating pages and routing with cursor.

  • @marcusvanesveld4417
    @marcusvanesveld4417 5 днів тому

    Timestamps (Powered by Merlin AI)
    00:03 - AI tools are not replacing developers, but can be a helpful co-pilot in development.
    01:29 - Utilizing V0, Claude AI, and Cursor AI for efficient web app development
    02:49 - Building a notion style landing page using V0, Claude AI & Cursor AI.
    04:44 - Enhancing web app components for speed and aesthetics
    06:38 - Using theme provider for light and dark mode
    08:34 - Generating folder structure and creating files using Composer in web app development
    10:18 - Fixing the header alignment issue on the landing page
    12:20 - AI can help speed up UI development process

  • @stayfocus_grind
    @stayfocus_grind 3 місяці тому

    Ras im from Argentina, thanks for all the info, great channel and even greater human!

    • @rasmic
      @rasmic  3 місяці тому

      love my g, thank u

  • @DJNomadX
    @DJNomadX 2 місяці тому

    We need a long ass 2-4 hour video of a complete walk through building a complex app.

  • @juan294
    @juan294 3 місяці тому +2

    Really interesting video. I was looking for something like this. I hope you find the time to make a more complete guide on how to build a complete web app!

    • @rasmic
      @rasmic  3 місяці тому

      will do my g

  • @alonsohermosa1428
    @alonsohermosa1428 3 місяці тому

    wow, thank you so much this is amazing!!!!!! Thank you for putting int he time to show this workflow you have. It would be amazing to see how you go from scratch too a fully shipped application.

  • @apu242008
    @apu242008 3 місяці тому

    U' re my new best friend! Thanks from Argentina, Bro!

  • @WebDevCody
    @WebDevCody 3 місяці тому +6

    I’m curious why not just paste the v0 right into cursor since it uses Claude?

    • @rasmic
      @rasmic  3 місяці тому +3

      This might just be me but i find Claude itself is a lot smarter than cursor + Claude. So i just default to Claude for some things

    • @mic1991
      @mic1991 2 місяці тому

      do you suggest to pay for a Claude pro account and use Opus or just stick to the free one with Sonnet 3.5?
      I ask because already pay for Cursor, v0 and GPT 😂

    • @amitmahajan8989
      @amitmahajan8989 19 днів тому

      Thanks for asking this question as I had the same when I watched this video and thanks for answering as well..I guess I got the recipe to build great products!

  • @ohhhleonid
    @ohhhleonid 3 місяці тому

    Love the process! Thanks for sharing.

  • @proflead
    @proflead 3 місяці тому

    I've seen your workflow, it's great! Thanks!

  • @mojocolors
    @mojocolors 3 місяці тому

    Nice work brother! End to End deep tutorial for newbie’s like me will be very helpful. Keep it going!

    • @rasmic
      @rasmic  3 місяці тому +1

      that's coming

  • @MrLyonliang
    @MrLyonliang 3 місяці тому +2

    great idea to use Claude organize file structures :) It's more efficient than doing it in cursor. thanks.

    • @rasmic
      @rasmic  3 місяці тому

      facts my g

    • @nimblename
      @nimblename 3 місяці тому

      Don't understand this - couldn't composer take the code from V0 and create the pages without all the copy pasta??

    • @rasmic
      @rasmic  3 місяці тому +1

      @@nimblename composer be dumb sometimes imo plus don't wanna max the cursor calls

  • @bradsamuel9801
    @bradsamuel9801 3 місяці тому

    Fire vid my boy keep them coming 🔥🔥

    • @rasmic
      @rasmic  3 місяці тому +1

      thanks g

  • @Mohalnassery
    @Mohalnassery 3 місяці тому

    A better tip for claude:
    Give me the tree structure, then ask me if it it's ok.
    When i tell you to go for it , give me sh file to create the whole structure + the code for each file. Make sure that all files has the full codes.
    (Then create sh file and run it)

  • @sparkerb2631
    @sparkerb2631 3 місяці тому

    Well done for taking the hype out of the current buzz. I've found that ai claude and GPT will get you so far, then You come up against a problem and no matter how many times you prompt it, it just won't be able to solve that problem. And then, if you're not a developer, you're gonna struggle to try and get past that hurdle.

  • @philips8065
    @philips8065 2 місяці тому

    great ... i would love to see the full scale backend design as well

  • @Eliaass1
    @Eliaass1 3 місяці тому +1

    Hey Ras, awesome video i reccomend u to let ChatGPT-4 handle your prompts, who better to chat up an AI than another AI

  • @MrPkmonster
    @MrPkmonster 3 місяці тому

    Thank you so much bro. Simple content and it looks great.

  • @Gixerboy
    @Gixerboy 3 місяці тому +1

    Nice Video mate. Subscribed.

    • @rasmic
      @rasmic  3 місяці тому

      thanks broski!!

  • @Naz-yi9bs
    @Naz-yi9bs Місяць тому

    Thank you bro, flow is fire

  • @paul-towers
    @paul-towers 24 дні тому +1

    Great video! Subbed!

    • @rasmic
      @rasmic  23 дні тому

      Thanks bro! Appreciate the sub my g

  • @Reflowflow
    @Reflowflow 3 місяці тому

    Your content it excellent! Provides great value.

  • @RodrigoMallmann1
    @RodrigoMallmann1 3 місяці тому

    i had a great time watching this. i like to use AI like this. just stream thoughts into a prompt

    • @rasmic
      @rasmic  3 місяці тому

      Glad you enjoyed it!

  • @mrkenichi
    @mrkenichi 3 місяці тому

    Creative ideals!!! Thank Ras Mic

  • @JeremyTri
    @JeremyTri 2 місяці тому

    Dope video man! Super valuable. Found you from Greg's channel. Quick question - what screen recording app are you using? How are you doing the zoom ins and outs - is that part of the recording software, or are you keyframing it in post production software i.e. Premiere Pro?

  • @Future9
    @Future9 3 місяці тому +1

    Awesome content bro really. Thank you

    • @rasmic
      @rasmic  3 місяці тому

      thank u my g

  • @davidgardner9346
    @davidgardner9346 Місяць тому

    Great demo. Loved it. Hope you keep doing more. I was intrigued by your dev environment. Thanks for listing "Arc" in the show notes, I'll try it out. I had a couple suggestions that may be of help: 1) add Grammarly to your browser and it will automatically spell check you in real-time, no more wondering if your spelling or grammar is correct, 2) I don't think "obfuscate" applies in the context you used it here (ua-cam.com/video/grc0YSEdUQY/v-deo.htmlsi=tlL6irYes3kBLKR2&t=733). Keep up the great work!

  • @pushkarjain4669
    @pushkarjain4669 3 місяці тому

    Mind blowing 😶‍🌫️

  • @HomeEngineer-wm5fg
    @HomeEngineer-wm5fg 3 місяці тому

    Really interesting topic brother. I subscribed.

  • @ErenKahveci23
    @ErenKahveci23 2 місяці тому

    Thanks for the video man.

  • @dependablecoverage
    @dependablecoverage 2 місяці тому

    I think Cursor could benefit from analyzing heuristics over time like how many attempts does it take for a developer to finish fixing a file or to hit a checkpoint in their implementation. That way they can see if Cursor becomes dull over time. They’ll have metrics to prove it.

  • @mybocks3
    @mybocks3 2 місяці тому

    A tip: we would ALL give you our email addresses to have you deliver your exact prompt, a guide, a cheat sheet or whatever to our inbox. You've got a great entrance to a funnel here. Very valuable, just build that email list and sell us something down the line.

    • @rasmic
      @rasmic  2 місяці тому

      i appreciate the confidence booster my g

  • @mko-ai
    @mko-ai 3 місяці тому

    You personality 🔥🔥

  • @Lygofast
    @Lygofast 2 місяці тому

    just so you know if you install the code from v0 via terminal it will download all the different components automatically and into its different directories

  • @eyal-fortnite
    @eyal-fortnite 3 місяці тому

    Great vid brother!

  • @avatar_ng
    @avatar_ng 3 місяці тому +1

    nice workflow!

    • @rasmic
      @rasmic  3 місяці тому

      Appreciate it!

  • @ctrlcheeb
    @ctrlcheeb 3 місяці тому +1

    very nice! also question what do you use to record your screen looks really nice :)

    • @rasmic
      @rasmic  3 місяці тому +1

      it's linked in my bio g

    • @ctrlcheeb
      @ctrlcheeb 3 місяці тому

      @@rasmic the site doesnt work / is down

    • @rasmic
      @rasmic  3 місяці тому

      @@ctrlcheeb www.screen.studio/?aff=z9LMV

  • @SimonLacey-MySleekDesigns
    @SimonLacey-MySleekDesigns 3 місяці тому

    Just an FYI you can do that all inside of cursor using Claude 3.5. you dont need to jump around 3 different apps. Also in my experience do one section at a time and use very descriptive prompts.

  • @LukaszAdamOfficial
    @LukaszAdamOfficial 2 місяці тому

    Nicely explained!

  • @larsfaye292
    @larsfaye292 3 місяці тому

    Not sure why you're using the Claude chat interface...you can use Cursor Composer + Claude for the file organization step and keep everything in the IDE and get the same result!

  • @jrddp0
    @jrddp0 3 місяці тому

    Solid video. Thanks man

  • @gray.dog6
    @gray.dog6 3 місяці тому +1

    Great vid bro

    • @rasmic
      @rasmic  3 місяці тому

      I appreciate u gang