CF

TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL

30h 50m 42s
English
Paid

This course shows you how to build a full app with React, TypeScript, Node, and GraphQL. You follow each step as you build real features. You learn how these tools work together in a fullstack setup.

What You Will Learn

  • Create a GraphQL API in Node with Apollo Server from scratch.
  • Build stable apps that use clear patterns and clean code.
  • Use modern React tools, including hooks.
  • Send GraphQL queries in React with Apollo Client.
  • Write safe code with TypeScript and strong types.
  • Use tools that help you test, check, and improve your code.
  • Handle payments with Stripe.
  • Deploy apps with Heroku.
  • Add login with OAuth 2.0 and Google Sign-In.
  • Use the Google Geocode API to add place search.

Additional

https://coursehunters.online/t/tinyhouse-a-fullstack-react-masterclass-with-typescript-and-graphql-part-1

https://coursehunters.online/t/tinyhouse-a-fullstack-react-masterclass-with-typescript-and-graphql-part-two-pt-1/

Throughout the course, we have been interacting with the Google Maps API using the @google/maps Node package. However, Google recently deprecated the their old @google/maps Node package, and published a new @googlemaps/google-maps-services-js Node package.
Read more here https://coursehunters.online/t/tinyhouse-google-maps-node-package-update/4005

About the Author: Fullstack.io

Fullstack.io thumbnail

Fullstack.io is the technical book and course publisher founded by Nate Murray, Ari Lerner, and team — known for the ng-book Angular series, the React Quickly books, and the fullstack React series that anchored a generation of working developers' first deep-dive into modern JavaScript framework material. Fullstack.io has since rebranded to Newline for its newer course catalog.

The book / course catalog covers the modern JavaScript framework landscape — Angular, React, Vue, GraphQL, Node.js — at the level of comprehensive reference works rather than introductory tutorials. The Fullstack.io style is unusually rigorous about the underlying APIs and edge cases that ship projects to production.

The CourseFlix listing under this source carries over 20 Fullstack.io / Newline courses spanning that range. Material is paid; the original platform sold both per-course access and membership tiers. Courses are aimed at developers ready to move past introductory tutorials into the depth of a chosen framework.

Watch Online 180 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 180 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: TinyHouse Welcome
All Course Lessons (180)
#Lesson TitleDurationAccess
1
TinyHouse Welcome Demo
02:40
2
Syllabus
18:37
3
How To Go Through The Course
10:47
4
Environment Setup
02:54
5
Part One Welcome
03:09
6
Module 1 Introduction
01:04
7
What is Node?
05:06
8
Running JavaScript with Node
02:59
9
Creating a minimal Node:Express Server
08:08
10
Automatic Reloading Using Nodemon
03:50
11
Introducing TypeScript
05:38
12
Adding TypeScript to our Server
16:11
13
Compiling our TypeScript project
03:06
14
Linting with ESLint
13:18
15
Introducing mock listings
07:04
16
Creating GET and POST Express routes
10:46
17
Module 1 Summary
04:04
18
Module 2 Introduction
00:43
19
What is GraphQL?
05:41
20
Comparing Github's REST and GraphQL APIs
09:48
21
GraphQL Concepts
11:23
22
Module 3 Introduction
01:01
23
Installing Apollo Server and GraphQL
02:06
24
Creating a GraphQL Schema with the GraphQL JS Library
09:29
25
Querying and mutating listings data with GraphQL
11:34
26
Using the GraphQL Schema Language
10:52
27
Module 3 Summary
02:07
28
Module 4 Introduction
00:55
29
Introduction to MongoDB
03:45
30
Setting up a new MongoDB Cluster with Atlas
06:52
31
Connecting the server with MongoDB
11:19
32
TypeScript Generics and adding types to our Collections
12:34
33
Setting Up Env Variables
08:02
34
Seeding mock data to the database
08:41
35
Processing Data from MongoDB
14:34
36
Modularizing Resolvers
07:18
37
Module 4 Summary
02:15
38
Module 5 Introduction
00:47
39
React
06:59
40
Create React App
04:22
41
Create React App - The Rundown
15:58
42
Module 6 Introduction
00:46
43
The Listings Component
03:47
44
Props & TypeScript
03:27
45
Functional Components & TypeScript
06:48
46
Querying Listings
14:17
47
Abstracting the type of data from server fetch
04:54
48
Deleting a listing
08:43
49
Module 6 Summary
02:05
50
Module 7 Introduction
01:23
51
React Hooks
08:00
52
The useState Hook
07:50
53
The useEffect Hook
11:46
54
Custom useQuery Hook
08:52
55
Custom useQuery and refetch
06:58
56
Custom useQuery and loading/error states
11:54
57
Custom useMutation Hook
16:22
58
The useReducer Hook
13:26
59
Module 7 Summary
05:08
60
Module 8 Introduction
00:55
61
Creating our Apollo Client
04:22
62
React Apollo Hooks
04:09
63
Autogenerated types with Apollo CLI
10:25
64
Module 8 Summary
02:39
65
Module 9 Introduction
00:27
66
UI Frameworks and Ant Design
04:35
67
Styling with Ant Design
20:31
68
Part One Conclusion
00:33
69
Part Two Welcome
01:56
70
The TinyHouse App
15:11
71
Walkthrough of TinyHouse Code
12:18
72
Code Patterns & Behavior
10:55
73
How To Go Through The Course
16:40
74
Set-up For Part II
02:52
75
Module 2 Introduction
00:34
76
Routing in TinyHouse
06:15
77
React Router
07:27
78
Module 3 Introduction
01:06
79
Database Collection Structure
05:17
80
Database Document Structure
15:18
81
Seed & Clear Data from MongoDB
08:28
82
Module 4 Introduction
00:53
83
OAuth 2.0
04:36
84
Google Sign-In (OAuth)
04:50
85
Google Sign-In GraphQL Fields
04:51
86
Using Google Sign-In & People API
08:31
87
Building the Authentication Resolvers
18:56
88
Building the UI for Login
11:36
89
Executing Login
22:36
90
Building the AppHeader & Logout
18:06
91
Module 4 Summary
06:03
92
Module 5 Introduction
00:56
93
Cookies & Login Sessions
02:40
94
localStorage vs. sessionStorage vs. cookies
05:33
95
Adding the Viewer Cookie on the Server
11:06
96
Adding the Viewer Cookie on the Client
08:20
97
X-CSRF Token
08:51
98
Module 5 Summary
04:10
99
Module 6 Introduction
00:54
100
User GraphQL Fields
02:24
101
Modifying the User, Listing, and Booking GraphQL TypeDefs
10:48
102
Building the User Resolvers
21:39
103
The UserProfile React Component
23:02
104
The UserListings & UserBookings React Components
42:51
105
Module 6 Summary
07:21
106
Module 7 Introduction
00:34
107
Listing GraphQL Fields
02:21
108
Building the Listing Resolvers
16:07
109
Querying for listing data
11:21
110
ListingDetails & ListingBookings
25:39
111
The ListingCreateBooking React Component
34:31
112
Module 7 Summary
04:48
113
Module 8 Introduction
00:46
114
Listings GraphQL Fields
03:00
115
Building the Listings Resolvers
13:53
116
Building the UI of the Homepage
23:10
117
Displaying the highest-priced listings in the Homepage
19:59
118
Module 8 Summary
03:14
119
Module 9 Introduction
01:05
120
Google's Geocoding API
08:16
121
Location-based searching for listings
07:49
122
Updating the listings resolver
19:50
123
Building the Listings page
17:34
124
Pagination & Filtering in the Listings page
30:34
125
Searching for listings from the App Header
26:57
126
Index location-based data
09:25
127
Module 9 Summary
03:29
128
Module 10 Introduction
00:57
129
Stripe & Stripe Connect
07:59
130
Stripe Connect OAuth
11:34
131
Stripe Connect GraphQL Fields
09:12
132
Building the Stripe Connect Resolvers
13:52
133
Connecting with Stripe on the Client
28:00
134
Disconnecting from Stripe on the Client
13:31
135
Module 10 Summary
04:18
136
Module 11 Introduction
00:37
137
HostListing GraphQL Fields
02:44
138
Building the HostListing Resolver
15:28
139
Building the UI of the Host page
38:22
140
Executing the HostListing Mutation
28:21
141
Module 11 Summary
05:06
142
Module 12 Introduction
00:42
143
Cloudinary & Image Storage
07:14
144
Image uploads with Cloudinary
08:47
145
Module 13 Introduction
01:05
146
CreateBooking GraphQL Fields
02:52
147
Building the CreateBooking Resolver
25:58
148
Resolving the BookingsIndex of a Listing
23:03
149
Disabling booked dates on the client
25:21
150
Creating the Booking Confirmation Modal
21:13
151
Displaying the Payment Form with React Stripe Elements
17:22
152
Executing the CreateBooking Mutation
28:11
153
Module 13 Summary
09:02
154
Module 14 Introduction
00:29
155
Cloud Computing
06:41
156
Deploying with Heroku
45:14
157
Walkthrough of Deployed App
10:26
158
Module 15 Introduction
00:52
159
The NotFound Page
05:33
160
Apollo Client & FetchPolicy
16:33
161
useLayoutEffect & Window Scroll
10:27
162
React Router Hooks
10:26
163
Disconnecting from Stripe & Revoking Access
10:33
164
Additional Listing DatePicker Changes
10:07
165
Part Two Conclusion
00:41
166
MODULE 17 INTRODUCTION
00:49
167
SQL VS. NOSQL
05:07
168
POSTGRESQL
06:05
169
TYPEORM
16:04
170
TINYHOUSE - POSTGRESQL & TYPEORM
33:11
171
Module 18 Introduction
03:39
172
Unit Testing
11:45
173
Jest & React Testing Library
30:38
174
Apollo React Testing
08:36
175
Getting Started
08:23
176
Testing the Home Component I
23:21
177
Testing the Home Component II
40:34
178
Testing the Login Component I
26:17
179
Testing the Login Component II
29:00
180
Pushing code & creating PRs
14:40
Unlock unlimited learning

Get instant access to all 179 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

  • MERN Stack From Scratch thumbnailClassic

    MERN Stack From Scratch

    By: Brad Traversy
    We spend 12 hours creating this project from scratch. It includes a multi-step checkout process with PayPal integration, product search, rating & review, user p
    13h 32m5/5
  • React & TypeScript - The Practical Guide thumbnailUpdated 2y ago

    React & TypeScript - The Practical Guide

    By: Academind Pro (Maximilian Schwarzmüller)
    TypeScript is an amazing technology that helps developers write better code with less errors - simply because it let's you catch & fix type-related errors.
    7h 22m5/5
  • React Fundamentals thumbnailUpdated 2y ago

    React Fundamentals

    By: UI.dev (Tyler McGinnis)
    If you're serious about learning React, there's no better place to do it. Originally launched in 2016, this course has been taken by tens of thousands of develo
    4h 36m

Frequently asked questions

What is TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL about?
This course shows you how to build a full app with React, TypeScript, Node, and GraphQL. You follow each step as you build real features. You learn how these tools work together in a fullstack setup. What You Will Learn Create a GraphQL…
Who teaches this course?
It is taught by Fullstack.io. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 180 lessons with a total runtime of 30 hours 50 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/tinyhouse-a-fullstack-react-masterclass-with-typescript-and-graphql. The page hosts every lesson with the integrated video player; no download is required.