Building a Notion Clone with React Native Expo & Prisma | Local-First Tutorial | Code with Beto

Learn how to build a Notion-like app using React Native Expo and Prisma ORM with a local-first approach. The app stores data in a local SQLite database, enabling fast queries and offline usage. It supports recursive file structures, markdown editing, drag-and-drop sorting, and dark mode.

You'll see how to define a Prisma schema for recursive files, use Prisma hooks for database operations, and build a clean UI with expandable lists and inline markdown editing. This is ideal for React Native developers wanting to create complex local-first apps with modern tools.

What's inside

Introduction to the local-first Notion clone concept
Demo of recursive file management and markdown support
Using Prisma ORM with React Native Expo and SQLite
Handling drag-and-drop sorting and persisting order
Dark mode support and UI features
Creating, editing, and deleting nested files recursively
Searching and displaying recent files
Future plans for syncing local data with a server

Introduction to the local-first Notion clone concept

The app is designed as a local-first application, meaning all data lives on the device in a local SQLite database. This allows offline usage and very fast data access without network delays. Prisma ORM is used to interact with the database, providing a simple API and hooks compatible with React Native and Expo.

Local-first also means the app can later be extended with a sync engine to keep local and remote databases in sync, enabling features like sharing and collaboration. The current video focuses on building the local database and UI, with syncing planned for a future video.

Demo of recursive file management and markdown support

The app supports files inside files recursively, allowing a tree-like structure similar to Notion. There is a single component responsible for rendering this expandable list of files, keeping the code clean and manageable.

Markdown support includes titles with hashtags, bold text, inline code, code blocks, and mentions. A toolbar appears above the keyboard to help insert markdown elements easily. Users can create new files inside any file, edit markdown content, and navigate through nested files seamlessly.

Using Prisma ORM with React Native Expo and SQLite

Prisma ORM is used in Early Access mode with React Native Expo to manage the SQLite database. It provides hooks like , , and to query data easily and reactively.

The Prisma schema defines a recursive structure for files, allowing each file to have many children and a parent. All data operations are done directly on the database, avoiding complex state management and ensuring fast performance.

Handling drag-and-drop sorting and persisting order

The app supports drag-and-drop to reorder files in the list. When a file is moved, the new order is saved in the database so it persists across app reloads and devices.

This means users will see their custom file order consistently, no matter where they open the app. The sorting logic updates the database directly, keeping UI and data in sync.

Dark mode support and UI features

Dark mode is fully supported, with the UI adapting colors accordingly. The app uses Expo Linear Gradient for nice visual effects and can be extended to support images for files if needed.

The interface includes a toolbar for markdown editing, expandable file lists, and smooth navigation between nested files. The UI is designed to be clean and intuitive, focusing on usability.

Creating, editing, and deleting nested files recursively

Users can create new files at any level by pressing a plus button and naming the file. Editing a file opens a markdown editor where content can be updated with live preview.

Deleting a file also deletes all its children recursively, ensuring no orphaned data remains. This recursive handling is managed by the database schema and Prisma ORM, simplifying the app logic.

Searching and displaying recent files

The app shows recently edited files grouped by today and last week. Searching is limited to files edited recently, making it fast and relevant.

Editing a file moves it to the top of the recent list, reflecting the latest activity. This feature helps users quickly access their most important notes.

Future plans for syncing local data with a server

While this video focuses on local-first functionality, the Prisma team is working on a sync engine to synchronize local SQLite data with a remote database.

Once available, this will enable features like sharing files with other users, syncing changes when online, and offline-first collaboration. A future video will cover how to integrate this sync engine.

Resources

CourseReact Native course

Master React Native with TypeScript and build production apps with Expo.

Let's connect!