open-survey: Survey collection tool

Introduction

open-survey is a simple survey collection tool that allows the user to create dynamic forms which is mostly used by companies, researchers or Individual to capture a given set of data without creating website or application.

Inspiration

I work on EMR(Electronic medical record) software as full time job in a hospital, the hospital run multiple researches in parallel, one of the methods most researchers used is to collect survey.

Most of the researchers I encounter use paper base approach to fill the form, those who afford hire someone to create application for that specific survey.

There are already existing tools similar to this, most of them are paid and if it is free, the tool is most probably have a limited features.

Tech Stack

open-survey is build with Vuejs front end and Laravel with mysql backend and deployed to linode individually. The following list cointains a detailed list:

Vue
Vuex
Tailwind
Vuetify
Laravel Web API
mysql
linode

How does it work?

Glad you ask, there is only two tables, one for the survey and the other for collected survey answers, a survey form contains two main components, the first is Survey Information such as title, description, expire date and the second one is Survey Questions which contain the dynamic form template.

I stored Survey Questions as JSON inside the Survey table, from the frontend side I parse and stringify this column to a given form fields structure.

Each form field contains data type attribute which is used when iterating through form fields to render. The basic idea here is

for each form field
      if data type is {data type}
          render this component

To collect the survey, there is another table which contains the survey id and survey answer column, the survey answer column stores JSON format of the answer. Answer is basically form field with value attribute.

Features

Authentications

The application has both register and login. This allow users to manage their own surveys, each individual will only see their survey editor, collect survey will not require login.

Create Survey

create survey.png A user can create survey by providing cover photo, title, description and expire date.

Create Survey Questions

dynamic form editor.png

open-survey contains a custom built dynamic form builder, current supported data types include Textbox, Text Area, Checkbox, Radio Button, Checkbox list, Select, Time, Date Image Display and Raw Text.

Building dynamic form is easy, select data type, fill data type specific attributes and click add, the form will show the newly added form field. You can also edit or delete each individual form field.

When finishing the edit, click save to update. Each actions such as add, edit and delete form filed does not interact with the server, it is only executed locally.

Collect Survey

collect survey.png

A user with a link can fill out the survey

Deployment

The project is deployed to linode on ubuntu 20.04 server, one for the frontend and the other for backend/database, there were other options such as to deploy database on its own, linode has flexible option to deploy in a given way.

For the backend I deployed Larvel on apache server with mysql as a database

For Front End I deployed Vuejs on Nginx

Challenges

Storing dynamic data was a big challenge, I have tried multiple other ways to store form fields before this one.

Even though creating linode(server) on linode is straight forward I don't have much experience in deploying to linux server, I researched multiple YouTube videos and blog posts to get this one working.

This is my first blogging experience as well as my first open source project that I published.

Limitations

After the form/survey is collected and stored, the user doesn't have a way to view the data yet, they could view it on mysql server but that wouldn't be convenient.

Conclusion

This has been a rewarding experience, thanks for Hashnode and Linode for putting together this hackathon, I have learned a lot.

since open-survey is an open-source project any one who can contribute by making pull request, I will be updating the project to add more features in the future, this will not be the end.

Thanks for reading my first blog post.

Paul Reed Box