Full-Stack Next.js, TypeScript, and AWS Course – Code a Quote Generator

welcome to an exciting journey into the world of full staff development with next Cs typescript and AWS this course was expertly designed by Brian Huff who is a seasoned software engineer and passionate teacher he takes you from building a front-end with nexjs and typescript to creating a robust backend with AWS amplify and finally deploying your app on AWS we'll be using zincot's API for fetching quotes and Diving deep into State Management hooks debugging nosql database modeling and much more you will Master the art of building and deploying full stack applications on AWS how's it going everyone hello friends hello world and hello free code Camp my name is Brian huff and I'm really excited to be creating this video showing you how you can build with nexjs typescript and AWS to generate images completely serverlessly in the cloud and I created this project as a weekend you know really just see if I could build it because you know I've used canva I've used Photoshop I've used a lot of different you know applications to make images and I was thinking could I make these images using technology and programming and it turns out that you can so I'm really excited to show this application to you and show you exactly how we built it and we're going to be doing quite a lot we're going to be configuring a nexjs with typescript project we're then going to be configuring our own appsync graphql API in AWS we're then going to be using in Lambda function to be configuring some server code that's serverlessly deployed to the cloud and then we're also going to be updating a database with dynamodb and then we're also going to be showing how to connect the front end to the back end and then deploy our application Live using amplify hosting to then access our application from any device online so if you're excited to see this build then you are in the right spot and to give a little bit of context about who I am I have been building on the cloud for the past few years during the pandemic was when I actually got really exposed to AWS and what it can do because I was building open source technology related to cloud and cloud computing and this was for symptom tracking and that was really what gave me my start in cloud and then that really mushroomed into a lot of different opportunities that I saw because instead of you needing to create your own infrastructure you could just use serverless Technologies and then scale a lot of the business use cases that that you might want so that was really where I started building on the cloud and then I started creating content around that on YouTube and on Instagram and then that turned into what I created as a YouTube channel and as a brand and as a Dev shop called the tech stack Playbook so this has really been an exploration for me of how can I build technology how can I solve problems and how can I build cool things and that's what I see as programming today and as an AWS Community Builder on the data team I become really passionate about building these types of serverless infrastructures and data models and ways to construct technology because it is very empowering when you can learn how to build what you think about so take an idea and then turn that you know into life bring that to users bring that to a company bring that to an organization that's where I see programming becoming really powerful so I hope that this tutorial is really helpful and empowering for you to see how you can turn your ideas into code and then into a real application that you can use on any device so what we're creating is an inspirational quote generator and the way this is going to work is that when we press a button it's going to be calling a function in the cloud it's going to generate this image for us and then we're going to get a string of this image so it's not an actual file it's just the string that creates a file and then we'd be able to use that in our application so we could either save that image copy that image open it in a new tab or we could also download it to our computer and I do think that's something that is really cool about this type of project is that we're actually going to be able to show how this can generate images in a desktop application which you see but also if we wanted to get this on a mobile application this is what it'll look like so when we press it here and we press make a quote it's going to spin and then now we have this image so now if we click on that the image is actually showing up on our phone and if we want to press this again we can make a new quote and then we get another image there so I think this is a really great project for anyone that wants to learn how to create Progressive web applications and also show how to have one back end that can service many different types of front ends whether you have a mobile application or you have a desktop application so the way that this is going to work at a very Baseline level is that when we have this quote so we made a call from the user so the user is going to generate a request that's going to Ping appsync which is our API using graphql that's then going to connect to an AWS Lambda function and then that's going to generate a base 64 encoded string so then this is actually a series of digits a series of code that actually is an image and we actually are able to download this we're able to copy it we're able to use it but it's not actually saved as a file until it reaches the application so that's where we're able to take all of this in the cloud and then make it run get a response and then download this image right from our application in our browser I'm really excited to show you this project and especially learning how to build this type of serverless infrastructure where you don't have to provision the server yourself and there's a lot of these managed services to help you build with scaling so as users are using your application as these functions are getting called this will actually scale with your use case and you only pay for what you use so you never have to worry about provisioning a server and putting up you know money you know up front this will be pay as you go and there's also really generous free tiers so that you never have to worry about lots of expensive upfront costs it's very accessible and scalable to build your use case and build a fun app which is what we're going to do today so if you're excited about that let's get ready to build all right so first things first we are going to set up a code repository for our project so if you don't already have an account you can go to github.com and set up a free account it's super easy to set up your account and then what you'll be able to do is start allowing access to your projects with Git so that you'll be able to have Version Control so or Source control for your project and what this is going to allow us to do is think about it like Google Docs but for your code so you'll be able to go back in between different branches maybe you wanted to review code that you wrote previously maybe you need to revert a change that you pushed into production well thanks to git and GitHub you'll be able to then go back to that previous commit and then make that the default Branch or the default code for your project so uh you can get to create a new repository a couple different ways in the drop down in your profile in the top right you can go to repositories and then there'll be a green button where you can then press you know create new repository or you can press this handy plus button up here and then create a new repository so we are going to name our repository inspirational quote generator like so and then we'll give it a nice description so we'll say this is our inspirational quotes generator project to learn how we can run Scripts in AWS with next JS okay great so then we can choose between public or private I'm going to choose private and then once we create our Repository we'll then see that we have now a way to access this code repository with Git so now that we've done this the next step is to set up our project with GitHub desktop so GitHub desktop is a client that you can download also from Microsoft to the same company that owns GitHub and you'll be able to have this GUI or this graphical user interface that will let us manage our project with this web client on our computer to do that super easily we're going to press this button that says setup in desktop we'll then open GitHub desk up here this is going to prompt this window to open up there actually I'll do this one more time so we'll do that there and then we'll be able to choose where we want our project to be located so I'm going to go to my tech SEC Playbook folder I will drop it in there and then as soon as I press clone it's then going to establish a link between this folder on my computer and then the code repository in GitHub so now if we wanted to open in Visual Studio code will then be able to and you'll just say yes I trust the authors because I trust myself and then um we'll be able to now get our project this folder all set up in GitHub desktop in one click which is awesome so now what we want to do is we want to start building our next JS project to start coding all right so as you can see on my screen I have the next JS docs up this is the documents that are the documentation that's maintained by the company for cell and they maintain the next JS project so what we are going to be doing is we are going to scroll down in the docs to where it says create next app and this is the one line of code that we need to install our framework for working with nexjs and adding typescript as well so something that we can do is just right click and copy and then in the left part of our screen and visual studio code I'm going to control B just to get rid of that sidebar and I'm going to control and then tilde and then that's how we're going to open up our terminal so you can just do control C just to clear that out or I can just expand this make it a little bit easier to see so I'm going to open this up a little bit so when we open up a terminal window this is the same as opening up a terminal window on your screen or if you're on a Mac or this might be Powershell if you're you know not on a Mac but I'm on a Mac so this is what I would be using but you can run a basically a Powershell or a terminal window inside of Visual Studio code which is a great feature of the IDE so as soon as we write this in we're going to press enter and it's going to walk us through a series of commands to help us bootstrap our project so do we want to install yes and then what's our product name we're going to say inspo quote generator but we actually it doesn't really matter because we're going to get rid of this folder anyway but we'll just give it something now would you like to use eslint we're going to say yes would you like to use the source directory we're just going to do the default no and we'd like to use experimental app director but say no and we're Alias uh we'll just do enter and now it's going to start generating all of the different dependencies and Integrations for our project and I think this is kind of like the the fun part of coding just seeing all the scripts compile so that's great we installed it correctly and now if you open up command B you see all of these modules that are right here so something that I'm actually going to do is take this and I'm going to hold down shift and then click this so I get all of these and I'm going to move these back a folder so what we want to basically do is in GitHub desktop you'll see in here all of these folders all of these dependencies all of these elements that we're going to push to get I want them to all be tracked at the same root level as opposed to having going into a subfolder to then access the repository this is just how I structure my projects and we can then delete this subfolder because we don't need it anymore and there we have it so now we have our project bootstrapped with the next JS template for perspective I'm using the latest next 13 build with react 18 and this is typescript 4.9 so these are all of the dependencies that the next JS create next app project will build for us the next thing that we're going to do is we are going to allow a way for our next JS with typescript project to use Styles components as our Styles framework so personally I use style components for all of my projects because if you understand CSS this allows us to create basically functional components for all of our Styles so that we can replicate our templated components throughout our entire project it makes it super easy to read a lot of visibility across the code base and it makes it really easy for anyone to just go in and edit Styles replicate or duplicate files for components it just makes it really really easy and it's very very accessible to get started so something that we're going to do is we're going to add in a DOT Babel RC file and this is what we're going to allow for our custom Fable file so we're going to have a preset of next slash Babel and then in terms of plugins we're going to have the Styles components plug in with SSR is true and display name is true something else that we're going to do we're going to edit our next config file so I'm going to copy and paste these elements and then I will walk through how we'll do it so we're basically going to overwrite this whole file with this file so I'll walk through each part of it and also if you ever see me wrapping the text I'm doing alt Z on a Mac this is the command to wrap the text to the window so what we're doing is we're creating our next config and then we have react strict mode is false under the compiler we're going to be including Styles components and then there's going to be various different files that we need to install so displaying needs to be true SSR needs to be true founding needs to be true top level import paths we just leave that as an empty array and then meaningless file names just put in as index CSS prop is true namespace is an empty string Minify as false transpile template literals is false and then pure is false and what we do is we set module.exports equal to that next config that we have up here so this is that next config file that we need to be able to allow our build environment to understand what style components are trying to do so we're going to save this and in case you're new to Styles components I just want to give a little bit of an overview on what we're doing uh just because when we're installing this design framework into the code base it might be helpful to just have a little bit of an intro into that before you start installing you know maybe things that you haven't used before you don't know what they do so if you go to stylethedashcomponents.com this is a lot of very helpful documentation about how this styled framework works but basically what I really like about it is what you'll see right here so let's say that we wanted to define a button and this is going to be a button with a link around it so now what we'll be able to do is very easily create this component that has a styled a tag which we'll use as a link and then we could you know Define the Border radius which is three pixels the padding which is 0.5 from we have a margin we have width we have background color border we have all of these things but where it gets even cooler is we can also pass properties into this button similar to a functional component in react so this is really great because if you ever have Dynamic Styles and let's say that something triggers something else or you have a loading state but as soon as the loading state is complete then you want to turn the button green for example because the data is ready or let's say that there's an error and you want to turn the button red well you'd be able to actually pass properties down through this component through the Styles components framework to then edit those properties so this is an example where the property is primary so you would add this as passing data as props through the component on the client side and then you would be able to then edit the background and the color based upon the property and what it is doing and you'll see also here that there's a ton of companies that are using Styles component you know Target Vimeo Vogue Lego you know Autodesk so many different types of companies BBC Gizmodo take Master price on right all these companies change.org Bloomberg I mean the list the list goes on coinbase the list goes on so many different companies are using South components because it makes it so easy to edit your Styles and also think about it like this you'd be able to then copy and import this button component throughout your entire code base so anytime that this button exists you don't have to rewrite a bunch of inline Styles or you don't have to keep rewriting CSS modules every time that you know you need to render a button you could literally just import this specific button from your file which which I'll get to in a little bit and you'll be able to use this button throughout your code base which saves you so much time and it's really efficient because it's the same code you don't have to rewrite code and be extra verbose it's the same code the same component you define it once and then use it as many times as you want and these are just some other examples if you ever want to check it out but what we're going to be doing is we're going to install with styled components and then we'll also be installing the Babel styled components plugin in the dev dependencies so that will be able to then which talks about right here um just so that it can give some more benefits like legible class names server-side render compatibility also smaller bundles and more optimizations which is really great so we're going to do that right now so we're going to open up our code base here we're then going to close out that side header and then we're going to paste that in here so now that we have npm install save style components we're going to install that there next what we're going to do is it told us that we also have styles components payable [Music] so you'll see in a little bit why this is a really helpful plug-in for our Dev dependencies when we're building with stealth components so I'm just going to copy that here so it's npm install dash dash save Dev IL plugin style components let me install that there and now if we see our code base it should look like this so dev dependencies has be able to plug install the components there and then styled components exists in our dependencies there so whenever you're changing the server or different elements of the next config.js or in these other elements sometimes you'll see this red right there and it'll say module can't be found or something like this so one trick that you can do to get rid of that red is to do command shift p and then when you do command shift p it'll open up this menu where if you press or type reload window here that will help to get rid of the red error that you might see so this is just a way to refresh your code base and you can actually sometimes run this while you also have a build running so it'll just refresh the vs code window and sometimes it'll clear out maybe some left over it thinks that it needed this package but it didn't see it so then it'll just resync up your code base in vs code to make sure that everything is consistent so just a fun little hack to fix that in case you ever see that red error there or elsewhere related to typescript or next.js so once we've edited our next config JS file we are now going to go into our index file so under Pages under index we're going to then remove a few things that we aren't using anymore so we're not using this next font module and there are some instances here where we reference that but we're just actually going to start just removing uh these things so I'm going to take everything from Main div all the way down this and we're going to give that a save and that is the imported elements that come in with the template so we're just getting rid of the template and then we're going to change the header to be super quote generator cool so once we've changed this header module this is a module that's specific to next.js and it allows us to create Dynamic headers for all of our Pages or sitewise throughout the application so this is a great upgrade if you're familiar with crate react app this is actually a really really really slick easy way to do this with xjs and typescript so we change this and then this will be the home page header and let's just give that a quick save and now we're going to run this and we're going to see if this worked out so when we run our project in packet.json you'll see here under the scripts there's Dev and then that's those next Dev to start the project or start which is next start but we're going to do npm run Dev and that is what's going to get our project started up so see that it was compiling client and server are successfully rendered super quickly and now let's see what that looks like on our browser when you run npm run Dev that's going to run our application on localhost 3000 so this is the URL for how you would get this in your browser and if you're running this application so far you should just see a black screen but in the header if you hover over this it should say inspirational quote generator which is our title for the header and then if you were to actually share this link with somebody else running on our URL which we'll do in a little bit that's where you'll see this preview description where it'll give you a preview of that you could also have an OG image if you wanted to add an image as that head header metadata tag but um we're not going to do that right now we're just going to focus on this so just to give a little bit of a sanity check let's make sure that this is actually working correctly so I'm going to just write a div with hello world inside of this Main we'll save that and then we'll see that that is printing and it's actually updating once we press you know command s to save it this is going to update in real time so let's say that we wanted to say we'll do an H3 uh tag we'll say great job running Js we'll give that a save and then now that's actually running and putting it below so now we see that this is actually printing out our code which is awesome so what we're actually going to do now is we are going to get rid of this and we're going to start actually building out the template for our project with our real code not the template that is created with create next app so we'll give that a save and we'll go to the next step so let's do some general housekeeping to set up our project obviously there's a lot of styles that the template will come with but we're going to be creating our custom code so we want to create our own Styles so if you navigate to the Styles subfolder in your project we're going to go to globals.css and we're basically going to remove all of this so this is just the starter templates we're going to do a bunch of other stuff so we're going to install some fonts and then we're going to install or basically write some Global styles so whenever you do a wild card and then you do these brackets this is going to be how you apply basically a general style to all the pages that ever render So This Global Styles is basically apply the style or allow this type of style to work for any of the projects that or any of the pages that get rendered in our project so we'll do box sizing water box we'll do padding zero and then we'll do margin zero we also are going to import some fonts so I'm going to copy and paste these in for you to copy so where I'm getting these from is Google fonts these are free fonts that you are able to access and then use in your code so I will show you where to actually search for these so that in your next projects you're able to get up and running from that so I'm just going to do a quick pan just to show you this last little bit from that font and then I'll show you how we get that so when we want to add a font you can go to font.google.com and then let's say that I see Roboto because I really like this font so you can click on it and then it's going to give you all this information about the Styles the different font family elements and all the different you know ways that you know you could be using this so let's say that I really liked um this font family for example so what you can do is that you can obviously download or what you could do is you can just go to select you can go to this and then these are actually the other fonts that I had in there but what you'll have is here under Roboto you'll see that there's a link and there's also an import so the import is really important because when you are working with a framework like CSS we don't really need to import all this this is more for like if you're importing this into HTML we really just care about this import statement here so this thing so you'd copy this and then that's where you would then literally copy and then paste it into there right and that's where you'd be able to copy um that for example so same thing here right if you wanted to do that with Roboto so it seems like when you you know drop down that's for this so then this would be for Roboto yep and then that's how we would add a font into our CSS so we're going to give this a quick save and then these Styles will then apply to our overall project so then when we go back to this we'll see now that the background is white it's not black anymore and some of these Styles seem to have been applied which you will see in a little bit back in vs code we can now remove our home module CSS these were just the styles that were imported from the create next app we can just delete this so we'll delete it and now what we're going to do is we're going to do a little bit more organization of our project so when I work with style components I like to create a components folder so I just right click add folder and then I title it called components and then we're going to do a folder so we're going to do quote generator and there's going to be also another folder called animations which we will get to a little bit later in this video but right now in our quote generator we're going to not add anything in there right now but we will in a little bit we're going to do mainly all the Styles in our index.tsx file but we will also add some sub components to break up our code and make it more composable through our project so now we're going to do is we're actually going to get started building out our project so what we want to do is we want to build out a background so something that personally I like to do is have a file in our quote generator we're going to call this quote reader elements TSX so when we are working without components something that I personally like to do is on the right have our element and then on the left we have the actual file that we're editing in you'll see a little bit why this makes a lot of sense in terms of building but a lot of it is just an organizational thing of I'm editing this style and I'm adding it into this page here so what we're going to do is we want to add a background to our project we want to you know give it uh you know a cool nice you know dynamic background so how exactly would we go and do that so what we're going to do is we are going to add in a few things so we want to do background for our project so in here right from the top we are going to do input styled from style to components we're then going to import link from next link because we're going to need this a little bit later and then we're also going to import image from next image here we're going to do is we are going to use the styled component extension and if you don't already have this you can see the ones that I have so I like vs code it's syntax highlighting and then also Styles component Snippets for vs code these are the ones that I use and they are super super helpful because what we can do is if we want to just write uh basically a snippet for our style component we'll do exsc we'll export a stout component and then we'll call it gradient background con and then we need to call it styled something so we do style div so you could do styled H1 you could do style H2 you could also do a style of link as you'll see before you'll see a little bit later but what we're going to do here is I'm just going to bump up that just a little bit just so you can see a little bit more of the screen and immediately as we start writing in Styles components we might start to see some Type errors or typescript not recognizing what we're trying to do so we see this error where it says can't find the Declaration file for module stealth components um basically this has an any type so it gives a recommendation of let's run the install for Dev dependencies with types for styled components and this will allow typescripts to recognize that we have style components being used throughout our project so what we'll do is we'll open up a new terminal window and if you don't already have this open you can do control and then tilde and that's how you can toggle the terminal at the bottom of the screen we'll do I did Ctrl C and then control V we'll do npm I dash dash save Dev type Styles components we will install this for our project so that ran and then this error should go away which is great so now it recognizes that this module you know checks out with all the types and it recognizes that that's what we're doing which is awesome so now we want to do is we want to add in some Styles here so I will go through these and then I will go through them together cool so just to go through these background we are giving this a linear gradient and this is going from one color to the next color and we have it going to the right so this is a great way to and I'll show you the process for how to do this but this is a really great way to add that Dynamic you know styling for any div or any background or any block where you can you know give it just this background color but it's a one color that blends into the next color and this is like very modern very you know futuristic it's what a lot of very like you know really polished apps will have in that linear background so I really like linear gradients I like adding gradients to a lot of things that I do so that's a great way to add the background we'll then do background size a 400 percent with 400 and what we're going to be doing is we're going to have this oscillating effect for the background and you'll see how having this background size being really expanded and then we'll be making it um basically like moving back and forth and having it you know move left to right which you'll see uh through this animation that we're going to build out so then we're going to do an animation to gradient we'll do six seconds e is infinite and this is going to basically mean that we're gonna we haven't created this yet but we're gonna have a animation called gradient it's going to be running every six seconds and it's going to have this ease effect throughout and it's going to be running infinitely we'll then do a height and then a width of 100 view with and then what is so awesome about Styles components you don't have to you know like start writing you know keyframes because usually with CSS you'd have to do like keyframes gradient and then you'd have this you know in the background and then you have to reference it you literally can wrap all of these elements together and you don't have to worry about having you know a certain element being there um also just with you know doing hovers let's say that you have this class here so you'd have to like declare it as like this with a style and then you'd have to do something like this with hover and then do that and you know I I just like think that style component just makes it so much easier to just wrap all of your Styles all of your animations all of your keyframe editor elements all in one package component so that you can then import this throughout your entire project which I just like I think that's amazing and it saves you so much time for having to do all this guesswork of you know did I have this keyframe is this keyframe imported did I add this hover effect you know did I add this other effects with these Styles so it's just super easy we'll add then a background position which is going to be zero percent to 50 percent we're then going to do a 50 percent and then we're going to do another one and I think Amazon code whisper already knows exactly what I'm going to do because I already have this project committed but we'll just carry out this other process and then we're basically going from 0 to 50 to 100 and we're going from background position you know zero to 100 back to zero percent and um we know we're keeping fifty percent for both so we're adjusting the you know the height and the width and you know editing it that way so this is great so we'll give this a save so this is going to be really cool in one second but just to show you also the power of South components we have this styled component that we've already created it's a div with all of these Styles which is great but how do we actually get this back into our project so something that we can do which I think is so so so awesome so we're going to declare this almost like we would declare a div so we use that you know that carrot and then we're going to just start typing the name of that styled component that we just typed so gradient background and we already see that it's finding this element so we can just press enter and now check this out so as we close this out it's now added imported this so this is what it will actually look like so it's importing from components code generator coordinator elements and we'll add this so this is what's awesome about solid components also is that as you create you know these unique named elements we can then just start writing them as if they were a normal div and then we'll be able to then you know use the sort of intellisense of finding the different names of the components we'll then be able to import that directly right into our code it's super fast and then when we save this check this out we now have this really really really cool Dynamic background for our app which I mean this is like adding that type of animation with the gradient just gives it like such a nice Snappy Dynamic fun vibey element to the project and this is where you'll be able to add this really nice linear gradient oscillating background to our project so that's great so now you've just seen how to import the style component and then add that into one of the pages in our project so we see that we have a gradient background component that we really like so once we've added this feature one of the best practices that you can get into is making sure that you commit this specifically to GitHub so that you have version Source control so what we're going to do is in our GitHub desktop client we see all the changes that were added and specifically if we open up this 100 components we see that gradient background container Styles component that we have so we really like this so what we're going to do is we're going to keep this on the main branch but we need to publish this Branch first so what I like to do is just simply add and we'll say added gradient background container SC for South component so that's good so we'll Commit This to Main and this is all of the different styles so this was basically our entire front end application minus you know node modules and certain elements that we don't want to push to GitHub because that would be sending like thousands of files and we don't want that in our our GitHub repository because that'll be built with our package.json if we run our application you know with a server but we don't want to put that into the actual assets that are deployed because that's what package.json includes so that's this file this file right there so these are all the build scripts and everything but our dependencies for our build script but we don't need to include the node dependent known modules dependencies packages so what we'll do is we'll Commit This to Main we'll publish this and then we'll wait a second and then we'll check GitHub to see where they are so what's awesome about GitHub is as soon as we push this code and we're able to push this to our Branch when we refresh we'll see all of the code that was just added to our code repository so when we go here to our components folder and then to that component that we just made we see that the gradient background here is actually the same that we just added here so this is a really cool way where you're able to add that Source control or Version Control for your application so if you ever need to for example go back to a previous commit you can always go back here and then go back to that specific commit and then maybe go back to a previous version this is really great if you ever need to you know check out a feature or a certain build or a certain way in which you built something you always have that type of History so this is just a good best practice to get into when you're building especially if you're building a new system and maybe you write some code in maybe there's an error or maybe just you need to you know undo something you can always go back to a previous version and then just sync up you know and go back to a certain branch and then you could just change your code and then GitHub desktop will be able to switch out the right code for you now that we've worked with Git and GitHub and pushed our initial commit let's now switch back to our code and let's start building out some of this front end so what I wanted to do was add a background to this which we did which was that gradient but now let's add some images to the background just to you know add some Cloud flare so what we're going to do is we are going to take these two images that I have stored in assets so I create a folder called Assets in the root so I'll just do right click and then I'll do add folder I'll say assets and then I'm going to drag and drop these that I have stored locally you could actually use any images that you'd wish but these were two that I thought were kind of fun one was lightning and then another one was cloud with sun now that'd be kind of fitting because of cloud so what we're going to do is we're going to create two different components one is going to be for an image to be in the top left and one is going to be to an image in the bottom right so what we'll do is we're going to do background image one and that's going to have a source which we'll call cloud S one and that will have a height of 300 and then there's an alt cloudy back ground one we'll close it out and to get rid of this error we're going to actually need to create this style component so in our quote generator elements text file so that's this we're going to keep our style components in this and then we'll import them here so we'll do exsc which is that expert size component snippet and then we are calling that background image one this is going to be a styled image and we already imported image from the next image module from reversell and then we're going to do another different style so we're going to do position relative we're going to do Z index one margin left minus 120 pixels margin top probably just 10 pixels cool we'll give that a save and now what we do is because we already have it for Auto Import so it'll find this and then we just need to import Cloud one so we'll go to the top of our file and sometimes I like to separate these different elements so these will be our components and then these will be our assets let's import classes and it's already finding this from here which is awesome so that also if you ever want to check if you hold down command or control you can always see that but we know that this is uh mapping to this image that's there locally so if we ever need to go and find it we can just go to that check where it is and then find where assets are so we already saved that we'll give this a save and then we should see this image there but if it's not finding it that means that clouds one is not there so that's because we imported the wrong file so it actually doesn't know what our cloud is which our Cloud one object is so one thing that we can do that'll actually make it a little bit easier is if you do dot dot we can then go to assets and click on that go drop down and it should give us a drop down of what's there but sometimes if we sort of try to write it it'll prompt to find what's there so we want cloud and Thunder and then we should see it there so this is really cool but we see that it's not aligned in the way that we want so what we can do is we can go to elements in the browse and this is I'm actually pressing F12 so that's how you open up the dev tools we'll open up elements and then we take this selector we hover over that and then now we can actually get all of the the styles for this so the Styles component is going to create this kind of dynamically generated you know class name but we can do is we can move this there so can always move it and what's really cool about that is let's say that we give it you know minus 10 something like that so now when we move this it's going to be super Dynamic and it's going to stay so this is a great way to debug your code and your Styles as you're building so we're going to do is we're going to switch that out and then we're going to just close this out and this should stay in place because it'll be all relative here and that's exactly what we're looking for so this is great so we'll give this a save okay this is save and then we'll give this a refresh and we see that it worked so that's great awesome so next up we're going to do the same thing here but we're actually going to just go back to our code generator element we're going to just copy this we're going to just create another one but this is going to have a different set of styles we're going to call this position fixed we're going to do same thing Z index one we're going to actually move this all the way to the right so this is now going to be locked to the right and then bottom is going to be -10 so give that a save and then we're going to do the same thing here but we're going to do clouds two and we're going to basically copy the same thing here do clouds too and we're gonna do cloudy weather and that's the second image that's there we'll give that a save and we'll see where the saved it so I see that this added this here but something that we can do is if we refresh we open this up because this is that new image that we got so what I want to do is I want to change instead of this we're going to then see that this should be at the right and this should be at the bottom bottom so if that does not do anything for you then this means that we need to change this to be that different component that we just created so we'll do two we'll import that we'll save that and now we have that there which is great and we can actually maybe make this a little bit more to the right I see that that could be just a little bit more there so that's looking good but let's just just see if that actually is the case okay I like that so that stays right there and it's in that fixed position which is there so I like that so we're gonna do minus 120 and then we'll just check to see if that actually worked and it did that's great okay and then this stays at the left and you'll see that that's still it's it's all kind of adjusting there okay perfect so this seems really cool and these are ways where you can work on the Styles and then also use that F12 elements and then selector to then find Styles and then edit them in your browser and then move them back to vs code so you have them uh as you work on your components all right so the next part that we're going to be doing is we're going to be generating a footer so that as quotes are generated our server our serverless server in the cloud is going to be adding plus one to the number of quotes that are generated in a dynamodb uh table object and then we'll be able to display that in the front end so what we're going to do is we are going to create in our index.ts x file we're going to create a footer container which will be a styled component we're then going to create this div component here so that it can go inside we're then going to have quotes generated with a number that will be dynamically generated we're going to call a number of quotes which is a value that we're going to store in use state with the react you state hook we're then going to add our breakpoint and then we're going to do is we're going to say developed with we're going to pass in a heart by and I'm going to do footer link and this footer link is going to include some data so I'm going to include an href to my YouTube channel so when we and this is going to be a style component of a link component from next but what we're going to do is you could obviously include you know maybe your own website or maybe your own YouTube channel if you have one uh or in your Instagram or LinkedIn or something like that but we're gonna have a call to action and we want to make this link open up in another browser tab so we're going to do is we're going to say Target we're going to then include underscore blank we're then going to save Rel and then we're going to have two values here for security so no opener and no refer and this helps with Legacy browsers in terms of some web vulnerabilities just to make sure that when you open up this new tag that you can't have basically like no elements this will actually like if you actually open this up or you even ask chat GPT it'll give you more data about it but basically this is just if you're opening up in another tab from your own website from your own origin to something else you just want to make sure you have those values a part of the link script and then we need to have some value in here so I'm going to include a link to my handle but you could have your own link to your own handle or your own name if you want to have it there and then what we're going to do is we're going to close it out which we do and then we're going to start hammering away on these values I'm going to actually rename this to be footer container and then in our quote generator elements styled components file we're going to do exsc for that styled component snip it we're going to then say footer container this is going to be a div and then we're going to start plugging away on these Styles so we're going to do is we're going to give this a width of 100 view with so it'll span the length of the the width of the screen as it expands and contracts for the height we're going to say that this is 50 pixels tall say text align we're going to say Center so that all the text is in the middle for font family we're going to say that this is source code Pro and then mono space we're then going to say font size is 15 pixels we're going to give this a position of absolute we're going to put this at the bottom and append it there with zero and then color is going to be white for the text and then Z index is going to be 99999 so that it'll be prioritized above any other divs in the screen now to import that we just have to rewrite the last letter press enter to add footer container and then now it's added to our list of imports automatically which is awesome now to get this value here so we're going to do is we're going to be storing this number of quotes value in a hook called use state so the way to use State works is with react you'll have basically a value you'll set that value as like as well as in its array basically but it's an array of a value and then a set value function or caller and then that equals basically you state like that so we're going to do is we're going to say const we're then going to copy that value here and then we're going to say set because it's basically it's going to be this so we set number of quotes we do you state and we use zero but it's going to complain because we don't have the right typing for this value because we're using typescript so we need to make sure that we are typing everything correctly so we're going to do is because this is a number could you use a state call this a number or can be null and have this value here and then that will be there so as we can expand this out so you state number Boolean and then we just need to import you state from react so import react and then use state frog react so then that is how we'll be able to then call this number and we're going to automatically set it to be zero so every time that it loads we're going to hide we'll show you how to hydrate this data with function calls from Dynamo but we don't need to worry about that right now and then for the footer link we're going to do another component style component here let's expand this out do exsc do footer link equals styled link there we go and then what we're going to do is we're going to overwrite it so these are going to be how we override the link so usually the link will be purple if you've ever seen that or blue with an underline but we're going to change it so the color of the text is white but it'll still have that URL underscore and then what we'll do is we'll import Link in that same way so that as we save this and as we save this we'll be able to then check that out and it seems that there's going to be just one call that we are missing here oh I see we just had that spare function there okay cool so I'm going to give this a quick save and then we should be able to see this right here so if I expand this a little bit more for you all so you can see so what we're doing is we're going to do quotes generated and that value is at zero and then it's going to be developed by developed With Love by and then this will open up uh my own YouTube channel but you see how it opens up in another tab that's where we're able to have the blank with the no opener no referrer uh relative values there and then that's how you open that up in the in the URL so what we want to do is I just want to make this instead of being a white heart let's make it a red heart so we go back to the front end and something that we can do is if you want to edit something in line so you don't add a div where it messes up spacing or add break points you can use something called span and what we're going to do is I'm going to create a span called red span I'm going to put that around the heart and I'm going to put that in our quote elements quote generator elements here do exsc we'll do that and then what we'll do is we will call it same thing here so red span will just take away the Arrow brackets we're going to make this style slash span and make this look a little bit bigger and then color will overwrite to be red we'll give that a save we'll then do the same thing backspace and hit enter rewrite and then enter and then we'll press save and then what we'll see here when we go back to the front end is we see that it's red so that's also a way where we're able to change Styles in line and also just speaking of styles being in line so remember when we changed the color of this Styles component the text to be white well if you actually undo that you'll see that it is that purple you know bluish URL color that we would expect for URLs also if you ever want to remove the underline something you could do is text decoration and then go down to none and then that's how you'll be able to you know overwrite certain styles that come with a link that you might expect but I do think that the the white is fine because then that we can keep the color cohesive but I do think that we do need that underline but just showing you that that's another way where you could overwrite the Styles if you ever wanted to Okay cool so that that's pretty good and then let's just look at use State and what that's doing so when we assign this value to be zero so every time that this function really it's a functional component but every time that this page or this functional component page loads there's going to be a base value that is assigned to this thing so let's say that we want to make it 200. so every time that this loads it's going to be 200. load it again you'll see that's 200. we ever wanted to make this you know 400 we'll give that a save and now it's 400. we go back to zero we give that a save you refresh and now it's at zero so it makes sense when you are fetching data from a server or from your Cloud environment or from AWS or you know really anything you really want to make sure probably that the value is zero or it's set to basically nothing and then you hydrate it with data so for us and our sake we probably just want this to be its original value as zero and then we'll use something called use effect to hydrate this data with actual an actual number from our database so that's great so now that we've added this footer component we can proceed to the next part which will be a pop-up modal with a button and we'll start configuring out how the front end Works to get that modal pop-up that we want for a component so that we can start clicking and getting our quotes one of my absolute favorite Frameworks to use is material UI they have a lot of these components that you can you know spin up and then you know use however you like but I really like their modal component because it's just so easy you can have this element here and then just have this pop up and you can actually just use this modal you know really as like its own component you don't necessarily need to click a button you could just have it open and then it sort of just fills over this so as something expands you still have the modal over that screen so I really like that and we're going to be using this in our application so what we're going to do is we're going to use npm to install these packages so I'm just on the mui.com material UI such getting started installation and that's where we'll be installing the mui material emotion react and emotion styled elements here so we go back to our code base we will open up another tab so we want to keep that running there we will do clear we're going to then install these into our package.json script and then these will install these packages in our node modules and then we'll be able to start building out our element so there's gonna be quite a lot of code that we are going to build here so let's dig in so when we are configuring our front end what we really want is we want to have this background which we already have gradient background right these images are just going to stay in the background so we'll just start labeling some of this stuff so it'll be background images and then we'll say footer and that stays there so now we want to do is we want to push some stuff uh basically over these images and we're going to build basically quite a lot of things so we're going to have a quote generator modal and then we're going to basically have this as a modal and then we're going to have some stuff over it so we're going to create a component called gradient quote generator modal and that is just going to be the pop-up as we call our script but we don't necessarily need to worry about that right now we're just going to comment that out and we'll worry about that later the next thing that we're going to do is we are going to and I'm actually going to indent these just a little bit easier to see something that we are going to build out next is quote generator modal actually we'll call it modal pop-up just so that it's easy to see and then this is the code generator and that's going to be the button that we call so we're going to need to have a quote generator container we're then going to want to have a quote generator inner container then we're going to want to have a quote generator title and this is going to be daily inspiration generator the title we're then going to have a subtitle so that's going to be quote generator subtitle and then I'm just going to copy this text in under the subtitle here and I'll just do that so I just thought it would be you know a fun you know description of looking for a slash of inspiration generator code card with transformational quote card generated by and then I have again that same footer link component that's the link component style link component that we referenced earlier in the footer I linked to Zen quotes and then I list the Zen quotes API and I sit there so just to give a little bit of a perspective ons and quotes so what they are they are a really easy to use API you can use it for free they also have a you know a paid version if you ever were needing you know like a lot of requests but uh with this is just uh you know just like a a project that we're building out so we don't need to use you know an API key or anything like that so what we're able to do is just use their API their URL to then call the Zen quotes API and then get a random quote back so these are some of the people that you can get quotes from and then you could also you know browse quotes by keyword they just have a lot of built-in functionality and it's really easy to just you know hit this API and which we'll do in a little bit and then actually generate a random quote so pretty cool and we'll show exactly how to do that but yeah major shout out to Zen quotes for providing this free utility for random quotes so that's how we're going to be getting our random quote and I'm just giving you know accreditation twos and quotes for providing this as a service next up we're going to create a button so under subtitle we're going to create a button so we're going to do generate quote button and then we're going to include some button text so we're going to do generate quote button text and that's going to have an on click function but we're just going to make that go to a null function just for now just as a placeholder this is going to say make a quote and then that's the text that's the button that closes it out we got the inner container and then we have that so that's pretty much all that we have here and I'm just going to move these out just a little bit just for spacing's sake and now we can start attacking some of these components so what we're going to do is we're then going to start going to these from the top so there's gonna be quite a lot of styles that we're going to be referencing in this so that's why we are going to have split screen so there's a style that is becoming really popular with a lot of you know like Innovative Tech Cutting Edge tech companies called glassomorphism and I found a really great website that I'm going to show in a second but this is how I'm going to be getting the inspiration to style these different components so if you go to hype4.academy they have this glassomorphism generator for making basically the styles for a div so it's really awesome because what you can do is you can adjust the blurriness so you see sort of this background image gets blurrier can also adjust the transparency so how transparent something is so if you had like no blur and then it's transparent you can kind of see over it or if you want to add the image and then you add blur you can see how it's adjusting those ones and you can also make it a different color so if you want to make it red let's make it blue I want to make it you know like different types of colors of the rainbow you could do that and then you could adjust the blurriness adjust transparency and then you just copy the CSS here and then you could import those directly into your application so we're going to be using those types of styles with a few twists so the first one that we're going to create is the quote generator container so exsc for our style component we do co-generative container and then this is of course going to be a div and then we're going to be copying a whole bunch of these Styles here which I'll just copy to save some time so we have a Min height of 350 this is going to be creating the height and the width we'll then do um basically like a minimum height and a minimum width and then just a height and a width so this is as the screen is expanding or decreasing we're going to be having sort of this minimum bound and then this upper bound to work within and then we're going to have a border of two pixels we're gonna have a border radius to round out the edges and then we're going to be putting this in the middle of the screen so this is in the middle of that background that has the animation of the color switching and then we to actually get this to go exactly in the center we're going to do top 50 left 50 and then we do this transform translate manipulation of minus 50 minus 50 with a position absolute so this is a way that you can Center a div within a div so it's a pretty handy trick and then Z index is going to be above the background and then this is that glassomorphic style so this is a specific uh you know shade of dark Indigo purple and then this box Shadow will sort of add kind of this like glassy outer effect we then have this backdrop filter which is a blur and then a backdrop filter as well which is a blur and then border radius of 10 to round out the edges and then we have a border there so this is that style for the quote generator container we're then going to do as I'm sure you guessed it rewrite that import with enter then we're going to do the next one we're going to do exsc again we'll put this one in there we're going to do div and then we're going to add some more Styles in here so for this one we're going to do top 50 left 50 again that transfer and translate manipulation position absolute with 100 so what we're doing is we have this background we're creating this in the middle of that and then we're going to then have another div in the middle of this and you'll see why we layer it this way but sometimes if you want to have something centered within something that's also centered this is a way that you can have a div within a div over another div and then that's how you can have more of these balanced Styles and ordering so again we import that directly there now for the title I'm going to do exsc again we'll do that for the title for title again it's going to be style of div and we're going to be copying some more Styles here and what we're doing here is we are making the font family this permanent marker font size of 50 text align make the text in the center there's going to be a color for text being white we're going to have this padding of you know 0 20 pixels 0-20 pixels and you'll see why that padding matters and also for the position we're going to have that relative so it's going to be you know centered at the top and then if the screen has a max width of 60 pixels then the font size is going to decrease by 20 pixels so it's going to go from 50 to 30. and that's really important because when you have screens changing you also have to think about how readable is the text and you might need to make something smaller you might need to make something you know go on a second line so these are just considerations and what this is called is a media query so send it in some media query so what's awesome about Stealth components is that you can have these media queries wrapped into these different components and then you could have this all Impact everything that's within this div which is awesome so now we will import this which is great now we just need to work on the subtitle so we'll do exsc again we'll get subtitle and we're going to add some more Styles here this of course is going to be another div which is there and then text color is going to be white font family caveat font size is 35 position is relative width is 100 text align Center padding similar Styles except now this is going to be a little bit smaller so we're sort of making this as subtitle text which has a different font and is also smaller and then we will import this we will import that like that and then we're going to work on this quote button so e x s c again redo this we'll make another div and I'm sure you probably guessed it that we could be just using a button but I do like styling these in a custom way just because it gives you a little bit more granularity of what you're doing with the Styles and it gives you a little bit more control so there's quite a lot of styles going on to this button but at a high level we're going to be having some glossomorphic effects here which you know you might recognize from the top before but we're going to give the button 100 pixels as the height 300 pixels as the width is going to be a border around them there's gonna be a border radius margin top is 20 pixels so that makes it a little bit um down from the top there's gonna be a position relative there's a transition so this is what we're going to be doing so as there's a hover effect we want to be using this 0.2 second ease in ease out effect when you hover over it or basically when you want to click on it we're going to have this pointer now so we're going to change from you know just like the normal clicker to a pointer um it's going to be top 20 pixels and then the margin is auto transform origin is Center so this is how we're going to be centering this inside of the div and then we give this this glossomorphic effect so that's these Styles here so you know pretty similar to the other ones that were above and then the on Hover so this is how you do on Hover effects and styled component so when you do that so that you apply this class and then you have a filter there's a transition there's a transform so it's going to get a little bit bigger as you hover over it the brightness is going to increase by three times and there's also this will just stay in the center so we will import this and then we just need to do the text and that should round out the last of our Imports for style components so again exsc we're gonna do button text so this is going to be the text that's inside of the button that's centered so we're going to do div once more and then we're going to give this some Styles so the text color is going to be white font family is going to be caveat uh font size is going to be 35 pixels we're doing that left top transform Translate uh you know star manipulation to make it in the center with a position absolute the width is going to be 100 and that's going to be that the text div is 100 of the button that it's within and then this hexa line is centered so the text is going to be in the center so we'll import that and it's probably not going to like the fact that we have on click but that's okay for now we'll see if typescript complains about it too much but hopefully should be able to be okay so what I'm going to do is I'm going to switch back to our previous window here and let's see what we got so this is starting to look like a real application so what I really like about this glossomorphic effect is that as we make this smaller this becomes much more Dynamic and this is really clean I think if you are building you know portfolio projects or anything for work being able to show this level of detail to your build I think is hands down game changing because it also shows that you're really thinking about as the user is on different devices especially considering how mobile we all are being able to have that consideration around styles to say hey we have this desktop application but then we can also make it mobile these are skills that will pay dividends down the road for you and of course we see that on Hover effect that looks really clean and as we hover over the colors changing there's that little bit of glow and of course we see that and if we open up Zen quotes we see how it opens up in another tab which is exactly what we wanted to do with that Target blank and this is looking pretty cool so far so again we got that glossomorphic effect where it's blurring out the images in the corner and as these move you see that glossomorphic effect moving over it so this is looking like an application and I'm really happy with what we have so far and as we continue the rest of this build once we click make a quote we're going to then have a modal pop-up and that's going to manage some State and then that's where we're going to be interfacing with the cloud and then getting an image back so you'll see how we'll do that in the next part of the build so as we start working on our full stack project I do think that it's helpful to do a lot of deconstructionism when it comes to building out parts or components so a methodology that I've found really helpful is using an online IDE like code sandbox to build out scripts build out components build out certain elements before we Institute that or Implement that into our application so when we are clicking this button obviously this button isn't linked to any functions right now but when we call this we're going to be calling our API to run a Lambda script to do something and then send that back to our front end so we don't have this script configured yet but it would make sense for us to be thinking about this before we start implementing it because when we are waiting to get data back from Lambda we're going to need to have some sort of use state for based are we fetching data is something loading did something complete and did the function finish running what we called it to do so this is where it makes sense for us to sort of Park our front end and then move to working on the back end and when we think about deconstructionism what we can do is that we can create a code sandbox IDE it's an online editor but it allows us to write node.js we could you know create a Docker instance we could use Dino view react uh they have rust they have python they have Astro T3 app they have next Js they have almost anything nuxed they have literally everything you could ever do they have a node HTTP server view three svelte Gatsby like they have remix they have literally everything so what we want to do is we want to create what will become our Lambda server but we want to test it out in node.js before we actually start implementing it so when we do create IDE we then start this up and what we'll do is we'll title this so I'm going to name this to inspirational quote generator right there we'll save that and that automatically Auto saves did that there and then we'll just do a quick refresh just to make sure that it's saving correctly which it seems like it is so now when you spin up your code sandbox IDE your node.js environment for the first time you can run your commands with just refreshing and it'll rerun the server let's say that we want to do hello code sandbox 2. we'll say that too we'll see hey friends welcome to this build we'll give that a save we'll do refresh and now we see hey friends welcome to this build so that means that it's working which is great so now we're going to do is we are going to start getting our hands dirty with building this script so just for some housekeeping purposes we are going to remove this and now it won't do anything because we're not calling it to do anything so what we're going to do is and I do think that this is a helpful exercise before you ever write any code for your script let's really think about what we actually need the script to do so we're going to need the script to do a couple of things but for starters we want to fetch our random quote for number two we want to basically turn those those quotes or that fetched quote into a series of lines which we're going to call this quote text so we're going to turn text of quote into lines which is going to be the quote text received and I'm going to make this just a little bit bigger the text just so that you all can see it there cool now for number three we want to basically create a line for our author so we have the text which is the uh I'm just going to make this a little bit bigger yet so we will have so we have the lines for our quote so the quote could be maybe one line two lines three lines or four lines and then the author is going to be aligned after that so you want to turn text of author into a line and that's the quote author then the fourth thing that we're going to need to do is add a quote image of some sort so add a quote image then for number five we want to turn all of these elements into a renderable SVG so we turn these elements into an SVG format and then to finish off the rest of the script we want to basically take that SVG SVG and then turn that into an image which we're going to configure an image as PNG here but we're going to need to have it as a base 64. string in Lambda which we'll worry about later you don't need to worry about that right now but what that means is that instead of it being an actual file it's going to be a series of characters that will resemble an image file which we'll get to in a little bit so that seems to be on track for what we're looking for and sometimes I find it helpful also just to save this in the readme file so if you want to edit your readme file you can just go in here we'll switch this out oh I think that's uh doing that again so I'll do inspirational quote generator app and then we'll have these as our readme element and then we'll just give that a save we'll switch back to reading so just so in case we ever need to reference this back we have the saved in another another spot okay so now that we have our steps here we're going to now start configuring our server so there's going to be a specific package that we're going to need to create and I'm going to create a terminal and we're going to make this a little bit bigger so we're going to need to install a couple of things so sharp is going to be a library that we're going to need for the image processing so we'll do npm I sharp and then we'll press enter and now we should see in package.json which is the sharp installed as a dependency which is great means that it installed correctly and then we're going to need to install a specific version of node fetch which is specifically version two so we'll do ntmi node fetch at 2.6.2 and this is very similar to what Lambda is going to need for this specific way to fetch data outside of the server using node.js so that is a great way for us to start working and you'll see here that now node fetches at 2.6.9 and that means that we have that working when we're making these images we are going to want to pull a random set of colors for the background those are going to be just a random background graphic so what we're going to do is we're going to create so we're going to right click we'll do nude directory then we'll call this backgrounds and then we're going to drag and drop these that are from my computer here and we have these different colors that we drop into here so these are 750 by 500 pixels resolution is 72 by 72 but where I got these was from this awesome website called uigradians.com and you get a ton of really great different gradients here and um you can just like pull in different ones and you can also see you know kind of like how they're made how they work and they even have ones that are like three colors too which are pretty cool and even like that it's pretty sick so what I did was I just found four that I really liked and then those became the backgrounds that I will call in the script so you can either use those or pull from your own but just make sure that it's that 750 by 500 pixel background size so then when we are working on our script we're also going to create another directory and we're just going to call this finals and that's just going to be where we store the images that get generated and those are going to be all the folders that we need to create so what we're going to do just to get this kicked off is we're going to call a few things so we're going to first of all call Sharp then we're going to call the zenquist API and then we're going to call fetch so that we can use node fetch to then color API so we're going to do these import statements at the top now actually I'll just do it at the top just because it'll be easier to see so cut sharp equals require and we'll call Sharp const API URL from Zen quotes So https https present quotes dot IO API random and that's the API endpoint to call Zen quotes's random API generator and then const fetch equals require node fetch all right so now we're going to create an async function called get random quote we're going to call this API URL here so API URL and then we'll start to create our function so we're going to create two variables so first one is going to say like what is and that's going to say let quote text be this variable and then this other one is going to be author name here and then that's going to be let quote author so it's gonna be the two variables that will change as we get data back so we want to validate response to the API in this step and we're going to do const response equals await fetch API URL which we'll just copy from there to do our quote data equals away response dot Json so we're going to take this response we're going to turn it into Json data and then put that into a quote data variable and then we'll do console.log quote data to log that out and we can actually try to see if we can call this right now so what we actually are going to change is this so I'm just going to call this API URL input just to differentiate API URL from there and there so then we're going to call get random quote with that API and then we'll see if we can restart this so as you can see we are able to get this data back which is really cool so I want to open up screen brush and just show you how this is working because this is also really helpful to think about when you call apis what is actually happening so when we have this data so this is going to be the quote data so that's quote text right there then the quote author is going to be right here and it actually creates this block quote you know kind of HTML block for you but we're not actually going to use that we're going to take these variables and use them in our own way but what we're doing is that you know we're calling this index.js file and then we're going to use fetch to use that API URL input so that's that you know http Zen quotes you know random API and that's when we're fetching the data out of that endpoint and that's going to they have their own function that's going to generate from their list of quote a random one for us to use and then we take basically that response we turn it into this Json structure which you see you know in this so that's that Json and that's where we'd be able to take you know dot Q or dot a and then use those in our in our graphic which you'll see and then the this is a specific input so this is just you know run this function with this specific input so then we take this which is the API URL and this is that API endpoint so it takes given this API input endpoint input um API endpoint input there we go we're able to then fetch that and then create a response and then map that into some Json that then we can use in our application we can actually run this a bunch of times and we'll get different quotes so that was one by Aristotle this is another one another one another one here we'll do one more so what's really cool about this is that it's running this random API generator and that's how we're able to validate that our get random quote function is actually working which is great so now we're going to keep plugging along with actually some of the image generation components as well but now that we have this function setup we're able to call that API endpoint and it's working now we're going to start working on some of the construction of the image and also validating the response out of the API so what we're going to do is we're going to then update these quote text and quote author variables and we're going to say quote text equals quote data that first object dot Q so that's going to be in the first item right this first object get the Q variable and then also quote author equals and we're going to do that same thing except make that a and we can also try logging these variables just to make sure that they are in fact working because that'll be important for us to see so if we do this we do refresh so I see that so I see a quote which is that and then the author is that we'll do another one so yeah so it seems like this is what we're doing so this is going to be really easy to to see where of course we have this Json data structure but now we have you know something that kind of looks almost like a graphic right you have your quote and then you have your author so this all works so we can get rid of those console log statements and we can proceed here so now we're going to construct our image so this is going to be the image Construction and these are going to be the quote elements and let us just make sure these these elements are a little bit better indented here okay cool so now under the image construction we're going to do a variable for width it's going to be seven feet I'm gonna make that a little bit smaller than the graphic and then you do const text equals quote text so the text for the graphic is going to be that same variable there and then we're going to do const words equals split we're going to add a space there and then we're going to be creating these line breaks so something that I found that is really important for this quote was that when I was generating these initially this long string oh this is going to error out um I'm actually going to not call anything so and then it should uh yeah it might just have an error but that's because I don't have anything there so what um what I originally was having was when I had that string running or actually we can comment this out uh comment that out but keep that running see if that runs yeah so where was this yep so in the quote so you have these lists of words so it would basically take the string and it would stretch it across the length of the graphic off of the um the left and the right so what we need to do is we need to be able to map a list of these words um basically in lines and then go to the next line and then map a few words and then go to the next line so that's where we're going to be adding some variables here so when we do const line break equals four and then let new text we're going to be constructing this sort of string manipulation so that as it goes to forwards then it breaks then it goes to forwards and then it breaks goes forwards and it breaks so that's going to be a way where we take basically this variable which we'll soon call T span element and then we're going to do basically this for loop on the number of words and the length of that and then increment over it and then create these line breaks as we go along so this was sort of a clever way in which I was able to you know put the text in the middle of the graphic create these lines and then iterate over that so that it's never more than four words on each line and then it'll you know cut out after a certain time so you'll see how we'll do that with this upcoming for loop with basically an if this then run this otherwise run this type logic so we're going to Define some t-span elements with four words each so what we'll do is we'll do let T span elements equal an empty string then we'll do four and we'll do let as I equals zero I is less than words dot length and then as I increments upwards we're then going to say the new text plus equal words I so as I is incrementing we'll add a space and then if we'll do I plus one divisible by line break line break equals equals zero we'll then make t-span element with t span elements plus equal and then we'll do a back Tick T span x equals and then this is where we're going to be adjusting the width here so I'm actually going to like make this like much smaller just because like we don't really need this right now I just wanna prioritize this for the screen so t-span and X is going to equal this variable of width divided by 2 d y equals 1.2 em and then we'll add the new text in there and then we'll cut out the t-span element there and then backticks is there and then semicolon is there so then after that this new text is going to equal this empty string there and then we pass that back and then we say if new text does not equal it's empty string then t-span elements plus equals t-span and we're going to basically call the same thing again so I'm just going to copy that down here and it's going to be t-span x equals width divided by two Dy 1.2 em new text and then t-span there so that's going to be that construction and then we're going to console log the t-span elements just to see if we're getting this correct so let's just give this a save and then let's see how this works so I'm seeing that there's this t-span a person without a then that ends and the new one sense of humor is then like a wagon without Spring stilted by every Pebble in the road so that's great so this seems like this is all of the quote text elements that are all mapped in these t-span implements and then it's going to be every four word so remembering that you are a going to die is the best way I this is all basically four letter words trap of thinking you have something to lose and then confidence comes from Crossing thresholds and this is just one so this is really important because when you have a list of four you then need to make sure that any remaining words still go on that new line so that's when you're able to see in this for Loop here we want to make sure that as there's no more basically line breaks as in there's no more words that map to B4 we just add that new element basically the new text and then we add our uh basically these C-SPAN elements but it's only going to include one last one which is all the words that are remaining so that works out great so this is working which is awesome and then we're going to start working on the SVG image next up we're going to be creating the construction of the SVG so right after console logging those t-spin elements we are going to work on I'm going to just make sure that this is all habbed correctly so the construct PT so we'll do cons SVG image equals it will do backticks here so this is how we will do the mapping around the image so this is going to be SVG with and I'm actually going to copy some of this stuff just to make it a little bit easier to see mapped out so we're going to have this SVG with this width that's the same width that we mentioned up here with a height which we have up there and then we're going to copy these styles that we created here so the way that this is going to work is that we have basically when you have an SVG you can include Styles inside of this image kind of like a div and it's going to have these different elements so it's going to have a title which is going to have a fill it'll have a font size and it'll be bold we have this author Style we then have a footer Style and the author is going to be this size it's going to be bold as well with some padding and then the footer which is where we give an accreditation then we say it's you know it's by us and then quotes so that's going to have a different font size it's also bold different fill and it's going to be in the middle and that's how we'll be mapping out all the styles so next we're going to do is we're going to now have the elements of the actual image so right after Style and I'm going to just move this over a little bit there so then we're gonna have a circle SVG so the circle SVG is going to have a quote in there so this is the fill and you'll see here that this is where we'll we'll have a circle at the top of the screen then we're going to have some text for the actual quote so it's going to look like this but it'll have text and I'm going to just map over this just so that you can see it so there's going to be the circle and the circle has this positioning we then have this text which I will just span over so you can see so the text is going to be in the middle and it's going to be a quote like a single quote and it's going to have this font size of now this is going to be pretty big and it's going to have fun family and Veranda or verdana and then the fill is white so it's going to be this quote over this image and then that's how that's going to be working next up we're going to be working on the t-span elements being mapped along with the quote author so that's going to be this separate section here which we will put here and what we're going to do is I will just span to show you so we have this this G element and this is also um going to be some text here so the text is coming from there and what we do is we have this rectangle we have a width and that's where we're going to be putting the text inside of this rectangle and then the text ID is a little you know the last line of code so basically we'll have this width and then the last line of quote equals that all the texts in the middle and then the t-span elements go in there and then the quote author is going to go right after that then we're going to add a little bit more text here which you'll see in a second so right after this G group we're going to add a little bit more text here I'm just going to make the formatting of this just a little bit easier see so then the text for the footer is going to be that footer Styles so there's going to be some text it's going to be the width with the Y can actually move this up just to make it a little bit easier to see so in terms of this text we have the width we have the height and footer Styles is there and then we could say developed by and you could put your you know social media handle or your name and then we're just giving this accreditation to send quotes because they're providing this API for free so they say to include that in the graphic which we're doing so we can stay in compliance with them so then we're going to be closing out this SVG so well then say SVG is closed that is the backtick and the colon so that's quite a lot just for that SVG but now we're going to have an image with a circle with a quote we're going to have those C-SPAN elements the quote spanning across the screen down we'll have the quote author and then we'll have this footer with our name and the Zen quotes API credit two so now we want to do is we want to add those backgrounds in a random way so what we're going to do is we're going to say const or actually just say that add background images for the SVG creation so now when we do cons background images equals there's going to be an array and we're going to copy basically all of the paths in our backgrounds folder so that's what these are so these are going to be the different files and those we just have four of them so you'll see here that that's where they're coming from and that all looks good then we're going to choose a random image here I'm just going to make this a little bit there if so now when we want to select a random one we'll do const random index so pulling a random index from this list we're going to use the math dot floor and then we'll do math dot random number times background images dot length and this is an easy way to inject some Randomness into our function right here and then we'll do const selected background image equals background images random index there we go so now the selected background image is going to be one that we pick out of the background images with this random index so we get basically this random number for all these different backgrounds and then we're going to then make that the index that we select for our background images and then that will be the selected background so if you have more uh you know more backgrounds that you include here then this number will have more options to choose more randomly so you'll probably get you know more selections obviously from choosing that so then we're going to do some composition so we're going to composite this image together so that's gonna be the next step we'll do const time stamp equals new date and this is a way that we can get the actual date timestamp local date string which is that method and then we'll do replace and then there's this special set of characters that help to just make it all you know basically like checking for these characters and then if that's there then just insert that which is an empty string which you'll see why that's relevant in a little bit I'm going to do const SVG buffer equals and then we're going to use buffer as a image transformation Library this will be from SVG image and that SVG image is coming from this SVG that we're creating up there then we'll do const image equals await and then we're going to use that short package if you remember from earlier we imported that that's from there so now we're actually going to use sharp to generate this image so we'll do Sharp selected background image and then we're going to do composite and then there is this input which is SVG buffer which was that variable that we just called on line 97 there is a top of zero there is a left of zero and we add some commas then we're going to do this command called to file we're going to say finals I'm going to say quote card quote card underscore dollar sign timestamp PNG and then we have closing bracket and then we call our API so we're going to see if hopefully this all runs and works correctly so let's see if that actually does happen so we'll do running and seems like we got something so let's see if this worked all right so let me just close this out for a second and so you'll see here that this is um this is basically trying to create this time stamp string and this is five uh five five twenty twenty three so this is May 5th 2023 so it's just including the the date um so this is a quote by Abraham Lincoln and that was just generated randomly so then let us try to do this again so we'll try to run it one more time and I think we probably want to have a different time stamp I do Wonder though how we can make this just a little bit differently so I think that's just because it's date so let's just try to change it to local string so two local string replace and we'll save that and then we'll try to run that again yeah there we go so now this is doing it also with time so this is the date and then also uh timestamp as well so now we have this different image and this is you know now Thomas Edison's this is a different quote we'll try to run this again and we'll get a different one we'll run this again we'll get a different one we'll run this again we'll get a different one we'll run this again and we'll get a different one and this is really cool because now we're able to just make all of these super super super quickly JRR Tolkien we'll keep running here hamster Anderson and this is awesome so this is creating this you know this choosing a random background it's taking this quote it's mapping everything and it's making it all in these graphics and these are all created through node.js so pretty cool and we'll just maybe let's just do one more for good measure cool and we'll leave on a good note with Eleanor Roosevelt so happiness is not a goal it's a byproduct of a life well lived very well said so this is great so we have our script now and this is running this is perfect so now we're gonna do is we are going to go back to our code which is here we are going to 100 save this but it's pretty much already Auto saving anyway and we'll just give a look over our code everything looks great and yeah now we're going to be able to take this and then put this on AWS Lambda with a little bit of refactoring here and there and then we'll be able to work with our front end to call our Lambda through appsync and then generate this image in a serverless Lambda server and then get that back in the front end but instead of it being an image we're going to do something called a basic C4 encoded string which you'll see in a little bit but that's going to be a different way in which we actually get the image generated not as a file but as a string so it's going to be like a a ton of characters and that's actually how we will be able to map our our image to a string and then decode that in the front end now that we have our script to run and create our image something that we can now do is go back to the front end so in our application we're going to want to set up our Cloud environment and really set up all the services that we're going to be using and leveraging in AWS to then run that script and we're going to have a series of front-end listeners uh basically using our API endpoint to then listen for when we're generating the quote send a response to get the quote quote card and then get that response back and then show that in the front end so what we're going to do is we're going to check out the AWS amplify documentation so the amplify CLI is a very powerful CLI for deploying AWS resources for you know really a full stack software project and if you don't already have this installed I'm just assuming here but you do npm install you know G flag at AWS amplify.tli you can also use a curl command which looks like this and then also if you are on Windows it would look something like this and then you'd be able to install it on any of your devices but since we have already done this uh we already have the CLI installed we don't have to do the step so the next step if you haven't already done this is you should configure and amplify IAM user or really just an IM user for your amplify CLI so that amplify service can build the services that you want in your cloudformation stack and update your stack for you so when you add an API when you add a Lambda when you add storage when you add a database model you want to be able to have an IM user that can update or modify or delete resources in the cloud formation stack so I've already created an amplify I am user with the administer access amplify specifications but if you haven't you use amplify configure you'll it'll then walk you through all these processes but you'll create the name and then you'll set the permissions so they have this administer access amplify policy name which is a managed policy you attach that and then you're going to get a key value pair to then go to security credentials where you can get your access key and then you'll save that to your AWS credentials file locally so when you can retrieve your access Keys that's where you're going to have your access key in your secret access key and that's what will configure access for your application or for the CLI to be able to work with AWS so you'd be entering that in and then you'd be able to have that user and then when you run amplify init or amplify initialize that's where you'll be able to use this AWS profile to then launch your project or launch the cloudformation stack for your project so what we're going to do is we're going to go back here we're going to open up the terminal and I did this with the control and then the tilde button and what we're going to do is we're going to do amplify init and we're going to do that because we haven't already set up amplify in our project yet we are we're just starting out here so let's amplify net and I'll pull this up so it's recommended to run this from the root of your project which we which we are doing here because that's the root of this project and we're going to call this inspo quote gen or should we call that maybe in inspiration quotes yeah we'll call it inspirational quotes So then what's really great about the cli2 is that it already is able to know quite a bit about my project because it's checking out what I have so it knows that the environment is Dev I'm in Visual Studio code so this is actually the default environment but it knows that this is what we're going to want just to start out with um it knows that this is the JavaScript which is the appetite and we're using react which we are and then there's going to be a source directory that it's going to create with this AWS exports file and then these are going to be the builds commands so this all sounds great we'll say yes and then we're going to use this AWS profile as opposed to the access key so I'm going to choose the AWS profile and I'm going to choose the role that I have already set up for my amplify configuration to my AWS account so I'm going to press that and then it's going to start deploying these resources into AWS so it's going to start creating this cloud formation stack and then it's going to start deploying this to the cloud so I'm going to pause the recording now and then I'll restart it when the cloudformation stack is all set up in AWS now that our cloud formation stack has been pushed to AWS we just received uh some new things so let's go through our application and see what AWS and amplify provided for us so one of the first things that we'll see is a new directory in our route which is called amplify if we open this up there is a config with some local AWS info and some project info that's just scoped about the project also the current cloud backend so this is going to be the updates that you make locally and then it's going to compare the current stack local with the AWS stack in the cloud and then when you are adding a resource when you're updating a resource it'll compare the cloud version with your local version and then that is what actually is going to enable the ability for cloudformation to either be updated modified removing a resource adding resource those types of actions and then in the back end that's actually what your application is going to be doing so this is where you have your root cloud formation stack and you know you'd have all of these different you know variables and these different you know roles and that's how you're actually going to be able to deploy your root stack for AWS amplify CLI and then as you add resources you'll maybe see under backend API or auth or storage or other types of resources as well so that's the amplify folder in a nutshell and that's pretty much what we'll do so you won't really have to worry about doing anything in this we're using the CLI and it will be programmatically adding or updating or changing what's in this folder but we won't have to really worry any very much about that one thing that will be of important to note is that when we have SRC we have this AWS exports.js file and that's going to be how AWS sees our resources so this file is just a Json object of key value pairs between a service identifier and what that service is so when you call an API endpoint you need to know what the endpoint you know ID is for auth what's the auth default mode those types of things so when we have our AWS exports file we'll be able to then call that from the root of our application and then we'll be able to access amplify it and then you know appsync and Cognito and your storage and the databases and all these other types of calls to the AWS services so why don't we do that right now so we're going to add basically a few lines of code and we're also going to install some packages so when we are working with our next app so when we want to use JavaScript so they have different libraries and they also have a getting started here so under next.js if we go to prerequisite these are the steps that we have already taken and we've already done if I configure set up this so this is when you set up you know next application which is what we have already done we've already initialized amplify and we've already configured all of these things so we're going to take this import script so this is going to be installing the AWS amplify package that Addis amplify UI react so we're going to take this we're going to copy it I'm going to go back to our Repository we'll save that we'll do npm install address amplify like that we'll wait for that to install once the amplify packages are installed in our application we're then going to go back to the app .tsx files so this lives under pages there's this underscore app.tx TSX file and what we're going to be doing is we're going to be adding a few lines of code so under app props I'm going to add some AWS Imports so we're going to install or import what was just installed so the amplify API off and with SSR context and then AWS exports which is going to be this file that lives in the SRC file so is this was just generated for us so then we're going to then configure this and we actually probably don't need these elements so we can just delete those and then we're going to be able to configure amplify to then serve the whole application so this is really great because we'll be able to call our services that we add to the stack and you know have API and call IAM and all those those good things that we're going to need for our application so give this a save and the app will probably um reconfigure we actually check to make sure that it's not erroring give this a quick refresh and there's no errors so that's great that means that we are good so far so now we're going to do is we are going to work on some of the steps for building out our Cloud infrastructure so we've configured this locally now let's check out what's happening in AWS so you can go to the amplify service if you search for amplify in the search bar I have this as one of my pinned services but you'll need to go to the amplify service in the console in the Management console on the web and then you should see your app right here so I'm going to click on this and it's immediately going to pull up a bunch of data about our stack which is really great because when we start adding hosting we'll be able to configure the CI CD pipeline here and then we'll also see the back end resources that were deployed in our stack and we can see that this was deployed a little while ago so there isn't any resources associated with it yet other than just the amplify project that was configured for it and then we also have some general and some amplify Studio settings if we want to enable those we're not going to get into that right now but we could if we wanted to so now what we want to do is we want to add an API to our application so we'll switch back to our application and we will start adding the schema and API and the Lambda function for that as well so to add our API what we're going to do is we're going to open up our tab we'll just press clear or what we can do is since we just configured our application we actually have the suggestion of amplify add API so when you add services using the amplify framework it's literally as easy as amplify adds something so we do amplify add API and I'm going to but I'm actually going to clear this so I can make it a little bit bigger actually might be too big that should be big enough okay so we'll do amplify add API and then we're going to choose graphql and for authorization modes uh we're gonna actually need to configure certain aspects of the flow so we're actually going to enter here and we want iam and configure additional auth types uh we can say yes so it might be good to also configure an API key in case we you know end up needing that if we wanted to do something in appsync uh there's different you know options but you could also you know utilize Cognito as a user pool also open ID connect if you wanted to connect to a third-party provider and then also Lambda if you wanted to do a Lambda authorizer or Lambda authenticated provider so we're just going to click API key and a description so um API key for inspirational quote generator and we'll just use the default which is seven for days API key should expire and that looks about right so we're going to press continue and when you are configuring a schema this is um it'll give you a couple different options that you can pick from but I do think that since we're going to be configuring our own custom schema anyway it makes sense to just say single object with Fields but this is also sometimes helpful if you want to see other types of configurations but we'll do single object with this and then you want to edit your schema now yes but we'll see that this is already compiled correctly so it'll already Auto open up into our window here in vs code so this is great and right away we already see that we can configure some scalar types and then we'll be able to add scalar types to our scalar values which is right here and then we'll be ready to rock so first of all we can just cancel out this input amplify because we don't need it this is configuring an auth rule of global access for everything so we want to turn that off and make sure that if we go into production that this isn't on and I do also just want to unpack what the iam was when we have I am so something that is going to be important is for us to add authentication so when we are using IAM enabling public access to our API endpoint and we're going to need to allow uh basically access to use this API because we're going to give it an auth directive so we're going to configure some schema and then we'll add the auth directives on top of that so when we go to the backend folder and then in schema we are going to configure a couple of things so the first thing that we're going to create is a query so we're going to actually delete all of this and we're going to start from the top so there's a few things that we need so we need a query we need a way to speak to Lambda we need some sort of public data and for this query we're going to need a Lambda function so we know that we need these elements in our database so what are we going to do so we're going to do type query we're then going to give this basically a name so we're going to say generate a quote and then that's going to have an input of AWS Json and the input is a string type and we're going to have an auth directive with rules and this is going to allow Public Access with a provider of IEM and then that's it for the auth directives and then we're going to call a Lambda function so its name is going to be inspo quote in Spoke quote Lambda and then we're going to attach the Cloud Branch name to that so that we're going to be able to append Dev so it's going to be inspo quote Lambda hyphen Dev and then that's going to allow us to work from many different Cloud backends as we continue moving along and if you ever wanted to have you know like a test Cloud environment or a production Cloud environment this function would still be able to be called but through those different branches so it's a really great way to allow accessibility across your code base and also call functions you know at different stages of your Cloud build the next thing that we're going to configure is the public data so we need a public data object to be able to see how many quotes are being generated every time that you know someone runs a quote we want to be able to track how many quotes were generated for the entire application so I'm going to say type quote app test we're going to do at modal and this is going to configure a dynamodb table for this type and then we do off we'll say rules and we'll give it some auth rules we're going to say that we're going to allow Public Access with a provider of IM with the operations to read without anything else so we just want people to be able to read this value the value of this database point but we don't want them to be able to you know update or delete or create new objects we're just going to create one ourselves so this is going to have an ID ID and this is going to be the partition key slash primary key we do query name that's going to be a string and we're going to have quotes generated and that's going to be an integer we're then going to have a created at string and also an updated at string and the bang Operator just means that it's a mandatory field and something that we're going to do is on this query name we're going to enable a global secondary index or GSI and what that means is that usually when you have a database you could just find the identifier of that item in the database and then you'd be able to pull that but one of the really great benefits of dynamodb with nosql is that we're able to configure secondary indexes to query our data more effectively so if you wanted to query by a unique name in another field such as quotes generated or query name you'd be able to configure that so what we'll do is we'll say index we'll then say name and we're going to give it quote query name and then query field quote query name so this will allow us to find this object based upon just querying for quote query name so that's great and can actually just remove core app and we'll just say core app data cool and we'll just name that to be consistent so that should be pretty good in terms of this now something that we know we're going to need is auth rules so we're going to temporarily just hide that and then we're also temporarily going to hide this because we have not set up any sort of authentication yet so we're going to save this now what we're going to do is we're going to do amplify add off so this is how we're going to configure authentication for our application so with the default configuration we'll press enter so as we are setting this up we are going to select a username for how users will sign in and you want to configure advanced settings we're going to say yes so the only required option that we want to really focus on just right now is for email you could configure more options if you wanted to but we're not going to focus on that and we're going to not worry about any of these right now but what we will do is we'll do amplify update off and then we're going to walk through all the auth configurations and how do you want users to sign up uh we want to use user sign up signing connected with IAM controls there's really only you know two options so this is the one that we're going to select and this is the major one that we want to focus on do you want to allow unauthenticated logins provide scope information so you can control via AWS Im so this is very very important and this is actually referenced in the documentation so I will pull that up in one second so in the Authentication modules I'm going to focus on this so this is under the authorization modes for a graphql API with appsync so when we are using AWS IEM to access a public API or the access public endpoint we need to make sure that unauthenticated logins are enabled and this is where we're doing that update auth command to then walk through all the auth configurations so this is really important because this allows IAM to then do a handshake with the API and do basically public authentication if required so that's a really important aspect of the authentication configuration that we need so we're going to say yes for that and you do want to enable third-party authentication providers in your identity pool we can say no because we're not going to configure anything like Google or you know sign in with Facebook or those other things and you want to add a user pool group uh we can say no to this and do you need an admin queries API you can say no multi-factor authentication we can say that that's off but this is a great option if you wanted to enable this for users in your application and user based forget my password um yeah we can just keep that as enabled as the default and then the email verification subject we will just keep that basically as the default so enter enter and then we'll do enter and then default is for 30 days and you want to specify user attributes because this the default is no and you want to enable any of the following capabilities I will just press enter and you know what to use and oauth flow we could say notes we're not using anything with oauth and you want to configure Lambda triggers for cognito say no so now if we do amplify status this is a great feature so we can see all the aspects of our cloud formation stack and waiting so these are create option operations for a new API and a new authentication with Cognito setup so this is great now what's left is creating this amplify add function to then create the Lambda function and that is how we're going to be running the function to generate a quote so this is how this is going to happen serverlessly now to add this Lambda function that we are going to be calling in our query we can easily add a Lambda function to our project with amplify add function and we are going to configure Lambda function you can also deploy Lambda layers but we're just going to deploy a Lambda function here and we're going to give it a name so we're going to call it inspo quote Lambda and this is going to be a node.js environment but you could also configure it with net go Java or python and we can configure a whole bunch of different options such as appsync graphical API we can do crowd function for Dynamo we could just have a graphql Lambda authorizer Lambda Trigger or serverless Express function that's also configured through API Gateway but we are just going to use the hello world template and do you want to configure advanced settings we are going to just say no for now and you want to edit the local Lambda function now we'll say yes and then we'll press enter all right so now if we open up our stack do amplify status of what we are going to be pushing to the cloud so right now we have an API we have auth and we have function so what we want to be able to do is run these to the cloud and then we can start to configure some of the fancy stuff so right now we're going to be able to create a integration between our API and our Lambda function and then we're what we're going to do is we're going to then create a relationship between that Lambda function and the dynamodu table that gets created because every time that this function runs successfully we want to configure this quote app data a specific object in this data table we're going to want to increment the quote generated by plus one so that's where we're going to configure resource access so that Lambda can speak to this dynamodb table but these resources need to be created and then live in AWS before we can start dynamically calling these programmatically so what we're going to do is we are going to run amplify push and that is what is going to take these create operations and then push this right to the cloud so it's going to ask are you sure you want to continue we're going to say yes to deploy to our current environment Dev and you want to generate code for your newly created graphical API we're going to say yes and what we want to do is we are going to choose typescript we're going to enter the file name pattern which we can just use as the default and then you want to generate all possible graph cooperations queries mutation subscriptions this is probably the single best feature of appsync like hands down once you see this you are never going to want to configure your graphical schemas manually ever again I guarantee you so get ready for that so we're going to say yes and maximum statement death uh we don't really have to worry about that because our data isn't deeply nested so we can just say to for now and enter the file name for the generated code that's just going to be under the source folder api.ts and that's fine so let's just press enter and now it is going to start deploying all these resources to the cloud using our cloud formation stack that we have generated so you'll see that there is a update in progress around the Lambda which is our function there is going to be the auth resource that we created and it's going to be deploying again that API that auth and that function so those are sort of those three different resources that we have configured for our AWS application so we'll wait for these to create and I'll pick up the recording When the stack is finished creating these resources and updating to AWS so as soon as the cloud formation stack completes you'll see this check mark and then it'll say code successfully was generated and saved to file SRC api.ts so if we open this up we'll see that we now have this API file with data that maps to our graphql schema so that's great and we'll also see this graphql endpoint and also this API key so this is this endpoint that we'll be able to use and then this would be an API key that's generated by AWS for us to use our API and we'll also see that this graphql Transformer was generated and to actually show you one of the best aspects of using graphql with appsync is that in the source folder you'll see that there is now this graphql folder directory and then we'll see that there's these different TS files so we go to mutations and what's awesome is that this was all auto-generated by appsync so we have now this quote app data mutation we have this update quote app data mutation and all of these are scoped to the conditions that we set up in our API so the same thing with query so now we have this generate a quote we have this list quote app data we have quotes query name which was that Global secondary index that we configured and you have all this data which is really great and then also for subscriptions if we wanted to have websockets we could have oncreate quote app data as a subscription so that's where all of these different elements were created and this is all by appsync and on the clouds that will be able to actually have these queries and mutations and subscriptions configurable in our front-end application without needing to worry about any sort of back end um configurations it's all done for us which is really really great so now what we're going to do is we are going to open up our schema and we're going to now run amplify status so this is going to give us perspective on what resources are currently generated in the cloud for us so when we run amplify status this gives us a current understanding of the stack and what is deployed and what is local and in changing so we have our API we have our author we have our function and there's no current changes right now and that makes sense because we just committed this to AWS and pushed this to our AWS account so now in our schema we have this query that's attached to this function we have an auth directive we have auth directive and now we want to do is we want to add these auth directives back into our schema we commented them out earlier now we're going to add them so now that we have basically our authentication system set up and we know this because we have auth a part of this we can now add auth directives to our API so that we can prevent certain users from accessing or running certain features and what we want to be able to do is for example allow public access to read data that we'll create we'll create an object in here and then we'll want users to be able to find this specific object and then query from it and same thing with this query to generate a quote we want to be able to allow users to publicly run this Lambda function but using the IAM as a provider so what we're going to do is we're going to uncomment those changes which we've done we're then going to do amplify push and then we're going to say continue we're going to say yes and we'll see here that this is an update to our API but it's not updating anything else it's just updating this API and that's really great about the amplify framework is that and we'll just say yes to all of these because we're going to update our schema so what's really great about amplify working with cloud formation is that you're only going to update the resources in the stack that need to be updated everything else will stay the same and it's managing all of this for you so that you don't have to worry about you know did I need to update this or do I need to configure this it's all going to be doing this for you in the cloud so I'm going to pause the recording and then I'll resume it when the stack finishes updating now that our graphql operations have successfully generated been saved to the source graphical folder and we've also had the of our api.ts file updated we can actually now check this out and see if it did that so for queries we have some more information here and this is all going to show that these were updated so there and then for mutations uh those files were updated there and those were generated uh recently as well so now that we have these configured something that we're going to want to do is now check out our amplify project so when we go back to the Management console and we do a refresh here now we see that we have API we have authentication we have functions so before we didn't have any of these resources created and now we have three of them which is great so if we click on API let me scroll down we now see that we have some data sources associated with our inspirational quotes Dev API endpoint with graphql so what we're going to be creating is this public data object in nosql that we're then going to query from the front end and every time that a quote is generated we're going to be incrementing that value by plus one but it's not going to be us it's going to be Lambda that's doing that so we're going to go to our quote app data table and this is going to dynamically find this table in our amplify so it's amplify project and then dynamodb resource and then when we explore table items we're then going to be able to open this up we're then going to create an item and what we're then going to do is we're going to start configuring our nosql object and there's two options when writing items to dynamodb from the Management console you can put it with basically key value pairs as a form or you can write it as Json personally I think that writing the form is easier so let's use this and then I'll show you how this Json object actually looks like when it's finished so when we want to have our ID so we have the ID as part of the partition key so this is how we're initially able to query objects in a nosql dynamodb table so given this ID would be able to find it so I generated this string now what we're going to do is we'll go back to our schema here so we see here that when we have quote app data so this is going to be the same as quote app data there with series of characters and then the dev Branch so we have a query name we have a quotes generated we have a created at and we have an updated ad so those are going to be the variables that we can have associated with this dynamodb object so this is the same as our schema so we're going to want to have that the same so you could just copy this go back here we're going to do a string do query name now we're just going to match this so this is an integer a real number so quotes generated we'll go back here we're going to do number quotes generated and then created at and updated at are going to both Be Strings so we create another string here created that and one more string and that's going to be updated at sweet so under a query name we're going to call this live so paste in live the courts generated that value is set at zero and that's because we're going to be starting from zero and then created at and updated at so those are going to be AWS date timestamp and if you don't already know how to do this I will help you write a script for that so that we can generate it all right so to make a script that can get us created at and updated at I think this will be a good utility for you to have so if you ever need to generate uh updated out or created at timestamps you'll be able to then configure a script to then run that so anytime that you ever you know need to get those types of values you'd be able to have a script that generates it yourself so we're going to open up another code sandbox Cloud environment this is specifically node.js same as we did before but this is a different one and we're going to call this AWS date time stamp generator cool so now that we have this we're going to remove this save that and we're going to open up a terminal here we're going to clear this out and something we're going to do is we're going to install moment so moment is a package for working with timestamps and time signatures so once we've added that with npm install we'll see that it's now part of our dependencies here now when we run this we're going to import moment so we'll do const moment equals require moment next we will create a variable for our AWS date timestamp so we'll do const AWS date time equals moment so we'll use that moment Library we're going to do UTC because we want universal time and then we're going to do format and this is where we're able to use that moment library to create the date and the exact format format that we want so we'll do y y y for year and we'll do months months then we'll do day day tea for time and then we do our hour minute minute second second and then millisecond and then Z in bracket and then close out that string and then we'll print out our AWS date time stamp right there and we will try to we'll save this and then we will run it so run this cool so we're able to get our value right here so this is where we'd be able to plug that in to our Dynamo and you can also see here if we if we run this again the number is getting bigger each time so it's counting upwards so that's how we know that it's working so you can use this utility for and I'll just make this a little bit bigger so you can see the full script so you can use this utility any time that you want to get an AWS date time stamp and yeah use this for any project that you need so this will be a good script to just have you know in code sandbox and you can run this you know whenever you need to get this type of string so we'll go back here we'll add this value here and we'll add this value here now that we have all the values a part of our item we can go and create this item and now it is an item that lives in our database and if we open up this structure so to give you a little bit of perspective about what we just created so this is what a dynamodb Json object will look like so it is a little bit counter-intuitive in terms of how you might think about the structure happening so instead of these values being directly related to the the scalar type or the item that's associated with the API it'll basically be its own object and then it will be S for string or n for number and these will be mainly the types of types that you'll be configuring so just look out for you know strings or numbers those are usually the the two main ones that we'll be working with so those are the values so we had the ID which was our unique value we had the string that we created with the node.js script we have this query name which is live which where we configured a global secondary index for we have zero for the quotes generated and then we have again this timestamp that we generated from the script so this looks great and now we have an item in our database that we can work from so if we wanted to go back to our front end that we have here so instead of just being hard-coded with zero we're going to want to hydrate this value with a query from our API endpoint so let's go back to our code and let's work on a way to generate a function that can call that value in Dynamo now that we've created it so now that we've written quite a bit of code this is a good time for us to get into the habit of pushing all of these changes that we've made to our GitHub repository so you'll see here that we have quite a lot of files that have been created modified updated and now we're going to say that we add API plus Lambda Plus auth and we'll also review if we added any front-end changes but mainly we've been doing lots of Cloud backend things so we're just at we added API we added Lambda we added off and we added a graphql so that's the queries mutations and subscriptions and the api.ts file so this should be all good so we'll Commit This to Main with GitHub desktop we'll push to origin and this is then good because now we know that we have our code as a backup in case we ever need to revert back to anything that we did so now what we want to do is we want to go to our index.ts file and I'm actually going to just comment this out just so that we can get rid of that typescript error so now we want to do is we want to change this number of quotes to be receiving data from our dynamodb table so what we're going to do is we are going to first of all check out and I can actually move this here so that this is full screen so what we're doing is this is always going to be a number we want to be able to dynamically change the set number of quotes value to what is rendered out from dynamodb so we're going to use appsync and query our public data object that we just created and then use that data to then set the number of quotes so that when we call this value it's going to be the number that's coming from AWS instead of this locally stored value in state right off the bat since we are going to be using typescript in our project which we are we are going to start to think about our data types with interfaces so an interface is just a way where we can explain throughout our code base what are the different data types that might be in an object so when we're getting data from dynamodb we might need to Define what the ID would be or the quotes generated which would be a number for example so we need to just Define those so that typescript won't be confused as to what we're doing so we're going to say that we need to create an interface for our Dynamo DB object and also something we're going to need to do is we need to create a type guard for our fetch function so we're going to need a type guard to then check when we query for the data and Dynamo we're going to need to make sure that the response is actually the response that we would be expecting and in the format that it's expecting so how we're going to do this is we're going to first create this interface for our update quote info data so we'll do interface date quote info data and then we're basically going to take all of our schema from here and we're just going to copy that over with a few exceptions so we want this we don't want that Global secondary index because that's a dynamodb thing but we are going to need these things so now what we need is we're going to turn this into a string and we're going to add string to almost all of these except for the quotes generated because that's a number so in here we'll do number and then we'll give that a save and then this is going to Define that data type for the data that we're going to fetch from dynamodp now I think it is helpful also just to think about the function that we're going to write so we're going to just move over to that for a quick second so we're going to need a function function to fetch the object which is quote generated cool so what we're first going to need to do is this is going to be an async function so we're putting that inside of the functional component but before the return statement so we're going to do const update quote info equals async we'll make this an arrow function and just a good habit of getting into is using try catches when we are running functions so a try catch is basically hey run this code otherwise if there's an error in this then log that error and basically console log it or do some action so what we want to really do is we're going to say error getting quote data and then error so what we do want to be able to do is fetch the data out of dynamodb so we're going to expect a response so we'll do const response equals await we'll do API do graphql and then we're going to take that type that we got from here and then throw that in there we'll close out the arrow bracket we're going to use parentheses curly bracket and then we're going to create a way in which we can API so the API is module we can get out of the AWS amplify Library so we can import that up there and then now it's a part of our Imports now if you want to use appsync with those queries that we generated so we have this query here so we're going to be fetching this quote query name so this was already generated by appsync which is awesome so we're going to be using this query to then get that data so it's already configured for us but this is what it looks like so if we want to do use the api.graphql method to call appsync data using that query we'll do query we're going to do quotes query name which was our Global secondary index and I see that it's already Auto populating this so we're going to press enter and how this will look at the top is it's going to say import query name from graphical queries which is what the file that we were just in so that's great now we can do query for the auth method if you remember from before when we allowed IAM we're going to be defining that as the auth mode use osmode we'll do AWS Instagram plan there's already methods that it will see so I will just choose AWS IM then under variables because this is what we're going to send into this query the query name that we want to fetch for is live because that's the item that we created in Dynamo so that all looks good and now for our response we could just do console log response equals response just because we want to test if we're actually able to get this object out of dynamodb so we can do that just to test it really quickly and make sure that we're on the right path and we actually need to be able to invoke this function so how are we going to do this we will use a hook called use effect so use effect that's going to be Arrow function and then we're going to take that function that we just wrote we'll put that in there and then an important aspect of use effect is and I'll just import this from react from the top so we'll import that so now it'll do react use effect and use state so those two hooks from the react library from the framework so this is really important because use effect is really helpful for side effects but you need to make sure that you unsubscribe otherwise it's going to keep invoking this all the time so sometimes that can be helpful if you want to run a certain function after a certain type of action so let's say that you know you um every time that you uh complete a game you want to restart it well you could listen for that as a method or an input and then you could you know clear out the game and then restart it or something like that so because we're just writing this we want this function to run every time that this page loads so this is the way in which we do that so that's just a way to tell use effect and react in the Dom hey once we run this function you know when the page loads don't don't do it again just unsubscribe so that's great so we're going to now give this a save and we're going to open up our application backup and we're going to test to see if this is actually working so I'm going to give this a quick refresh and this is Crete so I see that it's getting something so let's see if this is the actual data so we go down a whole bunch and this looks exactly like what we have so we have that ID which was that string we have the query name which was live we have the 10 quotes here and updated at there and let's actually go back to this object just so that we can change it so let's say that we change that to 15. we'll do save go back back to our application and we'll give this another reload and let's see if we're actually able to get the different data that we just changed go to items this item and that gives 15. so it seems like we're actually able to do this and it's working successfully which is awesome so now we know that we're able to run a function that is querying using our Global secondary index of live to get this data object in Dynamo and then render that back in our console so now we're going to change and basically take this value and then change it to state so that it'll overwrite the zero and something important to note here is when we are getting this response data so you'll see that there's this data and then it's dot you know quotes query name dot items down there's this zero so it's the first item in the list of the array and then you have these data points so the one that we're going to want is quotes generated but you see that there's these different levels to the data structure so this becomes really important because we need typescript to understand that this data has nested data inside of it and then we're going to be working our way down into this quotes generated value and I'm going to show you why that's actually really important because let's say that we wanted to just set the quote number so you know we're going to use set quotes number and you know we could theoretically change it to be a number right we know that it's 15 in the database so we could we could do that but that's not the number it's going to be changing in the database so let's say that we are going to take the response.data.all of these things and we're going to put that in here so I already have this data type and we're going to work on this you know together but this is the response it's response.data.query.name.items take the first item out of that and then we get quotes generated and that's going to be the number that is 15 that's what's in the database right now but we're going to get this nasty error from typescript and it's going to say property data does not exist on type graphql result with this observable object and then it basically says that property data does not exist on type observable with the object so that's not great and typescript is going to get upset and that's going to be no good so what we really need to do is understand how are we getting the data out of response and then mapping all of these down so this is where that type guard that we worked on before that's where that comes in so we're just going to comment that out for a quick second so where we're going to actually start plugging away on this is we want to write a type card which is really a function that checks against types and the expected value that you would be expecting so we're going to say function and then we're going to say is graphql result for quote for quotes query name I'm just going to capitalize this between him we know that we're going to get a response that response is going to be any for this and that response is graphql result and we can get graph quill result from at AWS amplify dot API which we can import here so we'll import that and then it goes from AWS amplify API graphql so now what we want to do is we're going to make a carrot bracket I'm going to go down and then we're going to Define this type that we want so we're going to do quote query name and I'm actually I'm going to just uncapitalize that just so that it can match up with this data type that we have from before so under this we're going to get some items but we're really just going to get one item but it would be an array anyway and I'm going to do update quote info data create that and then we'll do semicolon and then we're gonna give this a closed out carrot and then we're going to be returning a response dot data and we're also going to return our response dot data dot quotes query name which is that query there and we're also going to be potentially getting which is really what we're going to be doing is a response dot data dot quotes query name dot items so these are the different outputs that we could get when we are trying to check along that is graphql result for quotes query name Global secretary index so where this comes into play is we now can check against all of these different responses related to our data query so we can comment this out because we already know that we're getting that data so now we're going to create type cards so if not is graphical result for query name given a response will then throw new error and then we'll say unexpected response from API Dot graphql next up we'll do if not response.data we're then going to throw a new error that will say response data is undefined [Applause] next up now we're actually going to get the received number of quotes about variable and then we're going to use that to set the number of quotes so instead of it being zero it'll now be changed to the value of the database so we'll do const received number of quotes equals response dot data dot quotes query name dot items get the first item in the array and do quotes generated as that value and you can already see that there's autocomplete going on to it it knows this value and again remember when we did the the interface it knows that this is a number so this is perfect because now when we try to set number of quotes will be able to take this value and put that to this number and we get no errors and that's because this knows that it's a number this is set to set State action to a number and number of quotes is a number and we set it to zero so now we can set it to be a different number so before we do save so this is zero from before and I'm just going to zoom in here so this is zero but now when we save it this number now changed to be 15 super quickly right so now let's say that we want to change this and also a cool aspect of dynamodb is we can edit this and we can save it really quickly so we'll do save foreign we'll just do save and then space and now 17's there we could do this even one more time we could do 40. we'll just you know undo that space we'll save it open up this and now this is 40. so this is great so now we know that we're actually able to get real-time data out of our object and of course we can double check this with items go to that item we'll do refresh and can always uncomment out console log response and check this out so that's 40. so now we know that this is actually fetching the data dynamically from our database using our graphql API that we set up using appsync so this is super great so now we know that we're actually able to fetch and get Dynamic data from our from our application and we can always refresh this and we're still going to get that and you'll actually see that it'll go from 0 to 40 and that's the hydration happening where we take our you know State and then we fill it with data that we get from our API from our fetch function so this is awesome so now we know that this is working and this is great so we already got the dynamodb part down now we're going to work on the Lambda component to get every time that we press make a quote it's then going to use our API it's then going to fire off Lambda Lambda is going to generate that quote string for us and then we're going to pass that back to the front end so we can actually see our quotes so that's going to come up next for something that we probably want to do since we don't have 40 quotes here we can always just set this back to zero give that a save and now we'll refresh and now it's back to zero but it's the actual data from our database not just Zero from you state locally so we did it so great job so now we're going to move on to the Lambda component of our application since we just did a lot of great stuff we are going to want to commit this to GitHub so we can label this commit query to Dynamo for public quotes data works so we'll commit to Main and we'll give that a push all right so now we have that saved which is great so now what we're going to do is we are going to work on the functionality where when you click a button click this button it's going to actually do something because right now we want to add some functionality to this button and then actually have it do something in our application so for the Lambda component there's going to be two separate parts there's the front end component and then there is the actual function calling and then receiving so we're going to work on the front end first and then we'll um we'll work on the function as well right after that so what we're going to do is we're going to find where our background is which is right here and then the code generator modal pop-up is going to be here so this is where we're going to be actually working on the generator modal here so we can uncomment this out foreign and this is going to live right on top of the quotes generator container so there's going to be a number of different values that we're going to pass into this but we don't really have to worry about those just yet but we'll just kind of mock them out for now so we're just gonna basically give this I'm just going to copy these into it and then we'll comment them out and then add them later so there's going to be an open and a closed function so we're going to call that through clicking outside of this button you know obviously it'll Auto open when we open it but then we'll be able to close it and these will be operating through functions then there's going to be a processing quote there's going to be a set processing quote value and then there's going to be a quote received value and then a set quote received value so these are going to be the different inputs that we pass into our function we're just going to comment this out for now because we're just going to work on the component so this is going to live in our quote generator so we're going to find code generator we're going to call this and we already set up this folder from before create a new file I'm going to call this index.tsx and then this is where we're going to actually start creating our code generator component so if you want to just quickly spin up a react functional component you could do rafce and that's going to be our react Arrow functional export component here and then we'll do quote generator cool and if you're wondering how I did that that is an extension that is you can just get extensions from the extension store and then that'll be for react Snippets so it's one of the most popular extensions and it just saves you a lot of time from the guesswork of having to you know configure these different you know like Imports and then getting the rec you know Arrow function and everything it just spins it up really quickly and it makes it really easy to use to build out this component we are going to first remove that placeholder and then we're going to do modal and we're going to import this from Material UI so this is that component that we showed earlier which is let me show you guys motor component so that's when you click a button and then there's a pop-up and it you know might blur out other things that are in the background around it that's what this modal is doing to get the modal we need to add in a number of different values as inputs for the modal we are going to have quite a number of these inputs so I will take these and then I'll paste them below and then we'll go through each one so given an ID so we're just going to give this an easy to recognize name which is quote generator modal there's an aria labeled by and a described by so this is just going to be that spring modal title encryption so we could give this a name so just call this quote generator modal and then description say opens and closes quote generator now and this will also just help with readability in the application now in terms of open we're going to be passing in a value which will be a Boolean and then on close will be a function and then close after transition is a value which you'll you'll see in action there backdrop is just some styling related to how this works and then we also have a backdrop props timeout so now what we need to do is we are going to be passing in some data here so we're definitely going to be getting open and we're going to be passing in close and these are going to be functions that we're going to pass down from this so where we do this is that we'll do open and close and now we need to get these there and also this is not imported yet so we'll just backspace we'll rewrite l and this actually might not be importing so we'll create a another import at the top we'll say import and it seems like this is already going to be passing that and this might not like that so what we can do is we can just say quotes generator and that should work and then if we undo that then should work is that something that we can do here is like that and then we'll just rewrite that so that it will then recognize that component so that's a way that we can fix that and now what we're going to do is we're going to need to work on these inputs here so the open and the close are going to be two values that we passed down from the parent component to this child's component so here under open generator so that's going to be a Boolean value that we set with u state so we're going to use U State again here we'll go to the top and then we're going to say const open generator and this is already prompting us to write that so open generator and then set open generator we're going to set it to be false from the start but when we run a function this we're going to use set open generator and then that's going to make it true so under open generator now that value is fine now for our close function we're going to want to make this as a function at the top so we can put this after our type card from before so we'll create a function called const handle close generator write a function and then we'll do we'll take this from the top we can actually put this inside of our function here I'll put that there so we'll do um function for quote generator modal because we'll have a few functions here so handle closed generator we're going to set number of or sorry not for this one we're going to be importing set open generator and then we're going to set that to be false because we're going to be closing that and then we'll add some other things as well but we will work on those later so now what we want is we're going to go back to that button that we had before and remember when we had on click and we made it as an all we're going to make our own function to actually open up this modal and that's going to be called handle open generator now when we take this we're then going to make this a function so this is inside of our functional component here we'll put this underneath that so then we're going to do const handle open generator async and then we're going to pass in an event which will be a react synthetic event which is the type so typescript will be able to recognize that and then we're going to do e dot prevent default so this is a way that you can run a function without reloading the page and that becomes very important because when you need to pass in data into something you don't want to be reloading the page because you want to be able to manage the state um of the dominant and not be updating it or refreshing it you want it to be processing a function or a script so we're going to use that and then we're going to do set open generator to be true so this is where every time that we open up or we press that button which is going to be here we then want to make basically this set open generator to be true and we're going to be doing a bunch of other elements in this later but we'll worry about that at a later point so now when we open and close typescript is going to complain and it's going to say hey I see that you passed these down but I don't understand what the interface is that we're going to be using here so this is where we're going to use typescript and we're going to define a type so that or an interface so that typescript will understand exactly what open and close are supposed to do in our application to get rid of these errors we're going to be creating an interface so that typescript will understand the types of values that we're going to be or the variables and those values we're going to be passing into it so we're going to create a interface and we're going to call it quote moral props and this is going to be a value that we're going to put inside of this so this is going to help to Define open and close inside of that scope so what we're going to do is we're going to go down we're going to do interface we're going to copy this and then we're going to make this into an object so it seems like it's already understanding that these are going to be certain values so Boolean and close so now that's how we get rid of those errors and this is because we need to let typescript understand what this modal and the values that are going to be passed into it actually are going to be so this is a Boolean which is true or false and then close is a function so that's great so now what we're going to do and we're going to pass in as I'm sure you've guessed it a whole bunch of other data later but these are just the two ones that we want to be checking for right now we could do of course the other stuff later so now we're going to do is we are going to work on this backdrop element so backdrop is imported from Material UI so we're going to be just reorganizing a little bit of our project here so we're gonna say material UI Imports so the modal is imported from there and then we're also going to import backdrop so if we just backspace we can find that backdrop as this one so we'll import that so modal and backdrop will all be imported from material and now mortal is going to say that there is something that is missing so what we need to do is we need to pass in some other values into the modal since we need to have something inside of it for a to a render so we're going to pass in this fade effect or styling which I really like to give it a little bit more of a classy element to it and for fade we'll be able to import that also for material UI so that'll also be imported from the mey material library and then we need to have something inside of this because these are still effects we need to have some text in there so what we could do is we could just say each one hello world and then our core generator is just going to have some text this is going to and like that and let us test to see if this actually can function so if we click on this check that out so now we can open this and there's this text here we see the hello world when it's there and anytime that we click outside of this modal it's um that's how we'll be able to close it out or if you click on this and then you press Escape that's also how you'll be able to to close out of it so we're getting closer obviously we need to add some Styles in here but this is the basic functionality if you click this then it's going to be rendering it's going to be processing the generation of the quote and then it'll pass that back and then if we you know click out of that div then we'd be able to close out of the modal so this is some great progress before to round out the rest of these Imports to our child's component from this parent component let's add those right now so we go up to the top under our function and we're going to add a number of different processing quote generation statuses so new const and then we're going to create a variable to check for the processing quote status so processing quote and then suppressor quote and then we also have a set processing quote and then that's going to be set automatically to false and then we're going to have another variable called const quote received and this is actually going to be the value that we get back from our Lambda function so set quote received and then this is going to be use date but instead of it being a value like a Boolean value it's going to be set to null because we're going to fill it with data when we get that back but it's going to be set to nothing when we start so this is going to be a string and this is going to be that base 64 encoded string that I keep talking about but you're actually going to see what it looks like in a little bit but this is where we're going to be filling this value with that string for the image so let's take this and we're going to pass this down and then these are going to be the other ones so quote received and then set quote received but of course typescript is going to complain it's going to say hey you don't have this value so we're going to be passing these four values into our type in our interface in the child component so this is that quote generator file and under open close we then need to pass in those other values to do that we are going to be putting those in as inputs so we can actually Define the in the interface that might be a little bit easier just to explain so we added those in here so those are our four more inputs processing quote we are going to Define that as a Boolean then for set processing quote is actually going to be a specific type of react dispatch so this is that type so it's react dispatch and then react set State action to a Boolean so it's Boolean but this is the type for that and then for quote received this is going to be a string or it's going to be no and then it's going to be the same basically the same type of react dispatch react set State action except it's going to model State string and null so that's what that will look like and then we're going to pass those into here so it might be helpful also to start writing these down and then just passing them in like that just in case that's a little bit easier to read then we pass this and then we do this one and add that one as an input and then set quote received and that is an input so that's going to be great so this is going to allow us to then pass down that data as props into our child's component so we can then use it when we're trying to render out the different states of the quote being generated so now we're going to do is we're going to get rid of that hello world because we know that this is working and then we're going to do another component which we will call quote generator modal container and material UI has this styling where you can pass in custom styles so I'll show you how to do that in one moment and then inside of this we're going to do quote generator modal inner container so this is where we're going to be including some Styles but specifically for the style that we're going to import here we can just Define a value outside of our component which we could report up here we just see const style and then this is where if you follow the material UI style guide you'd be able to then pass in you know your own style as you like but that'll be an import into that and then modal container and then inner container we're going to need to create separate styled components so what we will do is we will open up quote generator this and then we'll press Ctrl B and that will just close that out and then we're going to be making our quote generator elements Stout component in this library in this uh this file so again if you remember we'll do exsc we'll then do quote generator modal container and this is not going to be styled div it's going to be a component from Material UI called box so we're going to do styled box and then we can import that from Material UI so it will look like this and then we're going to pass in a whole bunch of styles into this component so I'll show you what those are in one moment so we're going to give it a position of absolute with a top 50 left 50 transform translate minus 50 minus 50 so that's going to Center this box this style of the Box inside of the screen it's going to have a 70 view width and a height of 70 view height and that's going to make sure that it spans around the screen so as it gets smaller or as it gets larger this will be expanding to match what that pop-up is that's in the um the main screen and then we give it a box Shadow just for some styling and then we're giving it a background we're giving it a box Shadow we're doing some backdrop filtering and sort of giving it that glossomorphic effect that we were talking about from earlier and then also giving it a border similar to what we had before so that's great so now we're going to need to also create the inner container so as I'm sure you guessed it we're gonna do exsc we're going to pass that in and then this is going to be another set of styles so this is going to be style.div and we have our top 50 left 50 transfer translate minus 50 minus 50 and then a position relative so there's going to be this inner container that's going to be inside of our modal container so this overall this overall element this overall component is going to be centered inside of the screen and then we're going to have inside of this our own series of styles so this is just how you can create divs within divs and then Center those divs within other Center divs and that just will help with organization of your of your application so now we can do is we can rewrite the N here we can then import this from quote generator elements and then that will import that at the top we'll rewrite the last letter here and then that will import that as well so then these get imported from quotient or elements which makes sense so we'll give this a save we'll give this a save and then we can see if this is going to start generating some styles so it looks looks like it is so this is really great so we can click inside of this div but as soon as we click outside of it then it'll disappear so that's not that's not bad right and then we can press Escape as well and then that will also close it out so seems like it's working pretty well so now we're going to do is we are going to then start adding some of these elements into our page now that our modal is working we need to create two different states so state number one would be you are processing request of quote and quote state is empty so this is going to basically say hey we're trying to fetch this data from the cloud right now and there's nothing you know in there just yet locally state number two is going to be quote received so that means that we have a quote passed back so quote state you can actually say so in order to make sure that we can actually process these states correctly and then have our front end do the correct actions what we're going to do is we're going to pass down those properties that we're importing from here so these where we're processing the quote or the quote is received we're going to use those to dynamically switch out how the front end operates so what we're going to do is we're going to start creating some elements so we're going to do processing quote so if that is true meaning we are trying to fetch the quote from Lambda and the quote received is null meaning there is nothing there it's empty then we're going to render this specific set of front-end code and this is a Nifty operator for working in react where you can really just Define certain elements here and then you just say and and then you don't need to do like if this else something it's just if this is true this is going to be the code so you don't have to have like it wouldn't be like this would be like an else else like you don't have to do something like that um you can just write your code in not have to worry about the the other types of conditions so something we're going to do is we're going to create a component for a circular progress meter which we'll call modal circular progress and that is going to be given some data so it's going to be given a size we're going to call that eight REM and REM is just a way to size certain divs and elements and then we're going to give this a 2.5 thickness and then we're going to also have a title so we're gonna have quote generator title and this is going to say creating your quote and this is where that's going to be that loading pattern so this would sort of make sense that it's creating your quote for you and you know we're told to wait until we finish that up so we are told otherwise that it's that it's there then um what we're going to do is we are going to then have a quote generator subtitle and we're gonna give this a style of margin top 20 pixels and I thought that this was kind of a little bit funny so what we could do is if we wanted to have some data such as a quote so I thought this would be kind of fun where it's creating your quote and then you'd have sort of this inspirational quote as it's waiting I thought that would be kind of fun so what we'll have is we'll do wise Dev quote and then I'm gonna have a break and then we're gonna do span style equals font size 26 so we're just going to be changing the styles with that span that we talked about earlier but we're going to have a quote and then we're going to say wise Dev quote author and then we end the span yeah Ben's gonna say that it can't find that because we haven't defined that variable yet and that should round out the rest of this element so now we're going to do is we're going to Define these elements so right after the Imports but before return to actually just take this and make this a little bit more tabbed so that it's a little more organized so we're gonna do const because these are constant values and then I'm going to copy this quote that I created so I thought this would be kind of a little bit funny where it's you say if you can enter a div Anything is Possible because I firmly believe that that is true and then we author and then I'm going to pass down the author of this so we're just going to take this so it's going to basically look like that it's going to look like this and then a wise senior software engineer so that's great so those are the two variables that we're going to pass down into here and then now these are where we need to create some styled components and this might be expecting a value here it's maybe no parentheses yeah so we can just get rid of that parentheses because that was just an extra one and now we just need to worry about the Styles components so we're going to go back to our Styles components from before and we'll have this open on the side and then we will of course do exsc we're going to say modal circular progress and this is not going to be a div this is going to be the material UI I'm going to make this a little bit bigger so you can see this is going to be the styled circular progress and this is an element out of the material UI component Library and then we're going to pass in a number of different styles into this component so we're going to make the color white we're going to make the stroke line cap round so that it's not cut it's rounded out the positions to be relative and then just to account for the larger element pushing to the left we're just going to add this so a margin left of -55 pixels a left to 50 and a transform translate of 50 percent so then we could have that and then we'll work on the generator title so the generator title is going to be created with exsc we have the title this is going to be a div and then we're going to pass in some Styles here and we're going to have a font family here we're going to have font size and this might already be used so I do wonder if this is going to be the same as the previous one and I think that we could just reuse this one I'm just double checking the Styles here but I think we can use the same one so you can actually just import that already and that'll be the same one here and then subtitle you can use the same one there and for modal circular progress we can just import that component that we just created now we'll give our styled component elements a save and then we'll give that a save and believe we could also give this a save too so now we've passed down those components those are properties into the child's component now let's just remove these State variables and let's see what this looks like when we open the modal and there's you know no variables to worry about all right so seems like when we click on this will then be getting this loading State it's going to say creating your quote and then it's we get that fun inspirational quote there and everything's operating pretty great so as we click on this of course able to click out of it but then you can also press escape and then that'll work great so now we want to do is we want to pass these values back in and we're not actually updating this processing quote so the reason why this is going to be important is if we save that and we try to press this button we don't get anything here so we still get the pop-up but we don't get anything in here and that's because processing quote is still set to be false and we know this because when we go back to this other example to our parent component we're not actually setting processing quote state yet so that's why this is still false so what we need to do is we need to have a methodology for how we can create a way where when we are fetching our quote we're going to be able to then start changing this value so we're going to go to our function that we created with the try catch for the handle open operation which is going to be here and under handle open operation we already have this value here where we set this to be true we're going to Now set processing quote to be true now we're going to do a try catch and this is where we're going to be running our Lambda stuff so run Lambda function and then this is where we're going to be getting a whole lot of data otherwise we're going to do catch do error console vlog error generating quote log the error and then we will set processing quote to be false so this means that it's timing out after we finish that out and something also that we can do is that in the try catch we know at the end of it we will need to set the processing quote to be false because as we run it we then will need to because we make it true we will need to make it false at the end of it so that it the the function ends and terminates and then sets processing quote to be false so that's a good methodology for us to go down so as we process this it should actually allow us to see it for a quick second but it might actually be way too fast to even see that there's data that's processing yeah it's going to be too short so when we are fetching this function for a while it might be like you know a second or two but we will actually see that spinning component to it now if we did want to start mocking up some of this functionality we of course are going to be using a Lambda fetch the query to get access to the Lambda function and that will actually be doing our true and then setting that to false but if we wanted to actually try to model some of this type of stuff up this becomes really important because when we are trying to create these different states of hey I'm waiting for a quote and then I got it back how could you actually model that out without doing anything in the cloud just yet so what we're going to do is we're going to use a set timeout function to sort of model how this would actually be working so we're going to copy that function we're going to do set timeout we're going to log that as an arrow function we're going to process set processing quote to be false and then we're going to give that 3000 and that will be for three seconds so that we'll be able to sort of emulate how this is actually going to happen so when we make a quote we're going to see this for three seconds about and then we're gonna see you know our quote pop up here so obviously this will be maybe faster much faster with Lambda than three seconds but three seconds will just give us a little bit of an understanding of how to do that and then of course every time that we run this quote we're going to run that function it's going to be making this true and then three seconds is going to be false so that gives us a good understanding of how this function is going to be operating now what we want to do is we're going to take this child's component so this is just the state one of processing the request of the quote now we need to have if the quote state is fulfilled so how do we actually go and change that well we're going to have something a little bit different so we're going to have in that same square different code so now if the quote received is not null meaning that we have something there we'll use that operator will then make our separate div and then we're going to start plugging away with a download and a visualization to show where the quote is and then allow us to interact with it so we're going to do is we're going to have a quote generator title which we can copy from there we're then going to say download your quote then we're going to have another opponent that says quote generator or subtitle and we're actually going to include those same Styles there we're going to say see a preview close that out and then we're going to have an image blob container which is going to include that image so image blob container and that's going to include some elements which we will Define in a little bit and there's going to be an animated download button and before we get a little bit farther with these other styles there was something that uh I do want to just call out very quickly so when you click on this quote um you'll see this white and then blue border around this element so there this is this default for Focus around outline when you click on something so a way that we can get rid of that in case you see that on your screen is when we go to quote generator modal container which is the styled box we can add in this style so when you use Styles components you can use and colon and then a class for a pseudo class and then you can use these brackets to then Define certain elements so for outline we're going to choose non and we're going to say important so we never want to see outline and we want to prioritize this in the Styles so as soon as we press save now this should go away but if we also click on this now you won't see any of that uh background and it's it's the out of the border that we selected from before also another thing is if when we were writing this function we made it where you have to click inside of this text div so if you click on outside of that it won't actually um include it so something that we can do is we can go back to where we call that Handler so the handle open generator on click and we're just going to move this out to be where the generate quote button lives so that's where now we're just we just move this function to include the whole div so now anytime that you click on this this model will pop up even if you click on the text or click or in the corner that will still work and we can also just inspect if this is styling in the mode in the the mobile way that we are expecting so we press this that looks pretty good and then if we expand this out a little bit more that looks great too so there's just a couple other ways that we can test and make sure that we are fully checking out the Styles and also refining the vision of the application as we go along now to switch back to this state number two we're going to want to finish out the rest of these elements so for the image blob container we're going to be creating some animated elements so the animated elements are going to show us how we can make a little bit more of an interactive view for our actual application so what we're going to want to do is we're going to want to go here I'm going to go to animations I'm going to do image blob TSX and we're going to make a new functional component so we're going to do rafce and then we're going to react Arrow functional expert component and then we're going to call this image blob and then in the top we're going to import the image from next image so we're going to be of course working with the image module out of next image and this is how we're going to be animating our pop-up so something that we're going to do is we're going to work through some imports for this component and then we're also going to give it a style but something that we can do right now is we'll just have image blob here we'll give this a save we're then going to import image blob from here so image blob container inside of this we're then going to put an image blob and there's going to be some props that we passed down from here but we will work on those in a little bit and we'll press enter so that we can import image blob and then we're going to work on the image blob container styles so in terms of animations we're going to create a new file we're going to call it animation elements TSX and then this is where we're going to move this to the right and now we can start importing our elements here and something also that we can do since we already have quote generated elements something that I personally like to do is just import our last recent Imports and then just put those at the top and then we can always remove certain ones that we don't need we might need image we might need link but we could keep those there and then we're going to do exsc for the export South component shortcut and then we're going to do image blob container right there and then we're going to start adding in our styles for the div so we know that this is a div so put that there and then I'm going to copy our styles for this because this is quite a lot of code here and we'll put that in there and then I'll walk through all of the code with you so when we have this image blob container can actually get rid of this because that was some relative styling for some testing so we originally had a position of relative we have a text align of Center meeting we want everything to be in the middle this is going to be down 10 from the top um and then the margin top will have 20 pixels of some margin spacing we'll have a transition this is going to be important so when we do this on hover or we're animating elements we want to give this sort of a really Sleek ease and ease out effect we also want the width to fit the contents and we also want margin Auto so just adding more centering around horizontally and vertically and then we also want to give it a height of 100 pixels total and then the Z index meeting make this go over everything and prioritize that now for the hover this is actually some pretty cool Styles because when we hover over this element this is how you do that in styled components then when you transform scale we're going to times this by 4.8 so on the hover it's going to grow by 4.8 and then of course the index stays the same then the transition we have this effect so on the hover it Transitions and then also on the out of hover so Mouse out this will have a also a transition then we have our box Shadow and then we also have some media queries and these are helpful because when we make our our application our width and our height you know change we want to be able to change that as well so when the height becomes 800 pixels maximum we only want to scale it by 3.8 and then if it's only 600 pixels wide we want to only scale it by 2.8 so this makes sure that you don't expand it past the width of the screen but that it's relative to a lot of these other types of styles and then these of course is just box Shadows uh around the hover effect but these are important for making sure that we don't over scale the image when we expand it so we can give this a save and then what we'll do is we'll then import this like that and then that's how we can easily import that there and then we'll also start working on this animated download button so this animated download button is going to be its own component we're then going to create a new functional component in animations so we'll call this animated download button.tsx and we can actually just copy this from here and then just paste it in there just so that we can start tiling it and then something also that you can do is that if you have the same text in many different places you can hold down the control button and press D many times and then that will allow us to have this cursor so that if we wanted to delete something we could do that for example we can hover over all of these images and then we can delete there we go so then we just select and then we press D delete and now we can write that so we can write animated download button and then now it's Auto writing these dynamically which is a really helpful hack so that you don't have to write and then write and then write you could just write them all at once so now we're going to do is we are going to have this give this a save we'll go back to our generator there and then we will import this so rewrite the last letter press enter and then now we have all those errors removed from our application or from our code so I'll give that a save and then we will keep proceeding here so the animated download button is going to have some pretty cool styles that will be helpful for us and make our application look kind of a little bit cooler and more Dynamic but before we do that let's just make sure that this actually is configured and it is working so we are going to say that we want that to equal no because we want to see if we can show that so when we make a quote so this is where this will disappear and then this is where that's going to be so you can see that here where it's going to say download your quote we'll have a preview this image blob is going to have this on Hover effect there and then we'll also have this download button that will be centered with some Styles and then this will allow us to actually copy this image that's there so it seems like everything is working without any Styles which is great so now we can keep proceeding here so before we forget we'll make sure that we revert back to it not equaling null we'll give that a save and now we can proceed with our button so if we go to the load button this is going to be a function functional component that we're going to create so something that we're going to do is we're going to use a pretty fun package called react Lottie player and this is going to allow us to install this player for a Lottie image and a lot of image is really just a Json object and it will instead of being a static image it allows an animation so what we'll do is that we'll open up a new terminal we'll do npm I and we'll say react Lottie player we'll press enter and then now we've installed it so now what we can do is we can install and import react body player from the top and then something also that we're going to do is that we're going to add our react Lottie image into our assets folder so I'll show you what this looks like and then we go to Plug and Play so you don't have to worry about copying this this is like quite a lot of code but this is the react Lottie image and this is what it looks like so it's a huge Json object that has all of these different characters and all these different things and what it's going to do is that it allows for this animated effect instead of it being a static effect so what we'll do is that we will say We'll import Lottie Json from and it's already trying to find where it is but we'll do assets and then we're going to say animated photo.json so that's that file now we're going to do is we're going to need to import it into our page so we're going to get rid of this placeholder div and then we're going to start adding some elements so we're going to say download quote card container and then this is going to have an on click and it's going to have a button which we're going to Define later so we'll just say that this is null this is container card container then we're going to have Center Lottie which is going to be its own South component and we're going to give it a few different styles so we're going to say Loop because we want the image to Loop and this is where we're going to be working from this Lottie package which you'll see in a little bit but we wanted to Loop we want animation data to equal the Lottie Json image that we're importing and then we also want to have it play so we'll close that out and then we're going to have another style component that's going to say download quote card context for container text and then we're going to say download your quote cart so that looks about right and now we're going to do is we are going to start working on these styles so for the first one which is d download card so now we're in animation elements so what we're going to do is we're going to control B and close it out we're then going to open this up and then we're going to have this on the side and we're going to do exsc we're going to say download and we can actually just copy from there this is going to be a div and then we're going to copy our styles from our CSS right here and that's what that looks like so we're going to have it have a porter we're going to give it a width we're going to have its position relative in the screen with a border radius so the edges are rounded uh the the cursor is going to be pointed when you you know hover over it and then there's going to be a margin there's going to be transform just to kind of get it in the width in the middle and then there's going to be some on Hover effects so it'll just be getting a box Shadow backdrop filter there's going to be some other aspects that we have to this we're then going to rewrite the last letter we'll then import that and we can do is we can actually just so the typescript won't complain about this we'll just comment that out for now then for centered Lottie what we're going to do is that we're going to copy this Lottie effect from here we're then going to import this from here and then that's where we're going to be using Lottie as a styled element so we're going to do is we're going to do exscc we're going to say centered Lottie and then this is going to be styled body then we're going to do is we're going to import these styles so this will have a width a height it'll be in the center it'll be a position relative and then it'll margin minus 40 from the top and then pointer events is going to have none just so that it's not interfering with any click click events inside of that so then we'll press that download quote card text we're gonna do exsc we're going to say this is a div and then we're going to copy over our Styles so we can write them so this is now color font family font size right a lot of the good stylings that we would expect text align we want that in the center so the text is aligned we're going to give it some padding margin top minus 60 and of course for the max width media query we're going to be making the font a little bit smaller as the screen gets smaller so then we'll rewrite this last letter we'll rewrite that we'll give our elements a save and then we'll give this a save then we're going to go back to here and then we are just going to make this equal one more time just so that we can test this out we're then going to move this over so now what's really cool is that we have this button where you see that this image is moving up and down in a loop so I think that's pretty cool because what makes our application now more fun is that of course we have this on Hover effect here but also this image is you know sparkling it's moving and that's a lot of image so you can learn more about Lottie images if you if you start googling um there's a website called icon Scout and you can get a whole bunch of these different Lottie images many of them for free and this was just one that I thought looked really nice and just kind of it brings your app to life because now it's not just a download button now you have a download button with a cool animation and it also makes you know your app a little bit more interactive for your users so that it's more fun so now that we have that that's pretty cool so now we're going to start working on this other element which is going to be how we actually see the preview image of our element so this is going to be that image blob and we'll work on that next so now we're at a good spot where we can start taking our code sandbox code pushing that to Lambda and now we can actually try to get this image blob to then come back into our application so the way this is going to work is that when we actually get a quote received this can't be no so we're going to switch that back and we're going to be getting the string back from Lambda and then we're going to be basically having it in this image blob component and then we'll be able to work from that as soon as we get that passed back from our Lambda code so we switch this back now we're going to do is we're going to pass in two specific variables so we're going to pass in these two props into our application so quote received that's going to be what we passed down which you'll see from the top we pass that down as a property into this child's component and then blob URL it's not going to know what blob URL is yet but but we're going to be passing this down uh from our Lambda code and then that's going to exist once this function is invoked and then we save that in state so what we're going to do is we're going to go back to our values here we're then going to say const blob URL set blob URL equals use state this is going to be either a string or it'll be null because we won't get a value and then this will be set to be no from the beginning and then we're going to import use state as a hook and while we're here we'll also import use effect because we know we're going to need this in a little bit so now that we have blob URL now we're going to be able to work from the function to actually get this so something that we can do is that we're going to write two specific functions the first is going to be that handle download so we can write so function for handle handling the download of quote card and then also we need a function to handle the receiving of quote card so to handle the download something we're going to do is that we are going to say const handle download this is going to be an arrow function we're then given a link we're going to say document create element a and then we're going to say if the type of blob URL equals a string then what we're going to do is that we're going to have this code so there's going to be a link there's going to be an href and then we're going to set that as a link the link will have a download which we will have as quote.png which is the file name and then will allow us to click click into that link so this is going to be a function that will be able to then have so when we call and we said download your quote we could have the animated download button down here of course that and then we'll say handle download so we can actually close out these Styles because we don't need them right now so now we're going to pass this down to the animated download button we'll pass that in another property and we're going to need to create our own interface for this because it's not going to understand from a typescript perspective what we want that function to actually do so something that we can do is that we can say animated download button props something also that we can do is that we can do on click and we'll just pass that down and then we're going to declare as an interface here we'll say interface animated download but props and then we're going to say handle download and then this is how we will Define this type for the function so that looks great so far and then we'll be able to actually use this download button to handle the download that we pass down through here so that will work great now we need to do is we need to also work on a function to handle the receiving of that quote so this is going to be important because when we get this string back from Lambda we're going to need to do something with it and we're going to need to allow us to either add this in as the blob URL or revoke and remove it so that we can re re-add a new link so this is where when you fetch a new quote each time we need to clear out basically the placeholder for that old quote to make space for the new quote so tonight we're going to do is we are going to use that use effect hook to then allow us to work from this functioning a little bit more smoothly because we want to be able to just instantly get this string and then allow us to get this quote so we'll do is that we will set this up just like a normal use effect hook we'll pass this in and now we're going to say if quote received then we're going to want to do some code and I think it's also important to get into practice of if you have this and also make sure that we close out and unsubscribe from this use effect so that we don't have this running you know an unlimited number of times all the time so this is just going to say that run this if quote received is changing so then what we can do is we can say const we're going to say binary data equals and then we're going to use buffer Dot from we'll say quote received okay say base 64. so we're going to be using some dependencies that we're going to be using to work with a base 64 encoded string now when we do const blob we know this is going to be a new blob and the blob is going to be a locally stored aspect of code that we're then going to be basically storing in local storage or clearing out and then adding a new one each time so when we take this new blob element we're going to add in binary data we're then going to say that the type is going to be image Dot image.png then we're going to do is we're going to say const blob URL generated equals URL dot create object URL blob we'll then console log that value just so that we can keep track of what's actually being generated and then we're going to set blob URL to also be blob URL generated so these are going to be the different values and then we're going to be using use state to set the blob URL and then we're going to do is we're going to return we're going to make this into a function and then we're going to say URL dot revoke object URL and then we're going to also have blob URL there so basically this is going to be setting and then removing the old blob URL generated each time that we we run this so we want to make sure that if a Court's received we take this new data that we receive we set that as the blob URL and then we remove and revoke that old URL that we were previously received and that'll also become important so that you don't just store an unlimited number of these blob URLs in your local storage but they are always constantly cleaning out the old URL each time as you proceed and that's what we'll be doing here so that seems great for now and now something that we can do is we can also just make sure that for the quote received if we're passing the image blob URL down to have these values so things like I'll copy this say image blob URL and then what we're going to do is that we're going to make sure that we have an interface to store those values so if you remember from before we have these two values here so I'm just going to comment those out so we know that blob URL image blob is going to need received and it's going to need the blob URL then we're also going to need to create an interface so we'll say image blob props then what we'll do is we'll say We'll click declare an interface enter face props and then we'll pass these both down and then for this one quote uh received this is going to be a string and then for blob URL this could either be a string or it can be null because this Bob URL doesn't necessarily need to have a value but as soon as it does have a value we want to make sure that we know that that there is a value there so this is all good now we do this we'll go back to quote generator we'll say quote received and we'll just see that there is an error here and it's going to say that it's string not assigned to string type but string is a wrapper so we'll see here so we'll go back and we'll make this capital S for Capital string and then that will remove that error so there are differences in terms of the type of string it can be so just be cognizant of that when you're working with typescript to make sure that if you are typing out your values you need to make sure that those are correctly typed which we're doing which is great so to do that we'll give this a save we'll give this a save we'll give this a save and something that we can do is mock up how the response is going to be for when we are getting this image back from our Lambda script so we've talked a lot about base64 and now we're actually going to see what this looks like but to do this what I'm going to do is I'm going to create a variable called blob URL and we're just going to bring this down and then we're going to just unhighlight that for a second we're then also going to import some hooks and then what we're going to do is to enter and then we're going to write a pretty big use effect hook and it's going to simulate us fetching this response object from Lambda which is what we'll be doing we'll get this string and then we're going to show how we can actually set that image in our application so we're going to do is we're going to do use effect or say const response and then the response object is going to have a number of different variables but what we're going to really look for is a status code of 200 in terms of headers we would have a content type which would be image.png and then access control allow origin which will give a wild card for everything and then our body response we're gonna have a body which is going to be a blob and then is base 64 encoded we're going to say that's true get rid of that backslash and then for the body so this body is going to be a very very very very very long string and this is actually the first time that you're actually going to see what a base64 encoded string looks like so you don't have to worry about writing this down we're gonna I'll show you how to get this in Lambda so that you don't actually have to do it but it's going to look something like this monstrosity so this huge list of characters is what an image looks like so when we have an image it can either be you know a file like a PNG or a JPEG but if we wanted to turn this into a code string that's another way to also get an image so this base64 encoded string really looks just like this and this all these characters all of this code compiles down to an image that we can then set and then use in our application so also just showing back here so we have this response object inside of our use effect hook so let's scroll down to where it stops so it stops here now we're going to do is we're going to say const binary data equals buffer Dot from we're going to say response body because that's what the this is what the body variable is say response that body and we say base 64. then we're going to say blob because we need a blob variable and we're going to say that's a new blob this is going to be binary data and then the type is response dot headers with the content type close out the bracket and we'll get rid of that quotation mark and then we're going to take our blob and then put that into a new blob URL so we'll say const new blob your Rel equals URL create object URL and we'll put blob in there and then we're going to do is we are going to set blob URL with that new blob URL that we just got then we're going to return as an arrow function URL revoke object URL with the new blob URL so I'll be able to clear out this value every time that we set that and then what we'll do is we will make sure to unsubscribe from this event so every time that the page loads this will load and it's saying that this can't find set blob URL so we're going to go back up to the top and we're going to make sure that we're able to set this and if it's not being read that means that we are not importing it correctly so this might be typescript being a little bit slow here so something that we can do is we see that it's not um it's not working as quickly as possible so something that we can do is we can try saving this and then what we can do is we can press command shift p we can reload the window and sometimes this is a way to sync up typescript changes just so that we can work a little bit faster so sometimes when you're doing a lot of typescript changes or errors I've noticed that sometimes you need to do that reload window just to get your workspace and vs code synced up with typescript so that it works so you can always use that just as a check in case you ever have any issues or ever have any errors so now that we have use effect something that we'll also do now is we'll do if and we'll create a check where we need the blob URL we'll create this we'll do return no and then we're going to create an object so we're going to remove that we're going to create an image component with The Blob URL and some alt which is going to say alt text which is going to say generated image we'll just say image quote card with we're going to give that a 150 and a height we're going to give that as 100. so and then we export our default image blob and this seems pretty good so what we're going to do is we're going to give this a save we're then going to open up our application in another Tab and something that we are going to do is we're first going to because of course we're going to be testing so we're going to do make a quote that's going to generate right it's going to time out after three seconds and now we're going to do is we're going to go back to our page to our quote generator we're then going to say if this equals no because we actually haven't set quote received yet we're going to give that a save and now we actually have what is going to be this preview so if we click on this so to see how this is you know making the the background sort of blur it out and not as uh not as seeable and we actually see this image so what's really cool about the URL is that if we open this image in a tab so this is a real image that we can take we can drag we can move around with and that's what that blob is doing so it's creating this blob HTTP localhost 3000 and then it gives it this unique ID so that we can identify this in our local storage so that's why if you took this you could do copy image you could save this image you can open it up in a new tab or copy text from image or copy image address and that's all because we have this image and we can also see this if we inspect it we see that its source is now that so if we go back to our to our code so down here we have this image with the source which is the blob URL so the actual blob URL is this and that's what we generated with that base 64 encoded string so we take that really long crazy string of characters and then that is what gets compiled down into a blob and we use buffer along with a couple other modules to then turn that into an image that we can then save in our local storage which is awesome so this is exactly how we're gonna work and then we're going to have this download your quote button to download this image once we get this back from Lambda but this is the functionality and also just to show you some of the styling that we set up from before so as we make this smaller and make this more like a mobile application and we put that in the middle so now if we try to make a quote obviously we'll see that there we won't see that when we go there but do you see how now this is smaller and this is more contained in here and then if we hover over this this hover is actually smaller than the than the hover if the screen was expanded and we'll see that again to the here so this is much bigger than what we just showed on the mobile view so that's how media queries become really important when we are working with our Styles because then we're able to actually dynamically change how the style looks based upon the width of the screen so you'll have a different mobile experience than a desktop experience which makes sense because you have different widths on both of those screens so that's great so now we're going to be able to go back to our code and now we can start working on the script to receive this data from Lambda and then what we'll do is instead of getting this base64 string locally right we're going to be getting this in AWS Lambda returning back as a response so we're going to get a response object but it won't be locally stored it's going to be sent from our API through Lambda into our application and then decoded in the front end with typescript so it'll be the same exact process except we're actually going to get a blob URL that will be from not a response locally but it'll be from AWS so now that we have worked on this local testing of our inspirational quote generator let us of course get into the habit of doing another save so that we can start working from here so I'm going to do control Z just to make that a little bit smaller and now we're going to say local or say add local mock of quote however image blob so we'll make a commit to that we'll push origin and now we're ready to go so now that we're in a good spot with the front end now let us work on the Lambda function that we're going to be using to generate this this code for our quotes so when you go to your amplify folder there's a number of different subfolders but we're going to go to back end we're not going to go to API but we're going to go to function and we'll go to inspo quote Lambda which is what we just generated a while back now we're going to go to the index.js file and now we're able to see a starter template for our hello from Lambda function so basically what this is doing is that we're going to import types for AWS Lambda through an API Gateway proxy Handler and then we have our exports Handler which is an async event and then this is just going to console log the event so it's important to think about each of these every time that when you run a Lambda function that's an event and you can pass in data or test or input AWS Json into that event and then you'd be able to process it so you could do batch processing inside of a Lambda you could return a status code of 200 kind of like our response object from before so you could return a response you could just generate code in AWS and then have it do something and then there's nothing returned back really it's up to you in terms of how you want to configure your serverless scripts but for us we're going to be returning a response back to the user and that's going to be that that body response that we had before which is going to be that base64 encoded string so what we're going to do is that we're going to first open up package.json and we're going to see what's already installed with us so we have a name description the main file is going to be that index.js we have a license and we have some Dev dependencies but we're going to also need to install some actual real dependencies so we're going to do is that we're going to open up the terminal we're going to open up a new line we'll say clear and now we're going to do is that we're going to do CD we're going to drag this Source folder here so drag the path press enter and now if we do LS this is where we're in this directory for this location so now we're going to do is that we're going to clear this and then we're going to do npm I and then we're going to install some dependencies so we're going to want to do npm I so go back there so we're going to want to do types at types node we're going to want to install node Fetch and it's going to be a very specific version of node because we will need this for our Lambda if you do node Fetch and it's version three this won't work in Lambda because of how this is configured for the certain type of node.js that we're going to be using we need to make sure that we use version two because we use require statements so we need to make sure that we abide by that we also need to install path and we also need to install sharp and sharp was that library that we were using to composite our image together so we're going to do npmi and install these packages together and then this might take a couple of minutes and then we should see the printout there so now if we make this smaller we should see that all the packages installed correctly as we'd expect now what we can do is we can open back up our node.js index.js file and now we can start plugging away with our function so there are some things that we're going to need to do when we are turning our code sandbox code so this code into something that can work with Lambda so we have these packages that are installed right we have our our six steps we have our get random quote function we have that SVG right we have all these things and then we run get random quote so to take all of this code we're not going to be able to just import that into this Lambda function just like that we are going to need to make a few modifications but promise it's not that many things so something that we are just going to do is we're going to need to install some packages so we're going to declare AWS I'm going to say require let me say AWS SDK and something that we're going to need to do for our Lambda function is something that I think is really cool so when we are working with any sort of AWS service we need to allow for resource access controls so this is going to allow us to and these are really IEM statements or confirmation template modifications but when we want to have a Lambda speak to our database we're going to need to create resource access to allow Lambda to speak to Dynamo so the reason of why we're going to do this is that of course we need to run our code and generate the image but if you remember from before we wanted to enable a way where as you run this function we want to then update the database but that specific database object that we created before if you remember that quotes generated number we want to increment that by plus one every time that this function executes and that's a really cool way where you could have serverless code sort of that event driven architecture where something happens in a script that then modifies the database or you could have it where a database object happens and then a script runs it's really up to you in terms of how you are interested in event driven architectures highly would recommend checking out dynamodb streams it's a very very cool way to enable that event driven architecture within a database context and then with Lambda we're going to be checking out our resource access permissions to connect Lambda to Dynamo so we're going to be doing a couple of things here but to specifically to allow our Lambda function to speak to Dynamo what we're going to need to do is that we're going to open up the terminal again we're going to do and we can actually close this uh this terminal Window app because we don't need it anymore what we're going to do is that we're already here we could do amplify update function and I will bring this up just so that we can see this a little bit more easily so there's only one function here that we can select from so we'll do inspo quote Lambda now what's a really great feature about the AWS amplify framework is that it's already pulling in all of the data about our inspo quote Lambda it knows that this is a node.js runtime and then it gives us some information about what we've set up so we need to focus on the resource access permissions because this is going to allow us to speak to our database so what we're going to do is that we're going to do resource access permissions we need to focus on storage which is our data now what we need to do is that we want to be able to read and we want to be able to update so we're going to be able to read the database object and then we also want to update it so we're going to update it by incrementing by plus one the number of quotes that were generated each time that the function runs so we're going to select those two options with the space bar and then go down and then press spacebar and then you see that they're highlighted we're going to press enter and do you want to edit the Lambda function now we're going to say yes and then we'll press enter to continue and then it will be up here so now we're going to do is that there might be a little bit of a difference between what you were writing in your Lambda code and then what amplify and the CLI just generated for us so if you ever try to save this you might get an error where it says the content of the file is newer so what we can do is that we can compare and we see here that these were the Imports that amplify CLI wanted to add to our file but we had this code so something that we can do which is a handy shortcut is we'll press copy we'll copy this code and then we'll just we'll just exit out of this what we want to do is that we want to include this code into our file and not this so it will do is that we're going to say discard your changes and revert to the file contents so that button and now we see that these are the Imports that the amplify CLI generator for us and we can still you know bring in our code from before so what's awesome about this is that what amplify just did was it added these environmental variables so that we can pull from them and use them in our code and we don't need to hard code the table name or you know the Arn or the graphql API output we don't need to do any of that or the environment of the region we're able to just pull these in as environmental variables and this is the real power of building with a CLI like amplify because we're able to just work so quickly with our serverless architecture and really scale out systems without needing to second guess you know is this the right variable is this the right name we're able to just pull all these in pretty pretty quickly and also make sure that it is all code that is correct which is great so now to get these AWS packages this is how we're going to do the AWS components and then we're also going to have the image generation packages so to do the AWS things we're going to need the AWS SDK but just a handy thing to note is you don't need to do npm install AWS SDK this is actually a pretty big package and you wouldn't want to necessarily install that into your pack.json there actually is a scope down way in which the Lambda is actually able to know these different parts of the AWS SDK so you don't actually it's baked into the Lambda so you don't actually need to install it directly it'll just know when you call hsdk it'll just know what you need there are some exceptions though with certain services so you just might need to be aware of you might need to install you know AWS SDK slash client slash something just to get certain packages for certain services but dynamodb is one that we can already use that's baked into Lambda so we're going to do cons dot client and this is how we're going to create a new dynamodb client that we can work from so do new AWS Dot dynamodb dot document client and something that's also interesting about the um Amazon code Whisperer which I was using it was Auto it was already trying to auto complete the region but we don't actually need to do that because if we try to install um so basically because we're using Lambda with amplify the Region's already programmed into the Lambda so it'll know that we just need to install you know and run this specific AWS dynamodb document client and then it'll know that that's where that's what we're working from so now under the image generation packages we're gonna do cons Sharp and we can actually probably just copy some of these from before so we'll do here and we'll do cons Sharp and then also for fetch but you can copy that one so require node Fetch and then we are going to need to do those other ones so const path equals require path which you'll see later on when we use that and then const FS will require FS and I'm just going to make single quotes for all of these just to make it a little bit more organized great okay cool so now we're going to do is that outside of this Handler we're going to write our function that's going to update our dynamodb so we'll say function update dynamodb table for the function that we're going to write for our updating dynamodb table we're going to write an async function and we'll call it update quote dynamodb object and then we're going to have our const quote table name variable and that's where we're going to pull our inspirational quote table name and that's from dynamodb but this is how we're using our environmental variables to then call this so we're going to do process .env Dot that table name and that's uh environmental variable that was created for us by the amplify CLI now we're going to do quants quote object ID and that's where we're going to go back to dynamodb and we're going to copy that and that's where we're going to have a string for this value so we want to modify this specific object in our database and this is the database name now we're going to put a try catch and we're going to do catch the error and we'll of course console log error updating quote object in Dynamo and then we'll log that error so the actual code that we're going to be using is we're going to be using this params method to then update using a promise our dynamodb so it's already kind of constructing this value but we'll go through this together so when we do this we're going to do create a variable we'll call it quote params let's meet object so then there'll be a table name which we'll call quote table name there'll be a key which we'll call ID and that's going to be quote object ID then we're going to have an update expression and that's going to be a set and we're going to call this quote generated because that's going to be the value and we're going to make that equal to quotes generated plus a value that we're going to increment and that's where the Inc is going to come in then the expression at tribute value is going to be this so there's going to be an increment and that'll be one so we're basically taking this value and updating the update expression to then include a one so it's going to be the quote generated equals close generated already Plus 1. and these are going to be the same values so that will work great so now we're going to do is we're going to continue along we're going to say that there is an expression attribute names and then we're going to say quotes we can actually just copy this in case that makes that easier so quotes generated is quartz generated and then there's going to be a return values which is going to be updated new so we're going to be focused only on updating the new value every time that this runs then what we're going to do is that we're going to use this value this quote params when we're calling this Lambda function so we're going to do is we'll do const update quote object equals a weight because we need to await this function with your dot client dot update pass in those quote params into the update do you promise and then we're going to return update quote object and that's how we're going to be able to use this specific function in our Lambda script and then of course we're catching any errors where this doesn't work out that's great so now we're going to do is we're going to Now work on getting our code from code sandbox into our exports Handler so we can actually start doing the image composition as well but of course we can give this a save so we'll keep our console log for our event in there because we still want to track when events get created every time that we run the Lambda so now we're going to do is that we're going to go back to code sandbox and we're going to need this API URL because that's going to be important for when we use this inside of our event handler we're going to need to call the API random from Zen quotes then what we're going to do is that we're going to go back here and then we're going to take all of this code copy that we're then going to put that here so we're going to do generate the function generate so put that in there and we're going to need to make some changes here to how we're actually calling this because before we would just call this and then we'd be done but instead of generating an image we're going to need to generate this base64 string so that we can actually export that as a response and then the user will be able to see that so everything here is going to basically be the same we have our quote text we have our quote author we have our response which we're going to you know await and then fetch from the API input or here which is that and then we're going to need to pass that in so we'll just need to be cognizant of passing that into the function since this is the function that we're going to call but we put that we pass that in then the quote data is going to be some response.json and that everything else is looking pretty good right we have our SVG image which we're passing in we've already constructed this we know that this works but of course we're going to need to create some backgrounds because these backgrounds don't exist in the Lambda function yet so what we're going to do is that we're going to in our inspirational quote Lambda we're going to create a folder we're going to call it backgrounds and then we're going to copy those images that we already have from our assets folder which should be here but if you didn't already save them then we'll just need to open that up in our finder which you already probably have these saved locally and then I will just copy these and put these into here and now we have the file here so file here file here file here and then those become the backgrounds that we add so now when we call background images it's going to know that we're in here backgrounds and then it'll find those backgrounds in the folder so now we're going to do is that we are going to then go through random index we do all of those constructions that we generated before and we tested we know that this works and now we're going to do is that we're going to need to do a few changes here so this is where we're composing the image together we're going to need to make sure that we don't necessarily save it as an image but we're going to then save it as a string so we're going to do is that we're going to we we have the time stamp but we won't actually really need that anymore because we're not going to be using the timestamp but we are going to create this image path so this image path is going to be not necessarily the file right we're going to be creating an image that is a string and then we're going to pass that out so we're going to do path dot join TMP and that's for temporary storage so this is how we're going to be able to pass this string or this this image into our script next up what we're going to do is we're going to give this quote card.png and what we can do is we'll still have this that SVG is still SVG buffer is still there but we're really focused on this image path that's going to really be like the next part and you know we still sort of have that that image construction from before but we can kind of pass this up so I'm sort of doing a little bit of organizing here just so you can see what the elements are that are really important so these are really Legacy from before and then our new Focus we're focus on is this path.join now we're going to do is that could actually see how that was connected there but now when we do image path what we're going to do is that we're going to do image we're going to do composite do SVG I'm going to say instead of finals quote card timestamp we're actually going to do image path so you can see how like that applied to the other ones before but why we have it here is that we're taking this image path in temporary storage we're then going to put it with the image path and then what we're going to do is that we're going to do some updating to our Dynamo and then also run this response as the output so what we'll do is that we'll do update basically function update dynamodb object in table and then we'll do try and catch our we'll say unquote this that looks good and now in our try catch we're going to do update quote Dynamo to be object and that'll be a function and then we're going to return this as an output after our try catch so after this try catch with the error we'll then do that and we're going to be turning some code so we're going to turn status of 200 we're going to have some headers and Access Control allow origin we're going to want this one I'm not going to need headers for this but what we will need is content type and that's going to be image.png which is the type we expect and then after headers can do some formatting here now for the body instead of it being this we're going to need to do FS dot read file sync the image path and then we'll say two string and then this is where we make it a base 64 encoded string and then we'll say is base 64. encoded and we're going to make that true we close that out we do that and then we're going to say return I'll wait get random quote API URL and that will round out the rest of our landscript so let's go back and unpack really what we're doing here because this is like quite a lot of things that we are changing we're updating so we have this function here and we'll just close this out just so that we can see that so we have this function in here and we have this API input so what we will do is that given the series given this input into a function we want to fetch this random quote and then use that in our in our quote card so when we take this we basically pass this in and here and then that's where we're going to be then this function is a construction of two different functions which is hey make this quote but then also update Dynamo and that's why we're running this because this is going to be important for our script and we get that function up here so it has all of this code here and then that's what we're going to be updating so now when we run our exports Handler this is going to be all of the code that we run and we have our backgrounds we have all of these things and also just to go through some of this timestamp some of this SVG buffering so when we have SVG buffer we want a buffer from the SVG image that's what we had before but then we have this image path where we say path.join we put it into TMP and then we have quote card PNG as the name then under const image we're going to await with sharp the selected background image we then composite with the input is the SVG buffer and then that's how we're constructing it and then we say to file path which is image path and then we're going to be doing our try catch which is going to be updating our dynamodb object and then we'll of course catch that if there's an error updating Dynamo and then we're going to return a status code of 200 with the headers that we expect and that's going to be content type of image PNG which is that's how we would be getting this base64 string and in the access control allow origin is that and then in the body which is going to be some Json we get back we're going to have FS for read file sync which is going to include that image path we're going to put that to string and that's going to be base64. and then we say is basically for encoded meaning true so that we know that this is what the response object is going to be and then we're going to return a weight and we're going to get random quote with the API so that we're able to fully construct this script and get it to work so that's going to look great when we actually have this running live and now what we can do is that we'll give this a save we'll then pull up amplify status and now we're going to do is that we're going to check this out we're going to see that this function that we're working on has an update operation so now we know that we're able to push this so we're going to do amplify push and this is where we're going to be able to update our cloud formation stack with this change and we're going to say yes and now it's going to update our cloud formation stack to update that function and then our Lambda function our Lambda script will be updated in the Lambda console in AWS for us using our cloud formation stack updates all through the amplify CLI so I'm going to pause recording and then I'll resume it when the function is updated so that really didn't take very much time at all I think it took maybe a minute it actually might have been actually less but now we have all of our you know function updates that are needed and especially that resource permission between our dynamodb table and Lambda so now if we go back to Lambda console and we actually go and search for this function we're going to see that this was updated three minutes ago which was what we just did so we're going to click on this and now we see that this is the function that we're going to be working from also something that is just interesting to note is when we updated our permissions for our function we were updating our execution role for our Lambda function but now we have this resource for Dynamo so you can also look at buy action or you can also look at by resource and I think that this is helpful to see where now we allow access to get or update and that's something that our Lambda function now has access to and you can see these maybe a little bit better but these are all of the functions that we're able to then call or the resources permissions that we're able to call such as listing or getting or updating and this is why we're going to be able to update our dynamodb table because we added that permission to allow Lambda to speak to Dynamo so this is just helpful to think about when we have this Lambda script what's actually happening in the background which is great so now we're going to do is we want to configure a test because we want to see if this code actually worked so our code is going to be too big to see because when we when you start working with you know Lambda scripts and um and functions sometimes you won't be able to see the code because it's just like there's just too much for it to to show in the online editor but we already have the code locally so we know what it's doing so we're going to do is that we're going to create a new event to test this and see if we can get that base64 string to export so we're going to say hello Bass 64. and this is going to be a private event and we just need to really pass in something we don't really need it to pass in anything we just need to be able to invoke it so we'll do is that we will save this as a test oh and we'll get rid of that that comma and I'll be able to save it so now we can start running we go to test and this is where we're going to be able to be testing our Lambda script and see if we can get back a response so we see that something happened with sharp and it did not like something that we installed so this will actually be a good opportunity for us to then go and see what's actually happening with sharp and the package so that we can actually debug this and fix it so when you see these errors this can be very helpful because Lambda will try to give us some helpful data back about what's actually going wrong so it's saying that it can't find the module for Sharp and it requires some elements here so what we're going to do is that it'll give some possible solutions such as logging install this this all this but something that actually I think is a little bit sometimes more helpful instead of getting the the log here is that what we can do is we can go to monitor we can go to cloudwatch logs and then we're going to be able to actually see where our function is breaking down so with cloudwatch logs this is a really really helpful tool for checking out when your functions are running or you have processes in AWS and you need to see basically what's going on you can click on this and then it's going to give you information on what actually is is happening inside of your function so what we see is that we see this undefined error where it says something was wrong installing the sharp module and it can't find module sharp Linux this so there's actually a very interesting way in which we're going to need to install sharp for AWS so we're going to switch back to our Lambda script and we're going to open up this package.json and we're going to actually explain how to install sharp in a way that can speak with Lambda in the Linux environment that it's expecting to get the correct package of sharp that we're going to need for our Lambda script I'm on the sharp dot pixelplumbing.com install and they have a module on high performance node.js image processing and it talks about for serverless ES build you need to make sure that you install with this correct Arch x64 and then platform Linux sharp command so this is going to be important because when we just install sharp normally it has its own configuration but we need to make sure that we install this in the right way so that when we use our Lambda server this environment will actually be able to understand how to use sharp because that's the real issue that we were getting was we didn't install the right version of sharp for the environment that we need so the way in which we're going to fix this is we're going to do npm remove Sharp but we have to actually CD into that folder so we'll press clear we'll do CD we're going to drag and drop Source folder LS and then we see that we're in the right space which is great so now we're going to do is we're going to do npm remove Sharp and that's going to remove that package in the dependencies list now we're going to do if we're going to do npmi we're going to do dash dash Arch equals x64 and then we're going to do dash dash platform equals Linux and then we'll install Sharp so we'll install that and we'll wait for the package to install correctly and now what we'll do is we will X Out of This terminal and now we can do is we can do amplify status and if it doesn't register any changes because it might just see that sharp is the same and it's all installed correctly so what we can do is that we can just go back to our function we can literally just add a space we'll press save and then we'll run that again and we'll see if it's registering so that's just an easy way where if you add you know changes to your package.json you can still then just add a space save it to the Lambda function and then they'll be able to register and update something also that's important that we're going to need to do is we're going to need to bring this backgrounds folder inside of source so we're going to move that in there and now under Source will be able to reference these files relative to where we are so that's where we'll be able to then go back up to backgrounds and then pull these images down so this is also one of those examples where we are able to you know make some changes that are similar to code sandbox like before we could just have this backgrounds folder free floating but we actually need to put it inside of the source because we're using that inside of this index.js file so we're going to do is we're going to now once we've made those updates we'll do amplify status and our photos updated we'll do amplify push and then we're going to update our code with the file construction and then also with the changes that we made to the script and then we'll be able to test in Lambda once more to see if we're able to generate that base64 encoded string and send that as a response outside of the Lambda so now that our cloud formation stack has been updated once again we are going to go over to our Lambda function we're going to refresh it and now we're going to do is we are going to go to testing and we're going to run this test again and we're going to see if this worked so we see a much better message that we got this working okay so now what we're going to do is we are going to check this out so we got a status quo of 200 we got an image PNG and we got you know basically this response object that we were supposed to get and then we have a body and this is the super super super long string of our base64 encoded string so we can actually check this out by testing it and seeing if it's giving us a new a new code a new quote so we're gonna do is we're going to give this a copy we're going to go back to our front end we're going to close that terminal window and then we're going to go back to where our image blob is so in this previous example we had a body here now what we want to do is we want to add this here and we're going to basically do the same thing and we're going to see if we can get this to show that still says null so then we're going to go back here and we're going to see if we can get a new quote and it looks like we did but we're just going to test this anyway we're going to see you know this is the loading State there okay so this is great so we have our new quote there and that seems like that's working and we can try to do this one more time and see if it's going to give us another quote so we can do another test coming up to the top and looks like we'll get a new quote here so we'll go back here we'll go back and we can actually move some of that stuff around we'll close this out we'll then say body and then add quote there we already have a quote at the end of that and this can just go to the end of that and we'll do blob and looks like we got another one so that's great and then let's see if we can get just another image with another background just to see if that is working so we'll do another test it looks like the max memory was used so we're going to try going again yeah so it seems like that's all working great so we'll do another test we have our next image here we'll copy that bring that over to the front end and we'll do the body again and we'll do quotes put a comma behind there and we'll do that again we'll save that and we'll go to our front end alright great so we are getting you know a random background assigned and we're getting random quotes with the text the author our footer and our image so this is working great so now we know that we're able to take our Lambda function generate the base64 encoded string and then pass that back in the front end you know using you know the buffer method and then we turn this into a URL and another test that we can do is we can open this image in a new tab and this is actually going to open up so now we can do is we can refresh this old one and now this one actually doesn't show up anymore and that's because every time that we basically invoke this function we're removing this old blob URL so that's what's helpful where when you fetch this new item we're adding this in and that's why we can refresh this one because this is the active one but as soon as we were to replace this body and then add a new one this one won't exist so the image might get generated but it'll be a different ID and then it won't work and we can actually test this where let's say that we refresh this then we try to refresh now we actually don't see that anymore but this is going to be in a different one so you'll see that there is a difference between those IDs and that's why this one when we refresh this is the active one and we're able to see that but the old version we don't have that anymore so this is great so now we know that our Lambda function is able to generate this string the base64 encoded string we're able to decode that in the front end and now really all that's left here is that we want to tie up this Lambda call so that we're able to then get that response dynamically passed into our application we're going to switch out the quote and we don't need to keep setting it manually every time we can just programmatically have that working in the background and then display that for our users in the front end so let's do that right now so now that we have this function working to be able to take this string and then turn it into something that our users can see let's actually go back into our application and see what we got so if we refresh the page I'm sure you'll see that we get this quotes generated number and it's not zero anymore now it's changing so if we try to do this one more time we try to test it we'll be able to get a new value right and now if we go back to the front end if we refresh that number should before so let's see if it did that because we tested it and we did the same test we might need to run the test again so if we do test again try refreshing and now we do that so just if you are running through this just make sure that you refresh your Lambda you run through the test if you do that again now we refresh here now you get five so you'll have to refresh the Lambda every time to run the test but then you'll be able to get that working so that's awesome so now we have our Lambda script that is updating this dynamodb table every time that it runs so this is that event driven architecture where we don't have to manually update the database it's already doing that every time that the script or the function is invoked and executes correctly so that's great so now that we have this now what we're going to do is we're going to take our our image blob and we're going to pass down so instead of The Blob URL being set inside of this component we're actually going to be setting this outside of it through a fetch function so what we do is that we're going to be creating a function to get that quote string and then we're going to be able to bring that into the front end so and then use typescript to decode that string but we need a function that we can call publicly to think at that data point if you remember from the beginning when we set up our handle open generator function we had a try catch and we set that set timeout function and then we said that we're going to add some Lambda function code later but we weren't going to do it right now well the moment has arrived so what we're going to do is that we're going to be updating this function to then call our Lambda function and the way that we're going to do this is actually in a pretty crafty way using our API so we can just unpack this really quick so when we have our query here so we have this generate a quote query we're going to pass in some AWS Json and then as that input string we allow Public Access via IM to then run this function which is inspo quote Lambda so what we're going to do is that we're going to run this query this custom query to then run this Lambda function so in this code what we're going to do is that we're going to have a variable called const run function equals run function so it's going to be a string we're then going to stringify that value so we're going to do run function stringify equals Json springify and then we're going to add that value in here then we're going to do is that we're going to take a response of response equals a weight and then we're going to do API Dot graphql and then we're going to have a generate a quote test data quote data and then that's where we're going to start creating some autocomplete stuffs happening there we're going to start working on our query so we're going to do is that we're going to say for query we're going to say generate a quote and we can rewrite the last letter and then it's going to import generate a quote from our queries we'll then say auth mode is AWS IM then for the variables as our input we're going to put our run function stringified as that value and then we will do that we'll log that out and then what we're going to do is that we're going to try to stringify that response so we're going to do const response stringified equals Json stringify we're then going to restringify that response which is this value there then what we're going to do is we are going to do kant's body index equals response restring ified index of body equals this plus five on the next line we're going to have our const body and base 64. equals response stringified substring body index so overall what we're going to be doing is that we're going to get a response but it's going to be a lot of Json data what we're going to want to do is stringify it and then we're going to basically find where body equals this and then extract the string and then that's where we're going to have that element that we have in quotes we want to extract that from the response that we get so that's why we're doing all of this string manipulation to get to that value so then we need to get the body array equals body and base 64 and we're going to split it right there at that comma then we're going to do is we're going to do const body equals body array we'll get the first value of that and then we'll do console log body then we're going to set quote received as that body value then we're going to take out our set timeout because we don't need that anymore but I'm going to end state which is set processing quote to be false and this is because in the beginning we set processing quote to be true so now since we've gotten the response we want to set it to be false and then we also want to fetch with any new quotes for our generated from counter so then we'll do update quote info just as a function to catch for that so now this seems like a function that we'll want to do but of course with typescript we're going to need to create these props so what we're going to need to do is as I'm sure you've guessed it we're going to need to generate an interface so we're going to do is that we're going to create an interface and I'm going to put this above we're actually yeah we'll put that above so we'll say interface for our appsync 2 Lambda Json response so interface generate a quotient data then we'll do this that we're going to do generate a quote and that's coming from this value will then get a status code which is a number we'll then get headers and in this array we're going to get a key which will be a string and then that itself is a string and then the body is also going to be a string so that should log out exactly what we need so now we're going to do is that we're going to give this a save and then every time that this function runs we're going to hope that we are so in that function that we we just created right so in this try catch we get a response we want to be logging this body so the body is hopefully going to be that really long string that we usually put in quotes manually we want to be able to set that here so we want to see if we can log this and if we can log this we'll be able to pass this down as props into our child's component and then render that image dynamically so let us see if we're able to do that so I'm going to open up the console and I'm going to give this a refresh and then we're going to make a quote and then every time that this runs looks like we got it okay so we still need to work on the styles with the state but if you see this this looks exactly like r basic 64 encoded string that we would usually get so this looks awesome so what we're going to do is that we're going to just remember these characters and also just give a check just a gut check just to make sure that this actually is in fact giving us different values here so what we do is that and we also see that this is going to be increasing which is going to be great so now what we want to do is that we just want to check to see if this is going to be the same value or if it's going to be different so that's IB you are w oh yeah so it's a little bit hard to tell but it looks like right now we are going to be able to get the different values for our images but we'll still want to check to make sure that that actually is the case so just go the scroll back here so what we're going to now do is we're going to scroll down and in here under quote modal we see that we're going to be set processing quote as set processing quote quote is received there so we're passing down these properties into our component now we're going to want to do is we want to make sure that the quote received is actually a part of that now when we go to the image blob URL what we're going to want to do is we're going to want to of course remove this because we're going to be getting the blob URL outside of that so now we're going to do is that we're going to hide a lot of this code here just to make this easier we're gonna comment out all of this code like all of this code because we're already doing this outside of the function and we're not going to need it in there and then we'll comment this out because we're going to be passing that blob URL down through our image blob now something that we're going to need to do is it's going to say that there is a type error with quote received so we're going to try to find out what's up with that so now if we make this string or we make this null we can see if that will get rid of the error which it did so that's good now what we're going to want to do is in our check so we had that image blob URL which will give this a save there is this and we want to make sure that so remember when we were doing this testing so if Court received is not null meaning there is a value that's filled with it then we want to show it here so what we're going to now do is we're going to go back to our application we'll give this a refresh and we're going to see if we can call this so it's generating a quote and look at that so now it's working and then if we click out of this if we try to make another quote so now it's going to be making a new one so now something that I do want to do though is that let's make it a little bit cleaner of every time that we fetch because we still want to make it look a little bit smoother and I think that we can do that so what we're going to do is that we're going to go back to our function and what we're going to do is that we want to update some of these states to then refresh and clear out the quote so every time that you you clear out of or you click out of the modal will then be changing it so that it'll show creating your quote every time that a new quote is being generated as opposed to just switching in the image it's great that we have the image but we want to make the front end look a little bit more like it's generating the code than just the quote appearing you know kind of out of thin air so that's what we'll be doing next to fix that close function so that it looks a little bit more programmatic we're going to need to go back to our parent component and then open up the handle closed generator function and we're going to need to add a little bit more data to this so before we originally just setting the open generator modal as false so that it would close it but now what we want to do is we want to when we close the modal at any time we also want to set the processing quote to be false and then we also want to set quote received to be null so this is how we're going to set it where that type where we configured it before where it's either a string or it's no well anytime that we close it we want to set basically this modal to be false the processing quote you know the loading state to be false and then we also want to set the quote received to be null so that means that there's nothing in the quote received there's nothing for the blob URL to be showing we want to make it where there's nothing there so the way that this will work is that will refresh now when we make a quote we're going to get that loading state get that loading State and then we'll get that image and then that works like an image and that's great and let's actually open this up in a new tab these other ones we can close out of and then when we close this out we'll make a new quote and now it's going to reload it again and now we have a different image and let's open that up here so we have these two images but if we refresh this one that was the one that we we first called and this is the one that we just got so we're gonna refresh here and then still same deal let's make a new quote and then we have a new one so let's open up this one here and let's open up a new one and look at that so we have all these different images here and it's looking pretty good so far and of course we get the data this is all mapping against and uh against these updates to the function and if we make another quote we'll get that 12. so the data is also incrementing we also are getting all of the quotes generated and this is all happening without any sort of storage any sort of you know images being stored in cloud storage these are all just strings that then we decode in the front end so that you never have to worry about scalability concerns it's that it's sending the exact data that you want from your Lambda function to your user in the front end so this is a really cool way where you see how the backend code can connect to the front end and you can have a pretty cool working application and I'm sure you're wondering with that awesome download your quote button does that actually work and does that actually let us download our quote that we just received and it actually does so if we press this button we'll be able to save this to a folder and now if we open it we'll actually be able to see that and what's really cool is that this is a real image so we have text in there and that's where we're actually able to click on links and this is a real working image and let's say that we wanted to do another one so we generate one right there and now if we download this quote it'll already start you know making it where we'll say quote number one we'll open this up and check that out and now we have another one so again really easy really cool way to just add more functionality to your images that you generated and allow your users to also you know you could copy or save this image yourself you could also open it up in a new tab or you can also allow users to download that file so they can save that right to their computer and it's with that blog URL that was generated from that base60 for encoded string so as we review our application everything seems to be in order based upon what we're expecting and all the features that we're hoping to have as a part of our application so we'll refresh this again we'll make another quote and seems like everything is working as per we would expect which is great and we have the download button we have this we can you know make a quote generate a quote our dynamodb you know quote generated number is operating effectively so now we're going to do is we're going to take our localhost application and then we're going to put this right on the cloud with AWS using AWS managed hosting so one thing before we do that that'll be really important of course for us is to make sure that all of our code is saved so you don't have any anything left over in terms of code being need to be saved so we are going to of course just make sure that our amplify doesn't have anything that's impending for us to push to the cloud so there's no change there's no change there's no change which is perfect so that means that we are all set to commit this code locally so we're going to say finished build and we'll say finish local build so we will Commit This to Maine we're going to push this to GitHub and now now the fun stuff now the fun part begins so now when we have this main branch so what we're going to do is that we're going to and I'm going to draw this out just so that it is a little bit easier to see so when we have our GitHub so this is going to be GitHub and we have code here so this is related to our project so we have Main and that's the current build that we have so we have code code goes into GitHub and then that's stored and then we have all of this you know state right so we're tracking all these things but what we want to be able to do is that we want to be able to have a methodology where you push code it's given this prod characteristic that's going to go to GitHub and then GitHub is then going to run a build in AWS so AWS this is our cloud so that we're able to then have our code go on the production Branch go to GitHub GitHub isn't going to speak to AWS and then we have our www website that users can see when they log on and that's where AWS is going to be creating this website for US based upon the code that we come in because right now we're just managing you know git history and that's great but we really want to be able to do is commit to a specific branch have GitHub tell AWS to commit that code to a build and then we're going to be able to use that and we're going to use AWS amplify with managed hosting to be able to accomplish that goal so let's see how to add amplify hosting to our application to add hosting to our AWS project we're going to say amplify add hosting to our CLI now we see two specific options one is hosting with amplify console and that's managed hosting with custom domains continuous deployment and then the other option is Amazon cloudfront and S3 so we're going to choose amplify console for manage hosting because they also have support for server-side rendering and that's going to be really important for our application to be able to work dynamically and leverage all of the features of nexjs and typescript so then when we configure a type there are basically two different types there's continuous deployment which is git based through GitHub and manual deployment so we're going to choose continuous deployment now what we're going to do is that we're going to need to configure our AWS project so what we're going to do is that we're going to go back to amplify we're going to go to hosting and this is our application this is our app we're going to go to GitHub and we're going to press that we're going to press connect now we see that GitHub authorization was successful and unless you've connected this GitHub repository to your amplify project before in this drop down you won't see your repository so what we're going to do is we're going to go to view GitHub permissions and we're going to go to and now what we're going to do is that we're going to scroll and we're going to select the repositories that we want to be able to access so for this we're going to find the inspirational quote generator which is our first quarter repository there we're going to press save we'll see that AWS amplify Us East one was updated for my account now we will go back to so we'll go back to our AWS amplify project we'll press GitHub to reauthorize now in our list of drop downs we should see this right at the top and for main that's our current Branch but something that we're going to do is we're going to be a little bit fancier so what we're going to do is that we are going to in our GitHub desktop application we're going to create a new Branch we're going to call it prod and this is going to be our prod branch that we are going to configure so any pushes any commits that are made specifically to the production Branch we're then going to run a build on that so we're going to publish this branch and it's based off of Main and then we'll bring this away refresh the the actual page so we might need to run this one more time so we could use your previous press continue find our code repository there and now under Branch we should see prod there so now when we see prod we're going to click next and when we click to this next screen we're going to see the app name which is our amplify app name it's already Auto detecting that we're using next.js with server-side rendering which is what we're doing and we also are going to be using the amplify framework for our back end and what's really great about amplify hosting is that it's already pre-configured for the server-side rendering that is uh basically I think one of the strongest features of the next JS with typescript framework for building apps so this is already pre-loaded with that which is awesome so now as we scroll down we're going to select backend environment to work with this so inspirational quotes which is this app we're going to enable full stack continuous deployments with CI CD so that means that when we push to prod we're going to then be running a build and we're going to be using this Dev environment now something that you could do is that if you wanted to create new environments based upon your Cloud backend you could have a production Cloud Branch similar to as we have a prod Cloud branch that we're just using Dev just because we're just building this app but if you wanted to make this more robust you could have different types of cloud environments and then switch between those in your builds in your testing in your local you know development pipeline so just really good ways to Leverage The amplify framework for your whole team's development but we're just going to be using the dev Branch because that's what we configured and then we're going to select an existing role or create a new one so you could create a new role if you don't already have one configured but I already have an amplify console backend rule configured so I'm going to use this one and then what we can do is that we can also just check out what the build and test settings are so when we have our back end we are going to have some phases and in our builds we're going to use the amplify push simple script and that's just executing amplify CLI and then what we're going to do is that we're going to run through a pre-build which is I'm going to do npmci for getting node modules and then we're going to use this build commands to run our the build of our application because we're using xjs this is going to have as our export dot next folder and then we're going to be looking through the files of that to build our project and then of course with caching related to node modules this is an important step to make sure that you know your caching known modules and not you know keep installing them or keep adding to them over time but you could actually cache them and use them in subsequent builds if nothing is changing with your packages so you could also configure advanced settings as well and this can become really important when you're working with containers and with Docker so you could actually reference your own build images or use amplifies default build container so more you could learn more about this if that's something that's important to you in terms of containers and um you know really just building you know some sort of kubernetes deployment uh infrastructure um you can also add environmental variables in case there's certain branches that you want to work from there's certain environmental variables related to maybe API calls that you're working from or certain tools or infrastructure so just important to know that you can do that from this screen as well and then also we are you going to be using the amplify cli's the latest version this is actually really important because if you ever are running a build and you get an error related to maybe the CLI what you can do is that if you have previous builds that have worked you could revert back to the previous amplify CLI version this was actually an error that I had experienced and needed to revert back temporarily to a previous amplify CLI version and that was able to help me get over that barrier to use the right CLI to deploy my application so if this all looks good we'll click next and it's just going to have us Recon reconfirm all of the settings that we've selected so again we're using GitHub this is the application that we have worked on together we're going to use the prod branch in GitHub we're using the dev Branch that's the cloud branch and we're going to be using the default image this is our Dev Branch environmental variable of course we're using next.js with server-side rendering and amplify and it's Auto detecting these settings that will be used so as soon as we click save and deploy it's going to run through this build process to show how we can build our application to the cloud we will press save and deploy and now what it's going to do is that it's going to start running through these stages of our build pipeline and it gives us a nice graphical user interface chart of where we are in the process so what you can see here you can get actually a lot of really interesting details related to each stage and we'll be able to see how it's provisioning the docker image it's on a host with four V CPU and seven gigabytes memory and then it says that each build image gets its own host instance ensuring that all resources are isolated and the contents of the docker file are displayed below for your information so in case you want to see more of actually how this is provisioning our application you'll be able to see all of this which I think is actually really helpful to see how they're building the application in the background because it can become a little bit nebulous as to what's really going on now it's going to start cloning the repository from GitHub and this is a private repository so it is a secure connection to be able to get access to this build and then there's going to be a series of different steps that it will take from build to test to deploy and then that's how we'll be able to get this working now when you use amplify it's going to configure a branch name dot a number of characters dot amplifyapp.com so if we click on this and we open it in a new tab we're going to see something that looks like this so it's going to say that your app will appear here once you complete your first deployment so this is just going to be a placeholder you know index.html file until we're able to build this out and we're already getting some errors from here so we're going to need to figure out what's going on here and it seems like what ended up happening was so we can go through this set package Lambda failed with error command Fields exit and Pim install production omit Dev instead so there's going to be something related to inspirational quote Lambda known module is sharp that it did not like so this is where we're going to need to then go back and re-run our application because it seemed like it didn't like the specific package that we needed for our Lambda script so this is where we're going to need to figure out basically how to navigate this so we'll do that in the next step but if you also want to download the build logs you can also do that too and that can be helpful but sometimes also if you ever get any errors you'll need to then go back to the drawing board and see basically what went wrong and then figure out a solve so that you can get it to work so if you remember that we installed the sharp package in a very specific way when we were back in our code base here what we're going to need to do is that we're going to need to basically do that same thing so when we installed sharp with this specific version we also added a Linux version and we also added a uh x64 architecture uh flag so those were that was the arch flag and then the platform flag for Linux so we're going to need to make sure that we do that in our package.json and then in our build script we're going to need to make sure that we edit that as well so I'm back in the function so this again is under back end under function and then under package.json we're going to need to install uh have an installation script that we can then add into our application so under Main something you can do is you can say Scripts we'll give that an object press enter and then under here we're going to say install Sharp then we're going to say npm and PM install we're going to do dash dash Arch equals X 64. and then we're going to do dash dash platform equals Linux and we'll say sharp and then this is going to be a script that we will incorporate as part of our build script so then we're going to go back to the amplify dashboard we're going to go to our build settings and we're going to edit this and then you'll see here when we are trying to execute amplify CLI with the helper script so what we're going to do is that we're going to install a specific script for that function that we just ran so when we do npm run install dash dash Sharp with the prefix then under amplify backend function in spokote Lambda SRC that's where we're going to then be running this installation for that specific sharp package that's in our source then we'll do the amplify push simple command and then we'll be able to run our build related to that so we're going to press save now what we're going to do is we're going to go back to our function and then we're going to do amplify status and we see that there is a function that's updating and there's the hosting that's updating so we're going to do is we're going to say amplify push and then that's going to push our install Sharp script there to the cloud so we're going to be configuring that and then R amplify push command will be running to update our cloud formation stack and I will pause this recording and then resume it when all the resources are pushed to the cloud and then we can run a build again so now that our code was pushed to the cloud something that we can do is commit directly to production and something also that we can do is we can switch to the main branch and we can say bring my changes to Main we can say we'll switch branch and now we're going to do is we're going to say updated Lambda install script for built we'll Commit This to Main we'll push this and now what we're going to do is we're going to go back to our GitHub repository we're going to go to pull requests and actually we could just go back to code and just validate that the code was just pushed so we'll do refresh and we just committed code literally just a moment ago so we'll go back to pull requests we're going to do new pull request we're going to do Main and then we're going to push to production so that's the before this is the after so we're able to merge that we're going to create and this is the script the um the GitHub commit that we just made so we'll do commit to this we're going to create pull request and then we'll merge the request and we'll confirm merge and now if we go back to our amplify project we should be able to see that we now have a build running so this is a really cool aspect of CI CD is that as soon as we committed to the production Branch we now are able to have a build running to then build to this URL so now it's going to go through those same processes this is build number two and now we're able to see that we're able to go through the provision stage and access all of these same steps that we had before except we don't have to really tell the application to or the configuration to do anything it's already going to start building our application because we set up the CI CD rules for it so now when we go to this build it's going to be cloning our repository once more and we're going to wait until it can start configuring our application so we'll just have to wait until this build continues and then we'll be able to keep watching for it but it seems like it's done with the amplify CLI and now it's going to go to the back end so now we're going to see if that back end patch fixed our build error so the schema was compiled successfully we're now going to be updating and uploading those files and we're going to be waiting for a success marker about if the Lambda was updated so so far so good seems like there's the update that's in progress and it's going to be checking to see basically those changes that we worked on so we have our update in progress and this is just going to be configuring our stack there's also some elements of appsync that look like they're in there so we'll just wait for this to configure and go through the build process so now it's going to be continuing to go through and uploading the files and looks like our API worked great and it initialized the environment successfully and we were able to complete the builds process so that was awesome that we were able to configure this correctly and that push was able to solve that build error that we got so now it's going to start in this next phase which is the front end build it's going to be taking our code that we just pushed and this is really important because when we are pushing back-end code and front-end code we want to make sure that the back end and the amplify framework is compiling everything successfully so that we can then build everything together because the front end is dependent upon the back end working so now that our back end was able to be built correctly through that patch that we put through now we're able to then make sure that our front end works which it will so now it's going to be generating the static pages and then it'll also be adding in the server side renders for server-side rendering as well so now it's creating the cache artifact and uploading the cache artifacts and the caching was complete the environment caching completed as well and now it's going to terminate logs and then we should be able to have a living breathing URL momentarily so this is exciting so this is where our application is finally going to be able to be pushed to a actual URL and we'll be able to take this off of localhost and push this onto a domain that people could use and you'll be able to send this URL to you know your friends family your colleagues anyone that you want maybe a potential employer and this is an application that you could share and show that you built it this I think is pretty exciting so now that we have our deploy script set up we can go back to this URL and we can see if it built so we'll give this a refresh and we'll wait for our app to load all right so this is pretty exciting this is the application that we built and the Styles seem to be working there we can also check to see if it works so let's make a quote it's going to be generating a quote and look at that so this is our actual script and we're able to run it now on an actual domain in an actual URL so we can also you know download that quote card if we wanted to and this will work the same way and if we wanted to do that we could see that here and then this is that quote that we got so everything seems to be working completely and this is going to be updating as well we'll make another quote and this is another one 18. we'll add another one 19th quote that was generated and these are all real images that we are fetching and of course this is still using our local storage with our blob URL so we can test that again so let's say that we want to make another quote so now we'll open this up in another tab that was one we just did we'll refresh this and this of course doesn't exist but this one still does and then if we make another quote we'll open this one up that one won't exist but then this one will so this is pretty awesome so this is now working and we have a fully functional application that is running so if you want to you know build Graphics in the cloud you can totally do that and this is an application that shows that this is all possible all right congratulations you just built an inspirational quote generator and we did quite a lot of stuff so we configured a nexjs with typescript and style components application we created our own API we created our own serverless infrastructure to generate an image and we also created a processing system where we're able to create continuous integration and continuous deployment from our code to our cloud and deploy that live with a real URL and created a whole application to support that whole workflow so I hope that this project was really insightful and helpful for you and I would love to see uh you post about what you're building on social whether it's this project or another project I'll include my handle it's Brian H huff and I would love to just you know hear what you're building and I'd be happy to support you in your journey building full stack applications microservices and anything on the internet internet so with that I hope you have a great rest of your day afternoon or evening depending on wherever you are in the world and I hope that you continue to build really cool technology all right take care everyone bye

Channel: freeCodeCamp.org

Views: 85,310

Keywords:

Id: FRmCxj9K7II

Length: 366min 1sec (21961 seconds)

Published: Mon May 22 2023