Building a Fullstack Game Store in 10 minutes (React, TailwindCSS, Amazon Bedrock)

Key Takeaways

creating generative AI apps doesn't mean you need to learn a lot of complicated apis in this video we're going to create a game store catalog Creator using stable diffusion Amazon bedrock and CLA 3 Sonet we're going to use all these Technologies together to create an application in the next 10 minutes let me show you demo and show you how this works so here is the video game catalog that I have just recently created these are all J I created from the titles to the pictures the description the r even the price to add a new item to the catalog I'm going to click add game and then I'm given a prompt on the right hand side so I can either fill out everything by hand or I can fill something out in the prompt and it will autogenerate everything we need so this is a great way to create test data or dummy data or just trying to play around with generative AI so let's create a new prompt here I'm going to ask it to create a new simulation game for a space shuttle so say create a simulation game for a space shuttle and so right now it's going to contact our CLA 3 model and also stable diffusion and get us some pictures that we can use for this game all right great you could see here that it gave us the space shuttle Odyssey title for the game it gave us a description a rating a price and I have four different pictures I can choose from so I'm going to go ahead and save one of these pictures to my local hard drive drive and then right down here I'm going to put that name of that picture so I'm going to save it into my public folder inside my project where this code is living okay and now I'm going to type in the name shuttle. JPEG and I'll go ahead and submit it you can see here the new space shuttle game has been added and everything has been generated for me so let's take a look at a diagram and see how this works all right so here is a diagram of what we're building today uh the app is already created so I'm just going to show you some highlights of it but let me show you the overall architecture of it so here is the user and the user is us at the keyboard and we're going to use adob amplify Gen 2 for all our different apis and also the infrastructure is code tool to create all this infrastructure that we're creating you can also when we're done you can actually host it on our amplify hosting we're also using Tailwind CSS V react react rer we're also using another CSS library that gives this nice retro look and feel to it or when you go in and you put that prompt to add that game it goes to appsync and this appsync checks with Amazon Cognito to make sure that you're authenticated and that you can actually perform the action that you're you're wanting to do and then there's three different types of things you can do you can do a custom query to an AWS Lambda resolver and this is where we can generate the game listing so all that fake data for you what that does is it goes to Amazon Bedrock which then hits CLA 3 Sonet we also have this game model and this game model talks to Dynamo DB and this holds all that game information the the name the description the price the rating that all goes to this Dynamo DB and then we have another custom query to create the images and that's through this AWS Lambda resolver call it generate image that goes to Amazon bedrock and then that uses stable diffusion to actually generate the images to bring back to the front end so you can see here quite a few steps in all this to get it working but you'll see through the code that a lot of this complexity is abstracted away inside Gen 2 makes it which makes it much more simpler to work with so let's jump into the code and we can take a look at some highlights and how you can put this together so we have a few packages here that we have installed we have AWS amplify we have AWS amplify UI react and the AWS SDK client Bedrock run time which is going to be running on our Lambda functions and this will all need to be installed in addition we'll be using AWS amplify Gen 2 and so we'll use this mpm create amplify at latest and this will create some boiler plate code that we'll be using to create our data layer and our authorizations that we'll need for this app we're going to use MPX Ampex sandbox to test everything locally what this does is it creates an ephemeral environment in our AWS account that we can start and stop at any time and it makes it really easy to test and that's what I'm doing with this demo today at the end if I wanted to push this production I can connect it to the AWS console and I'll put links below if you want to take that step next one more thing you need need to make sure you have AWS credentials locally saved on your computer you can do that when you set up your aw CLI you can also set up identity Center if you like to do that I'll have some links in the description for that as well so we have this open in vs code and you can see here we have a new amplify folder and we have this off and data and that was created when we ran that amplify mpm create amplify at latest now you can see I added in a few extra things I have this new functions folder and I have this generate game listing and also generate image and I'll show you the code for that but I want to highlight what's in the data folder and this resource folder that we see here so this is the file that we Define our data models and these are also where we're going to Define our custom queries that talk to those Lambda functions that I showed you earlier in the diagram so the first one I want to show you is this a model it's for this game model and this will create the abtin instance it's also going to create this name description rating price and image fields and it's going to create all the resolvers for this so the create read update delete and list so just with a few lines of code it does this all for you in this generate game listing this is our first custom query and what this is saying is that it's going to take in this description and it's going to return back a name description rating and price and it talks to a Lambda function that I'm going to show you about in a moment this generate game listing and then we have the same thing similar for Generate image we have this query we have arguments it takes a prompt and then it returns back this string here which we're going to then use to generate this image now let's take a look at one of these Lambda functions so first we're going to look at this generate game listings and if we look at the code here and by the way we will have a link for this in the description it's going to talk to our clad 3 Sonet model and essentially what we're doing is we're just defining exactly what we're sending to it and what we expect back so we have a system prompt that we tell it that this is a video game listings and that we want to retrieve back these certain fields and then we're using one of the cloud options here called tools and what's really nice about this is we can Define exactly that what we want back so our different response types our input schema for our types for our name description rating and price and we can Define exactly what we want we can also tell that we want Json back and that's really important because we need to be able to parse the data when it comes back from the cloud 3 Sonet model we can also say always use this resp respon type so always use this tool this response type and for this messages we're basically saying that we're going to send over the arguments and it's going to return back the data we expect and then we do a little bit of decoding and we send it all back to the user for the generate image this is using the stable diffusion you can see here I can I put the exact model that I want I'm using stable image core and I'm putting exactly the information that I want to come back and then I'm decoding and sending it back now there's a few extra things we need to do uh we have to Define define our back end inside our resource file here we have to also update a few policies which we'll go ahead and add in here as well the last thing I want to show you real quick is the react code that we're using for all of this I have a bunch of different use States one thing you should pay attention to is I have this query here generate game listings which I take in this prompt so this is how I query the back end from the front end to connect to that ABS sync service that will connect to bedrock and clad and then the same thing for Generate images in this case I'm generating multiple different images and then I am setting them into an array and then having the information available for the front end later on this has been a lot of information but this just shows the powerfulness of amplify Gen 2 and using it with bedrock and these large language models please if you like click some of the links in the description below and you can learn even more