Build a Fullstack App Fast with Modern Tools

Hi, everyone, I'm so excited to see you all today, and I'm so grateful to the team at React Advanced for giving us the opportunity to have an amazing workshop today. My name is Christian Mamba, and I'm a senior developer advocate at AWS, and that just means I spend most of my time trying to educate developers on how to use some of our AWS products. But for me specifically, I focus on this amazing tool which we're going to learn about today called AWS to target frontend and mobile developers to make sure that their lives are easier when they are using our products.

So that's pretty much all about me, and I would like to learn about everyone else. Please feel free to jump into the chat. I think I would prefer discord so that at least we wouldn't lose our chat. So if you can jump on to discord, there's a link in the Zoom chat on how to get to discord. So go to discord. Say hi there, let us know about yourself. Let us know your name, let us know where you are joining us from, what country and what city. Let us know what time it is and let us know what you are working on or who you are employed to or what generally is making you excited to be here today.

Okay, so please remember this is a fun environment. Feel free to have fun. Feel free to ask questions. I love questions a lot. Nothing is too stupid to ask about. I'm here to answer every single question you have. So please, I'm saying all this to make sure that you feel comfortable around this room today and make sure that you can take something today at the end of the workshop.

Okay, so I can see someone asking questions. Is a free tier AWS account enough for this workshop? Yes, not just for this workshop. Even when you're building an entire product with the tools we learned today, a free tier is going to help you build and ship even before you start before you start paying it into AWS if you're already start having customers on your product.

Okay, so a free tier is totally fine for today's workshop. And speaking of today's workshop, what we are going to learn today is basically how do we make our lives simpler as react developers that want to ship the things with builds? Okay, so most of the time we spend our time in the browser and I'm assuming that this is a react workshop or this is a react advanced conference and the developers here are react developers, but if you're not, please let me know in the chat and then I can change the tone of the workshop a little bit more to fit everyone else okay. But I'm assuming everyone here writes react somehow, all right, and we do that almost every day of our life and we spend most of our time in the browser, that's our job, that's our job description, that's our responsibility, but sometimes you sometimes you are doing solo, sometimes you are doing a site project, you are a freelancer and you just want to show the world what you've worked on and then once you come up with this idea to ship what you've worked on, you get blocked by all these numerous tools in the ecosystem that makes it very challenging for you to move forward. You have to think about things like where do I store my images? How do I take care of my database? Where do I store my data? How do I handle authentication? How do I handle authorization? How do I extend my business logic with serverless functions? How do I... like there's just a lot of questions to ask once you decide to leave the browser and go beyond just being a web developer.

Okay so, at the end of this workshop, I'm going to give you all the tools that will help you solve this problem in just a few clicks, all right? And I'm not kidding, just a few clicks and you are up and going with deploying your React project and managing them and setting up authentication and all of other cool things you're going to see. And the tool that's responsible for doing this is called AWS Amplify which I'm going to share my screen now and we're going to take a look at what this tool looks like all right so let me see if I can share my screen. Before I move forward, I just want to look at the chat and see if anyone has any questions. I can see people are saying hi. Hi, Steve from Amsterdam, Jason from Nevada, Carlo from Amsterdam, Emma from Ireland, Alex from UK, Zebra from Sri Lanka. Thank you all for joining today and please, if you haven't, please introduce yourself in the chat before we move on. Okay all right. So this is my AWS console, okay. You should be familiar with this if you've used AWS before and if you haven't, there's nothing to worry about. This is just the landing page of once you sign in to the AWS dashboard, it's called a console, the AWS console. Once you create an AWS account, this is the first thing you see. Now the service we are interested in today is not all the overwhelming services we get from AWS. It's just one of them which is this AWS amplifier right here and if you can't find it recently visited services, please use the search bar to look for AWS amplifier. Okay. I did from Kazakhstan. I hope I pronounced that correctly. So when you find this, I mean, just click on it. Okay. Now, we just have two hours for me to show you a lot of awesome things. I would recommend instead of you following along, if you feel like you can't catch up, I would prefer you pay attention and get the knowledge first. So make sure you're not confused at the end of the workshop. And then once the video is on YouTube, the video will be uploaded immediately after the workshop. Once it's on YouTube, you can then watch again if you want to follow along and do what I'm doing today. But just to make sure you enjoy the workshop and be a bit more engaging, you can just feel free to watch and let me show you all of these cool things. Okay, cool. So once you've opened the service, the next thing you need to do is to click this button, which says new app. Once you click on the button, you see, you get a drop down. There is post a web app, which we will take a look at later. And then there is build an app, all right? So we want to build an app instead. And then we can name the app, note, nine. Okay, and then confirm deployment. So this is going to take a few seconds to set up the Amplify project. And once it's done, we can move on. I'm just making sure the chat, there is no there are no questions. If you have questions, if you if you are confused, so far what I've just done, please say something in the chat and I will help you out. Okay. So just as a recap, we went to AWS dashboard, which is called the console, and then we searched for AWS Amplify. And then we clicked on the service. And then there was a button which we clicked on to create a new app. And then from the new app button, selected to build a new app, we gave up a name, and we deployed it. That's all that's all we've done so far. Okay, just in case you are joining and you're wondering what's going on.

All right. Cool. Let's make sure that I'm not missing the Zoom chat as well chats.

All right. Thank you for helping out with the question, because I was coming to get that.

All right. Cool. I was still waiting for deployment to be done.

OK. It's already done now. Diego from Spain. Nice to meet you.

So we're deployed now and what we just need to do is click on launch studio. Now, studio is basically the dashboard for AWS Amplify. So at this point, we are done with AWS services like we're out of AWS dashboard entirely. And we are in this new world called Amplify Studio. And this is basically your CMS dashboard. It allows you to manage your data. You can model it database. You can set up authentication, you can set up your storage service, you can do all of these cool things. And when you set them all up, you can also come and manage them here. So you can add content to your database. You can manage all the users that have signed up to your site. And you can also browse through the files that you've stored in your storage.

By the way, I think this is a good time to mention that each of these services are not Amplify services, they are AWS services. What Amplify is basically doing is just giving you a very clean front, a very nice UI and API to work with the services. So for example, the data service is backed by DynamoDB, AWS DynamoDB, storage is backed by the infamous S3 service, authentication is backed by Cognito, functions is backed by Lambda. And so on, and so forth. So these are actual AWS services that are very popular that we all know and love. But this time we are just using Amplify to do to make it easier for you to use them without having to fiddle with their configuration, okay. I hope that makes sense.

All right, so your next step is to actually model the database and to do that, click on this data button or the data item from the sidebar and then click the add model button. Alright, once you've done that you need to give the model a name and then give the model a title as well as a text field.

All right, so the id field is automatically generated for you and it's going to automatically populated as well with your IDs. But the title and text field are of custom fields, okay. Now each of these fields can be validated. You can make sure you can set them to required which we don't need for a note apps. We are just being a very simple note app but you can validate them here and then you can also add more models. Okay, you can add more tables and add relationships between the tables but for now we're just dealing with a single table so we don't need to add more tables. I'm just showing you this so you have the option as well.

All right, yeah, so let's see and deploy this particular table we've just created and confirm deployment. Hi, are you from Morocco? Nice to meet you. Cool, so what Amplify is basically doing right now is that it's taking the model we described and it's going to do two things, it's going to create an AppSync API and it's going to create a DynamoDB instance and you can see the animation here showing exactly what it's doing. So we have AppSync, which is the API that is going to, which is basically like if you remember MVC, the AppSync is just going to handle the controller stuff and the model part, which is database, is handled by DynamoDB. And these are two services that Amplify needs to set up, so it's okay, straight to both of them, deploy them, and configure them, right? If you have to do this manually by yourself, it's going to take a few minutes, just like it's doing right now. And instead of making us awkwardly wait for this to finish by staring at the screen, what I've done is I've created another app before this workshop, which already has the Node app deployed, all right? So we don't have to wait for this deployment to finish before we can actually start building what we want to build with it. But this also has authentication deployed, okay? I'm going to show you how to deploy authentication when we get to that point. But I just did these two things ahead of the workshop, so we don't have to wait for them to finish before we can move on. I hope that makes sense. If it doesn't, please let me know in the chat and I will clarify things further, okay?

All right, now, what we need to do with our data model, which we've just finished deploying, is to go to the content section and start adding data to this table, okay? And to do that, we could either click...

Let's finish loading first. We could either click the Create note button, which would basically allow us to fill a form and add items to the table. But instead of doing this, I think we should instead generate some seed data since we're just generating text data, okay? So click the Auto-generate seed data button and we want to generate 100 notes and I want to add some constraints and make sure that the title is a sentence length between one and three, okay? And the text is a paragraph length between one and five. These are just the constraints. So if I click Generate Data, what's going to happen is that Amplify is going to start feeding our database with all this text data, okay? So you can see we're just getting a bunch of 100 long Ipsum rows being pushed into our data and we just give this a few seconds to finish populating the database and then you can use these data items or this content to test, okay?

Hi, Igor from Poland. Please, if you haven't said hi in the chat, in the Discord chat, please feel free to do so. It just keeps the conversation going and makes everyone at least get to know you, okay? If I have lost anyone, please say that in the chat and I can get back to you and make sure that everything is smooth on your end so you can follow along to the end of the workshop. Just as a recap, to make sure that those that are new are not lost, what we've just done is we went to AWS and by the way, we were building a Notes app with AWS Amplifier. So we went to AWS, created an AWS Amplifier app and opened Amplifier Studio which is this CMS environment for Amplifier and then the next step was that we set up the data model which is just a Notes app with a title and a text field and then we've just come to the content section to populate that database with content. That's pretty much what we've done. Okay. So if you are lost, just let me know if you need me to explain anything further. Okay. All right, cool. So let's move on to the next step which is to design our app. All right. This is where Amplifier gets incredibly amazing. This is the best feature Amplifier has. This is my favorite Amplifier feature and I'm going to need you to buckle your seatbelts with this one. All right. So how this works is, if you click on the UI Library. All right. Pay attention. If you click on the UI Library, you get the option to give Amplifier a Figma URL. Okay. The Figma project URL. And what Amplifier is going to then do is grab all the components from that project and convert them into React components. All right. And then you can then pull those components from Amplifier to your React project. So I need you to take your time to take this in because this is something that takes a lot of our time. We spend a lot of our energy trying to interpret a design we've gotten from a designer and convert them into React components before we can even start building the actual idea we have. So you can see how much we're doing our best to remove this friction from here to make sure you don't have to deal with all of these problems. So just to reiterate, you would basically give Amplifier a URL. Amplifier will convert all the components in that Figma URL into React components, and then you can then use that component directly in your React project and to even make things better, allow you to bind the data in your data model to those components. So when you pull those components, you don't have to do things like axios or use the Fetch API to fetch data and manually bind data to the components. Those components will be already data bound when you pull them, and all you just need to do is render them, all right? If you think that's exciting, let me know in the chat and let's move on. Okay, before we move on though, I think, hi, Lopez from London. Yeah, Jason said, this is really cool. Yeah, me too. I think this is really amazing. Like it's my favorite feature. Hi, Dennis from Rotterdam. Hi, Teodros. What should I say? Hello. Yeah, please say hello in Discord. If you scroll up, okay, someone already shared the link in Discord, in Zoom chat. Hi, Zenok from Nigeria and hi, Ven from UK. Okay. Yeah, so Steve, he's asking if there's an AWS service that does this UI to Figma to React conversion. No, it's actually an Amplify thing.

Okay, there's no other AWS service that does this. All right. Hi, Ben from London. You should really give Amplify a shot by the end of this workshop, of course, I'm sure I'm going to convince you to try to check this out. Okay. All right. So let's move on.

Let's actually pull components into our Figma project. To do that, click the get started button. All right. Now for this to work properly, we've created the Figma template for you to adhere to the rules in that template. Everything would work as expected. If you click on this template, on this link, it should take you to Figma community website where you can then make a copy of this particular template. And then I'm going to make a copy into my personal Figma account. Of course, you need a Figma account to be able to do this.

Now, there are four pages. The first page is the Readme page, which is basically telling you how to use this template. The second page is the Primitives page, which is a very, very crucial aspect of this Figma project. It's the atomic components that live here. Things like your buttons, your badges, your input fields, your typography checkboxes, and all of those things. There's just one rule you have to not break, which is that don't edit the things in this Primitives page. The reason for this is that there is a UI library that Amplify uses to manage these primitives when you pull them into your React project. And if you edit this file directly, they fall out of sync with the UI library. But this is going to breed the question which I'm expecting that some of you are already having in your mind or trying to ask, which is, what if you want to customize this tile? Instead, like, what if you consider the color of this button ugly and you want to change it? There's a way to do that. Before I show you, though, I'm just going to quickly show you the other pages. Now the 3rd page is my components page, and this is where you should spend your time. And if you want to add more components, and if you have a designer you're working with, this is where the designer will create more components for your app. And then the examples page is just examples of how to use those components, okay? Now, so as I was saying, if I wanted to change these tiles in the primitives page, what I would need to do is instead of editing these primitives directly, I would use this Amplify UI team editor Figma plugin which allows you to change these tiles. So let's say we want to change our primary colour from being green to red. Once I've done this and then click Update Team, you should see that the button colour has changed, okay? Now, once you've done this, what Amplify is going to do when you pull this project into Amplify is that it's going to give you a JSON file called Team.json and then that JSON file can then be passed to that UI library to customize that particular library so it looks exactly the way it looks in your Figma project. This might not make entirely enough sense but when I start writing some code, you will see what I'm talking about, okay? Cool, let me see if there are any questions. Yes, I'm going to drop a Figma file we are going to use in the chat so you can pull out a Marsim. Ruka said this sounds too good to be true. Yeah, this is how I feel the first time I learned about this feature as well. Okay, cool. All right, let's actually pull a Figma project into our Amplify project. So my colleague Allie, she has designed, let me get that for us, she designed a project for us to use for this, she has a Figma design for us to use for this workshop. Okay, I'm just trying to get the link so I can paste it in the chat for everyone to have access to it. So all you just need to do is to make a copy of this, okay? Chat is called... Cool. So just click on this thing and it should take you on the community page for this link and all you just need to do is make a copy of it and once you've made a copy of it, we can then copy the URL and head back to Figma and then paste the URL here, okay? Once you've done that, click Continue and give Amplify a few seconds and what Amplify is going to do now, just like I described earlier, it's going to go to Figma and first of all, it pulls the theme. So remember when I told you about the theme.JSON file? So this is the file here and you can basically see if you've used Tailwind before, it's that Tailwind config object. So basically a big configuration object that allows you to configure the styles for the UI library. But the cool thing about Amplify UI is that you can generate that. You don't have to type the... Like unlike Tailwind, you don't have to configure these styles manually. Instead the Figma theme UI can generate this object for you and then you can just pop it into your configuration when we pull this into React and all your team gets updated. All right, so once we accept all the changes for the styles which you can see are just like our typography styles, our colors and all of those things, we can then get the option to accept all our components. So you can see we have... Let me just walk you through the components we have.

We have a Nuke UI component which allows you to preview the Nodes. We have an updateNodes component to update the Node to have the navbar and then a createNodes component. So we just need to accept all of those components that's been pulled in.

Once we accept all of them, we can basically browse through them from Amplify. This is no longer Figma. And guess what? If we make changes to Figma, we can also come here and just click sync with the Figma to update Amplify with a new component that we've added in the Figma project.

Okay, cool. So basically, we can come here and browse through our components. We have our Node UI components which allow us to preview the nodes. We have the navbar which is just what it is, a navbar. We have the createNodes component which is where we add our nodes thing. We have the updateNodes component which is where we can edit existing nodes. Okay. And something you should note is that these are not images. These are not just rendering images for us to see what the component looks like. These are actually React components being rendered. Okay. And to prove this to you, I can click and start typing inside this title. So isn't this amazing? Like we just took an image. That's what it is, an image from Figma and pulled it into Amplify, and it's now a React component that is actually alive. We can, we can type in it. We can change the values. We can click on buttons, even though they can't do anything yet, but basically it works.

Okay. You see an error. Check, Figma file link is valid. Is everyone else having this error, let me be sure that this is fine. Okay. Can anyone access, can anyone else access the, the Figma file? So I have the link now and then I just try to open it and it works right on my end. So can someone else confirm if they can reproduce the issue in this one? All right, cool. So, Jason, I haven't seen this error before, but maybe I can, let's move on and just watch me go through the course and I can help you at the end of the workshop. Okay, cool. That's all we need to do to pull the components into Figma. All right, the next step then is to actually start binding data to this component. And to do that we need to start Note UI components.

Okay, this is the second main thing I wanted to learn today. All you need to do is click this configure button. And then from the configure section, we can select the text you want to bind data to. And then we can set each text label to note.text. Okay, so you can see it's passing the note model to the component and then it's setting the label prop to note.text. You can do the same thing for the title as well. You can set the title for this Note UI to be note.title. And you can see it's beginning to populate this component with Lorem ipsum data, which is exactly what we have in our database. Okay, cool. The next steps is that we can also bind events. So if I wanted to delete this particular notes item, what I can do is click on the trash can and then set an onClick event to it. And what I want the onClick event to do is to delete this particular note model. Okay, that's the action. And then we're deleting from the note model, and we want to find the notes, we want to delete based on the ID of the notes. All right? And that's pretty much it.

We're done with notes UI component. And before I move on, I want to be sure that no one is lost. If you think this is extra cool, please let me know in the chat. And you also see if anyone has any issues in the Zoom chat.

Yes. This is asking if these are style components. Can we see the code? Yes. They're not style components. They're just basically regular styles that are applied to the React element, okay? For Amplify, she asked if we can see the code. Amplify is fully flexible, and you can always eject any time. So, when we pull this project into React, you're going to see the actual code that is being generated. You're going to see how it looks. Like, you're going to see React components as React code, not Amplify UI anymore, okay?

All right. So, let's head back to the library. We will bind it as well. What I want to happen when we click the save button is to create a new node item. And we want to create a node and then the first text field will be bound to title, and the second text field will be bound to node. You just need to repeat the same thing for update nodes. Configure and click the same button. And then update this. Create. We want to update the node model. And we want to update a node after we find it in the ID. And then we want to make sure that the title is set to the first text field and the text is set to the second text field, okay? And then lastly, because we're not going to display single node UIs, we also need to make a collection of this UI. So if we click on configure one more time, you can click on create collection. And then we can give the collection a name. And what this will do is create another component inside Amplify now. And the component is basically a list of node UI components, okay? So let's render this as a grid and maybe a 3.0 grid instead. And let's add 10-pixel gap between each of them. And then lastly, I would like to enable Pagenation, which will allow us to flip through our data using this footer pagination, okay? And that's pretty much everything we need to do to bind data to our components. And just to recap, what we've done is we bound data to the Notewire component by clicking on the configure button and binding data to them. We've done the same thing with CreateNote as well, but this time we've just bound data to the events to create new notes. And same thing goes for the UpdateNote as well. We haven't done anything with the navbar. We'll do that when we put it into the React code. That's pretty much all we need to do to bind data to this component. Since there are no questions, I'm going to move on to pulling this project into a React project now. But if you have any questions, I'm just going to wait a few seconds and answer your question before I move on. Someone is typing, but some people are typing so let's just give them some seconds to ask their questions because we've just achieved a new milestone. So before we move on I want to make sure no one is lost. In the Create Note we did Update, shouldn't we be creating a note? Let's confirm that. Create Note, Configure, Save. No, we are creating a new item, not updating. Then in the Update Note that's where we are updating, okay? This one, we are updating. All right, so we can move on now. In short please, if you drop in totally, you can catch up with the workshop when you watch the video, all right? But don't forget to catch up in the workshop. That's what's important. All right. Moving on, we need to now pull this into a React project, okay? And to do that, we need to first of all, create a React project. Let's set up a React project, move my terminal, and to create a React project, of course, we need to do React workshop.

We all know how to create a React project. But just in case, just to remind everyone just run npx. Create a React app and give your app a name, okay? And let me make sure everyone can see my terminal. And once you've done that, the next step would be to 3D into that project. Before now, I already created a project, okay? And the next step after creating a project is to install some, let me see, npm install aws-amplify slash uireact and aws-amplify. Now these two libraries are the only dependency we need to be able to use, pull our components and use them in our app, okay? The first dependence, which is the uireact, remember when I was telling you that the primitives page depends on the UI library and that UI library is what will be configured. So basically, if you are familiar with Tailwind, uireact is the Tailwind of Amplify, okay? Something like that, I don't think that a very good analogy, but I hope that makes sense. This is your UI library, this is what is responsible for making your app look good, okay? Then the second library we are installing is like the AXIOS or the GraphQL clients of AWS Amplify. So this allows you to make all your fetch requests and mutate your data and all of those things. Even though we're not going to do that any more manually because we've configured our components to have data bounds to them, we still need to have this library installed for those components to be able to do those things. Okay, that said the last thing we need to do, which I've also done is to install the Amplify CLI. Okay, so the Amplify CLI allows you to run Amplify commands from the terminal directly. And we need to do that to be able to pull our components into our React projects, okay? And before you can even run Amplify commands, please run Amplify configure. And what this is going to do is redirect the browser to AWS to authorize the terminal. And once you've authorized the terminal, terminal can have access to do things like creating new Amplify apps, pull Amplify project, push to Amplify, and all those things. And that's all we need to know about the dependencies.

The next step now is to pull all of our projects from Amplify into this React project, okay? So, to do that, head back to Amplify Studio, click local set of instructions, and then copy the Amplify pool command, okay? So, repeat that one more time, just in case you weren't looking at the screen. Amplify Studio, click local set of instructions on the top right of the nav bar, and then copy the Amplify pool command. And then once we've done that, run the command in the project rules, okay? In this case, we've set up a project called Notepad, which is a React project. All I need to do now is just to run Amplify pool command on that project, okay? Now, what's going to happen is that Amplify is going to direct us to the browser to authorize the terminal and basically just to make sure that this instance of our Amplify app is giving access to the terminal to basically control everything happening in Amplify Studio, all right?

Okay, so we were installing the Amplify CLI. So in that case, once you have it installed, the next thing you need to do is to configure the CLI, okay? So we just need to make sure that, let me make sure the chat is open so I can see everyone's messages. All right, so once you've done this, you need to run Amplify Configure, okay? And this would basically authenticate your CLI and allow your CLI to make requests on your behalf using AWS, okay? Cool. So the next step is to actually pull our Amplify project into our React project. And to do that, you would head back to Amplify Studio and while in Amplify Studio, click Local Setup Instructions, okay? And then copy the command you find here and then paste it in your terminal. And what is going to happen is, Amplify's going to open the browser and ask you to authorize the CLI to have access to this instance of your Amplify project. Okay? Once you get the question, just click yes. And once the authentication is done, you can close the tab, head back to the terminal and just answer a few questions which Amplify is going to ask you so it can know your answer. So it can know your projects better. And the first question is, what's your code editor, which is raising VS Code. We are writing JavaScript, of course. And this shows you that we also support iOS, Flutter and Android. If you have friends that will let you use Amplify but are not JavaScript developers, please let them know. And we also support other reacts, other JavaScript libraries, not just reacts, but we're using react for now. And this, our code lives in the sub directory and we're going to speed our build into the build folder. And our build command is npm run build and npm run start. For the start command. And the reason we've been asked about this question is that when we deploy this app, it needs to know what the commands are to help us complete the deployment. You can see it's generating UI components now. This is very important. Now it's done syncing the UI components. And then it's asking us if we want to be able to modify the backend. What this just means is that if we want to pull our model into our React project, we can do that. And that basically means that we can then use GraphQL schema to model, add more data models, add Customizer authentication, all those things. So if you don't want to use Amplify Studio, using a CLI you can also use that to manage most of your Amplify stuff, okay? So let's say yes to this, and then give it some time to pull our models and the authentication down. Let me check there are questions. Thank you Jason for helping with that, I really appreciate. Alex, no, I didn't pull your report from Amplify. I created a React project initially, and basically what I just, because I don't want us to wait for where the React project is being set up, I did that before the workshop started, but it's just a plain React projects, nothing special about it, okay. All right. So we're waiting for our module to be done pulling, and once it finishes, we can then take a look at what all of this code generated looks like. Yes, making sure my internet is still fine. All right, cool. So we are done pulling now, and we can open this in Visual Studio Code. Okay. Now, if you're familiar with React, if you've set up a React project before, you can easily notice that some things are foreign to this project. The first thing is the Amplify folder, okay? Now, the Amplify folder is where your module lives in. So we can open the API folder in the backend folder and see the schema.graphql. And you can see that this is basically just a schema type, which we can go ahead and add more if you wanted, maybe add another table and basically just defining the type and push this to some file and to create a new table for us, all right? So that is basically how you can do this locally. And then the other thing we have is configuration for authentication, which should give you a hint that already have authentication configured, okay? I'll show you how to do that one when we get to that stage. And then in the source folder, SRC folder, you can see we have this UI components folder. This is where it gets amazing. For this, someone asked, I think Sarah asked previously if we can see the code for those components that were generated. And yes, you can see them. These are purely TypeScript and Javascript files. If you want to work with TypeScript, that's fine. But these are both files and we can choose whichever we want.

In this case, let's say we open the NoteUI component. You can see it's basically a React component with UI components like flex and text and view being pulled in from the UI library. So these are just UI library components. But the rest are just basically just React components. So like I mentioned, Amplifier is very flexible. It doesn't lock you into anything. If you want to eject and just continue working from here and never sync with Figma anymore, this is your code. You can do with it whatever you want, okay?

So that's pretty much what the project looks like. Like I mentioned also, the team.json file or js file contains the themes that are generated by the UI team plugin in Figma. So if you change things in Figma in your style, it gets generated as adjacent objects and then you can pass this JavaScript object to your UI library when you configure it, okay? And then one last config file you need to know about is AWS exports config, which is your kind of like.env file. So we can see this is automatically.gitignored, so you don't accidentally push it to GitHub, okay? These are your credentials to access your API. Don't make this public, don't push this to source control, okay?

With all this said now, let's start taking advantage of all the things we've worked for. The first thing we should do is actually open up that JS file and make this a very simple component. Let's run npm start to start the application. And then let's open the browser. We'll make sure this is the right port. Open localhost 3000 and we get a very simple React app that just says up, right? Next step would be to import some of those UI components. Some of those UI components we can import from UI components folder. So the first thing I would like to render is the navbar. And the navbar I would like to also set to be 100%. So you can see it can also set the path styles to these directly, 100%, and then set the margin bottom, so you can give some space at the bottom, margin bottom to 20 pixels. All right? And we can then open the browser and see what this looks like. It says compile, so once you done compile you might take a look at it. This is the browser. All right, so this, this is something, right? It's not entirely what we stand for, because in Figma, this is not what our design looks like, but at least you can see progress. You can see progress. Now why this looks so hideous is that we haven't imported the UI library I spoke to you about earlier so let's actually configure the entire application to be able to use that library as well as other configuration that is required. Okay?

So if you go to the index.js file, what we need to do here is import a few things, we need to import amplify, need to also import amplify provider, we need to import the config file, see AWS export, and then lastly, we need to import our styles. Import at aws slash uireact slash styles. That's it. Okay? All right. Once we've done this, we can then run amplify.configure and pass it in config objects just to configure Amplify. And then lastly, we just need to wrap our app with Amplify Provider. Now, this is where you can set the theme for your project. So you can basically import this particular Amplify here in Studio theme object and then pass it to this theme property and all your UI changes that you've done in Figma will also reflect you. But because we haven't made any change compared to the design we are using, we don't need to do this. It's optional. Okay. All right. So if we head back to the browser, you should see everything looks fine now. Okay. Does anyone have questions before I move on? We're actually arranging our components now. These are actual components. They are not images. You can select your text, you can click the buttons and everything looks good. Let me know if you have questions before I move on to the next step. If you have questions, I can address that. Cool. So no questions. And the next step is to render the collection, the Noty collection.

Okay. And to do that, we need to move back to our app.js file and just basically import noty-collection. And that's all. That's all we need to do. If I go back to the browser, you can see it. Right? Amazing. Like, this is just all we need to do. We have our Noty being rendered correctly and we can delete some of them because the actual onClick events is working right now.

The next step is to render the create component, CreateNote and UpdateNote. Right now, it's going to show at the bottom of this. And by the way, we will have our pagination working as well so you can flip through these files. The create and update form are showing below the pages. I want them to float as a model. So what we're gonna do for now is hide them by setting the Displays part to none. I also need to set this, give this a class of model, so when I style it as a model it will float when it appears. And to get these styles, I'm just going to copy it from my notes and paste it in my index.css. Okay, so this is basically just positioning absolutely and then allowing it to float on top of everything. That's all. This is just a regular modal style, nothing special, okay? If you go out to the browser, you can see you can find that email because it's hidden now, we'll set the display to none. We can then use React states to flip without it showing or not, okay? So let's create a show, show create modal state and set show create modal state and then basically use state. This is going to default to false, okay? And then do the same thing here, but for update modal, right? All right, that's pretty much it. What we can then do is we can say that if show create modal is not true, then display should be set to none, and then the same thing applies to update, just need to change this to update modal. Okay, go back to the browser, and nothing's still, we still don't have any visible change that's still happening, but then we can then start setting events, onClick events to buttons to show these modals, okay? And the first one we need to do is that we need to click on create nodes to create a new node. And to do that, we need to find a way to set an onClick event to the nav bar. And if I open the nav bar and find the create nodes button and set onClick to it, okay? But the problem with this, let me see if there are questions. Would you open the developer tools? I said, sure, and this done, but just give me a second, let me finish with this particular one. Make sure that I know that question. If you are lost, please let me know so I can address questions if I move on, okay? So like I said, I could easily go and set onClick events to these particular elements directly but then this is not practical because if we pull our components, if we go to Figma, make changes, and sync our component once more, it's going to override everything that is here. So unless you are injecting entirely, which means you don't intend to ever sync with Figma anymore, then this is fine. But this is not the right way to go if you want to maintain making changes, okay? Jason is asking me if this is right. Yes, configure, configure. You just need to import your styles as well, okay? I forgot to import your styles. And let me show you what it looks like by the way. Index.js. Okay, cool. Then moving on to how do we set onClick event using NavBar in this case? Since we can't do that directly inside a NavBar component because it will easily override it. So the next step is to actually use this thing called Override, okay? Overrides allows you to override props on individual elements inside a particular component and how it works is basically you need to, on the rendered component pass an overrides prop, okay? The override props takes an object and then that object targets for the elements in your Navbar component. And to find, to target the number component, the elements in the Navbar component, each of the elements have an override ID. So you can see we have this particular ID here which just need to copy. Once you copy it, you can go ahead and paste it right here. And then we can pass it an object. This becomes a prop for this particular element, okay? So we can then set onClick events here to whatever we want to do. Okay, so this is how you provide additional functionality to your components, to your Amplify-generated components, okay? And we can set create model here to true. Okay, so if we click on that, we'll have errors.

So you can see we have this particular ID here which just need to copy. Once you copy it, you can go ahead and paste it right here. And then we can pass it an object. This becomes a prop for this particular element, okay? So we can then set on click events here to whatever we want to do. Okay, so this is how you provide additional functionality to your components, to your Amplify-generated components, okay?

And we can set create model here to true. Okay, so if we click on that, we'll have errors. Let me refresh. I think this is Let's see. What did I miss? Yeah, I need to remove this. Okay, cool. So we can then click the create button and then that showed the model, all right? And the next step is to hide the model of this X button or X icon rather. To do that, we can go back to you can find the create mode components and find the icon, which is called My Icon right here, okay? And then in app.js file you can override that component and set an on click event to it. Okay. Show create model to false, okay? If I click this now the model goes, so we have a functional model right now, okay?

We can do the same thing for the updates model, just copy this, paste it in updates model and replace this with show update model, okay? Cool, so we have a functional model and you can actually start entering values here. So if I click on the create node button and set these values to tests, and node test, and click save, the model doesn't disappear, we'll fix that later, but if you go to the last page, you can see that if I close this model, you can see we have our test and node test is being added to the database, okay? And this is very fast because Amplify is offline-faced, so what is happening is that it's going to store the items locally-faced in your session storage, and then once it does that, it will then attempt or start, keep attempting to push it to database when you're online, all right? So that's how this works. And then let me be sure like, if there are any questions, first, before I move on, cool.

So the next step is to show the updates model, okay? To do that, we want to be able to click this update icon to show the model, the update model. But the problem with this is that each of these items has this icon. How do we target everything and set the icon to them? Or set the events to them rather, or set the prop to them, okay? To do that, we'd have to use something else that's not override. It's called override items. The difference between this is that you use this for collections and then you use override for individual elements, okay? So override items is going to take a function which receives an object containing our item, and then it returns an object. And inside the object it returns is the override, okay? And inside that override, we can then target my icon again. Or let me show what that's called uptrading. Let's open the updateNode component. Oh, not this, let's open nodeUI component and find what this is called. It should be called EditButton here. So we can then pop that in here and set onClick event to this. And this should basically set updateModel to true. Okay. So if we go back and click on this, it works. And because we've already set up the close icon, this should close the module, okay?

The next thing is to pass the note we actually want to update to that particular EditModel. And to do that we need a new state which is called NoteToUpdate. And we can set it to the item we have from this function, okay? And then we can set updatesNote, which is the note we want to update, NoteToUpdate. And then lastly you can create the piece of state. So NoteToUpdate and set NoteToUpdate React.useState, okay? Now we can click on the state and change the value from test to test and then click save, and you see it updates the notes. Now I had an issue trying to figure out how to make sure that when I click on any of the components it updates the value. I couldn't figure that out before the workshop but I promise you by the end of the workshop when it's available on a YouTube video I'm going to leave a comment in the video on how to do this, okay? So far so good, let's be sure that no one is lost and be sure that no one has questions. If you are confused about anything please let me know and I can address that. Jason is typing. Okay. Did you create the collection? Let me show you created the collection. Do you have something like this in your components? This, the NotUI collection components? Okay. Hey, I think that's where you missed it. So just as a reminder, if you want to create a collection click Configure and click Create collection. Okay? And give it a name and then that's all. All right. So that's the step you missed. Okay? Cool. And once you do that, JSON just run amplify pool in your terminal and that will pull the new components for you. Okay? All right.

So let's, let's move on. Can we, can we do these changes inside the UI elements without overrides. Yes. Of course you can do this, but it comes with a price which is that you would, when they make it change to your components in Figma sync it in Amplify and pulling it, it will override the things you've done. So if you are sure that it's a one time, it's a one thing, a one time thing where you would basically just design your components and you are sure that you are not going to make changes to these components again from Figma then for sure do that. But I won't advise that. I would prefer you use overrides since you don't know what's gonna happen in the future. You can only make changes to the components in the future and you would want to be sure that you pull those changes. It doesn't affect what your app really look like or how it behaves already, okay. And that's pretty much it.

I think we are done with actually creating a code app. We have create, update, delete. We can read our notes. We can update our notes. We can delete our notes. And we can query our notes. What do you not already? So the next step is to handle authentication. You're welcome Sarah. The next step is to handle authentication. Okay. To do that, we need to go to one gets our app, click authentication item on the left and then set your password strength. I'm just going to make it very simple so that I don't have to think of a password when I'm signing in. And then click deploy. That's pretty much all you need to do for authentication and confirm deployments. Okay. Mind you, this is different from authorization. We're going to take a look at authorization once I'm done with authentication. Okay. Actually, let's handle this authorization now. To do it because I already have a different app that's has authentication deployed. To set the authorization, go to your data model. Okay. And if I move it too fast, you want to let me know. All right. Check the chat once more.

We've just seen how to set up authentication. I'm just moving on to show you how to set up authorization. There are two different things. Authentication is authentication is saying, hey, I am Chris and I have an account with your app. Please let me in. That's authentication. Authorization is an entirely different thing. It says, hey, I'm Chris, and I have the rights to create and delete a note. Please allow me to do that. That is authorization. So what I want to do now is enable what we call owner authorization with this note module. What that will basically do is make sure that you don't read, update or delete notes that you didn't create. So you can only access the notes you created by yourself. This allows you to have multiple users in your app with multiple notes, but they cannot access each other's notes. Okay? So to do that, let's enable owner authentication and then disable every other person being able to access the notes.

Okay? So this says anyone authenticated can create read updates. We don't want this. We only want people that owns the notes to be able to update, read and delete them. Right? So once you've done this, we can then click save and deploy. And then we can go ahead and deploy. So while we wait for this to finish deploying, we can go back to research, to go code and set up authentication. And it's as simple as just wrapping this component with using you with authenticate all. Okay? And that's all. That's vitually everything we need to do. Can you see that that gets imported from the UI Reds library. And if we go to our app, we can no longer access our app anymore. We have the UI for sign in and sign out. And if you're wondering if you can configure this. Yes. First of all, this adheres to your style, say if we had changed the sign in button color to red. This would be red, okay? And we can do all that crazy customizations by going to our UI Docs, UI.docs.amplify.aws, and you can take a look at the docs on how to configure this. So click on connected components, you can see configuration for the authenticator. And you can just read through this docs to see all the things you can do. You can see we can set up social auth as well and all of these cool things, okay? Now that's authentication. So let's create an account. And then you need to verify your email. So this is going to send me an email code to verify my email. I'm just going to copy it from my email real quick and paste it. Then click confirm. And you can see we can access our app once more. Okay? And then to sign out, we need to click this button to sign out. So let's go and handle sign out. To do that, when you wrap this with the higher order components with Authenticator, you will receive a sign out prompt, which is a function sign out. And then we can call that sign out prompt on the number. And to do that, let's find a number and look for sign out button, which is this one. So we copy the ID and then paste. And then we can set on click and then call sign out. All right? So, that's pretty much everything, it's going to sign out. So if you click this button now, you should sign out. Okay. And that's all. That's all we need to do for authentication. It's easy, right? Let me know if you think it's easy. Yeah, okay. Jason already said that. Cool. Yeah, adding pods is really easy. And you get to see that, adding authorization is equally easy as well because we've just enabled authorization for only the owners of the nodes. So what's going to happen right now is we're going to call, it's still deploying. Okay, just finished. James. Okay, cool. So we're just going to pull this once more because we just finished deploying authorization. Okay. And once this is done pulling, what's going to immediately happen is that we can no longer access these nodes once we sign out and sign in back again because we didn't create these nodes.

Okay. So let's wait for it to finish deploying. And by the way, while it's deploying we need to clear our storage. Remember I told you that Amplify is offline-first. So something we should always do when we sign out is to call data store.clear. This will basically empty the local storage of your cache. Basically get rid of the cache in your local storage or the offline-first data in your local storage. When data storage gets imported from AWS Amplify.

Okay. By the way, if you are doing things manually, maybe if you are buying the tax your components manually, this is the API you use for talking to your database, I call it the data store.query and so on and so forth. Or read, rather.

Okay. So, let's see if we finished pulling. Yes we finished pulling. So if we go back to our app, we can then sign out. And once we sign back in, One, two, three, four, five, six. Once signed in, you should see that we can no longer access that data anymore, because it can only access what you created. It can only read, update and delete what you created. Since that previous test data was just for testing and they are not particularly tied to any user. So no user gets them and they are just trash at this point. Okay?

So, before we move on, I want to be sure that anyone else is, if anyone is lost, I'm happy you all are enjoying this. If you are lost, please let me know. I want to make sure that everyone has a good time while following our lungs, okay? Just waiting to make sure no one is lost and then I can move on to next thing. And by the way, I can then create notes now and these notes are going to belong to the, yes. By save, see. Oops, for some reason, save is not working. Oh yeah. All right, so I think the demo note is going to be against me now. Let's try and figure this out. Remove the task dot O player and see what the issue is. Create note. Test, test, test. I think that was the problem, let's... Let's delete and try again. Yes. Confirmed test. It's working fine now. That was weird, but there was no issue. There's no need to panic. Everything was expected. Okay, so I need to be able to close these models when we save something, okay? When we click to create something, I want those two high-dim model ones were done. And to do that, we can listen to create an update event. Amplify lets you know when it has successfully registered that the fact that you need to create or update a data item, all right? And you can then listen to those events and perform some actions. So in this case, I want to listen to those events and once Amplify's here, I'm done creating the notes. You can hide the model, all right? To do that, I'm just going to copy the event code and paste it and then walk you through it. To do that, we need to first of all, create a useEffects hook and inside the hook, we need to import Holm as well, from AWS Amplify. All right. So, I then call hub.listing and we want to list into all the UI changes, okay? And then we receive this capsule which keeps track of all the events, like a time capsule. And then what we then do is say are we done creating a data item, are we done adding items in Datastore or are we done updating Datastore. If we're done and then set show model to false for both of them, all right? So, if we head back here and click create, let's do this one, and create one more again, and save, and then save this file, okay.

Let's do this again. Create nodes, test, test, and save and you can see the model has disappeared. All right? So that's all you need to do to hide the model. That's pretty much it. We are actually done with building our app and adding authentication to it and authorization. I think we still have a few minutes so I can use that to deploy the app and show you how to deploy an app once you are done building it.

All right. To do that, first of all we need to push this to GitHub. So let me create a GitHub repository called node-app-paged, make it private. All right? And this is basically just, instead of going to GitHub or set-create, this you can use the GitHub CLI to do this. All right? And then I can add origin. Gate, remote, add origin. Just remove all of this, all these nodes, have it. Okay? And then I can add all of my changes, commit them, and then push them to origin. So now we can take a look at GitHub and see that I have my app deployed, push to GitHub, rather. Okay?

So what we can then do is go back to AWS amplify or rather to AWS console. Let me reopen console because I got logged out. Okay, so back to AWS console and I've got logs. So once that's released, let's go back and let's go to legacy function and to operating system and LDAP. So if we can see then as I just did after the updates and we have the approval and we got that which allows us to get logged in. And from there, we should be able to find our note up and then click hosting environments. What we did before was create a backend environment. Now I want to click on create host environment so we can deploy our app, alright? We want to deploy from GitHub and I want to connect a branch. So this is going to authorize first. So if this is your first time doing this, you can ask it to sign in GitHub. So you can have access to enable to fetch our repositories. So now grabbing all those repositories and we'll just give a wait for it. And once it's done, we can find the repository we just created and connect to that repository. Cool, if you get this error, just ignore the error, it's actually found the repositories. Let me see. Yeah, we found the repositories and you can see we have a NoteApp8 repo here and then we can then select to deploy from the main branch and click next. Now from here, we can select the environment to be staging and set up CICD profile. Now, if this is your first time deploying to AWS Amplify you need to create a new rule for the CICD and to do that you just need to follow the instructions to give you or use the those days in place and adopting posting that allows you to show you how to do this rather. And then we can then click next and then click save and deploy, okay. So this is going to take a few minutes and while it's doing that, I'm just going to take a look at the chat and have a conversation with you all. Now we are done with this workshop and we're just waiting for it to deploy. If you have any questions from the beginning till now, if you were confused about anything we'll have, we still have 30 minutes to answer questions or do anything while we wait for this to finish deploying let me know in the chat and I can address them if you, if anything confused you, if anything doesn't make sense, if you have thoughts, if you have feedback let me know in the chat and we can chat about that. Okay, let's see. So as a recap, we basically just pushed our project to GitHub, went to AWS Console, found AWS Amplify, found our app. Then when we opened the app, we'll have these two tabs, which is the backend environment and the hosting environment. We selected the hosting environments and then chose to connect to a repository and then searched for our repository. And now we are deploying from our repository branch, okay? Okay. By the way, thank you all for sticking around for the workshop. This was fun, I hope you guys had fun. Does Amplify deployment support Spina app environments for pull requests like Amplify? Yes, previous, it does, okay. Okay. Thank you to Jason. Oh, I was reading a different message. Just making sure no one, I didn't miss any question. Uh, previously.

Uh, yeah. Uh, real close, sir. I missed your question. You're asking if Amplify requires stair, you know, in fact, my favorite, please do use Amplify NEXT, and just as a new act, because this is a React conference and boa I use next on a lot and you can use VITA as well. Just answer those questions correctly. when he asks you about your project setup and that way it knows where to put all the files and knows how to deploy your app when he needs to deploy them.

Okay. Yes. If you'd it's only checks for changes. It doesn't just, it doesn't waste time when there is nothing to do. It doesn't just review stuff. It checks, for example, if you, if you knew through your model is by the ways for everyone that doesn't have a question series asking if a if Amplify builds your backend and push or pull in brackets, no, it doesn't. It just checks for changes. So for example, if you made a change to your, to your model, to your file, and then you push it's great to see, okay. Hey, yes, it looks like you need that least file is, is different from the last time we took a look at it. So I think we should redeploy the models.

Okay. It basically works like Amplify CLI still works like Git. It's like a, a mini SASS control. We still waiting for the build to be done. And let's see. It's done. It's currently just being different, and no.

Okay. Yes. Jason's asking if I've ever been in a situation where a designer breaks the layouts from making design changes. Yes. So that's the first time I worked on this, the designer didn't adhere to like maybe making sure that the layout won't be broken. That's for sure. But what would, if you are using auto layout? So if you know, like the designers know what auto layout is, that is the right way to build designs. If you auto layout behave like flex boxes, they are like the flex box of Figma. So if they don't make you the auto layout, things fall apart when you pull it. So just make sure that if you are one designer and you have a top design, make sure the designer takes advantage of Figma auto layout. That's actually the industry standard way for designers to create layouts. Okay? And Amplify uses that as well. To make your layout look exactly like the way it looks in the design. But of course there have been situations where the designer was just like putting stuff around the page and Amplify didn't exactly do it. Like it knew it was because they were not using auto layout. It had to default to CSS positioning, which of course, you know, how that ends up being like it's, it becomes an ugly experience, Okay?

Cool. I think our deployment is done. So you can click on this domain URL now. And we should get our sign in option and viewing once more. So you can see this is a remote URL now. So this is, that's pretty much it. This is how to build an app with AWS Amplify and do that quickly. We just, in 1 hour 30 minutes, we designed, well, we didn't design of course, but we pulled in companies from Figma. Set up our components, bound data to them, set up authentication, set up authorization, pulled our components into React, rendered our components, deployed our app in literally just 1 hour, 30 minutes. So we are also early developers. We know how long this will have taken us to do that. This is a week's effort done in 1 hour, 30 minutes. That is just, that is just mind-blowing. And, I would recommend you try this out and also try to break things like brutally test this, test Amplify. The UI one is new, the UI feature is new, you can literally see that here, and we are constantly rolling new features out for this. But, if you, if you, if you, if it feels like it's against your workflow, totally use another library you can use, and by the way, I have an article I'm working on a video I'm making on how to use, still use both UI library as well as, take advantage of UI library slash UI library feature in Amplify, and use it with other third party libraries like Tailwinds CSS, okay. So, in case you're interested with that I'll leave a comment in the video so once it's done, once the video's uploaded, so if you want to learn how to combine different libraries together with this feature, it's completely possible, all right?

So that's, that's, that's all, that's all for this workshop and thank you all for joining.