Building HandsUp: an OS real-time Q&A App using GraphQL and React
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.
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
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.
If you have any questions feel free to ping me on @gerardsans.
First, clone the repo via git:
$ git clone https://github.com/gsans/handsup-react.git
And then install dependencies:
$ cd handsup-react && yarn
$ yarn run dev
Note: requires a node version >=6.x
In order to run this project you need to create the data model (schema) below using graphcool console online and setup Auth0.
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
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
MIT © Gerard Sans