Introducing Conference App in a Box
Tags: react, reactnative, serverless, graphql
Published: 2019-07-18 12:37:07

---
title: Introducing Conference App in a Box
published: true
description: Deploy a serverless, full-stack, cross-platform mobile app for your next event in minutes.
tags: react, react-native, serverless, graphql
---

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

🛠 Built with React Native, GraphQL, [AWS Amplify](https://aws-amplify.github.io/), & [AWS AppSync](https://aws.amazon.com/appsync/).

> This app is open source. View the repo [here](https://github.com/dabit3/conference-app-in-a-box).

![](https://thepracticaldev.s3.amazonaws.com/i/vs7xw4pld1iz54c7ga2e.jpg)

Last Week at [Chain React](https://infinite.red/ChainReactConf) I gave a talk titled "Hooking Up A Conference In Real-Time With GraphQL".

{% twitter 1150039743981223936 %}

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.

![](https://thepracticaldev.s3.amazonaws.com/i/j5fm6qsm0uai4rb1dsz9.JPG)

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.

![](https://thepracticaldev.s3.amazonaws.com/i/wjuuovz7ugj5euk5o4rg.jpg)

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](https://twitter.com/robin_heinze?lang=en) from [Infinite Red](https://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](https://github.com/dabit3/chainreact-admins) 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.

![](https://thepracticaldev.s3.amazonaws.com/i/iy2fcckj0mm66yv2uc8p.jpg)
![](https://thepracticaldev.s3.amazonaws.com/i/u6aq7jknhtlqnii178hg.jpg)
![](https://thepracticaldev.s3.amazonaws.com/i/z3lqvnct3cqxj4kv2oa5.jpg)

## Deploying the app

> The code for the app is located [here](https://github.com/dabit3/conference-app-in-a-box). 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:


```sh
# 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:

```sh
~ 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:

```graphql
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:

```graphql
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](https://github.com/dabit3/conference-app-in-a-box).

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](https://github.com/dabit3/conference-app-in-a-box/blob/master/amplify/backend/api/rnconfinabox/schema.graphql).

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

```graphql
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](https://aws-amplify.github.io/docs/cli-toolchain/graphql?sdk=js) 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

```sh
~ 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](https://twitter.com/dabit3/), I'd be happy to help!

> *My Name is [Nader Dabit](https://twitter.com/dabit3). I am a Developer Advocate at Amazon Web Services working with projects like [AWS AppSync](https://aws.amazon.com/appsync/) and [AWS Amplify](https://aws-amplify.github.io/). I specialize in cross-platform & cloud-enabled application development.*