Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/full-stack-serverless/conference-app-in-a-box

Full stack & cross platform app customizable & themeable for any event or conference.
https://github.com/full-stack-serverless/conference-app-in-a-box

aws aws-amplify cross-platform graphql react react-native serverless

Last synced: 3 months ago
JSON representation

Full stack & cross platform app customizable & themeable for any event or conference.

Host: GitHub
URL: https://github.com/full-stack-serverless/conference-app-in-a-box
Owner: full-stack-serverless
License: mit
Created: 2019-07-17T02:23:15.000Z (almost 5 years ago)
Default Branch: master
Last Pushed: 2023-01-04T21:55:19.000Z (over 1 year ago)
Last Synced: 2024-02-18T09:44:44.713Z (3 months ago)
Topics: aws, aws-amplify, cross-platform, graphql, react, react-native, serverless
Language: JavaScript
Homepage:
Size: 20.6 MB
Stars: 738
Watchers: 27
Forks: 141
Open Issues: 18
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome-aws-amplify - Conference App in a Box
awesome-stars - conference-app-in-a-box - stack-serverless | 737 | (JavaScript)
awesome-stars - conference-app-in-a-box - stack-serverless | 737 | (JavaScript)

README

# Conference App in a Box

This is the React Native CLI version. To view the Expo version, click [here](https://github.com/dabit3/conference-app-in-a-box/tree/expo).

> This repo goes along with my Dev.to post titled ["Introducing Conference App in a Box"](https://dev.to/dabit3/introducing-conference-app-in-a-box-kgj)

For a full walkthrough of this project and how to deploy and theme it, check out [this video](https://www.youtube.com/watch?v=9ysiXDdmc9c).

#### Deploy a full stack & cross-platform mobile app for your next event in minutes.

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

> Follow me on [Twitter at @dabit3](https://twitter.com/dabit3) to keep up with my future projects as well as updates and new features added to this one! If you need any help launching this app, please reach out to me I'd be happy to help.

### Features

⚡️ Real-time chat
👾 Themeable & customizable
👮‍♂️ Authentication & Profile view
🔥 Serverless back end
🚀 GraphQL
💻 Deploy back end in minutes

![](./src/assets/confapps1.jpg)
![](./src/assets/confapps2.jpg)
![](./src/assets/confapps3.jpg)

## Deploy the back end and run the app

1. Clone the repo & install the dependencies

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

```sh
~ amplify init

? Enter a name for the environment: dev (or whatever you would like to call this env)
? Choose your default editor:
? 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

```sh
~ react-native run-ios

# or

~ react-native run-android
```

## To populate the database with your conference speakers

1. Sign up in the app after following the previous steps

2. Open the AppSync console:

```sh
~ amplify console api
```

3. 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.

4. Create a new talk with the following GraphQL 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
}
}
```

5. Query for all talks with the following GraphQL query:

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

6. Update a talk with the following GraphQL mutation:

```graphql
mutation updateTalk {
updateTalk(input: {
id: ""
name: "Performance in React Native & GraphQL"
}) {
id name
}
}
```

7. Delete a talk with the following GraphQL mutation:

```graphql
mutation deleteTalk {
deleteTalk(input: {
id: ""
}) {
id
}
}
```

## To customize with your theme and logo

1. Open __src/theme.js__ and replace the _highlight_ & _primary_ colors.

2. Replace __src/assets/logo.jpg__ with your logo.

## To customize 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
```