Introducing Conference App in a Box

Deploy a themeable, customizable, full stack and cross-platform mobile app for your next event in minutes.

🛠 Built with React Native, GraphQL, AWS Amplify, & AWS AppSync.

This app is open source. View the repo here.

Last Week at Chain React I gave a talk titled "Hooking Up A Conference In Real-Time With GraphQL".

In the presentation I talked about the React Native Amazon Conference that was held in January 2019 and how we took some ideas from their conference app and applied them to the Chain React conference app.

The main feature we wanted to add was real-time chat so that attendees could discuss each talk and even ask the speaker questions that could then later be answered by the speaker.

During the presentation I showed how we took the 2018 version of the Chain React conference app and updated it to use a GraphQL backend that handled comments for each talk. I worked with Robin Heinze from Infinite Red over the course of a couple of days to do this.

I also showed how we handled identity and abuse by adding the ability to report comments and building an admin panel that allows moderators to monitor reported comments, block devices, and delete reported comments.

While building the app, I had the idea to make the functionality re-usable because I know there are so many events and conferences popping up. I thought why not try to create something that everyone could use?

The challenge: The problem with something like this is that building out everything that encompasses the back end (authentication, database, api) is usually not easily reproducible.

The solution: AWS Amplify allows you to deploy entire backends using a base configuration. For example if I have an app that has a combination of authentication, databases, APIs and serverless functions and I wanted to reproduce this back end across multiple apps or share it with others, the only thing I would need to do would be to share the amplify folder and anyone could get up and running with the same back end with just a couple of commands on their terminal.

I decided to build a themeable conference & event app that was easily customizable and could be deployed in this way using Amplify.

Deploying the app

The code for the app is located here. Before deploying the app, I'd also take a look at the next section (How it works) so you know how everything works.

To deploy the app, you can follow these steps:

# 1. Clone the repo & install the dependencies

~ git clone https://github.com/dabit3/conference-app-in-a-box.git

~ cd conference-app-in-a-box

~ npm install

# 2. Initialize and deploy the Amplify project

~ amplify init

? Enter a name for the environment: dev (or whatever you would like to call this env)
? Choose your default editor: <YOUR_EDITOR_OF_CHOICE>
? Do you want to use an AWS profile? Y

~ amplify push

? Are you sure you want to continue? Y
? Do you want to generate code for your newly created GraphQL API? N

# We already have the GraphQL code generated for this project, so generating it here is not necessary.

# 3. Start the app

~ react-native run-ios

# or

~ react-native run-android

Now that the back end has been deployed you can open the app, create an account and sign in.

Populating the database

Next go into the AppSync console to interact with the API by running the following command:

~ amplify console api

From the AppSync console, click on Queries to open the GraphiQL editor. When prompted to "Login with User Pools", you can login with your new username and use the aws_user_pools_web_client_id located in aws-exports.js for the ClientId.

Creating mutations

Create a new talk with the following mutation:

mutation createTalk {
  createTalk(input: {
    name: "Performance In React Native",
    summary: "In this talk, we will look at the various tips and tricks for taking full advantage of React Native and using the performance attributes of the new architecture.",
    speakerName: "Ram Narasimhan",
    speakerBio: "Software Engineer at Facebook",
    time: "9:00 AM - 9:30 AM",
    timeStamp: "1573491600",
    date: "November 10",
    location: "Armory",
    speakerAvatar: "https://pbs.twimg.com/profile_images/875450414161772544/UjefWmmL_400x400.jpg"
  }) {
    id name speakerBio speakerName speakerAvatar location date time timeStamp
  }
}

Querying for data

When you reload the app, it should list this talk when launched.

To query for all talks in the AppSync console, you can run the following query:

query listTalks {
  listTalks {
    items {
      id
      name
      summary
      speakerName
      speakerBio
      time
      timeStamp
      date
      location
      speakerAvatar
    }
  }
}

How it works

The code for the app is located here.

In the project, you'll notice a folder named amplify. This folder contains the back end for the app that can be redeployed in anyone's account. In the amplify folder you'll see a backend folder. In this folder you'll see the configuration for the two main features:

1. Authentication service (powered by Amazon Cognito)
2. GraphQL API (built with AWS AppSync)

In the backend/api folder you'll see the GraphQL API configuration as well as the base GraphQL Schema.

This is the base GraphQL Schema. You'll see that the base schema looks like this:

type Talk @model {
  id: ID!
  name: String!
  speakerName: String!
  speakerBio: String!
  time: String
  timeStamp: String
  date: String
  location: String
  summary: String!
  twitter: String
  github: String
  speakerAvatar: String
  comments: [Comment] @connection(name: "TalkComments")
}

type Comment @model {
  id: ID!
  talkId: ID
  talk: Talk @connection(sortField: "createdAt", name: "TalkComments", keyField: "talkId")
  message: String
  createdAt: String
  createdBy: String
  deviceId: ID
}

type Report @model {
    id: ID!
    commentId: ID!
    comment: String!
    talkTitle: String!
    deviceId: ID
}

type ModelCommentConnection {
    items: [Comment]
    nextToken: String
}

type Query {
  listCommentsByTalkId(talkId: ID!): ModelCommentConnection
}

Not that the Report feature is not implemented in the app, but it is there so if you wanted to add a report feature and the admin dashboard you wouldn't have to configure anything else.

If you've never worked with Amplify before you may not be aware of the @model and @connection directives. These are part of the GraphQL Transform library of the Amplify CLI.

@model - Decorate any base type with this directive to get CRUD and list query and mutation definitions, a DynamoDB table, and resolvers created for the GraphQL operations.

@connection - Use this directive to specify relationships between fields (one to many, many to many).

Customizing the GraphQL schema

This schema can be edited. If your event needs additional fields, you can update the backend by doing the following:

1. Update the schema (located at amplify/backend/api/rnconfinabox/schema.graphql).

2. Redeploy the back end
   

~ amplify push

If you or anyone you know needs help getting up and running with an app for your next event using this project, reach out to me on Twitter, I'd be happy to help!

My Name is Nader Dabit. I am a Developer Advocate at Amazon Web Services working with projects like AWS AppSync and AWS Amplify. I specialize in cross-platform & cloud-enabled application development.