Onboarding

Customize the Onboarding Flow

I have already done the heavy lifting for you by creating the base structure and all the necessary code files for a clean onboarding flow.

Two steps are already configured for the onboarding flow to get you started.

• The first step is a simple form with a text input asking for the user's name.
• The second step offers a free trial of the app.

In order to customize the onboarding flow for the dashboard app, you can open the apps/dashboard/src/app/(auth)/onboarding folder.

You can customize the onboarding flow by editing these files:

• onboardingReducer.ts -The state and actions for the onboarding flow.
• stepOne.tsx - The UI of the first step of the onboarding flow.
• useStepOneOnboarding.ts - Custom hook with the logic for the first step.
• stepTwo.tsx - The UI of the second step of the onboarding flow.
• useStepTwoOnboarding.ts - Custom hook with the logic for the second step.
• useFinishOnboarding.ts - Custom hook with the logic for what happens when the onboarding flow is finished. Call the API route for example.
• app/api/onboarding/route.ts - The API route for the onboarding flow. Update the user data in the database, for example.

The onboarding flow is fully customizable, so you can add as many steps as you need and customize the UI and logic for each step.