CF

TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL

30h 50m 42s
English
Paid

TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL is a 180-lesson 30 hours 50 minutes self-paced course by Fullstack.io. This course shows you how to build a full app with React, TypeScript, Node, and GraphQL.

Course facts

Lessons
180
Duration
30 hours 50 minutes
Level
All levels
Language
English
Updated
Instructor
Fullstack.io
Price
Premium

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

Who teaches TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL? 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.

What lessons are included in TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL?

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

What courses are similar to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL?

More courses by Fullstack.io

Frequently asked questions

What prerequisites do I need before enrolling in this course?
Before enrolling in this course, you should have a basic understanding of JavaScript and web development concepts. Familiarity with React and Node.js is beneficial but not mandatory, as the course will introduce essential concepts such as what Node is and how to run JavaScript with it. Prior experience with TypeScript or GraphQL is not required, as these will be covered from the ground up.
What will I build during the course?
During the course, you will build a fullstack application using React, TypeScript, Node, and GraphQL. This includes creating a GraphQL API with Apollo Server, handling payments with Stripe, adding login functionality with OAuth 2.0 and Google Sign-In, and deploying the application using Heroku. You'll also integrate the Google Geocode API for place search functionality.
Who is the target audience for this course?
The course is designed for developers who want to deepen their understanding of building fullstack applications with modern tools. It caters to those interested in learning how to integrate React, TypeScript, and GraphQL in a cohesive project. Frontend developers looking to expand into backend development and those aiming to strengthen their skills with TypeScript and GraphQL will find this course particularly beneficial.
How does the course content compare to other similar courses?
This course focuses on building a fullstack application by integrating React, TypeScript, Node, and GraphQL, with an emphasis on using modern tools and patterns. Unlike courses that focus solely on frontend or backend, this course covers both aspects in depth, including setting up a GraphQL API, using React Hooks, and handling payments with Stripe. It combines practical exercises with theoretical knowledge to provide a holistic learning experience.
Which specific tools and platforms will be used in the course?
The course utilizes a range of tools and platforms, including Node.js for the server side, Apollo Server for creating a GraphQL API, and Apollo Client for sending GraphQL queries in React. You'll use TypeScript to ensure safe code, and tools like ESLint for linting. Additionally, the course covers deployment using Heroku, and introduces OAuth 2.0 and Google Sign-In for authentication, as well as Stripe for payments.
What topics are not covered in this course?
While the course provides a comprehensive guide to building a fullstack application with React, TypeScript, Node, and GraphQL, it does not cover advanced backend topics such as microservices architecture or serverless functions. Additionally, it does not delve into mobile app development frameworks or alternative frontend frameworks like Angular or Vue.js.
How much time should I expect to dedicate to this course?
The course has a total runtime of approximately 30 hours and 50 minutes, distributed across 180 lessons. Given the depth and scope of the content, you should expect to spend additional time on exercises and projects beyond the video runtime. Dedicating regular study hours each week will help you progress steadily and reinforce the concepts learned.