rafaelmmathias / onboarding-app

ONBOARDING APP

A dynamic step by step to introduce user's information.

⚡️ Getting started

First, clone:

git clone [e-mail]:rafaelmmathias/onboarding-app.git

Install dependencies

npm install

Run (mock server will works automatically)

npm run dev

test

npm run test

open the link with one of the available client ids: Onboarding Client 1 | Onboarding Client 2 and that`s it! Tip: Change the field names and submit an onboarding, check the network activity and notice the POST request body submitted.

---

Onboarding settings

Two clients are mocked by default in the mock server API: client1 and client2, with different themes and step configurations, these keys could be used in the url to access it's onboarding. Eg: http://localhost:3001/{clientId}

steps config model

src/test/server/db/clients/{client}/config.ts

In these files we can edit the steps texts, icons, positions and add more steps, since we follow the shape of the Steps model.

icons

Available icons: wheel | car | chart

After the user submit the last step, the fields of each step will be normalized and submitted as a form-values by a POST to the /steps-submit endpoint.

theme

src/test/server/db/clients/{client}/theme.ts

Here we can change the colors and font style followin the shape of the DefaultTheme type which is described here

App stack

• react + typescript
• react-router
• styled-components
• react-query v4
• msw
  • Used to serve the mock server API.
• jest
  • Unit tests integrated with msw
  • React Testing Library
• axios-http
• vitejs