00:00 Okay, this is the big kahuna. This is the biggest part of the Workshop app experience that you're going to be going through. There's a bunch of things going on on this page, so let's take a look. First of all, you're going to have Peter, the product manager here, almost all the time, right at the start, telling you what the problem is that you're going to be solved. This is a problem, solution, problem, solution type experience.

00:24 And so Peter, the product manager says, hey, our users are experiencing this problem. Your job is to solve that. Here are a couple examples of how that might be solved and go forth and be successful. There could be videos, diagrams, code examples, other resources to help you in understanding and solving the problem. So let's talk about a couple of the different things going on in here.

00:44 So in each exercise, you're gonna be working with the Playground Directory in a couple of files, one or more files, all in the Playground Directory. And this is really important. You should only ever change files in the Playground Directory unless you want to make an update to the instructions or something like that, which I more than welcome you to do. There's a button here at the bottom to edit this page on GitHub. And so then you can make a really quick edit.

01:11 And there you go. And then you can make a pull request, whatever. So that's the only time you should be changing things outside of the playground directory. And if you don't, or if like if you do change things in a different directory of the workshop repo, then you're going to get a big error. So, what is the playground directory?

01:29 Well, for right here, we actually don't have a playground directory just yet. We have exercises and we have this epic shop thing but there's no playground directory. That is what the set to playground thing is all about. So here's the thing, you actually have to manually set the playground to the problem for this exercise. So we're on exercise one, step one.

01:51 You can find that code under exercises, exercise zero one, step one, right here. So this is the code that we want to be working on, but I don't want you working in here. And so what we're going to do is effectively copy this into a new directory called Playground. And that way, you're always just focused on the Playground directory, and you don't have to worry about anything. So if I click Set to Playground, then I come over here, and Now I've got a Playground directory.

02:16 So I can see my index.js. I see my test, my package.json, even the readme. And all of that is right there. So that's perfect, exactly what I'm looking for, what I want. So the thing is, you have to manually set this playground because we don't want to overwrite your work in progress if you decide, okay, well, I wanna just check out this other step really quick.

02:40 If we automatically set the playground for you when you arrive on the page, then we just override the work that you'd already been doing. So you do have to manually set the Playground on every exercise step. So anytime you see that flashing light, that is what you need to do. Go click that before you start working on the exercise. Okay, so we clicked on that.

02:58 That copied all of the files over to our Playground directory. And then I want you to click on the button at the bottom that says Files. And these are the files that are changed in this exercise between the problem and the solution. So if I click on this, then that should actually open up this file in my editor. Now, for some editors, this might not work quite right.

03:22 And so if you have a little bit of trouble with that, you can click on here and it will explain how you can be more explicit about which editor it should be opening or whatever. So feel free to dive into that. And I explain also how I choose which editor to use and that sort of thing if you're interested. So with that, then, that's pretty much all you need to know about getting in the right file and everything. I wanna call out though, that some workshops involve a ton of files.

03:54 And so if I were to say command P index JS, I got like a lot of index JS files in here And it's kind of hard to navigate around when you've got a bunch of duplicate versions of the same project all over in this exercise directory. So what I recommend is that you actually open up a new instance of your editor in the Playground directory explicitly. And so then when you click on these, it should open in the instance of your editor that is more isolated to that directory. And so now if I do Command P and package.json, I'm just looking at the one, and that works a little bit nicer. So that's what I typically do when I'm working through these workshops.

04:39 OK, so let's take a look at the tabs. On the right side here, you can actually drag this back and forth. You can double-click it to make it go into the center. So if you just want to center it. This first tab is the playground tab.

04:53 And right here, you can see all of the different apps that are in the workshop. If I wanted to see, okay, what is, like I want my playground to update to the solution for this exercise, I can click that. And now I'm no longer set to the proper playground for this exercise step, but my playground is now set to the solution. So I can jump my playground anywhere I want to at any time. Spoiler alert for some of these.

05:24 And it just makes it really easy to get your playground to whatever place you want to be. You don't typically need to do that. Typically, if you see this thing showing up like pulsating at you or something, you just click that. Set your playground to the right place, and then you can work in the playground there. And then here we can start the app.

05:43 So what startApp does is it just runs the dev script. It also sets some environment variables and things to make sure you can run multiple apps at once. And it uses the port environment variable, and so you can reference that. Stuff like that. But yeah, it simply runs the dev script and then serves up localhost at the port that it's set to.

06:03 There's some basic forward, backward refresh, and even URL stuff that you can do in here. It doesn't work super duper well. It's hard to make a browser inside of a browser. And so what I recommend, if you do need to do history-related stuff, you're going to pop this open in another tab. And now you can just use this like it's a regular app.

06:26 It's literally just running the dev script. And so that is what I recommend most of the time. Sometimes you might have to stop the app. Most of the apps that you're working through are going to have hot module replacement, or they're going to have auto refresh, or something like that. But sometimes you might have to restart the app for some reason.

06:43 So you can stop the app right here, and then start it up again. Or if you want to speed things up a bit, you can hit the Option or Alt key on your keyboard, and that will change some of the things on the page. So we can hit Restart App, and that will trigger a restart of the app. So it'll stop it and then start it again for you. So you don't have to worry about that.

07:03 OK, great. So let's move on to the Problem and Solution tabs. These two here, I'm going to stop the app, actually. So the Problem and Solution tabs are basically the same as the Playground, except you don't have this chooser, because that doesn't really make sense in this context. So I can hit Start App over here.

07:19 We can hit Start App over here. And in fact, we can hit Start App over here as well. We can have all three of these running at once. And the useful thing about this is you can say, OK, here's the problem. Here's the solution.

07:30 Here's what it looks like right now, and here's what I'm working toward. This is how it's supposed to behave or what it's supposed to look like when I'm finished. That's the basic idea of that. And you can also use it to compare your playground to the solution and different things like that. I don't expect to have to use this a whole lot, but it can be useful.

07:49 And so there it is. So stop these, stop that. And then we can go on to the Test tab. So some of the workshops will have tests that you can use to verify your solution. If they do, then they'll have this Test tab, and you can hit the Play icon right here, and that will run the test.

08:08 All that does is it runs the test script in the package JSON. That's it. And then it just pipes the output to the UI right here. And so here we have an error because we haven't implemented this exercise yet and we can see that assertion error. This is Alfred the alert and Alfred is placed in special places in the test where the instructor decided, you know what, this is going to be a common failure case for the test.

08:37 So I'm going to put a special error message right here to say, hey, you forgot to do this thing. Most people forget that, or whatever. So keep a lookout for Alfred the alert right there. You do also have the ability to change the app that the Playground is set to right here as well as a convenience. And so if you're like, I am pretty sure I got it right, but yeah, I don't know.

09:00 So let's just set it to the solution. Does the solution even work? OK, yeah, the solution works. So I'm not sure what I am doing wrong. Let's figure that out, whatever.

09:07 So that's just kind of a convenience. I don't expect you to use that a whole lot. We can clear that. And now we can look at the Diff tab. Here with the Diff tab, this is like if you're just really really stuck so maybe you're like halfway through it you're working through things and you can't figure out what you missed and oh okay there it is I forgot to update in the index.js this needs to say goodbye world whatever So you can even click open in app one, and that will open right in that spot of the diff.

09:38 So if you've got like 30 different diffs, clicking on this should open on that line where that diff appears. So that hopefully makes it a little bit easier for you. You do also have the ability to select the apps that you're comparing. So you can say, OK, well, what's the difference between the problem and the solution in this step, or this problem and the solution of the next step or whatever. So you can navigate using that as well.

10:06 You shouldn't have to, but occasionally if the diff isn't updating, you can click the force reload and that should reload, but it should automatically reload for you as you're making changes. Okay, great. And then finally, the chat tab. This will show you the Discord channel that is connected to the workshop and all of the threads that are attached to this specific workshop as well. If you are connected to Discord, you should be able to open up Discord by clicking on the Discord icon.

10:37 That will open up this specific thread in the Discord. Or you can open up Discord in a new tab if you want to open it in the browser. So this is just kind of helpful spot. If you get totally stuck, the tests aren't helping, the diff's not helping, whatever, or the AI assistant isn't helping, then yeah, you can jump into that. So that's all the tabs over here, but we're actually not done.

10:59 There's more that you can do to help you as you're working through these workshops. So you can actually talk with the workshop using your AI agent. So here, how about this? We're going to say, can you help me know what you can help me with in this workshop using the Epic Shop MCP server? And we'll fix that.

11:20 It probably would understand what I'm doing here. But there we go. So we've got Planet X Moves. Okay, it's checking. And it's running.

11:30 It's getting context. All of this stuff is made possible by the Epic Workshop MCP server, which I have configured in Cursor. Every editor has its own way to configure things. I'll show you the MCP settings here in Cursor. So, I've got a couple MCP servers I've got installed in here.

11:48 One of them is Epic Shop. If we dive into here, we can see this is how I have that configured. Again, that's going to be different for every workshop. But if you want to dive in a little bit deeper into all of this stuff to get this set up for yourself. I'll add a link to the video where I show you how to get this all set up.

12:07 But this is really cool because it allows you to say all kinds of things like, hey, could you quiz me on this exercise? Yeah, let's do that. Could you please quiz me on exercise one? And this is going to use the MCP server to get context into the LLM so that it knows what the exercise one even is. And then it also actually has instructions on how to properly quiz you.

12:31 OK, and we can say, where should you make all code changes? Oh, great. We know that. The Playground directory and only the Playground directory. And here we go.

12:40 Let's see. It's going to say we're right or we're wrong. Yes, correct. Awesome. And then it's going to ask us another question.

12:46 Of course, in an actual workshop, this is going to be a lot more technical, it's going to be more applicable and interesting, but there are a lot of things that the MCP server can do for you so I do recommend that you get it installed and you play around with it because it is a pretty handy assistant. Okay great so finally we can actually work through the solution. So let's open this up. And let's do changes to say goodbye world. So say goodbye world, and sure, we'll get rid of that comment.

13:22 And then we'll start the app. We'll make sure that it says goodbye world. Awesome. We'll compare that to the solution, make sure that we're matching the solution. That looks good.

13:30 And then we can go to the test. We can run the test and it's saying that it's failing. Oh, oh no, address already in use, uh-oh. I should probably fix this more properly, but we'll kill that process and we'll try it again. There we go, okay, passing.

13:47 Probably need to fix the test or something there. But yeah, great. And we can take a look at the diff. And oh, I've got the diff stuff all up here. Let's get rid of that.

13:57 There we go. And diff right here, no changes. OK, great. Your solution doesn't necessarily have to be exactly like mine, that's fine if it's not, if it's slightly different, in fact that's really great if it's not. And now we can continue on to the next piece.

14:13 So good job on this one, we'll see you on the next page. Go ahead and click on that, we'll see you over there.