 Hello everyone, and welcome to another tutorial. This time around, we will be looking into creating a society website that any university society could use, with the help of the template provided in this github repository, which will be linked in the description. We can start by cloning or downloading the template through clicking this button right here. For the purpose of simplicity, let us choose download zip. After it has finished downloading, you should extract all files in your desired directory. As you can see, we have just acquired all of these JavaScript, HTML and CSS files, which represent the base of the society website. Personally, I like using Visual Code Studio for navigating and manipulating the pages. But it is up to you. A simple text editor like, for instance, Notepad++ would work just as well. We need to do one more thing before we can actually see the web app up and running. It is a project built in the React JavaScript framework, so we need to install Node.js, which will function as the website's server. You can get it from this link, which will be in the description as well. Using the default options, finish installing Node.js and restart your computer for the changes to take place. Let us see the website in action now. Start by going into the root folder, where you have extracted the GitHub repository. Here, click on File and select Open Windows Pirate Shell as Administrator. Now, check that you have installed Node and NPM by writing these two commands and running them. Node minus V and NPM minus V from Version. If all seems in order, we simply run NPM install, so that it gets all of the required libraries that the project uses. After the project prerequisites have been installed, use the command NPM start to start up the server. This will open your default browser and go to local host, which means that the server is on your local personal computer. And here it is, the website is up and running. Now, whenever you make a change inside the page, you'll be able to see the result in real time, after you refresh the page. Next up, let us discuss the structure of the project. It is split into three main folders, as this one, Node modules, contains all of the Node.js libraries. Let's start with public. Public contains the images of the website as well as the various other public resources that will use. For instance, here you add your own photos, available all across the website, to see. Meanwhile, the main bulk of the project resides in the source folder. Inside, you can see two more folders, components and pages, as well as various other JavaScript files. Of particular Node is this file, app.js. It essentially is the root of the project, and from which every other page gets called, using this React router. To add more paths inside the router is essentially adding more pages to the website. Let's take this news example. I've set up a path for it for slash news, so when I click this button, it goes to slash news and here it is. Also, don't forget to import the actual page first, inside app.js, otherwise it wouldn't work. And speaking of the website's pages, you can find all of them in this subfolder. First, we have the public home. In here, you should replace all of the lorem ipsum, as well as add your own paths to your images to be shown in this carousel. Note that you can change the appearance of every div and every other element by adding an inline CSS or a separate CSS file to your liking, as well as the pagination of the text. Another page of the website is the news page. It consists of five different panels, each corresponding to a news article. You can find them here. You can always modify this, by adding or removing the panels or the data inside them. Let's say I need more news panels, so I simply multiply the existing ones and see that they get shown in real time. The last page of the website is the user page, only accessible if logged in. It contains all of the various events of the society, plus some additional functionalities. For instance, you can log out, as well as add new events of your own. For each event available, you also have a button to enroll to this event, meaning that you join it. And it increases the number of people that are going to that specific event. One thing to note is that you should make the add event button available only for admin users, so that not everyone can add new events. Similar to the pages subfolder, there is a component subfolder. Inside, you can find common elements of the various pages that are stored away, and thus being able to use them in any pages only once. For instance, the footer and the nav bar, can be found right here, and are common across all of the pages. You can always add another button and the such and date appear updated in all of the pages. To add a component to your page, you first import it in the header of the JavaScript file, and then use it in the return of the render function, like so. If we take this line off and save the page, you will see that this page doesn't have a nav button anymore. And now it's back. I will also point out the existence of the checkbox dialog component. In the website, it can be found by clicking register and the hyperlink here. It opens up this popup in which you should update it with your GDPR policy. Now that we have glossed over the structure of the website, you may wonder how can we authenticate, get, add, or even enroll to events if we run the server locally. Well, the answer is that we are using Amazon Web Services as back-end, and the link resides in app.js with the form of these five global variables. For instance, pullDataConfig is required for the secure authentication, as well as each API URL is linked to an AWS Lambda function, which can be found in the third folder of the project. Right here, to clarify the getEventsLambda function returns all of the events in the database that are in the future due to this line. The postEventLambda function adds a new event to the database with this set structure. And finally, the enrollEvent function adds one to the enrollCounter of one given event. And you do that by giving the date of the event, which is the primary key of that specific database table. The process of setting up these functions, as well as the database with the required structure, and the user pools used for authentication in Amazon, is thoroughly explained in a separate 10-minute video, which is linked in the description. Note that you will have not one, but two user pools, one for admin and one for regular users. As for the Lambda functions, you will essentially be pasting the three functions from the project repository here. After following the other tutorial, you will end up by having your website inside a storage unit at Amazon, which is similar to OneDrive or Google Drive. That broadcasts access to it publicly to a new URL, where everyone can check out the web app, which can be found here. This instance of the website is available publicly to anyone with this link. And don't worry, this rather cryptic URL can be easily changed to create a custom domain name of your choice by following a simple tutorial from Amazon, which will be linked in the description as well. All of these services are well under the account credit you receive by making an Amazon account with your university email through AWS Educate. Although this option does imply a couple of days delay for confirmation. Alternatively, you can use a regular AWS free account tier, in which you will have to input some credit card credentials to access the free credit. It is up to you. In conclusion, please refer to the GitHub readme, whether there are any uncertainties. As there you can find an explanation for every page and component, as well as the various useful Node.js commands. Thank you for watching and once again, please check out the other tutorial to set up the database, user pools and functions properly.