English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 30h 50m | 33.5 GB
Learn advanced React, Node, TypeScript, and GraphQL by building a production-ready application in this online course.
Learn each of these technologies and how to build a production app that fits them together.
You’ll Learn:
- How to create a GraphQL API in Node.js, with Apollo Server, from scratch.
- Gain confidence to build robust production-ready applications.
- Build large-scale React applications with 2020 techniques (e.g. Hooks).
- Utilize React Apollo and the Apollo CLI to handle GraphQL requests from React.
- Avoid bugs by using TypeScript to write strongly-typed code.
- Persist data with both MongoDB and PostgreSQL
- Handle payments with Stripe
- Learn how to deploy applications hassle-free with Heroku
- Tackle the complexity of authentication by using the industry standard OAuth 2.0 (Google Sign-In)
- Enable location searching with the powerful Google’s Geocode API.
What You’ll Build
In this detailed Fullstack React Masterclass, you’ll build a production-ready home sharing application, inspired by sites like Airbnb.
How to create a Node.js GraphQL API
We’ll build a GraphQL in Node.js from scratch …and then upgrade to Apollo Server
Create React UI with GraphQL Data
Using Apollo Client we’ll integrate our GraphQL queries and mutations into our React app (using hooks)
Utilize Apollo to make GraphQL requests
Using Apollo Client we’ll call GraphQL mutations (using hooks)
Avoid bugs with TypeScript
Both our client and our server will be implemented in TypeScript
Search-by-Location
We’ll use a Geo-location API to allow searching for listings by physical location
Accept Payments with Stripe
Using Stripe, we’ll configure the front-end and server to take payments
Create Gorgeous Pages
Creating intuitive and presentable UI isn’t easy. We’ll see how CSS component frameworks let us create beautiful pages (without being a designer)
Tackle Authentication
Authentication can be difficult to get right, but we show each step to integrate our server and client to allow login with Google or any OAuth 2.0 provider
Learn Efficient Pagination
See how offset-based pagination can easily be implemented with MongoDB and the Apollo framework.
Build Complex Forms
Handle form validation with React Hooks and Ant Design’s intuitive, form-based components.
The TinyHouse course is broken into two parts
Part I
An introduction to all the different tools we’ll need to build the TinyHouse application.
Part II
Take everything we’ve learned from Part I and build the TinyHouse home sharing application.
Table of Contents
Part 1
1 TinyHouse Welcome
2 Syllabus
3 How To Go Through The Course
4 Environment Setup
5 Part One Welcome
6 Module 1 Introduction
7 What is Node?
8 Running JavaScript with Node
9 Creating a minimal Node:Express Server
10 Automatic Reloading Using Nodemon
11 Introducing TypeScript
12 Adding TypeScript to our Server
13 Compiling our TypeScript project
14 Linting with ESLint
15 Introducing mock listings
16 Creating GET and POST Express routes
17 Module 1 Summary
18 Module 2 Introduction
19 What is GraphQL?
20 Comparing Github’s REST and GraphQL APIs
21 GraphQL Concepts
22 Module 3 Introduction
23 Installing Apollo Server and GraphQL
24 Creating a GraphQL Schema with the GraphQL JS Library
25 Querying and mutating listings data with GraphQL
26 Using the GraphQL Schema Language
27 Module 3 Summary
28 Module 4 Introduction
29 Introduction to MongoDB
30 Setting up a new MongoDB Cluster with Atlas
31 Connecting the server with MongoDB
32 TypeScript Generics and adding types to our Collections
33 Setting Up Env Variables
34 Seeding mock data to the database
35 Processing Data from MongoDB
36 Modularizing Resolvers
37 Module 4 Summary
38 Module 5 Introduction
39 React
40 Create React App
41 Create React App – The Rundown
42 Module 6 Introduction
43 The Listings Component
44 Props & TypeScript
45 Functional Components & TypeScript
46 Querying Listings
47 Abstracting the type of data from server fetch
48 Deleting a listing
49 Module 6 Summary
50 Module 7 Introduction
51 React Hooks
52 The useState Hook
53 The useEffect Hook
54 Custom useQuery Hook
55 Custom useQuery and refetch
56 Custom useQuery and loading/error states
57 Custom useMutation Hook
58 The useReducer Hook
59 Module 7 Summary
60 Module 8 Introduction
61 Creating our Apollo Client
62 React Apollo Hooks
63 Autogenerated types with Apollo CLI
64 Module 8 Summary
65 Module 9 Introduction
66 UI Frameworks and Ant Design
67 Styling with Ant Design
68 Part One Conclusion
Part 2
69 Part Two Welcome
70 The TinyHouse App
71 Walkthrough of TinyHouse Code
72 Code Patterns & Behavior
73 How To Go Through The Course
74 Set-up For Part II
75 Module 2 Introduction
76 Routing in TinyHouse
77 React Router
78 Module 3 Introduction
79 Database Collection Structure
80 Database Document Structure
81 Seed & Clear Data from MongoDB
82 Module 4 Introduction
83 OAuth 2.0
84 Google Sign-In (OAuth)
85 Google Sign-In GraphQL Fields
86 Using Google Sign-In & People API
87 Building the Authentication Resolvers
88 Building the UI for Login
89 Executing Login
90 Building the AppHeader & Logout
91 Module 4 Summary
92 Module 5 Introduction
93 Cookies & Login Sessions
94 localStorage vs. sessionStorage vs. cookies
95 Adding the Viewer Cookie on the Server
96 Adding the Viewer Cookie on the Client
97 X-CSRF Token
98 Module 5 Summary
99 Module 6 Introduction
100 User GraphQL Fields
101 Modifying the User, Listing, and Booking GraphQL TypeDefs
102 Building the User Resolvers
103 The UserProfile React Component
104 The UserListings & UserBookings React Components
105 Module 6 Summary
106 Module 7 Introduction
107 Listing GraphQL Fields
108 Building the Listing Resolvers
109 Querying for listing data
110 ListingDetails & ListingBookings
111 The ListingCreateBooking React Component
112 Module 7 Summary
113 Module 8 Introduction
114 Listings GraphQL Fields
115 Building the Listings Resolvers
116 Building the UI of the Homepage
117 Displaying the highest-priced listings in the Homepage
118 Module 8 Summary
119 Module 9 Introduction
120 Google’s Geocoding API
121 Location-based searching for listings
122 Updating the listings resolver
123 Building the Listings page
124 Pagination & Filtering in the Listings page
125 Searching for listings from the App Header
126 Index location-based data
127 Module 9 Summary
128 Module 10 Introduction
129 Stripe & Stripe Connect
130 Stripe Connect OAuth
131 Stripe Connect GraphQL Fields
132 Building the Stripe Connect Resolvers
133 Connecting with Stripe on the Client
134 Disconnecting from Stripe on the Client
135 Module 10 Summary
136 Module 11 Introduction
137 HostListing GraphQL Fields
138 Building the HostListing Resolver
139 Building the UI of the Host page
140 Executing the HostListing Mutation
141 Module 11 Summary
142 Module 12 Introduction
143 Cloudinary & Image Storage
144 Image uploads with Cloudinary
145 Module 13 Introduction
146 CreateBooking GraphQL Fields
147 Building the CreateBooking Resolver
148 Resolving the BookingsIndex of a Listing
149 Disabling booked dates on the client
150 Creating the Booking Confirmation Modal
151 Displaying the Payment Form with React Stripe Elements
152 Executing the CreateBooking Mutation
153 Module 13 Summary
154 Module 14 Introduction
155 Cloud Computing
156 Deploying with Heroku
157 Walkthrough of Deployed App
158 Module 15 Introduction
159 The NotFound Page
160 Apollo Client & FetchPolicy
161 useLayoutEffect & Window Scroll
162 React Router Hooks
163 Disconnecting from Stripe & Revoking Access
164 Additional Listing DatePicker Changes
165 Part Two Conclusion
166 Module 17 Introduction
167 SQL vs. NoSQL
168 PostgreSQL
169 TypeORM
170 TinyHouse – PostgreSQL & TypeORM
171 Module 18 Introduction
172 Unit Testing
173 Jest & React Testing Library
174 Apollo React Testing
175 Getting Started
176 Testing the Home Component I
177 Testing the Home Component II
178 Testing the Login Component I
179 Testing the Login Component II
180 Pushing code & creating PRs
Resolve the captcha to access the links!