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
TypeScript Design Patterns And SOLID Principles
Sources: udemy
Welcome to this one-of-a-kind course specifically designed to transform your TypeScript programming skills by diving deep into the world of Gang Of Four Design
16 hours 58 minutes 54 seconds
MERN eCommerce From Scratch
Sources: udemy, Brad Traversy
There are a lot of "eCommerce" courses out there, but most use some kind of prebuilt plugin or platform. In this course, we will build a completely customized eCommerce / shoppi...
14 hours 49 minutes 45 seconds
Web Performance Fundamentals
Sources: Nadia Makarevich
"The Fundamentals of Web Performance" focuses on the key aspects of improving the speed and responsiveness of web applications in the context of React...
TypeScript Interview Questions - Coding Interview 2023
Sources: udemy
This course is great preparation for any TypeScript programming interviews that you may have coming up. Programming interviews need a lot amount of knowledge, but the best way t...
2 hours 56 minutes 26 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