Coding a Website from scratch using ONLY My Phone

Key Takeaways

hi everyone in this video we're gonna use only our phone to create a full stack website yes you are here right so we're gonna be just like using our phones and we're gonna code a whole website from start to finish we're also going to go like through the setup process of like how to set up probably like vs code on your phone how to install it how to work with it set up a project gloaning from git repositories and doing all this kind of stuff of course it's not going to be as easy as you might think on on an actual phone and we're going to be using android particularly but it will be like good enough for us and if you just like you find it a little bit harder to code using the mobile's keyboard and the little screen of mobile you know how it feels we have we have like ridiculously huge screens and that's what we should do but i mean if you find it a little bit uh like you know just like not really good we can just plug in our our bluetooth keyboard maybe your uh our mouse just to help us a little bit we're still gonna keep the the actual um mobile phone just floating around but we're still gonna be like doing it this way so without further guys let's go ahead and jump right into it so the first part of the video is going to be setting up the actual server or the development environment we're going to be working on in order to be able to develop a website or create a web application throughout our mobile device so this one is going to be actually installing vs code on a web server so later on we can access vs code through the website or through the url or through the internet just remotely through our mobile devices and this is the github page in here so if you scroll a little bit down you're going to find the guide and the requirements to run this so it requires like one gig of ram and two cpus at least for this to run at a stable minimum level so you make sure to do that we're going to be doing is actually running the script in here to install it we have a vps like a dedicated vps that custom completely custom vpns we're going to be installing this on but there are other options that you can do too so if you for example try to go to like the deploy to the cloud server in here you're going to find the different ways to deploy this and they all have like custom guides made into this and the guides in here are basically going to allow you to like do a one click to deploy for example for heroku there's a one click to deploy there's actually a couple stuff that allows you to do a one click to deploy so you can go ahead and do it so you need to copy this one and the other thing you want to make sure is actually to ssh into the server so here i'm already ssh into the server i already have access and everything so i have root access so i need to do is go ahead and like control c paste this one i'm good for this one so this one has been installed so if you take a look on it all you've got to do is actually run this in order to start code server and make sure it's running okay so running this and there you go so code server now is installed it runs and if you do go ahead and check out the status so system cdl and you do status of code server user and make sure to use a user because the installs per user not all the users are going to have vs code available and as curious in here it's currently active and this one by default binds into port 8080 so if you take a look on that you're going to find port 8080 working for this after installing code server it's only going to be installed on the local host so you won't be able to access it from the internet thus we won't be able to access it through our mobile device so to make sure we're able to access it we're going to need to install a reverse proxy probably going to be using nginx here that's going to reverse proxy any request that goes into the server that is coming from on the internet on the public internet and we're going to like you know port forward it or just like reverse proxy to the local code server so we can run and access vs code on our mobile's web browsers so we're going to do using let's create encrypt of nginx in here you can choose whatever guide you want but this one is going to be the best one for us so we need to first go ahead and do sudo update and install everything so let's go ahead and do this one right here so pseudo updating here is going to update all the dependencies is going to be needed it's going to install them also i'm going to need to copy this one to install sirbot nginx and the python server bot both system and python 3 server bar are going to be needed only for doing ssl using let's encrypt so we can self sign a certificate that we can use for ssl i'm not going to use ssl because i don't have a domain but if you do have a domain i highly recommend you go ahead and use ssl so our screws in here has been installed we can install that too this one everything is installed pretty good now the next thing you need to do is actually go ahead and edit the configuration or basically make sure that the code server has this configuration for nginx reverse proxy to work so we also need to add the configuration for nginx to reverse proxy from the domain or whatever if you have an ip address and to port 8080 that code server is actually on so we want to stop apache on port 80 because they already used the same port and so it's curious in here if we check the status that's already like inactive now so as it stops then we can start nginx so we can start on port 80 and we can listen for all those accuracy engines started it's currently active check out what port is being used uh by waste process and gnx is using port 80. finally we want to activate the config of nginx by creating a symbolic link so just copy paste this and you're good to go the other one is actually for doing the ssl configuration if you have a domain now if you go to the ip address you're going to find vs code and start them working also need to change the password this so head to the config ymo and you're going to find the password in here set it to something i did from 1 to 0. after that we also need to restart code server for the changes to take effect now we're actually good to go and you can actually manage and do and edit anything you want install extensions you can change the the theme in here maybe like you want to go and change the color theme you can you can do that like brother about in here without any problems but what we want to do right now is actually jump into our mobile device and see how we can use this vs code through our mobile device to develop a react and a web application or a fully made up website so now we jumped into our phone and screws in here we have access and we actually already accessed the ip address on our phone so as soon as we access the ip address we're going to be prompted uh on this web page right here that just you know tells us you want to access code server you need to import the password and make sure to enter the password that you changed on the config yaml file when we did that it's on our server so if your aws google cloud or anything you can ssh quickly and you can grab that and you can edit the password okay so easy here i'm gonna do this is my simple password it's pretty easy uh please nobody hacks my machine in here and there you go so as soon as the enters vs car is producing here you see pretty much you have vs code and you can access vscon it looks so good on the phone and it's so so sweet actually to be able to do something like this screws in here already like i went and accessed a project like i opened up a folder and everything uh i put a folder in there so just you can use git clone or whatever and you can ssh right from the terminal so you don't need to use like a separate terminal to do so you can use vs code integrated terminal just to ssh and do all of that right out of the from the like vs code dashboard in here or the actual ide and it's cruising here i already installed that so you can do extensions you can go ahead and install extensions as you would regularly do maybe you want to github is currency there is github working or get story working and it's been tracking all the changes and everything uh search you want to search something yeah hello you can do that that's currency of course because the screen size is so limited and since we're having here just a little bit of screen size on our phone it's currently in here um so you probably like it's not going to be the best experience to code in a phone but we're still going to be trying to do this on a phone and of course we're going to be building the website using create react up and react and everything it's going to be super duper simple website but we try to like put in everything on a phone so we see the experience and see the um you know the final results and everything how to open up ports and how to access the server and all this kind of stuff so this should look amazing so now we need to create a new project so therefore we need to open the terminal and cd back to the root directory so you can just you know imagine yourself using a normal ssh thing so just cd back here and we can just do print our working directory we find this as a source of fluid and we can create react up sometimes the terminals is a little bit fuzzy and it can drown crazy because you know it's a smaller screen but most of the times we can use this and we can use mpx query react up give it a name and this will start installing all the dependencies that we will need just super duper quickly for us to just wait a couple seconds and there we go we've got react up set up for us on the react gift projects so good now let's jump and try to actually open up the new folder that has been created for us so just select react iffy and you go so this will reload to you the window from scratch and in this particular case we'll be just like you know ready to start working on our react application from scratch and we can have everything that we would like to without any any problems in here so there you go good to go so let's try to start the react server or the development server so i'm going to do yarn start and this is the the starter script click enter and this should hopefully start us the actual server on port listening on port 3000 by default from create up so there is this already running that's basically because i already did run that so i'm not gonna i'm not gonna run this so it will be just exit that's now to access this one particularly what we need to do is actually go ahead a new tab i'm going to go to the link i copied in here uh which is this one but i'm going to go to port 3000 and there you go there you go so we've got our react application as you see it's running and the development is running on vs code all in our mobile without even touching our pc or something it's it's crazy like how he gives that computer just on your mobile and the react application is basically running that's that's so good so i'm gonna try to copy this example from giphy and see how it does this one is just gonna like use our custom api key of giphy and probably just like render us some gifs or gifs or whatever you wanna actually or how you spell them it doesn't matter but we try to do this on our move out so i already installed this we did the yarn and and everything in here that's pretty good now let's go and copy all of those it's a little bit hard to actually view or do anything on that little screen especially copying a huge blocket text or block of code so yeah i was curious to me i'm struggling just to copy that piece again so try to go back in here um yeah so you're gonna wanna like create a new file for naming it giphy.js that's gonna it's gonna be the end like the main rendering function that's gonna render all that so we paste all of this we remove the tyrescript stuff and we're gonna add a new components so we're gonna name this gifi grid that is basically gonna just gonna you know render the actual grid that is being used by the react dom over there so it's gonna be normal grid with a width of 800 columns and the actual fetch function so the fetch function is basically what you know just going to be used for fetching from the giphy's api so this will be that just like you know wrapping up everything make sure to export the function properly and we can just go ahead and comment the react dom in here so because you know we don't need that anymore um just simply as that this is just a simple function it's crazy it's not very trivial and yeah make sure to put your api key here please don't steal mine i'm going to delete the api key anyway but so yeah just go back to the application in here the main objects completely get rid of everything and like we can we can go ahead and use um basically like what we want to render is can you see um it's a little bit sometimes it hangs around on the keyboard so i found a little bit of difficulties just to get the keyboard working properly and like it's currency importer trying to delete something sometimes it eats characters as you type but all good so here i'm gonna reload swipe down uh wait a couple seconds and hallelujah there you go so it looks it looks amazing just being able to do that that thing in here as currency has everything worked out from giphy's api it all worked out pretty good because it just like loads the the most recent gifties and the most kind of like famous nut for for today or something like the trending ones and it just like puts them on here and he works just like flawlessly and we did all of that just in our phones that's that's so amazing it's crazy you can refresh and you still get that particular same one so that is actually meaning that this is working with an api and everything it just works as expected to be so i'm gonna try right now just like to plug in my keyboard in here it's a wireless keyboard and everything uh so it works flawlessly in here and i'm gonna try to like you know just do the bluetooth and connect this to my phone and see how it goes like trying a keyboard and trying to code in keyboard because it's so so hard to do this uh like using the keyboard of the actual device or the phone and you can't see much of stuff and you can't type and it's very hard to type and just like fix errors and all this kind of stuff it feels much better now to use the keyboard instead of the actual device's keyboard so we can just like you know import the search and everything or all the dependencies we need to build our search on give fees application and we can export a couple of components here we're going to need the api key and everything and here it uses basically the react context to do all of that we're also going to be rendering everything inside of the search grid we're using the search bar and the suggestions of the currently trending suggestions that are you know like on trending on the fees platform and last but not least we need just to use the context and pass all the needed parameters plus the with and the fetch gifts now last but not least we need to export our components and we need to make sure we import them and just render them now as you can clearly see in here we got the gifi and we got the actual search bar with the trending searches or search terms in here and of course you go all the gifts so it looks absolutely amazing so you can search anything in here for example you can do a cat let me turn this keyboard into a bigger one uh yeah so it's clearly see cat as clear seats it just gives us that uh you can see the trend unit here you can click on it like the full moon and everything uh maybe you want dogs yes you can do dogs and yeah i know this this application is not this like complicated uh you know very complicated application or something but you can actually build this on a on an actual mobile device in my opinion i guess the best way to use a mobile device if you want to code and if you want to use vs code the way or the same way as we did it like right now and today is basically just to take a look on the code maybe fix a little bit of stuff or maybe just double check and read the code to just like you're on the go or you're on the fly and you want to just like read what the code does and everything so you want to maybe just go ahead and look at it and see what it does on vs code and of course you can have access to all the files and everything maybe you want to double check something in that particular case but for actual coding and then just writing code and being productive no it won't work and just completely avoid this if you're looking to just you know go ahead and code into mobile the experience is so horrible and you can if you want to just like get two lines of code it's going to take you probably like 10 minutes to do that and this is going crazy so i spent too long just you know coding this uh probably just like looking documentation all this kind of stuff but still it's completely worth it just to go through this project and actually do a giphy and do all of that using vs code and as well we worked onto this working it with actual react and everything so that was so amazing for me and such a good experience [Music] [Music] you