Welcome to
TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
Course Syllabus and Content
Introduction
5 Lessons 48 Minutes
Introduction to the TinyHouse Masterclass.
Syllabus and course overview.
The structure of the course, the material available, and how best to go through the course.
Quick walkthrough of the development environment and tools used in the course.
Welcome to Part I of the course.
Getting Started With Our Server
12 Lessons1 Hours 21 Minutes
This is an introduction to the work we'll be doing in Module 1.0.
Node is a JavaScript runtime environment that was first introduced in 2009 by Ryan Dahl, as a response to how slow web servers were at the time. In this lesson, we'll introduce Node and talk about the capability Node provides to make I/O tasks asynchronous and non-blocking.
In this lesson, we'll use Node to run a simple JavaScript file on the server.
Web servers provide functionality for requests that can be made from client applications. Node has a built-in HTTP module to allow for building a server that facilitates the transfer of data in HTTP. With this lesson, we'll look to use the popular Express framework as the replacement of the core HTTP module to create a minimal Node server, with Express routing.
Nodemon is an open-source utility tool that helps automatically restart a Node server whenever a change in code is detected in development. In this lesson, we'll install Nodemon and introduce an application script that will start the Node server with Nodemon.
JavaScript is considered a weakly typed language. In this lesson, we'll go through a simple example of why that can be an issue in development and where TypeScript falls in the picture.
We'll get started with TypeScript in this lesson by installing a few necessary packages in our server and setting up the configuration of our TypeScript compiler.
TypeScript is a development tool geared towards making building JavaScript applications more robust. In an application's deployed state (browser or server), TypeScript must be compiled to valid JavaScript. In this lesson, we'll see how the TypeScript compiler provides us with a command to compile and produce JavaScript code from TypeScript.
Though VSCode includes TypeScript language support which helps us pick up TypeScript errors in our TypeScript code, we'll introduce more robust code checking with ESLint - a popular open-source JavaScript/TypeScript linting tool.
To help us get started, we'll begin by introducing a mock data array of rental listings in this lesson. This will help us get started before we begin to address more appropriate data persistence.
In this lesson, we'll use the routing capabilities Express gives us to create GET and POST routes that interact with the mock data array we've established.
This lesson is a summary of the work we've done in Module 1.0.
Comparing APIs
4 Lessons 27 Minutes
Introduction to Module 2.0.
GraphQL is a query language for APIs. In this lesson, we go through an initial discussion on GraphQL and how GraphQL differs from traditional REST APIs.
Before we continue discussing some of the core concepts in GraphQL, we'll take a bit of a tangent in this lesson to contrast and compare Github's existing REST API (v3) and their GraphQL API (v4).
In this lesson, we introduce and discuss some of GraphQL's main concepts such as the GraphQL schema, object types and resolver functions.
Using Apollo Server
6 Lessons 37 Minutes
Introduction to Module 3.0.
In this lesson, we'll install the Express variation of the popular Apollo Server library and the GraphQL JavaScript library.
In this lesson, we'll use the Apollo Server and GraphQL JavaScript libraries to create a minimal GraphQL API that we'll be able to interact within an IDE known as GraphQL Playground.
In this lesson, we'll look to mimic the listings retrieval and manipulation we had in our Express RESTful API but with GraphQL instead.
The GraphQL schema language is a human-readable syntax to help create GraphQL schemas. In this lesson, we'll use the GraphQL schema language to re-create the schema we have in a more readable and simpler format.
This lesson is a summary of the final state of the work done in Module 3.0.
Storing Data
10 Lessons 48 Minutes
Introduction to Module 4.0.
This brief lesson highlights some of the differences between relational and non-relational databases, and introduces MongoDB.
MongoDB Atlas is a fully managed cloud database service built and maintained by the same team behind MongoDB. In this lesson, we'll create our first MongoDB cluster with MongoDB Atlas.
Many different libraries and tools exist to help facilitate the connection between a Node Server and a MongoDB instance. In this lesson, we'll introduce and use the Node MongoDB driver to make our server connect with the MongoDB cluster we've created in Atlas.
Though we've been able to make our database connection from the server, we haven't appropriately specified the type of data that can be returned from our database collections. In this lesson, we introduce and take advantage of generics to define the type of data that can be returned from our listings collection.
Defining and using environment-specific configuration variables within code files is less than ideal due to security reasons as well as the coupling of environment-specific configuration and application code. In this lesson, we'll avoid declaring our MongoDB environment variables directly in our database connection file and instead use the popular dotenv package to load environment variables from a .env file.
Having our database contain some mock data will allow our GraphQL queries and mutations to interact with data from the database. In this lesson, we'll create a simple seed script that will make it easy for us to populate the database with mock data in development.
In this lesson, we'll look to have our GraphQL API resolvers interact and manipulate data in our Mongo database. This will help ensure persistence of data and data changes between server restarts.
In this lesson, we'll see how we can use the lodash merge function to have our GraphQL resolvers map be broken down to small resolvers objects that pertain to certain domains (i.e modules).
This lesson is a summary of the work done in Module 4.0.
Getting Started with React
4 Lessons 21 Minutes
Introduction to Module 5.0.
This lesson provides a quick revision on some of the main topics behind developing UI applications with React.
A lot of things need to be considered to create the scaffold of a modern React application, like allowing for a modular-based app, compiling ESNext code, transpiling TypeScript code, etc. To avoid spending too much time with build tools, we'll create a modern React/TypeScript application with a single command - create-react-app.
create-react-app creates a series of files and folders as it instantiates and creates a Webpack bundled React application. In this lesson, we'll spend some time addressing and highlighting each of the files and folders scaffolded by create-react-app.
Building out Listings
8 Lessons 44 Minutes
Introduction to Module 6.0.
In this lesson, we'll create our first React Function component.
In this lesson, we'll introduce and type define Props to our recently created Listings function component.
In this lesson, we'll investigate the FunctionComponent interface type React provides and address the type checking capabilities it provides when assigned to functional components.
Numerous tools and libraries exist to help clients make GraphQL requests to a GraphQL API. Before we begin to introduce a third-party library to help make our GraphQL requests, we'll look to make our requests with the help of the window Fetch API. In this lesson, we'll begin to make the connection between our React client and Node server and see if we can query the listings query from our GraphQL API.
Although the custom server fetch() function we've established in the last lesson works, the data being returned isn't appropriately typed. In this lesson, we'll take advantage of TypeScript generics to ensure we get queried data from our server fetch() function with the appropriate type.
In this lesson, we'll use our custom server fetch() function to invoke the deleteListing mutation we have in our GraphQL API, to delete a listing in our listings collection.
This lesson is a summary of the work done in Module 6.0.
GraphQL and Hooks
10 Lessons1 Hours 31 Minutes
Introduction to Module 7.0.
In this lesson, we discuss the motivation behind React Hooks and see a few examples of how React Hooks can help share logic between our React components.
Though we've been able to create a custom fetch() function to help us make the GraphQL requests to query listings or delete a certain listing, we've only seen the results of our requests in our browser console. In this lesson, we'll introduce and use React's useState Hook to track listings state value in our function component with which we'll be able to use and display in our UI.
We've managed to use the useState Hook to track and display listings data to our UI. In this lesson, we'll introduce the useEffect Hook and see how we can create an effect callback to query listings data the moment our component mounts.
With React's useState and useEffect Hooks, we've been able to query and display listings information the moment our Listings component is mounted. In this lesson, we'll create our very own custom useQuery Hook that will consolidate the pattern of creating a state property, using the useEffect Hook, and running the server fetch() function to make a query and state update when a component mounts.
In this lesson, we'll introduce the capability for a component to manually refetch a query from the useQuery Hook.
In this lesson, we'll address how we can handle the loading and error state of our GraphQL queries with our custom useQuery Hook.
In this lesson, we'll create a custom useMutation Hook which will abstract the server fetch functionality needed to conduct a mutation from a component.
In this lesson, we'll configure the useQuery and useMutation Hooks we've created to use another state management Hook to handle state. We'll use React's useReducer Hook.
This lesson is a summary of the work done in Module 7.0.
Introducing React Apollo
5 Lessons 22 Minutes
Introduction to Module 8.0.
To use the React Apollo client library, we'll install and set up the Apollo client of our application with which we'll be doing in this lesson.
With the Apollo client available everywhere in our app, we'll replace the use of the custom useQuery and useMutation Hooks with the variations provided to us from the React Apollo library.
In this lesson, we'll use Apollo tooling's command line interface to autogenerate static types for the GraphQL requests in our client application.
This lesson is a summary of the work done in Module 8.0.
Styling with Ant Design
3 Lessons 25 Minutes
Introduction to Module 9.0.
In this lesson, we discuss some of the benefits of using a React UI framework as well as the Ant Design UI library.
Throughout Part I of the course, we haven't made any changes to the presentation (i.e. CSS) of our client code. In this lesson, we'll introduce and use the Ant Design React UI framework to improve the appearance of our client application.
Part One Conclusion
1 Lesson 32 Seconds
Conclusion of Part I of the course.