/react-form-demo

Multistage React form for a developer test

Primary LanguageJavaScript

React form demo

This is a simple 2-step mobile survey form for a developer test at Mubaloo.

You can view a static version on GitHub Pages. Note that the form submission has been rigged to always "succeed" even though there is no server.

Setup

git clone https://github.com/davidxmoody/react-form-demo.git
cd react-form-demo
npm i
npm start
# Go to http://localhost:8888

Tech used

  • React
  • create-react-app for building and hot reloading in dev (using Webpack under the hood)
  • Sass
  • Simple Node.js (v6+) Express backend

Weaknesses

  • The styling is very plain, I decided to focus on functionality, animation and usability instead of prettiness
  • No real validation, all fields are optional
  • Sass compilation is done as a separate step which litters gitignored .css files around (could be done with a webpack sass loader instead)
  • There is no "back" button to go back to the first stage of the form
  • Not tested in any browsers other than Chrome and Chrome for Android
  • Keyboard controls aren't great (pressing enter does nothing and you can accidentally tab into fields on the next step and break it)
  • I also just noticed that the "I read the instructions" comment gets removed when the HTML is minified (it's in the source)