Next.js React Framework Course – Build and Deploy a Full Stack App From scratch

Key Takeaways

Alicia Rodriguez teaches this complete course on next.js she will teach you how to use nexjs to build an application from scratch nexjs is a react framework that gives you building blocks to create web applications Alicia is a senior software developer in London and she's a great person to teach this course in today's video we are going to [Music] a pool stack react app that has the whole front end combined into one project net yes is in high demand it's a trendy JavaScript react framework it makes building apps a small and large a lot easier because it has a lot of features out of the box that you can use that will save loads of time it also allows you to build react apps with built-in server-side rendering and Page free rendering if you don't know what these words mean don't worry we will cover these Concepts today for now you just need to know that it means that it's ideal for having a great user experience and good SEO I'm going to show you how to build this event website from the ground up but if you get lost at any point please don't hesitate to use the comment box below to ask for help also I'm going to leave the link to the whole source code in the description box below feel free to download it and make it your own you can customize it as device and add all the features you want by the end of this video I'm going to suggest a few things you can add to this project so you can keep practicing and using everything you learned in this video Try don't skip any of the steps so that we ensure that by the end of the tutorial you know how to use Nest yes to build up underscore features what exactly are we going to do I'm going to walk you through the content of this video and all the points we are going to cover which I'm going to leave right here we'll build all the UI components and we'll make them pretty by using CSS and we will create an API again within our project I know it sounds crazy but we can do this with API Roots because it lets us create an API endpoint as a node by the end of the video we will have a full foreign or the front and back will live within the same repository and finally we will deploy our website for free so you can share it with the world for exercise for this video I'm going to start with the perfect size for this tutorial you don't need to have a nastiest knowledge but I think you should know about web development HTML CSS and JavaScript and it will definitely really help if you have some basic knowledge of react if you haven't built a react app before I advise you to start by learning react before jumping on learning Nest or any other framework or technology is based on react but hey it's up to you you will then react on the way for sure let's start writing and let's start with what is next yes if we go to the Netflix website we can see that necess declared itself as the react framework for production next gives you the best developer experience with all the features you need for production hybrid static and server-side rendering type script support smart building root prefetching and more and no config needed react is a JavaScript library that help us to build complex user interfaces a lot easier than it would be with just JavaScript unless yes is a framework on top of react so the difference between a library and a framework is that a framework is bigger than a library it has more features and multiple built-in libraries so Nas yes then react capabilities by giving us as SDK server development kit these are a set of documentation processes rules and guidance that tell developers how to structure the Ripple and write the code and also all of these tools and libraries are out of the box so we don't need to spend time implementing or using or the third party libraries to solve common problems but it is still a react framework so we still build react components and the underlying we add principles remain the same one of the most important benefits of using necess is the built-in server-side rendering if you have experience working with react you probably know that reactive renders the page in the client with react 18 they have introduced a bunch of new functionality to allow us to run their pages on the server side but reality is still mainly known for client side if you want to learn what's new in reacting team check this video okay what is the difference between rendering the page in the server or the client client-side rendering CSR let me go to a react website this page is getting rendered on the client what happened here is the client will download the code from the server then the JavaScript code will be executed by the browser and all the HTML content will be rendered to understand what code is render in the client or the server you can go to any website right click anywhere on the page and then click on view page Source here we can see that the content of our page doesn't show here if we try to look for these specific texts and we start here we can see that we cannot find it we only have the basic HTML structure this is because all of this content is being rendered in the browser of the user on the client not on the server so let's say one more time all the HTML code is sent from the server to the client the moment the user this is the page so we pasted this page we the client request the server to see this page this page which we are requesting doesn't contain the data yet the server serves to the client in a bundle all the JavaScript and the HTML code and then the browser executes this and is at that point when we see it this is what happened when we run the pages in the client server side rendering SSR now if we go to the next year site and we open the source code right click view source code we can see we have here all the content now if we search for this specific text um okay I can see it here so in this case all the content all the code has been pre-rendered on the server SSR is all about preparing the content of a page on the server instead of on the client so when we visit a page the client already has the content okay so server side rendering allow us to fetch the data and pre-render the components on the server okay so when a request hits the server the page and content will be ready for us to consume and for the search engines to Chrome that's why this is good for SEO when shall we use server-side rendering over client-side rendering them there are a few reasons why we will choose SSR over CSR or CSR over SSR it all depends on the user experience we want to create and on our requirements SSR has lots of benefits thanks to this for rendering like it can improve the performance and experience depending on the app you have it caches the data and it's great for seo seo stands for search engine optimization SEO is not important for all the pages for example if the user needs to log in to see a specific page then this page doesn't need to be rendered on the server search engines will never see this page because the user needs to log in first so in this case CSR is better If instead we have an event website and we want the certain news to find our content we want to be picked up by the search engine Scrolls so we have more probabilities to reach a bigger audience so people can find us and buy tickets to our events then SEO is really important for us okay I hope you have a better idea what Netflix is and why companies choose to use Ness yes so necess is a react framework ready for production because it comes with lots of configuration so you don't need to do it and it's fully extendable react is already really popular and some of the advantage that navies offer us is to render the pages on the server to improve SEO and cash how to create a nastiest project let's click on documentation and get started right next year's documentation is really complete and useful and you can learn how to use this framework just by going through it and reading about its features I'm not trying to make a sound super straightforward it is not it can be confusing and you might need to spend some time trying to figure out how everything works together but in general it's good to get familiar with reading and understanding the documentation of the tech you are using anyway now that we know what Ness yet is and we have an idea when we will want to use Nest yet let's click on documentation and get started okay so here they tell us their requirements we need to make sure we have node installed and we have the version 12 or later and we also need to have npm npm stands for node package manager and it's a tool for installing a managing Library risk in JavaScript projects and we will need that for installing Nest yes you can also use yarn or pnpm but I'm gonna use npm in this project okay so to check the version of note you can go to your terminal and do note and iPhone V and it will tell you the version I have installed the system one if you don't have it installed just go to Google and follow the steps it probably help reduce tool first and VM so NVM like this because this is the node versions manager so with this you then can go ahead and and do things like install version and you could copy this room for example and install it like this um and so I also um you can do NVM help and it's going to tell you all the commands that you can run and so on so if you don't have not installed you need this one because the built-in service I render it uses node.js under the hood so we need not installed okay so I hope you're all good and you have npm and not installed in your in your computer and now let's go ahead and create a new directory where we want to save our project so I'm just gonna clear this and I'm going to create a new folder so MK there and I'm just gonna call it um uh my projects okay so now I can go to this app folder just by doing CD my projects okay and I have it here so now let's go back to the website here and let's copy this line NPS create nest uh app so as as I said you can use yarn you can use pmpm but I'm gonna use this one okay so I'm just gonna paste it here and now we're going to add the name how we want to name our project so I'm going to call it um um events up and we click enter and it should only take a few minutes we'll wait until it finishes so I'm going to use vs code as my I did but you can use any ID you want web store or sublim or any other one I find vs code really easy to use and it's free so yeah so if you want to use vs code you can open the program this by I'm just gonna do it from here vs code oh okay one second yeah I have it in my other screen so I'm just gonna open a new um yeah Windows okay so let me bring it up here okay it's taking a little bit because it's going a little bit slow on my computer because he was installing next okay so if we want to open a vs code we can come here um open and click on uh open folder okay it's loading and then I could use navigate to wherever you um have your project but I like to do something else there is a command that is really handy that if you don't have it installed I recommend you to install it because allows you to open your project directly from your terminal and so you need to to install it you need to be in vs code and you need to do a command shift p and it is will open the command palette and type here a shell command here it is install code command impact press enter and successfully so I already had to use tools so maybe that's why it took no time to install it okay so now if we close this okay we are going to close this and we come to our terminal where we need to go into our projects first so and we can do LS and we see that now these events have folder has been created so we can go into it okay and now from here we can type code space Dot and that's it this is going to open our project hello hello and then clicking and open new folder and find the new project is just released to use that this and something else that you can do here is you can click um you can enter open space Dot and it's going to open the folder where you have and your projects okay so we can go to package.json and here we can see this the scripts to run our app and so we can see here the the next script to to run the the death environment so I'm just gonna click in new terminal let's undo npm run uh let me just let's shop again okay npm run that this is all we need and this is going to compile our code around the server it's going to uh hot reload and fast refresh the code this means that every time we make a change and we save a file next we'll reload the page for us okay we have an issue here okay okay I think I know why this is let's use type note hyphoon B oh yes okay so I can see that here in this terminal I'm using the version 8 the note version eight I meet at 12 or later so it's great that I'm running into this issue so I can show you how to upgrade the version and so I'm going to use the MDM command um and so NVM and I already have installed the sustained version because this is what I'm having this other terminal um so I'm just gonna copy this I'm gonna type use and then paste V and the version that you want um okay I have another issue um go ahead and do npm run that and yeah we can see here that we have a local host available and if we click in the link it's going to open the browser for us and there you go we have a nest app already running it's going to take you to their own website but yeah this app is already running in our local now before coding our app we need to have a look at the app we want to build so first we have a home page we have a header with a VAR navigation at the top with home events and about us then this section is highlighted the events in London San Francisco and Barcelona and and it will scroll to the bottom we have a our footer here okay so then and the header and the footer sections are going to be shared across all the pages so if we go to about us we have both here you go to events we have them here as well okay so now that we are in the events page we can go to the events in London and it's going to show us all the events that take place in London so we can go to the at stack and it's going to show us information related to this event and also we have here a little form where we can register if we want to assist to this event so this is the idea okay this is going to be a simple website but as you can see we have here a few pages that are going to allow us to understand the dynamic routing we think next let's think about the what is going on Behind These screens we have an event website right where we are displaying events across different cities and in each City we have different events okay so let's think about how many pages we need here so we have a page for home for about us and for events that's three and then we have a page per city right so one for London San Francisco and Barcelona and then in each City we have a bunch of different events so three in London San Francisco 4 and Barcelona 5. so we have a total of 18 pages so what if I tell you that we only need to generate five pages we only need to generate home events one per City and one pair events a single event and the about us because next we've generate the rest of the pages for us so we will have three static Pages hopes events and about us and two template pages so this would be one template and this will be the second one so from 18 pages that our website has we only need to build five pages and this is the power of Nest yes now that we know what we are going to build let's have a look at what nurse DS has created for us as I said earlier netias requires a specific file structure so it's important we respect it and we place our files in the right folders right so let's just make this smaller uh yes so first we have and Dot next folder B dot vs code are not modules we don't need to worry about this for now so we can go to let's start first title something simple here is where we have our where we can place our CSS so at the moment we have this Global CSS and home module CSS then we have the public folder that holds the public resources we will place here any static content like images videos fonts and icons because this is going to be accessible from our root domain at the moment we have the favicon and this sdg and this favicon by the way the favicum is this logo here this okay so if we store any of these elements outside this folder so we store them outside here they won't be available by next year's and anything we stored here is going to be accessible by anyone so keep that in mind this is the public folder okay so then we have pages this is a really important folder because we are going to set up here the file based routing so we'll have here all the pages that our app has so home all events and about us and this folder here is our API is where we are going to create our backend connections um next yes as you can see gives us an example of um all the like pages that we can have like we give us an example of fun index and also a hello with I um HTTP request so basically we have three main folders public pages and styles in public we store all the static content pages is where we store all our source code and style is for our CSS we can add more folders if we want so we could for example have here a data folder then we could have a list folder oh I'm creating files sorry let me just do it again let's do it here I need to be outside so here data okay do you see how the icon has changed um helpers okay I also said that we could no outside we could have lips okay and yeah well we could let any other folder we want and okay yes another one and that I really like to have is a source folder that this is what I'm going to use to place all the components let's go ahead and start building our pages we need to put all our Pages here next is going to create a path for us so if we want to have a about us page we can create about us like this dot yes JavaScript click enter and um now we can create a react component here so um const page oops page and I'm gonna return here um a H1 um about us page for example and down here I'm just gonna support this sport default page and now if we save this and and we go to the browser and I type um I type forward slash about us Nest is automatically creating a route for this about us page the file must match exactly the path that we specify here okay so we can now have something like for example about us without the iPhone okay and we will also don't use the extension so we wouldn't rely.js like this only like this okay our index is our root page so if I request reaches our domain like um slash and nothing our app will load our index page next don't create this root as in this so it doesn't create it like this it will throw an error so it creates the slash forward we can also create nested so folders let's say I want to have all my single events within events so if I create now a new file event one yes and we bring this code that we have over here here to over here and we just change days for event one and now this part the part that Nash will create for us will be events slash forward slash events what did I say event one okay so next we'll create a root based on this subfolder if we go to the path route events now we can see that these throws an error because we don't have any um we don't have an events page here we only have these events to folder and then we have the events one but we don't have a a event page like events page like this to have this what we need to do is to create an index page so indexed yes I'm gonna bring this code okay and now I'm just gonna call it events page now if we save this okay and now we come to our browser we can we can see now our page events page so it wouldn't work like this it just works like this so when SDS finds an index file within a folder next will create a root path for the files this is the routing file system of nasds and what next year's does is watches the URL and when this changes when we navigate to another page it prevents the browser for sending an extra request to the server and instead it displays the new page we specify so event one and this is the advantage of having a single page application nothing new from a real point of view we also have this will react but I think net yes makes it really easy to create pages and new directories if you compare it to react in real you will have to add a router library to manage this in next we can have multiple Pages here and that will take care of all of them and you don't need to install any external library to help you manage your pages you get it all out of the box with Nest so it makes it really easy to and and fast to start working with it okay so now let's clean up the index page and we'll get rid of everything we don't need just gonna go to here okay all of this let's just get rid of all of that so I'm just gonna leave this head here we'll come back to it so I'm just gonna change this for events events I'm just gonna leave this footer here okay we have our home page now I'm gonna start by adding um the sections that we have so first we have um we need a header so I'm just gonna do this Heather and in the header we have a navigation and then we also have a logo We'll add all of that later and we have an anchor href is gonna leave it empty for now I think and we have events and then I'm just gonna duplicate this by doing shift an option yeah it's shifting off you my keyword okay and I'm just gonna put here home and then about us about us and we actually have this page so we could do about uh somewhere we have all of them so let's just do it events okay okay yes so this Arrow will come back to this later when we have a look at how to well how to use this link component from next us all right so let's just save this and now okay we have here our links taking us to our page now about us okay this is working and then we have a main page and then the footer and I'm just gonna do um I have some text here with me so I'm just gonna copy this okay this is just a copyright okay so we have a footer we have some Styles we'll look into these Styles later at the moment I'm I'm only care about creating um the home page okay here in the section we should have three days for each event card okay so let's remove this and I'm just gonna add div and here we'll have uh H2 with events events in London then I'm just gonna hear some description text and for that I'm gonna use learning it soon so if you don't know this website let's go to it Laura ipsum and this is just a placeholder text okay so let's disc copy this okay so um I have for now I'm just gonna let's just leave it like this [Music] um and then we have the title and we have a test okay I just realized that um well we need links to each of these cars so this needs to be a link href and we Are Gonna Leave This empty for now I'm gonna duplicate this and say events in San Francisco and then duplicate this and in Barcelona okay so let's just go back to here yeah we have here all our events so you see there is a link but it's empty so at the moment um we'll just leave it like this let's just go to our about us page okay in our about us page we are gonna have a title and so let's just go here at this and I'm just gonna add some placeholder text we'll make this a little bit better later okay our about us page is done and then let's go to our events page okay uh events is this one yes and here what I have is we have we should have a div and here we need again the same structure as earlier so I'm just gonna copy it look what is it this foreign because here we again have the same Three Links in this case in in the design we don't have [Music] um we don't have this description the same as this and this we only have a link and within each link an image with the text so let's go let's go to the browser okay okay okay so we have our main Pages we have home we have events and we have about us but now we are missing all of our single events for all the webs we want to have Dynamic Pages this means we don't want to specify the names of the page so for example if we have event for Halloween we could come here and do Halloween in London but this would mean like I will have to create a specific page for all the events and we might have like 100 events but we don't want to do this what we want is to have one page and we want our path to be whatever the name of our event so we said that Halloween London so we want our path to be um Halloween in London or Halloween in um Barcelona or and so on so we want this part this this path to be dynamic and to be the same as the title of our events but there is a better way of doing this which is create a dynamic page if this is like a template that will dynamically render the content and create the this path for each event okay so I'm gonna delete this like this and to other Dynamic page what we need to do is create a new file and add square brackets and inside we are going to add identifier so I'm just gonna add ID like this and then dot Js and this this is how you create Dynamic files so now um if I copy I'm just gonna copy here um our okay just let's say event and Halloween in London no as you say our single event for example um and by the way this name here um this is up to you you can put wherever you want if you want you can put event ID or you can put hello you don't even need to use the ID word sometimes you use well it's quite common to use ID or slack like this but yeah I'm just gonna leave a like ID so this is how Nexus identified the dynamic files when we add the square brackets around them and this page will be loaded for different parts and different page names so we come here okay if I change this and I just write one two three four we also get it if I write 1 5 we also get it um so this means that at the moment any path that we specify here after the events forward slash will be picked up and we can still have a static Pace mesh to Dynamic one so for example here we have event one so if we come here we have still our event one page our stat static page okay so now we can have our single events render dynamically but what about our events per City so here we go back to the home page you can see here that we have three pages events in London event San Francisco and event events in Barcelona we could create a page for each of them so we could create three pages but in the future I might we might want to add more cities or other categories and we don't want to have to be duplicating work so we can also have Nest Dynamic world what do I mean by this Okay so we want to have something like here if I come here we want to have events I'm just gonna do it here that the better just let me type here so we want to have this path events is life um event per City I'm just gonna type it like this and then the event the event itself okay nobody is doing this but just leave it like this so this would be equal to events okay event in London and these for example Christmas and London or this could be the same as events in some from Cisco and then I don't know new your no sorry New Years if I guess okay so we could have something like this so to do this and you see that I'm adding here this square brackets well this is because we can always create a sub folders and random dynamically just by adding these square brackets so we could come here and where we have okay and we think events we are going to create a folder on I'm just gonna call it cut four categories and then within this one I'm I'm just gonna move this idea within this one yes okay and within the categories I need this page over here right so we need to create an index so index.js and then I'm just gonna be lazy and well yeah I'm just gonna copy this and then I choose the data okay okay events in London I'm just gonna leave it like this okay and I guess we have event one event two and then three and four and five I'm just gonna print six okay so let's see how this works if we go to our browser um we type events we can type here whatever we want as we said because this is going to pick up anything that match this path so F no no for example okay so I need to remove where was it this from here just save it again and we can see our single event and now we go to the events in London like this we can see events in London if I decide to type here wherever I want I can still see events in London great this is working now we need to connect these links with our pages so when we click in San Francisco here for example it take us to the right page and um it sure was the the right content at the moment and we just see the same contest for all the paths that goes after events okay but first we need the data so go to the description box and download the Json file I've attached I have it here ready so I'm going to drag it into this data folder so just drag it and let me show you what I have here okay so we have um two objects events categories and this is um an array of this is an array with all the events category that we have in this case our category category is the city so events for London with the title and an ID a description and an image that we are going to use for our Pages for for our homepage page um for our events page and and the same with San Francisco and Barcelona all events which is an array of objects each holds the information of the event the idea the title the city description image and email register we'll look into this later on okay so we have here um quite a few um events and as we can see we have identifier for each of them and and the city where each of these events take place okay now we need to get access to the specific data for each page so extract the dynamic enter path value this this Dynamic enter path and print the data that belongs to each idea so print all of these data this data could be coming from an external Source but in our case we'll have it within our project in this data folder next allow us to render our content in different ways depending on our application's use case so we have pre-rendering with server-side rendering or static generation and updating or creating content at runtime with incremental static regeneration if we want to render some content dynamically we need to have server-side functions so we are going to explore today how to render the pages using server size rendering and static generation okay so let's start with the server side rendering for this let's go to the home page so I'm gonna go here um this this is this is our home page and we need to add the function called get server side prop so outside this export function a sport page we need to add our functions so we say export function get server side props okay and now we think here we get the context but we don't need it for now so look into that later and um this function returns um an object that has props and here within this is where we'll pass um any props that we want our Pace to have so we can pass any props from here we can pass any pros from here to our page so let's test it out so I'm just gonna say a title I'm just gonna say hello everyone yeah and and now this is going to be available without our page props and we can use the structure function and just pass here title this is the same as doing this so this is your regular react um just as a reminder this is the same as doing this as it needs to be capital okay and say uh const title equal props or event and this is the same as um to improv props a DOT title okay we could also do this but I think it's a lot easier if we just structure this and we pass it directly okay so now we need to wrap this this is available and um and now it will refresh the page in home we are not getting this title okay we are not getting the title so let's inspect the element um I'm in May or am I adding this okay I'm adding this in the wrong place so I'm in events rather than I thought I was saying um home page okay so we can see okay so just in case you got lost and I was adding this and the index of the events rather than in the home page um I want to start by the home page so I'm going to quickly take this okay and just move it just go to this Index this is the home page right and now let's go back to this one and we don't have this anymore so I'm just gonna Advance page okay so now here [Music] um yeah I'm just gonna pass it here function home and let's just do a little bit of cleanup so we don't confuse ourselves like I did now so this is a page so we could say about um no about the US page um okay so we have about us page then this is events page okay like we call it all events events Pages fine and then within this cut um events per CT page okay or let's just call it category page because we said that sporty means cut category page and then this is our event page our single Advantage okay it's cool this is a little bit more tidy so now um we have yeah so let's go back to okay another issue if we change the name of this cons obviously we need to update this export default as well so let's just go through all of them and update it right we don't need this page anymore this was just an example so I'm going to delete it about us okay so I think we are good to go okay now I'm missing one events page and this one yeah as you can see we can also also export it directly okay so I think now we are good okay let's just double check that all our pages are working yep okay these are not working um because I haven't added the link so okay so this is something we could we could do this and this is obviously going to display the same page for all of them so I'm just gonna show you the I'm just gonna add it here for the moment but just gonna show you that's going to take us to the same page anyway and hit these bits see if I can get rid of all of them okay so if we click here it's going to take us to this same page okay if we need the in this path update we still use the same you we don't have Dynamic content for for them that's what we're going to do now okay so let's go back to the home page and um yes okay so as I was showing you I was showing you about how to get uh how to render content in the server side using this get server-side props function okay as we can see we can pass any props that we want from here into our page right and yes I think I already mentioned this but I'm gonna repeat it one more time this needs to be exported as a standalone function so this won't work if we move this block even if we ignore this port and we add it here within our home page and component function this won't work okay it needs to be separate you can put it above or you can put it at the bottom that doesn't matter so you could do this and come here and do this this doesn't matter because what is happening here is um I'm just gonna leave out the bottom um but what is happening here is um this code the next yes is going to run this code first so it's going to run the server side function first and then it will run our page and also this code here only run on the server side and never run on the browser so it never runs on the client so any information that we put here even if we put a key or some secrets and the client won't have access to this information so you could put you you could put here and any private information and the only way that the client the browser will get access to this information it's it will pass it through the props it's it will pass like this okay wait this is not the case for now okay so let's repeat it one more time this code here runs on the server only and it runs before our component before this component this component and this page will be created just in time after deployment so only after you deploy the navcs application this page will be pre-rendered for every incoming request if you are starting to learn to code it's really important you get familiar with the Frameworks or the libraries documentation and get used to learning how to use it just by reading the documentation so that's why I'm coming back to the next yes documentation because it's really complete and it is important that you don't get afraid about I know you can feel overwhelmed at the beginning because it has many entries many features and loads of text but it's important that you get comfortable searching for whatever you don't understand in the documentation Okay so um we can start here for whatever we want so in this case um we can search for I want to search for server side props and by the way if there is anything in this tutorial that is not really clear or I haven't covered in detail please come here and search for it because I'm sure you're going to solve your doubts just by just by reading the documentation okay so and get server side props as you can see you have here the Carter Smith where it shows you how to write this function and then if we scroll down okay this is what I'm looking for here it says that we should only use guest server side props if we need to render the page whose data must be fetched at request time this could be to the nature of the data or all properties of the request such as authorization headers or your location Pages using get server side props will be servicer render at request time and only because if cache control headers are configured if you do not need to render the data during the request then you should consider fetching data on the client side or get static props okay so it says we should use get static props if we don't need to render the page at the request time in our case we don't need this but nevertheless I want to show you how it works and so that's why we are gonna use it in the home page function yeah just so you I can show you how it works okay so in the home page we need to get the data and we need to get this data here we need to get the data for the events in London there is a description with an image and the title and the same for the other two so basically what we need is the data that we have here in events categories okay so and to fetch this first and we need to let me come to the home page okay we need to make this function asynchronous because we need to fact and we need to wait for the the response so support I think function and now we can do it as simple as doing import we pass here the past to where we have our data our Json and now const data equal and that's it now we're going to lock this this is going to give us the data an array with two objects this is returning a promise because this is an asynchronous function so we need to await this and now we can see here that we get um Advanced categories and all events the same data that we have here if you were fetching from an external API and it will be a little bit more um not complicated but you will need a few more lines of code so you you probably will need something like fetch where here you will pass the URL you'll probably would do something like this rest and then we will need to transform the uh the response into something we can work with and to do that we need to wait it and we need to do rest dot Json use these Json method okay so here we will get the same data that we are getting just by doing this but this is if you were fetching from an external API uh you probably will have to do something like this a list and uh you'll get an array of two objects let's go back to where we were okay so we are getting these data and the one that I'm looking for is the events category this is the one we want we need for the home page because it's the one that has the information about each category about each city um so we could um we could just do this um I guess yeah and so we are the structuring these data and here and and and now we could um remove this and set data equal events category okay so now we're going to have this data available in our component okay so in this component so we can't we can't come here and this the structure the data and then here is where I want to add my new data so I'm going to use the map method so this is just normal normal JavaScript actually and we just say data.map and what I'm going to do is I'm going to map all events so I'm going to create a link and and this is going to be I'm going to use the template and it's going to be events and now I'm going to pass here the variable which this is events dot let's just check the data okay so we have an ID title description and image okay so this is going to be the ID and then um Let's see we okay we are here and uh inside we have an image and in still using this image I'm just gonna go ahead and use the image coming from next which is um an optimized image okay so SRC source and okay and now we also have a H2 and this would be why is it creating double okay so this would be event dot title okay and then we have description so and then dot description to description okay and each item here needs to have a key so every time that you use a map um you need to add a key I um and this should be a an identifier I'm just gonna add here the ID and now we could go ahead and just remove this and also remove this one here okay and this one here is complaining because it needs um the width image elements must have an ALT prop either with meaningful text or an empty string okay and I think we also need to add a width and a height uh at the moment I think I'm just gonna yes I'm I'm just gonna add event title and yeah okay it's complaining yeah with um height okay so let's just start that um it's gonna be like I don't know 50 percent or let's just like size um then let's just add this as 100 percent and now if we go to our browser we are running into another error okay so um the host name image and splash is now configured under images okay so we need to add this host name to our next config okay by the way this is plans as Angus plus is a website that I use it's a stock photography where you can download images for free and what you're saying is that we need to add this hostname in the image config so let's do that um Ms config and and there is a c more here let me just copy this first because I'm gonna need that um okay this is great as I was telling you is really good to get used to looking into the documentation because it just tells you how to do the things or how to solve the warning errors that sometimes you might get okay so it's showing us an example a sample of of how to add these domains okay so we need to we have images have three images and now it's an object right domains and we have here ours um okay we go back and this shouldn't worked just yet because we need to restart this server so when you make changes in the next config remember that you need to restart the server let's see if now yeah so now this is working we have um our images now displayed they don't display great um okay but we're going to show that in the next chapter when we start proper building the UI for our pages I think this is sold down to this high that I specified here because I have to specify um something let me just close this um yeah okay well this is okay for the moment let me just say why why do we have this space so weird I'm not sure why they are not all aligned um but it's okay now we have our data coming from the uh from our database our internal database okay as I said earlier there is another way we can progenerate our Pages progenerate meaning pre-render these pages on the server okay and that other way is called Static generation and the way it works is that um we regenerate next regenerate all the pages in advance during build time when we build our application we progenerate these Pages before we deploy it let's just go back to next and let's open it get a static path okay and um showing us how to use it here so in the server side rendering the the function that we just used here this one we were building the pages only after we deployed them at the request attempt so we send the pages to the client pre-pipulated with content in the get server side props we do it at the after we deploy at the requested high but when we use static generation we prepared this before we deploy our app and this is going to keep updating even after we deploy without needing to redeploy our app okay I hope that makes sense so let's go to the events page okay is this one and we are going to get the content the same content basically because we also need the content for events in London events in San Francisco and events in Barcelona but in this case we only need um the image and the title I mean we need same as this but apart from the description okay so let's go to yeah I'm here and the same this function that I'm going to use also needs to be a standalone function and before continue I'm just gonna close a few things okay I'm just going to remove this console log as well wow and I closed the date I didn't mean to do that let me just have the data there okay so we do export default and sorry sport function for one yeah sport function get static props right so as a standalone again we can move this above the component or just leave it below but never inside and this also needs to be an async function and we're going to use the same methods we did before const data equal import and we pass here the path for our data okay and this function also returns an object and one of the props of properties of these objectives props which is an object as well okay so we can say data equal to data um but um we only need these events category okay so we are going to do the same as we did here as you can see we can use the same approach here okay I'm just going to double check that we are getting okay okay and as always I'm always forgetting something await quite [Music] um so we get here all the data and by the way I'm not sure if I mentioned this already but I'll mentioned it again um I'm putting here this console log right we are on the server so we get here the log but we wouldn't get this on the client so here I refresh I'm not getting that console log okay that's because we are within the server with us within a server uh function okay so this doesn't make into the client the only way is by passing the props and by passing props through here right so now we can remove this and I'm just going to use the same approach okay so we are going to have a map and before doing that I need to the structure here the data first and then I do data map events okay and this is going to be an H rare okay and then this is going to be the The Descent the same as earlier so I'm going to use a template and now I'm going to add the variable F ID okay and here we have an image foreign just an H2 and this is going to be a b title okay and we need a key each game is to be unique so like this you were building this for production this kit probably should be a little bit more uh it's Unique than just the name of the city maybe adding some numbers just to make sure you don't run into uh having two kids uh running into having two items with the same key okay so this is complaining for the same as before I'm just going to add the old FM title and with um this is not going to look good but it's okay and we need to import the image from [Music] um from next year's okay it's weird that it's not Auto important let me just try again image okay so now we can see that this has been imported so now I can remove all of this right I save it and here we have our images it's not looking radius I'm going to we're going to make this batter later no worries but just for the moment I this 100 maybe doesn't work like that exactly we'll have to check next documentation bye yeah this will be better okay so I'm gonna go to the home page and do exactly the same as you can see I'm preparing this course as I go with you I haven't created this project before okay so there you go now we have it and we clicking one is taking us to one page but we are all gonna take us to the same page okay so we can see that we can fetch data in the same way using both functions in a similar way at least using both functions let's look into something more challenging so when I click one of these cards I navigate to each specific page so in this page I want to get old event for London and if I go to Barcelona I want to get all the events for Barcelona rather than um this placeholder tags okay so let's look into how to do this I'm going to go to the category page this one here um which at the moment yeah we we have these links empty links and um by the way these links would be events um wherever here London this we will have to dynamically specify this and then event one for example and we will go to our page okay it's taking us to the single event cool okay so we need to have a root generated for um London San Francisco and Barcelona and Ness is going to generate all of our pages in HTML so we'll have one HTML per uh per event a category item so we are going to show a page base in this component that we have here okay so when we built our pace for production next is going to generate a page for each event so next is going to come here and now here exactly but it's going to generate a page for events in London and a page for events in Barcelona so it's in this case it's going to generate three pages for us these three all of them are gonna match this part here and this is the dynamic path name Point even if in our data we have three events items that we want to um create a page and next doesn't know this at this point Nest doesn't know uh how many roots and Pages it needs to generate because it doesn't know what we have in our data file and at most cases this data would probably come from an external API but even if it's an internal and next doesn't know and Nest also doesn't know what we want to do with this data right okay so we need to explicitly tell next how many pages it needs to create for us at build time and to do this we need to have a function called get a static path so export function this is going to be as well as a sync function so let's just write it Now function get static path if we go to our Json file we see that we have an ID property that looks like this this is actually the name that we would like to have for our path okay so this is all we need and so let's go back okay so in this function we can return um an object that has a path and this path oops um is an array we want to be we want it to be an array of objects where each object holds the root parameter and within this did so this is param and it has an object where it has an ID in our case our ID is this cut so and then here we'll pass the exactly path that we want so one two three for example okay so we need to generate this array with all the events per category that we have in our data because we don't want to come to here and have to have code in it like this like uh London and then um create another one and Barcelona because now we have three right but in the future we will have more and then later on when we create the a single event we are gonna see that we have maybe like I don't know 12 items in the database we don't want to have to create a specific path like this like this okay so I'm going to use the map method here so but first I need to I need this data first okay and now I'm going to do const all paths I'm gonna map this then category.map okay so what we are going to do here is um we're gonna hold we are gonna go through each iteration and we are going to take each object and return it with this format that we have here so I'm going to just copy this I have an extra okay and this is going to be the event ID and before this complaint I'm going to convert this into a string like this and I have a typo here get started paths okay so there we go okay so now let's just come to unlock this all parts yeah and we are getting here the data okay Londo San Francisco and Barcelona so now we can go ahead and replace all of this with our new variable okay there are more things that we can return here one of them that we actually need to because if we come here it's gonna tell us that it's missing a property is fullback so earlier we said that we could put any root here after events and and FCS was going to pick up anything that was matching these and this route this part but now we are specifying the paths we want next to build um and these roots for so here we are specifying and we're telling and next okay we want you to build a page using this component templates for this for this specific uh path which are the ideas we have here okay so the full pack with the fullback property we need to tell next what we want next to do in the situations where the user put something else that doesn't match the path that we specify it will specify to false this means that our page will only render will only be built for um the the paths that we specify here if we navigate to a different page okay seems like we have found Evra oh yes I have another type here this should be paths okay so I'm not going to be able to test it because we need to use get a static props first but basically now we are specifying that we have three parts London San Francisco and Barcelona if we type anything else here this is going to throw a 404 error Pace because we are saying that we don't want a fullback enough fallback is false but for now we don't need to worry too much about it and there are some fancy ways we could do here in the future I think I'm going to create a series of more next advanced concepts to optimize your website okay so and what we did here is we're telling nesk what pages and routes it needs to create in the build time before we deploy our app so a page for London a page for Barcelona pays for San Francisco um but now if we go to uh if we work here we see that we are getting this error where is missing get to static props so this function that we used earlier in the events page is missing this function so let's just go ahead and add this function I'm going to show you why we're missing it So within get static props we have a parameter whole context I'm going to console log this so just to show you what context has okay we need to return an object I probably need to do it properly props this return on empty props of an empty object there's your Photon empty object and this is what contest has so contest has information to all of this the parameters the categories our ID page and exactly the page where we are so if now I do this Barcelona foreign and now I come to this website now it's taking me no no no this page okay so we can see here that now the the the ID for our paint is different imagine what we specified here in the root okay so um this is what we are going to do in order to get the information from our Json is to filter through this um array of objects and get all the data get all the objects where the ID is equal to this category ID to do that I need to use this function again in this case I don't need this I need all events okay and in all events you will have a look at this object we have here this city okay this is what we are going to use as our identifier okay so first I'm going to and the structure and extract this parameter okay so um [Music] hold on parameters and move this again and cut okay so console log ID okay we're getting here cool amazing so we are getting the ID now so now what we need to do it let's just do const data I'm gonna filter through the array go to map no no filter I'm going to say events ID equal to ID no event CT sorry this bit here this okay so I want to get all the events data where um it has a city in the city where the city property is equal to our ID so let's counter lock this okay so now we can see that we are getting angry with all the events that we launched to in this case it's Barcelona if we go to London visual update and we are getting all of these okay okay so we are getting some data so let's do this so data equal data and this is the same as doing because it's the same name the same as doing this data good and now and now that our page is working I can show you how fullback works so if I type here something different Berlin for example as we said this is going to throw a four-fold error because we said we set fallback to false if we set this to True nevertheless we are going to get our page I think at the moment I prefer to leave it as full so we only render the pages that we specify here right okay so we are getting this data and now we can come events category page and the structure it and we get data and let's do it one more time the map method I love the map method so data.map and I'm just gonna return an event okay just gonna do it like this probably don't need that actually who just use a narrow function and what we have here is and we are going to look in just in a minute about replacing this anchor tasks with links with the links component coming from next yes let's just leave this for the moment and this is events we are also going to improve this but events um London well yeah we have we need some category here which we have okay so events and now this is going to be um event dot ID okay so we have a link we have an image just gonna paste it here click import click fix okay so I don't know why it's not working so okay don't then title event image then title and we have the description right let's let's just check the data description and we have it is we look into this later on okay so this should do I'm just gonna remove all of this okay so finger cross and hopefully now um okay so I took images from different websites so I'm just gonna add this to our coffee foreign let's restart the server cool so we are getting the data and we're getting only the events for our London page okay now is the moment to test what happened if not this one if we go to another page so let's go to San Francisco okay we're getting all the vents for San Francisco and now if we go to Barcelona same old events for Barcelona okay this is great okay so now if I click in one of these events it's taking us to our template page a single event so what does this mean this means that we need to do exactly same that we just done we need to create a template page like this one where we have two server side functions to get the static paths and they get the static Pros with props to tell next yes which path um we want next to create for us which Pages needs to create for us and uh more content it needs to generate for each path okay so let's recap in the static and ratio we have two functions and both needs to be Standalone similar of the server side rendering function and these functions um go back to here yeah these two functions get distracted path and get a stack the pro props for dynamic Pages we need both of them for the study Pages we will only need the get static props because we only need to get a static part when we need to specify how many parts we have we want to use this template for right so before deploying our app when we build that Nest is going to analyze our whole project and see how many HTML Pages needs to create based on our data okay so once it knows how many pages and Roots it needs to create it will then go and fetch data for each page so it will come here I'm just gonna close this it will come here I will say okay so here I need to generate um let me just okay so it will come here I will say okay so here I need to generate um all of these paths that we have here that in this case is three so I need to generate three three pages and then it will go to the next to this get a static props function and it will go here to fetch the data to know what data it is to generate in the component okay so once it knows how many pages and Roots it needs to create it will then come here to the get static props and fade and fetch the data for each page and it will put this data in the component here in this component so this Dynamic page components work as a template that's why I keep repeating the word template this means that we could have 100 events and only need to create one page and one template for all of them so if we need to make a change to one single events page let's say to add an option to buy tickets for this event we will only need to do it once and it will update the 100 event Pages we we might have so you can see how powerful nefgs is okay so before moving to the next section to the build in the UI um earlier I mentioned that we were going to replace the anchor tax for the link um coming from next year similar of this image rather than using the regular image tag so Netflix comes with loads of Handy features we can use okay so let's start fortunate so link it's gonna do like this and then import link from messages link I hope it's like this okay so this link gives us the ability to do client side navigation in the browser so the pages are loaded using JavaScript and we don't make a new request to the server so we don't need to make a new HTML page request if we go to the the website now and let's just ignore this arrow for a moment let's go to the home page and when we clicking here a about us we can see you see that below we can see that we are doing a full refresh of the page let's do it again we clicking about us and here we can see that we have a full refresh so what client-side navigation does is that um avoids this and we don't do a full refresh of the page we don't send a new request so this means that the transition between when the user navigates between pages is a lot smoother and quicker so improve this experience okay so the way this works is we can wrap our anchor tags with this link okay so it's as simple as doing this we are wrapper wrapping our whole anchor tag with the link and here it is telling us that is missing Okay so we need to move this to here now this is the parent but this link is missing the H ref that we have here okay so we're going to do eighth ref and we're gonna move it here and we remove it from here but this is not great for accessibility it's not good to have anchors without an edge breath so something that we could do is um the link has a property that is past href so when we pass it like this this is the same as saying patch of ref equal to True okay so we could just leave it like that and now if we reload this pay if we save this page we just go back to here okay if I click here okay we were still using the anchor in this point because this is in the home page and I'm in the categories page okay so here we can see just to see the difference this is reloading but now if I click in one of these ones you see how this hasn't reload we don't have like the load in there this is client side you see how fast it is look at this let's compare it again okay you could see there I'm clicking hearing events in Barcelona it's just like doing a full refresh if I click on one of them yes this is super fast right okay I'm just realizing that we are still printing here events in London so um let's do those changes now so what we could do is let me open this context we are getting this right um and what we can do is we have here the ID okay so we I'm going to pass another prop so this is like a page name you can call it we have a page name and and I have passed the ID okay so now I have this available here I can replace this okay and this whole set okay and there are more things that we can do here um as you see the name is lowercase rather like than the proper way so we could use like native math JavaScript methods to change these words and make the first uh letter Capital but I'm just gonna leave it like this for now right okay so let's just replace all the anchors that we have for this amazing link let's go to the home page importing the link and again what do we need to do is grab our anchors with this link we move this key and we say we are going to for accessibility passage to ref foreign oh okay capital okay um I could to do exactly semicolon I should do this until the same with the navigation so let's just do this okay and I'm just gonna I'm gonna copy and paste this event oops okay and now one more time for the about us about us about us on this path about us let's save this okay and I think I'm missing one more page so let's go to that page first I think I'm missing the events page yes I'm I am okay so same import link from next link okay now let's wrap this I'm gonna need I'm actually gonna need all of this okay um right [Music] foreign was going a little bit crazy and okay so I think I have updated all the anchors that we have um just to make sure I'm going to do this okay this is fine yeah cool okay so let's go back to the website and check this go to about us now it's super fast it makes such a big difference yeah San Francisco okay okay so when we built our app for production Nest is going to perfect the code for all of the pages that we have here in these links so when we specify links like this next is gonna go through our whole project as we say right it's gonna find the places where we have the link component and it's gonna say right I need to create a page for home I need to create a page for events I need to create a page for about us so every time we use the link component and we are pointing it into a internal page a page we have here in this folder Pages Nest is going to go through all the links and prefetch all the pages okay so now I think yeah I think we have covered how to build a static page how to build Dynamic page how to fetch the data using server-side function server side rendering and static generation functions and before starting building all the UI and all the components we need to create this our events page and this is really simple we have an image um a title and a text and we need to use the same approach that we use here for the categories page okay so let's go ahead and you still copy paste we're going to do it again so we made sure we are practicing what we just learned okay so as we said Standalone function okay and it needs to be an async function static paths okay so either made the semester I met earlier and it needs to return an object so it doesn't complain and it needs to return paths which this is a an array and what we need is to go through the whole list of all events and get all of these IDs these ideas is what is going to be our route all of this okay so we need to go through the whole all events array so to do that and I'm just gonna do like this for now okay like just to do it a bit different so cons data we access our data Json okay we need to weigh this because this returns a promise right and now this is comes data now we do we need to we we want this object so const all events equal data okay so this is the same as what we did earlier that it was doing this but let's just leave it like this and now I'm going to do const all parts equal all events dot map um path I'm just going to call it path probably there's more Santa's path okay so and what I'm going to return again is an object that needs to have this format so we have a params a property here and this is an object and within this object we need to specify this ID so in this case it's ID because we chose that name here if we have changed this and um and say hello now here we will have to write hello okay and I want to save it okay so ID and this is path dot ID as simple as this okay yeah I think this is all we need and we cannot forget that we need a fallback and as a fullback we want this to false we want to throw an error if um the rule doesn't match match these paths okay so let's go to the terminal terminal to the browser and is telling us that a required parameter cut with no provided as a string in get static paths okay this is because this page this path has events and then it has a dynamic part and it's Dynamic page itself so it's saying that we are not specifying here so the difference between this space as the other one is this is a child from this cut page right from this page set out from this page so here in this object we are missing categories so we are missing this cut and this is path dot City okay this is our category identifier that we have here okay maybe I should have called that category but maybe it's an improvement that we can do for the next video okay so now we save this okay this is fine we are missing to get static props as expected why is that because in SDS what he's doing here is it's going through this function get the static paths right so it's going through that will hold data uh is fetching our data we is retrieving our data and then you say okay so you want um I'm not sure how many items I have here within these all events but let's say you want 12 paths you want me to create 12 pages right now you need to tell me where is the content what is the specific contest for each page the way we get and we get that by using get a static props okay so export a sink function get static props okay I mean get to static props we get access to context that is what we can use to extract the path okay um so just a reminder again we'll teach inside context okay we are going to get Arrow because we are not supporting anything let's support something then let's support the empty object again props okay so this is what we get inside the context okay so now we can use this to get our data to get each of these uh objects okay so let's do this const data await import okay and now I'm just gonna do it like this this time because this you can see that m is quicker to extract the all events just by the structuring like this then um adding um these two lines but this implementation this one here is the same as this okay and now we have our context and I'm going to do the second const ID this is going to be equal to const terms and a ID right in our case is ID okay so cons Theta equal to um event data so all events and I'm going to use the filter method to filter down the list and let's say event okay and now we say if events um ID so basically what we want to do is we want to match we want to go through the whole our whole data let me make this a smaller and find and the object that match this root so I want to match this route right so I'm gonna go through the whole data and find the object the object of the ID the matches that root right so to do that that means that this ID let me just do it like this this ID which is this right it needs to be equal to event dot ID okay and now this is what we can pass here data right and let's just go ahead and destructure this data uh in this in our component page right and for now I'm just gonna put a console log data that we are going to see in the client okay so if I reload the page now this is not updating because we're having that add any data into our page but we added a locked here and we can see it here we are receiving an object with uh all the data for this event San Francisco Innovation Summit um San Francisco um like this description that is just a learning episode and our image okay so let's populate that uh that's that content so what we need here is uh meditative to wrap everything we are going to have an image okay and this is going to be data dot image with um foreign title now we can close the image and now we have an H1 which is going to be our title so data Dot title okay and then we have a description so data dot this encryption um okay and let's just have a look see how it looks right okay so we can see that um what this is a sporting because I use the filter method okay I use the filter method and um what filter does is support a sports an array Sports an array so it's gonna go through the the whole list and Export all the items that are that all the items that match the condition okay so it's gonna go through the whole array and and create a new array with um all the items that match this condition right so maybe the filter is not the best method that we can use here because what we want to to have here is white so we won't find the one okay so you still filter I'm going to use I think is find and if I go here yes this is something different so now we get our limits let's just make this bigger okay we get our limits with our title and description and if we go back okay we're in London no yes let's go to London now we're in London and let's go to the house party there you go now we have our image with a our title and description let's go to another one to check that this is all working good and yes we get this event and let's try San Francisco okay and let's try this Opera event and there you go we have the specific information for our event page and have a look at this the client side navigation is just super fast and super smooth okay so I think that's all for this section we have let's just recap we have our home page with the Three Links looking a little bit bad but we'll sort that out in a minute then we have our events page with three links as well and about us which is using a static page and then if we go to one event we have a page to our events for um a page event per category and then if we go to specific events a single event right okay so I think it's time for us to start building the UI and something that you might be noticing it is that when we are here I cannot navigate to other Pages because we are missing the header and the footer so only in the home page we have the header and the footer so that's what we are going to be looking at next okay now we have all of our components created it's time for creating the UI at the moment we are adding everything to this pages so let's start by refactoring our header and our footer and create its own component when we build apps in this year we are still building react components so this works exactly the same the only difference is that Nest comes with some libraries and components under the hook that we can use we saw earlier that we could use a special custom next component for link and for the image and there are many others that we can use we can create these components within the folder uh source here what I usually do is create a new folder called components and then here I will create a folder for component pretty much so for example header okay Heather and now I can come to components and create footer okay and I'm just gonna make this lowercase yes footer I think I'm also going to add here now a folder for events and I'm going to create a component page that we hold all the code of our pages so we can keep our page as last as as light as possible um so unless you say in the events I'm going to create a event page oh no type of script maybe in the next version we'll use typescript okay and the same for home page I'm going to create another folder at the moment our home page is really simple but maybe in the future this wouldn't be the case we will add we could add a lot more features so um Okay cool so now let's start by bringing everything we have in the header into our home page so I'm going to leave the header for the moment I'm just gonna bring this main bit okay I'm just gonna paste it all here and now we need to import the link from Nest yes nope not coming like that so okay understand with the image so let's just duplicate I just duplicated this line I'm just gonna change the link swap the word link for image okay so now we have the home page have this data okay so what we need to do here because now this is going to be cold within our paste component so this is going to become a child what I need to do is pass these props so I'm just gonna do do it like this right and now uh if I go to the home page I can call here this component Okay so Capital here and so let's just call it home page I don't know why my visual studio code decided to don't work okay so let's just import it cool let's see if everything is working and it seems like we have an issue here um styles main okay so I'm just gonna get rid of all of this class name Styles because we are going to be adding a Styles in a minute so let's just get rid of this uh let's see what else is complaining about okay data so now here we come home page we need to pass the data so this will be data equal data okay I'm not sure exactly why I'm not receiving this data so what I'm going to do is to just put a console log here or I do know why I'm not receiving this data Okay so so I need to wrap all of this I'm missing the return okay keyword okay so now it's working okay so it was happening is I created our function and I opened the route I I was um creating it with the curly brackets I needed we need the keyword the key return and otherwise it doesn't work so this would be the same as doing if we don't want to use the word return like the Cure key will return we will have to remove this okay this is what I had before and instead opening curly brackets I will just like uh return it immediately this this Arrow function okay so this would be the same so let's just leave it like this actually so now we have the home page so now we need to move this into the footer component okay so let's just go to footer I need to create a new footer component okay right and let's support it here same little one this and let's just check that everything is working it's not working because we're having imported yet the Lesser less to die in a minute unless just cut all the header okay and come here header and create a new component so Heather Dot okay jsx and then export const header and let's just return it like this okay and we need to import the links cool okay so now now we can't just import the header that we just created cool and now let's do the same with the footer cold let's see if this works okay I can see the footer and I can see the header here nice this just works like any other react application and you can call this a folder components whatever you want and you can place it wherever you want but I think it's kind of like a standard to put it within source and put all your components within folder components okay but the problem here is that we get the header now in the home page and and we also get the footer but if we navigate to other Pages like events or the single events events per category or if we go to about us we don't get the header or the footer we could just uh go to the to about us for example and import the header right we could just do this and do the same in all the other Pages the problem is that we would be duplicating code that is common across all the pages and if we decided to remove the footer from our Pages um for any reason we will have to go to each specific page and remove it so this is not the best way of doing it there is a better way of the I'm doing it and for this we need to go to pages and go to the file underscore app this file is the application shell is the root app and this component here which will receive through props this is the actual component itself so this is the index page this is the about us page or this is the events page here is where we could add providers or code that we want to share across all the pages like um a provider that wraps our whole app we could do something like this provider and then in the middle we will just render our component okay and we will have to wrap all of this like this okay something like this so this is a great place to have our head around the footer that will be common for all the pages uh we could add them here like Heather and then like this Heather and then footer foreign we could have this and then to have like or um have components like this we will have to create a fragment you know so we can render more than one child in one return so we could do something like this and so in my app we will have the header then the components in the middle and then the footer but then again this is not the cleanest way of doing it so the resulting that I really like to do which is create a new component called main layout so let's go ahead and do it I'm going to create a new folder within components um code layout and then within layout I'm going to add a main uh layout file and then okay this is a shortcut to create a arrow function and then we just update this Main main layout we call this sport like this here okay cool okay so um here is where we could I'm just gonna have a fragment okay so I'm going to call Heather right nice and now I'm going to call footer nice okay so we have the header and the footer and then we need to get access to whatever is nested inside the layout because we want to render our components page within this within this header and the footer so to do that we need to pass the property children okay so what I'm doing here is I'm destructuring the children then the props and the structure in the props like this with the curly brackets and now I need to pass the children and to do that we just need to come down here and pass the children like this so basically now we can place anything inside our main layout component because of these children okay and so anything nested this will output the children inside this component now if we go back to app we can import these components so let's get rid of this I'm just going to import it I'm just saying main layout I have it here so I'm just gonna have it like this because here inside is where our children goes and what is our children our children is our component so just copy I just put it here in the middle and this is all this is all we need to do we have our components that is accepting our children as a prop here so now we think I will call this component mainly yeah we can pass anything that we want and in our case our components and now if we come here we can see we see a double because we haven't get rid of it just yet but now if I go to about us we can see the header and and the footer yeah it's down here or it's up here and now if I go to events page I see the header and I also see the footer Okay so let's repeat what we just done we have wrapped our component with the main layout uh components where we have our header and our footer and a children property in between where all of our Pages opponents will be render okay something else that we could add here is a head content and with some generic settings that applies to all of our Pages we could have a hat and we could have here like meta description and so on I'm not going to do it for now because this is just a MVP a minimal viable product so we leave this for the next time for the next video so now what we need to do is we can just go ahead and remove this header footer that we were importing here okay now it will reload the page yeah we only have one header and one footer um remove this okay cool so let's talk a little bit about let me just clean all of this that we don't need okay let's talk a little bit about Styles we can have CSS in different ways we have some Styles in the project already so if we go to the style folder and we open the global CSS sales sheets we can see here that we have all the styles that mess yes yes kind of added for us is to display something in the page and and This Global CSS is imported on our root component our underscore app so we come here we can see it here okay so everything inside This Global CSS is going to be applied to the whole website so let's just go ahead and add some background so I can say live body and now it's a background color equal a blue okay so if I come to the side I'm in the event page I can see the blue in the home page I can see the blue and it about us I can see the blue okay so this is applied to the whole website let's just remove this so we cannot import CSS like this in other pages so we cannot let's go to underscore app let's copy this and now I'm going to go to about us for example example and move this Okay so um yeah I mean the right path that's what I was checking so if I come to yes about us I have a warning message saying that Global CSS cannot be imported from files other than your custom app due to the global nature of style sheets and to avoid conflicts please move all first party Global CSS Imports to page underscore app or compare the import to component level CSS CSS modules okay so we cannot do this and it's already talking that telling us about CSS module so let's get rid of this okay so as now the warning message is gone and as it was saying us to apply its types to each specific components and we could use CSS modules and there are also other ways of um doing this so as these modules allow us to write statuses for each component and that we import the sheets to the component so we could bring about us and just imported here how we did before but only we use CSS modules Nest is going to scope those styles to that component by adding random characters to the class name so you don't have to worry about the conflicts names between different class names and there are other ways we call a CSS like using style components or emotions for example but this tutorial is about next year so I'm not going to go into any of these options in a future video if you are interested we can add styles by using CSS modules or style components and we can even compare both of them but for now I'm going to have all my style sheets in the global style sheets which is something I definitely don't recommend you to do so but we are learning how to use Nest yes here so it's fine actually I'm going to use SAS SAS stands for synthetically awesome style sheets I think and SAS is an extensive to CSS it's a CSS preprocessor we need to install it and we need to solve this as package so let me install that while I explained to you why I think it's better for us to use us okay so I'm gonna click here to create a new windows okay so I'm gonna do npm install shortcut eye for eye checker for install SAS and I'm going to save it in the development mode because we don't need this for production so there you go okay so um yes okay so I have a kind of an issue with this shells so I need to okay so the reason why why I'm going to use us is because search Nest supports such natively and it's a lot quicker to write code because we can use variables we can Nest the code that is especially the reason why I'm gonna use it we can Nest code and we can also um like avoid using some semicolons or columns on sampling to 18 so well yeah it's installed that was pretty quick so um now we only need to actually rename this um this style so for example we have here home module CSS so when you install an SDS as you can see it comes with the module CSS by default as well uh but we don't want to use module CSS for now I just want to do this is the Styles part as fast as possible because I prefer to focus this tutorial in learning SCS so having said that let's rename this and I'm going to remove all of this I'm just going to say help SAS okay so this should work you see how okay I'm just gonna undo what I just done I'm going to say so command save in mac and all the curly brackets and semicolons are gone okay so that is one of the reasons why I prefer to use SAS and I prefer to use SAS over as CSS cool and uh that's it now we just need to start adding our styles okay so now let's start building the UI okay I'm going to start by building the header then the footer and then we'll move to the home page events page um and all the other pages okay and the about that space so let's start I'm going to start by I have this home I'm just gonna say um General okay I'm just gonna place here everything I'm just gonna leave the global as it is and or actually let's just do let's just do something and just gonna remove all of this I'm just gonna rename this file here say SAS okay I'm just gonna remove the yellow so we are just gonna keep one as we said we are gonna keep it simple right so we just need to update this and let's see I hope anything I hope it didn't break okay I need to go to Global CSS and now save it to remove and Savvy in the right format for SAS and you we can say like all the cardio brackets are gone so we come here let's use refresh the page it's still failing okay and that's your wife finally let's just close this okay this is what I changed my mind I think um can't be bothered to check into that era so I'm just gonna leave Global CSS as it is I'm gonna come here I'm just gonna put this back into CSS okay so we have now our general SAS okay and I just need to go to the app and import this so I'm just gonna duplicate this SAS and now zero right okay it's just throwing an arrow here oh okay okay okay cool um I'm just I can't just get rid of all of this we don't need any of that okay so cool now we are here so in our designs we have like the header would be more like 300 height pixels so let's just go to Heather put up close and everything that I don't need so all of this okay I'm gonna make this even bigger and now let's just start by adding it like this and saying height 300 pesos there are better ways of doing CSS like using n or Ram but we are going to keep it simple okay cool okay so now we have that now uh we were going to have a look we are gonna have a logo here so let's just come here so I'm just gonna divide this for we have navigation okay um just gonna call it just gonna have a div I'm just gonna put the dip within the Navigator the navigation within the dip and here in this diff I'm going to have an image with this is going to be my logo right okay I'm going to import this image in a minute and now a navigation we are just going to leave it like this and down here I'm just gonna add a H1 this is going to be the title of our page I'm just gonna use something like this okay maybe shorter okay so I have my logo ready and now we can come here to the public folder something that I like to do is to create a new folder for images and I'm just gonna drop my logo here okay just gonna copy this nice now I come to my header and I can just import it like this because these public folders with this public folder is saying the brute level so we don't need to do something we don't need to do this okay we can just specify it like that okay um okay logo and of course we need to import this okay doesn't complain now um okay do I need to do images okay a typo there okay now we can see our logo here okay so let's just do this let's just be like Paula's name okay and you say top bar top navigation top now okay now we come here top knob and then this is going to be a display Flex and justify content Center I don't remember how this is okay no space between space between and then um align content Center okay let's just Surfer look cool okay this is starting to look a little bit better then we need to give a bit of a padding around but we'll do this here actually uh padding let's just say I don't know we've got 50 pixels cool okay it's a bit too mad so let's just do this and let's go to the header and let's just add a bit of semantic asml okay so let's just do uh nav or do I need to I probably uh maybe I should yeah okay let's just do this okay I need okay and then I'm gonna have another layer and another one for about us and this should be fine okay so this is how it's looking at the moment but where about this we'll sort that out in a minute okay so let's go back here just thinking let's just move this let's just do this and we can see cool this is better right sorry this is better okay foreign and now I'm just gonna um add the lid like this and just say a font let me see if I can do it from here from the weight I'm just gonna do a 600 okay and I'm also I also want all the text to be a bit bigger but let's just do it from here then font size 16 pixels so be better and now just to make sure um okay let's just do this and let's just say okay [Music] foreign because I can see it I can use this um the browser tools to adjust their CSS see it in real life a little bit faster than doing it in the code um so yeah I like doing it like this so this is how I do it so this is a a header and these are displayed Flex so it is not by going to be a display Flex okay um directional Flex column okay and align items space between what um okay all right stays between yeah there this one it is and then I think I'm just gonna leave it like this I'm just gonna copy this head up yeah but he's complaining this is fine now and now I want the title to be this smaller so 30 pixels okay 40 pixels I want the font size to be quite big okay so what about something like this and text transformation capitalize no uppercase uppercase cool okay this is a bit better again this is a prototype just to have something nice to show but and then okay so I cannot see the H1 style supplied and that is because I'm having it here inside the top knob so I'm just gonna cut this just need to move it here okay save it now it should work foreign okay so now let's just uh give it a little bit of a style of our cards okay so now before that let's just go under the footer okay so let's just close this and now footer and this okay so we can close the header I think the header is fine for now footer we want this to be background color foreign okay and now we are going to have some padding around so padding 10 pixels okay and I want it in the middle so text Santa text align Center okay I think this is fine for now this is looking cool it's okay footer done okay so now what we need to do is this bit here okay so use the home page so if we open the home page component let's see what we have here we have a main that we could wrap all of our other pages in main as well [Music] yeah actually something that I like to do is to have this Main in the main layout component so in this main layout component I like to have Main and then these children would think will be within May so then I can customize this meant for all the pages okay so I could say something like if I had it there I don't need it here right so let's get rid of this and just have a fragment so then I could come here and say Main and say with 100 and then Max with um like this maybe okay and then margin O2 okay this is to sell like a maximum width so our Pace doesn't use like extracts to the infinite and basically of the size of your device because some user might have might have like a massive um monetary screen um so you you don't want that right you don't want to understand that it's just like the full width like that right so what you want is um to have a maybe a 1 450 and then anything that is gets bigger than that we can see here like any screen that is bigger than 1450 it will be just like margin around right so I think this is cool so I can show you how it looks so for example if I said okay responsive you can see how it looks like here okay the um so and we could do the same for the header um and I think that would be a good idea not the header like the color I wouldn't like that but maybe the content inside could do the same so for example this could be a [Music] um this all could be brought actually in another dip the whole stairs and then that is what it could be like Max width and so on um but yeah let's just leave it here okay and let's use close this and yeah so we said 1450 so this is how it should look like and yes so let's just add a bit of padding we still need padding wires so 30 pixels and then okay so let's just say what we have here we have here is links and we have this main main div and then we have a div we say in that okay with all our links and this depth within that is this one here so we could do this class name and um home body okay for example oh I don't need this now so display Flex Flex Direction go to column okay and now what I need is for each of them which is a link I need to add a class to each of them okay so I'm just gonna say class name equal a card okay so I can come here now and say card and now I I want to do yes so I want to say display Flex and then this is a flex Direction row okay as you said let's just say this so content and then we say the width we want to build with 50 and then I'm going to wrap this in a div um and I'm going to move all of the content within that tip okay so it's looking like this let's make it look better and then class name this is going to be content okay so we have an image of a Kappa content and this is going to have a gap of 30 pixels okay and this is going to be justified content in the center um and align and I want a gap here of 50 pixels okay and I'm also I also want to wrap this image into a div because I've seen like let's make a little bit complicated to customize the image like that so this is going to just be image like that foreign pixels and now what we want to do is to just put this in the middle so Center all of this part this content okay so let's see how to do this okay so there you go I couldn't remember where the property was so we were missing align items in card okay that's why I love how them I love to use the browser because it is so handy um events in London events in San Francisco events in Barcelona okay so to make a little bit more interesting uh we said that we would want to um put this one the MS starting the right size so like reverse the order of the elements and something that I'm seeing here is that I would like to have more more potting at the top at the bottom so for that I'm gonna have here to the main I'm gonna sell like 30 pixels is fine for left and right but I want 50 pixels for top and bottom okay and even less go crazy okay yes let's just leave something like this and now okay to change this order what I'm going to do is in the car because this is the car I'm going to say and this is the the odd so this is going to be like this child well what am I typing and then art and then I'm just gonna say order I think it's reverse no Direction okay yes direction direction I'm gonna say here the direction is a right to left okay so this should work amazing okay this is so I don't want the odd I wanted the even okay yes I think I think I'm not sure what it does what it looks better okay this doesn't looks great okay so let's just do something let's just make our resource screen smaller and what I'm going to do is to make the images a little bit bigger okay so now okay I think this looks a bit better okay and I think I want to do the same for the header because now I don't really like how it looks thank you so in the header I'm just going to open the header component okay I'm just gonna open it I'm just going to say right I want to wrap the whole thing in my div and now here when I'm in a header I'm just gonna just gonna do it like this okay this is not the best way of doing it but it's fine for now okay so now here is where we could we could say the same thing that we have down here foreign I want to have it here nice okay okay so this is the home page okay so I think we have the home page I think it's fine it's looking good and now let's just go to the about us page okay so we go to the about us page and let's just make this look a little bit better so we can see like we would like to have the footer at the bottom right so what I'm going to do is I'm just gonna give a main a minimum height I'm just gonna say 16 pixels it's a bit too much 14 pixels so it's literature it's a bit too little 500 pixels okay and yes I mean we could add a lot more text and a little more and other styles and so just to play around to be honest okay so to play around let's just do something like this we have like imagine that we have other sections where we talk about uh about this company about this my events company okay um this looks a little bit better already and now let's decide the H3 okay and I will next text there you go it doesn't looks great but we can't always have something now like this thank you okay and then we'll have another one here where we select a different text to make it look a little bit different there you go [Music] out as list okay now let's just do it at the middle color bracket so let's just do it like this what okay so now we have display Flex row we have something like this so yeah I mean just to play around a little bit you know it doesn't looks great very great but I think it's okay it's something that I also want to change is we are in Main and okay I want to display this at the top starting from the top without leaving all of this separation but maybe this is what yeah this is what I added earlier yeah I make it smaller though I don't quite like it maybe I make eight pixels 80 pixels okay so we have hung about us page um how would this look like if we change this Row for column okay so maybe something like this cool okay so we have the home page we have the about page and let's go to the events page so this was just going to be like um a big image all in one word with the title in the middle so let's do this okay let's close this let's close all of these and let's go to events page onto the events real page so I'm going to do sectors and as I did in the home page I'm going to you say class name here it's going to be events page okay so I'm gonna use this I'm going to come to the CSS dot the class name and here's where I'm going to add all the styles to my events page okay so we have this and what we want is I'm just this is the page page so I'm gonna take this and just come here I have an arrow I have created a narrow function right and I'm just gonna paste all of that here okay I might be going a little bit fast but we've done this before so and now we when we go to this page we just need to call this this imported nice okay and now we need to pass the data okay because we have the data in this page that is coming from this get a they get a static props yeah so we come to the events page here with the structure and we pass the data like this right okay code so it's working okay so now something I need to fix is I need to add this so we don't have this here anymore I'm gonna add it to the component okay cool so all everything is working now I love the the the the link I definitely lost the link okay I'm saving this I go to events page I'm also saving this let's just give that reload okay so my local hotels welcome let's come here uh indeed so I'm calling the component with components the same so I'm going to update this one and or no I'm going to update this well okay I'm going to call it all events just like that it's fine and now I come here and foreign so let's go to all events we have events face here we have the title right events page I'm just gonna get rid of this title let's suppose that these eight to one title is personalized for this page this is something else that we can do in a next implementation let's use um add some Styles today so what I'm going to do is okay we have the events page and we have all of this on a div okay I'm not sure if we need that okay yeah we have a day within a div we don't need that cool okay now write events page this needs to be a display Flex row so here will be a row okay rules and then I'm going to leave some more gap between them well Gap 20 pixels and now I want these big letters in the middle so what I'm going to do is it's going to be class okay so I'm gonna come here I'm gonna say right card okay what I've been doing is font size 35 pixels 30 8 pixels then color white I transform it and put it in the uppercase and then I added above Shadows used to um to make everything more visible okay so let's go here and just add all of these styles okay and so we have now the home page we have the about us and we have the events page okay so let's just go to um events in London and let's just start putting together these all of these cards okay so where we have like this image at the top and then the text and uh this text here okay so let's do that so let's go to index events category okay just leave this here something I'm seeing is that we have this big Title Here that we set as H1 but then we have the title of each page at H1 so we need to add effects to it but we'll do it once that we finish like styling all our page okay so let's start by bringing all of this into its own component now we can add within the events folder that we already created Okay so let's just yeah go here and let's go to the components folder yeah and I'm going to add a new no no folders no more folders just a new file that is event card yes I'm just thinking that I'm going to need another one that is going to be event events event per category event okay category just like this cartoon event cool okay just gonna leave it like this okay this is going to be the events uh category so I'm just gonna um take all of this as I did earlier I'm just gonna copy all of this I'm just gonna bring it to here okay and now I can come here and can I can call this component we only have one thing to call so instead of returning that like this I'm just gonna return it directly so this is going to be category um this is going to be actually rent okay and I need to pass these two bits so theta equals data and Page name equal page name okay cool so now category events we need these two and we need this as well cool okay let's just leave this here for the moment I'm just gonna start creating a this I'm just gonna call this class name catholi events and now this is going to be a our content and then I'm gonna call this class name card okay and I I created a specific component for this class because I really like to have everything really organized um like if this is a class com that this is a car this is an atom this should be in its own component um so but nevertheless I mean our application is quite small I don't want this tutorial to be super super long so for that reason I'm going to remove this one I'm just gonna leave it here okay just to make a little simpler but the idea is that this works in the same way I react so you should be dividing your components into smaller components okay so category events foreign let's see let's have a look okay for a start display flash Plus um Flex Direction column okay and I want all of these events um call this um content and this is going to be a display Flex row and this is going to wrap so wrap so this is Lex wrap wrap Okay cool so each each of them is going to have a width of Select this for pixels so like this and we are going to have a gap in the middle of 30 pixels cool Okay so sorry this cup needs to be here and now and we need to say that this is with 100 percent okay or we could do something even better so this is calculation with 100 minus 30 times three times it's probably worth 100 percent is with 100 yes device center uh just five items this five Contest Center okay so this is the event in London let's just go to all events let's just go to events in San Francisco and this is how it looks like right I don't really like that so I am going to just um have this displays flex and this is justify contest start okay okay and now we go to Benson Barcelona this is how it looks like well right now let's just go to the house party and this is our events help party um it's okay it could be the design to be better but I think for this demo for these uh tutorial I think is it's definitely okay so house and haunted house party 2022 this is our event and yes I think this looks good so let's just continue with let yes let's just finalize the eui okay um cool maybe there is something smaller we could do right okay so I think it looks okay I think I'm just gonna leave here this title as events in London and what I'm going to do in the header because we shouldn't have two H ones in the header I'm just going to I'm just going to transform this is into a p plus name still this is going to be a title so now when we come here title okay but that's fine not too bothered about that about pay yes okay events in London and see somebody's convincing Barcelona and the home page there's this clicking something physical you take us to this beautiful place a page and when we clicking one you take us to this to the single event I think this is good I think this is okay for us for this tutorials definitely okay so something else that we need to add now add to this page I'm just gonna quickly do this and is to add a button no a input type email okay I'm just gonna do it quickly now we we're going to do it properly but I'm just going to show you what we need to do and now we're gonna have a button to like soap neat okay so this this is what we are going to do for our next step which is build the API and interact with a internal API that we are going to have within our project okay so uh this uh let's just recap we just done and we just added Styles we added to this SAS uh file and we could add the Styles in different ways like CSS modules emotions style components but we decided to go for a simple option just adding all the Styles here okay where else have we done okay so we moved the header and the footer to its own components and they only we think main layout that we call in the root of the application that is the underscore app full file um so this one sweet we did this because we want these components to be shared across all the pages so we don't have to duplicate work and like create them and um coordinating every single page and then what we did is this move all the content that we have in each page into its um we move it into its own component and so here we have moved into its own component and yes just to clean it up a little bit and to make the pages as light as possible and just by doing this recap I just realized that we haven't created a component page for this one we still have it here so let's just quickly do it okay so we can finalize with the lesson of building the UI so let's just do super fast here just gonna add another one like single event and now I'm just gonna close this we don't need this for the moment you don't need this so we're gonna take all this come here just gonna paste it here so single event we're just gonna copy here I'm pasting the support default okay and we need to bring the image that we have here that we don't need in the other page anymore and just paste it down here after the react okay so now we need to destructure the data which we also need to pass here when we call this component so I'm just going to remove all of that just do a single event and they meet scroll it properly and now we just need to pass the data data equal data curly brackets okay and all of these should work just as good good working okay so yeah I think now we have finished with all the uis so it's time to start building our API okay so actually before moving to uh to the next point in our list that is building the API let's just um sort some issues that we have here you can see like then we've been doing some changes and now we have no planning at all here so just let's just change that okay so we're gonna come here and I'm also let's just change this to start four Flex start it's better to use the flex cool okay so as I told you earlier I like to do things in the browser a lot because I can see what I'm doing and then I just move into the code so I'm just gonna come here and head up and here is where I'm going to say padding uh 13 pixels I'm not sure this is uh a lot um maybe something like 15 pixels 13 pixels I think this would match our body content okay yes let's just go ahead I I mean it looks better than how it was before so just go back here just gonna make this a little bit bigger okay cool um I think the UI looks good so I think it's time for us to talk about apis so if you don't know what an API is I will advise you to do some Googling and understand how what they are how they work because it's quite an important concept to understand but but let's just go through it quickly API stands for application programming interface it allows software to interact with other software we can use apis when we want to interact with a computer or system to retrieve information or perform functions if we go to the next DS documentation let's just search for um API I'm just gonna go to the introduction so here is telling us API Roots provide a solution to build your API with nextgs so any file inside the folder Pages API is mapped to API and will be treated as an API endpoint in yourself a page they are server site only bundles and won't increase your client-side bundle size okay so let's just go to our project to our repo and go to pages here it is so by default we have a folder called API that has a hello file there this is just an example that an SDS has kindly added added for us so in this folder in this API folder is where we can inject API words and we can write server side code here which is then triggered for requests to these API groups so as we can see API I am sorry as we can see in SDS is allow us to build an API without having to build a separate project just by having this API folder within our pages so any page inside this folder will be treated as an API Point as we say right so this hello this example is is treated as an endpoint and and here as you can see we we are now a terminal a reactive component we have the other type of pages for that like these pages and what we do here is to is create a rest API endpoint and we use them to return a Json response if you are familiar with Express you'll find it easier to understand the code we write here like this thing this syntax and because I think both yes and express use a similar pattern and let me show you let's just go to the browser and here we can go to Diamond Point by doing API forward slash hello and you can see that we get the response named let's show you how to pronounce um but let's just change this name to Alicia foreign okay so we go back to our page we reload now we can see the new response okay before creating a new file let's have a look at what we the API interaction that we are going to create and go to the events page here we need to go to any event so add tag for example and here we have this uh input with submit so this I'm just gonna add a label so it's clear what we are going to do here here we are going to add the label and get register for this event so I think now it's more clear what this input email emphasis for if we go back to the yes on file you have you might have noticed that in each event in each event object we have here this entry for emails register so what this is is basically all the people that are attending this event all the people that have registered to attend this event so what we want to do is and we are going to have a form here so the user can introduce a his or her email so when the the user clicking submit we are going to have a post uh request and so we are going to create an API in point for that so the user clicks you submit we create a post and request and we are going to update our Json file and that's the new email email so um things that we need to consider is each email needs to be added to his right event right so we need to check that the ID and that the ID of this page which is this path and matches one of the options of one of the events that we have here in this year so and then at the events other things that we want to consider we want to um probably throw an error or some message if the user is not filling in um this input email correctly if it's not like in a um in the format of the email is not correct um something else that we probably want to consider is not allowing the user to into that introduce the same email twice so something like this have some tag and some logic there in place so we check if this email is already it has already been registered and show a message to the user like these are this email has has already been registered right okay so some of the things that we want to do okay so behind the screen how this usually work is we send data to some server This Server then connects with the database here and the database will store our new data this request is about storing the data accepting data and sending back adjacent response I want to send a HTTP request with JavaScript when the request hits our API we extract that data from the request and store it in a database okay so I want to send an HTTP request with JavaScript when the request hits our API we extract the data from the request and store it in a database we can send the request to our API root and then in the API root here we connect to our database this file here the idea is that when the user click submit after filling in this input we are going to intercept this email so for example we are going to intercept this email and send it to our database to this data Json file and to do that what we need to do is create an API root to allow Chief systems to communicate with each other our app and our database because we cannot send it to our database from our client app so from here for example on this component like adding some JavaScript this will be really secure I mean in this case our database is this Json file but um in most cases you will have credentials in the database and if you send data from the client directly to the database you will be exposing these credentials and before continue last year's uh make this properly and add some styles to it so I'm going to close some days we don't need this uh let's just leave here the Json so we're going to create a form and within the form we are going to move all of this within the form so now we are going to um like you said like the ID is email placeholder is please insert your email here yeah let's just leave it here for a moment and um in the bathroom this is fine we can add here type pattern if we want and in the old form is where we are going to we need to add it on submit and here we will create a function let's just leave it like this uh or actually let's just create a function so it doesn't complain okay just come here and create almost narrow function and let's just leave it like this for now okay because I just want to add these Styles first oh okay so now let's just I'm just gonna add a class name here I'm going to say and here I'm going to add another class name and say events event single page okay so now I come to the general and I'm also going to copy this one here so oh typo here okay cool okay and now I am going to start by the email so input and let's say I wouldn't decide to be 40 pixels so it's a good size for the user's finger to click on because we need to make everything responsive think about mobile and mobile design as well I mean with probably something like 200 pixels and then let's just have a look at what we have here okay I'm just gonna do it here in the inspector so as I said earlier so I can see how it looks like okay I don't want any both Shadow or anything I don't think we have anything here but box shadow just in case another browser adds something by default I'm just gonna say about selling to none and border um I'm gonna add a border radius like five pixels okay we can see that this is kind of like a border image to there I'm gonna say if it's known or maybe is okay let's use maybe it's the border border one pixel solid and I want this to be oops what did I do okay I was here I want this to be this gray for example yeah that was good so probably cool I also want that padding left two pixels well and we want this in a placeholder actually so we cannot do it from here and let's just say font size 16 pixels and I think we can just leave it here yeah um let's just make this 400 pixels and I'll make these looks a little bit better just fly now three picks 150. okay so I'm just gonna copy all of this come here and just paste it okay save it and the format will be applied cool and now I want these form to be display Flex Flex Direction and column with Auto or yeah well Gap I want a bit of gap between all of all of the elements and actually um no because I want these two to look to be side by side so what I'm going to do here is yes let's do this display Flex in the label and then I'm going to add a margin bottom of 15 pixels for example yeah this looks good and let's do some more bits font size 18 pixel phone way way let's just say 800 yes and I'm just doing capital not like this was a test decoration upper case say like that test one form I think yes okay cool and maybe margin top I want this to be and so there is more separation between the label and the top but I'm going to add this into the email registration I hope I haven't lost all of this okay good so I'm just gonna copy here I'm gonna come I'm gonna label just as it is save it come back here we have it okay let's add the styles to the button so I'm just gonna add battle all of this you really have two last names but our website is quite simple at the moment so let's just leave it like this cool okay so again let's have the Styles here so we are going to start for Border radius I want it to be the same and then a height the same men with um okay this is going to be like for example okay were there none we don't want any border and then we want the font size to stick 16 pixels as well text transform uppercase we want everything in Upper um yeah in uppercase and then margin left is the side pixels put weight 16 okay um what else okay let's decide the background color so this is a treat that I do all the time I like to select when I like to select color from the page and I want to use this palette what I do is like the shirt is a color name to write with red so I usually just what I do is background red and then I click here in this Square I I choose the selector and then I come um to any part of the page and I just select the color that I want in this case I want to select this green okay and yeah I'm just going to leave this green it's a bit too clear actually maybe we can select like a darker version art before um maybe a border I do the same here red but then this is not going to be red I'm going to change this okay I'm just gonna leave it like this so I'm going to copy all of this come to our Styles paste it save down and you can you see that we don't have this hover over in the bottom um let's decide like a cursor pointer and now we have it okay pointer and then I'm going to add an uncover so to make more Interactive Okay so what I'm going to do is um swap the colors so I'm gonna have the color has this green and then the background is going to be it's going to be like a dark gray yeah okay so for some reason the background color is not working let's have a look oh okay let's just reload this page and now yeah now it's working okay so if you're working um here in the inspector because when we do changes in in our app thanks to nasty as great features and we don't need to reload the page to see our changes um if they get applied automatically with this how to refresh or how to reload so because of that um um so that's why I needed to reload okay so yeah we can see that now it's working okay so now that we have the UI already let's start by creating our API we are gonna come here to the API folder and we are going to create a new page that is going to be email registration foreign as default so let's just start by export default which is a Handler let's just call it like this um that has two props one is request and the other one is and response we can handle multiple HTTP methods in an API route so if we want to add some logic only for the Post method and we can identify it by by this by doing this equal post and then add some logic here okay so to do this I'm just gonna do it a little bit different I'm going to the structure the method that is inside request okay and then we can do this if method is equal to post then we want we add our code here okay one API is quite common normal that we will have different methods we could have like if the method is supposed we do this if the method is get we'll do something different and so on okay so let's use every couple we want to do what we want to do is when the user inserts here an email and click on submit we want to identify in which at which event ID we are on and at the new email to our Json file so add it here okay let's just close this cool so that's what we are going to do to do that first let's just go to let's just go to yeah start by adding the functionality in the client we said that we have here a submit button we have an input and here the form has an own submit function that we have created here and it's currently empty so we are going to start by adding there some and adding the logic okay so we want to first track whatever the user has insert we want to store the value for the user has introduced in the input and to do that I'm going to use the use ref hook this is a react hook so I'm going to say const input email equal use breath this is to get the reference of an element now we can assign it to the input email and now we can come here and in the input we can say ref equal input email oops so this is a variable okay okay so input email okay so Indiana I'm just gonna here we get an event prop automatically because we are adding this function to the omsum mid form so we only need to pass it like this and we can have access to this event Frost because the browser assumes we are sending a request and um and assumes that because we are adding this function to the building ultimate of the form and we want to prevent the default of reloading the paper we saw earlier that when we click here in submit this reloads by default so to do that is prevent the default it is like this okay so I come here and now I can say close email value and we said input email dot current dot value okay and um let's use other console logs so we know what we have within input email okay so this is all the information about our input by current and within current you can see that we have here value and then we have a bunch of other things we have loads of other things okay at the moment this is empty but if we introduce something here it will be empty because we will have to relocate in order to see this but um what we are looking for is the value so let's just keep it here value and now what we need is to identify the event ID and to do that I'm going to use another foot so comes router equal use router and this is a nav vs hook foreign automatically and now we are going to be able to get inside the power page the router page so let's just put another console log so we can see what this has in size so this has as part we can see this part here um we have other bits like the query the category London the ID that edge Tech was lead uh so this is what we are looking for this bit here I'm just gonna go to that this bit here okay so if we go to another page let's just go to Advanced in San Francisco um blockchain for example okay right so now we can see that the category San Francisco and the idea is at SF blockchain week so this is what we want to use so let's do a const event ID it's like this and this is router I'm just gonna add here this question marks optional trading just to double check that and to only get into query once that we have the router and ID and yeah just like this and then type it okay so um and what we want to do here this is going to be an Ascent function right because this is a this is our own submit notice we need this and so I'm just gonna add here the word Ascend and what we want to do what I'm going to use is a try catching block so we are going to have a try and we are going to have a catch with an arrow in the middle and like this okay so here in the try we want to do a fetch request and a post set request post-first Festival Quest okay something else that we want to do is we want to send in our body in the body of the fat request we want to send the email Valley and and the event ID and then in our cats what we are gonna do is we are just gonna leave the same as simple as console log and ever just like this error starting all right okay I'm just gonna show this one I think I'm gonna change the color of the same I kind of fancy working a lighter color so I'll say like this okay so to change this you just do command shift p and then you type thing I think you need to install the plugin so yes if you don't have this go ahead and install color thing and then you can choose between like a selection of different things okay I hope this is still visible for you so we were in email registration of air here if it's a method post we are going to send a Json response to that and um so we can go ahead and do rest status if the status is 200 if everything is good then Santa Json responds with a message like this message um you let's say you has been registered successfully with the amount and we will have to pass here the email okay so for now so this is if we do a post request and the response status is 200 this is what we do okay from here I'm just gonna go ahead and say const email and event ID and and this is going to be request dot body okay and yes okay so let's do a post-fetch request and test that this is working okay so here in try I'm going to say const response just let's just type the word like this I wait okay because these are synchronous and the function we are 30 so it's asynchronous and then and this is API and email registration okay I'm surprised it's not suggesting us be able to completion okay so this is like this and we had an external Source we will add it here in the same way just like specifying the end point and um but in our case we need to point it to to this to our API this needs to match the path where we save our API page so this is our current domain for a slash API email registrations and then we can open curly brackets and here is where we are gonna pass our options so method we want this to be a post request okay this is where we specify it we are going to be sending a Json so we need to specify the type of content so we add this to the header like Heather content type and application Json and here in our body we want to convert a JavaScript value whatever JavaScript value we are going to pass into a Json string so to do that we need the Json method dot string five as is suggesting us here okay so I'm here within um the curly bracket is where we send the data that we want to append to this request so we will pass email equal email value and then event ID okay because this is the same as doing this is the same as doing this event ID okay is the same word so we only need to specify like this cool as as we said we want to convert the JavaScript values here into a Json string okay so now and if I say this um I save this and I do here I'm going to do the dollar I'm going to add the variable here and let's just add the email as well it's so fun okay so now to to get this response to get this data we need to convert into something that we can work with and similarly what we said here to do that we need to use the Json method so we can say count data equal await because this is also and these returns are promised so a weight response Dot jsons dot Json okay and now we have the data that we probably should do something something it's a really good practice is to say if we don't get a response it responds no sorry if the response is not okay okay this is not okay we want to throw an error and we can just throw it like here so throw so throw New Era and then let's say error it's a wrap and then we say response dot status okay this is in case something is going wrong so we can see that there and so we can throw an error and this will catch it here okay so now we have the data and um we have the email registration we have a um our request our endpoint returning a Json okay okay so in email registration we have here a message if if and the response status is 200 which is means like a successful um so I'm just going to lock this so I'm going to say post layout here later let's have a look so we come here and let's just introduce something you can choose wherever you want and we clicking submit okay it's not working foreign okay okay so yes this is the type of this button is actually submit so that is the reason why it cannot be just like a normal button so I was wrong there when I was adding actually when I added the Thai button I was already thinking like this doesn't look right but I still did it uh but yes okay so remove the type button from the bottom and you can I believe you can actually add the right type to the bottom which is submit and this should work good yes this is working okay so as we can see here let's just clean this and we have invested successfully which is not true but our message is coming through and it's coming through with the right email that we have introduced and um the ID of the page so we have some things working good okay so from our single event and when we are submitting this form now we can send this value to our API root our API root is going to accept this extract it and save it in a database in our database so to do that let's just write here everything that we need to do okay so I'm just gonna do it outside the post um and here what we need to do is access our data which is this data Json file and once that we access our data we need to extract our data foreign we want to go here we are not interested in events category but we want to extract is the old events so we extract all events and then in all events we need to look through them and identify um the events ID and then there we need to add the email so add the email to this this entry emails register add email into this so what we need to is great and the right function you need to is right on our data what else do we need to do access our data extract our data extract specifically only events Loop through them and identify the event ID at the email into the email register right and on our data it doesn't make sense and something that we also need to do we could add it here is and the response should the response should be four or four if there are no all events okay this could be a possibility especially when you are interacting with external database you can you you always have to think about all possible errors some or everything that can't go wrong okay because in that case the response wouldn't be 200 you cannot tell the user yes your email has been registered like we do here if something goes wrong in the middle okay so if we have no data no all events the response is a 44 and once that we have all events we look through them and we identify the event ID we add the email into the email register but only okay I'm just gonna add this here like this only if that email doesn't exist and something else that we are going to to add but probably as a last point is check the format of the email is okay I'm not sure if this makes sense I hope it does let's just start creating it so first we need to access our data to do that I'm gonna come here I'm going to create a function so I'm going to call it um function the build path okay I'm going to build a path so I can easily access my data and um yeah so this is going to be a really simple um I need the path and so important path from path okay so we're going to need that imported like this without uh needing to install it because it comes with node.js and we install node.js when we install nastics so we need to construct a path so we can reach this file here the data Json which is our database and to do that we will use the join method so we will say dot join and then here inside we will add all the folders and finally the file to have an absolute path to the data Json file okay so first we need to get access to the current working directory so get access to the root okay so we will say process.cwd current working directory okay so now we are in the root of the project so if I open this again if we are in the root of the project the next thing that we have is the data folder and then we have the data Json so we need to add data and then Karma and data.json if we had another folder within data for example we had an event right and the data Json was within event then we could do um we could add the events like this okay so if we join all of this disconnect rate of events and also these folder because we don't need it cool okay so now we have access to this file so let me just return the path like this we also need to be able to update the file data Json so to do that there is something else we need to import and which is the model FS so import FS from FS just like this and again this comes kind of live by default this module here allows us to read and overwrite the data of a file so this is actually what we need I'm going to create another function here I'm going to call it um function extract data because this is what we are going to do because before updating our data we need to extract um this object let me just come here all events we need to extract this objects so we can look through the data and find the event ID and then once that we find this event ID we can register the new email and update the list okay so here we need to pass this file path okay so this is going to be a function that I'm going to call within our handle function so I'm going to extract it and so here we need to pass the file path and then I'll do const Json data is equal FF dot read file synchronize so read file sync and here is where I pass attach the file path and we need to parse this data so data equal Json dot parse now we pass Json data and we can return this and we can actually return this directly like this okay what I was doing Maybe let me just do it like this so it's more clear what we are doing here we are just returning these data here um so we need this past yearbook because we need to convert this into a JavaScript object okay so this now is a JavaScript object okay so now we need to go down and within our function uh here before the above here about the if statement I'm going to set the build path so can't file path equal and so I'm going to do build path just like this so now um we are storing within our function the our path our file path I'm also going to call the extract data function here so const data equal struct data and now here this is where I pass the file path okay but um here in this data if we if we go to our data we have two objects we choose event category and all events so what I'm going to do is I'm going to the structure them directly okay events and let me just copy it so I don't make mistakes um so like this and then all events I think it looks like that right oh okay and you realization that I probably should have followed the same standards and because here we have an underscore casing and for the old events I'm using a camel case I should probably just write it like this with underscore casing and yeah that would probably have been better but let's just leave it like this for now okay and give me this and uh okay so let's come here update this all events okay okay so now we want to set the response status to 404 if we don't get any data from if we don't get any data in all events in our case we own the data and we know we have data we can see it here right but we should always add these checks because we cannot assume that we are always going to have data so here I'm just going to say if all events so if we don't have data here in all events then we are going to return our response a status 404 and then we can add a Json response with it so the status would be 404 and then the message we could say no um events data not found for example okay and we can actually move this about this if statement because we probably wouldn't want to run this this code if we don't have any dating all of that because that would mean that something goes wrong right and we obviously need to get some data back because otherwise this space wouldn't be working either but yes I think it makes more sense to just leave it above this okay so now within this if a statement what I'm going um I want to do is to create a new all events object okay so comes the new old events now what we want to do is we want to map through the all events so this like um foreign okay so what we want to do here is we want to check first if event dot ID is equal this event ID that we get in the request body if this is true okay because we want to find exactly the event ID that we need to add this new mail for okay so if this is true I I also want to check one of our requirements was to check that this email addressing is Sister ready right so we want to say if event email register and now dot includes and now it includes our email that again we're receiving the request body so if this is true we want to send a response so response status and this would be a 801 I think and your citation and message and we can say something like this email has already been registered okay okay so if this is not true then here we can return so here in this subject what we want to do is we want to return all the data that we already have in the object so all of these data here okay so what I'm doing is I'm using the spread operator so I can return everything without having to specify ID title and so on and in email register this is an array okay and what we need to return here is similarly we need to let me just go to one that has already tells yeah so for example this one we want to uh still return um the emails that we already have here register and the new email that we just added so to do that we will use again the um spread operator so we will do a event dot email register and now we will add the our new email which is this one that comes from this request body okay and now if this is not true okay so if and because this will Loop through all the old events okay so when it found the events ID it will do this operation if not it will just return the event object without adding without any transformation cool okay now we need to overwrite our file so we'll use um FS again so we can come here and we can say FS dot write file and write file sync again and here we pass file path and here we need to pass uh the data that we want to save in our file so what we have is um we have the structure earlier so we need to pass in the same way so we will pass a events categories and then our all events is now new all events okay so we need to pass it like this okay so this we need to drop it in Json string file foreign we need to pass it to this so okay so I I need to wrap this in Brackets okay so we need to pass it to a student fire because earlier we we convert into a JavaScript object so now we need to convert it back to a to a string so that's why we need this um json's 25 method okay so now our code will go through all of these operations and once all of all of this is good we'll send back these response here okay so now if I save this let's see if this now works I'm going to so I'm in this event blockchain I'm going to add here an email Laura at gmail.com when I click submit okay let's have a look at what is going wrong here so let's make this bigger it says the path argument must be of type string receive type function Anonymous okay so let's go to this bit and we say path joint process okay of course so we are missing these brackets okay so we save this and let's see we're still running into errors all events Okay so all events okay so we are missing here and yes right yes so all events and okay let me just double check made this a smaller all events okay you know okay and yes I we are also missing here in I'm guessing emails write this stuff so that means that we are missing a yes here as well okay so now let's say this hopefully I haven't made any other mistake cool so now it's working so we get here this message you have been registered successfully and it says Laura and the SF blockchain week and this is the events ID and we get this message because we added here um console log like this so now let's go to the Json and check if it's actually registering this email properly um so I'm going to copy this ID okay so yeah it seems like something has happened because the format has changed so here we have um I'm gonna format this just to make it easier um to breathe uh no okay so format with okay Jason cool okay so now we can see here the email Laura so let's try and submit it again okay so it says that it has been registered successfully again let's go back to here okay so we can see here that we are not we haven't added the same email twice so let's go back to our code let's have a look at why we are not seeing this response and first I'm gonna start by updating this because this should be a four of one error okay so we get that for one error when Response Code already assist um right okay so I updated this as for the email register but I didn't update it here so this is coaching as an issue um something else that we also should be doing here is return the events like this okay and yeah this should work let me just reload this now if I go here okay so now it seems to be working they have four of them a 409 response I mean we go to the network tab we click here in email registration payload um response we can see this email has already been registered it's cool okay so uh let's go up here of our list of things that we need to do okay so we have access our data we have extract our data all events we have sent a response to 404 if there are not all events good then all events look through them I identify the event ID yes add the email into the email register but only the email doesn't exist that's good and then check the format of the email and it's okay okay so this is the last thing that we are going to do so let's save this let's come here and what we are going trying to do is um show a message if the user or send a response if the user has introduced an email in the wrong format so something like this and and try to submit so if we go to our front we are using in the input type email so by default Google Chrome is adding this message here and sorry is saying that please include an ad in the now address and but the thing is we cannot rely in the front too at the security for us right because any user could easily remove these messages and try to submit a email in the wrong format and in this case um it's probably no big deal but when you're dealing with a different type of data um it's important that you check that this kind of things like the data is coming to your database in the right format so there are two things that we can do first is add a message in the front and also a a response in the back and by default as I said Chrome is adding this is adding these messages but we can we can add our own message because there might be a browser that doesn't do this by default right that doesn't have this built-in to be honest I'm not sure I assume the Safari on fire was Firefox do the same and but we can come here and okay and let's add it okay so we can come here and say can't value regex and this is equal to I'm just gonna add paste all of this here because yes this is just and something that you can use when and you want to check that your email okay so this is just a value ready that we can use for emails okay so you could just copy and paste it like this um I might just added you can take it from the source code of the project or um I might just add it in the description box below Okay cool so then we can do something like if email value this amount value here and so yes so if this email value doesn't match the value bridges that we just created okay and then we are going to display some message to the user and to display a message what we can do is and we can use a user state this is um a hook a react hook so we can say message and then set message so this is a really handy hook I hope you already know about it you have experience with react and we can leave this empty and now we can say set message and we can say please introduce a correct email address okay okay we need to come here and import this as well just like this and now we need to display this message so we come to our return and let's just display it so we come here and we say message just like this and we save it and Google Chrome is not gonna allow us to check this message because it's showing this and this prompt already so what we can do is we are going to remove this type email and now if you click and submit oops this is actually allowed so if we click and submit like this we can we can see our new message please introduce a correct email address so as we can see it will be really easy for the user to just come here and remove properties like what we just did here like removing the type email when we added back is asking us to introduce the email in the right format but any user could change at the front like this and then that that will make it possible for them to submit an email okay okay but this would be this wouldn't be enough because in the same way that we just removed here the the type email property to allow us to introduce an email in the wrong format any user could do the same so it's handy that we are and it's good it's a good user experience that we are adding messages here but we also need to add some text in the back so we come to the back and here we need to say if we don't get an email or the email doesn't include and it doesn't include because you have here this exclamation mark and ads for example we could add more checks but let's just leave it like this that the response status is going to be to 42 and then the Jason message and we could say something like invalid email address yes it's like this and we need to return it here if we go to the front and again okay we have removed the type email so you go back to the console we send this is showing us the 42 error we can go to the network tab email registration and here we can see the message invalid email address so this is working good code okay there are a couple more things that we can do to improve our app so for example when we add an email so let's just start another email okay you have been registered successfully but we know that because we have this console here and we have the console open but the user doesn't know that the user doesn't have any feedback if this went through or not so um one of the things that we could do is display a message here like a confirmation message and um bless this yeah um come here and we could say set message data Dot message okay we can remove this now this so now if we come here and we add one more character now we can see our um our message and we probably could get rid of this um so we could say for the event okay just like that something else that we can do here is get rid of this text so once that all of the goes through and it's all okay we can come here and say um so we want to make reference to this input so we will say input email dot current dot value equal empty strings okay so this this bit is the same uh that we had here but now what we are saying is setting it now what we are doing is to reset this value okay if now we reload this and let me just add another email let's just go for it James submit you have been registered successfully and now the input has been resetted um we can introduce here I know the email if we want okay so now this looks much better right and um yeah there are probably loads of improvements that we could do so um let me just test something if we try to introduce here an email in the wrong format yes yes okay this is good he's saying that please introduce a correct email address cool okay and now it went through because we added the ads so yeah they seems to be working good let's just recover we've done so far in our component we are hitting our API endpoint which is this one API and email registration with a post request we are sending in our body the email value and the event ID of this page the page that we are on okay and we check that the response is okay before continuing and if the response is okay we extract the data of this response and we set it up in the message so we can give some feedback to the user meanwhile in the back when we hit this endpoint here what we are doing is first second that the the HTTP method is post if it is post then it's going to run this code and we are extracting the email and event ID from the request body we are adding some validation checks to the email and then what we want is to interact with our database so first we need to read our database we need to locate it which build the path and then we need to read our database one that we read our database and we know where in which part we need to update our data overwrite our data then we come down here here and we use the method right file sync and this is going to update our database in our case our database is this data Json that we have within our repo okay now I think we have all our app ready this has been a long tutorial but I think we are ready to deploy our app so to deploy this app I'm going to use Virtual because virtual Learners are made by Design Creator so it's an easy way of doing it there are different Services we can use to deploy next we could use Heroku like this and this one or we could use AWS I'm sure you know about this one over net me five nearly five okay or any other service the only thing that you need to keep in mind is that you need a host that can run node.js next uses node yes as we set a multiple times today right so all the files we deploy are JavaScript files so this only works on node.js so we need a service that allows us to deploy on a server I'm going to use Virtual so let's just go here and for this um is is free to use so you can go ahead and sign up so I'm going to sign up to this you can sign up using GitHub gitlabs or bitbucket the reason for this is because you can push your code to a remote repository I've synchronize both things so synchronize your GitHub with Verso so you will be updating your website and the plan and deploying it automatically to Virtual um so let's go ahead with signing up with GitHub so to sign up with GitHub first we need to have a GitHub account so so I'm gonna clicking create GitHub account I'm gonna say time to code okay so let's just leave it like this and for this one I'm going to use my email okay so your email here and then you need to adhere to your password all right verify your account let's just click in verify pick this this spiral color I can verify okay I'm done cool and now we can click and create an account thank you I'm going to save it and okay let's just go you need to go to your email email that you specify and you probably will receive um an email with a code uh looking like this okay okay so now versus who like permission so we just need to authorize Verso thank you so here now you need to introduce your telephone you'll receive a message where you need to add a code cool so now we are in so we have a virtual account and also a GitHub account so a import gig repository so I'm going to say continue with GitHub a repositories permissions that is fine so we are going to click install and at the moment because we just created this GitHub GitHub account our repository is empty so I'm going to um go to GitHub okay GitHub I'm logged in already so I'm going to go to my profile and no preference my repositories okay and what we need to do is create a new repository so new I'm just gonna scroll this nest yes tutorial just like this you can add here some description you can set it as public or private I'm going to leave it as public and you can either read me file if you want something place but I'm just gonna create it just like this okay clicking creating and there you go we have created our repository at the moment this will be empty so it's telling us different ways of how we can push our code okay so what I'm going to do is create a new repository on the command line following these steps so to do that we need to have git installed in our machine and give this a version control system if you don't have it installed you need to go to Google and follow the steps um okay getting you started with Git so this just follow the steps it should be quite straightforward and once that you haven't always told come back to this video and because we are going to follow these systems okay so in our terminal we need to come here to our terminal and we need to say I'm gonna kill this I'm gonna say get in it okay we need to do getting it because we are initiating for first time get in this a project in this repo okay we have initiated kit in it so now um let's say this is working it is status yes okay this is showing us the status of our project cool and so now we can go back to GitHub we can copy this URL you can come here you can say get remote at origin and oops paste the URL okay it seems like he's working what this is doing is linking up our local repo with our remote um repo the one that we just created and so now we need to push all our source code into that remote repo and so first we need to say get at Dot and what is this and what this is doing is staging all our changes so we have here to the source control tab let me just make this smaller so it's more clear okay now okay now I'm gonna close a few things because this one is really hard to read let me guess foreign so yes so when we do git add dot um we just stage our changes and now we need to do git commit M and then stand for message and here what we meant to do is to add a um a description of what we just done and so every time that you comment you need to kind of explain like briefly will you dance so for example if you change um the color of a button you will select um subscribe subscribe button UI change oh something like that right in our case we are just pushing all our Ripple ready for deployments so um so I'm just gonna say miss you lap to deploy okay so now we have committed all our changes and now um I would call this side with it so we just need to purchase so we do git push of reading and like you Upstream already like this May okay so we are getting some errors here let's just go back to here to these steps and we also need to create this at this Branch like this gets branch and Main okay so now we just need to do this hit push Upstream origin Main okay it's gonna it's asking us to sign in using GitHub we're clicking allow we author authorize this open Visual Studio code again yes open and it seems like it's all going through Goods let's go back to GitHub trying to reload this there you go amazing we have our repo in GitHub now this is really cool okay so okay so what we just did is use get the Version Control System to set up a connection between our local and git repository with our remote repository which is GitHub okay so now that we have our project here and let's go back to Virtual and add our projects and yeah we didn't even need to reload the pages it's already showing us our new repo so we clicking import foreign there are some settings here but I don't think we need to worry about that for our project and so we can click click on deploy click and deploy maybe we just need to wait a few minutes we are almost done let's wait for the complete message it's still building okay we can see here how is generating our static pages [Music] and there you go so our site is life now let's go to and continue to dashboard okay this is how it looks like we can click here in this link visit our fingers crossed our page is life are working this is really cool and it was super simple super easy now we go to events yes this is loading Goods events in London okay house party and it's always working let me just put here this email let's see if [Music] oh okay so this is no submitting so it's something here that is not working so let's go to Virtual building functions and there you go it seems like there is an issue here I will read only file system open okay with only so the data our database is working because we can see all the data but this is what we cannot write on our database this satellite is read only file system so I think this is a great exercise for you to now go and dig in and see what is happening and if we are probably missing some configuration here when we added our repo um is probably something going uh wrong but I think in this video we have learned so many things we have learned how to deploy and now we are having this error and so I think this is something that definitely we could have a look in a follow-up video but but I think you should go ahead and try to figure out what is happening here why we are getting this 500 errors and how to solve this okay so what others suggest you can you do um you could for example add more Styles make a look a little bit better for example here in the logo it would be good if this is a link and when you click here it takes you it will ocean it takes you to the home page like most websites do and that's just like some basic functionality and also the the responsive design could definitely be improved okay something else that we could do here is update this title and and print here the title of the page so in this case events reading about us we could print this about us page title loaders other specific title something like um highlight the title about this page and maybe add here an image and and figure out how to pass let me just close this main layout how to pass here a prop in header how to pass a prop to print um the specific title and maybe a background image and so then in each page you could you will still reuse the main layout but in each page you could specify um a specific image for about us and a specific title where else could you do in events um definitely add a lot more details to our event single page you could add the price of the event and some other features maybe a like feature so you have the get register but you could also have a like or maybe add comments that's something else that you could do um and to the home page you could add more sections or in the events you could add a lot more different categories so we have here the category per city that you could have other categories categories per season like Christmas Easter and Halloween or um motels and maybe it is a music event you could have like the categories per the type of music something else that we haven't covered either was the head metadata so when we inspect um the pace you see this uh healthy section here and it would be better if we had a specific a metadata per page so at the moment we can see like the title is events and up but if we go to the about us page and our title actually comes empty and in device consensus this is because we're having a specified any data in each component page this is something else that we can add to our Pages a suggestion for you is to add a specific metadata for each Patel so you could add it here the head and and you could have this head section initi page because is automatically merge multiple head elements even if we have a health set up enough because we also have it in this page component the content of those different head sections will get merged and there is a conflict if for example we have a specified title twice and next we'll take the latest element so in this case we'll take the about us page rather than the app file this is because the page component is rendered after the app components so the later has second win and that will be the head section of the page component instead of up that is something else that you could do so definitely go ahead and add more Styles make it look pretty and add more functionality wow this was a really long tutorial but I think it was actually quite fun we learned how to do lots of things with Nest yet at least the main things I hope I was able to teach you how to start creating and how to start putting together an application in SDS and from now I hope you have all the skills to carry on to taking this application into the next level keep adding more things and keep sharing them with me and yes I guess the next thing to say is like I I see you in my next video we will carry on improving this application there are so many more things that we need to learn about next yes so many more optimization that we could be that we could do and so many features that we could add to our awesome events application and don't forget that this this project you can take on your own so you can put it into your own repo to your own GitHub and then just change it and then if you need to present this for maybe a kind of review process feel free to do so this is your project you have build it so it's yours if you like this video if I was able to teach you something at least one thing please give it a thumbs up and leave me a comment down below share your feedback with me I really appreciate that and subscribe to my channel for more videos thank you for watching