React Sign Up

Handling user registration and form validation

Getting Started with react-sign-up

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

yarn or npm install

Installs all required packages.

yarn dev or npm run dev

Runs both React app and mock server.

yarn start or npm start

Runs the app in the development mode.
Open http://localhost:3000 or http://127.0.0.1:3000/ to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn mock-server or npm run mock-server

Runs the mock server.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

Form tests cover client validation including cases, when server returns different statuses 200, 400, 429, 500-526.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.
Your app is ready to be deployed! See the section about deployment for more information.

yarn eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project. Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Project Description

UX

Signing Up task is quite complex UX task and should be researched by UX-designer in detail. We should implement intuitive interactive validation with showing validation details and test it with different user focus groups.

I've reviewed several approaches to do it from world known products, most interesting of them I described below:

1. Google - validates email when input focus is lost, if I go back to fix incorrect email I must lost focus again to show am I corrected email or not, that looks not good.
2. Apple - similar to Google, validates email when input focus is lost, if I go back to fix incorrect email I must lost focus again to show am I corrected email or not; inputs "jump" on showing errors.
3. gitHub - validates on typing each symbol, Chrome autofill overflows information tooltip by its popup and it looks unusable, I should lost input focus to show details. This solution shows detailed validation information, that helps to understand my typing faults.
4. MicroSoft - validates when Next button has been clicked, shows error message above the input, so form changes its size on it.
5. facebook - validates when input focus is lost and shows errors for each once focused input.
6. VK - validates when Register button has been clicked.

Short platform and architecture description

1. create-react-app - to start easily with application environment, can be ejected and set up manually. (I already have issue with customization tsconfig)

2. Typescript - static type definition allows to validate code before it will run, allows to control API contract for developers and provides more readability

3. Styled Components - the most popular implementation of CSS-in-JS. I love both SASS and Styled, here I've chosen Styled because of the following: component based architecture, changes controlled by props, styles can be inherit, do not require to handle class-names manually, styles are rendered only if the component is rendered, easier to write CSS with variables for me etc. Some references concerning it:
   Styled Components vs Sass in 2019 and Styled Components vs CSS / SASS / CSS-In-JSX

4. theming - via ThemeProvider for Styled, I do not use libraries, which implement popular themes like material-ui, carbon, bootstrap etc. to show my point to theming concept

5. i18n - localization prototype, I did'nt any reason to use i18next/react-i18next and similar libraries according to task description, it can be changed quickly using required internationalization library

6. testing - I did't need to install any packages, since create-react-app comes with the react-testing-library and its dependencies; to mock server I used my own fetch mock implementation, it can be changed to something like msw if it is required

Project structure

Branches

1. master - implementation with validation on SignUp click;
2. validation-on-lost-focus - implementation with validation when input focus is lost, I personally prefer it.

Modules

/mock-server - primitive server implementation

/src/config.js - contains project configuration variables (server host, server port etc., see .env also)

/src/components - components including Sign Up Form and tests for them

/src/localization - localization

/src/services - HTTP requests

/src/theming - theming with 'gray' theme by default

/src/types - common types

Future

1. Using much more complex patterns to check fields.
2. Using password estimators like zxcvbn.
3. Redesign validation errors.