Feature: Onboarding / Stepper for new users

[Codehagen]

💡 Feature: Improve Onboarding Process

Current Behavior

Currently, we have some conditional rendering for when a new user doesn't have an API key. However, this needs improvement. Resend (www.resend.com) has a good method for handling this, as shown in the attached pictures.

Suggested Solution

Create a new page called /onboarding where we can display the steppers. We can use a horizontal stepper, such as the one found here: ShadCN Stepper. The user can return to /onboarding if they want to go through the process again, so no state management in the database is needed for this.

Initial state for Resend:

Pressed Add API - This made the card green and then enabled the Send email button.

These boxes are also conditionally rendered based on if the person has pressed Send email and got a positive callback.

We should have:

• Step 1: Add an API Key
  We can't create an event before this button is pressed, so we need to conditionally render it.
• Step 2: Create a Channel
  Provide an input field and action to the database so a person can create a meaningful channel, e.g., sign up.
• Step 3: Create an Event
  Input their API key and the new channel in the call so this will be displayed.
• Step 4: Display Additional Actions
  Have some cards under to display more actions.

We need to reuse the make API key function, and we can use the same style as the create-event button that is currently on the homepage.

[AkshayBandi027]

.take

[github-actions]

Thanks for taking this issue! Let us know if you have any questions!

[Codehagen]

Hi @AkshayBandi027 - Do you have any questions regarding this issue? ✨

[Codehagen]

How is it going @AkshayBandi027 ?

[AkshayBandi027]

@Codehagen , I have created draft for this feature. I have few questions regrating

Step 4: Display Additional Actions
Have some cards under to display more actions.

what actions needs to be displayed !!

• any feedback would be appreciated.