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.

About the Author: zerotomastery.io

zerotomastery.io
Whether you are just starting to learn to code or want to advance your skills, Zero To Mastery Academy will teach you React, Javascript, Python, CSS and more to help you advance your career, get hired and succeed at some of the top companies in the world.

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

Similar courses

  • SOLID React Book
    SOLID React Book
    Sources: Islem Maboud
    Learn how to apply the principles of SOLID in React to create clean and high-quality code. Enhance your programming skills with the book SOLID React.
  • React Data Fetching: Beyond the Basics
    React Data Fetching: Beyond the Basics
    Sources: fullstack.io
    This course will teach you how to efficiently load data in React without using third-party libraries or the useEffect hook. We will create our own library for..
    2 hours 40 minutes 15 seconds
  • React and Django: A Practical Guide with Docker
    React and Django: A Practical Guide with Docker
    Sources: udemy
    Learn how to create an Admin App using React and Django Rest Framework. Django 3.1, React Typescript, Redux, Docker, Authentication and Authorisation, Upload Im
    6 hours 50 minutes 20 seconds
  • Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL)
    Complete React Developer in 2025 (w/ Redux, Hooks, GraphQL)
    Sources: udemy, zerotomastery.io
    Become a Senior React Developer! Build a massive E-commerce app with Redux, Hooks, GraphQL, ContextAPI, Stripe, Firebase.
    39 hours 48 minutes
  • Build a Full-Stack Todo App with Turborepo, tRPC, Next.js, NestJS & React Native
    Build a Full-Stack Todo App with Turborepo, tRPC, Next.js, NestJS & React Native
    Sources: Michael Guay
    Master Turborepo, tRPC, Next.js, NestJS, and React Native by creating a full-stack Todo application with complete type safety and a mobile version.
    2 hours 47 minutes 38 seconds