React Native & MongoDB Stitch — Building a CRUD Application Without a Server

Dan Halperin
Jun 7 · 5 min read

(5–10 min)

(5–10 min)

(20–30 min)

Last week I was asked to build a simple task manager application that would manage several departments’ tasks in my organization. When researching the simplest way to integrate a back end in React Native, I stumbled upon the perfect alternative: ! Stitch provides a back end as a service, removing the need for a server. In this three part guide we will be building a fully functional cross platform CRUD task manager application, using React Native & MongoDB Stitch. No Node.js, no back end, no server. The best part? We won’t be spending a penny. Let’s jump right in.


PART ONE — Setting up MongoDB Stitch

We will be setting up a free MongoDB Cluster on the cloud using , then initiating our Stitch App. These seven easy steps should take no more than 5 or 10 minutes.

Enter your stitch application dashboard and navigate to Get Started > Turn on Authentication > Anonymous Authentication

  • Step 5: Create a collection:

Database Name: taskmanager
Collection Name: tasks

Database Name: taskmanager
Collection Name: tasks
Template: No template

Step 7: Edit Permissions (this is required):

Under the Permissions tab simply check Read and Write and press save.

Keep an eye on your APP ID, we’ll need it later.

Thats it! Now we can move on to Part 2: Initiating our Expo app.


PART TWO — Initiating an Expo App

streamlines the process of creating React Native applications, and provides easy methods to test and share your project.

// install expo clinpm install expo-cli --global// initiate expo project using tabs templateexpo init taskmanager // (IMPORTANT: select tabs template)
cd taskmanager
npm i
expo start

If you get an error regarding expo vector icons, run the following:
expo install @expo/vector-icons expo-asset expo-font

Scan the barcode on your iPhone or Android device to run the application.

This is the generated template:

This template comes ready with tabs and React Navigation set up for us.

Thats it! We are ready to move on to Part 3: Building a task manager.


PART THREE— Building a Task Manager

Let’s begin by installing the following modules:

npm i mongodb-stitch-react-native-sdk react-native-confetti react-native-swipeout moment

Find App.js in your root directory, and replace the contents with the following:

REPLACE “YOUR APP ID” WITH YOUR STITCH APP ID

Replace “YOUR APP ID” with your Stitch APP ID, which can be found on your Stitch App dashboard:

So far we have initialized the default app client and logged the user in with an anonymous credential. We are now ready to begin interacting with the database.

Lets create three screens for the user to interact with:

Screen 1: Create new tasks
Screen 2: View and modify current tasks
Screen 3: View and archive completed tasks

Screen 1 (Create new tasks):

Replace screens/HomeScreen.js contents with the following:

Here we are inserting a new task to our collection, settings the task status to “new”, and setting the “description” of the task to the content of the text input. When we want to mark the task “complete” in the following section, we simply update the task’s status from “new” to “complete”. If the user submits an empty task, we do not send the task to the database. Otherwise, we start a confetti party as a confirmation that the task was submitted.

Screen 2 (View and modify current tasks):

Replace screens/LinksScreen.js contents with the following:

On swipe left and swipe right we query the database for the task with the matching ID and either delete the document or update “status”. The user can swipe down to fetch the database contents.

We can now create tasks and mark them complete. Now we want to be able to view our completed tasks and “archive” them.

Screen 3 (View and archive completed tasks):

Replace screens/SettingsScreen.js contents with the following:

Here we just query the database for all tasks with “completed” status, and allow the user to dismiss the task by setting the status to “archived”.

We have all four functions integrated! Create, Read, Update, and Delete.

Let’s complete the final step of designing that bottom navigation bar.

Edit the contents of navigation/MainTabNavigator.js:

The final product:

Create, Read, Update, Delete

You can download the full project on my .

“How can I take this app to the next level?”:

  • Integrate authentication and route different task lists to different users or departments.
  • Attach images or files to a task.
  • Write your ideas in the comments!

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Dan Halperin

Written by

React Developer living in Israel

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co