handsup-react

Building HandsUp: an OS real-time Q&A App using GraphQL and React

HandsUp 🙌

Make your events more interactive allowing attendees to participate by adding questions and voting using their phone or laptop.

Organisers and speakers can use it to answer questions and run Q&A or panels sessions.

Technology stack

This application integrates the following technologies:

• Auth0 to authenticate users using their social profiles (Google, Twitter)
• Apollo Client to communicate with GraphQL Server
• graphcool providing the GraphQL Server

Usage

Log in using your social account to be able to add new questions. In order to vote click on the heart button besides each question.

Development

If you have any questions feel free to ping me on @gerardsans.

Install

First, clone the repo via git:

$ git clone https://github.com/gsans/handsup-react.git

And then install dependencies:

$ cd handsup-react && yarn

Run

$ yarn run dev

Note: requires a node version >=6.x

Getting Started

In order to run this project you need to create the data model (schema) below using graphcool console online and setup Auth0.

graphcool - HandsUp Schema

This is the schema used

type Question @model {
  id: ID! @isUnique
  body: String!
  votes: [Vote!]! @relation(name: "VoteOnQuestion")
  user: User @relation(name: "UserOnQuestion")
  createdAt: DateTime!
  updatedAt: DateTime!
}

type Vote @model {
  id: ID! @isUnique
  question: Question @relation(name: "VoteOnQuestion")
  createdAt: DateTime!
  updatedAt: DateTime!
}

type User @model {
  auth0UserId: String
  id: ID! @isUnique
  name: String
  username: String
  pictureUrl: String
  questions: [Question!]! @relation(name: "UserOnQuestion")
  role: USER_ROLE
  createdAt: DateTime!
  updatedAt: DateTime!
}

enum USER_ROLE {
  Admin
  Organiser
  Moderator
  User
}

You can read the following blog as reference for an example as how you would create a schema from scratch

• Setting up a GraphQL backend in 5 minutes

Auth0 + graphcool setup

In order to use Auth0 you need to do few steps. You can find some assistance by reading the articles below.

• User Authentication with Auth0 for React and Apollo
• Auth0 - React Getting Started
• Connect your app to Google
• Connect your app to Twitter

License

MIT © Gerard Sans