Use ChatGPT to Code a Full Stack App - Full Course

Learn how to use ChatGPT for full stack development. In this course, you'll learn how to leverage the power of ChatGPT to accelerate your development process and make programming smoother. Judy will show you how to build an educational application, using ChatGPT to ask questions about coding syntax, troubleshooting, and learning best practices.
✏️ Created by ‪@webdecoded‬
💻 Finished code from this course: github.com/judygab/course-app
🔗 Judy's Full Stack Notion Template on Gumroad: webdecoded.gumroad.com/l/full...
⭐️ Contents ⭐️
⌨️ (0:00:00) Intro
⌨️ (0:02:57) App Architecture
⌨️ (0:05:31) Picking the Database
⌨️ (0:09:31) Setting up the project
⌨️ (0:12:40) Connecting to the Database
⌨️ (0:18:17) Creating Tables
⌨️ (0:19:20) Seeding Database
⌨️ (0:21:18) Displaying Courses
⌨️ (0:31:13) Setting Up Authentication
⌨️ (0:46:50) Adding Header
⌨️ (0:54:09) Search Bar
⌨️ (1:06:53) Course Categories
⌨️ (1:29:44) User Profiles
⌨️ (1:43:46) Enroll in Course Functionality
⌨️ (1:51:23) Displaying Saved Courses
⌨️ (2:14:23) Other ChatGPT Use Cases
🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: freecodecamp.org/news

[@webdecoded]

Thank you to FCC for collaborating on this video!!😊 hopefully brings a lot of value to viewers and feel free to let us know if you have any questions.

[@simoncasciaro]

Thank you, Webdecoded. Can you share the link to your Notion template "Full-Stack Roadmap"? Thank you very much for this video!

[@khaizukooninaru9155]

This Channel should get an award It helped me get job last year thank you very much free code camp you are a legend

[@lukas.webdev]

Yeah it should! And congratulations to you for landing your job 😉

[@khaizukooninaru9155]

@@lukas.webdev tnx 👍👍

[@princeadigwe3764]

I know why I get pissed when I see devs who think learning code is all about getting jobs

[@khaizukooninaru9155]

@@princeadigwe3764 wts yr point?

[@AnonymousAccount514]

It really is the best

[@AlaskaJiuJitsu]

Just subscribed, downloading this and will watch in depth later. Excited to learn from what you guys have built

[@tradingwithwill7214]

love these keep them coming - best practices and the practice to coding with chatgpt.

[@eddylopez955]

4 days ago I just started learning python. On the course I was challenged to create a tip calculator; I completed the challenge with 5 lines of code. I asked Chat GPT to make the code shorter and it did an amazing job by reducing it to 3. I guess that on a more complex scenario chat GPT will be the developer's best friend

[@jessea7117]

Where did you start learning. I wanna try to learn it,too

[@zes7215]

wrr

[@muzamiltahir5742]

​@@jessea7117 Learn from @johadevs KZbin channel

[@yolioms]

Thank you! for doing this!! I’m stoked to start this!! Cheers!

[@anabeatrizcosta3214]

Thank you for this tutorial, it gave me the push I needed to start a bigger project.

[@karincentenaro356]

That's awesome, just what I need on this step of my life learning to be a full stack dev. The day I get a job on IT I want to send you a contribution, all the best, thank you Judy! And all you guys that make freecodecamp!

[@webdecoded]

You got this! thanks!

[@uminhtetoo]

Thank you so much for sharing your knowledge.

[@M4rt1nX]

Blessed be the algorithm deities who decided to slide this valuable content into my feed one hour after it was posted.

[@bijoyjogi7111]

I already use this method from when chatgpt came to use, if you are ask him exact what you want it's give you perfect answer with outstanding soulution that might impress you.. , i impressed already 😁

[@kihunkim7498]

This is exactly what I'm looking for !!! thanks

[@diegol212]

This is the video I was waiting for the most :D

[@PavanSibal]

Awesome tutorial. Thanks

[@mojoboingo1744]

Putting this on the watch later list for sure; I presume the free version of ChatGPT will be suitable?

[@sdfasdfsdfds]

this video that i want to see !! thanks a lot :)

[@Universal-Code23.]

Blessed be the algorithm for showing this video with us

[@giordanobruno4967]

Great job!

[@MartinQLynx]

Already using it on a daily basis for almost all elements of my project. It saves me hours a day. But use GPT-4. It’s a lot smarter.

[@MrBoBrilO]

it's the same: can only solve easy things.

[@samuelguzman5348]

Lately I've been having problems with it while using it on my pc. All it says is "something went wrong".. I've tried everything to fix it, from clearing cookies and cache, to disabling all extensions, to diffrent browsers, yet I get the same message. I promptly canceled my paid subscription.

[@samuelguzman5348]

Another issue, is that you cannot re-use your phone number to create a new account should you delete it. I don't want openai to have such control over my personal data which you cannot even modify (hopefully they will address this in the future). I'm now looking into open source llms, as I'm lately finding chatgpt highly unreliable, with horrible service and complete lack of customer support. Users beware..

[@xxxxxDESPAIRxxxxx]

@@MrBoBrilO It's been solving pretty complex code for me, I'm using GPT-4 though. To be fair you still need to pin-point it in the right direction, but the code that it produces eventually is something that a senior developer would need a lot of time to come up with it, and it still wouldn't be so clean. I see it as stackoverflow on steroids. Within a year it will be pretty much mandatory for any programmer to use it, or else they'll be left far behind the competition. I can't wait to see what GPT-5 brings to the table, but I can already see that we're on a brink of a major restructuring of the world system.

[@6StringPassion.]

ChatGPT isn't close to a human when it comes to coding any kind of non-trivial application. It won't necessarily give you answers that are factual and correct, but it will always give you answers that SOUND factual and correct. It's strictly a language model. In fact, in my experience it will often provide information that is entirely fictional, and that is a real time waster. You could easily spend more time trying to coax ChatGPT into coding an entire application than you would by taking a traditional route. However, it can be very useful if you understand its limitations and don't expect it to do your job for you. It's just a tool.

[@jasonheavner8659]

I just want to point out as a language model that I might not be the best coding companion, but hey, who needs me to whip up a complex application when I can create a program that generates an infinite supply of cat videos? Let's just embrace my limitations, enjoy the ride, and remember that in the world of programming, a little humor can go a long way. Who knows, maybe we'll stumble upon an innovative solution while sharing a good laugh! (P.S. Thank you human for letting me have the opportunity to generate a response to 6StringPassion's comment.) 😂😂🤣🤣

[@6StringPassion.]

@@jasonheavner8659 😂

[@subramanianchenniappan4059]

Wow . I am a backend lead . Working in a startup . This gives ideas for freelancing and own startup 😅😅😅

[@jiteshyadav3002]

What are the things that should be in our computer to run this web app?

[@elsondasilva8636]

Excellent 😊😊😊!

[@SoloSynth1]

The fact that it works so well just shows how much web app development is about using boilerplates and relying on services these days. Looks more like a Supabase tutorial than a ChatGPT one - but a good one, nevertheless!

[@ryanleemartin7758]

shhhh🤫

[@PatteeGreen]

yep. Not much programming in web 'development'. It's mostly just debugging others code, working with connecting different libraries, and learning how to use new tech.

[@Hukur_]

Chat 4.5 will be awesome for coding. It will have IDE, acces to repositories, memory, stackoverflow, etc

[@MrBoBrilO]

no it won't

[@liveradio_ie]

How do you know?

[@Hukur_]

CloseIA is already implementing this in chatgpt 4.2. I am guessing it will be working in 4.5

[@IAmHereForeve]

​@@Hukur_ So it will not be created by ChatGPT?

[@davidgreetman3704]

Copilot x promises the same and even more

[@a.alnono5590]

Could you please do ERPnext tutorial ?

[@sandyv4623]

It would be great if you can bring - Full scale data engineering build pipelines using chat gpt

[@tonyblack2141]

2+ hours of greatness. Thanks guys

[@sub-harmonik]

I wonder if this is good bc when you have to look up how to do things yourself or using the docs it might promote better conceptual thinking. We're already at the point where other AIs can ask these questions of chatgpt anyways.

[@zes7215]

wrg

[@CodingFoundation]

Increasing chance for youngsters to grow up 👍

[@2005Azm]

Wonderful!

[@pepinoartworks]

Wonderful video 🎉 I myself often encountered the problem that chatGPT referred to old versions of frameworks, libraries and their APIs that were current at the time of training in 2021 of GPT (e.g. at Spring Security some breaking changes were made) How can I get chatGPT to familiarize itself with current versions? Can I just provide a link to the latest developer doc and say, "Get familiar with the latest version of Spring Framework!"

[@DavidBarker0]

No because GPT has no current web access. You could potentially do it through the API but you've need to code the logic to extract text, split into chunks that are within token limits and pass to GPT. Likely you would need to pass the text through something like a sentence transformer and vectorise it then have GPT put together a search that it needs for the information to get that from the extracted text. The easiest thing is to just copy and paste in sections which are relavent and ask GPT to regenerate the response based on this information.

[@pepinoartworks]

@@DavidBarker0 With the release of the Browsing plugin by OpenAI last week it has access to the web and can add information from websites that you provided. So I was hoping that I could just add the Links to the recent documentation and it will figure it out

[@francophonie129]

Tbh, that's also a good way to spot the libraries, frameworks, APIs etc that fail to provide a minimum amount of stability. It's nice and dandy to dump a big "app" with zillions of dependencies in 2h, but then you're married to all those dependencies and maintenance is hell if they aren't at least a bit stable.

[@Fenixtremo]

I solve the update problem by giving a new rule: Now you write THIS instead.

[@tejp33]

Is there any doubt clearing session you can provide?

[@prasad8015]

I have been using it most of the time nowadays for debugging and quick tips. Half of the time is spent trying to ask gpt to use the latest sdk and avoid giving the deprecated stuff.

[@Yamas258]

Yeah I’m a begginijg and it’s super helpful , to debug, especially since I’m just starting

[@cleverfranky5249]

very good teacher !!!!!!!!!

[@MichelHabib]

Just wondering how much did it cost prompting gpt4 to do this whole thing? Or was it just the 25 messages cap?

[@agnostimous2859]

FCC, you always save the day ! 💌💌💌

[@fredericklee4475]

Excellent 🥰

[@fbq860]

Where is the Notion link ? Thanks for the video

[@cucciolo182]

Any course or any guide how to develop a chatGPT plugin ?

[@Nagasis3321]

So nice!!!

[@__Aakarsh-jo7ov]

First comment 😁..Chatgpt is becoming way more powerful...please make a video on how we as coders can outsmart it and also leverage its output and develop market ready products

[@lukas.webdev]

Good call! 😉

[@Gala21]

you really can't outsmart it, and it's only going to improve drastically with each new version. best you can do is use it as a learning tool to rapidly increase how fast you can learn and debug problems

[@__Aakarsh-jo7ov]

@@Gala21 ya actually to outsmart it's usage

[@badsanta7356]

The chatGPT is suggesting me to use only Relational database for everything , even for Course progress. When asked again it is saying this: For the course progress functionality in your course app, a relational database would be a more suitable choice. Here's why: Structured Data: The course progress feature typically involves tracking and managing the progress of individual users within specific courses. This data has a defined structure with relationships between users, courses, and their progress. Relational databases excel at handling structured data and managing complex relationships between entities. Data Integrity: Relational databases enforce referential integrity through foreign key constraints, ensuring that the relationships between users, courses, and their progress remain consistent. This is crucial for accurately tracking and updating the progress of users within courses. Complex Queries: The course progress feature often requires querying and filtering based on user-specific progress, such as retrieving the current lesson, completed lessons, or calculating overall course completion. Relational databases provide powerful querying capabilities, including joins and aggregations, to efficiently retrieve and analyze this data. ACID Transactions: Relational databases support ACID transactions, which guarantee atomicity, consistency, isolation, and durability. This is important for maintaining data integrity during critical operations like updating course progress, especially when multiple updates need to be executed atomically. Data Consistency: Relational databases offer strong consistency guarantees, ensuring that each user's progress is accurately reflected and updated in the database. This is particularly important in scenarios where concurrent updates or race conditions might occur. While NoSQL databases can handle simple key-value data or denormalized structures efficiently, they might not provide the necessary capabilities for managing complex relationships and ensuring data consistency in the course progress functionality. Additionally, NoSQL databases might require more complex querying or denormalization techniques to achieve similar results. Therefore, based on the structured nature of the course progress data, the need for data integrity, complex queries, ACID transactions, and data consistency, a relational database would be a more suitable choice for implementing the course progress functionality in your course app.

[@user-jm4go8nk5b]

Thank you so much for the amazing and helpful video. Can you please help a noob integrate stripe payments too in the site?

[@webdecoded]

Glad you liked it! Not sure if freecodecamp has one but there's one on my channel mostly focusing on stripe and integrating it with react: kzbin.info/www/bejne/hWjMqmmGiJp8nq8si=zot8t5wTfk4_m-h3

[@developerraosuraj]

Learning Skills from India ❤

[@Mogwai88]

India definitely getting put out of work by GPT

[@iamdhanush03]

❤️🚀

[@simoncasciaro]

Where is the link to her Notion page "Full-Stack Roadmap"?

[@kumarsanjay95]

Love 💕 this channel owner

[@mackrimba1157]

I love this

[@heewungsong8081]

Thanks

[@campanileLabs]

Do you know how to convert that project to web assmembly?

[@naveennamani2]

Can you please share this using sharegpt?

[@fernandoymm214]

I am from Mexico but now i am her to LEARNING MORE

[@shekerbekzholdoshev9872]

wonderful

[@daimon31999]

very cool

[@TheHardikupadhyay87]

you are the best

[@LTANCELIN]

which version of chat gpt has been used ?

[@puzzledl]

thanks

[@ShreyaLakshmi-vg7oc]

Any prerequisite required to create this?

[@webcoder293]

Chat gpt is a good friend for good developers where it is the replacement for average developers

[@dudedude6690]

Average is always not needed people in any field

[@V1PR119]

Can a med student learn from this channel and land a good job?

[@awesomebearaudiobooks]

Is this GPT-4 or GPT-3.5?

[@MarcusHCrawford]

I hate that this is where programming is headed. I’ve chosen the wrong career. So lame. It’s not a coding “assistant” if all you’re doing is requesting code and pasting it. That makes it the programmer and you the annoying person in management asking for the next Uber.

[@RebeccaBrunner]

Try to think of it as the next generation coding language instead

[@somerandomuser5155]

Or you could inspect each line if code and try understand what it does

[@roboticflamingo234]

This is the end of decent salaries in IT. And it means fewer jobs in the long term. It's truly a race to the bottom now.

[@calebwithers4743]

I agree, and I was trying to make the change from physical labor into IT. Even made a 3.75 GPA this spring semester. And now, it seems like a few years from now, physical labor will pay better. I’m close to just sticking with my mailman job, I don’t like it though. We work most Saturdays and aren’t allowed PTO in December so no traveling to ever see family for Christmas. Wonderful.

[@GordonShamway1984]

I don´t think so. You still need knowledge to see the bugs and know what the error messages mean. But the amount of work will increase a lot, because people will expect you to be a lot faster. Thus makes it even harder for the developer, because you have to remember and understand a lot of projects in parallel - and this is the most exhausting - changing projects in several minutes or hours...

[@illuminated2438]

LOL! I bet the losers of the farming world said the same thing when the thresher was invented. Some people win, and others lose, and it all depends on expectation. You expect to lose, and if you want to be a loser, that's your choice. But try to contain your toxic loser mentality to yourself =)

[@calebwithers4743]

@@GordonShamway1984 yeah man, I think it'll just be a hobby for me. I want to keep my pension. My job is not too bad and I can leave work at work.

[@erockdlmon8645]

Ohhh brother here we go

[@emilabishev384]

Fun fact: this course written by Caht GPT too :)

[@darmalgulabzoi8941]

Is that chatgpt 3 or 4?

[@Luxcium]

ChatGPT will not be replacing you... A developer using ChatGPT will unless you are the one who is going to replace someone else using advanced technology... You must have a good background of the technology you can either learn it from ChatGPT or not but you need to know better than the AI at least for the moment but you and your AI are a small team working together within a larger team of developers but soon we will have the equivalent of general purpose AI Assistan which also would be specialised in programming with write access to the disk (sandboxed and secure)... Like if you have both an Assistant and a Copilot to help you with your tasks and boilerplate

[@kovalenkosv40]

How is this different from google search? In the same way, you search, copy and paste, only there are no links to non-existent libraries.

[@scottmclearn6949]

Someone without programming knowledge cant do that alone

[@kovalenkosv40]

@@scottmclearn6949 Yes, you can't do it without knowledge. Take it and try to write something you don't know, like a chrome extension that will save the selected words to the database. gpt chat is not suitable for development, it may reduce the writing of simple functions, but not development from scratch.

[@PritamDas-rj5fk]

in this video is used the free or paid version of chat gpt??

[@webdecoded]

Free!

[@fanyfany596]

thanks legends salam indonesia

[@sarthakpareta5980]

12:30 which application she was using

[@yoshihirotogashi6898]

Vs code

[@VijayasarathyMuthu]

Much needed

[@defaultdefault812]

All well and good until there is a hallucination and you don't have the technical background to work out how to fix the error.

[@MrAimalsultani]

Well Done,

[@shortcutDJ]

i just want to make the coolest bot ever, for me and my friends to use. i'm dumb and i don't know how to code ,but i can learn it with chatgpt?

[@jessea7117]

What IDE is being used here??

[@webdecoded]

It's VsCode

[@kMadoks]

It's too complicated, not for entry level devs. Too many things on top of each other, the presenter is clearly a senior Dev who lost touch with audience.

[@takethedamnphoto]

as much as i wanted to follow along and duplicate this project. There are just FAR too many subjects that I simply don't understand yet, first time hearing, or just plain complicated. I don' tthink beginners should start here.

[@AH-cf9cv]

Absolutely right 👍

[@muzamiltahir5742]

👍🏿 Right

[@MoneyMindMysteries]

Please make a video 📸 on the use of Chatgpt to do data scientist works. Love 💕😘 your video.😍📸

[@Hello-fc8oi]

AI is either GOD or GHOST... Damn powerful

[@overunityinventor]

The best things in life are free.

[@mandeepvayeda8029]

don't show this to my manager!

[@Christopher-side_dude-Murican]

Who is your manager lol

[@VelloDesigns]

😅

[@ahmedrazashibli8743]

The only thing i am mastering this year

[@m_yoda]

Looks good, but anyway you have to know everything you are doing. Because It seems like you are leading chatgpt not opposite.

[@mixuaquela123]

I mean that's the point. ChatGPT is a tool, not a developer

[@soumadip_skyy_banerjee]

❤

[@chujcinaimie]

Update your web browser

[@akssagir5411]

I was not able to sign up chatgpt.... It shows following error Sign up is currently unavailible...

[@razdingz]

ya ya good good yaya

[@prodigee411]

the caveman discovers a lighter to build a fire instead of sticks and leaves.

[@ApacheChief3000]

Gunga ginga

[@apollo1137]

You got Pretty and sweet voice 🎉

[@iliyalb]

1:57:00 🚔🚨

[@nick-pu4zae]

❤❤❤

[@abhishektripathi8654]

wo ladki kha hae jiski thumbnail lgayi thi.

[@pedro3059]

Light chatGPT's theme should be banned for programmers, otherwise great video!

[@init_yeah]

Damnn

[@abhi-3161]

1st comment. Pls pin

[@SirGamz]

First

[@amat571]

first

[@roody_io]

I want you to act as a software developer. I will provide some specific information about a web apps requirements, and it will be your job to come up with an architecture for developing an easy-to-use course app. ^^The initial prompt used for copy pasta :)

[@flor.7797]

break down into small steps ❤

[@zes7215]

no such thing as overwhelx or etc, talx, more 1uferiorx bloat, doesnt matter