Building a Notion Clone with React Native Expo & Prisma | Local-First Tutorial
This video will cover topics including recursive navigation with Expo Router, local-first data management, drag and drop sorting for Notion files, creating a Prisma schema, using Prisma ORM with Expo, handling Markdown support, and more, with a future second part planned to integrate the Prisma sync engine for additional features.
Source Code: https://codewithbeto.dev/projects/not...
React Native Course: https://codewithbeto.dev/learn
React with TypeScript course: https://codewithbeto.dev/learnReact
👨🏻💻 ☕️ 🌟 Support My Work 🌟 ☕️ 👨🏻💻
If you find this project helpful and want to support my work, the best way is by enrolling in one of my courses:
React Native Course: https://codewithbeto.dev/learn
React with TypeScript Course: https://codewithbeto.dev/learnReact
Git & GitHub Course: https://codewithbeto.dev/learnGit
For other ways to support my work, please consider:
GitHub Sponsors: https://github.com/sponsors/betomoedano
Become a Code with Beto channel member: / @codewithbeto
You can also support me by using my referral links:
Get an exclusive 40% discount on CodeCrafters: https://app.codecrafters.io/join?via=...
Get a 10% discount on Vexo Analytics with code "BETO10": https://vexo.co
Sign up for Robinhood and we'll both pick our own gift stock 🎁: https://join.robinhood.com/albertm-82...
Get 500 MB of Dropbox storage: https://www.dropbox.com/referrals/AAC...
Your support helps me continue creating amazing projects!
⌚️ Timestamps ⌚️
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
👯 Join the Discord: / discord
⭐️ If you want to learn more about me, check this links:
Code With Beto: https://codewithbeto.dev
X: https://x.com/betomoedano
Github: https://github.com/betomoedano
Linkedin: / betomoedano
Discord: / discord
Medium: / betomoedano01
Figma: https://www.figma.com/@betomoedano
⭐️ My apps & projects:
► Code With Beto: https://codewithbeto.dev/
► Eco Studios:https://www.ecostudios.dev/
⭐️ Contact: [email protected]
