CF

Build a Notion Clone with React and TypeScript

7h 57m 47s
English
Paid

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.

Additional

https://github.com/satansdeer/ztm-notion-clone

About the Author: Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

Watch Online 86 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Project Demo
All Course Lessons (86)
#Lesson TitleDurationAccess
1
Project Demo 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
Unlock unlimited learning

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

Learn more about subscription

Related courses

Frequently asked questions

What are the prerequisites for this course?
To benefit most from this course, students should have a basic understanding of JavaScript, as well as some familiarity with React. While prior knowledge of TypeScript is not required, it can be beneficial. The course begins with foundational lessons such as 'What is TypeScript?' and 'Why use TypeScript with React?' which will help get students up to speed with these technologies.
What will I be able to build by the end of this course?
By the end of the course, students will have built a Notion clone, a complex, full-stack application. This involves using React for the front end and integrating TypeScript throughout. The application will be capable of handling various types of content nodes, with features like draggable nodes and a command panel, demonstrating skills in both front-end development and back-end integration with Supabase for database management.
Who is the target audience for this course?
This course is designed for developers who are looking to enhance their React skills and learn TypeScript to create more robust applications. It is also suitable for those interested in building full-stack applications and understanding how to integrate back-end services like Supabase.
How does the scope of this course compare to other React courses?
This course goes beyond basic React tutorials by focusing on TypeScript integration and building a sophisticated application from scratch. It covers topics such as TypeScript configuration, advanced type manipulations, and using tools like Vite and Supabase. This makes it more comprehensive than courses that only cover React basics or do not involve a full-stack project.
What tools and platforms are specifically covered in this course?
The course specifically covers setting up and using Vite for efficient project scaffolding, Supabase for database management and authentication, and other tools like ESLint, Prettier, and Webpack. Lessons focus on these tools' integration within a React and TypeScript project.
What topics are not covered in this course?
This course does not cover the basics of JavaScript or React in detail, as it is assumed that students have prior knowledge of them. It also does not delve into other back-end frameworks or databases besides Supabase, nor does it cover mobile development or advanced CSS frameworks.
How much time should I expect to commit to this course?
The course consists of 86 lessons, and while the total runtime is not specified, students should be prepared to spend additional time on practical exercises, especially with setting up the dev environment, working through TypeScript concepts, and building the Notion clone project. A commitment of several weeks, depending on prior experience and weekly available study time, is reasonable.