Son Nguyen - Front-end challenge

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended",
+        "plugin:react-hooks/recommended"
+    ],
+    "overrides": [
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/prop-types": "off"
+    }
+}

INTRODUCTION.md

@@ -0,0 +1,22 @@
+# Implementation detail
+
+## State management
+To share the state between the different components during the sign-up flow, I'm using a reducer (/reducer/signUpReducer.js)
+to manage the state logic outside of the components.
+
+The state managed by this reducer will be put in the Context so each child component of the Context provider
+will easily get access to the state.
+
+In other words, I'm combining the reducer and context together so every component in the tree can simply call
+the `dispatch` function from the reducer to update the state. Please check the `App.js` to see the tree structure.
+
+## Routing
+I'm using `react-router` v6 to easily manage the routing between the different pages in the sign-up flow.
+
+## Form
+I'm using `formik` v2 to easily manage the state and error handling in the sign-up forms. Also, I can add
+a schema validation file (/schema/index.js) for the input validations.
+
+## Components structure
+I follow the atomic design. Thus, I keep atomic components in the atoms folder and components that reuse atomic
+components in the components folder.