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
Watch Online 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 |
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 commentsSimilar courses
MERN Stack - React Node from Scratch Building Social Network
Sources: udemy
Welcome to Become a FullStack / MERN Stack JavaScript Developer from Scratch with React, Node JS and MongoDB. In this course you will Learn React with Node JS f
20 hours 49 minutes 20 seconds
Build a Youtube Clone
Sources: Code With Antonio
In this 24-hour course, you will learn how to create your own YouTube clone using modern technologies. We will go into detail on advanced topics, including...
23 hours 42 minutes 10 seconds
React and NodeJS: A Practical Guide with Typescript
Sources: udemy
I'm a FullStack Developer with 10+ years of experience. I'm obsessed with clean code and I try my best that my courses have the cleanest code possible. My teach
6 hours 54 minutes 59 seconds
Want to join the conversation?
Sign in to comment