Demo app

Getting started

git clone ...simplesurance.git
cd simplesurance
npm install
npm start

The Task

To assess your skills we kindly ask you to implement a ReactJS web app that will load a list of questions (JSON provided) and provide the functionality for the user to reply to these questions and submit them all, once completed.

Notes

• Mock data provided (JSON)
• You can include the provided JSON (data.json) in your project and load it from there.
• Only 1 question should be displayed at a time.
• Please provide the appropriate input control for the reply, depending on the type property of the question’s reply.
• Once a user provides a reply (mandatory) to a question, navigate to the next question based on the next property of the question.
• If no input is provided or the input does not match the type property of that question, do not allow the user to proceed to the next question until they have provided a valid answer.
• You can assume that the first question in the array of questions is the first question that should be displayed.
• The final question will contain null as the value of the next property and this means that all the answered questions should now be submitted.
• No real submission to any backend takes place - simply display all the questions and replies, which the user answered, on a new screen with the heading ‘Claim Submission’.
• Please use Redux to manage your the state within your application.
• The most important point is to just enjoy this challenge.

What's next?

In this project, it was important to make sure the code was simple and reusable. I wanted this app to have SSR, CCS chunks and a connected router. Perhaps SSR is overkill but I'm experimenting with this technology at the moment as I think it is very important for a lot of projects. I used a custom webpack config where the router is linked with Redux. There are still some features I would add if I had more time:

• Write tests
• Add ReduxForm
• Comment code
• Integrate design according to provided UI
• Prevent selection of future dates from date picker
• Fix broken list
• Add flow
• Add a real data API handler endpoint
• Fetch data on refresh
• Add Webpack alias
• Only use one webpack config
• Update page title
• Update Loader
• Add link to ReplyList lis
• Click on native go back/forward browser buttons displays previous replies
• Update browser compatibility