Get Started with the Epic Workshop App

00:00 Welcome to Epic Web Dev! Oh my goodness I'm so excited that you're here. So we're going to talk about getting started with your workshops that you just got and I am super stoked about this because I know that you've never experienced

00:14 anything like this before. It is awesome and it is improving. So first you're going to want to go to epicweb.dev slash get started. This is going to be the written version of what I'm going to show you. I'm probably going to show you a couple extra things too so don't turn off the video just yet. I also want to

00:32 mention we do have a frequently asked questions page so if you have some questions check out the FAQ and there will probably be more questions added to this as well. But here on the getting start or get started page we have links

00:48 to all of the different workshops. So for this one I'm going to show you the Fullstack Foundations workshop but the same things apply in all of the workshops. So there is a deployed version of the workshop so if you're signed in to epicweb.dev then you will actually be able to watch these videos. These

01:06 will be embeddings or actual like embeds and so if you have access to those videos then you'll be able to see these. Some of the videos are free while others are paid. So if I go to this exercise and open an incognito then this is going to

01:22 say hey you need to buy access. So I recommend that instead of using the deployed version you use the local version because you actually want to be making changes and all of that stuff. But having a deployed version is really nice if you want to just kind of peruse some of the videos and that sort of thing. But

01:41 this isn't going to do anything for your progress or anything like that. This is just for watching the videos, taking a look at the diffs and stuff like that. So what you really want is the local installed and running version and to get that you can go to these repos or you can go straight to the setup section

01:58 here. So the repos are pretty straightforward. Assuming you have all the right versions of node and git and npm installed then you should be able to just copy this and go into your terminal. And here we'll make this really

02:15 big for us and I'm going to go to my desktop and I'll paste in those commands. I would recommend you stick this in like a code directory or something like that and what these commands are doing is first they're going to clone the repo. The repo can be quite large and so I recommend that you go to like a library

02:34 or coffee shop or something where if you are paying for bandwidth or something because they can be pretty huge. But it clones the repo then CDs into it and then runs the setup script. What setup is going to do is it's going to do some system validation, make sure you have the right versions of things installed. If it

02:53 doesn't or if you don't then it will tell you what versions you need to have installed and if everything is good there then it will install dependencies and then it will run some custom setup. Depending on which workshop you're on this custom setup might actually take a little while. It's going to install

03:08 things like playwright that is useful for running some of the tests that we're going to be running. It will set up the playground app and stuff like that so there are a number of things that are going to happen and so this can take a little bit of time. So with that all done you're going to want to open it

03:27 up in your editor. My editor of choice is Visual Studio Code VS Code and that's the one that I recommend and in fact we have a VS Code directory in here with some settings that will be useful to you and some recommended

03:44 extensions. So if you don't have these installed a little pop-up should show up here to recommend that you install these extensions and I suggest that you do that. One of the really cool things about the workshop app is the fact that it is running locally and you can open it in any editor that you want.

04:02 Whatever editor you're used to running with whatever themes you have and snippets and all of that stuff I recommend you use that editor. You do not have to use VS Code. I recommend VS Code myself but if you prefer WebStorm or Vim or whatever it is you can use whatever editor you like. So the way that

04:22 this is structured is we have this exercises directory. Now you should never change code in the exercises directory unless you want to make a pull request to improve the workshop instructions or or whatever. That exercises directory is not for you to actually work in. Where you're going to be working is this

04:40 playground directory. So the exercises can be seen as kind of a template for the playground directory. So as you work through different exercises we're going to copy all of the stuff from for each exercise step into the playground and and there's an automated process for that I'll show you in just a moment but

04:58 the playground directory that is where you're going to want to be doing all of your work. So because of that I actually recommend that you open the playground directory in its own instance of your editor and the reason for that primarily is because of this problem. If I want to look for a particular file then I'm

05:16 going to say let's say we're looking for root TSX. So I'll go root TSX and you'll see that there's a root TSX in all of the exercises as well as the playground and in fact you won't even find the playground in here because it's get ignored and so you won't find what you're looking for. You're supposed to be

05:33 working in the playground and so that and you can if you want to you can dive into these and each one of these is like a copy of the app that you're going to be working in and so that's why that's going to be a bit of a challenge. So that's why I recommend that you open up the playground in its own instance. So if

05:51 I say VS Code or yeah simply code playground then that will open up another instance of the playground and now I can say root TSX and there it is. So it's much easier to navigate around things that way. So the the thing is

06:09 though that you do need to run one script from the root directory of the repo and that script is the start script. So we'll run npm start and that will get the workshop app started. Now I do plan on making changes to the workshop material and things like that especially as people are making pull requests. Thank

06:29 you if that's you if you make a pull request to improve instructions, fix typos, stuff like that and in some cases even improve some pieces of the app that we're working on. And so if there is a update in the workshop app then you'll

06:44 get some logs right here that will say there's an update and you can get those updates by running this script. It'll be npx kcd shop. Oh that's cool it was auto completing for me and update and that will run the update for us but we don't need to do that because we don't have any updates we literally just

07:04 copied it. Now if you open this up that's localhost 5639 that's actually Cody this is Cody the koala that's Cody in t9 if you know you 90s kids can remember t9. But yeah so this is the workshop app looks a lot like the deployed version

07:20 except this time we don't have video embeds these are actual renderings like directly here so you can watch the video here your settings will be persisted all that stuff and we also have transcripts right here so you can click on this and it will scroll you up to the video and start the video at that point so if you

07:38 want to search through the transcript then you totally can do that. On this page we also have links to all the sections but then you can look at the left nav to get those as well. Of course we do have dark mode support and I just default to system but yeah so let's talk a little bit about some of the things

07:58 that you can expect from the workshop app. First of all we're not logged in right now so we are going to be a little bit limited on what we are able to do in the workshop app however because I'm logged in to epicweb.dev these video

08:13 embeds will actually still render and they still will work and so if if you're logged in on epicweb.dev then the video embed will work properly if you're not logged in on epicweb.dev or you don't have access then this is what you're going to see and so for that reason and for various other reasons I strongly

08:30 advise that you actually log in so we'll click on restore purchase and then we click on retrieve code what this is going to do is it's going to ask epicweb.dev hey I want to authenticate somebody can you please give me a code and so it gives us this code honest husky 6 we click on continue and that takes us over

08:49 to epicweb.dev where it verifies honest husky 6 so we can confirm this device and once that's done we come back over here and once that confirmation it has been received we receive a device token and now we are logged in so you'll notice a couple of things are a little bit different and we no longer have the

09:08 bar at the top we also have this bar at the bottom mark as incomplete so I've already watched this video and read through the instructions and all that stuff so I can I have this marked as complete you'll also know notice that we have some progress indicators over here that tell us how complete the lesson is

09:25 some of this might receive some design changes so I'm explaining some designs to you right now but they may change slightly but that's the sort of thing that you're going to be looking for some indication of progress and we also if you kind of lose your way and you're like I can't remember which one of these I'm on you can actually just click this button and it's going to take you

09:44 straight to the last lesson that you haven't finished yet and so then you'll go through this lesson you'll go through the solution then you can mark this as complete and then you can go on to the next one and continue in that fashion so we'll get to the exercises here in a bit I also want to show you your account

10:02 page because on the account page you can actually connect your account to discord now the reason you want to do this is because this is what's going to give you access to the private channel in discord that is all about epic web dev and all the the workshops in there and so you want to connect your discord

10:20 account now if you haven't done anything with discord before then you are going to want to sign up for an account if you go to the discord route here then it explains a little bit about what discord is all about and everything and so I recommend that you sign up for discord and you go through the onboarding

10:39 process my bot will take you through a little onboarding process and then you can connect discord so what this is going to do is it'll pop open the two factor or the OAuth flow for discord will hit authorize and then that

10:53 will send us back to our page here and we'll see that we're connected with our user on discord now just keep in mind that because we're going through the browser if you typically have the application open you may not be logged in and the browser so you may have to log in in the browser to authenticate

11:12 discord just make sure you log in with the same account this happens a lot where somebody will sign in with a different account than the one they have in the desktop and then it'll be confused so now that we're connected with discord you can actually access discord so if I open up discord here and

11:28 we'll just let that load in the background we'll actually be able to not only access discord on the discord app but we actually also get access to all of the chat features available within the workshop app so we're just getting started here there's not a lot here but there will be a bunch of posts in here

11:47 and that you can take a look at eventually this will also like you'll be able to dive in and read everything and then if you click on the little discord icon in the corner then that will open up the discord conversation in your discord app if you click on this other link then that will open up in the

12:05 browser so that can be quite handy same thing goes with here this will open up the epic web channel and you can create your post there which I expect that that we will do quite a bit I actually expect this to get a number of design

12:22 improvements in the future but I am hopeful that the chat feature is really helpful for you as you're working through all these exercises okay so now we've got the accounts all set up we've got our we're all ready to go on our workshop app we've watched this first video and we checked it as complete so

12:41 now we get into our first exercise each exercise is going to consist of some background information this first page and so as you watch this video I recommend you finish the video and then you come down and read through all of this background information there will be some things in the video that aren't

13:00 in the background some things in the background that aren't in the video so I recommend you read through it all and once you're done with that you can mark it as complete and then hit start learning now on this page you're going to have another video that will explain to you the problem that you're supposed

13:15 to solve for this step of the exercise and there will also be instructions this is Peter the product manager Peter is responsible for telling you what the users want out of the app that we're building and then there are some instructions in here there will sometimes be links to the documentation

13:33 this is Dominic the document that is responsible for that you'll sometimes find Olivia the owl Olivia is just will give you pro tips and and best practices stuff like that and also tips on using the app and then we also have Cody the

13:49 koala inside the app itself so here's what we're going to do I'm going to take you through the process of what it's like to work through one of these exercises and that hopefully that kind of guides you through this whole experience so we're going to actually skip this first exercise so you can see

14:05 what the process is like for taking the the next steps so let's say we're on this step we've already finished the first exercise or first step of the exercise so here we're in styling we did the intro we finished links to public files and now we want to do asset imports so the first thing that you're

14:23 going to do when you jump into an exercise and you make sure that this is not showing this set to playground if that is showing it's because your playground is not set up for this step of the exercise so you'll also see this broken link right there and even in this files right here you'll see set to playground shows up there so you're going to click this and what this will

14:42 do is it will take the template version of the app and it will copy it into the playground it will copy over all the files that are in the playground so if you want to preserve your playground history or something like that for some reason then you will want to make sure that you copy those files somewhere else

14:59 before you hit set to playground I don't recommend doing that I don't really see a whole lot of use in doing that but some people want to like save their work or something and and so you can do that each step is pretty isolated so I don't think there's a whole there's a reason for you to worry about that okay so now

15:18 that we've set to playground we can watch the video and you can set your preferences to like how fast you want it to go you can set the the quality of video you can add your subtitles if you'd like to and you can also do

15:36 picture-in-picture so you can move this around wherever you want it to go and you can also go forward and backward change volume all that stuff and this is all going to be persisted so if you refresh the page then it will still be on 2x and so on and so forth so once you've watched the video then you're

15:54 gonna read through the instructions from Peter the product manager and in some cases you'll even find Cody the koala will show up in here and telling you specific things to do normally Cody's going to show up in the code itself and we'll look at that here in a second but sometimes there's no file and for Cody

16:12 to show up in and so that's why it's important that you read through these instructions okay so right in here we're going to see we have these files we have this file that is a changed file and this is a new file that is created as part of this exercise so I'm going to follow the instructions here and we'll

16:29 say Cody wants us to first move the favicon SVG file from public favicon to our assets favicon so if I click on this anytime we see this little icon here it's something we can actually click on and it will pull up that file in our

16:44 editor which is pretty sick we do have troubleshooting steps if that doesn't work for you you need to specify a different editor or something like that so check out those if that doesn't work for you but this is going to be really really helpful as you're going through this so you don't have to crawl through

17:01 all of these files to find where you're supposed to be so we have that favicon SVG and our instructions were to put it in an assets directory let's make sure assets yeah app assets favicon so I'll move that file as instructed and then we

17:16 can look at the files right here we'll go to app root click on that and that will open up in our editor as well so now I can say let's import the SVG let's

17:29 see SVG from the assets and then favicon SVG and then right in here instead of using the hard-coded href we'll use the SVG there we go cool and now we get to run the app and we could have been running the app the entire time so to

17:46 run the app you click on start app this will start the app up now this is the workshop app is running your app for you and so the logs for that are going to be wherever you ran the start script and so we're going to see playground 4000 that's the port that it's running on this is the logs that we got as part of that

18:05 startup if there was any sort of problem or anything like that in the process of startup or maybe you had it running already and you hit set to playground and things blew up or something at any point in time you can just decide you know what I'm gonna turn it all off and start it up again and it starts pretty fast so don't ever be worried about like oh I got to stop it

18:24 and start it up again like something we're in a weird state or something that is totally fine and then you can start the app up again you also can stop the app right here hit stop app and then start it up again and there's as a little pro tip if you hold down the alt key then you can actually hit restart

18:42 app and that will just do you know stop it and start it up again for you so if that's something that you ever need to do you can totally do that okay so we can take a look at also at this in a brand new tab and we'll see we actually did successfully get our favicon where we wanted it to be and you can take a

18:58 look at the network tab and see all of the things that are going on in the network this is completely free of anything related to the workshop app it's just the app that you're working on in the playground directory which is quite nice so I recommend most of the time that you actually do pull this up

19:15 in a separate tab so that you can make sure that you're following the instructions you're not seeing a bunch of stuff in the console that's unrelated because this is literally just an iframe into localhost 4000 okay so let's now that we finished that and we feel confident in our solution we can

19:35 actually in some cases we can run some tests so here let's go to links of public files over here and if I change to the solution right here you'll notice we actually do have tests so I'm going to be working on adding tests and that you're welcome to contribute tests if you'd like to contribute some tests to

19:53 each of these exercises but yeah some of these will have tests that you can run if you want to verify that everything is the way that it should be okay so I just blew away all my work so I'm going to go to that solution right here and right here once you're all finished and you feel good about your solution then

20:13 you can watch the solution version watch the way that the way I solve it the way I teach how that all works and then read any follow-up information in here you'll sometimes find Peter the product manager just saying good job sometimes they'll say like here's a use case you might think about sometimes Hannah

20:31 hundred the extra credit emoji will say hey if you want to you can add this extra stuff or sometimes you'll find Kelly the co-worker in here saying oh I'm going to be making some changes you already learned about all this stuff so I'll just do it for you but if you want to you can take a look at a diff of what

20:49 what you have now and what I'm going to change it so if you want to see that and you can just do that yourself if you want to get the extra practice so definitely read the solution content in here and with that actually let's let's go back we'll say set to playground again so I just blew away all my work

21:07 and I want to show you the diff because the diff is pretty awesome the problem and solution that's basically just the playground except this is what the apt the kind of the template this is what it looks like before this is what it looks like after if you want to kind of run those and compare those so the diff is pretty interesting so here we're looking at the current state of our

21:27 playground and we're seeing oh this was renamed we moved this file from public to app and then this file was modified and here are the modifications that were made so let's say that I'm going to go to app 1 which is my playground and I'm

21:42 going to say what if I did something wrong we import SVG from our assets favicon SVG and then we say here's my HF maybe I make a typo or something like

21:59 that and I don't notice that there's this is busted so if I were to do that and it's not working I don't know why I'm confused then we can go to this diff tab and we'll see oh okay so that was named differently not a big deal but oh this is different yeah so here let's let's go name this the exact same and

22:17 and then that will be a little bit more obvious if we click on diff again it will recompute the diff and we say oh oh yeah that's right I've got a typo so that's what the diff is for it's not intended to be something that you're looking at very regularly it's just when you kind of get stuck and you're like ah

22:33 I thought I did it right but something's missing and you can check the diff of course you can also check the diff between any of these apps so you can say you know what I want to check what's the difference between the problem at the very start of this exercise and when we get to the solution of this exercise so

22:51 what's the difference between the entire thing what are all the changes we're making and yeah it looks like we add some fonts and stuff so you can do mix and match all of those diffs and in fact you can even if you hold down on alt this will take you to a special page this is actually you're looking behind

23:09 the scenes a little bit this is where I check the diff as I'm developing the material and stuff it's pretty pretty handy so that is the diff and then of course we saw the chat already and so you're pretty much all set so once you finish working through the solution you've watched it you read all this

23:28 stuff then you can mark as complete and then go on to the next one and if you want to you can always just click on this and it will take you to whatever the next part of the exercise is but I would actually recommend just hitting this so that you kind of keep it cohesive and everything you don't accidentally miss something so yeah that is going the process of going

23:48 through an exercise and you just keep on going like this you say okay set to playground and now we don't have to restart the app most of the time sometimes you may have to restart the app but in this case it looks like it worked just fine no problem and now we're gonna follow along these instructions we can click on files and say okay let's open up the root and we'll

24:05 follow Cody's instructions in here and just continue on learning all of that stuff like that and then you mark it as complete and you continue until you get to the end of the exercise at which point you'll be shown this this is a dad joke break so this is actually like the dad jokes are normally pretty quick

24:25 sometimes I say nice things to you so I do recommend that you watch these and we do require that you mark these as complete as well because it actually is very important for you to take breaks and so I want you to take the break you can feel free to fill out the elaboration and feedback form this is important for your retention so that like you write down the stuff that you

24:45 just learned I'm actually probably going to swap this Google form out for a more custom thing but there will be a form over here for you to to watch and then you continue on to the next exercise you watch the video you read the instructions and then you just continue on like that so that is the workshop app let me make

25:03 sure I didn't miss anything that's important for you to know if at any point you things are get kind of funny in your app or something like that easiest way to get things back is to just delete the the repo and create it brand new and also there is an admin route which I'll probably improve in the

25:23 future but here you can see the your progress on the lessons and some commands you can run so you can clear all your local data just like get rid of all the caches and everything there's a lot going on in this app so if you need to do that you can do that here and then you can take a look at other things

25:42 that are going on in the app here as well so I'll probably be developing this a little bit further in the future but yeah it can be helpful if you ever need to see like things are super weird on in my environment let's go to the admin page and clear all the local caches or clear all the local data okay so other

25:58 things that that you should know about if oh yeah I kind of skipped over this but if you have any feedback that you'd like to offer or you notice a typo or something like this clicking on this link will take you to this file in on

26:16 github and you can make a pull request right here you can also hold down the alt button and that will open up this file in your editor so if you want to open it up there you totally can no problem and and then you can make the pull request from there that works as well but yeah let's see if there's

26:34 anything else that you need to know I think yeah we talked about all this stuff setting the playground here's some of the troubleshooting steps if the file links aren't working for you you can use this KCD shop editor environment variable and then here are the emojis that you can learn about as well so I

26:53 hope that is a helpful explanation of how the workshop app works and you're going to be spending a lot of time in this workshop app so I think it's great of you to invest a little bit of time in learning how to use it effectively and again things will probably change over time I'll improve designs and make

27:12 adjustments to the features but it is I'm really really proud of this I think that it gives you a really excellent experience in developing with the tools that you're used to developing with so I hope that is helpful to you and we'll see you around the internet bye