Build a Notion Clone with React and TypeScript
7h 57m 47s
English
Paid
Course description
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.
Watch Online
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 |
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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
React Fundamentals
Sources: ui.dev (ex. Tyler McGinnis)
If you're serious about learning React, there's no better place to do it. Originally launched in 2016, this course has been taken by tens of thousands of developers and maintain...
4 hours 36 minutes 46 seconds
React, NodeJS, Express & MongoDB - The MERN Fullstack Guide
Sources: udemy
Building fullstack applications (i.e. frontend + backend) with the MERN stack is very popular - in this course, you will learn it from scratch at the example of a complete proje...
18 hours 45 minutes 10 seconds
Build Product Hunt with ReactJS and Firebase
Sources: Code4Startup (coderealprojects)
In this course, you will be learning how to build ReactJS app in ES6 syntax (a modern version of Javascript) with Firebase, a real-time back-end by cloning Product Hunt. Also, a...
4 hours 47 minutes 27 seconds
Composing Layouts in React
Sources: fullstack.io
In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives. Along the way you will learn modern CSS Layout tools lik...
4 hours 38 minutes 12 seconds
CodeFast | Learn to code in weeks, not months.
Sources: Marc Lou
CodeFast is a course designed specifically for those who want to turn their idea into a real online business quickly and effectively. Unlike traditional...
11 hours 38 minutes 42 seconds