freeCodeCamp.org
In this Full-Stack Next.js, TypeScript, and AWS course, instructor Brian Huff creates an inspirational quote generator that generates images using various technologies. After building the quote generator's basic process, the instructor proceeds to set up a Next.js app with TypeScript, install and integrate the Styled Components Framework, add custom styles, and organize the project structure. He then demonstrates how to add a gradient background component and image, create a dynamic footer with a React hook, and add styles to the footer. Brian explains and shows how to use Git and GitHub as version control for the application and debug the code using the "Elements" tool. The tutorial is ideal for anyone interested in creating Progressive web applications with one back end, using managed services for scaling, and building serverless infrastructure.
In this section, Brian Huff introduces the course and what he will be teaching. He explains the project he built and how it works, which is an inspirational quote generator that generates images using nextjs, typescript, and AWS. He discusses his background and experience building on the cloud and how he became passionate about creating serverless infrastructures, data models, and ways to construct technology. He hopes this tutorial will help users turn their ideas into code and into a real application that they can use on any device.
In this section, the instructor explains how the quote generator project works at a baseline level. Users generate a request, which AppSync processes via GraphQL to connect to an AWS Lambda function. This function generates a base 64 encoded string that later gets downloaded by the application once it reaches it. This project is ideal for individuals who want to learn how to create Progressive web applications with one back end that can service various front ends. The instructor is excited to show the audience how to create serverless infrastructure and use managed services that help with scaling. Git and GitHub will provide version control for the application, allowing users to review their code, and revert changes that have already been pushed into production. Having a GitHub account will enable individuals to create their project Repository and set up their project with GitHub desktop.
In this section, the instructor sets up the Next.js project by using the Next.js documentation and creating a Next.js app with Typescript. They then move on to installing style components, a CSS-in-JS styling framework that allows for creating functional components for all styles. The instructor explains that this makes it easier to replicate templated components throughout the project and improves readability across the codebase. They also add a DOT Babel RC file to allow for using style components in the project.
In this section, the instructor discusses the configuration required for integrating the Styles Component Framework into the codebase. They walk through the various configurations settings such as including Styles Components under the compiler, setting the display name and SSR to true, and installing various files. They also provide an overview of what Styled Components Framework is and how it works, highlighting its benefits such as creating dynamic styles, passing properties, and re-using components throughout the codebase. They further explain that it can reduce redundancy, save a lot of time, and improve code efficiency. Additionally, they discuss the Babel Styled Components Plugin that needs to be installed to get server-side render compatibility, legible class names, smaller bundles, and more optimizations.
In this section, the instructor walks through the process of installing style components and the style components babel plugin as dev dependencies, and explains how to troubleshoot the "module can't be found" error using a VS Code command. Next, the instructor updates the Next config JS file to add a custom server-side rendering configuration. They then remove unnecessary code from the index file by deleting imported elements and changing the header to "Super Quote Generator". Finally, the instructor runs the project in the browser and verifies that the header has been updated.
In this section, the instructor shows how to set up the project with custom styles, remove the starter template, and apply global styles. To create custom styles, the instructor navigates to the Styles subfolder and removes all the existing starter templates. The instructor imports fonts from Google fonts and explains how to add a font to CSS. Once this is done, the global styles are applied to the project and the instructor shows that the background is white and styles have been applied in VS code.
In this section, the instructor begins by organizing the project structure by creating a components folder and a quote generator folder within it. They then proceed to build a dynamic background for the project using styled components. They encounter some type errors due to TypeScript not recognizing the use of styled components, but resolve it by installing "dev dependencies with types for styled components". They create a gradient background component called "gradient background con" using the style div extension of styled components.
In this section of the video, the instructor explains how to add styles to a div or a background using linear gradient. The linear gradient gives a modern and polished finish, making it perfect for creating dynamic styling for div or background. He explains how to add an oscillating effect for the background by expanding the background size and making it move back and forth. He then explains how to add an animation called gradient that will run every six seconds with ease and infinity effect. The instructor demonstrates the power of styled components by wrapping all the elements and animations together and creating a package component. Finally, he shows how to import the styled component to the project and how it saves a lot of time by reducing guesswork that usually is a part of adding keyframes, hover effects, and other styles.
In this section of the video, the instructor demonstrates the process of adding a gradient background component to the project and committing the changes to a GitHub repository. They explain how this is a good best practice to adopt, as version control allows developers to go back to previous commits if needed, providing a history of the development process and saving time overall. The instructor then moves on to adding images to the background by creating two different components and positioning them in the top left and bottom right corners.
In this section, the instructor walks through how to add a background image to the quote generator app. They create a styled image and import it into the app, but encounter an error due to a missing style component, which they then create. The instructor shares a tip on how to debug code and styles using the "Elements" tool and shows how to adjust the positioning of the image using CSS. They then copy the code to add a second background image and make adjustments to ensure it is also positioned correctly.
In this section of the video, the instructor creates a footer container in the index.tsx file that will dynamically generate the number of quotes generated and display it on the front-end. The number of quotes will be stored in useState with the React hook. They also add a footer link that includes an href to their YouTube channel, which will open in a new browser tab. Additionally, they explain how to use F12 elements and selectors to find and edit styles in the browser before moving them back to VS code.
In this section of the video, the instructor walks through how to add a footer to the website using styled components in Next.js. They create a footer container styled component and add properties such as width, height, text alignment, font family, font size, position, and color. They then create a state hook for the number of quotes and set it to zero with correct typing using TypeScript. Lastly, they create another component called footer link and overwrite the default styles to change the color of the text to white.
n this section, the instructor adds a red heart to the quote generator and demonstrates how to use an inline span instead of a div to avoid affecting spacing and layout. They also cover the use of useState to assign a base value to the quote generator, which will be hydrated with data fetched from the database using useEffect. The instructor then introduces the Material UI framework and their modal component, which they will use to create a pop-up modal for the quote generator in the next section.
In this section of the video, the instructor walks through the process of installing packages for the application and then proceeds to build out various components, such as the quote generator modal and its inner container. He explains that they will be using the Zen quotes API to generate a random quote and praises the ease with which it can be used. Overall, the focus is on setting up the foundation for the application and building out various components that will be used later on.
In this section, the instructor creates a button for generating quotes in their full-stack Next.js, TypeScript, and AWS course. They include some button text and an on-click function that is currently a null function. They also introduce the popular style called glassomorphism and use a glassomorphism generator from hype4.academy to style their components. They create the style for the quote generator container, which includes a minimum height and width, a border, a border radius, and a glassy outer effect added by a box shadow and backdrop filter. They also use a transform manipulation to center the container within another div and give it a border.
In this section of the video, the instructor discusses the styling of various components of the quote generator such as the background, title, subtitle, and quote button. They explain how to create a div within a div over another div to center something within something that's centered and how to use media queries to make the text more readable on different screen sizes. The instructor also provides a glossomorphic effect for the quote button and explains how to apply on-hover effects using styled components in React.
In this section of the video, the speaker adds the finishing touches to the quote generator by implementing a glossomorphic effect on the button that increases its brightness by three times when hovered. They then create a centered div for the text inside the button with white text color, 35-pixel font size, and font family of Caveat. They also talk about the usefulness of using an online IDE like CodeSandbox to build out scripts and components before implementing them into the application. The next step is to work on the back end, create a Lambda script, and establish a connection to the cloud to fetch data back from Lambda.
In this section, the speaker discusses setting up a node.js environment in CodeSandbox and thinking through the functionality needed for the quote generator script. The script will need to fetch a random quote, turn the quote text into lines, create a line for the author, add a quote image, turn all of these elements into renderable SVG, and turn that SVG into an image file. These steps are listed in the readme file for future reference. The speaker also notes that the image file in Lambda will be a base 64 string rather than an actual file.
In this section of the video, the instructor begins to configure the server by installing necessary packages such as Sharp, which is required for image processing, and a specific version of Node Fetch for fetching data outside of the server using Node.js. They also create a new directory for random background graphics and add some colors from uigradients.com. Additionally, they create a "finals" directory to store generated images. The instructor then creates an async function called "get random quote" and declares two variables, "quote text" and "quote author", which will change as they get data from the API endpoint.
In this section of the video, the instructor demonstrates how to validate a response from an API using fetch to retrieve random quotes and turn the response into JSON data. The instructor explains the process of how to access the API endpoint to fetch data and create a response, which can then be mapped into JSON format for use in the application. By running the code multiple times, the instructor demonstrates that the random API generator is working and that the get random quote function is functioning properly. With the function properly set up, the instructor moves on to working on some of the image generation components while also continuing to validate the response from the API.
In this section, the instructor is constructing the image and quote elements to be used in the quote generator. They set a variable for the width of the image and construct the text for it by splitting the quote text into words. To format the text for the graphic, they use a for loop to map a list of words into lines that don't exceed four words each. This is achieved using a string manipulation technique that uses line breaks to separate lines of text and a conditional statement to add a line break after every fourth word. The resulting T span elements are then used to create the final graphic.
In this section, the instructor works on creating the t-span elements for the quote text. They create a new variable for the text width and adjust the font size to ensure that the text fits on the screen. They then console log the t-span elements to ensure that they have been mapped correctly. After this, the instructor moves on to constructing the SVG image and creates a new variable for it, including the necessary mappings.
In this section, the instructor is setting up the SVG that will be used to display the generated quotes. The SVG will have a circle and text for the quote with mapping of Styles inside. The quote and author will be separated by a t-span element, and the footer will feature an attribution message. All of the elements are then grouped together within the SVG. Finally, the SVG is closed, concluding the section.
In this section of the video on building a full-stack Next.js, TypeScript, and AWS quote generator, the instructor adds background images for the SVG creation and chooses a random image from the array using a math dot floor. Next, he composites the image together, using a buffer as an image transformation library and sharp to generate the image. Finally, he names the file and calls the API.
In this section, the speaker tests the script created in the previous section by running it multiple times, generating random quotes by different authors and mapping them onto different backgrounds using Node.js. The speaker also modifies the code to include timestamp and local strings. Next, the focus shifts to setting up the cloud environment and establishing the series of front-end listeners that will use the API endpoint to listen for the generated quote, send a response to get the quote card, and display it on the front end. The AWS Amplify CLI is introduced as a tool for deploying AWS resources for a full-stack software project.
In this section of the video, the instructor explains how to configure and amplify IAM user as well as the amplify CLI. Configuring amplify IAM user is essential to enable amplify service to build the required services for your cloud formation stack. The instructor explains that you could set up the IM user by creating a name, attaching the administer access amplify policy name, and getting a key-value pair. Once you have the key-value pair, you can retrieve your access keys and save them to your AWS credentials file to configure access for your applications or CLI to work with AWS. The instructor then goes on to demonstrate how to set up amplify-init, which creates a new directory in the root called amplify. This directory contains a config document with project and AWS information.
In this section of the video, the instructor explains the role of the Amplify CLI in the application development process and how it interacts with the AWS cloud formation stack. The Amplify folder is where your root cloud formation stack resides, and it is dynamically updated by the Amplify CLI whenever resources are added or removed. The AWS exports.js file located in the SRC folder of the application is a JSON object containing key-value pairs that represent the application's resources. To access the Amplify API, Cognito, or other AWS services, developers must call these resources using the exported keys in the AWS exports file. The instructor demonstrates how to install the necessary Amplify packages and configure the app.tsx file to enable the application to call the resources and leverage Amplify's services to build the application.
In this section, the instructor begins building the Cloud infrastructure for the app. They navigate to the Amplify service in AWS and check the stack's status. They then add an API to the application using Amplify. They configure the schema, choosing a single object with fields option, and edit the schema that has already been compiled correctly. The instructor also explains the authentication process for IAM and how to disable global access and allow access to specific roles. Finally, they note the different options for configuring additional authentication types, including API key, user pool, and Lambda authentication.
In this section, the instructor explains how to configure the query, public data, and auth directives in the backend schema for the quote generator application. The first step is to create a query with an input type of AWS Json that calls a Lambda function. Then, a public data object is created to track the number of quotes generated. This is done through configuring a DynamoDB table with rules for allowing public access to read only. The table has fields for ID, query name, quotes generated, created at, and updated at. Finally, a global secondary index is enabled on the query name for more effective querying of data.
In this section, the video creator demonstrates the process of configuring authentication for the application with AWS using the Amplify CLI. The process involves setting up a username for user sign-ins, configuring advanced settings, and enabling unauthenticated logins via AWS IM for public API access. The creator explains its importance and how it allows IAM to do public authentication if required. The video then walks through different auth configurations, including enabling third-party authentication providers, user group pools, multi-factor authentication, user-based password reset, and more. Finally, the creator demonstrates how to configure Lambda triggers for Cognito and OAuth flow.
In this section, the instructor demonstrates how to add a Lambda function to the project using Amplify. They configure the Lambda function to have a name, environment, and select a template. The instructor explains how Amplify provides various options for configuring the Lambda function, such as Graphical API, crowd function, GraphQL Lambda, authorizer Lambda trigger, and serverless Express function. They choose to use the hello world template and not configure advanced settings. Next, the instructor shows how to push the created operations to the cloud using Amplify push and generate the code for the newly created Graphical API. The demo showcases the update-in-progress status around the Lambda and auth resources that were created and deployed.
In this section of the video, the instructor walks through the resources that were created and updated in AWS. They show the API file with data that maps to the GraphQL schema, the GraphQL endpoint, and API key. The GraphQL Transformer was generated and they explain that using GraphQL with AppSync is great because all the data is auto-generated by AppSync, including queries and mutations that are scoped to the conditions set up in the API, and that subscriptions can also be configured. The instructor then shows how to add auth directives back into the schema to prevent certain users from accessing certain features. They explain that with Amplify working with CloudFormation, you only need to update the resources in the stack that need to be updated, and everything else will stay the same.
In this section, the video discusses the successful generation and saving of the GraphQL operations to the source graphical folder. Additionally, the api.ts file is updated with the latest queries and mutations. The video checks the Amplify project and finds that new resources have been created, including API, authentication, and functions. Upon clicking on API, it is revealed that there are data sources associated with the inspirational quotes Dev API endpoint with GraphQL. The video then proceeds to create a public data object in NoSQL, which will be queried from the front-end and incremented by plus one every time a quote is generated. The video explains that this value will be handled by Lambda. The video also provides a script for generating AWS date timestamps for created at and updated at.
In this section, the instructor sets up an AWS date time stamp generator using node.js and the moment package. They walk through how to install and use the moment library to create the date format they want and demonstrate how the script generates an increasing number each time it runs. The AWS date time stamp can be used for any project requiring this type of string, and the instructor adds it as a value to the DynamoDB item they created. The JSON object structure of the DynamoDB item is explained, and the instructor switches back to the front-end code to replace the hard-coded quote generation count with a function that calls the API endpoint to retrieve the count dynamically.
In this section, the instructor emphasizes the importance of pushing all code changes made to the GitHub repository and adds API, Lambda, auth, GraphQL, and all back-end changes. Moving forward, the instructor intends to update the number of quotes the app displays, retrieving data from the DynamoDB table through AppSync to set the number of quotes when the value is called. Since the project uses TypeScript, the instructor creates interfaces for the DynamoDB object and type guards for the fetch function before defining the data type. The instructor then moves onto discussing the function required to retrieve and update data.
In this section of the video, the instructor explains how to fetch data from DynamoDB using GraphQL queries in an async function within a Next.js functional component. They use a try-catch block to handle errors and import the API module from the AWS Amplify library. They also show how to use the use-effect hook to invoke the function and console log the response to ensure that the object is being fetched correctly. The use of react hooks is emphasized to ensure that side effects are properly handled and to prevent constant invocations.
In this section, the video instructor shows how to run a function using the useEffect hook in React to query data from DynamoDB on page load. They demonstrate how to test the query to ensure it is successfully retrieving the desired data and explain the importance of using TypeScript to understand the nested data within the response. They also discuss how to write a type guard function to check against expected values and how to define the type that we want for our response.
In this section, the instructor explains how to create a code that fetches data from a database and updates it in real-time. The code uses GraphQL to retrieve data and checks the response to ensure that it is valid. Once the response is verified, the code calculates the number of quotes based on the value it receives and sets the number of quotes to match the value given from the database. The instructor demonstrates how the code can be edited and saved quickly, and the page can be refreshed to reflect the changes. Overall, this section of the video showcases how Next.js, TypeScript, and AWS can be used to fetch data dynamically and display it in real-time.
In this section of the video tutorial, the presenter demonstrates the use of appsync for fetching and getting dynamic data and using Lambda to generate the quote string in a full-stack Next.js, TypeScript, and AWS course on coding a quote generator. The presenter then works on the functionality of the button in the Lambda component's front-end and creates a react functional component for the code generator. The presenter also explains the use of extensions from the extension store to save time while configuring imports and building out components. Finally, Material UI is imported to create a modal component for the quote generator.
In this section of the video, the instructor shows how to add a modal component that appears when the user clicks a button. To create the modal, various inputs are needed, which are explained in detail. The instructor uses useState to set a boolean value for opening the modal and creates a close function using a handle function at the top. The open and close functions are passed down from the parent component to the child's component. Some errors in the code are fixed, and a new import is added to make it work.
In this section, the instructor continues working on the quote generator app, setting up a function to handle the opening of the modal when the user clicks the button. They use TypeScript to define the types of values that will be passed into the interface and get rid of errors. Then, they import the backdrop element from Material UI and set up the fade effect styling for the modal, making the app look more polished.
In this section, the instructor adds text to the material library in order to test if the quote generator can function properly. They also add some code to create new constants such as processing quote, quote received, and set processing quote. The instructor discusses how they will pass these variables from the parent component to the child component. They also define the types of state actions and are able to pass these inputs as props into the child component. This will allow the quote generator to generate a quote and pass it back to the parent component. The code is still in progress and styles need to be added, but the basic functionality of the quote generator is complete.
In this section, the instructor creates a quote generator modal container using Material UI styling. They explain how to style the container using the styled box and styled div components and center it on the screen using the top 50 left 50 transform translate minus 50 minus 50 properties. They also add a box shadow, background, border, and backdrop filtering for a glossy effect. The inner container is added and styled within the modal container for better organization of the application. The output looks good, and the modal container disappears when clicked outside or using the escape key.
In this section, the instructor begins working on adding elements to the page by creating two different states. The first state is "processing quote" which displays when the quote is being fetched from Lambda and the quote state is empty. The second state is "quote received" which displays once the quote has been fetched. To ensure that the front end operates correctly based on these states, the instructor passes down properties from the states and uses conditional rendering using the '&&' operator. A component for a circular progress meter is created and given data such as size and thickness. Finally, a quote generator subtitle is added with an inspirational quote displayed in a span with the font size of 26.
In this section, the instructor defines the constant values and styled components required for the quote generator. They create a quote and an author constant, which are passed down to the child component. The instructor then creates the styled components using exsc for the modal circular progress, generator title, and subtitle, using font family, font size, position, margin, and other properties. After passing the properties down to the child component, the instructor removes the state variables and tests the modal to confirm that it displays a loading state message when clicked.
In this section, the video discusses how to pass values back into the quote generator and update the processing quote status. The function that handles the try-catch for the handle open operation is modified to set the processing quote to true before running through a lambda function. The try-catch is then set up to log the error and set the processing quote back to false once the function has timed out. The video then introduces using a set timeout function to model how the process would work before implementing it on AWS Lambda. This generated component sets processing quote to false after a 3-second delay to emulate how it would work online. Finally, the child's component is taken to the parent component as a prop, and the handle generate quote function is modified to pass the fetch request to it.
In this section, the excerpt explains how to change the state of the quote generator if it is fulfilled and how to create a download and visualization for the quote. The code checks if the quote received is not null and if so, it creates a separate div for download and visualization. The next steps include creating a quote generator title, a download quote button, a quote generator subtitle, and an image blob container with elements defined in it. The tutorial also includes modifying styles to eliminate the default focus around the outline. Additionally, the tutorial explains how to make the image blob container interactive by creating animated elements.
In this section, the instructor explains how they import the image module from Next.js to animate a pop-up. They create an image blob container and import the styles for this component. They also show how to create a new file for animations and imports elements from previous sessions. The instructor explains the code step-by-step and adds media queries to ensure that the image does not expand past the width of the screen while scaling it by a factor. Finally, they explain how to create an animated download button and create a new functional component for it in animations.
In this section, the instructor shows how to install and use the react-lottie-player package, which allows for animated effects instead of static effects. The react-lottie-player package requires the import of the react-lottie-player module from the top of the code. The package also requires adding a react-lottie image file to the assets folder. The instructor demonstrates how to import the Lottie Json from the assets folder and add it to the page. They then create a download quote card container with an on-click event and a button, which is set to null. Finally, they create the Center Lottie component, which is given several styles including "loop" so that the image can loop continuously.
In this section of the video, the instructor is working on styling the quote generator with animations using the Lottie package. They create a download button with a looping animation and on-hover effects. They discuss how Lottie images can add interactivity to an app and provide a more engaging user experience. They also add styling to the quote card text with a max-width media query to adjust the font size based on screen size. The instructor emphasizes the importance of adding these interactive elements to give users a better experience and make the app more enjoyable to use.
In this section, the video tutorial focuses on passing two specific variables, "quoteReceived" and "blobURL," as properties into a child component and then into a function. The "blobURL" variable is set to null in the beginning and will be updated once the function is invoked. The tutorial then proceeds to write two functions, "handleDownload" and "handleReceiveQuote," which handle the download and receiving of the quote card respectively. These two functions are then passed down as properties using an interface for the animated download button component.
In this section, the instructor focuses on creating a function to handle the receiving of the quote string. This function is important because it allows us to either add the quote string as the blob URL or revoke and remove it to make space for a new quote. The instructor uses the useEffect hook to run this function whenever the quote is received. They also use useState to set the blob URL and return it. The function makes use of buffer and URL dependencies to generate and store the blob URL in local storage. The instructor also creates an interface to store the values of received blob URL and image blob.
In this section, the instructor demonstrates how to properly type values in TypeScript while building a quote generator on Next.js and AWS. They also mock up how the response would look like when getting the image back from the Lambda script, and how to set that image in the application by using a huge base64 encoded string to represent the image. The instructor creates a response object with various variables, including a status code, headers, and a base64-encoded image string, compounding it into a blob URL that outputs the image.
In this section, the instructor discusses how to build an image generator using TypeScript and AWS. They start by showing how to set the blob URL in response to the API request. They explain how to create an image component with the blob URL and set the alt text. They then show how to use a preview that generates a blurred background with the generated image. The video explains how to create a unique ID to identify the image in local storage and copy or save the image. Furthermore, they also provide a tip to reload the window and sync up TypeScript changes in case VS code becomes slow.
In this section of the video, the instructor explains how to use a blob URL instead of locally storing a base64 string that was generated from the quote image. This is done using buffer modules and other tools to turn the base64 string into an image that is saved in local storage. Media queries are also discussed, which allow for dynamic changes in the style of the website based on the width of the screen. The instructor then moves on to explaining the process of using a Lambda function to generate a code for the quotes. The function imports types for AWS Lambda and exports a Handler that is an async event that logs the event and returns a response object back to the user.
In this section, the instructor installs necessary dependencies for the API and walks through the steps required to allow Lambda to communicate with DynamoDB. The instructor installs typescript, node-fetch, path, and sharp using npm i. Then, they declare and require the AWS SDK and explain the importance of resource access controls for enabling Lambda to modify the DynamoDB database. The instructor highlights the event-driven architecture potential of using DynamoDB streams and explains the needed steps to connect Lambda to DynamoDB.
In this section of the video, the instructor explains how the AWS Amplify framework is already pulling data about the 'inspo quote' Lambda function and giving information about the setup. They focus on the resource access permissions, which allows speaking to the database. They select the options to read and update the database object and increment it by one each time the function runs. Amplify adds environmental variables to pull data from and use in the code, and users do not need to hard-code the table name, etc. To get AWS and image generation packages, they use the AWS SDK, and they explain how Lambda can know different parts of the AWS SDK scope down and the exceptions that may require installing certain packages. Finally, they show how to create a new DynamoDB client to work from.
In this section, the instructor discusses the code for updating a DynamoDB table with an async function. The function is named "updateDynamoDBObject" and receives the parameter "table," which is the environmental variable created by the Amplify CLI to call the inspirational quote table name. The function then constructs an update expression using the quote ID, quote generated, and a value incremented by one. Additionally, the instructor explains the use of a try-catch statement and the implementation of the "params" method to update the DynamoDB table. The section also includes the code for installing and requiring the necessary packages such as node-fetch and Sharp.
In this section, the instructor demonstrates how to update the quote object using the AWS Lambda function through the use of a weight function. The weight function updates a new value every time it runs, and const update quote object equals the weight function, which awaits the function with the client, updates the quote parameters into the update, and returns the updated quote object. Once the weight function is set up, the instructor moves on to working on getting the code from CodeSandbox into the exports handler to begin image composition, focusing on generating a base64 string as a response. The instructor then explains how to create backgrounds within the Inspirational Quote Lambda file and how to call background images to find the backgrounds in the folder. Finally, the instructor shows how to compose the image together without saving it as an image.
In this section, the instructor explains how they will create an image path for the generated quote card and use it to update their Dynamo database. They use path.join to create the image path and then do composite with the SVG and the image path. Next, they update the Dynamo object in the table and run this response as the output. Finally, they format the response with an image type of "image/png" and do FS.readfileSync for the image path, make it a base 64 encoded string, set it as true, and return the "get random quote" API URL.
No videos found.
No related videos found.
No music found.