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.
Build a Notion Clone with React and TypeScript
7h 57m 47s
English
Paid
Added to CourseFlix
Build a Notion Clone with React and TypeScript is a 86-lesson 7 hours 57 minutes self-paced course by Zero To Mastery. 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.
Course facts
- Lessons
- 86
- Duration
- 7 hours 57 minutes
- Language
- English
- Added to CourseFlix
- May 2024
- Instructor
- Zero To Mastery
- Price
- Premium
Additional
Who teaches Build a Notion Clone with React and TypeScript? Zero To Mastery
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.
What lessons are included in Build a Notion Clone with React and TypeScript?
0:00
/ #1: Project Demo
All Course Lessons (86)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 |
Watch the other 85 lessons
One payment unlocks this course and every other premium course. No auto-renew.
See plansWhat courses are similar to Build a Notion Clone with React and TypeScript?
Updated 3y agoReact and NestJS: A Practical Guide with Docker
By: UdemyReact and NestJS: A Practical Guide with Docker — build a fullstack TypeScript app with React, NestJS, TypeORM, and containerized deploy.6h 54m
ClassicLearn React 19 with Epic React v2
By: Kent C. DoddsReady for the React 19 revolution? The most in-demand JavaScript framework has received a major update! You are already familiar with React, but in React 19 the26h 51m4/5
FreeUpdated 1mo agoComplete React Developer in 2025 (w/ Redux, Hooks, GraphQL)
By: Udemy, Zero To MasteryFree, project-based React course: build a full e-commerce app while learning Redux, Hooks, GraphQL, Firebase, and Stripe.39h 48m5/5
Updated 1mo agoReact Js A-Z With Laravel - For Beginner to Advanced Level
By: UdemyLearn full-stack development with React and Laravel across 415 lessons: REST APIs, custom authentication, and real project builds.68h 1m
Updated 3y agoStripe Payments JavaScript Course
By: FireshipLearn how to build safe Stripe payments with JavaScript. You use Node and React to create a web app that handles charges, customers, and subscriptions.1h 29m
Updated 1mo agoIntro to Shopify App Development with React, Node & GraphQL
By: UdemyBuild real Shopify apps with React, Node, and GraphQL, working with the Shopify Admin API and injecting custom storefront code.4h
Updated 1mo agoReact & TypeScript Mastery
By: Beto MoedanoLearn React and TypeScript from fundamentals to a full eCommerce app with Firebase auth, Stripe payments, and a shopping cart.24h 15m5/5
More courses by Zero To Mastery
ClassicComplete Web Developer in 2025: Zero to Mastery
Learn to code. Get hired. This is one of the most popular, highly rated coding bootcamps online. It's also the most moderen and up-to-date. Guaranteed. You'll g37h 3m5/5
ClassicComplete Next.js Developer in 2023: Zero to Mastery
Learn Next JS from industry experts using modern best practices. The only Next JS tutorial + projects course you need to learn Next JS, build enterprise-level R27h 12m5/5
ClassicComplete SQL + Databases Bootcamp: Zero to Mastery
With so many online resources available, it can be paralyzing not only figuring out where to start but more importantly which courses will actually teach you th24h 6m5/5
Updated 3y agoPower BI Bootcamp: Zero to Mastery
This Power BI Bootcamp will take you from absolute beginner in Power BI to being able to get hired as a confident and effective Business Intelligence Analyst. Y16h 55m
Updated 3y agoBash Scripting: Learn Shell Scripting
Learn Bash Scripting from scratch, from an industry expert. You'll learn Shell Scripting fundamentals, master the command line, and get the practice.9h 38m
FreeUpdated 3y agoChatGPT & Large Language Models (LLMs): A Practical Guide
Learn how ChatGPT actually works under the hood! This byte-sized course will get you up to speed on Large Language Models (LLMs) including topics like Prompt De58m5/5
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.