Or how we built and deployed a custom React app in just two hours using Hasura
The Rajasthan Hackathon 2017, organised by the Government of Rajasthan in association with Hasura, is an attempt to bring together developers and designers to create innovative solutions that can later be incubated and brought to fruition by the Department of Information Technology & Communication, Government of Rajasthan.
The Rajasthan government was serious about incubating the best applicants, which meant there was a lot of information that the form asked for. Some kind of mechanism to save forms and continue from where you left off was necessary. Unfortunately, neither Typeform nor Google Forms supported saving answers. We also realised this problem very late, and had just a few hours before the application form and website went live. We decided to use Hasura to build a custom solution quickly.
What we wanted from our app
- An authentication screen where a user can login or register.
- Post registration, redirecting the user to our questionnaire.
- Auto saving the questionnaire every 15 seconds (so that progress is tracked, while not taxing the user with remembering to click another button).
- Some way to look at the data afterwards, to sort through the applications.
How we build this in just two hours using Hasura
The app uses 3 APIs at the backend:
- An API for login/registration, which used Hasura’s auth APIs.
- An API to fetch questions, response type (checkbox, multi-line, etc) and response options (if needed — for example, for a checkbox type question), which used Hasura’s data APIs.
- An API that runs periodically for autosaving, which used Hasura’s bulk query feature.
Once we created the 4 table schema for this app, Hasura made all the APIs we needed instantly available. It then took us about 2 hours to create the two React screens required for the web app, and a few minutes to integrate with the APIs.
And voila! We were done.
We even had extra time to spruce up the UI a bit (Press enter on any multi-line answer to see the result).
You can check out our handiwork here, or by clicking on start application on the Rajasthan Hackathon 2017 page. ( Oh and do apply for the hackathon! Over 30 lakhs worth of prizes to be won, including government contracts, iPads, mobile phones and more).
The app uses Postgres at the backend for the database. For getting information about the participants once they have started their applications, we simply run queries or create views on the database — For example, we have a view that tells us the current completion status for each participant.
How you can make use of this project
We have since published this project to Hasura hub.
Hub is where you will find community projects that you can extend and modify, to give you a headstart on developing your application. These projects range from a working slack bot to a react + nodejs quickstart to a sample ecommerce schema to sample use case modules such as this one.
In case you wish to create your own questionnaire, please follow the instructions on the React form hub page to create your own instance of the project, modify the questions as required, deploy it, and then link to it from your website. Simple!
While products such as Google Form or Typeform will cover a majority of use cases, there are still cases where the ability to save progress and continue later is important. This is especially true for long application forms, such as those for incubators, B-plan competitions, events, etc. You can use this Hasura hub project for these cases.
You can even extend the project further by making the form automatically shutdown after a deadline, adding a submit button (currently the form autosaves), or sprucing up the UI. In case you do extend the project, do publish the result on Hasura hub, so everyone benefits from your work.