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

Key Takeaways

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 goin