Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

Build a Notion Clone with React and TypeScript

via Zero To Mastery

Go to class Write review

Overview

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.
  • 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

Syllabus

  •   Introduction
    • Project Demo
    • Project FAQ
    • Exercise: Meet Your Classmates and Instructor
    • Project Resources
    • Set Your Learning Streak Goal
  •   Introduction to React TypeScript!
    • What is TypeScript?
    • Exercise: Play with TypeScript Playground
    • Why use TypeScript with React?
    • Your First React TypeScript Application
    • Exercise: Create Your First Application Using CodeSandbox
  •   Creating React TypeScript Applications
    • Preparing Our Dev Environment
    • Prepare Dev Environment - Windows
    • Prepare Dev Environment - MacOS
    • Prepare Dev Environment - Linux
    • How to Set up a New Typescript Project
    • TypeScript Configuration Options
    • Exercise: Experiment with the TypeScript Configuration Options
    • Setting up React TypeScript Using App Generators
    • Setting up React TypeScript App Using Create React App
    • Setting up React TypeScript Apps Using Vite
    • Setting up React TypeScript App Using Parcel
    • Configure Webpack with TypeScript
    • Configure ESLint and Prettier
    • Adding Third Party Libraries
    • Integrating with APIs
    • Deploying an App
  •   Notion Clone: Creating The Project
    • What Are We Building?
    • Overview: Creating the Project
    • Generate the App Scaffold
    • Setup Supabase and Netlify
  •   Introduction to TypeScript
    • Types Basics
    • What Types Does TypeScript Have?
    • Exercise: Experiment with Types in the Playground
    • Creating Custom Types
    • Arrays and Tuples
    • Exercise: Using Arrays and Tuples
    • Type Aliases
    • Union and Intersection Types
    • Exercise: Using Union and Intersection Types
    • Interfaces
    • Exercise: Using Interfaces
    • Enums
    • Exercise: Using Enums
    • Functions
    • Exercise: Using Functions
    • Parametric Types and Generics
    • Exercise: Using Parametric Types and Generics
    • Utility Types
    • Exercise: Utility Types
    • Advanced Type Manipulations
    • Exercise: Advanced Type Manipulations
  •   Using React with TypeScript
    • Identifying and Addressing Type Errors
    • Using Props and State
    • Using Hooks
    • Handling Events
    • Using Context
    • Using Refs
    • Exercise: Using Refs
    • Styling React Components
  •   Notion Clone: Basic Implementation
    • Overview: Basic Implementation
    • Define the Types
    • Basic Implementation
    • Cover Image Component
    • Spacer Component
    • Title Component
    • Basic Node
    • useFocusedNodeIndex Hook
    • Page Component
    • Render the Page and Test the App
  •   Notion Clone: Move State Management to Context
    • Overview: Move State Management to Context
    • Move State Management to Context
    • Create the usePageState Hook
    • Create AppStateContext
    • Make the BasicNode - the AppStateContext
    • Make the Page - the AppStateContext
  •   Notion Clone: Add Multiple Node Kinds
    • Overview: Add Multiple Node Kinds
    • Add Multiple Node Kinds
    • Create NodeTypeSwitcher
    • useOverflowsScreenBottom
    • Create CommandPanel
    • Render CommandPanel Inside the BasicNode
  •   Notion Clone: Dragging the Nodes
    • Overview: Make the Nodes Draggable
    • Make the Nodes Draggable
    • Create the NodeContainer Component
    • Reordering the Nodes
  •   React TypeScript Cookbook
    • Using HOCs
    • Typing HOCs
    • Using Render Props
  •   Notion Clone: Implement Authentication
    • Implement Navigation
    • Overview: Implement Authentication
    • Create AuthSessionContext
    • Create the Auth Page
    • Create the Private Route Component
  •   Notion Clone: Save Data on the Backend
    • Overview: Saving Data on the Backend
    • Sync the State with the Backend
    • Create the withInitialState HOC
    • Create Page Node Component
    • Create FileImage Component
    • Update the Cover Component
    • Create ImageNode Component
    • Upload the Project to Netlify
  •   Testing React TypeScript Applications
    • Testing with Jest or Vitest and React Testing Library
    • Setting Up Jest and React Testing Library
    • Setting Up Vitest and React Testing Library
    • Testing Components
    • Testing Hooks
    • Using Mocks
  •   Migrating Existing React Applications to TypeScript
    • Prepare the Project for Migration
    • Migrate React Components
    • Migrate React Hooks
    • Update TypeScript Version
  •   Where To Go From Here?
    • Review This Project!

Taught by

Maksim Ivanov

Reviews

Start your review of Build a Notion Clone with React and TypeScript

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.