info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-27 11:09:53 +02:00
Code Issues Releases Wiki Activity

Roadmap personalization

Browse Source
This commit is contained in:
Kamran Ahmed
2025-07-29 18:42:30 +01:00
parent 9aec7484f6
commit 7f1da76f38
10 changed files with 314 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.astro/settings.json
View File

@@ -3,6 +3,6 @@
"enabled": false
},
"_variables": {
"lastUpdateCheck": 1750679157111
"lastUpdateCheck": 1753810743067
}
}

184
src/components/PersonalizedRoadmap/PersonalizedRoadmap.tsx
View File

@@ -1,11 +1,12 @@
import { Loader2Icon, PersonStandingIcon } from 'lucide-react';
import { useCallback, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { usePersonalizedRoadmap } from '../../hooks/use-personalized-roadmap';
import {
refreshProgressCounters,
renderTopicProgress,
} from '../../lib/resource-progress';
import { PersonalizedRoadmapModal } from './PersonalizedRoadmapModal';
import { PersonalizedRoadmapSwitcher } from './PersonalizedRoadmapSwitcher';
import { useMutation, useQuery } from '@tanstack/react-query';
import { httpPost } from '../../lib/query-http';
import { useToast } from '../../hooks/use-toast';
@@ -14,13 +15,6 @@ import { userResourceProgressOptions } from '../../queries/resource-progress';
import { useAuth } from '../../hooks/use-auth';
import { roadmapJSONOptions } from '../../queries/roadmap';
type BulkUpdateResourceProgressBody = {
done: string[];
learning: string[];
skipped: string[];
pending: string[];
};
type PersonalizedRoadmapProps = {
roadmapId: string;
};
@@ -31,6 +25,7 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
const toast = useToast();
const currentUser = useAuth();
const [isModalOpen, setIsModalOpen] = useState(false);
const [isPersonalized, setIsPersonalized] = useState(false);
const { data: roadmap } = useQuery(
roadmapJSONOptions(roadmapId),
@@ -42,6 +37,12 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
queryClient,
);
useEffect(() => {
if (userProgress?.personalized) {
setIsPersonalized(true);
}
}, [userProgress]);
const alreadyInProgressNodeIds = useMemo(() => {
return new Set([
...(userProgress?.learning ?? []),
@@ -68,28 +69,33 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
localStorage.removeItem(`roadmap-${roadmapId}-${currentUser?.id}-favorite`);
}, [roadmapId, currentUser]);
const {
mutate: bulkUpdateResourceProgress,
isPending: isBulkUpdating,
mutateAsync: bulkUpdateResourceProgressAsync,
} = useMutation(
{
mutationFn: (body: BulkUpdateResourceProgressBody) => {
return httpPost(`/v1-bulk-update-resource-progress/${roadmapId}`, body);
const { mutate: savePersonalization, isPending: isSavingPersonalization } =
useMutation(
{
mutationFn: (data: { topicIds: string[]; information: string }) => {
const remainingTopicIds = allPendingNodeIds.filter(
(nodeId) => !data.topicIds.includes(nodeId),
);
return httpPost(`/v1-save-personalization/${roadmapId}`, {
personalized: {
...data,
topicIds: remainingTopicIds,
},
});
},
onError: (error) => {
toast.error(error?.message ?? 'Failed to save personalization');
},
onSuccess: () => {
clearResourceProgressLocalStorage();
refetchUserProgress();
refreshProgressCounters();
toast.success('Personalization saved successfully');
},
},
onError: (error) => {
toast.error(
error?.message ?? 'Something went wrong, please try again.',
);
},
onSuccess: () => {
clearResourceProgressLocalStorage();
refetchUserProgress();
refreshProgressCounters();
},
},
queryClient,
);
queryClient,
);
const { generatePersonalizedRoadmap, status } = usePersonalizedRoadmap({
roadmapId,
@@ -107,55 +113,67 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
});
},
onFinish: (data) => {
const { topicIds } = data;
const remainingTopicIds = allPendingNodeIds.filter(
(nodeId) => !topicIds.includes(nodeId),
);
bulkUpdateResourceProgress({
skipped: remainingTopicIds,
learning: [],
done: [],
pending: [],
});
const { topicIds, information } = data;
savePersonalization({ topicIds, information });
},
});
const { mutate: clearResourceProgress, isPending: isClearing } = useMutation(
const { mutate: clearPersonalization, isPending: isClearing } = useMutation(
{
mutationFn: (pendingTopicIds: string[]) => {
return bulkUpdateResourceProgressAsync({
skipped: [],
learning: [],
done: [],
pending: pendingTopicIds,
});
mutationFn: () => {
return httpPost(`/v1-clear-roadmap-personalization/${roadmapId}`, {});
},
onError: (error) => {
toast.error(
error?.message ?? 'Something went wrong, please try again.',
);
toast.error(error?.message ?? 'Failed to clear personalization');
},
onSuccess: (_, pendingTopicIds) => {
for (const topicId of pendingTopicIds) {
onSuccess: () => {
// Reset all topics to pending state
allPendingNodeIds.forEach((topicId) => {
renderTopicProgress(topicId, 'pending');
}
});
toast.success('Progress cleared successfully.');
clearResourceProgressLocalStorage();
refreshProgressCounters();
setIsPersonalized(false);
toast.success('Personalization cleared successfully.');
refetchUserProgress();
},
},
queryClient,
);
const isGenerating = status !== 'idle' || isBulkUpdating || isClearing;
const isGenerating =
status !== 'idle' || isClearing || isSavingPersonalization;
const handleTogglePersonalization = (showPersonalized: boolean) => {
setIsPersonalized(showPersonalized);
if (!showPersonalized) {
const allTopicIds = allPendingNodeIds;
allTopicIds.forEach((topicId) => {
renderTopicProgress(topicId, 'pending');
});
} else if (userProgress?.personalized) {
const { topicIds } = userProgress.personalized;
const remainingTopicIds = allPendingNodeIds.filter(
(nodeId) => !topicIds.includes(nodeId),
);
remainingTopicIds.forEach((topicId) => {
renderTopicProgress(topicId, 'skipped');
});
topicIds.forEach((topicId) => {
if (!alreadyInProgressNodeIds.has(topicId)) {
renderTopicProgress(topicId, 'pending');
}
});
}
};
return (
<>
{isModalOpen && (
<PersonalizedRoadmapModal
info={userProgress?.personalized?.information ?? ''}
onClose={() => setIsModalOpen(false)}
onSubmit={(information) => {
for (const nodeId of allPendingNodeIds) {
@@ -166,29 +184,41 @@ export function PersonalizedRoadmap(props: PersonalizedRoadmapProps) {
}}
onClearProgress={() => {
setIsModalOpen(false);
const prevSkipped = userProgress?.skipped ?? [];
clearResourceProgress(prevSkipped);
clearPersonalization();
}}
/>
)}
<button
className="group inline-flex items-center gap-1.5 border-b-2 border-b-transparent px-2 pb-2.5 text-sm font-normal text-gray-400 transition-colors hover:text-gray-700"
onClick={() => setIsModalOpen(true)}
disabled={isGenerating}
>
{isGenerating ? (
<>
<Loader2Icon className="h-4 w-4 shrink-0 animate-spin" />
<span>Personalizing...</span>
</>
) : (
<>
<PersonStandingIcon className="h-4 w-4 shrink-0" />
<span>Personalize</span>
</>
)}
</button>
{userProgress?.personalized?.information ? (
<PersonalizedRoadmapSwitcher
isPersonalized={isPersonalized}
onToggle={handleTogglePersonalization}
onEdit={() => setIsModalOpen(true)}
onRemove={() => {
if (confirm('Are you sure you want to remove personalization?')) {
clearPersonalization();
}
}}
/>
) : (
<button
className="group inline-flex items-center gap-1.5 border-b-2 border-b-transparent px-2 pb-2.5 text-sm font-normal text-gray-400 transition-colors hover:text-gray-700"
onClick={() => setIsModalOpen(true)}
disabled={isGenerating}
>
{isGenerating ? (
<>
<Loader2Icon className="h-4 w-4 shrink-0 animate-spin" />
<span>Personalizing...</span>
</>
) : (
<>
<PersonStandingIcon className="h-4 w-4 shrink-0" />
<span>Personalize</span>
</>
)}
</button>
)}
</>
);
}

58
src/components/PersonalizedRoadmap/PersonalizedRoadmapForm.tsx
View File

@@ -1,58 +0,0 @@
import { PersonStandingIcon, XIcon } from 'lucide-react';
import { useId, useState, type FormEvent } from 'react';
type PersonalizedRoadmapFormProps = {
info?: string;
onSubmit: (info: string) => void;
onClearProgress: () => void;
};
export function PersonalizedRoadmapForm(props: PersonalizedRoadmapFormProps) {
const { info: defaultInfo, onSubmit, onClearProgress } = props;
const [info, setInfo] = useState(defaultInfo || '');
const infoFieldId = useId();
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
onSubmit(info);
};
return (
<form onSubmit={handleSubmit} className="p-4">
<h2 className="text-lg font-semibold">Personalize Roadmap</h2>
<div className="mt-0.5 flex flex-col gap-2">
<label htmlFor={infoFieldId} className="text-balance text-gray-600">
Tell us about yourself to personlize this roadmap as per your goals
and experience
</label>
<textarea
id={infoFieldId}
className="h-[150px] w-full resize-none rounded-xl border border-gray-200 p-3 focus:border-gray-500 focus:outline-none"
placeholder="I already know about HTML, CSS, and JavaScript..."
value={info}
onChange={(e) => setInfo(e.target.value)}
autoFocus
/>
</div>
<div className="mt-2 grid grid-cols-2 gap-2">
<button
type="button"
className="flex items-center justify-center gap-2 rounded-xl border border-gray-200 p-2 px-2 text-gray-600 hover:bg-gray-100 focus:outline-none"
onClick={onClearProgress}
>
<XIcon className="h-4 w-4" />
Clear Personalized
</button>
<button
type="submit"
className="flex items-center justify-center gap-2 rounded-xl bg-black p-2 px-2 text-white hover:opacity-90 focus:outline-none"
>
<PersonStandingIcon className="h-4 w-4" />
Personalize
</button>
</div>
</form>
);
}

55
src/components/PersonalizedRoadmap/PersonalizedRoadmapModal.tsx
View File

@@ -1,23 +1,62 @@
import { usePersonalizedRoadmap } from '../../hooks/use-personalized-roadmap';
import { renderTopicProgress } from '../../lib/resource-progress';
import { PersonStandingIcon, XIcon } from 'lucide-react';
import { useId, useState, type FormEvent } from 'react';
import { Modal } from '../Modal';
import { PersonalizedRoadmapForm } from './PersonalizedRoadmapForm';
type PersonalizedRoadmapModalProps = {
onClose: () => void;
info: string;
onSubmit: (information: string) => void;
onClearProgress: () => void;
};
export function PersonalizedRoadmapModal(props: PersonalizedRoadmapModalProps) {
const { onClose, onSubmit, onClearProgress } = props;
const { onClose, info: infoProp, onSubmit: onSubmitProp, onClearProgress } = props;
const [info, setInfo] = useState(infoProp);
const infoFieldId = useId();
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
onSubmitProp(info);
};
return (
<Modal onClose={onClose} bodyClassName="rounded-2xl">
<PersonalizedRoadmapForm
onSubmit={onSubmit}
onClearProgress={onClearProgress}
/>
<form onSubmit={handleSubmit} className="p-4">
<h2 className="text-lg font-semibold">Personalize Roadmap</h2>
<div className="mt-0.5 flex flex-col gap-2">
<label htmlFor={infoFieldId} className="text-balance text-gray-600">
Tell us about yourself to personlize this roadmap as per your goals
and experience
</label>
<textarea
id={infoFieldId}
className="h-[150px] w-full resize-none rounded-xl border border-gray-200 p-3 focus:border-gray-500 focus:outline-none"
placeholder="I already know about HTML, CSS, and JavaScript..."
value={info}
onChange={(e) => setInfo(e.target.value)}
autoFocus
/>
</div>
<div className="mt-2 grid grid-cols-2 gap-2">
<button
type="button"
className="flex items-center justify-center gap-2 rounded-xl border border-gray-200 p-2 px-2 text-gray-600 hover:bg-gray-100 focus:outline-none"
onClick={onClearProgress}
>
<XIcon className="h-4 w-4" />
Clear Personalized
</button>
<button
type="submit"
className="flex items-center justify-center gap-2 rounded-xl bg-black p-2 px-2 text-white hover:opacity-90 focus:outline-none"
>
<PersonStandingIcon className="h-4 w-4" />
Personalize
</button>
</div>
</form>
</Modal>
);
}

99
src/components/PersonalizedRoadmap/PersonalizedRoadmapSwitcher.tsx Normal file
View File

@@ -0,0 +1,99 @@
import { PencilIcon, XIcon, MoreVertical } from 'lucide-react';
import { cn } from '../../lib/classname';
import { useState, useRef, useEffect } from 'react';
type PersonalizedRoadmapSwitcherProps = {
isPersonalized: boolean;
onToggle: (isPersonalized: boolean) => void;
onEdit: () => void;
onRemove: () => void;
className?: string;
};
export function PersonalizedRoadmapSwitcher(
props: PersonalizedRoadmapSwitcherProps,
) {
const { isPersonalized, onToggle, onEdit, onRemove, className } = props;
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node)
) {
setIsDropdownOpen(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return (
<div className={cn('mb-2 flex items-center gap-2', className)}>
<div className="relative flex items-center">
<div className="relative" ref={dropdownRef}>
<button
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
className="mr-0.5 p-1 text-gray-400 hover:text-gray-600"
title="More options"
>
<MoreVertical className="h-3.5 w-3.5" />
</button>
{isDropdownOpen && (
<div className="absolute top-full left-0 z-20 mt-1 rounded-md border border-gray-200 bg-white shadow-lg">
<button
onClick={() => {
onEdit();
setIsDropdownOpen(false);
}}
className="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 hover:bg-gray-100"
>
<PencilIcon className="h-3.5 w-3.5" />
Edit
</button>
<button
onClick={() => {
onRemove();
setIsDropdownOpen(false);
}}
className="flex w-full items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50"
>
<XIcon className="h-3.5 w-3.5" />
Delete
</button>
</div>
)}
</div>
<div className="flex">
<button
className={cn(
'rounded-full px-2.5 py-1 text-xs font-medium transition-all',
isPersonalized
? 'bg-gray-900 text-white'
: 'text-gray-500 hover:text-gray-700',
)}
onClick={() => onToggle(true)}
>
Personalized
</button>
<button
className={cn(
'rounded-full px-2.5 py-1 text-xs font-medium transition-all',
!isPersonalized
? 'bg-gray-900 text-white'
: 'text-gray-500 hover:text-gray-700',
)}
onClick={() => onToggle(false)}
>
Original
</button>
</div>
</div>
</div>
);
}

12
src/hooks/use-personalized-roadmap.ts
View File

@@ -5,6 +5,7 @@ import { flushSync } from 'react-dom';
type PersonalizedRoadmapResponse = {
topicIds: string[];
information: string;
};
type UsePersonalizedRoadmapOptions = {
@@ -26,8 +27,11 @@ export function usePersonalizedRoadmap(options: UsePersonalizedRoadmapOptions) {
'idle' | 'streaming' | 'loading' | 'ready' | 'error'
>('idle');
const informationRef = useRef<string>('');
const generatePersonalizedRoadmap = async (information: string) => {
try {
informationRef.current = information;
onStart?.();
setStatus('loading');
abortControllerRef.current?.abort();
@@ -70,7 +74,11 @@ export function usePersonalizedRoadmap(options: UsePersonalizedRoadmapOptions) {
onMessage: async (content) => {
flushSync(() => {
setStatus('streaming');
contentRef.current = parsePersonalizedRoadmapResponse(content);
const parsed = parsePersonalizedRoadmapResponse(content);
contentRef.current = {
...parsed,
information: informationRef.current
};
onData?.(contentRef.current);
});
},
@@ -120,7 +128,7 @@ export function usePersonalizedRoadmap(options: UsePersonalizedRoadmapOptions) {
export function parsePersonalizedRoadmapResponse(
response: string,
): PersonalizedRoadmapResponse {
): Omit<PersonalizedRoadmapResponse, 'information'> {
const topicIds: Set<string> = new Set();
const lines = response.split('\n');
for (const line of lines) {

124
src/lib/resource-progress.ts
View File

@@ -2,10 +2,10 @@ import Cookies from 'js-cookie';
import { httpGet, httpPost } from './http';
import { TOKEN_COOKIE_NAME, getUser } from './jwt';
import { roadmapProgress, totalRoadmapNodes } from '../stores/roadmap.ts';
// @ts-ignore
import Element = astroHTML.JSX.Element;
import { queryClient } from '../stores/query-client.ts';
import { userResourceProgressOptions } from '../queries/resource-progress.ts';
// @ts-ignore
import Element = astroHTML.JSX.Element;
export type ResourceType = 'roadmap' | 'best-practice';
export type ResourceProgressType =
@@ -61,6 +61,7 @@ export async function updateResourceProgress(
learning: string[];
skipped: string[];
isFavorite: boolean;
personalized: { topicIds: string[]; information: string };
}>(`${import.meta.env.PUBLIC_API_URL}/v1-update-resource-progress`, {
topicId,
resourceType,
@@ -72,13 +73,12 @@ export async function updateResourceProgress(
throw new Error(error?.message || 'Something went wrong');
}
setResourceProgress(
resourceType,
resourceId,
response.done,
response.learning,
response.skipped,
);
roadmapProgress.set({
done: response.done,
learning: response.learning,
skipped: response.skipped,
personalized: response.personalized,
});
queryClient.setQueryData(
userResourceProgressOptions(resourceType, resourceId).queryKey,
@@ -174,65 +174,31 @@ export function clearMigratedRoadmapProgress(
export async function getResourceProgress(
resourceType: 'roadmap' | 'best-practice',
resourceId: string,
): Promise<{ done: string[]; learning: string[]; skipped: string[] }> {
): Promise<{
done: string[];
learning: string[];
skipped: string[];
personalized: { topicIds: string[]; information: string };
}> {
// No need to load progress if user is not logged in
if (!Cookies.get(TOKEN_COOKIE_NAME)) {
return {
done: [],
learning: [],
skipped: [],
personalized: {
topicIds: [],
information: '',
},
};
}
const userId = getUser()?.id;
const progressKey = `${resourceType}-${resourceId}-${userId}-progress`;
const isFavoriteKey = `${resourceType}-${resourceId}-favorite`;
const rawIsFavorite = localStorage.getItem(isFavoriteKey);
const isFavorite = JSON.parse(rawIsFavorite || '0') === 1;
const rawProgress = localStorage.getItem(progressKey);
const progress = JSON.parse(rawProgress || 'null');
const progressTimestamp = progress?.timestamp;
const diff = new Date().getTime() - parseInt(progressTimestamp || '0', 10);
const isProgressExpired = diff > 15 * 60 * 1000; // 15 minutes
if (!progress || isProgressExpired) {
return loadFreshProgress(resourceType, resourceId);
} else {
setResourceProgress(
resourceType,
resourceId,
progress?.done || [],
progress?.learning || [],
progress?.skipped || [],
);
}
// Dispatch event to update favorite status in the MarkFavorite component
window.dispatchEvent(
new CustomEvent('mark-favorite', {
detail: {
resourceType,
resourceId,
isFavorite,
},
}),
);
return progress;
}
export async function loadFreshProgress(
resourceType: ResourceType,
resourceId: string,
) {
const { response, error } = await httpGet<{
done: string[];
learning: string[];
skipped: string[];
isFavorite: boolean;
personalized: { topicIds: string[]; information: string };
}>(`${import.meta.env.PUBLIC_API_URL}/v1-get-user-resource-progress`, {
resourceType,
resourceId,
@@ -244,16 +210,19 @@ export async function loadFreshProgress(
done: [],
learning: [],
skipped: [],
personalized: {
topicIds: [],
information: '',
},
};
}
setResourceProgress(
resourceType,
resourceId,
response?.done || [],
response?.learning || [],
response?.skipped || [],
);
roadmapProgress.set({
done: response.done,
learning: response.learning,
skipped: response.skipped,
personalized: response.personalized,
});
// Dispatch event to update favorite status in the MarkFavorite component
window.dispatchEvent(
@@ -269,31 +238,6 @@ export async function loadFreshProgress(
return response;
}
export function setResourceProgress(
resourceType: 'roadmap' | 'best-practice',
resourceId: string,
done: string[],
learning: string[],
skipped: string[],
): void {
roadmapProgress.set({
done,
learning,
skipped,
});
const userId = getUser()?.id;
localStorage.setItem(
`${resourceType}-${resourceId}-${userId}-progress`,
JSON.stringify({
done,
learning,
skipped,
timestamp: new Date().getTime(),
}),
);
}
export function topicSelectorAll(
topicId: string,
parentElement: Document | SVGElement | HTMLDivElement = document,
@@ -381,6 +325,10 @@ export async function renderResourceProgress(
done = [],
learning = [],
skipped = [],
personalized = {
topicIds: [],
information: '',
},
} = (await getResourceProgress(resourceType, resourceId)) || {};
done.forEach((topicId) => {
@@ -395,6 +343,10 @@ export async function renderResourceProgress(
renderTopicProgress(topicId, 'skipped');
});
personalized.topicIds.forEach((topicId: string) => {
renderTopicProgress(topicId, 'skipped');
});
refreshProgressCounters();
}

3
src/pages/[roadmapId]/index.astro
View File

@@ -99,7 +99,6 @@ const courses = roadmapData.courses || [];
/>
<TopicDetail
resourceTitle={roadmapData.title}
resourceId={roadmapId}
resourceType='roadmap'
renderer={roadmapData.renderer}
@@ -139,7 +138,7 @@ const courses = roadmapData.courses || [];
</div>
</div>
<div class='container relative max-w-[1000px]!'>
<div class='relative container max-w-[1000px]!'>
<ShareIcons
resourceId={roadmapId}
resourceType='roadmap'

4
src/queries/resource-progress.ts
View File

@@ -8,6 +8,10 @@ export type GetUserResourceProgressResponse = {
learning: string[];
skipped: string[];
isFavorite: boolean;
personalized?: {
topicIds: string[];
information: string;
};
};
export function userResourceProgressOptions(

9
src/stores/roadmap.ts
View File

@@ -12,7 +12,12 @@ export const canManageCurrentRoadmap = computed(
);
export const roadmapProgress = atom<
{ done: string[]; learning: string[]; skipped: string[] } | undefined
| {
done: string[];
learning: string[];
skipped: string[];
personalized: { topicIds: string[]; information: string };
}
| undefined
>();
export const totalRoadmapNodes = atom<number | undefined>();