@@ -133,16 +125,7 @@ export default async function ThreeBlockShowcase({
{right || (
<>
- {' '}
- {studyPath && (
-
diff --git a/src/components/mdx/blog-post-layout.tsx b/src/components/mdx/blog-post-layout.tsx
index 4554d0794..e4b2bde19 100644
--- a/src/components/mdx/blog-post-layout.tsx
+++ b/src/components/mdx/blog-post-layout.tsx
@@ -82,10 +82,6 @@ export default function BlogPostLayout({
diff --git a/src/components/shared/infinite-scrolling-roadmap-cards.tsx b/src/components/shared/infinite-scrolling-roadmap-cards.tsx
new file mode 100644
index 000000000..603f1954e
--- /dev/null
+++ b/src/components/shared/infinite-scrolling-roadmap-cards.tsx
@@ -0,0 +1,320 @@
+import { Question } from '@/types';
+import StudyPathsList from '../app/study-paths/list';
+import { StudyPath } from '@prisma/client';
+import { cn } from '@/lib/utils';
+
+// Mock questions data similar to the storybook examples
+const questions: Partial
[] = [
+ {
+ uid: '1',
+ title: 'JavaScript Variables',
+ question: 'What is the correct way to declare a variable in JavaScript?',
+ description: 'Understanding variable declarations in JavaScript',
+ answers: [
+ {
+ uid: 'a1',
+ questionUid: '1',
+ answer: 'var x = 5;',
+ answerType: 'STANDARD',
+ isCodeSnippet: false,
+ },
+ {
+ uid: 'a2',
+ questionUid: '1',
+ answer: 'variable x = 5;',
+ answerType: 'STANDARD',
+ isCodeSnippet: false,
+ },
+ ],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ questionDate: '2023-01-01',
+ correctAnswer: 'a1',
+ slug: 'javascript-variables',
+ questionType: 'MULTIPLE_CHOICE',
+ difficulty: 'BEGINNER',
+ userAnswers: [
+ {
+ uid: 'ua1',
+ userUid: 'user123',
+ questionUid: '1',
+ userAnswerUid: 'a1',
+ correctAnswer: true,
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ questionDate: '2023-01-01',
+ timeTaken: 15,
+ difficulty: 'EASY',
+ },
+ ],
+ },
+ {
+ uid: '2',
+ title: 'JavaScript Arrays',
+ question: 'Which method is used to add an element to the end of an array?',
+ description: 'Understanding array manipulation in JavaScript',
+ answers: [
+ {
+ uid: 'b1',
+ questionUid: '2',
+ answer: 'push()',
+ answerType: 'STANDARD',
+ isCodeSnippet: false,
+ },
+ {
+ uid: 'b2',
+ questionUid: '2',
+ answer: 'append()',
+ answerType: 'STANDARD',
+ isCodeSnippet: false,
+ },
+ ],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ questionDate: '2023-01-02',
+ correctAnswer: 'b1',
+ slug: 'javascript-arrays',
+ questionType: 'MULTIPLE_CHOICE',
+ difficulty: 'EASY',
+ userAnswers: [
+ {
+ uid: 'ua2',
+ userUid: 'user123',
+ questionUid: '2',
+ userAnswerUid: 'b1',
+ correctAnswer: true,
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ questionDate: '2023-01-02',
+ timeTaken: 20,
+ difficulty: 'EASY',
+ },
+ ],
+ },
+ {
+ uid: '3',
+ title: 'JavaScript Functions',
+ question: 'What defines an arrow function in JavaScript?',
+ description: 'Understanding arrow functions in JavaScript',
+ answers: [
+ {
+ uid: 'c1',
+ questionUid: '3',
+ answer: '() => {}',
+ answerType: 'STANDARD',
+ isCodeSnippet: false,
+ },
+ {
+ uid: 'c2',
+ questionUid: '3',
+ answer: 'function() {}',
+ answerType: 'STANDARD',
+ isCodeSnippet: false,
+ },
+ ],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ questionDate: '2023-01-03',
+ correctAnswer: 'c1',
+ slug: 'javascript-functions',
+ questionType: 'MULTIPLE_CHOICE',
+ difficulty: 'MEDIUM',
+ userAnswers: [
+ {
+ uid: 'ua3',
+ userUid: 'user123',
+ questionUid: '3',
+ userAnswerUid: 'c2',
+ correctAnswer: false,
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ questionDate: '2023-01-03',
+ timeTaken: 30,
+ difficulty: 'MEDIUM',
+ },
+ ],
+ },
+ {
+ uid: '4',
+ title: 'JavaScript Variables',
+ question: 'What is the correct way to declare a variable in JavaScript?',
+ description: 'Understanding variable declarations in JavaScript',
+ answers: [
+ {
+ uid: 'a1',
+ questionUid: '1',
+ answer: 'var x = 5;',
+ answerType: 'STANDARD',
+ isCodeSnippet: false,
+ },
+ {
+ uid: 'a2',
+ questionUid: '1',
+ answer: 'variable x = 5;',
+ answerType: 'STANDARD',
+ isCodeSnippet: false,
+ },
+ ],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ questionDate: '2023-01-01',
+ correctAnswer: 'a1',
+ slug: 'javascript-variables',
+ questionType: 'MULTIPLE_CHOICE',
+ difficulty: 'BEGINNER',
+ userAnswers: [
+ {
+ uid: 'ua1',
+ userUid: 'user123',
+ questionUid: '1',
+ userAnswerUid: 'a1',
+ correctAnswer: true,
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ questionDate: '2023-01-01',
+ timeTaken: 15,
+ difficulty: 'EASY',
+ },
+ ],
+ },
+ {
+ uid: '5',
+ title: 'JavaScript Arrays',
+ question: 'Which method is used to add an element to the end of an array?',
+ description: 'Understanding array manipulation in JavaScript',
+ answers: [
+ {
+ uid: 'b1',
+ questionUid: '2',
+ answer: 'push()',
+ answerType: 'STANDARD',
+ isCodeSnippet: false,
+ },
+ {
+ uid: 'b2',
+ questionUid: '2',
+ answer: 'append()',
+ answerType: 'STANDARD',
+ isCodeSnippet: false,
+ },
+ ],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ questionDate: '2023-01-02',
+ correctAnswer: 'b1',
+ slug: 'javascript-arrays',
+ questionType: 'MULTIPLE_CHOICE',
+ difficulty: 'EASY',
+ userAnswers: [
+ {
+ uid: 'ua2',
+ userUid: 'user123',
+ questionUid: '2',
+ userAnswerUid: 'b1',
+ correctAnswer: true,
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ questionDate: '2023-01-02',
+ timeTaken: 20,
+ difficulty: 'EASY',
+ },
+ ],
+ },
+ {
+ uid: '6',
+ title: 'JavaScript Functions',
+ question: 'What defines an arrow function in JavaScript?',
+ description: 'Understanding arrow functions in JavaScript',
+ answers: [
+ {
+ uid: 'c1',
+ questionUid: '3',
+ answer: '() => {}',
+ answerType: 'STANDARD',
+ isCodeSnippet: false,
+ },
+ {
+ uid: 'c2',
+ questionUid: '3',
+ answer: 'function() {}',
+ answerType: 'STANDARD',
+ isCodeSnippet: false,
+ },
+ ],
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ questionDate: '2023-01-03',
+ correctAnswer: 'c1',
+ slug: 'javascript-functions',
+ questionType: 'MULTIPLE_CHOICE',
+ difficulty: 'MEDIUM',
+ userAnswers: [
+ {
+ uid: 'ua3',
+ userUid: 'user123',
+ questionUid: '3',
+ userAnswerUid: 'c2',
+ correctAnswer: false,
+ createdAt: new Date(),
+ updatedAt: new Date(),
+ questionDate: '2023-01-03',
+ timeTaken: 30,
+ difficulty: 'MEDIUM',
+ },
+ ],
+ },
+];
+
+// Triple the questions to ensure smooth infinite scroll
+const allQuestions = [...questions, ...questions, ...questions];
+
+// Mock study path
+const studyPath: Partial = {
+ slug: 'javascript-fundamentals',
+ title: 'JavaScript Fundamentals',
+ description: 'Learn the fundamentals of JavaScript programming',
+ heroChip: 'Master JavaScript from scratch',
+ questionSlugs: ['javascript-variables', 'javascript-arrays', 'javascript-functions'],
+ educationLevel: 'beginner',
+};
+
+export default function InfiniteScrollingRoadmapCards({ className }: { className?: string }) {
+ return (
+ <>
+ {/** 'infinite' scrolling animation of the study path buttons. */}
+ {/* Scrolling content */}
+
+ {/** top fade effect */}
+
+
+
+ {/* First set of items */}
+
+
+ {/* Clone of the first set to create seamless loop */}
+
+
+
+
+ {/* Bottom fade effect */}
+
+
+
+ {children}
+
+
+
+ );
+}
diff --git a/src/components/ui/icons/tiktok.tsx b/src/components/ui/icons/tiktok.tsx
new file mode 100644
index 000000000..cf1d9d24a
--- /dev/null
+++ b/src/components/ui/icons/tiktok.tsx
@@ -0,0 +1,13 @@
+import { SVGProps } from 'react';
+
+export default function TikTokLogo(props: SVGProps) {
+ return (
+
+ {/* Icon from Google Material Icons by Material Design Authors - https://github.com/material-icons/material-icons/blob/master/LICENSE */}
+
+ );
+}
diff --git a/src/hooks/use-onboarding-steps.ts b/src/hooks/use-onboarding-steps.ts
index 2b76ead67..2d0a2e50c 100644
--- a/src/hooks/use-onboarding-steps.ts
+++ b/src/hooks/use-onboarding-steps.ts
@@ -6,15 +6,16 @@ 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';
+
+// Toggle for admin to skip initial questions
+const ADMIN_SKIP_INITIAL_QUESTIONS = true;
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!
TIME_COMMITMENT: 'TIME_COMMITMENT', // get the users daily coding goal
NOTIFICATIONS: 'NOTIFICATIONS', // offer push notifications
- TAGS: 'TAGS', // get the users interests
- PRICING: 'PRICING', // get the users pricing plan
- QUESTIONS: 'QUESTIONS', // get the users questions
FIRST_QUESTION_SELECTION: 'FIRST_QUESTION_SELECTION', // get the users first question (either send them to the first question or the tag selection)
} as const;
@@ -27,11 +28,10 @@ export function useOnboardingSteps() {
const {
serverUser,
user,
- handleGetOnboardingQuestions,
canContinue,
+ setCanContinue,
timeSpendingPerDay,
firstQuestionSelection,
- FIRST_QUESTION_TUTORIAL_SLUG,
totalXp,
} = useOnboardingContext();
const [isLoading, setIsLoading] = useState(false);
@@ -69,34 +69,17 @@ export function useOnboardingSteps() {
component: 'OnboardingNotifications',
},
[STEPS.FIRST_QUESTION_SELECTION]: {
- next: STEPS.TAGS,
+ next: 'ROADMAP_PAGE',
component: 'OnboardingFirstQuestionSelection',
},
- [STEPS.TAGS]: {
- next: STEPS.PRICING,
- component: 'OnboardingTags',
- },
- [STEPS.PRICING]: {
- next: STEPS.QUESTIONS,
- component: 'OnboardingPricing',
- },
- [STEPS.QUESTIONS]: {
- next: 'DASHBOARD',
- component: 'OnboardingQuestions',
- },
} as const;
const handleSkip = () => {
- const nextStep = stepConfig[currentStep].next;
- if (nextStep === 'DASHBOARD') {
+ const nextStep = stepConfig[currentStep]?.next;
+ if (nextStep === 'ROADMAP_PAGE') {
localStorage.removeItem('onboarding');
window.location.hash = '';
- router.push('/dashboard?onboarding=true');
- }
- // if the user is skipping past the tags, redirect to the dashboard
- else if (nextStep === STEPS.TAGS) {
- localStorage.removeItem('onboarding');
- router.push('/dashboard?onboarding=true');
+ router.push('/roadmaps?onboarding=true');
} else {
setCurrentStepState(nextStep as StepKey);
}
@@ -107,51 +90,59 @@ 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'
) {
- setCurrentStepState(STEPS.PRICING);
- 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
+ // Navigate to roadmap instead of QUESTIONS step
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);
+ router.push('/roadmaps?onboarding=true');
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();
- // send the welcome email
- await sendWelcomeEmail(serverUser, coupon?.name ?? '');
+
+ // Check if welcome email has already been sent
+ const storageKey = serverUser?.email
+ ? `welcome-email-sent_${serverUser.email}`
+ : 'welcome-email-sent';
+ const { value: welcomeEmailSent, setValue: setWelcomeEmailSent } = useLocalStorage({
+ defaultValue: false,
+ key: storageKey,
+ });
+
+ if (!welcomeEmailSent) {
+ await sendWelcomeEmail(serverUser, coupon?.name ?? '');
+ setWelcomeEmailSent(true);
+ }
+ }
+
+ // 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');
+ setCurrentStepState(STEPS.TIME_COMMITMENT);
+ } else {
+ setCurrentStepState(stepConfig[STEPS.USER_DETAILS].next as StepKey);
}
+ return;
+ }
- 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
+ // Handle initial questions step
+ if (currentStep === STEPS.INITIAL_QUESTIONS) {
const userXpValue = typeof totalXp === 'number' && !isNaN(totalXp) ? totalXp : 0;
try {
@@ -162,24 +153,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 === 'ROADMAP_PAGE') {
+ localStorage.removeItem('onboarding');
+ router.push('/roadmaps?onboarding=true');
+ } else {
+ setCurrentStepState(nextStep as StepKey);
}
} catch (error) {
console.error('Error during continue:', error);
@@ -189,17 +179,22 @@ export function useOnboardingSteps() {
};
const handleBack = () => {
- // 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);
+ // if we're on the first step, we shouldn't go back
+ if (currentStep === STEPS.USER_DETAILS) {
return;
}
+ // 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);
}
};
@@ -209,7 +204,24 @@ 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 (USER_DETAILS)
+ if (currentStep === STEPS.USER_DETAILS) {
+ return false;
+ }
+
+ // Show back button on all other steps
+ return true;
};
return {
@@ -219,6 +231,7 @@ export function useOnboardingSteps() {
handleContinue,
handleBack,
showSkipButton,
+ showBackButton,
stepConfig,
};
}
diff --git a/src/lib/onborda.tsx b/src/lib/onborda.tsx
index 643794fa6..1d5b3cbbb 100644
--- a/src/lib/onborda.tsx
+++ b/src/lib/onborda.tsx
@@ -1,6 +1,6 @@
import { Tour } from 'onborda/dist/types';
-export const steps = (): Tour[] => [
+export const questionPageSteps = (): Tour[] => [
{
tour: 'question-tour',
steps: [
@@ -76,3 +76,39 @@ export const steps = (): Tour[] => [
],
},
];
+
+export const roadmapPageSteps = (nextRoute: string, prevRoute: string): Tour[] => [
+ {
+ tour: 'roadmap-tour',
+ steps: [
+ {
+ content: (
+ <>
+ Each roadmap is a collection of coding challenges aimed to help you prepare for your
+ first job in tech.
+
+ ),
+ selector: '#first-roadmap-category',
+ side: 'bottom-left',
+ showControls: true,
+ pointerPadding: -1,
+ pointerRadius: 24,
+ icon: <>,
+ title: 'Your first roadmap',
+ nextRoute,
+ },
+ {
+ content:
+ 'Here you can find each subsection of the roadmap. Giving you a brief concept of what this section is about.',
+ selector: '#roadmap-list',
+ side: 'bottom-left',
+ showControls: true,
+ pointerPadding: -1,
+ pointerRadius: 24,
+ icon: <>,
+ title: 'Roadmap Description',
+ prevRoute,
+ },
+ ],
+ },
+];
diff --git a/src/utils/constants/misc.ts b/src/utils/constants/misc.ts
index 6a1195bfc..25474c98e 100644
--- a/src/utils/constants/misc.ts
+++ b/src/utils/constants/misc.ts
@@ -1,3 +1,3 @@
-export const QUESTIONS_COUNT = 330;
+export const QUESTIONS_COUNT = 350;
export const ROADMAP_QUESTION_COUNT = 6;