Build a FULL Web App With Claude With 2 SCREENSHOTS!

[@rileybrownai]

GUYS PART 2 IS OUT - SEE HOW FAR I'VE GOTTEN WITH THIS APP!!! kzbin.info/www/bejne/qnanXoeid5xpors

[@Ivcota]

As a senior software engineer, I'm hyped about what you accomplished! The best feeling ever to build software, happy that more people are able to experience this joy haha. 4 hours is impressive for someone with no programing experience.

[@HyperSculptor]

Not feeling threatened as a software engineer = I bet you are pretty good. Takes high level of competency to realise where these tools fit in a workflow, and how they complement human skills. What they can and can't do, beyond the hype.

[@seb_balls]

@@HyperSculptoractually it means more work for SWEs and SREs once there’s traffic and scalability pains.

[@Ivcota]

@@HyperSculptor Appreciate that feedback. 100% agree with y’all on evaluating what the tool is good at and what it’s not so we can use it for the right use cases. This video is a prime example of what it actually takes to write software. Even though the LLM did the grunt work of the process, this man had to think, problem solve, mockup, and describe high level solution for 4 hours. In fact, this is what it takes to build software. Now if he knew more about code, APIs, and the tech stack, he would have either a: completed this faster, b: got more features added, or c: create a much more polished product by the end. But the tool is useful and this guy used it like a real problem solver. Much kudos!

[@HyperSculptor]

@@Ivcota Interesting to read your thoughts, I'm actually coming from the arts and design world and agree 100%.

[@TYGERRECORDS]

Shouldnt be hyped for long... youre done for bro

[@IncomeMenu]

Great video. Rest of the people just build UI and show it for clickbait but you've actually done something useful with it.

[@Brawlstriker89]

What, ask ai what to do? lol what’s he showing that anyone can’t already do? You need someone to show you how to do prompt engineering?

[@rileybrownai]

@@Brawlstriker89 1) watch your tone. 2) mostly agree anyone can do this 3) yes people need to be shown. Idk why but some people like to be inspired by other people trying to create stuff. Is that a problem?

[@Brawlstriker89]

@@rileybrownai watch your tone is a strange thing to say to a comment that is written.. not said.. how could you possibly know my tone? You’re obviously offended because my comment is right.

[@taylordcraig]

​@@Brawlstriker89 It's because your English is poor. "lol what’s he showing that anyone can’t already do? You need someone to show you how to do prompt engineering?" is a really rude statement/rhetorical question.

[@Brawlstriker89]

@@taylordcraig say it out loud idiot. Makes perfect sense.. haha. Common sense isn’t common anymore. That’s what this video says.

[@ryanclarkin6890]

That feeling when you have 1 message left and Claude absolutely clutches it!

[@rileybrownai]

Hahahahahhaa yessss

[@antoniofuller2331]

It knows lol. I only have one card in my deck, DESTINY SHINING DRAW!!!!

[@Mr.Duukee]

Just for calude I created 4 gmails 😅

[@marcusdelicius]

@@Mr.Duukee lolllllllllllllllllllllll

[@rheavictor7]

hahahaha really specific man. But amazing feeling, like "AT THE BUZZER"

[@kate-pt2ny]

Seeing your smiling face after successful deployment, wow, I'm so happy, I really bless you, your operation has inspired a lot of people who can't code, especially when you used 2 Claude accounts, and then let the API, keep pushing forward and updating, it's really inspiring and happy for you

[@rileybrownai]

top 10 feeling of my life. I hid 2 long annoying hours because I was getting so pissed

[@antoniofuller2331]

Hmm, never hurts to have a backup account lol

[@The7MinuteLife]

Great job Riley! I am a 64 year old AI Enthusiast. I love learning and your video is awesome for these reasons. 1. You didn’t just tell us! You walked us through the process, step-by-step. 2. Many adults and legislators are concerned about how generative AI is going to impact education. There concerns are legitimate and will need to be thoughtfully navigated. However, if teachers could experience the depth of your passion and excitement you showed in this video… The excitement of learning new things and the joy of success and creating an end product in 4 1/2 hours - the outcome is you are now going to spend hours, days, months, and years learning at levels that were unimaginable before generative AI. AI celebrates self-paced learning, being able to overcome obstacles, improves problem solving skills, accelerates innovation and creativity. 3. Riley, the best part is now the “student” has become the “teacher.” Thanks for being my teacher. PS I would happily watch a 4 1/2 hour video to have seen every step you took. May your excitement reach 100’s of thousands of people.

[@boltez6507]

Yeah all it takes is an issue the AI is unware of to completely mess everything up.

[@thetoolist]

Mate, as a non dev (ultra frustrated) you boost me ! I see this is the beginning of a New Era where creativity will be unleashed without the need of spending tens of thousands of $ ... This is only the beginning I'm so happy and glad to realize that soon turning an idea into a reality won't be a nightmare as it can sometimes be ! Thanks a lot mate

[@rileybrownai]

THIS COMMENT MADE ME SMILE.

[@shannonpalmer]

This is great, thank you! I’ve sat down and tried it myself, and it’s been a really fun way to learn more about coding. I changed the styling and some of the functionality (such as the ability to rearrange notes by dragging and dropping, and setting up email reminders for important notes), and I’m going to let my friends and family use it to take notes. Very cool, I appreciate the video!

[@rileybrownai]

Great to hear! that's what i did! this comment made me happy.

[@TrejonEdmonds]

Your success story is incredibly inspiring! Seeing your joy after the deployment is contagious. Your innovative approach of using two Claude accounts to drive constant API updates is a game-changer. You've empowered countless people to overcome coding barriers. Congratulations on your achievement!

[@rileybrownai]

LETS DO IT

[@kylesiwi4093]

I'm amazed that even without the most basic grasp of grammar, the model understands what you want to do and does it.

[@rileybrownai]

Is this a diss?

[@ross.mp3]

Yes! That's exactly what I did a month ago 🔥 And I was surprised the same way, haha! It took me 3 weeks to create a fully functional calendar of events with a separate admin panel under hashed(?) password and some more crazy things! And yes, for me, as a non-programmer at all, it was hard 🫣 However, the future is here 🔥🔥🔥

[@rileybrownai]

Amazing!

[@drtariqhabib]

Thanks - you took the time to share your knowledge with others. Also, your sharing of code templates at Replit is much appreciated.

[@Exaggeration_Filter]

As a student this is exactly I was looking for. I want to create my own Note taking method and surprisingly I came to this video. Subscribed to your channel mate. Your walkthrough tutorial is much appreciated because I needed step by step guide ❤.

[@rileybrownai]

wow maybe i'll finish this app and make it public

[@CashuzDaGeneral]

Can you do a video about the back end and how you got to that point? This is a very good video. Kudos to you. I found out how to create mock up websites but now I want to make them actual sites. Any videos on these are very helpful.

[@Bass_Nomad.]

I am a software engineer and this is very impressive in many ways. Besides from it letting you create this program, when it comes to learning skills this can be a really fun new way. as well as quite usefull in prototyping.

[@daniellewis9981]

This is just how you learn to program. AI didn't do it for you. You did it.

[@vedanshbisht1309]

Looks like you had fun. I mean this is great, from a dev pov as well, 4 hrs is really impressive man...keep having fun! 😊🎉

[@J3R3MI6]

Worthy sub for sure 💎 this video is proof… quality and depth in this space is lacking.. also experiments… I’m here for it

[@rileybrownai]

Dude EXPERIMENTATION AND CREATION ❤️

[@Caebie]

Bravo, I have been developing a couple of apps with these LLMs for sometime now, I havent completed them yet, but you gave me great hope. thnx

[@Lrakar]

This is sick AF! Keep pushing the limits. Subscribed and really want to see more updates on this app!

[@rileybrownai]

Maybe I’ll get someone to create the backend

[@almahmud5569]

I can make one for you if you want ​@@rileybrownai

[@muppetowner]

That was awesome to watch man, great video!

[@ryanclarkin6890]

Thank you so much Riley, it's been a while since I've received as much value as I did in this video! So excited to start creating!

[@mlntdtechbae]

I randomly came across your post about this on Twitter and it was right on time for me! This is great, thank you for posting this!

[@rileybrownai]

Much love :)

[@Sandheip]

Building a full web app with just two screenshots is mind-blowing! AI is truly taking development to the next level. #WebDevelopment #AI #Innovation

[@Robert.28]

"We have Ai in our team; we can do whatever F#@ we want." - dude, my head is spinning with ideas. Thank you

[@CIMPEntertainment]

Came looking for this comment. haha Best line!

[@theaccountantguy-s5s]

One thing I can share from my experience, if you are adding a new code or API into the existing codes, make sure to give reference to the old code into Claude by copying and pasting the old codes and then using that as the references to give modifications to the new code. In this way, the old codes have changes which work well with the new code recommendations given by the AI. Hope this makes sense!

[@rileybrownai]

Yes yes yes thank you

[@theaccountantguy]

​@@rileybrownai Much appreciated 😊

[@shannonpalmer]

This is a great tip; I’ve learned it the hard way after struggling, wish I’d seen your comment last week lol

[@genshian]

Definitely requires a lot of patients and I like all the points at the end around the actual use case and this being primarily a way to communicate to devs. I agree thoroughly on that and its definitely what its good for at the moment. I'm an engineer, and I use it mostly for communicating ideas quickly. But when it comes to the final product and deployments a senior dev needs to vet almost every line of code and be able to understand it deeply or you can end up with a disastrous codebase that isn't scalable nor sticking to any industry practices. There are still a lot of missing pieces AI cannot do at the moment and I think the limitation there isn't really how good the AI (essentially AI capabilities are good enough at the moments) its about how good a product can leverage AI to actually solve for these fundemental issues like, scalability, architecture, documentation, workflows, etc. This isn't a "how advanced an LLM is" problem, its a more of a human problem that needs a product that thinks through the issues.

[@rileybrownai]

fair.

[@johangarrido4739]

I liked your video, if you don't have programming experience you know some concepts, I recommend doing a complete data modeling and then you pass it on to Claude and start working.

[@PatricMelander]

Great stuff and it really looks like a great note taking app! 🤩

[@whoismattkohn]

Love when the unsuspecting KZbin drops into busta rhymes 😂😂🤝 epic

[@rileybrownai]

🤣🤣🤣

[@whoismattkohn]

@@rileybrownai epic stuff ignore that haters as u do

[@geoxeph]

Should have it auto tag with #overdue if the note is past the due date and not including a #complete or #cancelled or #archived. Then also have it auto tag it with #complete when you check em off in your list of upcoming items.

[@torontovo]

Bro great video, appreciate you being yourself. The Busta Rhymes reference was Key😂

[@madzzzey]

Just what I needed, algo hits right

[@rileybrownai]

I'M GLAD THE ALGO (GOD) BROUGHT US TOGETHER. GOD = KZbin.

[@vishnuitsrocking]

Bro, this is crazy! Request you to do more.

[@rileybrownai]

sitting down pressing record now

[@magicismagic123]

the best part you can use notion to sore all instead of firebase and speed up stuff 100x :D

[@bharath_0193]

Oh my good . Thats mind blowing

[@CodeWithOgochukwu]

❤❤❤

[@zacandroll]

that's actually insane and great. talent and perseverance

[@tower7314]

For people who think "well this a small project, you still need much human help for big projects", just wait a few years... Love the video btw

[@matbmp8996]

Or tens of years, scaling cognition is not obviously easy

[@tower7314]

@matbmp8996 Well that's right. We will see...

[@boltez6507]

Well best of luck defending your website against malicious actors.

[@zoeherriot]

@@tower7314I mean… that’s what people said two years ago… “we’ll see”. Well we saw, and as predicted, we are here watching a guy make an app that would have been quicker to code by hand.

[@jasonreviews]

nice. you just use reactjs as front end. serveless backend with firebase. basically fullstack app. I think cool feature would be adding this to the calendar. All my toys have no front end. It's just text.

[@patrickpuma]

Subbed. Love the excitement at the end. I feel the same way about all this

[@gbasilveira]

To make it multi-tear you can just add firebase. Theres payment, id, and dedicated db per user. You likely won't be able to do it through Claude AI as Google often change libraries, Vertex might be your friend in that case

[@rileybrownai]

Already done new video soon

[@LucaZM]

Grt8 info on the potential of technology. I would avoid blasphemy as it does not add any technical inisight. Thanks

[@rileybrownai]

what does this mean?

[@theaccountantguy]

Hi Riley. This is amazing what you have shown. I have been doing the same and learning how to code only with the help of AI (Claude). I am not a coder and don't even know what anything means. But the web app coming out to fruition is so fun. Keep going 💪 Subbed. 🎉

[@bautista7938]

this is the EXACT, and I mean EXACT example of what people mean when they say “AI will not take your job if you can learn to use AI to get infinite jobs”

[@rileybrownai]

yes

[@vicky.batman12]

Nice work.. Claude is currently the best LLM for coding. I wish you should have also explained the firebase configuration part.

[@rileybrownai]

i didn't understand it when i made this.

[@jonocubitt595]

Hi Riley .. Great work! You are an true inspiration :) Keep going!!

[@jonocubitt595]

Hope to see the next video how you eCommerce this great product.

[@dvmrp]

Great Video, and congratulations on completion of a copycat with monetization. It is not possible without AI. I understand your happiness of piracy.

[@rileybrownai]

whay

[@masternmargarita]

This is great for agile development. Develop a basic model and give it to the users for use and to get feedback.

[@IAAM9]

We have AI on our Team, we can what the Fuck we want

[@web3global]

Awesome, may you also do a video over on the backed setup using claude too, thanks! 🚀

[@Deskyze]

Great video! I'm confused about Replit. When using your Repl template, I pasted the fully working Claude code into the "App.tsx" file and when running it in webview it looked completely different. I installed the necessary npm's but it still does not work. Is this on me? Or is there a fix?

[@MrTonyradford]

Well done!

[@TradeOnPayOff]

Well done man! Takes persistence 👌🏽

[@rileybrownai]

lol it’s worth it trust me hahaha it does suck at times

[@WalterAIo]

I build my own SaaS using GPT and Claude. don't even understand my code, but got to the interview phase of Dragon den.

[@onjajaboy]

this is my new fav youtuber

[@rileybrownai]

thanks G.

[@kennymilestech1576]

This is insane

[@gamemak0r]

I basically did the same thing a few days ago, but for a cooking recipes web app. We had the internet generation and now it is time for the AI generation.

[@toledavid89]

Thank you for this!

[@berkipekoglu]

Thank you! We want more videos like this :)

[@rileybrownai]

I WILL F**KING DELIVER FOR YOU MY FRIEND! CREATE

[@techfixer1543]

Riley...I got pumped with this app project of yours! Replit seems to flow (deploy) easily from Cluade. How did you discover Replit? I need to find out if moving the code, generated by Claude, to VS Code editor is doable. Do you plan to or have you, actually exported this app to run say on Android or iOS? I just subcribed to your YT channel and I think your authentic reactions, as you built the "Note App", was so dope! Thanks bro!

[@Jay-us2mj]

that was very inspiring dude

[@heyderekj]

This is so inspiring! Thanks for doing and sharing this! Curious, why did you choose Claude vs ChatGPT?

[@rileybrownai]

BETTER ❤️

[@atowncrazyhorse]

Claude is insanely better at coding. I switch between Claude and GPT4o I use Claude for the longer generated code and GPT for the easy stuff.

[@bx1803]

ive never coded in my life and doing shit like this - yup 100% saying this to my self as well.. amazeballs.

[@rileybrownai]

I love the word amazeballs

[@Showxup]

Sick video 🔥

[@avigailomichael]

Subscribed at 0:56!

[@frankdearr2772]

Great topic, thanks 👍

[@نشامي]

Wow, it's insane men

[@sanayar2008]

1- can you add the prompt in the video description? 2- and what about the 'bck-end' we need a video about the 'bck-end' and how you got to that point? 3- can you explain the bani fits of using two accounts "Claude " ?

[@njdegen]

Instantly subscribed @ 8:47 😂

[@darshanaware6300]

That looks great

[@banglaranna2534]

excellent work. I would actually like to see the full 4 hour tutorial.

[@vladyslavcherevkov9282]

Very cool! What’s the tool you use to transcribe your voice at min 7?

[@vladyslavcherevkov9282]

Actually found it myself. For whoever else is curious it's called superwhisper

[@officialrobertwhite]

Are you going to be releasing this one when done or where we can build off of it. I know you have the starter but what about this version?

[@avi7278]

Yeah hacking together user management with AI is suboptimal and just asking yo be hacked. Alll it takes is one mistake and your users' sensitive notes end up in a pastebin dump if you dont pay the ransom. But for inhouse personal tools this is very cool. You could also hack it together and then have a dev audit it, which is a lot less expensive.

[@J3R3MI6]

AI will solve that too… by next year. Good try.

[@rileybrownai]

I agree with you. Luckily I can go to a developer with what I have and say finish the back end and make it secure. As a content creator I could immediately turn a profit w distribution and have plenty of money to pay dev monthly

[@avi7278]

@@J3R3MI6 excuse me, did I make any assertions about the future potential capabilities of AI? Good try.

[@TheOmfg02]

@@rileybrownaiinteresting. Do you have to export the project to manual edit the code?

[@jm3279z3]

Awesome video

[@MK-it3et]

Why you didn’t show your struggles? It’s a pity, anyway nice!

[@clarkwallace227]

Even with a paid plan, Id get an hour into it before having to wait 6 hours for more messages…

[@rileybrownai]

YEAH. SUCKS

[@tysonvega]

if only Claude could increase the rate limits...i have 20 apps i've created the feeling is good

[@adotwing]

Silly question, just starting out, how do I get Claude to open the side window for viewing what has been built so far?

[@ПобедавРоссии]

Next create a simple pixelate game with claude. 1 hour video is fine

[@WesCoughlin]

Best part 8:45 🤣

[@slick2876]

this is the GOAT

[@drendelous]

still too complicated for me happy for you really fire

[@aleenafaisalkhan8165]

Did you use pro-plan or free plan claude?

[@rrrila8851]

Quick question, if it is a web app, does it mean it works under a domain name on a web browser? or where does it run?

[@kanwalyaseen01]

Wooooh. Great 😃👍🎉🎉🎉

[@2ru2pacFan]

I wonder if you'd be able to make mobile apps for the play store using Claude.

[@rileybrownai]

ONLY TIME WILL TELL... I WILL TELL YOU RIGHT NOW... I WILL DIE TRYING.

[@TheOmfg02]

Its for sure possible. But you’d need a lot more backend infrastructure to handle the builds. Though, it may be limited.

[@AlecVeravieff]

You'd be asking for trouble if you don't know intimately what each line of code does and why it's there.

[@TheOmfg02]

@@AlecVeravieff yeah, building for web and building for devices has a much wider surface area for error

[@codewithsoyeb]

7:19 Bro rapping 😂

[@rileybrownai]

I’m nice wit it

[@goncesarno]

Dumb questions, I need to suscribe the service to have the HTML preview? I'm not a developer and Claude gives me the entire code but I don't have the display preview same as you.

[@rileybrownai]

yes

[@LuckyLootTube]

Hey Riley, where can we find the code you generated with Claude?

[@JoshSmith-xm4gz]

Great vid! In my Claude I don't see there Preview/Code editor on the right hand side. When I ask for code it just gives me code snippets in the regular chat. How do I get this feature?

[@AhmedVonKabs]

Go to settings and on the artifacts

[@femioye2418]

I had the same issue - couldn't see the "Preview" and "Code" options. This happened to me while I was using Riley's steps for a totally different app idea based on screenshots from my iPhone. After I followed Riley's steps exactly as he showed (down to the exact screenshots and prompts), the "Preview" and "Code" options showed up. So, from what I can tell, the "Preview" and "Code" options only appear if you're working on a web-based app that Claude can create based on your inputs (e.g. images and prompts). Not sure if this helps. If you followed Riley's steps exactly and didn't see the "Preview" and "Code" options, then I'm also curious why that is.

[@femioye2418]

Just to add...I already had the Artifacts feature enabled when i ran into the issue I explained. AhmedVonKabs comment reminded me that I forgot to mention that.

[@joshd265]

@@femioye2418that's interesting thanks. Yeah my promo was for an iOS app in Flutter code. So guess I'll have to ask it to create a web app version if I want to use the Preview feature

[@joshd265]

Just tested; as soon as as I prompt it with "web app" I see the Preview tab

[@Piliponful]

that's insane

[@josephduckworth2122]

Hi Riley, do you need the paid version of Claude to do this?

[@adamviaja]

"we got AI on our team, we can do whatever the FUCK we want 😳"

[@FRANKWHITE1996]

I just f***** subscribed 😂🎉

[@rileybrownai]

LFG

[@yasirobaid6857]

Instead of having two accounts, why don't you subscribe to the team plan?

[@rileybrownai]

pretty sure you need 5 users min for team plan.

[@antoniofuller2331]

First master English in Grade school before coming back to Claude AI. Programming language is English

[@criticalnodecapital]

This is epic.

[@IbnFalastin]

Awesome