/react-project

Primary LanguageJavaScript

This project was bootstrapped with Create React App.

Task

Implement a page with a progressive form, where each step shows when you have completed the previous one. In other words, we're not looking for previous/next buttons or a wizard, but the next step should appear automatically.

Steps

  1. Two checkboxes with labels A1 and A2. Both are unchecked by default. Next step is available after at least one of them is checked.
  2. Two toggle buttons with labels B1 and B2. One button untoggles another (same as radio buttons behavior). Both are inactive by default. Next step is available when any option has been chosen.
  3. Text field with button Check. When button is pressed a value of the field will be send. Next step is available if a response from API is fine.
  4. Selectbox with C1, C2, C3 options. It is empty by default. Next step is available when any option has been chosen.
  5. Submit button. Should send data to the server.

If a form submit fails then a user must be informed by an error message. It doesn't matter how the message appears but the redux store should be able to manage it.

Form payload specification

JSON with a (checked values), b (active button value), text (text field value) and c (selectbox's value) fields.

Example:

{
  a: ["A1"],
  b: "B1",
  text: "@abcdef",
  c: "C1"
}

API

Use api.js from this gist.

Requirements

  1. Use any starting boilerplate to setup your project. (e.g.: create-react-app).
  2. Install Redux and use the Redux store to manage the state.
  3. Use any library you need.
  4. Single page is enough. No need to use routers or any other pages.
  5. If you want to use inline styles do it in a nice way. 😉
  6. Use best practices for React/Redux/Frontend. We will look at how you apply them.
  7. Use software engineering principles to write your code. We will ask about them.
  8. Well structured and readable code matters. Can other developers easily read your code and extend it?
  9. Keep a healthy commit history.
  10. Have at least 20% test coverage. Test at least one react component and one Redux functionality (could be async action, reducer, etc). Don't worry about high coverage, we just want to see if you know how to test.
  11. Functional programming is a plus 😉

Run project

Next steps are expected to start your project:

yarn install
yarn build
yarn start

Tip: as static server tool you can use serve.

Codestyle

We value a clean code style. It would be nice if you will follow something like Airbnb's JavaScript Style Guide. 😎

💥 GOOD LUCK! 🚀