Claude 3.5 Crash Course for Developers: Code 10x Faster in 2024 [Claude 3.5 artifacts]

[@thomashogan723]

Hey... I'm an idea guy, I throw out scenarios and projects weekly... But these tools in the past 6 months have made me a project guy. Keep up the great content!

[@bhancock_ai]

I love that! Would love to hear more about some of the cool projects you're cranking out!

[@ward_jl]

Same here man. AI gives idea guys superpowers!

[@thomashogan723]

@@bhancock_ai i've been debating starting a channel myself but ya know... life! everyone is so excited about cursor and ai integration... and they are missing one of the oldies but goodies... BASH scripting. you can literally -iterate through an entire phase of dev, tell chat to write the current state into a bash script -create bash file in your directory, -run bash script in shell and BAM! you are finished and ready to test/tinker! less room for user error.

[@adventurelens001]

What?? I feel like such an idiot, haha! I totally missed that I could have been starting multiple chats from within the same project. Thank you! (and back to edit my comment to also say that this is so much value. Appreciate you taking the time.)

[@bhancock_ai]

😂😂😂 until you see someone else do it, it’s not intuitive! But hey - now you’re a Claude expert!

[@carlossawyerr]

You can also ask claude to create a script that will both generate the folder structure and populate the files with the code so you don't have to do it manually.

[@bhancock_ai]

Genius! Great idea!!

[@Beloved_Digital]

Elaborate more how At phase 2?

[@paulohcassis]

And how should we run the script? Through the terminal? I'm a beginner here. Thanks in advance.

[@carlossawyerr]

@@paulohcassis Correct, through the terminal.

[@maury1329]

Yes. In Windows, a Powershell scripts works best. I always ask Claude to do that.

[@ddwinhzy]

I watched the first half with a trial-and-error attitude, and I didn't expect it to be so effective. The blogger is amazing and explained everything in great detail

[@lykourgos.tsirikos]

Ah man, the 'Projects' is a really cool feature because it shares context between chats! Two things which were not very clear to me though: a) does each chat has a length limit, I mean on how long the chat can be or can it go forever let's say? At the moment I am using the free version and I had a chat open and writting for quite some time and at some point I tried to write something more and I couln't hit the send button. At first I thought it might be I hit the day limit, but when I tried next day, same b) what if you need to change a bit the context? Like in your example with the nextjs app, let's say that as you grow your app, you decide to split into microservices than having a monolithic app, or lets say you want to integrate another system, like redis or a queue system, that you didn't think about it in the beginning, how easy is to change the context then in the whole project? Btw it was really interesting this example of working with Claude, it shows how powerful assistant can be on your coding! Thanks for sharing this! 👍

[@bartolli74]

I've been working on a complex project with a GraphDB ontology and found a helpful approach. Setting a system prompt for Claude's Project has significantly improved my workflow. I use Claude's console to generate this prompt, which I then add to the project. This method helps me avoid token timeouts and saves tokens by instructing Claude to return only relevant code blocks instead of entire files. It's improved the quality and focus of responses while streamlining the process. I hope this tip helps others working on complex projects too!

[@bhancock_ai]

Such an awesome idea! If you are not in our Skool community already, I would love if you could create a post around this workflow! Heck, if you could record a quick loom walking through this approach, I'm sure a ton of people would love to see your approach! Here's the link: www.skool.com/ai-developer-accelerator/about 😁

[@bartolli74]

@@bhancock_ai Done deal, waiting for admin approval 🙂

[@beyyugi92]

Could you try explaining this again? Im very interested in this approach

[@natelasko528]

Yes the prompt example would be great thanks

[@bartolli74]

I posted it in Brandon's Skool community group. With the recent system prompt posted by Anthropic, it makes more sense than ever.

[@KlaasKruger]

INSANE. Brandon is always the first. Tinkering with Claude and Claude Dev as well. But this is the first comprehensive guide i have seen so far. 🙂

[@bhancock_ai]

Thank you @KlaasKruger! Got to spread the word so that more devs know how to use this powerful tool! It still blows my mind how much more Claude allows me to build! Hopefully AI doesn't take all the dev jobs too soon 😅

[@SSmartyimages]

​@bhancock_ai I've had fun with v2 using vertex api, also got it hooked up to Imagen as I have access, and I've created an auto image generator that saves straight to Google drive. Creates graphics for T-Shirts for example en mass. Getting round rate limiting was the hardest challenge. I own ccwithai

[@leochootech]

34:05 I realized that stubbing out can be a bit confusing since for me it generated both frontend and backend, hence I was not able to get the dev server running.

[@bhancock_ai]

Thanks for bringing this up! When projects get a little too big, you’ll need to scope things down and create multiple master plans - one for the FE and one for the BE. Please let me know if this works better for you!

[@emmatoshack8536]

Where do I download this instruction text to Claude again?

[@leochootech]

40:03 does it not hallucinate if you keep the old page.tsx?

[@bhancock_ai]

Ideally, you need to delete the old page.tsx and remove it from the project knowledge base. Usually after I fix a few files, I purge the knowledge base and then re-upload everything to prevent hallucinations. Hope this helps!

[@09nbnb]

Hi man, thank you for this tutorial. I'm following it, and it’s just perfect. It would be great if Claude accepted the knowledge base in a folder structure. Anyway, great framework you’ve created. Thank you!

[@rsbah]

Man, this seems like a lot of work that could be done pretty quickly manually

[@ok3nec]

I don't see any limits only imagination an common sense ...great ! Thank!s for one of the greathest videos i have ever seen !

[@bhancock_ai]

Thank you so much!! You'll have to keep me posted on what you go off and build!!

[@rahmanbrussolo]

Congratulations fantastic, I was doing or trying to do almost the same thing but in a much more technical and exhausting way without being able to extract all the potential, for each new doubt opening a new chat explaining everything again and then coming with a summary in the main chat and continue, without realizing that I was trying to direct the AI ​​all the time instead of letting it flow and direct me, I did an initial test with the same project that I've been working on all week and almost instantly all the doubts were answered without me worrying. and remember to inform. Sorry for the mistakes in English, I understand well but I speak little, but I thought the approach was fantastic, congratulations, I hope I can follow the course with what I understand in English, thank you and keep up the great work.

[@ollysalanson9452]

my my my, this is going to be a game changer for me. Thanks Brandon, you've got a new sub from me!

[@IncompleteDeveloper]

Wow...blown away by Claude. Thanks for the DETAILED video. I was just going to use Claude as if it is ChatGPT

[@TufRiverboards]

Any reason your not utilizes claude-dev with VSC, since your already using claude sonnet?

[@Rkcuddles]

17:30 but but… what if it needs to know about file 2’s chat and that context to get file 3 right? Is that just bad coding?

[@niceplace123]

Thanks for this awesome tutorial. I love Claude for coding tasks, but you just got me a level up. Now what do you think about taking the next step and adding aider to your workflow?

[@bhancock_ai]

When I have some free time, I want to explore aider more and make a new tutorial for you guys! Right now, I’m working on a new fullstack AI project for you guys!

[@1BMarcello]

Awesome content, I'm a seasoned developer but a beginner AI user. This video gives me great ideas. Thanks! 🚀

[@GottfriedLeibniz-o6b]

That's really great! My final wish is, to integrate all the process inside an IDE. So Claude would always stay in context, without need to upload/download files to/from browser. Many solutions exist. Did you find what is the best for you?

[@JEsterCW]

Vsc/cursor

[@GottfriedLeibniz-o6b]

@ more details please, how it is possible? i’m aware of copilot, cursor, cline, codeium, etc, but afaik there is no integration with claude projects

[@MaksymLiamin]

Really nice video! I'm looking forward to seeing how you combine all this with Cursor too!

[@morena-jackson]

Awesome video Brandon!

[@SiegfriedFarnonMRCVS]

@codewithbrandon great content. thanks forthat. what is the software that you use to explain what you ar going to do in the "3 step" workflow diagram...seems to be a virtual laser pointing tool in there

[@bhancock_ai]

It's called Excalidraw! I definitely recommend trying it out!

[@IdPreferNot1]

Such a fantastic video and course idea laying out the granular level steps to make progress with AI coding.

[@JosesLeal]

Awesome video! But where is the prompt for Phase 3? I followed the first link in description, but I never got the email :(

[@parkerrex]

Good vid can u chuck that prompt in gist? Thx bro

[@bhancock_ai]

Hey Parker! All the prompts are in the first link down in the description below.

[@acikast]

Hi Brandon, awesome video, thanks for posting. I have a question. If you start working on a project and create/update source files on your project, do you need to reupload them after a while on Claude knowledge in order for new chats to have updated source code files? Thanks in advance

[@leochootech]

Hmm.. Unfortunately this is not going well for me as the stubbing out file is pretty inaccurate to work with :( perhaps I need a simpler master plan..

[@sds5951]

Really cool video. Can all these steps be automated with CrewAI or a similar agentic framework? Just a thought.

[@bhancock_ai]

Great idea! I haven’t tried that yet. If you get to try it before me, please let me know what results you get!

[@mimikoss]

is custom instruction only for the specific project? or it is for all projects?

[@josephtilly258]

Is the Northstar template available somewhere ?

[@josephtilly258]

I find it its good, Github repo, if you are also looking for it

[@bhancock_ai]

Yes! The first link in the description below will take you over to the source code where you can grab all the templates!

[@CodingtheFuture-jg1he]

Dude, such an amazing and much needed tutorial! This stuff teaches not just how to use AI to build projects, but even more importantly helps new or aspiring devs to start to understand the more complete "engineering" process. Gold I tell ya!

[@bhancock_ai]

Thanks man! I was worried that people might not like learning about the full process so I'm glad you really enjoyed it!

[@deonake]

what app do you use for presentation? thx

[@ClemensLaengle]

I really want to login to your skool page, but when uploading a photo it stucks

[@bhancock_ai]

Thanks for letting me know! What error are you getting?

[@ClemensLaengle]

There is no more error

[@Beloved_Digital]

Sir, I've been considering a way to modify your prompt. Phase 3 requires a subscription to Claude Pro features for access (Project functionality). However, for those of us without access to the Pro version, I think my own modification could be to have Phase 3 provide an outline of prompts. These prompts would generate all the necessary codes based on Phase 2 in a step-by-step manner. What do you think about this approach? Thank you. i will appreciate your esteem assistance, I respect the effort you put in providing this prompts. making it free for us thank you so much sir

[@bhancock_ai]

That's a great idea! When you try it out, please let me know how it works for you!

[@martinmestrevlog]

great video ! i watched all 44 mins... this is a gamechanger... i am developing a mobile app with multiple screens about 4 of them.. i noticed i ran into a problem where it would not generate the full app with all the screens to due the length of the code ... and was not able to preview the app with the functionality of all the screens. So it suggested to break it up in parts which i did, so now i have the app but in different chats... if what i understand by using projects i will not encounter this ? i also notice i hit the limit pretty fast on the pro plan as i was using a single chat to due all the heavy lifting... thanks for clarifying (i am new here to developing apps with AI.)

[@Winchawa]

Thanks for the great video, love your enthusiasm 😉

[@bhancock_ai]

Thank you @winchawa!

[@mannu6464]

'projects' is not available in the free version?

[@frankdinies5111]

Hello Brandon, great video. May I ask one question, why have you made the instructions in phase 1 the start of a beginning of a chat, rather than making this instructions in a workspace ? I would say, in the first phase, it would fit better in a role than as start of the conversation. Thanx

[@bartolli74]

Insightful and helpful as always!!

[@economiadigital6470]

Congratulations, great job, where did you learn about this ? Have you tried in different projects, like documents, not code ?

[@Ymazri]

thanks for the tutorial! what app are you using at 14min to draw out the process?

[@AlexBrumMachadoPLUS]

😮 absolutely spetacular!

[@bhancock_ai]

Thank you Alex 😁

[@AlexBrumMachadoPLUS]

@@bhancock_ai Thank you

[@johnd6295]

you got my sub! good work!

[@Beloved_Digital]

We can't find the link to the template?

[@bhancock_ai]

Hey! The link to the templates is down in the description! It's the first link. Hope that helps!!

[@Beloved_Digital]

@@bhancock_ai Thank you so much

[@damadorpl]

Artifacts are now under settings.

[@bhancock_ai]

Thank you for helping point people in the right direction!!

[@isfrank]

Claude can't figure out how to debug CORS on localhost while simultaneously not breaking some other part of the code. It's driving me nuts

[@juliusvalentinas]

I tried to build thermostat with claude and chatgpt, auduno code generated for single components work, but put together and it does not. Chatgpt cant debug at all hallucinates so bad fron 3rd version brakes everything, claude not so much but failed to fix the simple bugs like rotary encoder not working etc.

[@Beloved_Digital]

Thank you sir i appreciate the effort put to make this video available

[@economiadigital6470]

could work it and try this on GPT's and Canvas ?

[@HikaruAkitsuki]

Can Claude can be used to develop complete Flutter Project?

[@farisarx5552]

Just wow, Thanks

[@leochootech]

This was really cool! Breaking things down into smaller yet more concrete steps, starting new project at different stages makes so much sense! I thought I knew how to use claude well but this is gold. Thank you!

[@DOOM11777]

Can you do a video using these templates, with claude dev and also do a video with cursorai composer.

[@bhancock_ai]

Have you had much luck with Claude Dev so far? I’ve heard mixed results and heard some people were racking up huge bills

[@DOOM11777]

@@bhancock_ai I haven't tried it myself.

[@thevishalchauhan_yt]

Please help me with the tools you used for project architecture

[@bhancock_ai]

Excalidraw! It's an amazing tool!

[@beyyugi92]

So can anyone explain for phase 3 the prompt is to flesh out the stub files, but we prompt to flesh out all the stub files. How does it know so to say to do it one file at a time? Also, how come no custom instructions are being used? Dont those have a place in all this?

[@bhancock_ai]

Hey! I ended up putting my custom instructions right after the phase 3 prompt. I should have made that more clear in the video. Please let me know if that helps!

[@beyyugi92]

@@bhancock_ai No sorry I don't quite get it. These are 2 different questions. 1) The phase 3 prompt doesn't specify fleshing out stub files one at a time but all at once. Is your message below guiding it to do it one at a time? Could we find benefit potentially updating phase 3 instructions to include its job being to handle one at a time? 2) Custom Instructions are the option instructions we can provide Claude (right above project knowledge), I noticed those were not used at all. I use them so much so I was curious, is that something this prompting guide doesn't require?

[@fackelface92]

What application are you using to write/run your code?

[@adamgdev]

I just watched this video for the second time and took notes and saved screenshots. This is a gem of a video!

[@bhancock_ai]

Love it!! You're becoming a Claude master!

[@beyyugi92]

Ive been working on a machine learning project using multiple claude projects as master and worker node, sorta similar approach. The master is a “project manager” whose job is similar to your master except its job outside of guiding and suggesting overview is to generate the instruction + knowledge md file for each worker project. I then make a new project paste instructions + knowledge work the module, have it generate summary of the module, considerations, challenges etc to feed into knowledge and rinse repeat.

[@corpusculus]

Keep up the good work. Also, source code download doesn't work :), it keeps getting "TypeError: Failed to fetch" error

[@bhancock_ai]

Hey! Thank you and I appreciate you letting me know about the link. What happens on your end when you click the link? It looks like it's working on my end.

[@corpusculus]

@@bhancock_ai I keep getting the "TypeError: Failed to fetch" error. Each new button press generates new error.

[@corpusculus]

@@bhancock_ai I keep getting "TypeError: Failed to fetch" error.

[@corpusculus]

@@bhancock_ai I keep getting “typeerror: failed to fetch”

[@corpusculus]

@@bhancock_ai it keeps getting "TypeError: Failed to fetch" error

[@jeremyph8319]

did they remove claude 3.5? i can't use it right now only claude haiku

[@RealLexable]

US citizens only. German phone numbers are barred from login to artifacts. Only claudes api is avalaible here, it doesn't matter where i am from myself.

[@bhancock_ai]

That's good to know! I didn't know that. Do you know if Claude will be opening access to Germany soon? I know the EU is pushing a lot of AI restrictions right now so hopefully this isn't permanent.

[@josephtilly258]

artefacts are accessible in France

[@twelsh37]

@@bhancock_ai works in UK as well. Probably because we are part of continental Europe, just not the EU :(

[@mr.mentor699]

Awesome sir... Insane

[@VČ-u9z]

Clause is generated mainly React/Next code but not Vue. It tries always move from Vue to React, and every time I asked to use Vue only 😁. So if you do somehthing similar like Brandon it should be ok

[@hendoitechnologies]

kindly post vide about Claude API and console video full course video

[@sigh08]

well done. great teacher.

[@amprivat5913]

This is really a super helpful video. Thanks 🙏

[@MohammadHosseini-ey3do]

Good luck

[@j7beatz]

Mitchell sent me!

[@bhancock_ai]

Welcome to the AI party!!

[@remedyreport]

awesome!

[@ChrisLucasZeroHype]

lets give it a try

[@bhancock_ai]

Taking action! You're doing it right Chris!! 💪

[@chezanagrofarm153]

Thanks. We also can add instruction to do not use src folder (new convention), and do not "use client" inside page.tsx but extract into a component if needed

[@saranr1467]

Excellent, Great info , thanks

[@ac14081408]

Awsome thanks!

[@mugume]

Awesome tutorial. Thank you so much @Brandon

[@playactionstudios]

Why not just use cursor or aider?

[@rfrizzelle]

This is Fire 🔥... Thanks a million... I have never used Claude before, now I am super excited!!

[@bhancock_ai]

Once you use it, you’ll never go back! Lol

[@rfrizzelle]

@@bhancock_ai One quick question, my version of the professional plan only let's me upload 5 documents. How can I upload more documents like you did in Phase 3?

[@yunixbro]

I defiantly looking for like these valuable contents👌

[@AleksandarGvozden]

great video

[@natelasko528]

Bro I love your videos I'm so grateful for the content thank you so much. As a tip for you what I've been doing cuz I use replicate and it's AI inside of it also is like it doesn't you know put together the actual it doesn't create the files you still have to copy and paste right so what you can do is at the end have it create a individual files heavy create a combination Master script and that Master script will then take all those individual files that it built and it will automatically create the project and do everything for you right so you build it all separately like you're doing but then once it's built then you don't even just the the temporary placeholders that you have then the combination script will put all that into the project for you when you run the script and like the shell or you just create like a setup.

[@bhancock_ai]

That is an awesome process! Thank you for sharing! Would you say your approach is easier than claude? It sounds like it might be

[@papisd.6336]

Oh wow, great tutorial.... I think I mightve broken the like button too bad I can only give you 1 like

[@bhancock_ai]

I love this 😂 Glad you liked the video!

[@adamgdev]

Solid video!! That work flow is epic!

[@paulmiller591]

Nice stuff Brandon!

[@bhancock_ai]

Thanks Paul! Also, looking dapper with that tie!

[@juliusvalentinas]

I tried to build thermostat with claude and chatgpt, auduno code generated for single components work, but put together and it does not. Chatgpt cant debug at all hallucinates so bad fron 3rd version brakes everything, claude not so much but failed to fix the simple bugs like rotary encoder not working etc.

[@techchanx]

Been watching quite a few videos related to agents and LLMs. Frankly speaking, I did not get any idea what this video is about! Why upload crewai files to Claude? Dont we tytpically call the APIs from crewai ? What are you even trying to do ?!

[@johncegom]

Thank you so much, very helpful for me when building a project with or even without Claude!

[@bhancock_ai]

Thanks John! I like to think that AI just promoted all devs to tech leads where you spend more time project planning than actual coding!

[@xcurt]

have you considered to use npx ai-digest to smash your codebase into one file (kzbin.info/www/bejne/sH_OqGiBZ7xrd7Msi=eFm2xt3PG93oGAqk) instead of pasting all your files always again to the project knowledge? + have you tried your workflow with claude dev, in order to not manually copy paste all the changes / creating files? any experiences with that?

[@tanvirahmed1959]

I am the first viewer ❤

[@bhancock_ai]

I love the dedication and speed! 😂

[@tjvillanueva396]

oh wow 4th commenter keep it up Brandon!

[@robel_asefa]

Langraph, if you could please...

[@abbcc555]

I wish this worked with Rust.

[@bhancock_ai]

Yea… I work with Ruby some and it struggles with it too. Hopefully they’ll fully support all languages by the end of the year!

[@Onereachone]

I’m the second 😂

[@bhancock_ai]

I love that this has turned into a race! So close to first 😂

[@Kayotesden]

I didnt learn a single things from this. This was mostly an explanation of Claude interface. Summary of the video is to spend 5 min navigating the Claude website & you are sorted.

[@roguestar100]

Clearly you didn't watch past the 5 minute mark.

[@aar021]

By all means go read the docs and move along. You may want to stick to KZbin shorts while you are at it. Tik Tok also a good match.

[@randomguy75]

In the first minute he said "crank out" 4 or 5 times. and that's why i'm glad Trump is not a software engineer

[@maswaystudio]

The explanation is a bit rambling, please be more to the point

[@FastTypingGuy]

just use Cursor AI

[@theTrigant]

yikes, how disgusting

[@crocodilegamingxxx2057]

Insane