For this exercise you will create a simple application to insert a record into a relational database through a short stateful web flow.
First, create a database table that holds records representing people.
- A person record has a unique identifier and the following additional attributes:
- name (string)
- age (integer)
- date of birth (date)
- email address (string)
- Email address has a unique constraint (case-insensitive).
Then, create a web application that provides the following user experience:
Given a user has loaded the application,
When the user fills in the "new person" form and clicks the "Preview" button,
Then the application shows a read-only preview of the person record to be created.
Given a user is previewing a valid new person record,
When the user clicks the "Submit" button,
Then the application shows a success message indicating the person record was created.
Given a user is previewing a new person record with a duplicate email address,
When the user clicks the "Submit" button,
Then the application redisplays the form with an error message at the email field.
Create the application as a single-page (SPA) JavaScript application with client-side routing and asynchronous interactions with the server.
Detailed instructions for building, running and interacting with the application should be provided in the project.
Please write your JavaScript code in ES6 and use React for the user interface. You are free to use any command line tools such as Create React App to scaffold the app.
The exercise should generally not take more than 3-4 hours, although you're free to take as much time as you'd like to work on it. If you don't completely finish within that time frame, that's totally okay; just submit what you've got.
To submit the exercise,
- Deploy the application to some public location where we can interact with it (e.g. Heroku or AWS).
- Push the code to a private GitHub or Bitbucket repository. We'll provide usernames for you to give access. We cannot accept email attachments or file sharing links.
Please follow all of the above instructions and send code that you are proud to show us!