How To Go Through The Course

[00:00 - 00:19] Hey everyone, welcome. In this lesson, we'll talk about how best to go through the course in part two. We'll first talk about what's similar with part one before addressing a few different things that we think are important to know as you proceed through part two. First and foremost, by being here, you're probably accessing the New Line platform.

[00:20 - 01:09] This platform, basically what you're viewing at this very moment, is where you 'll be able to access the vast majority of material available in part two of the course. This is where you'll find the screencast videos, the lesson manuscript, the links to any accompanying course material, etc. Each lesson would have a lesson video, and these lesson videos are the core components of the actual course. They'll tend to be a clear recorded screencast video where literally every single line of code is going to be explained and shown for you to follow along. Now, there are few different types of videos. There are the module introductions. At the beginning of every module, you may see a video of us, the instructors, sort of summarizing the game plan of that respective module. We've done this in part one, and we'll continue to do this in part two as well.

[01:10 - 01:38] When we then introduce a new technology or concept, we may explain this through a lecture video. These lecture videos take a more informative approach, where we'll go through lecture slides that will be used to explain the topic at hand. Then there's going to be the core videos where we actually write the code to build the application that we want. Each of these particular lesson videos where we actually start to write code will be broken down to a concise format as possible.

[01:39 - 02:21] In part one, we usually broke each of these lessons to certain specific topics we wanted to teach, whether it was the use state hook or the use effect hook, etc. In part two, each of these videos would address a certain feature that we want to build, whether we're building the UI of the login page, or where we want to do image uploads with a culinary. This will make more sense shortly as we explain some of the differences between part one and part two of the course. By the end of every module or by the end of the larger modules in this course, or in part two, we 'll usually have a conclusion video that sort of summarizes what we've done to complete the module. Just like how we have the lesson videos, another big piece of this course is the lesson manuscript.

[02:22 - 03:06] Every lesson comes with a complete transcript alongside the video. And in these transcripts, you'll see embedded concise code samples be shown as you proceed through the lesson. And there's going to be other learning material that's also going to be shared with you, such as the quiz questions and solutions, lecture slides for the lesson videos that actually are lectures, and the complete code project where you're able to see the complete code samples that are being prepared and done for every single lesson in this course. Now, with that being said, we're going to stop here. And now we're going to talk about the more important piece. And that is what's the difference in part two, and how is it best to approach part two as a course of its own?

[03:07 - 05:16] The number one key distinction between part two and part one is the fact that in part two, our end goal is to build a full stack, fully functioning application. In part one, we work with a variety of different technologies to see how the client can interact with a server through GraphQL, etc. In part two, we take everything we learn from part one. However, the end goal is to actually build tiny house. Now, this comes with a set of different challenges, as well as a slightly different perspective in how we do certain things. As an example, one thing we quickly mentioned and we'll reiterate once again, in part two, our modules and lessons encompass certain features and factors you want to have in our application, right? So now, instead of having search and specific lessons or modules that are titled something along the lines of what is GraphQL, instead, we're going to have topics that we're going to address things like, how do we host new listings into our application? How do we connect with Stripe? How do we build the homepage? How do we persist login sessions with cookies, etc. So it's a different frame of thought. We're not going to be doing certain things to learn a specific thing for the sake of it. We're going to be doing certain things to build our application. And from that, pick up a few different technologies or skill sets that we need to know to get to that point. In part one, we had an average lesson video length of around perhaps 10 minutes. In part two, things are larger. Lesson videos for the most part will try to be around 10 minutes. However, there's going to be a lot of different videos where we're going to try to implement something that takes a significant more amount of time. So, as an example, when we try to execute the login process, that video length would be 22 minutes. Or when we want to build the authentication resolvers, that would be 18 minutes . And I think module six has the largest video lengths. So for example, when we want to implement the listings and bookings in a user page, that video length is going to be 42 minutes. Now, this is not the norm.

[05:17 - 05:37] Most of the time, the lesson videos would be around 10 to 15 minutes. However, this is just an indication that in certain cases, when we try to do certain things, it's going to take us a little longer. So the length of time is going to be a little larger. This ties into the next point. And that is the fact that in part two, we're going to be writing a lot more code than in part one.

[05:38 - 05:58] In part one, the actual app that we were building was pretty simple. It was just simply a list of listings that we got from the server. In part two, and we've mentioned this in one of our introduction videos, there's a lot of different features you want to support. You know, user authentication connecting with Stripe, creating a listing, booking listings, paying out users.

[05:59 - 07:18] To get to that point, we're going to have to write a lot of code. And this isn 't necessarily to make it sound intimidating. It's just the fact that the scale of what we're going to do in part two is just a lot larger than part one. As you begin with part two, it's important to note that we assume you know everything we've taught you from part one. And with that, we're basically saying, we're not going to re explain certain topics. We're not going to explain how GraphQL is different from S API's. We're not going to explain how React can be used as a UI library. Or perhaps we're not going to dive deep into certain things like how GraphQL resolve our functions work. When we begin with part two, we're going to assume you already know these things because we're going to build and learn a lot of new things on top of that. So with that said, we strongly suggest that if you have any major difficulty with part one, or you feel really stuck with part one, do take as much time as you can in getting at least the main concepts in part one understood before you begin with part two. In part two, we're going to be interacting with many different third party APIs, stripe, Google's geo coding and people API, Cloud inary. And for all of these different API's, we're going to need to generate environment configuration values.

[07:19 - 10:13] And we're going to have to store them in our application. So just to keep in mind, when you actually receive the source code for all the different lessons, we're not going to have these values provided to you, you're going to need to generate them on your own to get the server or client to run the way you expect it to. One other important note to make, and this was actually mentioned in the syllabus, is that markup and CSS is not a primary concern for this course. For example, the way we actually style the application of tiny house is useful and it looks presentable, but it isn't the main takeaway for what we want to teach you. And there's a few things we're going to do to support you actually being able to build this app without being fully concerned with how this application was styled. The first thing we're going to do that you've probably already understood from part one is we're going to use a UI framework named ant design that provides a large list of different UI components that we're simply going to import and use , whether they're buttons, icons, text, you know, the layout, breadcrumbs, etc. So this would alleviate a lot of concerns we're going to have with how we're going to style a button this way or how we're going to prepare an input this way, etc. However, there is going to be a lot of or a decent amount of additional styling we're going to provide. And to get to that point, at a certain lesson in the course, I believe the setup for part two lesson, we're going to share with you a single CSS file that's going to contain all the custom classes we've prepared, that's going to be used in the application. The reason being is as we build the tiny house application, we don 't want to go back to our CSS setup and think about, oh, let's dial up the background with this color. Let's add a little bit of box shadow. This is not a primary lesson for this course. So we 're going to share this file with you. It's a very straightforward CSS file. It has all the class names appropriately written to describe what's going to be styled. And when we actually build the template for our components, in the lesson videos, you're going to see us essentially just introduce these classes directly. So for example, if we're building the header components, we're simply going to import the header component from ant design. And then we're going to simply specify a class name here of app header. Then the div elements within will say a class name of app header , logo search section, etc, etc. Now when we do this, we're not going to be going back to the CSS file to discuss how this will style. We're simply going to explain this by saying we're building the header components, we're adding a link, we're introducing a search component, we're adding a child menu items. But as we go about doing this, we're simply going to reference these already prepared classes.

[10:14 - 12:08] Now, if you're interested in following along as you go through the course, that 's perfectly okay. There's a few things you can do to help make this not a, I guess, difficult process. The first thing obviously is as we proceed through the lesson videos, you're going to see us actually compare, compose and prepare these components slowly. So we're going to declare and say, we're building this section, we're building this template, and we're going to introduce these classes as we go along. Additionally, we have the advantage of sharing with you the entire lesson manuscript. And with this entire lesson manuscript, as you proceed through the documentation, you're going to see the snippets of code that we prepare. And it's perfectly okay for you to go to this lesson manuscript here, and copy over what you think is not necessarily very important, right? So in this case, if I wanted to follow along and build this app header, there's nothing inherently wrong with me just copying these class names over here to get to the point in the lesson of where we're trying to take you to. Additionally, we're going to share with you all the prepared code samples for every single lesson. So at any moment in time, if you feel like you're not at a point that didn't make any sense, or the UI didn't reflect what you try to do, you're welcome to simply just go to the lesson in your source code, let's say 15.6, find the client project, find the component in question, and simply see how it's been prepared. The good news is our UI templates with the help of anti-design aren't going to be very, very complicated, right? They're all going to look very similar to this. They'll have a few classes applied, but it isn't going to be too overbearing. And as always, if you have any questions at any moment in time, please do reach out to us and we're happy to help. The last thing we're going to talk about governs the fact in how we want these code snippets or samples are going to be shown to you in the lesson manuscript.

[12:09 - 13:41] In certain moments in time, you may see an entire file or entire component be prepared and shown. So as an example, in this lesson, let's say building the app header and logout, in this code snippet, we can see the code being mostly prepared. We'll see that we're importing the React component, a link component from React Router, the layout component from Add Design, we destruct the header component from layout, we export a component function named app header that has the elements that we're looking for. However, we've mentioned before that in part two of the course, we're going to be writing a lot of code. So with that being said , oftentimes, if we're doing small specific changes, we wouldn't necessarily want to show an entire file if the changes are minor. So with that being said, you may see code snippets as you follow along being a lot more particular. So here, for example, we're not showing the entire source index file in our React application. Instead, we want to convey that we want to import the fixed component from Add Design, we want to place the fixed component outside of our switch statements, we want to place the app header components within. Right now, this may seem obvious, but in this code snippet, an example, we don't expect you to copy everything here and take that as reflective of what the entire file would be. That would obviously error. In this case, we expect you to sort of follow along and understand the specific things that are being done. Now, with that being said, if you simply scroll down straight to this code snippet without watching the video and without reading the manuscripts, this wouldn't make much sense.

[13:42 - 14:57] However, if you were to follow along in the lesson video, you then come to the lesson manuscript and read some of the documentation prepared, it will make a lot more sense in what we're trying to do for these particular snippets. The last thing we're going to talk about governs the fact in how we want these code snippets or samples are going to be shown to you in the lesson manuscript. In certain moments in time, you may see an entire file or entire component be prepared and shown. So, as an example, in this lesson, let's say building the app header and logout, in this code snippet, we can see the code being mostly prepared. We'll see that we're importing the React component, a link component from React Router, the layout component from and design, we destruct the header component from layout, we export a component function named app header that has the elements that we're looking for. However, we've mentioned before that in part two of the course, we're going to be writing a lot of code. So with that being said, oftentimes, if we're doing small specific changes, we wouldn't necessarily want to show an entire file if the changes are minor. So with that being said, you may see code snippets as you follow along being a lot more particular. So here, for example, we're not showing the entire source index file in our React application.

[14:58 - 15:47] Instead, we want to convey that we want to import the affixed component from and design. We want to place the affixed component outside of our switch statements. We want to place the app header component within, right? Now, this may seem obvious, but in this code snippet, an example, we don't expect you to copy everything here and take that as reflective of what the entire file would be. That would obviously error. In this case, we expect you to sort of follow along and understand the specific things that are being done. Now, with that being said, if you simply scroll down straight to this code snippet without watching the video and without reading the manuscript, this wouldn't make much sense. However, if you were to follow along in the lesson video, you then come to the lesson manuscript and read some of the documentation prepared, it will make a lot more sense in what we're trying to do for these particular snippets.

[15:48 - 16:13] Hopefully, this lesson is helpful in giving you some context and best preparing you for part two of the course. As always, my instructor and myself, we're not going anywhere. We're always going to be around. So at any moment in time, you have any questions, you feel stuck somewhere. Please come to the tiny house channel and discord, message us and let us know what your thoughts are. You're welcome to also provide questions in each of these lesson videos.

[16:14 - 16:36] We'll do our very best to be responsive here. I know at this very moment in time, a notification system is just about to be built where we'll be notified when a discussion comment is made. So we'll be keeping our eyes peeled for this as well. And as again, we're not going anywhere. We'll be refining the material as we go. So if you notice any omissions, any mistakes, please let us know and we'll be there to support you as best as we can.