 Welcome back to another video. We've published another developer tutorial on our blog and I'm going to attempt to follow it. In this tutorial you will learn how to develop a simple catgif viewer app. We're going to find out how we can create a simple interface only app, how to compile javascript and how to use network requests. If you'd like to follow along, then please click in the first link in the video description that takes you to the tutorial on our blog. I'd recommend you to watch the previous videos in this series about how to set up your developer environment and how to create a simple files plug-in, you're going to need some of that for this tutorial. Today we are developing a simple catgif viewer app that has the following features. Listing the catgif files that you have stored in a folder in the app directory, displaying the catgifs through a simple button click, adjusting the size of the catgifs through a simple button click and storing the setting for future visits. Once again I'll be doing this on macOS, but the instructions for how to do this on the windows or linux are very similar and you can find the instructions for how to do this on your preferred operating system in the tutorial linked below in the description. Let's get started. In this tutorial we will first install nvm, which is a node version manager. Through nvm we will install node and npm, which are tools you need for running and compiling javascript. It is possible to install node and npm without nvm, but as you might need different versions of node or npm depending on the project you're working on it is much more convenient to be able to quickly switch between versions thanks to nvm. To install nvm on your mac you need homebrew, which is the first step. Run the following in your terminal to install the package manager homebrew. Enter your administrator password if prompted and press return to continue. Wait for the download to finish. Second step. Install nvm. Run the following to install the node version manager nvm. This will also add a new directory called nvm and add a necessary line into your .zhrc in your home folder. Then run the following to see which version of nvm you have installed. Step 3. Install node and npm. Run the following to install node and npm version v16.16.0. Run the following to start using this version. Next, check if you have npm installed by running the following command. You should see version 8.11.0. Next, check if you have node installed by running the following. There you should see version v16.16.0. Alright, with that out of the way we can continue by writing the frontend scripts. If you haven't already I'd recommend you heading over to the block with the tutorial because we're gonna start copying and pasting a bunch of text. First up we're gonna start by creating a skeleton app with the name catgifts. As you know from our previous tutorials we're gonna unpack the tar file and copy it over in our app's .extra folder. You don't have to enable the app yet. Take a look at your info.xml file that you find in the app info folder to make sure that your app is compatible with the version of next slot you're running. There are some parts of the skeleton app that we don't need so we're gonna delete the following. We don't need the contents of the source folder. In the lib directory, remove service, db and migration. And in the controller directory in lib we can delete everything except pagecontroller.php. Next open a terminal, navigate into the catgifts folder and run npm install. npm install will install the dependency packages. There's one dependency missing at this dependency by running the following command. Alright now we're gonna start copying and pasting JavaScript code so please create a file called mainscript.js in the src folder. Next we're gonna configure webpack for that. Head over to the catgifts folder and find the file titled webpack.config.js. Edit the file to replace the content with the following. Please save all the files and then head over to your terminal and run npm run def to compile the JavaScript file. If for some reason this shouldn't be successful then please head over to the blog and check out the tutorial. It has a section that explains how you can start over and how you can fix common errors. But if successful you should see two new files in the js folder catgifts-mainscript.js and catgifts-mainscript.js.map. Alright next up find the file info.xml in your app info folder and replace the content of the navigation tag with the following. Now we can set the app's routes. For that locate the file routes.php in your app info folder and replace its content with the following. Now we can implement the page controller class. For that edit the file application.php under lib app info and replace its content with the following. Also find the file pagecontroller.php in lib controller and replace its content with the following. Now we can write the template file. For that we're going to create a new file titled mymain template.php in the folder templates. And we set its content to the following. Now we can define the style. For that please locate the folder css and create a new file called main.css. And paste the following content. Almost done please create a new folder in the emg directory titled gifts. And then head over to your favorite search engine, find some catgifts and place them in the folder you just created. Now as a precaution let's compile your source script again in case you made a change after the last time you've compiled it. To do that run the following command in your apps directory. Now all that's left to do is to enable the app. Find and enable the app in the app settings page of nextload and enjoy your catgifts. And there we have it. I was able to follow the tutorials so I'm sure you can do. If you have any suggestions for what kind of tutorials you would like to see then please let us know in the comments below. Also if you're looking for something else to watch there's going to be a playlist where you can watch the other tutorials, videos and there are more to come. Also if you prefer to listen to podcasts while coding I'd recommend you checking out episode 17 of the nextload podcast. It's available wherever you listen to podcasts and also on YouTube. So thank you very much for watching and I'll see you in the next video. Bye!