hub /  jaison /  react-form
5 min(s)
14 Pull(s)
Icon

A react questionnaire app with features like authentication and auto save.

react
javascript
form
questionnaire
material-ui
react-router
Detailed description

react-form: A react form build on Hasura

This Hasura project consists of a react app which consists of the following features: 1. An authentication screen where a user can login or register 2. Post registration, the user is redirected to a questionnaire. 3. The questionnaire auto saves the users progress every 15 seconds. 4. The database schema to store questions and answers from users.

Pre-requisites

  • Before you begin, ensure that you have the latest version of the hasura cli installed. You can find instructions to download the hasura cli from here

  • Ensure that you have Node installed on your computer, do this by running node-v in the terminal. If you do not have Node installed you can get it from https://nodejs.org

Preview

  • Authentication screen

Form Auth

  • Questionnaire

Questions

Quickstart

To get this app up and running quickly:

Step 1: Get the project using the hasura cli tool

$ hasura quickstart jaisontj/react-questionnaire
$ cd react-questionnaire

The above command does the following: 1. Creates a new folder in the current working directory called react-questionnaire 2. Creates a new trial hasura cluster for you and sets that cluster as the default cluster for this project 3. Initializes react-questionnaire as a git repository and adds the necessary git remotes.

Step 2: Get cluster information

Every hasura project is run on a Hasura cluster. To get details about the cluster this project is running on:

$ hasura cluster status

This will give you your cluster status like so

INFO Status:                                      
Cluster Name:       excise98
Cluster Alias:      hasura
Kube Context:       excise98
Platform Version:   v0.15.9
Cluster State:      Synced

Keep a note of your cluster name. Alternatively, you can also go to your hasura dashboard and see the clusters you have.

Step 3: Deploying on a hasura cluster

  1. Open the package.json file at microservice/www/app/
  2. Find the key scripts and then replace cluster-name with the name of your cluster (in this case, excise98) in the build & start key.

To deploy your app:

$ git add .
$ git commit -m "Initial Commit"
$ git push hasura master

Once the above commands are executed successfully, head over to https://www.cluster-name.hasura-app.io (in this case https://www.excise98.hasura-app.io) to view your react app.

Project Structure

  • The migrations/ directory consists of the migrations for the database schema and also some dummy data to be inserted into the table.
  • The following tables have been added
    • questions - which stores the questions
    • question_type - The different types of questions
    • options - Some questions have answers as a list of options. This table stores those options
    • user_answers - This table stores the users answers
  • The microservices directory will consist of a folder called www which has the code for the react app as well as the configuration required to deploy it.

Data modeling

**questions**

column    | type
--------- | ----
id        | integer NOT NULL *primary key*
title     | text NOT NULL
sub_title | text NOT NULL
type      | text NOT NULL

**question_type**

column    | type
--------- | ----
name      | text NOT NULL *primary key*

**options**

column      | type
----------- | ----
id          | integer NOT NULL *primary key*
question_id | text NOT NULL
content     | text NOT NULL

**user_answers**

column      | type
----------- | ----
user_id     | integer NOT NULL *primary key*
question_id | integer NOT NULL *primary key*
answer      | text

The questions table has a one to many relationship with the options table. Also, the answers column in the user_answers table stores the answers as a JSON array of the following type:

[
  {
    "option_id": <ID> (can be null in case the answer is a text),
    value: <value of the option or text entered>
  },
  ....
]

Author & License

Source: Not updated
OSS license: MIT License

Comments