Part One Welcome
Welcome to Part I of 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:04] Welcome to part one of the course. We've broken the course down to two parts.
[00:05 - 00:21] And in part one, we discuss all the things we'll need to know before we start building the tiny house application. You could treat part one as a course of its own, because we discuss a lot of different things within a React, TypeScript, and GraphQL environment.
[00:22 - 00:35] The app will be building in part one of the course is an app that surfaces a single webpage that displays a series of listings. When the page loads, a query is automatically made to surface the listings to the user.
[00:36 - 00:51] If interested, the user is able to delete a listing by clicking the delete button in the list item. When a listing is deleted, a refetch is made to query the updated list of listings, and the deleted listing is now removed from the list.
[00:52 - 01:06] If the query for the list of listings fails, the user is presented with an error message stating that something went wrong. If an error occurs while the user is attempting to delete a mutation, they'll be notified that something has gone wrong as well.
[01:07 - 01:23] When a query or a mutation is in flight, loading statuses are shown to the user to convey that the information is being requested or the action is being conducted. As we can see, the app we build in part one of the course is fairly simple, and this is intentional.
[01:24 - 01:45] In part one, we're interested in spending as much time as we can by focusing on the patterns and process to build this app before we build the tiny house application in part two. The listings information surfaced in the client is being requested from a Graph QL API created from our node server.
[01:46 - 02:03] The data being surfaced is kept in a non-relational database known as MongoDB, and we are to use a database as a service known as MongoDB Atlas to coordinate and inspect how our database appears. The client, or that is to say the user interface, is built with React.
[02:04 - 02:17] TypeScript is used extensively both on the client and the server to ensure we build a type safe application. That's right, and here's a detailed walkthrough of everything we're going to be covering in part one of the course.
[02:18 - 03:01] We will create a node server, integrate TypeScript into our node server, introduce GraphQL by investigating GitHub's API, deploy our own GraphQL API using Apollo, persist data with MongoDB, bootstrap a React project, integrate TypeScript into our React project , have our client interact with our server using GraphQL, introduce React hooks, and even make our own custom hooks, install React Apollo and use Apollo's official hooks to make GraphQL requests. We'll also use Apollo to auto-generate TypeScript definitions from our GraphQL API, and finally, we'll introduce a UI framework to quickly build a presentable UI.
[03:02 - 03:05] There's a lot of things to talk about, so we're incredibly excited to get things started.