Build a Notion Clone with React and TypeScript

Name: Build a Notion Clone with React and TypeScript
Price: 9 USD
Availability: InStock

7h 57m 47s

English

Paid

May 21, 2024

Enhance your React and TypeScript technical skills and build a portfolio-worthy application that demonstrates to employers your ability to create complex, full-stack applications. Plus you'll learn to utilize Vite for efficient project scaffolding and Supabase for database management and authentication.

Watch Online Build a Notion Clone with React and TypeScript

Join premium to watch

Go to premium

#	Title	Duration
1	Project Demo	02:33
2	What is TypeScript?	04:43
3	Why use TypeScript with React?	03:11
4	Your First React TypeScript Application	16:59
5	Prepare Dev Environment - Windows	07:29
6	Prepare Dev Environment - MacOS	05:59
7	How to Set up a New Typescript Project	04:41
8	TypeScript Configuration Options	04:25
9	Setting up React TypeScript Using App Generators	03:07
10	Setting up React TypeScript App Using Create React App	04:45
11	Setting up React TypeScript Apps Using Vite	10:32
12	Setting up React TypeScript App Using Parcel	20:16
13	Configure Webpack with TypeScript	18:16
14	Configure ESLint and Prettier	08:36
15	Adding Third Party Libraries	05:27
16	Integrating with APIs	04:51
17	Deploying an App	04:22
18	What Are We Building?	02:33
19	Generate the App Scaffold	03:01
20	Setup Supabase and Netlify	02:23
21	Supabase Setup Continued	01:59
22	Types Basics	06:00
23	What Types Does TypeScript Have?	04:11
24	Creating Custom Types	04:09
25	Arrays and Tuples	02:48
26	Type Aliases	01:24
27	Union and Intersection Types	01:59
28	Interfaces	02:53
29	Enums	02:27
30	Functions	03:34
31	Parametric Types and Generics	04:09
32	Utility Types	01:44
33	Advanced Type Manipulations	04:07
34	Identifying and Addressing Type Errors	02:08
35	Using Props and State	02:53
36	Using Hooks	02:25
37	Handling Events	01:51
38	Using Context	03:23
39	Using Refs	03:55
40	Styling React Components	05:32
41	Define the Types	04:25
42	Basic Implementation	02:23
43	Cover Image Component	09:02
44	Spacer Component	02:50
45	Title Component	10:38
46	Basic Node	20:11
47	useFocusedNodeIndex Hook	07:50
48	Page Component	11:49
49	Render the Page and Test the App	01:37
50	Move State Management to Context	01:08
51	Create the usePageState Hook	10:08
52	Create AppStateContext	10:02
53	Make the BasicNode - the AppStateContext	01:28
54	Make the Page - the AppStateContext	02:02
55	Add Multiple Node Kinds	00:43
56	Create NodeTypeSwitcher	05:32
57	useOverflowsScreenBottom	04:50
58	Create CommandPanel	13:49
59	Render CommandPanel Inside the BasicNode	06:05
60	Make the Nodes Draggable	00:44
61	Create the NodeContainer Component	06:44
62	Reordering the Nodes	08:16
63	Using HOCs	02:27
64	Typing HOCs	03:02
65	Using Render Props	02:23
66	Implement Navigation	03:28
67	Create AuthSessionContext	12:40
68	Create the Auth Page	07:51
69	Create the Private Route Component	03:40
70	Sync the State with the Backend	08:06
71	Create the withInitialState HOC	16:05
72	Create Page Node Component	10:47
73	Create FileImage Component	06:24
74	Update the Cover Component	07:07
75	Create ImageNode Component	07:57
76	Upload the Project to Netlify	01:05
77	Testing with Jest or Vitest and React Testing Library	03:01
78	Setting Up Jest and React Testing Library	07:44
79	Setting Up Vitest and React Testing Library	07:30
80	Testing Components	02:57
81	Testing Hooks	02:17
82	Using Mocks	03:14
83	Prepare the Project for Migration	04:25
84	Migrate React Components	03:47
85	Migrate React Hooks	03:09
86	Update TypeScript Version	02:45