Skip to content

A simple survey app that records users answers and ratings

Notifications You must be signed in to change notification settings

Marigameo/FreshSurvey

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

26 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

FreshSurvey

A simple survey app that records users answers and ratings

You can find the working demo at https://marigameo.github.io/FreshSurvey/

Features implemented

  1. On opening the site, the use can answer questions one by one.
  2. The user should be able to move from one screen to the other and back.
  3. On the final question, if the user clicks on submit, they are shown a confirmation screen.
  4. The response is sent to an API via POST call. Mocked to this service https://mockapi.io/
  5. On refreshes during a form fillup, user will be redirected to the last question he has seen with all previous answers persisted.
  6. Once a form is submitted successfully, the state is reset and if the page is refreshed, it goes back to the home page.

Extra addon feature:

  • A small analytics dashboards to display the stats of survey in charts
  • Used chart JS
  • Error handling - implemented custom disappearing snackbar component for both success & error scenarios for better UX

Steps to clone and run the application

Tech & API's

  • Vanilla JS, HTML5, CSS3
  • Questions are loaded from a self hosted JSON payload at github pages
  • Local storage to preserve user survey inputs while form manipulation
  • Session cookie to keep track of active session & route to tabs on refresh
  • Mock api to post survey form payload - Mockapi.io
  • Hosted on github pages

Unit tests

  • No testing frameworks like jest /mocha is being used
  • Simple vanilla JS utility/framework to unit test common util methods & component creation utils
  • Not much validations are involved here - as the survey app we're not restricting users to mandatory fill all the fields & most fields would be pre-filled (with some default active options)

How to run the tests?

  • Just open the test.html file in chrome browser (preferrably)/local live server (if installed)
  • And, you can see the test running & results in browser console

Note: Few negative test case validations are commented. Feel free to uncomment & test for wrong inputs

App Screenshosts

screen1

screen2

screen3

screen4

screen5

screen6

backend mock api data

Addon - Dashboard UI

backend mock api data

Contact

Find more projects at my Portfolio

About

A simple survey app that records users answers and ratings

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published