- Select topics that interest you and get a set of recommended questions to get you
- started.
-
-
-
-
+
+
+ We're so excited to have you here! Your future in tech is bright, and we're here to help
+ you get there.
+
+
+ {/** 'infinite' scrolling animation of the study path buttons. */}
+ {/* Scrolling content */}
+
+
+
+ );
+}
diff --git a/src/hooks/use-onboarding-steps.ts b/src/hooks/use-onboarding-steps.ts
index 2b76ead67..53a550bc4 100644
--- a/src/hooks/use-onboarding-steps.ts
+++ b/src/hooks/use-onboarding-steps.ts
@@ -6,6 +6,7 @@ import { useOnboardingContext } from '@/contexts/onboarding-context';
import { updateUser } from '@/actions/user/authed/update-user';
import { createCouponOnSignup } from '@/actions/user/account/create-coupon';
import { sendWelcomeEmail } from '@/actions/misc/send-welcome-email';
+import { useLocalStorage } from './use-local-storage';
export const STEPS = {
USER_DETAILS: 'USER_DETAILS', // get the users info
@@ -144,8 +145,24 @@ export function useOnboardingSteps() {
// if this is false, we need to create a coupon and send the welcome email
if (!user.hasCreatedCustomSignupCoupon) {
const coupon = await createCouponOnSignup();
- // send the welcome email
- await sendWelcomeEmail(serverUser, coupon?.name ?? '');
+
+ // Check if welcome email has already been sent using localStorage
+ // Use a generic key if serverUser doesn't have email
+ const storageKey = serverUser?.email
+ ? `welcome-email-sent_${serverUser.email}`
+ : 'welcome-email-sent';
+ const { value: welcomeEmailSent, setValue: setWelcomeEmailSent } = useLocalStorage({
+ defaultValue: false,
+ key: storageKey,
+ });
+
+ // Only send welcome email if it hasn't been sent before
+ if (!welcomeEmailSent) {
+ // send the welcome email
+ await sendWelcomeEmail(serverUser, coupon?.name ?? '');
+ // Mark that welcome email has been sent for this user
+ setWelcomeEmailSent(true);
+ }
}
setCurrentStepState(stepConfig[STEPS.USER_DETAILS].next as StepKey);
From a6dcaa9fdc39f05a1f5dc566136ab2883727c28b Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 27 Apr 2025 11:29:24 +0100
Subject: [PATCH 02/14] feat: allows admin users to skip initial question on
onboarding via a constant
---
src/hooks/use-onboarding-steps.ts | 13 ++++++++++++-
1 file changed, 12 insertions(+), 1 deletion(-)
diff --git a/src/hooks/use-onboarding-steps.ts b/src/hooks/use-onboarding-steps.ts
index 53a550bc4..a360996b0 100644
--- a/src/hooks/use-onboarding-steps.ts
+++ b/src/hooks/use-onboarding-steps.ts
@@ -8,6 +8,9 @@ import { createCouponOnSignup } from '@/actions/user/account/create-coupon';
import { sendWelcomeEmail } from '@/actions/misc/send-welcome-email';
import { useLocalStorage } from './use-local-storage';
+// Toggle for admin to skip initial questions
+const ADMIN_SKIP_INITIAL_QUESTIONS = false;
+
export const STEPS = {
USER_DETAILS: 'USER_DETAILS', // get the users info
INITIAL_QUESTIONS: 'INITIAL_QUESTIONS', // give the user 3 very simple multiple choice questions to gauge skill level and give them quick wins!
@@ -165,7 +168,15 @@ export function useOnboardingSteps() {
}
}
- setCurrentStepState(stepConfig[STEPS.USER_DETAILS].next as StepKey);
+ // If user is an admin and the feature toggle is enabled, skip the INITIAL_QUESTIONS step
+ if (ADMIN_SKIP_INITIAL_QUESTIONS && serverUser?.userLevel === 'ADMIN') {
+ console.log('Admin user detected - skipping initial questions');
+ // Skip to the TIME_COMMITMENT step (which is after INITIAL_QUESTIONS)
+ setCurrentStepState(STEPS.TIME_COMMITMENT);
+ } else {
+ // Regular user follows normal flow
+ setCurrentStepState(stepConfig[STEPS.USER_DETAILS].next as StepKey);
+ }
} else if (currentStep === STEPS.INITIAL_QUESTIONS) {
// Fix the userXp field by ensuring it's a numeric value
// Make sure to use the existing user object and only update the userXp field
From 3361f56f9265b9fbc57d49b7b0686a7e013299dc Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 27 Apr 2025 11:45:42 +0100
Subject: [PATCH 03/14] fix: cleaning up code in onboarding flow
---
.../app/onboarding/onboarding-footer.tsx | 50 +++++++++----------
.../app/onboarding/onboarding-form.tsx | 14 ++++--
src/hooks/use-onboarding-steps.ts | 25 ++++++++--
3 files changed, 55 insertions(+), 34 deletions(-)
diff --git a/src/components/app/onboarding/onboarding-footer.tsx b/src/components/app/onboarding/onboarding-footer.tsx
index 31f3da481..d16501185 100644
--- a/src/components/app/onboarding/onboarding-footer.tsx
+++ b/src/components/app/onboarding/onboarding-footer.tsx
@@ -11,6 +11,7 @@ interface OnboardingFooterProps {
currentStep: keyof typeof STEPS;
isLoading: boolean;
showSkipButton: boolean;
+ showBackButton: boolean;
onSkip: () => void;
onContinue: () => void;
onBack: () => void;
@@ -20,12 +21,24 @@ export default function OnboardingFooter({
currentStep,
isLoading,
showSkipButton,
+ showBackButton,
onSkip,
onContinue,
onBack,
}: OnboardingFooterProps) {
const { user, canContinue } = useOnboardingContext();
+ // Steps where skip button should be hidden
+ const hideSkipButton = ['FIRST_QUESTION_SELECTION', 'INITIAL_QUESTIONS', 'USER_DETAILS'].includes(
+ currentStep
+ );
+
+ // Conditions to disable continue button
+ const disableContinue =
+ isLoading ||
+ !canContinue ||
+ (currentStep === STEPS.USER_DETAILS && (!user?.username || !user?.howDidYouHearAboutTechBlitz));
+
return (
- {(currentStep === STEPS.PRICING ||
- currentStep === STEPS.INITIAL_QUESTIONS ||
- currentStep === STEPS.QUESTIONS ||
- currentStep === STEPS.TIME_COMMITMENT ||
- currentStep === STEPS.TAGS ||
- currentStep === STEPS.NOTIFICATIONS ||
- currentStep === STEPS.FIRST_QUESTION_SELECTION) && (
+ {showBackButton && (
- {showSkipButton &&
- // need to answer these two
- currentStep !== STEPS.FIRST_QUESTION_SELECTION &&
- currentStep !== STEPS.INITIAL_QUESTIONS && (
-
- )}
- {/** disable if no username or how did you hear about us */}
-
{
+ // if we're on the first step, we shouldn't go back
+ if (currentStep === STEPS.USER_DETAILS) {
+ return;
+ }
+
// if the user is on the pricing page, they need to go back to the tags page only if they did not
// start from scratch
if (currentStep === STEPS.PRICING && firstQuestionSelection !== 'startFromScratch') {
- setCurrentStepState(STEPS.TAGS);
- return;
+ return setCurrentStepState(STEPS.TAGS);
}
const previousStep = Object.entries(stepConfig).find(
- ([, config]) => config.next === currentStep
+ ([_, config]) => config.next === currentStep
)?.[0];
if (previousStep) {
setCurrentStepState(previousStep as StepKey);
@@ -237,7 +241,19 @@ export function useOnboardingSteps() {
const isStepOne = currentStep === STEPS.USER_DETAILS;
const hasUsername = (user?.username?.length ?? 0) > 0;
- return refInUrl || (!isStepOne && hasUsername) || (isStepOne && refInUrl && hasUsername);
+ // Never show skip button on the first page (USER_DETAILS) regardless of other conditions
+ if (isStepOne) {
+ return false;
+ }
+
+ // For other steps, show the skip button if there's a ref in the URL or the user has a username
+ return refInUrl || hasUsername;
+ };
+
+ // Function to determine if back button should be shown
+ const showBackButton = () => {
+ // Don't show back button on the first step
+ return currentStep !== STEPS.USER_DETAILS;
};
return {
@@ -247,6 +263,7 @@ export function useOnboardingSteps() {
handleContinue,
handleBack,
showSkipButton,
+ showBackButton,
stepConfig,
};
}
From 3a0758a64751507f26c3d618376a5f5255c13521 Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 27 Apr 2025 12:02:31 +0100
Subject: [PATCH 04/14] code cleanup
---
.env.example | 3 -
.../app/onboarding/onboarding-footer.tsx | 10 +-
.../global/blocks/call-to-action-block.tsx | 36 +-----
src/hooks/use-onboarding-steps.ts | 107 ++++++++++--------
4 files changed, 74 insertions(+), 82 deletions(-)
diff --git a/.env.example b/.env.example
index 07a74e21e..57cf22a7a 100644
--- a/.env.example
+++ b/.env.example
@@ -52,9 +52,6 @@ NEXT_PRIVATE_OPEN_AI_ORG=
# Keys used to connect to Claude (only needed for ai development)
ANTHROPIC_API_KEY=
-# already preset.
-NEXT_PUBLIC_ENV=development
-
# secret used to authenticate cron jobs, not needed for dev
CRON_SECRET=
diff --git a/src/components/app/onboarding/onboarding-footer.tsx b/src/components/app/onboarding/onboarding-footer.tsx
index d16501185..d54d8d4f2 100644
--- a/src/components/app/onboarding/onboarding-footer.tsx
+++ b/src/components/app/onboarding/onboarding-footer.tsx
@@ -53,9 +53,15 @@ export default function OnboardingFooter({
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: -20 }}
>
-
)}
diff --git a/src/components/marketing/global/blocks/call-to-action-block.tsx b/src/components/marketing/global/blocks/call-to-action-block.tsx
index 2d74fa271..6d526d785 100644
--- a/src/components/marketing/global/blocks/call-to-action-block.tsx
+++ b/src/components/marketing/global/blocks/call-to-action-block.tsx
@@ -38,36 +38,12 @@ export default function CallToActionBlock(opts: {
diff --git a/src/hooks/use-onboarding-steps.ts b/src/hooks/use-onboarding-steps.ts
index 12e2ca87f..4ffba1046 100644
--- a/src/hooks/use-onboarding-steps.ts
+++ b/src/hooks/use-onboarding-steps.ts
@@ -33,6 +33,7 @@ export function useOnboardingSteps() {
user,
handleGetOnboardingQuestions,
canContinue,
+ setCanContinue,
timeSpendingPerDay,
firstQuestionSelection,
FIRST_QUESTION_TUTORIAL_SLUG,
@@ -111,7 +112,7 @@ export function useOnboardingSteps() {
setIsLoading(true);
try {
- // if the user wants to start from scratch, the next page needs to be the pricing page, not the tags page
+ // Handle first question selection routing
if (
currentStep === STEPS.FIRST_QUESTION_SELECTION &&
firstQuestionSelection === 'startFromScratch'
@@ -120,37 +121,36 @@ export function useOnboardingSteps() {
return;
}
- // if we are on the last step and the user chose to start from scratch,
- // redirect them to the first question
- if (currentStep === STEPS.PRICING && firstQuestionSelection === 'startFromScratch') {
- // remove onboarding data
- localStorage.removeItem('onboarding');
- // then redirect
- router.push(`/question/${FIRST_QUESTION_TUTORIAL_SLUG}?tutorial=true`);
- return;
- } else if (
- currentStep === STEPS.PRICING &&
- firstQuestionSelection === 'personalizeLearning'
- ) {
- await handleGetOnboardingQuestions();
- // remove the onboarding data from local storage
- localStorage.removeItem('onboarding');
- setCurrentStepState(STEPS.QUESTIONS);
- return;
+ // Handle pricing step based on user's first question selection
+ if (currentStep === STEPS.PRICING) {
+ if (firstQuestionSelection === 'startFromScratch') {
+ localStorage.removeItem('onboarding');
+ router.push(`/question/${FIRST_QUESTION_TUTORIAL_SLUG}?tutorial=true`);
+ return;
+ } else if (firstQuestionSelection === 'personalizeLearning') {
+ await handleGetOnboardingQuestions();
+ localStorage.removeItem('onboarding');
+ setCurrentStepState(STEPS.QUESTIONS);
+ return;
+ }
}
+ // Handle time commitment step
if (currentStep === STEPS.TIME_COMMITMENT) {
await updateUser({ userDetails: { ...user, timeSpendingPerDay } });
setCurrentStepState(stepConfig[STEPS.TIME_COMMITMENT].next as StepKey);
- } else if (currentStep === STEPS.USER_DETAILS) {
+ return;
+ }
+
+ // Handle user details step
+ if (currentStep === STEPS.USER_DETAILS) {
await updateUser({ userDetails: user });
- // if this is false, we need to create a coupon and send the welcome email
+ // Create coupon and send welcome email if needed
if (!user.hasCreatedCustomSignupCoupon) {
const coupon = await createCouponOnSignup();
- // Check if welcome email has already been sent using localStorage
- // Use a generic key if serverUser doesn't have email
+ // Check if welcome email has already been sent
const storageKey = serverUser?.email
? `welcome-email-sent_${serverUser.email}`
: 'welcome-email-sent';
@@ -159,27 +159,24 @@ export function useOnboardingSteps() {
key: storageKey,
});
- // Only send welcome email if it hasn't been sent before
if (!welcomeEmailSent) {
- // send the welcome email
await sendWelcomeEmail(serverUser, coupon?.name ?? '');
- // Mark that welcome email has been sent for this user
setWelcomeEmailSent(true);
}
}
- // If user is an admin and the feature toggle is enabled, skip the INITIAL_QUESTIONS step
+ // Admin users can skip initial questions if feature flag is enabled
if (ADMIN_SKIP_INITIAL_QUESTIONS && serverUser?.userLevel === 'ADMIN') {
console.log('Admin user detected - skipping initial questions');
- // Skip to the TIME_COMMITMENT step (which is after INITIAL_QUESTIONS)
setCurrentStepState(STEPS.TIME_COMMITMENT);
} else {
- // Regular user follows normal flow
setCurrentStepState(stepConfig[STEPS.USER_DETAILS].next as StepKey);
}
- } else if (currentStep === STEPS.INITIAL_QUESTIONS) {
- // Fix the userXp field by ensuring it's a numeric value
- // Make sure to use the existing user object and only update the userXp field
+ return;
+ }
+
+ // Handle initial questions step
+ if (currentStep === STEPS.INITIAL_QUESTIONS) {
const userXpValue = typeof totalXp === 'number' && !isNaN(totalXp) ? totalXp : 0;
try {
@@ -190,24 +187,23 @@ export function useOnboardingSteps() {
},
});
console.log(`Successfully updated user with XP: ${userXpValue}`);
- setCurrentStepState(stepConfig[STEPS.INITIAL_QUESTIONS].next as StepKey);
} catch (error) {
console.error('Error updating user XP:', error);
- // We'll still proceed to the next step even if the XP update fails
- setCurrentStepState(stepConfig[STEPS.INITIAL_QUESTIONS].next as StepKey);
}
- } else {
- await updateUser({ userDetails: user });
- const nextStep = stepConfig[currentStep].next;
- if (nextStep === 'DASHBOARD') {
- localStorage.removeItem('onboarding');
- router.push('/dashboard?onboarding=true');
- } else if (nextStep === STEPS.PRICING) {
- setCurrentStepState(STEPS.PRICING);
- } else {
- setCurrentStepState(nextStep as StepKey);
- }
+ setCurrentStepState(stepConfig[STEPS.INITIAL_QUESTIONS].next as StepKey);
+ return;
+ }
+
+ // Handle all other steps
+ await updateUser({ userDetails: user });
+ const nextStep = stepConfig[currentStep].next;
+
+ if (nextStep === 'DASHBOARD') {
+ localStorage.removeItem('onboarding');
+ router.push('/dashboard?onboarding=true');
+ } else {
+ setCurrentStepState(nextStep as StepKey);
}
} catch (error) {
console.error('Error during continue:', error);
@@ -228,10 +224,17 @@ export function useOnboardingSteps() {
return setCurrentStepState(STEPS.TAGS);
}
+ // Get the previous step
const previousStep = Object.entries(stepConfig).find(
([_, config]) => config.next === currentStep
)?.[0];
+
if (previousStep) {
+ // If navigating back to USER_DETAILS, ensure the continue button is enabled
+ if (previousStep === STEPS.USER_DETAILS) {
+ setCanContinue(true);
+ }
+
setCurrentStepState(previousStep as StepKey);
}
};
@@ -252,8 +255,18 @@ export function useOnboardingSteps() {
// Function to determine if back button should be shown
const showBackButton = () => {
- // Don't show back button on the first step
- return currentStep !== STEPS.USER_DETAILS;
+ // Don't show back button on the first step (USER_DETAILS)
+ if (currentStep === STEPS.USER_DETAILS) {
+ return false;
+ }
+
+ // Don't show back button on final steps
+ if (currentStep === STEPS.QUESTIONS || currentStep === STEPS.PRICING) {
+ return false;
+ }
+
+ // Show back button on intermediate steps
+ return true;
};
return {
From b3617a2e845306b2c0373683884834ba0ecf788a Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Sun, 27 Apr 2025 12:05:22 +0100
Subject: [PATCH 05/14] remove debug code
---
src/components/app/onboarding/onboarding-footer.tsx | 3 ---
1 file changed, 3 deletions(-)
diff --git a/src/components/app/onboarding/onboarding-footer.tsx b/src/components/app/onboarding/onboarding-footer.tsx
index d54d8d4f2..52e39e8b5 100644
--- a/src/components/app/onboarding/onboarding-footer.tsx
+++ b/src/components/app/onboarding/onboarding-footer.tsx
@@ -76,9 +76,6 @@ export default function OnboardingFooter({
Continue
{isLoading && }
- {process.env.NODE_ENV === 'development' && (
-
DEBUG: {currentStep}
- )}
);
From 7426df8ff037845a8f1d25732f1ee735b2657dee Mon Sep 17 00:00:00 2001
From: Logan Ford <110533855+Logannford@users.noreply.github.com>
Date: Tue, 29 Apr 2025 11:37:56 +0100
Subject: [PATCH 06/14] fix: redirects non authed users in onboarding &
progress with new screen
---
src/app/(no_nav)/onboarding/page.tsx | 14 +-
.../onboarding-first-question-selection.tsx | 314 +++++++++++++++++-
src/components/app/study-paths/list.tsx | 14 -
3 files changed, 321 insertions(+), 21 deletions(-)
diff --git a/src/app/(no_nav)/onboarding/page.tsx b/src/app/(no_nav)/onboarding/page.tsx
index c27a9644e..acbdca9a6 100644
--- a/src/app/(no_nav)/onboarding/page.tsx
+++ b/src/app/(no_nav)/onboarding/page.tsx
@@ -1,9 +1,12 @@
+import Link from 'next/link';
+
+import { redirect } from 'next/navigation';
+
import Logo from '@/components/ui/logo';
import StarsBackground from '@/components/ui/stars-background';
+import OnboardingForm from '@/components/app/onboarding/onboarding-form';
-import Link from 'next/link';
import { UserOnboardingContextProvider } from '@/contexts/onboarding-context';
-import OnboardingForm from '@/components/app/onboarding/onboarding-form';
import { useUserServer } from '@/hooks/use-user-server';
export const metadata = {
@@ -11,7 +14,12 @@ export const metadata = {
};
export default async function OnboardingPage() {
- const [user] = await Promise.all([useUserServer()]);
+ const user = await useUserServer();
+
+ // throw the user back to login
+ if (!user) {
+ return redirect('/login');
+ }
return (