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

YouTube

Building a Notion Clone with React Native Expo and Prisma - Local-First Tutorial

Code with Beto via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn to build a comprehensive Notion clone using React Native Expo and Prisma ORM in this extensive 3-hour tutorial that demonstrates local-first data management principles. Master recursive navigation with Expo Router while implementing drag-and-drop functionality for organizing files in a hierarchical structure similar to Notion's interface. Set up and configure Prisma ORM for local database management, create robust database schemas, and establish an extended client setup for optimal data handling. Develop interactive components including draggable list items, custom action sheets, markdown text input fields, and file management systems that support creating, editing, and viewing nested documents. Implement advanced features such as theme customization, tab navigation, recent files tracking, and explore screens while learning to persist file ordering through drag-and-drop interactions. Build reusable components like custom buttons, list headers, file cards, and inner file rendering systems that maintain the familiar Notion user experience. The tutorial covers creating test data, handling markdown support, managing parent-child file relationships, and establishing proper navigation patterns for a seamless user interface, with plans for a future second part that will integrate Prisma's sync engine for enhanced synchronization capabilities.

Syllabus

00:00 Demo & Resources
13:06 Creating New Expo App
13:48 Installing Dependencies
16:18 Prisma ORM Setup
18:19 Creating Expo Development Build
20:22 Creating Schema
34:12 Prisma Extended Client Setup
40:37 Creating Test Data
52:02 Draggable Notion List Component
1:00:55 Persisting Files Order onDragEnd
1:06:40 Notion List Item Component
1:19:27 Inner Notion List Item Component
1:25:26 Integrating Action Sheet
1:31:54 Customizing Theme Colors
1:33:00 Customizing Tabs and Layout
1:33:58 New Notion Screen
2:03:35 Custom Notion Button Component
2:10:04 Markdown Text Input Component
2:15:18 Rendering Inner Files
2:18:25 Saving/Editing Notion Files
2:27:22 Viewing Notion Files
2:30:13 Creating Child Notion Files
2:32:19 Creating Additional New Notion Stack Screen
2:36:27 Notion List Header Component
2:41:59 Recent Files Component
2:49:35 Recent File Card Component
3:05:30 Explore Screen
3:13:34 Conclusion

Taught by

Code with Beto

Reviews

Start your review of Building a Notion Clone with React Native Expo and Prisma - Local-First Tutorial

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.