00:00 Welcome to the Fullstack Foundations Workshop of Epic Web Dev. My name is Kent C. Dodds, and I'm so excited that you've jumped into my spaceship so that we can take off into space and learn all about building Fullstack web applications. We're going to be doing the foundational stuff, the stuff that is going to be applicable to you,

00:18 whatever technologies or tools that you're using, that will be really valuable to you as a Fullstack web developer. We're going to start with the foundational stuff, and so we're getting into styling, and so you can see this is the application that we're going to be building. It looks awesome, and we're using Tailwind for this,

00:37 but we also have some one-off CSS, and we learn how to get some of that stuff on the page, including other things like link tags so that we can configure our favicon. We even have our favicon is responsive, which is kind of fancy. So all sorts of things with getting linked resources on our page. Then we also talk about routing.

00:56 So we've got routes all over the place. We've got our user route, we've got notes, we've got different routes here with editing, all of that stuff, routing all over the place. You'll notice that we've got this nested routing idea, which is just phenomenal. We're also going to be talking about loading data.

01:15 So right here, this is all coming from a fake database. We'll get to the real database stuff in the future, but for this workshop, it's all just an in-memory database, and all of this data is being loaded from that. So you're going to learn how to load data from a database. Then we talk about mutating data, and how awesome is that? We can click on edit,

01:35 we can add super excited exclamation points, submit that, and that all gets updated for us as part of the mutations exercise that we're going to be working on, including also deleting things as well. So single button mutations that can happen. Then we have scripting.

01:55 So with scripting, it turns out that everything that we're doing before, all of this stuff can be done without any client-side JavaScript at all, but we can do some really awesome things by adding scripting. For example, we can slow down our network to a slow 3G connection,

02:13 and we can have a much better user experience because we can preload all of the stuff that the user is about to go to because we have JavaScript on the page. So even though it's a slow 3G network connection, as long as we can prefetch all of that data, as soon as they click on it, it's going to be super duper fast.

02:30 Then we also have a pending UI as well. So if we go to the edit page and then a double exclamation point, I'm going to submit that, but we're going to slow it down. We can give the user some feedback to let them know, hey, this is in fact happening. So on top of that, we also talk about search engine optimization. So if you take a look at here,

02:50 we've got our title and our description, and you can extend this to your Twitter image, and your OG image, all that stuff can show up right there as well. Then we have our error handling as well. So what happens if, let's turn off this slow 3G,

03:07 and we'll say, what happens if I go to a note that doesn't exist? Or what if I'm on a user that doesn't exist? Or what if I'm on a route that doesn't exist? All of that stuff, we are going to handle. Not only the stuff that doesn't exist, those expected errors, but also the unexpected errors, like cannot read property of undefined. All of that stuff will be covered

03:27 in this first workshop of the Epic Web Dev series. I think you're going to love it, and I'm excited to get your hands on the keyboard so you work through all these exercises. It's very, very exercise focused, and so you will be spending a lot of time working in your own development environment, running with the workshop app

03:46 to have the most positive experience possible for you to actually remember and retain all this information while we build this Epic Notes app. So, have a good time. We'll see you in the exercises.