Todo App Backend Template
React Native — Schema, API & AI Guide

Key Takeaways

Overview

A Todo app is one of the most common starting points for learning backend development. Under the hood it needs user registration, task CRUD, ownership-based access control, and optionally real-time sync and offline support.

The schema below defines two classes — _User (built-in) and Todo — connected by a Pointer. With the Parse React Native SDK (Back4app), you can interact with this backend directly from your JavaScript or TypeScript code — querying, creating, updating, and deleting objects, plus pinning for offline — without writing a custom API layer.

Why Build Your React Native Todo Backend with Back4app?

Back4app gives you a ready backend and the Parse React Native SDK so you can focus on UX and performance instead of REST wiring and auth.

• •Offline-first & sync: Pin Todo objects to the local datastore so the list works offline and syncs when the app is back online — ideal for mobile.
• •Components & hooks: Use the SDK with React hooks and context; keep state in sync with Parse queries and Live Queries for real-time updates.
• •Cross-platform, one backend: Same schema and APIs for iOS and Android; ideal for React Native teams using Expo or bare workflow.

Ideal for React Native developers using Expo or the bare workflow — one backend, both platforms.

Core Benefits

A production-ready Todo backend so you can ship faster and focus on your app.

Technical Stack

Everything powering this Todo app template at a glance.

ER Diagram

Entity-Relationship diagram for the React Native Todo app data model.

erDiagram
    _User {
        String objectId PK
        String username
        String email
        String password
        Date createdAt
        Date updatedAt
    }

    Todo {
        String objectId PK
        String title
        Boolean done
        Date dueDate
        Number priority
        Pointer owner FK
        Date createdAt
        Date updatedAt
    }

    _User ||--o{ Todo : "owns"

Integration Flow

Auth-to-CRUD sequence: how your React Native app talks to Back4app — login, then query and create todos.

sequenceDiagram
  participant User
  participant App as React Native App
  participant Back4app as Back4app Cloud

  User->>App: Login
  App->>Back4app: Parse.User.logIn(username, password)
  Back4app-->>App: Session token
  App-->>User: Logged in

  User->>App: Load todos
  App->>Back4app: new Parse.Query('Todo').find()
  Back4app-->>App: Array of Todo
  App-->>User: Show list

  User->>App: Create todo
  App->>Back4app: todo.save()
  Back4app-->>App: Todo (objectId)
  App-->>User: Updated list

Data Dictionary

Complete field reference for every class in the schema.

Security & Permissions

How ownership, ACLs, and class-level permissions protect data in this schema.

Schema (JSON)

Raw JSON schema definition — copy and use in your Back4app app or import via the API.

{
  "classes": [
    {
      "className": "Todo",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "title": {
          "type": "String",
          "required": true
        },
        "done": {
          "type": "Boolean",
          "required": false,
          "defaultValue": false
        },
        "dueDate": {
          "type": "Date",
          "required": false
        },
        "priority": {
          "type": "Number",
          "required": false,
          "defaultValue": 3
        },
        "owner": {
          "type": "Pointer",
          "targetClass": "_User",
          "required": false
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    },
    {
      "className": "_User",
      "fields": {
        "objectId": {
          "type": "String",
          "required": false
        },
        "username": {
          "type": "String",
          "required": true
        },
        "email": {
          "type": "String",
          "required": true
        },
        "password": {
          "type": "String",
          "required": true
        },
        "createdAt": {
          "type": "Date",
          "required": false
        },
        "updatedAt": {
          "type": "Date",
          "required": false
        }
      }
    }
  ]
}

API Playground

Try the REST and GraphQL endpoints for the Todo schema. Responses from the example data above — no Back4app account needed.

Uses the same Todo schema as this template.

Step-by-Step React Native Integration

Connect to your Back4app backend from a React Native app using the Parse React Native SDK.

1. Step 1: Install Parse React Native SDK

   Add the Parse React Native SDK (or react-native-parse) to your project with npm or yarn.

   JavaScript

   Copy

   1

   2

   npm install parse --save
   # or: yarn add parse

2. Step 2: Initialize Parse in your app

   Initialize the Parse SDK in your app entry (e.g. App.js or index.js) with your Application ID, server URL, and JavaScript key.

   JavaScript

   Copy

   1

   2

   3

   4

   5

   6

   import Parse from 'parse/react-native';
   
   Parse.setAsyncStorage(AsyncStorage);
   Parse.initialize('YOUR_APP_ID', 'YOUR_JS_KEY');
   Parse.serverURL = 'https://parseapi.back4app.com';
   

3. Step 3: Query all todos

   Create a Parse Query for the Todo class, add ascending order by priority, and call find() (or findWithCount()).

   JavaScript

   Copy

   1

   2

   3

   4

   5

   async function getTodos() {
     const query = new Parse.Query('Todo').ascending('priority');
     const results = await query.find();
     return results;
   }

4. Step 4: Create a todo

   Create a new Parse.Object('Todo'), set title, done, and priority, then call save().

   JavaScript

   Copy

   1

   2

   3

   4

   5

   6

   7

   8

   9

   async function createTodo(title, priority = 3) {
     const Todo = Parse.Object.extend('Todo');
     const todo = new Todo();
     todo.set('title', title);
     todo.set('done', false);
     todo.set('priority', priority);
     await todo.save();
     return todo;
   }

5. Step 5: Update and delete todos

   Fetch a Todo by objectId, set fields and call save() to update, or call destroy() to delete.

   JavaScript

   Copy

   1

   2

   3

   4

   5

   6

   7

   8

   9

   10

   11

   12

   async function markDone(objectId) {
     const query = new Parse.Query('Todo');
     const todo = await query.get(objectId);
     todo.set('done', true);
     await todo.save();
   }
   
   async function deleteTodo(objectId) {
     const query = new Parse.Query('Todo');
     const todo = await query.get(objectId);
     await todo.destroy();
   }

Full JavaScript/TypeScript Data Model

Copy a complete Todo type and helpers for type-safe serialization with the Parse SDK.

/** @typedef {{ objectId?: string, title: string, done: boolean, dueDate?: string, priority: number, owner?: { objectId: string }, createdAt?: string, updatedAt?: string }} Todo */

/**
 * @param {Parse.Object} obj
 * @returns {Todo}
 */
function todoFromParse(obj) {
  return {
    objectId: obj.id,
    title: obj.get('title'),
    done: obj.get('done') ?? false,
    dueDate: obj.get('dueDate')?.toISOString?.() ?? undefined,
    priority: obj.get('priority') ?? 3,
    owner: obj.get('owner') ? { objectId: obj.get('owner').id } : undefined,
    createdAt: obj.get('createdAt')?.toISOString?.() ?? undefined,
    updatedAt: obj.get('updatedAt')?.toISOString?.() ?? undefined,
  };
}

Frequently Asked Questions

Common questions about the Todo app backend template.