An offline-first React Native application built with RxDB and SQLite, featuring seamless CouchDB synchronization. This app allows users to manage businesses and articles with full offline capabilities and automatic synchronization when back online.
Click the image above to watch the demo video on YouTube
- Offline-First Architecture: Work seamlessly without an internet connection
- Real-time Sync: Automatic data synchronization when online
- CRUD Operations: Full Create, Read, Update, and Delete functionality
- Multi-Platform: Works on both Android and iOS
- Persistent Storage: SQLite for reliable local data storage
- Reactive Programming: Built with RxDB for responsive UI updates
- Node.js (v14 or later)
- npm or Yarn
- React Native development environment
- Android Studio / Xcode (for mobile development)
- Docker (for local CouchDB instance)
-
Clone the repository
git clone <repository-url> cd crudTask
-
Install dependencies
npm install # or yarn
-
Set up environment variables
cp src/env.example .env
Update the
.env
file with your CouchDB credentials.
-
Start Metro bundler
npm start # or yarn start
-
Run on Android
npm run android # or yarn android
-
Run on iOS
cd ios && pod install && cd .. npm run ios # or yarn ios
-
Start CouchDB using Docker
docker run -d --name couchdb -p 5984:5984 \ -e COUCHDB_USER=admin \ -e COUCHDB_PASSWORD=password \ couchdb:latest
-
Configure CouchDB
- Access Fauxton UI at http://localhost:5984/_utils
- Log in with the credentials set above (admin/password by default)
- Enable CORS in the configuration
- Create the required databases:
businesses
andarticles
cd android && ./gradlew assembleRelease
# The APK will be available at: android/app/build/outputs/apk/release/app-release.apk
You can download the latest stable APK from our GitHub Releases page:
- Download the APK file from the link above
- On your Android device, go to Settings > Security
- Enable "Unknown sources" to allow installation of apps from unknown sources
- Open the downloaded APK file and tap "Install"
- Build a release APK:
cd android && ./gradlew assembleRelease
- Create a new GitHub Release and upload the APK file from:
android/app/build/outputs/apk/release/app-release.apk
- Tag the release with a version number (e.g., v1.0.0)
- The APK will then be available for download at:
https://github.com/SuhelIndiIt/crud-task-localDB/releases/latest/download/app-release.apk
- Open the Xcode workspace:
cd ios && open crudTask.xcworkspace
- Select Product > Archive in Xcode
- The app automatically syncs with the CouchDB server when online
- All changes made offline are queued and synced when connectivity is restored
- Conflict resolution is handled automatically by CouchDB
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature
) - Commit your changes (
git commit -m 'Add some AmazingFeature'
) - Push to the branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details
If everything is set up correctly, you should see your new app running in the Android Emulator, iOS Simulator, or your connected device.
This is one way to run your app — you can also build it directly from Android Studio or Xcode.
## Step 3: Modify your app
Now that you have successfully run the app, let's make changes!
Open `App.tsx` in your text editor of choice and make some changes. When you save, your app will automatically update and reflect these changes — this is powered by [Fast Refresh](https://reactnative.dev/docs/fast-refresh).
When you want to forcefully reload, for example to reset the state of your app, you can perform a full reload:
- **Android**: Press the <kbd>R</kbd> key twice or select **"Reload"** from the **Dev Menu**, accessed via <kbd>Ctrl</kbd> + <kbd>M</kbd> (Windows/Linux) or <kbd>Cmd ⌘</kbd> + <kbd>M</kbd> (macOS).
- **iOS**: Press <kbd>R</kbd> in iOS Simulator.
## Congratulations! :tada:
You've successfully run and modified your React Native App. :partying_face:
### Now what?
- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps).
- If you're curious to learn more about React Native, check out the [docs](https://reactnative.dev/docs/getting-started).
# Troubleshooting
If you're having issues getting the above steps to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page.
# Learn More
To learn more about React Native, take a look at the following resources:
- [React Native Website](https://reactnative.dev) - learn more about React Native.
- [Getting Started](https://reactnative.dev/docs/environment-setup) - an **overview** of React Native and how setup your environment.
- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**.
- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts.
- [`@facebook/react-native`](https://github.com/facebook/react-native) - the Open Source; GitHub **repository** for React Native.