Is ChatGPT THAT good to write a whole fullstack app with NodeJS API and React frontend in just 10 minutes?
Let’s figure out if ChatGPT kills developer jobs and can create a real AI app using the OpenAI endpoints for DALL-E to generate images within a React app!
🪐 Explore the web & mobile dev universe:
⚡️ Just getting started?
Grab a free 46 pages eBook:
🔥 Want to learn everything Ionic?
Check out
#############################
🤷♂️ Want more tutorials?
There you go:
#############################
❤️ You can also find me on:
Instagram:
Twitter:
Facebook:
TikTok:
Or join the Simonics Facebook group:
#chatgpt #reactjs #openai
Hey everyone what’s up this is Simon From galaxies.dev back with a question Of the day can chat GPT replace me as a Developer I’ve Seen Crazy videos I’ve Seen a lot of pictures on Twitter and YouTube and you probably have seen the Same about gbt writing all the cool code And I want to challenge jet GPT today to Write a whole application backend and Front end with react in just 10 minutes So let’s give it a try and hit start We’re going to be quick with this so Give me the code for an Express server With one API round that Um makes a call to the open AI Endpoint for Generating images with Dolly so we Actually do a bit of cross cross logic Here right it’s kind of almost Inception Like Um to clarify this I already created two Project this is a blank Express API as You can see and the other one is a react Project created not with create react App because I don’t want to get the heat From the community it was done with Wheat of course So here the code comes certainly I Always like how nice it is I sometimes Just want to say please to chat on GP Team can we give this a short name like Let’s call this just GPT today okay that Looks interesting Okay okay uh the cool thing is I have no
Idea like I never used Dali or something To generate I think I once used Mid-journey but that was kind of Complicated so I’m curious to put this To use Um because I kind of already got the First part let’s just extract the second Part and put it in here Um API generate image I should replace This with my key I can grab this no Problem I’m gonna use a new key I’m Going to put this in here Um for now I’m just going to call the Prompt like kit with Christmas head or Something Okay then it makes a call Uh request cannot find request Um Sorry what kind of request are you Making here GPT or did I forgot about it Oh it did an import Um can you please use axios instead that Would be nice I don’t like request Um I want to use axios so let’s already Install axios for making HTTP calls I’m Going to bring up the server again and I’m pretty sure you can do this Certainly yes my Lord uh there we go app Express that’s still the same replace Your API key I can already prepare Something in insomnia because I know We’re gonna have to make the call to the API soon and we really need to hurry up Here so http
Localhost 3K slash API slash osdip Endpoint generate image here Generate generate image And it was a post request so we’re going To be able to put something into our Body pretty soon However for now I’m just gonna copy over This part here and replace this because I really don’t like that oh no I want to Replace everything I just want to Replace the options in the call Um Otherwise I’m gonna have to copy the Stuff again okay xios can you just yeah At the import oh Visual Studio code Helps us to save time as well let’s see Post call to this endpoint it’s taking Time that is a good that looks good if It takes time then something is going on Um Yeah well Oh yes this is definitely a kit with a Christmas head six and a half minutes oh And we got still time so that means our API already Works which is pretty Amazing I’m not gonna touch this anymore Um so now [Music] Um please write the code for a react app With type script with Um with a prompt input field that makes Uh Fetch request to the endpoint of our Express server from before
And shows the resulting image This is this is kind of like a very Interesting part now Um because I know how I would write that Code probably however it would take like I don’t know 10 15 minutes something Like just putting together stuff and I Really hope that GPT saves me time and That is like what I think GPT could Really do great like I’m not interested In this boring work as a developer Um I want to solve problems and I would Want to get like into real stuff Uh so let’s see we already have used State for the prompt uh we have a submit Function that makes a postcard API this Is unbelievable uh to API generate Images Um then we set the data to image URL This Um well yeah we actually get back a URL Right we already unwrapped this uh in Our that was crazy I just noticed this When it rewrote the logic to the axios Call in the API it actually unwraps the Object here so there is a real object we Get back from that API How is it possible that it actually Knows about this oh we got the code we Need to hurry up uh how long we got like Four minutes oh this is gonna be hard That’s gonna be challenging let’s just Hit save and see okay okay will this Work out of the box let me try
Um Green Bay Packers fans Okay well it certainly takes time which Is usually a good note on the other hand Um feeling like yeah we got a problem Here handle submit Okay we do get back the data Or what is this let’s try again let’s Let’s you set this as a state uh cat With Chris map with Green Bay Packers Hat Okay let’s generate an image okay post To No this is not the NP okay yeah I need To make this to uh http Localhost 3K And then I can generate this okay it’s Not giving me an error again that’s Usually a good sign And Is that actually doing something I am Wondering because we only got three more Minutes No unexpected token age HTTP is not a Valid Json what is not available [Music] Um are probably also let’s lock this out Just to see what’s going on and then Putting it because something is going on Definitely I think we’re just putting it In the wrong way so I can already tell Him Um Can oh what’s this
And we do get back a result in like yes In three minutes we still got time can You please uh rewrite the UI to use Material UI because it looks horrible it Could look better right But it works we’ve in seven minutes in Seven in just seven minutes we have done An API endpoint that calls an API I Never used before uh in a real Application and it wrote the react code With the prompt with an image it’s like Conditional rendering it has a form we Could actually like re oh I think I’m Challenging uh GPT Okay I’m replaced I’m done If this looks any good I’m completely Done this is probably my last video you See on YouTube Uh create Styles this is If this is now already responsive I’m Just gonna drop out and become a farmer Somewhere else Why am I actually here what did I do in The last 10 years Like why Okay yeah we still need to make sure That we patch this a bit and this point Where we made the little correction in Our API so let’s see I’m gonna Um Like the whole fetch like the whole Handle submit uh for the whole handle Submit I’m gonna copy this out just to
Make sure we still got access to it how Long is this code snippet Damn like this would have taken me I Don’t know 20 minutes to ride If this is correct if this looks like Material UI and if GPT finished this Code before Like it’s not possible we haven’t added The We haven’t actually added material UI Core so how do I install this can you Tell me this Um no uh How do I install this I’m just gonna try This I don’t know so I’m just going to Install material UI core I think like There are more packages you usually need To install with a material UI Still have this Npm install at Material UI core Nah that’s certainly not the way you do It so I’m going to go back to my Previous code and run npm run Dev Because in this second it runs out There is it but anyway I have an Application I can put in a prompt and I Can generate an image that shows up in Here it’s only using uh it’s still using The prompt in here so we could now Refine this easily Um to Rewrite the API to use the prompt from The request uh Parameters
It would most likely do this I’m not Exactly sure how you install material UI Uh react Material UI I think like the Installation is not just running one Script So this is Actually says it that’s the way to go Let’s see I’m just gonna for fun do this So we’re gonna expand this a little bit Um Uh found react uh okay you can yeah we Can actually install this with pure Legacy There we go Um and if I install it like that is that Enough like is this enough to use Um It is it actually is uh and it’s still Going on here to rewrite our thing to Grab the prompt from the request params Actually it’s not the request params uh That you should use you should really Use uh the request body Buddy.prompt because I think we’re Sending it as an object from our front End so once again A Tiny correction Um can you please also do the front end Like in responsive We’re jumping around this is interesting Can you rewrite the material UI code for The front and to make it responsive and Include a nice header So we’re gonna wait for that it’s gonna
Be the last one Um but besides that we’re already doing This So I think we don’t have to call Json Stringify anymore Um or do we have to call this with fetch Let’s see cat with hat Um yeah and that’s not working because This is not our endpoint So that’s a Pity it should kind of Remember the stuff we had in here Um that’s probably my own problem Um so if I do it now oh it’s still going On it has a nice header included I Should probably have told this to come Up with Um yeah and this is now where my set Image URL comes in differently but Anyway should work just like this Cat with Green Bay Packers head Let’s see if it can come up with this Also check gbt why is this low like you Could take ages to write that kind of Code huh you you could do this oh it’s Using grid It’s pretty amazing here’s a kid winning I don’t know if this doesn’t look like a Head from the Green Bay Packers it looks More like I don’t know which kind of uh football Team this is like if if Kansas City Chiefs and the Green Bay Packers would Fusion that’s probably the result of it Um but I still do want to see the uh the
UI here so I’m going to copy this code Over now and put it in here I’m gonna Reply my little changes that I always Made so I’m gonna setting the image in a Different way but that’s only my own Fault and then the fetch command is also A tiny bit different So let’s hit save and let’s see Oh this is nice So here we go here is the dally image Generator you could probably have put This to the top and not the center of The screen uh but anyway let’s do Um Santa with a Green Bay Packers Cheese head And then let’s generate this oh I made Made a did I made a typo somewhere Uh or did I crash the API uh HTTP Localhost generate image Uh what did I what did I just do Uh API generate image Oh it’s actually it’s not a get it’s a Post request my friend when did you Change this and why There was no reason to to change that Uh I don’t know This is funny like why did you do this When did it change our code we had Inside the body everything was fine Until we added this new thing Uh I didn’t mess up then it totally Messed up our code so be careful with
Check GPT and what it does to your code You can’t trust it all the time uh We’ve We’ve seen it now it can start like Suddenly change your code for no reason The code was nice and suddenly was Broken so I feel a bit betrayed Now by You at bar is not defined yeah well uh Go away check GPT you lost my well you Still kind of wrote that code pretty Nice so CAD with cheese head Uh before Christmas tree So this is our last prompt for today Because I think we kind of want the Challenge when the time ran out we had An application and we do have a pretty Solid like this is not a cheese head This is a piece of cheese kit but it’s a Christmas tree and a kettle it’s not too Bad and our header is suddenly in the Right position if we have a big image so It’s not too bad what we can do with Chat GPT we need some developer Understanding like I had to do like a Mechanic get a few screws right here and There but overall what it wrote in just 15 minutes this uh responsive UI this Server with an API function uh which Makes calls I probably would have taken longer to Figure this out with the documentation And if we would take longer to now Rewrite this uh apply a few changes here And there I think I’m very sure that Check GPT could come up with even more
Helpful prompts that will help us to Write the full application so will it Replace our jobs I don’t think so Um can everyone use it I don’t think so Because you still need some kind of Understanding a bit of a developer mind To get into all of these but like it’s Very early and this is already the Result it can give us This is pretty fascinating so I kind of Fear about my job in like five years but For now I’m gonna continue so check out Videos at galaxies.dev get on the rocket They’re going to be Epping more videos In the future and don’t forget subscribe To this channel so until then Happy Coding Simon
