Don't want to get left behind? Learn to build with A.I. now 🤖
Back to courses

Build a Notion Clone with React and TypeScript

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.

12 Days

Average time students take to complete this course.

instructor
Taught by: Maksim Ivanov
Last updated: April 2024

Overview

Learn to use React with TypeScript, enhance your 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!

What you'll learn

  • Learn how to create a React app with TypeScript
  • Understand the benefits of React TypeScript apps
  • Build a comprehensive, standout portfolio project that will wow employers
  • How to test React TypeScript applications
  • Advanced UI techniques, such as drag and drop, to create engaging interfaces
  • Type-safe programming skills for more reliable and maintainable code

Why Is This React TypeScript Project Awesome?

Because it's the perfect opportunity to learn how to use React with TypeScript while building a portfolio project!

This is your playground to explore, learn, and create something truly impressive. Not only will you boost your technical skills, but you'll also craft a portfolio-worthy application that shouts, "I can build complex, full-stack applications, no sweat!"

Here's what you'll be learning in this React TypeScript Project:

  1. First up, we've got React.js. It's the bread and butter of web development these days. We'll get you up to speed on creating components, playing around with DOM nodes, handling events like a pro, and managing state both globally and locally. It's all about making your app responsive and interactive, making sure users have a smooth experience. Don't forget about React Router DOM for navigating through your app. We'll tackle implementing private routes, ensuring certain parts of your app are accessible only to authenticated users. It's a must-know for any web developer.

  2. Then, there's DNDKit – because who doesn't love a bit of drag and drop? We'll show you how to make elements on your page movable with just a mouse drag. You'll learn to set up custom drag targets and reorder elements seamlessly. It's a skill that'll add that extra polish to your projects.

  3. Of course, we can't forget about TypeScript. It's all about making your code bulletproof, catching errors early, and making your development process smoother. We'll dive into how to use TypeScript with React, define new types, and utilize types from libraries to make your code cleaner and more reliable.

  4. Vite is your fast-pass ticket to getting projects off the ground quickly. It's a build tool that's all about speed, letting you bootstrap, build, and run your projects faster than ever before. You'll love the efficiency it brings to your workflow.

  5. Supabase is where your app's data lives. From managing your database to storing images and handling user authentication, it's got you covered. It's a powerful tool that simplifies backend work, letting you focus more on creating amazing user experiences.

  6. Lastly, CSS Modules will be your go-to for styling. Say goodbye to style clashes and hello to modular, reusable CSS that makes your app look stunning.

If you're ready to take this awesome (and rewarding) fullstack React project idea and make it real, then let's get started!

Wait... What's a Project?

One of the most common things we hear from students is: "I want to build more projects!"

We love hearing that, because building projects is really the best way to learn. And unique, challenging projects can really make your portfolio stand out for potential employers.

But also...it just feel so good when you actually build something real!

That's why we've created ZTM Projects. A collection of comprehensive portfolio and practice projects that you can use to advance your knowledge, learn new skills, build your portfolio, and sometimes even just have fun!

What Else Should I Know?

By becoming a ZTM member you'll not only get access to all our courses, bytes, and projects.

But you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors.

Most importantly, you'll be learning from an industry professional (Maksim) that has actual real-world experience using React and TypeScript to build projects. He teaches you the exact strategies and techniques he uses in his role.

Finally, as with all ZTM courses, this course is a living thing. It will be constantly updated as the landscape changes so you can use it as your go-to resource for building React project ideas now and throughout your career.

Join 1,000s of Zero To Mastery graduates that have gotten hired and are now working at companies like Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify + other top tech companies.

They come from all different backgrounds, ages, and experiences. Many even started as complete beginners.

So there's no reason it can't be you too.

And you have nothing to lose. Because you can start learning right now and if this course isn't everything you expected, we'll refund you 100% within 30 days. No hassles and no questions asked.

When's the best time to get started? Today!

There's never a bad time to learn in-demand skills. But the sooner, the better. So start building this React TypeScript project today by joining the ZTM Academy. You'll have a clear roadmap to developing the skills to build your own projects, get hired, and advance your career.

Join Zero To Mastery Now

Course curriculum

Here's an overview of what you'll learn in this React project.

Introduction

5 lectures

Project Demo2:32

BEGIN

Project FAQ

BEGIN

Exercise: Meet Your Classmates and Instructor

BEGIN

Project Resources

BEGIN

Set Your Learning Streak Goal

BEGIN

Introduction to React TypeScript!

5 lectures

What is TypeScript?4:42

BEGIN

Exercise: Play with TypeScript Playground

BEGIN

Why use TypeScript with React?3:10

BEGIN

Your First React TypeScript Application16:58

BEGIN

Exercise: Create Your First Application Using CodeSandbox

BEGIN

Creating React TypeScript Applications

16 lectures

Preparing Our Dev Environment

BEGIN

Prepare Dev Environment - Windows7:28

BEGIN

Prepare Dev Environment - MacOS5:58

BEGIN

Prepare Dev Environment - Linux

BEGIN

How to Set up a New Typescript Project4:40

BEGIN

TypeScript Configuration Options4:24

BEGIN

Exercise: Experiment with the TypeScript Configuration Options

BEGIN

Setting up React TypeScript Using App Generators3:06

BEGIN

Setting up React TypeScript App Using Create React App4:44

BEGIN

Setting up React TypeScript Apps Using Vite10:31

BEGIN

Setting up React TypeScript App Using Parcel20:15

BEGIN

Configure Webpack with TypeScript18:15

BEGIN

Configure ESLint and Prettier8:35

BEGIN

Adding Third Party Libraries5:26

BEGIN

Integrating with APIs4:50

BEGIN

Deploying an App4:21

BEGIN

Notion Clone: Creating The Project

4 lectures

What Are We Building?2:32

BEGIN

Overview: Creating the Project

BEGIN

Generate the App Scaffold3:00

BEGIN

Setup Supabase and Netlify2:22

BEGIN

Introduction to TypeScript

21 lectures

Types Basics5:59

BEGIN

What Types Does TypeScript Have?4:10

BEGIN

Exercise: Experiment with Types in the Playground

BEGIN

Creating Custom Types4:08

BEGIN

Arrays and Tuples2:47

BEGIN

Exercise: Using Arrays and Tuples

BEGIN

Type Aliases1:23

BEGIN

Union and Intersection Types1:58

BEGIN

Exercise: Using Union and Intersection Types

BEGIN

Interfaces2:52

BEGIN

Exercise: Using Interfaces

BEGIN

Enums2:26

BEGIN

Exercise: Using Enums

BEGIN

Functions3:33

BEGIN

Exercise: Using Functions

BEGIN

Parametric Types and Generics4:08

BEGIN

Exercise: Using Parametric Types and Generics

BEGIN

Utility Types1:43

BEGIN

Exercise: Utility Types

BEGIN

Advanced Type Manipulations4:06

BEGIN

Exercise: Advanced Type Manipulations

BEGIN

Using React with TypeScript

8 lectures

Identifying and Addressing Type Errors2:07

BEGIN

Using Props and State2:52

BEGIN

Using Hooks2:24

BEGIN

Handling Events1:50

BEGIN

Using Context3:22

BEGIN

Using Refs3:54

BEGIN

Exercise: Using Refs

BEGIN

Styling React Components5:31

BEGIN

Notion Clone: Basic Implementation

10 lectures

Overview: Basic Implementation

BEGIN

Define the Types4:24

BEGIN

Basic Implementation2:22

BEGIN

Cover Image Component9:01

BEGIN

Spacer Component2:49

BEGIN

Title Component10:37

BEGIN

Basic Node20:10

BEGIN

useFocusedNodeIndex Hook7:49

BEGIN

Page Component11:48

BEGIN

Render the Page and Test the App1:36

BEGIN

Notion Clone: Move State Management to Context

6 lectures

Overview: Move State Management to Context

BEGIN

Move State Management to Context1:07

BEGIN

Create the usePageState Hook10:07

BEGIN

Create AppStateContext10:01

BEGIN

Make the BasicNode - the AppStateContext1:27

BEGIN

Make the Page - the AppStateContext2:01

BEGIN

Notion Clone: Add Multiple Node Kinds

6 lectures

Overview: Add Multiple Node Kinds

BEGIN

Add Multiple Node Kinds0:42

BEGIN

Create NodeTypeSwitcher5:31

BEGIN

useOverflowsScreenBottom4:49

BEGIN

Create CommandPanel13:48

BEGIN

Render CommandPanel Inside the BasicNode6:04

BEGIN

Notion Clone: Dragging the Nodes

4 lectures

Overview: Make the Nodes Draggable

BEGIN

Make the Nodes Draggable0:43

BEGIN

Create the NodeContainer Component6:43

BEGIN

Reordering the Nodes8:15

BEGIN

React TypeScript Cookbook

3 lectures

Using HOCs2:26

BEGIN

Typing HOCs3:01

BEGIN

Using Render Props2:22

BEGIN

Notion Clone: Implement Authentication

5 lectures

Implement Navigation3:27

BEGIN

Overview: Implement Authentication

BEGIN

Create AuthSessionContext12:39

BEGIN

Create the Auth Page7:50

BEGIN

Create the Private Route Component3:39

BEGIN

Notion Clone: Save Data on the Backend

8 lectures

Overview: Saving Data on the Backend

BEGIN

Sync the State with the Backend8:05

BEGIN

Create the withInitialState HOC16:04

BEGIN

Create Page Node Component10:47

BEGIN

Create FileImage Component6:23

BEGIN

Update the Cover Component7:06

BEGIN

Create ImageNode Component7:56

BEGIN

Upload the Project to Netlify1:04

BEGIN

Testing React TypeScript Applications

6 lectures

Testing with Jest or Vitest and React Testing Library3:00

BEGIN

Setting Up Jest and React Testing Library7:43

BEGIN

Setting Up Vitest and React Testing Library7:29

BEGIN

Testing Components2:56

BEGIN

Testing Hooks2:16

BEGIN

Using Mocks3:13

BEGIN

Migrating Existing React Applications to TypeScript

4 lectures

Prepare the Project for Migration4:24

BEGIN

Migrate React Components3:46

BEGIN

Migrate React Hooks3:08

BEGIN

Update TypeScript Version2:44

BEGIN

Where To Go From Here?

1 lectures

Review This Project!

BEGIN

Meet your instructor

Your instructor (Maksim) isn't just an expert with years of real-world professional experience. He has been in your shoes. He makes learning fun. He makes complex topics feel simple. He will motivate you. He will push you. And he will go above and beyond to help you succeed.

Maksim Ivanov

Hi, I'm Maksim Ivanov!

Maksim uses his 14+ years of experience working on dream projects, including for Spotify, Minecraft, and Battlefield V, to teach new students how to not only become a Fullstack Developer but to excel and land their dream job!

SEE MY BIO & COURSES

Maksim Ivanov

Full-Stack Developer

Frequently asked questions

Are there any prerequisites for this course?

Required:

Recommended:

  • Basic knowledge of React and TypeScript is recommended, but not required as this project will get you up to speed!

Do you provide a certificate of completion?

We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.

Are there subtitles?

Yes! We have high quality subtitles in 11 different languages: English, Spanish, French, German, Dutch, Romanian, Arabic, Hindi, Portuguese, Indonesian, and Japanese.

You can even adjust the text size, color, background and more so that the subtitles are perfect just for you!

Still have more questions about the Academy?

Still have more questions specific to the Academy membership? No problem, we answer some more here.

Invest in a better you. For less than a coffee a day.

Choose your currency:
$ USD US Dollar
Lifetime
100% OFF$999
$999
Only pay once, ever
You're serious about advancing your career and never getting left behind
Start Learning Now

MOST POPULAR

Save 40% vs. monthly (that's $189 a year)
Annual
100% OFF$279 / year
$23 / month
$279 / year
You're committed to getting hired and starting a career in tech
Start Learning Now
Monthly
100% OFF$39 / month
$39 / month
You're ready to upskill and advance your career
Start Learning Now

Every ZTM membership includes:

Unlimited access to all courses, projects + workshops, and career paths
Access to our private Discord with 400,000+ members
Access to our private LinkedIn networking group
Custom ZTM course completion certificates
Live career advice sessions with mentors, every month
Full access to all future courses, content, and features
100% RISK FREE

We know you'll love ZTM. That's why we provide a no hassle, 30-day money back guarantee.