Navigation

Building a Web-based To-Do App

Overview

What We’ll Build

In this tutorial, you will build an application that lets a user create a to-do list. The tutorial demonstrates how to integrate the following in your MongoDB Stitch applications:

  • Google and Facebook user authentication (OAuth)
  • MongoDB
  • Twilio, for SMS integration

The following image shows the application architecture:

Prerequisites

Before you begin, you will need:

Procedure

A. Create or Import a New Stitch App

Depending on how you would like to focus your work, you can either set up a new Stitch App manually, or you can import a pre-configured Stitch App. Importing the App allows you to focus on client-side development, while setting up the Stitch App manually provides guidance with the Stitch UI.

We have created a pre-configured MongoDB Stitch application that you can use with this tutorial. By using the the Command Line Interface (stitch-cli), you can customize this application and then import it.

All of the Stitch components needed to run the to-do app are available in a pre-configured application directory. This application includes the following:

  • A MongoDB Service that will connect to your Atlas cluster. Two MongoDB collections have been created and the rules configured.
  • Facebook OAuth integration
  • Google OAuth integration
  • A Twilio service with a webhook and rules.

Follow these steps to use the stitch-cli import command to create your new Stitch application:

  1. In a terminal or command prompt, navigate to the Todo_Web_App_With_Twilio directory within the stitch-examples/todo/import directory.

    cd stitch-examples/todo/import/Todo_Web_App_With_Twilio
    
  2. Login using stitch-cli by providing your Stitch username and Atlas User API key:

    stitch-cli login --username=cloud.username@email.com --api-key=my-api-key
    

    Note

    You can find (or create) your Atlas User API key by clicking on your name in the upper-right and choosing Account. For more information, see https://docs.atlas.mongodb.com/configure-api-access/.

  3. Import the application directory. From within the todo-initial directory, run the following command:

    stitch-cli import
    

    stitch-cli will ask if you want to create a new application. Respond affirmatively, then provide your Atlas Group ID and a descriptive name of your choosing for the application.

    Note

    Atlas Group ID is synonymous with Project ID, and is listed on the Settings page of the Atlas UI.

  4. Follow the procedure on the Facebook Authentication Provider reference page to create a new Facebook app and configure the Facebook authentication provider. Use the following values:

    Property Value
    Redirect URIs
    http://localhost:8001/
    Important: Enter the URI exactly, including the trailing slash /.
  5. Follow the procedure on the Google Authentication Provider reference page to create a new GCP project and configure the Google authentication provider. Use the following values:

    Property Value
    Redirect URIs
    http://localhost:8001/
    Important: Enter the URI exactly, including the trailing slash /.

You are now ready to download the sample to-do application and try it out!

You also have the option to create your Stitch application manually. To do so, follow these steps:

  1. Create the initial Stitch App.

    Follow the steps in the Creating a Stitch App tutorial, using the following values:

    Step Property Value
    C.2 Application Name ToDo_App
  2. Add a MongodDB Cluster.

    1. Click on mongodb-atlas under Atlas Clusters in the left navigation pane.

    2. Click the + Add Collection button.

    3. In the Add New Collection dialog, provide the following values:

      Property Value
      Database Name todo
      Collection Name items
      Select a Template Users can only read and write their own data
      Field Name For User ID owner_id

      Stitch creates a new rule (a combination of a role and permissions) based on the template. This rule allows an authenticated user to only read and write their own documents and to insert new documents.

    4. Click Add Collection.

  3. Set up the Facebook Auth Provider.

    Follow the procedure on the Facebook Authentication Provider reference page to create a new Facebook app and configure the Facebook authentication provider. Use the following values:

    Property Value
    Redirect URIs
    http://localhost:8001/
    Important: Enter the URI exactly, including the trailing slash /.
  4. Set up the Google Auth Provider.

    Follow the procedure on the Google Authentication Provider reference page to create a new GCP project and configure the Google authentication provider. Use the following values:

    Property Value
    Redirect URIs
    http://localhost:8001/
    Important: Enter the URI exactly, including the trailing slash /.

You are now ready to download the sample to-do application and try it out!

B. Set up Your Web Application

To use your new Stitch App, you need to connect to it from a client.

  1. Download or clone the MongoDB Stitch examples repository. The source code for this application can be found in todo directory.

  2. On line 14 of the /todo/src/index.js file, find '<your-app-id>' and change it to the App ID of your Stitch App.

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    import React from "react";
    import { render } from "react-dom";
    import { Route } from "react-router";
    import { BrowserRouter, Link } from "react-router-dom";
    import {
       Stitch,
       RemoteMongoClient,
       GoogleRedirectCredential,
       FacebookRedirectCredential
    } from "mongodb-stitch-browser-sdk";
    
    require("../static/todo.scss");
    
    let appId = "<your-app-id>";
    ...
    

    Note

    To find your App ID, in the Stitch console, go to the Clients page. Click Copy App ID to copy your application ID.

  3. Now install the application dependencies by running the following command from the todo directory:

    npm install
    
  4. To start the application, run the following command from the todo directory:

    npm start
    
  5. To access your new to-do app, open a browser to http://localhost:8001/.

  6. In the web app, you can do the following:

    1. Sign in with Google or Facebook credentials, depending on which providers you configured during this procedure.
    2. Use the text box to add items to the list.
    3. Check a box to mark an item as complete.

    If you have marked items as complete, you can click on the clean up button to delete completed items.