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
Build Web Apps with React & Firebase
Sources: udemy
React is a hugely popular front-end library and React developers are always in hight demand in the web dev job market. In this course you'll learn how to use React from the grou...
23 hours 34 minutes 47 seconds
React & TypeScript - The Practical Guide
Sources: Academind Pro
TypeScript is an amazing technology that helps developers write better code with less errors - simply because it let's you catch & fix type-related errors whilst writing the cod...
7 hours 22 minutes 54 seconds
Storybook for building React apps
Sources: fullstack.io
You're going to unlock skills that will help you develop UI faster, better, and with great quality. You will understand why it is important to learn Storybook i
3 hours 16 minutes 25 seconds
Responsive LLM Applications with Server-Sent Events
Sources: fullstack.io
Large Language Models (LLMs) are transforming entire industries, but their integration into user interfaces with real-time data streaming...
1 hour 18 minutes 18 seconds