Meet your guides and get oriented with the Epic Workshop App.
Learn how to navigate the interface using the hamburger menu, log in to track
your progress, explore your account settings, and discover keyboard shortcuts
that will speed up your workflow.

Welcome to the Epic Workshop App Tutorial

[00:00] Hello, I'm Kent C. Dodds, and I want to teach you how to use the Epic Workshop app so that you can learn whatever it is you want to learn without being encumbered by the unfamiliar environment that you're learning in. If you have gotten even just one workshop that you're going to be going through, you'll be spending several hours just in that workshop. And so spending a couple minutes to really learn and understand this will be really valuable to you. So I appreciate you taking the time to go through this tutorial.

[00:30] So here's Peter, the product manager. He'll show up all over the place telling you why what you're learning is applicable to users. He's gonna try and keep you grounded, keep things practical. This is the homepage that we're looking at, and it kind of gives you a high-level idea of what you're going to be covering in the workshop. In this tutorial, we're going to be focused on different features.

[00:52] Then you also have Cody the Koala. Anytime you see the Koala emoji, it's because you're being asked to do something specific. You'll see Cody in the code comments and instructions all over the place. So you'll be really good friends with Cody the Koala. Speaking of, Cody wants us to click on the hamburger icon.

[01:09] There it is. Sweet. So that's how we get back home. We click on this. It'll take us back to the home screen.

[01:15] And that's important because we're about to navigate away from the home screen. So here we have this banner up at the top that's inviting us to log in or join for free for the full experience. So let's go ahead and click on Log In. And right here, we're going to retrieve our auth code. Now, I'm actually already logged in to epicweb.dev.

[01:36] So you'll want to be logged in already, or you can go through this auth flow, and it will trigger a login. But that's one thing that you're going to want to make sure of, is that you are logged into the right account, the one that has access to whatever it is that you're working on. And if what you got is not on Epic Web, it's like Epic React or Epic AI.pro, all of these, the workshop will be associated to the right site. And so here, this will say, log into epicai.pro or whatever. So whatever workshop you're working through, it'll take you to the right authentication flow.

[02:10] So here we're gonna retrieve our auth code, modernpug61. So we're actually authenticating our device. And if we click on Verify Auth Code Now, this is going to say, OK, device verification, is that the same text that requested this? This is a security measure here. If it is, then you can confirm the device.

[02:30] And with that, we can close this now. We come back here, and it's just waiting for that confirmation. Confirmation granted. So now we are on the home page. We no longer have that login banner at the top.

[02:41] So awesome. And now we're back at the home page. Let's take a look at some more of the navigation here. So we've got the homepage here. We also have exercise navigation app varieties.

[02:54] These are exercises in this workshop. We've only got two exercises and we'll dive into those here in a little bit. Let's see, what else? We've also got the workshop feedback. We'll get to that a little bit later.

[03:06] You'll also have this face pile. So I'm recording this in kind of the evening. And so there are typically quite a few more people who are all working on other areas of the workshop app as well. So, somebody's in the MCPUI workshop, somebody's in React Fundamentals, React Hooks, React Fundamentals here too. And actually, it's kind of fun because if you're looking at the exact same page as somebody else, they will be right next to you and their face will be glowing.

[03:32] It's super fun. You can turn that off in your preferences. I'll show you that here in a bit. But I like the face pile. I think it's fun.

[03:39] And then you also have your account right here. There will also be something else in here that shows your progress. This workshop, I'm recording it now, and so we don't actually have it up on epicweb.dev currently. And so we can't measure progress because I'm literally recording it now. But when it does have a formal workshop, then there will be some progress marking here and there will be a link right here that I'll show you that will allow you to just go directly to where you left off, which is quite nice.

[04:15] Okay, so yeah, let's actually, let's take a look at the account page by clicking our avatar. You can connect to Discord. Right now, actually, there's a bug. When you connect to Discord, it should actually show you what account you're connected with. But yeah, currently isn't doing that.

[04:38] So let's scooch this over and we're gonna back this up right to here. And there we go. So when that bug is fixed, then this will say what account, what Discord account you're connected to. You can also manage your account. So this will take you over to your profile on Epic Web or Epic AI or Epic React.

[05:00] You can manage your preferences. So you can control your video player preferences, font size, presence. So if you really don't want your face showing up in here, you can just opt out and that will remove you from that presence. So here, if I update my preferences, you'll see that I am not going to appear in that list anymore. But I recommend that you keep it.

[05:23] I think it's fun. It is more fun to show up in there and be with other people. You can also persist the playground. We'll talk about that later. And then this should actually be unchecked for you.

[05:34] I'm not going to talk too much about that. If you need this, you will definitely know. There's a big huge warning that shows up if you make the mistake that is required by this. So don't uncheck that or don't check that. Leave it unchecked for yourself.

[05:49] I'll leave it unchecked for myself. This is the way it should look. Okay, let's go back home and coming down here on keyboard shortcuts. We actually do have keyboard shortcuts. Press the question mark and you've got all kinds of keyboard shortcuts in here.

[06:03] You can escape to make that go away. Feel free to explore those. And yeah, let's get into the exercises. We can click on the first exercise or we can say GN. That will take us to the next thing, the next page that we need to go to.

[06:18] And that would be exercises one. So you can see that over here, you can come down here, you click on this, get to that same spot. And you can use this navigation over here as well. And that takes us to this first page. So I'm gonna leave you here and let you continue on from there.

[06:36] So go through all of that and then hit exercise navigation. We'll see you over there.



Discord

Email

GitHub

Maximize your learning experience by learning how to use the Epic Workshop App!

The Epic Workshop App is a fantastic learning environment based on research for what makes for retention-based learning. It's a unique experience so it has a learning curve of its own. This tutorial uses the Epic Workshop App to teach you how to use the Epic Workshop App!

### What You'll Learn
- Navigate the Interface: Get oriented with the Epic Workshop App interface, learn the navigation patterns, track your progress, and discover keyboard shortcuts that will speed up your workflow.
- Understand the Exercise Structure: Learn how exercises are organized—from context pages with background information to hands-on playground steps where you'll make code changes and work through solutions.
- Work with Different App Types: Discover the different types of applications you'll encounter across Epic Workshops and learn how to interact with each one, from apps with automatic previews to those requiring manual script execution.
- Track Progress and Reflect: Learn how to compare your solutions with instructor implementations, mark lessons as complete, and use reflection forms to solidify your understanding.

The Epic Workshop App is a powerful tool for learning and it takes some time to get used to. In this tutorial, we'll walk through the features of the app to make sure you're set up for success.


Get access to Learn How to Use The Epic Workshop App

And continue watching this video