How To Go Through The Course
The structure of the course, the material available, and how best to go through the course.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL with a single-time purchase.
[00:00 - 00:46] Hey folks, welcome. In this short video, we'll summarize how best it is to proceed through the course with all the material provided to you. First and foremost, we'll discuss where to find all the information that's going to be shared to you. The vast majority of items available to you will be shared through the New Line platform here that can be accessed from the library page of your New Line account. The New Line platform is newly built and Tiny House is the first Master Class and course to be part of it. It's where you'll find the Screencast videos , the lesson manuscript, the links to accompanying course material, and so forth. The lesson, or in other words, the lecture videos, is the core component of the course.
[00:47 - 01:25] Every single lesson in the Master Class contains a clear recorded Screencast lecture where every line of code is explained and shown for you to follow along. This will remain for the entirety of the course part 1 and part 2. There are essentially a few different types of lecture videos. In the beginning of modules, you'll most likely see a video of myself and my co-instructor, Jing, summarizing the game plan of that respective module. Essentially, we'll discuss what we might have learned from the previous module, what we intend to learn from the upcoming module, and the steps we're going to take to complete the module.
[01:26 - 03:24] In certain cases where we need to explain a technology or a concept before we use it, the lecture videos take a more informative approach and go through lecture slides where certain technologies are explained with diagrams and so forth. For example, this is a lecture video of explaining what React hooks are and why they're helpful in the context of building React components. The vast majority of lecture videos are the videos where we essentially write code. The one thing we've tried to do for every one of these videos is to complete the video with a runnable code that conveys what we want to do in the video. For example, in the earlier portion of part 1 of the course, by the end of this video, we'll have code that can be run with JavaScript and shown in the console. By the end of this video, we'll have a web server that's created with Node and Express. By the end of part 1 of the course, this will remain the same and through part 2. For example, in module 7, by the end of this particular lesson, we'll have created a custom use query hook. By the video after that, we'll add a refetch function to the hook and so forth and so on. In summary, we'll want every coding video to end at a note where we've managed to complete the piece that we're interested in completing. And finally, though we won't have this for all modules, but for more of the larger modules, we'll have a conclusion video responsible in summarizing what we've done in the code to complete the module. The other big piece of the course is the lesson manuscript . Every lesson comes with a complete transcript alongside the video, including the code. And though we'll also have the complete code samples shared with you, which we'll talk about in a second, in the lesson manuscript, you'll notice the code samples conveyed being built piece by piece as you proceed through the lesson. We've ensured this for a couple of different reasons.
[03:25 - 04:35] We recognize that when following along screencast videos, one might be interested in seeing a written representation of what is being covered. Furthermore, when following along coding related screencast videos, we think it's important for the code samples and examples to be shared piece by piece for you to follow along with, for you to copy, for you to compare with, etc. Before we move towards addressing the complete project code that's going to be shared with you, we'll quickly talk about some of the supplementary learning material that's shared with you through the platform. In the beginning of every lesson manuscript, you'll see helpful links where you can find additional material that supplement the lesson. In the vast majority of lessons, you'll notice multiple choice quiz questions and their solutions shared with you. These quiz questions are helpful because we recognize recalling information helps improve retention. These questions aren't intended to be difficult or tricky, but are intended to confirm the notes that we think are important in a lesson. Cheat sheets will also be provided for a few lessons here and there.
[04:36 - 05:35] These cheat sheets are intended to provide small summaries around certain topics and patterns we'll notice in the code. As a note, more cheat sheets are shared in the client portion as opposed to the server portion of our project. But keep in mind that these cheat sheets aren't intended to always cover every single use case of a particular topic. We've created these cheat sheets to sort of contain the patterns and behavior of the more repetitive pieces of code you might want to write. And similarly, for the videos that have lecture slides, we'll also share these lecture slides as downloadable assets. Let's now talk about the complete code project directory that is to be shared with you. In the beginning of the course in the welcome video, you'll notice a link provided to you where you'll be able to download the entire project source code. As a tang ential note, work is underway to perhaps change where these links might be shared with you in the near future.
[05:36 - 06:33] You might notice them either within a resources tab or another tab, but regardless, it's safe to assume that the complete code project will be shared with you in the beginning of the course and the lesson supplementary material will be shared with you in the beginning of each lesson. The complete code project folder contains practically everything you can find in the platform, except for the lesson videos and with a few other things. The readme file in the roots of the project folder will summarize the structure and layout of the directory. But in essence, similar to the platform, every lesson is grouped in modules, where every lesson folder contains the assets and information for that lesson, such as the lesson manuscript itself, as well as the complimentary learning material, the lessons lecture slides, the quizzes, etc. Each lesson folder will also have a source code folder that contains the complete version of the code prepared in the lesson.
[06:34 - 07:00] At any moment in time, if you're interested in running the code samples within a certain lesson, you're welcome to dive into the source code for a certain lesson in the shared code directory. We might change small things around the structure of this external shared repo, but at the end of the day, it's important to remember that all the lessons supplementary material and the source code for the lesson can also be found in this shared directory.
[07:01 - 08:18] The last thing we'll talk about here are the project challenges. These challenges can only be found in the project code directory here and are intended to be structured code problems that allow you to try your skills in a new domain. In the root readme file, there will be a summary section that highlights the challenges and where they can be found in the project directory. These challenges are intended to be end-to-end and address a certain feature we 'll want to build in a wrap. For example, and without spending too much time, here's a project challenge that involves adding the ability to favorite a listing. We'll want to introduce a new feature where users will be able to favorite a listing or unfavourite a listing from the list of listings available to them. Since these challenges are end-to-end from back-end to front -end, we'll have these challenges grouped within certain modules. For part one of the course, we have these challenges grouped as the following. The node plus rest API portion, the graph QL portion, the MongoDB or in other words the data persistence portion, and the React client portion. For each of these challenges that we provided, we'll provide a starting point or the scaffold and the solution for a certain challenge.
[08:19 - 09:05] For more information, do dive in the project directory here to gain more context. One of the last things we'll talk about here is asking questions. Where can you ask a question if you feel you've gotten stuck somewhere or want to provide a suggestion? The first thing I do want to point out is there is a discussion tab in every lesson in the platform where you're able to ask a particular question at a certain time-step of a lesson video. This is also a great spot to see what others might be asking at certain points in the video. A notification system is being built to handle being notified when a question might have been asked or answered, but at this moment in time we'll be keeping our eyes peeled for anything that might have been asked here.
[09:06 - 10:17] The other area where you're able to ask questions is the live online community. We have in our Discord organization. In this community here you're able to find help and even help others, and we, that is to say the instructors, will also be here from time to time and will be keeping our eyes peeled. What's the best approach to proceed through the course? You're welcome to proceed through the course as you see fit, but we do encourage you to first watch the lecture videos, attempt to build the code samples by following along, comparing your results with the results shared with you from the manuscript and/or project code folder, taking a stab at the quiz questions and attempting to answer them before looking through the solutions, taking a look through any of the cheat sheets if they're available for that lesson, after certain modules taking a look at the challenges and attempting to answer them with your solution, and finally sharing your result and communicating your journey with other students in the community. We picture a single module will lead to about a week's worth of work if you spent between 1 to 3 hours a week going through the course.
[10:18 - 10:45] Before we close, we just want to say we're interested in hearing all and any additional feedback as you proceed through the course. So do let us know if there are certain things you really liked, other things you might have preferred, etc. We're really committed in making this course as robust as possible, so we want to hear everything you might want to share. With all that said, we'll see you in the course.