An MBnB Listing Search Demo with Searchable Results when Offline Using the PowerSync React Native SDK

This is a demo application which was used to port a Realm based application to PowerSync. The original Realm implementation can be found here.

This repo also contains a Node.js backend API using Express and TypeScript. This API will receive the changes uploaded by the client and will write them back to the MongoDB database. You can run this alongside the frontend project.

Project Structure

The following shows the project structure and the most relevant files.

├── app
│    └── powersync
│        ├── ApiClient.ts
│        ├── AppConfig.ts
│        ├── AppSchema.ts
│        ├── BackendConnector.ts
│        └── System.ts
│    ├── AirbnbList.tsx           - Main application screen
│    ├── AppWrapper.tsx           - Main wrapper with PowerSync Providers
├── backend                       - Backend server
│    └── src
│         ├── controllers               
│         ├── middleware               
│         ├── mongo               
│         ├── util
│    ├── Server.ts                        
│    ├── config.ts                        
│    ├── package.json             - Dependencies             
├── App.js                        - App Entry point
├── package.json                  - Dependencies
└── README.md                     - Instructions and info

Use Cases

This app focuses on showing how to use PowerSync to sync items and view them offline.

Getting Started

Prerequisites

• Node.js
• React Native development environment
  • Refer to the Expo section.
• MongoDB instance with the sample-airbnb dataset loaded
  • Add the PowerSync instance to your IP filtering
• PowerSync instance, either:
  • Cloud instance
  • Self-hosted instance

Install Dependencies

From the project root directory, run:

npm install

Set up the Environment Variables

Copy the .env.template file and update the variables accordingly:

cp .env.template .env

Run the App

Before running the app, start the backend server:

cd backend
npm install
npm start

iOS:

# Run this from the project root directory
npm run ios

Run on Android:

# Run this from the project root directory
npm run android

Learn More

Check out the PowerSync SDK for React Native on GitHub - your feedback and contributions are welcome!

To learn more about PowerSync, see the PowerSync docs.