feat: add all page views

Small Alignment correction

.env.example

@@ -1,2 +1,3 @@
-PUBLIC_API_URL=http://api.roadmap.sh
+PUBLIC_API_URL=https://api.roadmap.sh
 PUBLIC_AVATAR_BASE_URL=https://dodrc8eu8m09s.cloudfront.net/avatars
+PUBLIC_EDITOR_APP_URL=https://draw.roadmap.sh

.github/ISSUE_TEMPLATE/04-roadmap-contribution.yml

@@ -14,24 +14,12 @@ body:
       placeholder: e.g. Roadmap to learn Data Science
     validations:
       required: true
-  - type: dropdown
-    id: browsers
-    attributes:
-      label: Is this roadmap prepared by you or someone else?
-      options:
-        - I prepared this roadmap
-        - I found this roadmap online (please provide a link below)
   - type: textarea
     id: roadmap-description
     attributes:
-      label: Roadmap Items
-      description: Please submit a nested list of items which we can convert into the visual. Here is an [example of roadmap items list.](https://gist.github.com/kamranahmedse/98758d2c73799b3a6ce17385e4c548a5).
+      label: Roadmap Link
+      description: Please create the roadmap [using our roadmap editor](https://twitter.com/kamrify/status/1708293162693767426) and submit the roadmap link.
       placeholder: |
-          - Item 1
-            - Subitem 1
-            - Subitem 2
-          - Item 2
-            - Subitem 1
-            - Subitem 2
+          https://roadmap.sh/xyz
     validations:
-      required: true
+      required: true

.github/workflows/deployment.yml

@@ -1,24 +1,26 @@
-name: Deployment to GH Pages
+name: App Deployment
 on:
   push:
     branches: [ master ]
 env:
   PUBLIC_API_URL: "https://api.roadmap.sh"
+  PUBLIC_EDITOR_APP_URL: "https://draw.roadmap.sh"
   PUBLIC_AVATAR_BASE_URL: "https://dodrc8eu8m09s.cloudfront.net/avatars"
   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-  PAT: ${{ secrets.PAT }}
   CI: true
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
       with:
         persist-credentials: false
     - uses: actions/setup-node@v1
       with:
         node-version: 18
-    - run: git config --global url."https://${{ secrets.PAT }}@github.com/".insteadOf ssh://git@github.com/
+    - name: Prepare Draw Repository
+      run: |
+        git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
     - uses: pnpm/action-setup@v2.2.2
       with:
         version: 7.13.4
@@ -27,6 +29,7 @@ jobs:
         pnpm install
     - name: Generate meta and build
       run: |
+        npm run generate-renderer
         npm run build
         touch ./dist/.nojekyll
         echo 'roadmap.sh' > ./dist/CNAME

.github/workflows/update-deps.yml

@@ -9,7 +9,7 @@ jobs:
   upgrade-deps:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - uses: actions/setup-node@v3
         with:
           node-version: 18

.gitignore

@@ -1,4 +1,5 @@
 .idea
+.temp
 
 # build output
 dist/
@@ -27,3 +28,6 @@ pnpm-debug.log*
 /playwright/.cache/
 tests-examples
 *.csv
+
+/editor/*
+!/editor/readonly-editor.tsx

.npmrc

@@ -1 +1,2 @@
-auto-install-peers=true
+auto-install-peers=true
+strict-peer-dependencies=false

.prettierrc.cjs

@@ -13,6 +13,6 @@ module.exports = {
   ],
   plugins: [
     require.resolve('prettier-plugin-astro'),
-    require('prettier-plugin-tailwindcss'),
+    'prettier-plugin-tailwindcss',
   ],
 };

editor/readonly-editor.tsx

@@ -0,0 +1,14 @@
+export function ReadonlyEditor(props: any) {
+  return (
+    <div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black">
+      <h2 className="mb-2 text-xl font-semibold">Private Component</h2>
+      <p className="mb-4">
+        Renderer is a private component. If you are a collaborator and have
+        access to it. Run the following command:
+      </p>
+      <code className="mt-5 rounded-md bg-gray-800 p-2 text-white">
+        npm run generate-renderer
+      </code>
+    </div>
+  );
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "roadmap.sh",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "astro dev --port 3000",
@@ -16,48 +16,54 @@
     "roadmap-links": "node scripts/roadmap-links.cjs",
     "roadmap-dirs": "node scripts/roadmap-dirs.cjs",
     "roadmap-content": "node scripts/roadmap-content.cjs",
+    "generate-renderer": "sh scripts/generate-renderer.sh",
     "best-practice-dirs": "node scripts/best-practice-dirs.cjs",
     "best-practice-content": "node scripts/best-practice-content.cjs",
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/react": "^3.0.0",
-    "@astrojs/sitemap": "^1.3.3",
-    "@astrojs/tailwind": "^5.0.0",
-    "@fingerprintjs/fingerprintjs": "^3.4.1",
+    "@astrojs/react": "^3.0.9",
+    "@astrojs/sitemap": "^3.0.5",
+    "@astrojs/tailwind": "^5.1.0",
+    "@fingerprintjs/fingerprintjs": "^4.2.1",
     "@nanostores/react": "^0.7.1",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
-    "astro": "^3.0.5",
-    "astro-compress": "^2.0.8",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "astro": "^4.2.1",
+    "astro-compress": "^2.2.8",
+    "clsx": "^2.1.0",
     "dracula-prism": "^2.1.13",
-    "jose": "^4.14.4",
+    "jose": "^5.2.0",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.274.0",
-    "nanostores": "^0.9.2",
-    "node-html-parser": "^6.1.5",
-    "npm-check-updates": "^16.10.12",
+    "lucide-react": "^0.300.0",
+    "nanoid": "^5.0.4",
+    "nanostores": "^0.9.5",
+    "node-html-parser": "^6.1.12",
+    "npm-check-updates": "^16.14.12",
     "prismjs": "^1.29.0",
-    "react": "^18.0.0",
+    "react": "^18.2.0",
     "react-confetti": "^6.1.0",
-    "react-dom": "^18.0.0",
-    "rehype-external-links": "^2.1.0",
+    "react-dom": "^18.2.0",
+    "reactflow": "^11.10.2",
+    "rehype-external-links": "^3.0.0",
     "roadmap-renderer": "^1.0.6",
     "slugify": "^1.6.6",
-    "tailwindcss": "^3.3.3"
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss": "^3.4.1",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.35.1",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/js-cookie": "^3.0.3",
-    "@types/prismjs": "^1.26.0",
+    "@playwright/test": "^1.41.1",
+    "@tailwindcss/typography": "^0.5.10",
+    "@types/js-cookie": "^3.0.6",
+    "@types/prismjs": "^1.26.3",
     "csv-parser": "^3.0.0",
-    "gh-pages": "^5.0.0",
+    "gh-pages": "^6.1.1",
     "js-yaml": "^4.1.0",
-    "markdown-it": "^13.0.1",
-    "openai": "^3.3.0",
-    "prettier": "^2.8.8",
-    "prettier-plugin-astro": "^0.10.0",
-    "prettier-plugin-tailwindcss": "^0.3.0"
+    "markdown-it": "^14.0.0",
+    "openai": "^4.25.0",
+    "prettier": "^3.2.4",
+    "prettier-plugin-astro": "^0.12.3",
+    "prettier-plugin-tailwindcss": "^0.5.11"
   }
 }

public/images/hackernews.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
+    <path fill="#94a3b8" d="M5 5v22h22V5zm2 2h18v18H7zm4.5 4l3.5 6v5h2v-5l3.5-6h-2L16 15.281L13.5 11z"></path>
+</svg>

public/images/reddit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="#94a3b8" d="M288 568a56 56 0 1 0 112 0a56 56 0 1 0-112 0zm338.7 119.7c-23.1 18.2-68.9 37.8-114.7 37.8s-91.6-19.6-114.7-37.8c-14.4-11.3-35.3-8.9-46.7 5.5s-8.9 35.3 5.5 46.7C396.3 771.6 457.5 792 512 792s115.7-20.4 155.9-52.1a33.25 33.25 0 1 0-41.2-52.2zM960 456c0-61.9-50.1-112-112-112c-42.1 0-78.7 23.2-97.9 57.6c-57.6-31.5-127.7-51.8-204.1-56.5L612.9 195l127.9 36.9c11.5 32.6 42.6 56.1 79.2 56.1c46.4 0 84-37.6 84-84s-37.6-84-84-84c-32 0-59.8 17.9-74 44.2L603.5 123a33.2 33.2 0 0 0-39.6 18.4l-90.8 203.9c-74.5 5.2-142.9 25.4-199.2 56.2A111.94 111.94 0 0 0 176 344c-61.9 0-112 50.1-112 112c0 45.8 27.5 85.1 66.8 102.5c-7.1 21-10.8 43-10.8 65.5c0 154.6 175.5 280 392 280s392-125.4 392-280c0-22.6-3.8-44.5-10.8-65.5C932.5 541.1 960 501.8 960 456zM820 172.5a31.5 31.5 0 1 1 0 63a31.5 31.5 0 0 1 0-63zM120 456c0-30.9 25.1-56 56-56a56 56 0 0 1 50.6 32.1c-29.3 22.2-53.5 47.8-71.5 75.9a56.23 56.23 0 0 1-35.1-52zm392 381.5c-179.8 0-325.5-95.6-325.5-213.5S332.2 410.5 512 410.5S837.5 506.1 837.5 624S691.8 837.5 512 837.5zM868.8 508c-17.9-28.1-42.2-53.7-71.5-75.9c9-18.9 28.3-32.1 50.6-32.1c30.9 0 56 25.1 56 56c.1 23.5-14.5 43.7-35.1 52zM624 568a56 56 0 1 0 112 0a56 56 0 1 0-112 0z"></path></svg>

readme.md

@@ -9,8 +9,8 @@
     <a href="https://roadmap.sh/best-practices">
     	<img src="https://img.shields.io/badge/%E2%9C%A8-Best%20Practices-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="best practices" />
     </a>
-    <a href="https://youtube.com/theroadmap?sub_confirmation=1">
-    	<img src="https://img.shields.io/badge/%E2%9C%A8-Videos-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="videos" />
+    <a href="https://roadmap.sh/questions">
+    	<img src="https://img.shields.io/badge/%E2%9C%A8-Questions-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="videos" />
     </a>
     <a href="https://www.youtube.com/channel/UCA0H2KIWgWTwpTFjSxp0now?sub_confirmation=1">
     	<img src="https://img.shields.io/badge/%E2%9C%A8-YouTube%20Channel-0a0a0a.svg?style=flat&colorA=0a0a0a" alt="roadmaps" />
@@ -24,7 +24,7 @@
 
 Roadmaps are now interactive, you can click the nodes to read more about the topics.
 
-### [View all Roadmaps](https://roadmap.sh)
+### [View all Roadmaps](https://roadmap.sh) &nbsp;&middot;&nbsp; [Best Practices](https://roadmap.sh/best-practices) &nbsp;&middot;&nbsp; [Questions](https://roadmap.sh/questions)
 
 ![](https://i.imgur.com/waxVImv.png)
 
@@ -39,6 +39,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [QA Roadmap](https://roadmap.sh/qa)
 - [Python Roadmap](https://roadmap.sh/python)
 - [Software Architect Roadmap](https://roadmap.sh/software-architect)
+- [Game Developer Roadmap](https://roadmap.sh/game-developer) / [Server Side Game Developer](https://roadmap.sh/server-side-game-developer)
 - [Software Design and Architecture Roadmap](https://roadmap.sh/software-design-architecture)
 - [JavaScript Roadmap](https://roadmap.sh/javascript)
 - [TypeScript Roadmap](https://roadmap.sh/typescript)
@@ -52,6 +53,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Android Roadmap](https://roadmap.sh/android)
 - [Flutter Roadmap](https://roadmap.sh/flutter)
 - [Go Roadmap](https://roadmap.sh/golang)
+- [Rust Roadmap](https://roadmap.sh/rust)
 - [Java Roadmap](https://roadmap.sh/java)
 - [Spring Boot Roadmap](https://roadmap.sh/spring-boot)
 - [Design System Roadmap](https://roadmap.sh/design-system)
@@ -66,14 +68,20 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [UX Design Roadmap](https://roadmap.sh/ux-design)
 - [Docker Roadmap](https://roadmap.sh/docker)
 - [Prompt Engineering Roadmap](https://roadmap.sh/prompt-engineering)
+- [Technical Writer Roadmap](https://roadmap.sh/technical-writer)
 
-We have also added a new form of visual content covering best practices:
+There are also interactive best practices:
 
 - [Code Review Best Practices](https://roadmap.sh/best-practices/code-review)
 - [Frontend Performance Best Practices](https://roadmap.sh/best-practices/frontend-performance)
 - [API Security Best Practices](https://roadmap.sh/best-practices/api-security)
 - [AWS Best Practices](https://roadmap.sh/best-practices/aws)
 
+..and questions to help you test, rate and improve your knowledge
+
+- [JavaScript Questions](https://roadmap.sh/questions/javascript)
+- [React Questions](https://roadmap.sh/questions/react)
+
 ![](https://i.imgur.com/waxVImv.png)
 
 ## Share with the community

renderer/index.tsx

@@ -0,0 +1,14 @@
+export function Renderer(props: any) {
+  return (
+    <div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black">
+      <h2 className="mb-2 text-xl font-semibold">Private Component</h2>
+      <p className="mb-4">
+        Renderer is a private component. If you are a collaborator and have
+        access to it. Run the following command:
+      </p>
+      <code className="mt-5 rounded-md bg-gray-800 p-2 text-white">
+        npm run generate-renderer
+      </code>
+    </div>
+  );
+}

renderer/renderer.ts

@@ -0,0 +1,5 @@
+export function renderFlowJSON(data: any, options?: any) {
+  console.warn("renderFlowJSON is not implemented");
+  console.warn("run the following command to generate the renderer:");
+  console.warn("> npm run generate-renderer");
+}

scripts/generate-renderer.sh

@@ -0,0 +1,32 @@
+#!/usr/bin/env bash
+
+set -e
+
+# ignore cloning if .temp/web-draw already exists
+if [ ! -d ".temp/web-draw" ]; then
+  mkdir -p .temp
+  git clone git@github.com:roadmapsh/web-draw.git .temp/web-draw
+fi
+
+rm -rf editor
+mkdir editor
+
+# copy the files at /src/editor/* to /editor
+# while replacing any existing files
+cp -rf .temp/web-draw/src/editor/* editor
+
+# Add @ts-nocheck to the top of each ts and tsx file
+# so that the typescript compiler doesn't complain
+# about the missing types
+find editor -type f \( -name "*.ts" -o -name "*.tsx" \) -print0 | while IFS= read -r -d '' file; do
+  if [ -f "$file" ]; then
+    echo "// @ts-nocheck" > temp
+    cat "$file" >> temp
+    mv temp "$file"
+    echo "Added @ts-nocheck to $file"
+  fi
+done
+
+
+# ignore the worktree changes for the editor directory
+git update-index --assume-unchanged editor/readonly-editor.tsx

scripts/roadmap-content.cjs

@@ -19,13 +19,12 @@ if (!allowedRoadmapIds.includes(roadmapId)) {
 }
 
 const ROADMAP_CONTENT_DIR = path.join(ALL_ROADMAPS_DIR, roadmapId, 'content');
-const { Configuration, OpenAIApi } = require('openai');
-const configuration = new Configuration({
+const OpenAI = require('openai');
+
+const openai = new OpenAI({
   apiKey: OPEN_AI_API_KEY,
 });
 
-const openai = new OpenAIApi(configuration);
-
 function getFilesInFolder(folderPath, fileList = {}) {
   const files = fs.readdirSync(folderPath);
 
@@ -60,16 +59,16 @@ function writeTopicContent(currTopicUrl) {
 
   const roadmapTitle = roadmapId.replace(/-/g, ' ');
 
-  let prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${childTopic}". Write me with a brief summary of that. Content should be in markdown. I already know the benefits of each so do not add benefits in the output. Also include the code examples if applicable to this topic.`;
+  let prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${childTopic}". Write me a brief paragraph for that. Your output should be strictly markdown. Do not include anything other than the description in your output. I already know the benefits of each so do not add benefits in the output.`;
   if (!childTopic) {
-    prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${parentTopic}". Write me with a brief summary of that. Content should be in markdown. I already know the benefits of each so do not add benefits in the output. Also include the code examples if applicable to this topic.`;
+    prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${parentTopic}". Write me a brief paragraph for that. Your output should be strictly markdown. Do not include anything other than the description in your output. I already know the benefits of each so do not add benefits in the output.`;
   }
 
   console.log(`Generating '${childTopic || parentTopic}'...`);
 
   return new Promise((resolve, reject) => {
-    openai
-      .createChatCompletion({
+    openai.chat.completions
+      .create({
         model: 'gpt-4',
         messages: [
           {
@@ -79,7 +78,7 @@ function writeTopicContent(currTopicUrl) {
         ],
       })
       .then((response) => {
-        const article = response.data.choices[0].message.content;
+        const article = response.choices[0].message.content;
 
         resolve(article);
       })
@@ -92,7 +91,7 @@ function writeTopicContent(currTopicUrl) {
 async function writeFileForGroup(group, topicUrlToPathMapping) {
   const topicId = group?.properties?.controlName;
   const topicTitle = group?.children?.controls?.control?.find(
-    (control) => control?.typeID === 'Label'
+    (control) => control?.typeID === 'Label',
   )?.properties?.text;
   const currTopicUrl = topicId?.replace(/^\d+-/g, '/')?.replace(/:/g, '/');
   if (!currTopicUrl) {
@@ -138,15 +137,14 @@ async function writeFileForGroup(group, topicUrlToPathMapping) {
 async function run() {
   const topicUrlToPathMapping = getFilesInFolder(ROADMAP_CONTENT_DIR);
 
-  const roadmapJson = require(path.join(
-      ALL_ROADMAPS_DIR,
-      `${roadmapId}/${roadmapId}`
-  ));
+  const roadmapJson = require(
+    path.join(ALL_ROADMAPS_DIR, `${roadmapId}/${roadmapId}`),
+  );
 
   const groups = roadmapJson?.mockup?.controls?.control?.filter(
     (control) =>
       control.typeID === '__group__' &&
-      !control.properties?.controlName?.startsWith('ext_link')
+      !control.properties?.controlName?.startsWith('ext_link'),
   );
 
   if (!OPEN_AI_API_KEY) {

src/components/AccountSidebar.astro

@@ -2,6 +2,7 @@
 import AstroIcon from './AstroIcon.astro';
 import { TeamDropdown } from './TeamDropdown/TeamDropdown';
 import { SidebarFriendsCounter } from './Friends/SidebarFriendsCounter';
+import { Map } from 'lucide-react';
 
 export interface Props {
   activePageId: string;
@@ -26,10 +27,21 @@ const sidebarLinks = [
     href: '/account/friends',
     title: 'Friends',
     id: 'friends',
+    isNew: false,
+    icon: {
+      glyph: 'users',
+      classes: 'h-4 w-4',
+    },
+  },
+  {
+    href: '/account/roadmaps',
+    title: 'Roadmaps',
+    id: 'roadmaps',
     isNew: true,
     icon: {
       glyph: 'users',
       classes: 'h-4 w-4',
+      component: Map,
     },
   },
   {
@@ -85,7 +97,7 @@ const sidebarLinks = [
         }`}
       >
         <AstroIcon icon={'users'} class={`h-4 w-4 mr-2`} />
-        Teams
+         Teams
       </a>
     </li>
     {
@@ -100,10 +112,16 @@ const sidebarLinks = [
                 isActive ? 'bg-slate-100' : ''
               }`}
             >
-              <AstroIcon
-                icon={sidebarLink.icon.glyph}
-                class={`${sidebarLink.icon.classes} mr-2`}
-              />
+              {sidebarLink.icon.component ? (
+                <sidebarLink.icon.component
+                  className={`${sidebarLink.icon.classes} mr-2`}
+                />
+              ) : (
+                <AstroIcon
+                  icon={sidebarLink.icon.glyph}
+                  class={`${sidebarLink.icon.classes} mr-2`}
+                />
+              )}
               {sidebarLink.title}
             </a>
           </li>
@@ -136,21 +154,25 @@ const sidebarLinks = [
                     }`}
                   >
                     <span class='flex flex-grow items-center'>
-                      <AstroIcon
-                        icon={sidebarLink.icon.glyph}
-                        class={`${sidebarLink.icon.classes} mr-2`}
-                      />
+                      {sidebarLink.icon.component ? (
+                        <sidebarLink.icon.component
+                          className={`${sidebarLink.icon.classes} mr-2`}
+                        />
+                      ) : (
+                        <AstroIcon
+                          icon={sidebarLink.icon.glyph}
+                          class={`${sidebarLink.icon.classes} mr-2`}
+                        />
+                      )}
                       {sidebarLink.title}
                     </span>
 
-                    {sidebarLink.isNew &&
-                      sidebarLink.id !== 'friends' &&
-                      !isActive && (
-                        <span class='relative mr-1 flex items-center'>
-                          <span class='relative rounded-full bg-gray-200 p-1 text-xs' />
-                          <span class='absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs' />
-                        </span>
-                      )}
+                    {sidebarLink.isNew && !isActive && (
+                      <span class='relative mr-1 flex items-center'>
+                        <span class='relative rounded-full bg-gray-200 p-1 text-xs' />
+                        <span class='absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs' />
+                      </span>
+                    )}
 
                     {sidebarLink.id === 'friends' && (
                       <SidebarFriendsCounter client:load />

src/components/Activity/ActivityPage.tsx

@@ -5,6 +5,17 @@ import { ResourceProgress } from './ResourceProgress';
 import { pageProgressMessage } from '../../stores/page';
 import { EmptyActivity } from './EmptyActivity';
 
+type ProgressResponse = {
+  updatedAt: string;
+  title: string;
+  id: string;
+  learning: number;
+  skipped: number;
+  done: number;
+  total: number;
+  isCustomResource: boolean;
+};
+
 export type ActivityResponse = {
   done: {
     today: number;
@@ -13,24 +24,9 @@ export type ActivityResponse = {
   learning: {
     today: number;
     total: number;
-    roadmaps: {
-      title: string;
-      id: string;
-      learning: number;
-      done: number;
-      total: number;
-      skipped: number;
-      updatedAt: string;
-    }[];
-    bestPractices: {
-      title: string;
-      id: string;
-      learning: number;
-      done: number;
-      skipped: number;
-      total: number;
-      updatedAt: string;
-    }[];
+    roadmaps: ProgressResponse[];
+    bestPractices: ProgressResponse[];
+    customs: ProgressResponse[];
   };
   streak: {
     count: number;
@@ -110,7 +106,8 @@ export function ActivityPage() {
                 })
                 .map((roadmap) => (
                   <ResourceProgress
-                      key={roadmap.id}
+                    key={roadmap.id}
+                    isCustomResource={roadmap.isCustomResource}
                     doneCount={roadmap.done || 0}
                     learningCount={roadmap.learning || 0}
                     totalCount={roadmap.total || 0}
@@ -137,6 +134,8 @@ export function ActivityPage() {
                 })
                 .map((bestPractice) => (
                   <ResourceProgress
+                    isCustomResource={bestPractice.isCustomResource}
+                    key={bestPractice.id}
                     doneCount={bestPractice.done || 0}
                     totalCount={bestPractice.total || 0}
                     learningCount={bestPractice.learning || 0}

src/components/Activity/EmptyActivity.tsx

@@ -1,14 +1,11 @@
-import RoadmapIcon from '../../icons/roadmap.svg';
+import { RoadmapIcon } from "../ReactIcons/RoadmapIcon";
 
 export function EmptyActivity() {
   return (
     <div className="rounded-md">
       <div className="flex flex-col items-center p-7 text-center">
-        <img
-          alt="no roadmaps"
-          src={RoadmapIcon.src}
-          className="mb-2 w-[60px] h-[60px] sm:h-[120px] sm:w-[120px] opacity-10"
-        />
+        <RoadmapIcon className="mb-2 w-[60px] h-[60px] sm:h-[120px] sm:w-[120px] opacity-10" />
+
         <h2 className="text-lg sm:text-xl font-bold">No Progress</h2>
         <p className="my-1 sm:my-2 max-w-[400px] text-gray-500 text-sm sm:text-base">
           Progress will appear here as you start tracking your{' '}

src/components/Activity/ResourceProgress.tsx

@@ -3,6 +3,7 @@ import { getRelativeTimeString } from '../../lib/date';
 import { useToast } from '../../hooks/use-toast';
 import { ProgressShareButton } from '../UserProgress/ProgressShareButton';
 import { useState } from 'react';
+import { getUser } from '../../lib/jwt';
 
 type ResourceProgressType = {
   resourceType: 'roadmap' | 'best-practice';
@@ -15,14 +16,17 @@ type ResourceProgressType = {
   skippedCount: number;
   onCleared?: () => void;
   showClearButton?: boolean;
+  isCustomResource: boolean;
 };
 
 export function ResourceProgress(props: ResourceProgressType) {
-  const { showClearButton = true } = props;
+  const { showClearButton = true, isCustomResource } = props;
   const toast = useToast();
   const [isClearing, setIsClearing] = useState(false);
   const [isConfirming, setIsConfirming] = useState(false);
 
+  const userId = getUser()?.id;
+
   const {
     updatedAt,
     resourceType,
@@ -52,8 +56,8 @@ export function ResourceProgress(props: ResourceProgressType) {
       return;
     }
 
-    localStorage.removeItem(`${resourceType}-${resourceId}-favorite`);
-    localStorage.removeItem(`${resourceType}-${resourceId}-progress`);
+    localStorage.removeItem(`${resourceType}-${resourceId}-${userId}-favorite`);
+    localStorage.removeItem(`${resourceType}-${resourceId}-${userId}-progress`);
 
     setIsClearing(false);
     setIsConfirming(false);
@@ -62,11 +66,15 @@ export function ResourceProgress(props: ResourceProgressType) {
     }
   }
 
-  const url =
+  let url =
     resourceType === 'roadmap'
       ? `/${resourceId}`
       : `/best-practices/${resourceId}`;
 
+  if (isCustomResource) {
+    url = `/r?id=${resourceId}`;
+  }
+
   const totalMarked = doneCount + skippedCount;
   const progressPercentage = Math.round((totalMarked / totalCount) * 100);
 
@@ -112,6 +120,7 @@ export function ResourceProgress(props: ResourceProgressType) {
           <ProgressShareButton
             resourceType={resourceType}
             resourceId={resourceId}
+            isCustomResource={isCustomResource}
             className="text-xs font-normal"
             shareIconClassName="w-2.5 h-2.5 stroke-2"
             checkIconClassName="w-2.5 h-2.5"

src/components/AddTeamRoadmap.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { useOutsideClick } from '../hooks/use-outside-click';
-import { OptionType, SearchSelector } from './SearchSelector';
+import { type OptionType, SearchSelector } from './SearchSelector';
 import type { PageType } from './CommandMenu/CommandMenu';
 import { CheckIcon } from './ReactIcons/CheckIcon';
 import { httpPut } from '../lib/http';

src/components/AuthenticationFlow/EmailLoginForm.tsx

@@ -21,7 +21,7 @@ export function EmailLoginForm() {
       {
         email,
         password,
-      }
+      },
     );
 
     // Log the user in and reload the page
@@ -39,7 +39,7 @@ export function EmailLoginForm() {
     // @todo use proper types
     if ((error as any).type === 'user_not_verified') {
       window.location.href = `/verification-pending?email=${encodeURIComponent(
-        email
+        email,
       )}`;
       return;
     }

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
-import GitHubIcon from '../../icons/github.svg';
-import SpinnerIcon from '../../icons/spinner.svg';
+import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
+import { Spinner } from '../ReactIcons/Spinner.tsx';
 
 type GitHubButtonProps = {};
 
@@ -13,7 +13,6 @@ const GITHUB_LAST_PAGE = 'githubLastPage';
 export function GitHubButton(props: GitHubButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
-  const icon = isLoading ? SpinnerIcon : GitHubIcon;
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -29,7 +28,7 @@ export function GitHubButton(props: GitHubButtonProps) {
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-github-callback${
         window.location.search
-      }`
+      }`,
     )
       .then(({ response, error }) => {
         if (!response?.token) {
@@ -56,6 +55,12 @@ export function GitHubButton(props: GitHubButtonProps) {
           }
         }
 
+        const authRedirectUrl = localStorage.getItem('authRedirect');
+        if (authRedirectUrl) {
+          localStorage.removeItem('authRedirect');
+          redirectUrl = authRedirectUrl;
+        }
+
         localStorage.removeItem(GITHUB_REDIRECT_AT);
         localStorage.removeItem(GITHUB_LAST_PAGE);
         Cookies.set(TOKEN_COOKIE_NAME, response.token, {
@@ -75,12 +80,12 @@ export function GitHubButton(props: GitHubButtonProps) {
     setIsLoading(true);
 
     const { response, error } = await httpGet<{ loginUrl: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-github-login`
+      `${import.meta.env.PUBLIC_API_URL}/v1-github-login`,
     );
 
     if (error || !response?.loginUrl) {
       setError(
-        error?.message || 'Something went wrong. Please try again later.'
+        error?.message || 'Something went wrong. Please try again later.',
       );
 
       setIsLoading(false);
@@ -91,7 +96,7 @@ export function GitHubButton(props: GitHubButtonProps) {
     // the user was on before they clicked the social login button
     if (!['/login', '/signup'].includes(window.location.pathname)) {
       const pagePath = ['/respond-invite', '/befriend'].includes(
-        window.location.pathname
+        window.location.pathname,
       )
         ? window.location.pathname + window.location.search
         : window.location.pathname;
@@ -110,11 +115,11 @@ export function GitHubButton(props: GitHubButtonProps) {
         disabled={isLoading}
         onClick={handleClick}
       >
-        <img
-          src={icon.src}
-          alt="GitHub"
-          className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
-        />
+        {isLoading ? (
+          <Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
+        ) : (
+          <GitHubIcon className={'h-[18px] w-[18px]'} />
+        )}
         Continue with GitHub
       </button>
       {error && (

src/components/AuthenticationFlow/GoogleButton.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
-import GoogleIcon from '../../icons/google.svg';
-import SpinnerIcon from '../../icons/spinner.svg';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
+import { Spinner } from '../ReactIcons/Spinner.tsx';
+import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
 
 type GoogleButtonProps = {};
 
@@ -13,7 +13,6 @@ const GOOGLE_LAST_PAGE = 'googleLastPage';
 export function GoogleButton(props: GoogleButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
-  const icon = isLoading ? SpinnerIcon : GoogleIcon;
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -29,7 +28,7 @@ export function GoogleButton(props: GoogleButtonProps) {
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-google-callback${
         window.location.search
-      }`
+      }`,
     )
       .then(({ response, error }) => {
         if (!response?.token) {
@@ -55,6 +54,12 @@ export function GoogleButton(props: GoogleButtonProps) {
           }
         }
 
+        const authRedirectUrl = localStorage.getItem('authRedirect');
+        if (authRedirectUrl) {
+          localStorage.removeItem('authRedirect');
+          redirectUrl = authRedirectUrl;
+        }
+
         localStorage.removeItem(GOOGLE_REDIRECT_AT);
         localStorage.removeItem(GOOGLE_LAST_PAGE);
         Cookies.set(TOKEN_COOKIE_NAME, response.token, {
@@ -73,7 +78,7 @@ export function GoogleButton(props: GoogleButtonProps) {
   const handleClick = () => {
     setIsLoading(true);
     httpGet<{ loginUrl: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-google-login`
+      `${import.meta.env.PUBLIC_API_URL}/v1-google-login`,
     )
       .then(({ response, error }) => {
         if (!response?.loginUrl) {
@@ -86,10 +91,11 @@ export function GoogleButton(props: GoogleButtonProps) {
         // For non authentication pages, we want to redirect back to the page
         // the user was on before they clicked the social login button
         if (!['/login', '/signup'].includes(window.location.pathname)) {
-          const pagePath =
-            ['/respond-invite', '/befriend'].includes(window.location.pathname)
-              ? window.location.pathname + window.location.search
-              : window.location.pathname;
+          const pagePath = ['/respond-invite', '/befriend'].includes(
+            window.location.pathname,
+          )
+            ? window.location.pathname + window.location.search
+            : window.location.pathname;
 
           localStorage.setItem(GOOGLE_REDIRECT_AT, Date.now().toString());
           localStorage.setItem(GOOGLE_LAST_PAGE, pagePath);
@@ -110,11 +116,11 @@ export function GoogleButton(props: GoogleButtonProps) {
         disabled={isLoading}
         onClick={handleClick}
       >
-        <img
-          src={icon.src}
-          alt="Google"
-          className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
-        />
+        {isLoading ? (
+          <Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
+        ) : (
+          <GoogleIcon className={'h-[18px] w-[18px]'} />
+        )}
         Continue with Google
       </button>
       {error && (

src/components/AuthenticationFlow/LinkedInButton.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
-import LinkedIn from '../../icons/linkedin.svg';
-import SpinnerIcon from '../../icons/spinner.svg';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
+import { Spinner } from '../ReactIcons/Spinner.tsx';
+import { LinkedInIcon } from '../ReactIcons/LinkedInIcon.tsx';
 
 type LinkedInButtonProps = {};
 
@@ -13,7 +13,6 @@ const LINKEDIN_LAST_PAGE = 'linkedInLastPage';
 export function LinkedInButton(props: LinkedInButtonProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
-  const icon = isLoading ? SpinnerIcon : LinkedIn;
 
   useEffect(() => {
     const urlParams = new URLSearchParams(window.location.search);
@@ -29,7 +28,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
     httpGet<{ token: string }>(
       `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-callback${
         window.location.search
-      }`
+      }`,
     )
       .then(({ response, error }) => {
         if (!response?.token) {
@@ -55,6 +54,12 @@ export function LinkedInButton(props: LinkedInButtonProps) {
           }
         }
 
+        const authRedirectUrl = localStorage.getItem('authRedirect');
+        if (authRedirectUrl) {
+          localStorage.removeItem('authRedirect');
+          redirectUrl = authRedirectUrl;
+        }
+
         localStorage.removeItem(LINKEDIN_REDIRECT_AT);
         localStorage.removeItem(LINKEDIN_LAST_PAGE);
         Cookies.set(TOKEN_COOKIE_NAME, response.token, {
@@ -73,7 +78,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
   const handleClick = () => {
     setIsLoading(true);
     httpGet<{ loginUrl: string }>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-login`
+      `${import.meta.env.PUBLIC_API_URL}/v1-linkedin-login`,
     )
       .then(({ response, error }) => {
         if (!response?.loginUrl) {
@@ -87,7 +92,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         // the user was on before they clicked the social login button
         if (!['/login', '/signup'].includes(window.location.pathname)) {
           const pagePath = ['/respond-invite', '/befriend'].includes(
-            window.location.pathname
+            window.location.pathname,
           )
             ? window.location.pathname + window.location.search
             : window.location.pathname;
@@ -111,11 +116,11 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         disabled={isLoading}
         onClick={handleClick}
       >
-        <img
-          src={icon.src}
-          alt="Google"
-          className={`h-[18px] w-[18px] ${isLoading ? 'animate-spin' : ''}`}
-        />
+        {isLoading ? (
+          <Spinner className={'h-[18px] w-[18px]'} isDualRing={false} />
+        ) : (
+          <LinkedInIcon className={'h-[18px] w-[18px]'} />
+        )}
         Continue with LinkedIn
       </button>
       {error && (

src/components/AuthenticationFlow/TriggerVerifyAccount.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import Cookies from 'js-cookie';
 import { httpPost } from '../../lib/http';
-import ErrorIcon from '../../icons/error.svg';
-import SpinnerIcon from '../../icons/spinner.svg';
 import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
+import { Spinner } from '../ReactIcons/Spinner';
+import { ErrorIcon2 } from '../ReactIcons/ErrorIcon2';
 
 export function TriggerVerifyAccount() {
   const [isLoading, setIsLoading] = useState(true);
@@ -16,7 +16,7 @@ export function TriggerVerifyAccount() {
       `${import.meta.env.PUBLIC_API_URL}/v1-verify-account`,
       {
         code,
-      }
+      },
     )
       .then(({ response, error }) => {
         if (!response?.token) {
@@ -55,20 +55,8 @@ export function TriggerVerifyAccount() {
   return (
     <div className="mx-auto flex max-w-md flex-col items-center pt-0 sm:pt-12">
       <div className="mx-auto max-w-md text-center">
-        {isLoading && (
-          <img
-            alt={'Please wait.'}
-            src={SpinnerIcon.src}
-            className={'mx-auto h-16 w-16 animate-spin'}
-          />
-        )}
-        {error && (
-          <img
-            alt={'Please wait.'}
-            src={ErrorIcon.src}
-            className={'mx-auto h-16 w-16'}
-          />
-        )}
+        {isLoading && <Spinner className="mx-auto h-16 w-16" />}
+        {error && <ErrorIcon2 className="mx-auto h-16 w-16" />}
         <h2 className="mb-1 mt-4 text-center text-xl font-semibold sm:mb-3 sm:mt-4 sm:text-2xl">
           Verifying your account
         </h2>

src/components/AuthenticationFlow/VerificationEmailMessage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import VerifyLetterIcon from '../../icons/verify-letter.svg';
 import { httpPost } from '../../lib/http';
+import { VerifyLetterIcon } from '../ReactIcons/VerifyLetterIcon';
 
 export function VerificationEmailMessage() {
   const [email, setEmail] = useState('..');
@@ -37,11 +37,7 @@ export function VerificationEmailMessage() {
 
   return (
     <div className="mx-auto max-w-md text-center">
-      <img
-        alt="Verify Email"
-        src={VerifyLetterIcon.src}
-        className="mx-auto mb-4 h-20 w-40 sm:h-40"
-      />
+      <VerifyLetterIcon className="mx-auto mb-4 h-20 w-40 sm:h-40" />
       <h2 className="my-2 text-center text-xl font-semibold sm:my-5 sm:text-2xl">
         Verify your email address
       </h2>

src/components/Authenticator/authenticator.ts

@@ -36,6 +36,7 @@ function handleGuest() {
     '/account/notification',
     '/account/update-password',
     '/account/settings',
+    '/account/roadmaps',
     '/account/road-card',
     '/account/friends',
     '/account',
@@ -72,7 +73,10 @@ function handleAuthenticated() {
 
   // If the user is on a guest route, redirect them to the home page
   if (guestRoutes.includes(window.location.pathname)) {
-    window.location.href = '/';
+    const authRedirect = window.localStorage.getItem('authRedirect') || '/';
+    window.localStorage.removeItem('authRedirect');
+
+    window.location.href = authRedirect;
   }
 }
 

src/components/CommandMenu/CommandMenu.tsx

@@ -1,35 +1,47 @@
-import { Fragment, useEffect, useRef, useState } from 'react';
+import {
+  Fragment,
+  type ReactElement,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
-import BestPracticesIcon from '../../icons/best-practices.svg';
-import ClipboardIcon from '../../icons/clipboard.svg';
-import GuideIcon from '../../icons/guide.svg';
-import HomeIcon from '../../icons/home.svg';
-import RoadmapIcon from '../../icons/roadmap.svg';
-import UserIcon from '../../icons/user.svg';
-import GroupIcon from '../../icons/group.svg';
-import VideoIcon from '../../icons/video.svg';
 import { httpGet } from '../../lib/http';
 import { isLoggedIn } from '../../lib/jwt';
+import { BestPracticesIcon } from '../ReactIcons/BestPracticesIcon.tsx';
+import { UserIcon } from '../ReactIcons/UserIcon.tsx';
+import { GroupIcon } from '../ReactIcons/GroupIcon.tsx';
+import { RoadmapIcon } from '../ReactIcons/RoadmapIcon.tsx';
+import { ClipboardIcon } from '../ReactIcons/ClipboardIcon.tsx';
+import { GuideIcon } from '../ReactIcons/GuideIcon.tsx';
+import { HomeIcon } from '../ReactIcons/HomeIcon.tsx';
+import { VideoIcon } from '../ReactIcons/VideoIcon.tsx';
 
 export type PageType = {
   id: string;
   url: string;
   title: string;
   group: string;
-  icon?: string;
+  icon?: ReactElement;
   isProtected?: boolean;
   metadata?: Record<string, any>;
 };
 
 const defaultPages: PageType[] = [
-  { id: 'home', url: '/', title: 'Home', group: 'Pages', icon: HomeIcon.src },
+  {
+    id: 'home',
+    url: '/',
+    title: 'Home',
+    group: 'Pages',
+    icon: <HomeIcon className="mr-2 h-4 w-4 stroke-2" />,
+  },
   {
     id: 'account',
     url: '/account',
     title: 'Account',
     group: 'Pages',
-    icon: UserIcon.src,
+    icon: <UserIcon className="mr-2 h-4 w-4 stroke-2" />,
     isProtected: true,
   },
   {
@@ -37,7 +49,15 @@ const defaultPages: PageType[] = [
     url: '/team',
     title: 'Teams',
     group: 'Pages',
-    icon: GroupIcon.src,
+    icon: <GroupIcon className="mr-2 h-4 w-4 stroke-2" />,
+    isProtected: true,
+  },
+  {
+    id: 'friends',
+    url: '/account/friends',
+    title: 'Friends',
+    group: 'Pages',
+    icon: <GroupIcon className="mr-2 h-4 w-4 stroke-2" />,
     isProtected: true,
   },
   {
@@ -45,35 +65,43 @@ const defaultPages: PageType[] = [
     url: '/roadmaps',
     title: 'Roadmaps',
     group: 'Pages',
-    icon: RoadmapIcon.src,
+    icon: <RoadmapIcon className="mr-2 h-4 w-4 stroke-2" />,
+  },
+  {
+    id: 'account-roadmaps',
+    url: '/account/roadmaps',
+    title: 'Custom Roadmaps',
+    group: 'Pages',
+    icon: <RoadmapIcon className="mr-2 h-4 w-4 stroke-2" />,
+    isProtected: true,
   },
   {
     id: 'best-practices',
     url: '/best-practices',
     title: 'Best Practices',
     group: 'Pages',
-    icon: BestPracticesIcon.src,
+    icon: <BestPracticesIcon className="mr-2 h-4 w-4 stroke-2" />,
   },
   {
     id: 'questions',
     url: '/questions',
     title: 'Questions',
     group: 'Pages',
-    icon: ClipboardIcon.src,
+    icon: <ClipboardIcon className="mr-2 h-4 w-4 stroke-2" />,
   },
   {
     id: 'guides',
     url: '/guides',
     title: 'Guides',
     group: 'Pages',
-    icon: GuideIcon.src,
+    icon: <GuideIcon className="mr-2 h-4 w-4 stroke-2" />,
   },
   {
     id: 'videos',
     url: '/videos',
     title: 'Videos',
     group: 'Pages',
-    icon: VideoIcon.src,
+    icon: <VideoIcon className="mr-2 h-4 w-4 stroke-2" />,
   },
 ];
 
@@ -183,7 +211,7 @@ export function CommandMenu() {
               } else if (e.key === 'ArrowUp') {
                 const canGoPrev = activeCounter > 0;
                 setActiveCounter(
-                  canGoPrev ? activeCounter - 1 : searchResults.length - 1
+                  canGoPrev ? activeCounter - 1 : searchResults.length - 1,
                 );
               } else if (e.key === 'Tab') {
                 e.preventDefault();
@@ -226,13 +254,7 @@ export function CommandMenu() {
                       {!page.icon && (
                         <span className="mr-2 text-gray-400">{page.group}</span>
                       )}
-                      {page.icon && (
-                        <img
-                          alt={page.title}
-                          src={page.icon}
-                          className="mr-2 h-4 w-4"
-                        />
-                      )}
+                      {page.icon && page.icon}
                       {page.title}
                     </a>
                   </Fragment>

src/components/CreateTeam/NotDropdown.tsx

@@ -1,4 +1,4 @@
-import ChevronDownIcon from '../../icons/chevron-down.svg';
+import { ChevronDownIcon } from '../ReactIcons/ChevronDownIcon';
 
 type NotDropdownProps = {
   onClick: () => void;
@@ -37,11 +37,7 @@ export function NotDropdown(props: NotDropdownProps) {
         </div>
       )}
 
-      <img
-        alt={singularName}
-        src={ChevronDownIcon.src}
-        className={'relative top-[1px] h-[17px] w-[17px] opacity-40'}
-      />
+      <ChevronDownIcon className="relative top-[1px] h-[17px] w-[17px] opacity-40" />
     </div>
   );
 }

src/components/CreateTeam/RoadmapSelector.tsx

@@ -1,37 +1,53 @@
 import { useEffect, useState } from 'react';
 import { httpGet, httpPut } from '../../lib/http';
 import type { PageType } from '../CommandMenu/CommandMenu';
-import ChevronDownIcon from '../../icons/chevron-down.svg';
 import { pageProgressMessage } from '../../stores/page';
-import type { TeamDocument } from './CreateTeamForm';
 import { UpdateTeamResourceModal } from './UpdateTeamResourceModal';
 import { SelectRoadmapModal } from './SelectRoadmapModal';
-import { NotDropdown } from './NotDropdown';
+import { Map, Shapes } from 'lucide-react';
+import type {
+  AllowedRoadmapVisibility,
+  RoadmapDocument,
+} from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
+import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
+import { useToast } from '../../hooks/use-toast';
 
 export type TeamResourceConfig = {
+  isCustomResource: boolean;
+  title: string;
+  description?: string;
+  visibility?: AllowedRoadmapVisibility;
   resourceId: string;
   resourceType: string;
   removed: string[];
+  topics?: number;
+  sharedTeamMemberIds: string[];
+  sharedFriendIds: string[];
 }[];
 
 type RoadmapSelectorProps = {
   teamId: string;
-  teamResourceConfig: TeamResourceConfig;
-  setTeamResourceConfig: (config: TeamResourceConfig) => void;
+  teamResources: TeamResourceConfig;
+  setTeamResources: (config: TeamResourceConfig) => void;
 };
 
 export function RoadmapSelector(props: RoadmapSelectorProps) {
-  const { teamId, teamResourceConfig = [], setTeamResourceConfig } = props;
+  const { teamId, teamResources = [], setTeamResources } = props;
 
+  const toast = useToast();
+  const [removingRoadmapId, setRemovingRoadmapId] = useState<string>('');
   const [showSelectRoadmapModal, setShowSelectRoadmapModal] = useState(false);
   const [allRoadmaps, setAllRoadmaps] = useState<PageType[]>([]);
   const [changingRoadmapId, setChangingRoadmapId] = useState<string>('');
+  const [isCreatingRoadmap, setIsCreatingRoadmap] = useState<boolean>(false);
+
   const [error, setError] = useState<string>('');
 
   async function loadAllRoadmaps() {
     const { error, response } = await httpGet<PageType[]>(`/pages.json`);
 
     if (error) {
+      toast.error(error.message || 'Something went wrong. Please try again!');
       setError(error.message || 'Something went wrong. Please try again!');
       return;
     }
@@ -72,7 +88,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
       return;
     }
 
-    setTeamResourceConfig(response);
+    setTeamResources(response);
   }
 
   async function onRemove(resourceId: string) {
@@ -106,13 +122,25 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
       return;
     }
 
-    setTeamResourceConfig(response);
+    setTeamResources(response);
   }
 
   useEffect(() => {
-    loadAllRoadmaps().finally();
+    loadAllRoadmaps().finally(() => {});
   }, []);
 
+  function handleCustomRoadmapCreated(roadmap: RoadmapDocument) {
+    const { _id: roadmapId } = roadmap;
+    if (!roadmapId) {
+      return;
+    }
+
+    loadAllRoadmaps().finally(() => {});
+    addTeamResource(roadmapId).finally(() => {
+      pageProgressMessage.set('');
+    });
+  }
+
   return (
     <div>
       {changingRoadmapId && (
@@ -121,9 +149,9 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
           resourceId={changingRoadmapId}
           resourceType={'roadmap'}
           teamId={teamId}
-          setTeamResourceConfig={setTeamResourceConfig}
+          setTeamResourceConfig={setTeamResources}
           defaultRemovedItems={
-            teamResourceConfig.find((c) => c.resourceId === changingRoadmapId)
+            teamResources.find((c) => c.resourceId === changingRoadmapId)
               ?.removed || []
           }
         />
@@ -131,7 +159,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
       {showSelectRoadmapModal && (
         <SelectRoadmapModal
           onClose={() => setShowSelectRoadmapModal(false)}
-          teamResourceConfig={teamResourceConfig}
+          teamResourceConfig={teamResources}
           allRoadmaps={allRoadmaps}
           teamId={teamId}
           onRoadmapAdd={(roadmapId) => {
@@ -145,72 +173,170 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
         />
       )}
 
-      <div className="mt-3">
-        <NotDropdown
+      <div className="my-3 flex items-center gap-4">
+        {isCreatingRoadmap && (
+          <CreateRoadmapModal
+            teamId={teamId}
+            onClose={() => setIsCreatingRoadmap(false)}
+            onCreated={(roadmap: RoadmapDocument) => {
+              handleCustomRoadmapCreated(roadmap);
+              setIsCreatingRoadmap(false);
+            }}
+          />
+        )}
+
+        <button
+          className="flex h-10 grow items-center justify-center gap-2 rounded-md border border-black bg-white text-black transition-colors hover:bg-black hover:text-white"
           onClick={() => {
             setShowSelectRoadmapModal(true);
           }}
-          selectedCount={teamResourceConfig.length}
-          singularName={'roadmap'}
-          pluralName={'roadmaps'}
-        />
+        >
+          <Map className="h-4 w-4 stroke-[2.5]" />
+          Pick from our roadmaps
+        </button>
+
+        <span className="text-base text-gray-400">or</span>
+
+        <button
+          className="flex h-10 grow items-center justify-center gap-2 rounded-md border border-black bg-white text-black transition-colors hover:bg-black hover:text-white"
+          onClick={() => {
+            setIsCreatingRoadmap(true);
+          }}
+        >
+          <Shapes className="h-4 w-4 stroke-[2.5]" />
+          Create Custom Roadmap
+        </button>
       </div>
 
-      {!teamResourceConfig.length && (
-        <p className={'mb-3 mt-2 text-base text-gray-400'}>
-          No roadmaps selected.
-        </p>
+      {!teamResources.length && (
+        <div className="flex min-h-[240px] flex-col items-center justify-center rounded-lg border">
+          <Map className="mb-2 h-12 w-12 text-gray-300" />
+          <p className={'text-lg font-semibold'}>No roadmaps selected.</p>
+          <p className={'text-base text-gray-400'}>
+            Pick from{' '}
+            <span
+              onClick={() => setShowSelectRoadmapModal(true)}
+              className="cursor-pointer underline"
+            >
+              our roadmaps
+            </span>{' '}
+            or{' '}
+            <span
+              onClick={() => {
+                setIsCreatingRoadmap(true);
+              }}
+              className="cursor-pointer underline"
+            >
+              create a new one
+            </span>
+            .
+          </p>
+        </div>
       )}
 
-      {teamResourceConfig.length > 0 && (
-        <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 flex-wrap gap-2.5">
-          {teamResourceConfig.map(({ resourceId, removed: removedTopics }) => {
-            const roadmapTitle =
-              allRoadmaps.find((roadmap) => roadmap.id === resourceId)?.title ||
-              '...';
+      {teamResources.length > 0 && (
+        <div className="mb-3 grid grid-cols-1 flex-wrap gap-2.5 sm:grid-cols-3">
+          {teamResources.map(
+            ({
+              isCustomResource,
+              title: roadmapTitle,
+              resourceId,
+              removed: removedTopics,
+              topics,
+            }) => {
+              return (
+                <div
+                  className="relative flex flex-col items-start overflow-hidden rounded-md border border-gray-300"
+                  key={resourceId}
+                >
+                  <div className={'w-full flex-grow px-3 pb-2 pt-4'}>
+                    <span className="mb-0.5 block text-base font-medium leading-snug text-black">
+                      {roadmapTitle}
+                    </span>
+                    {removedTopics.length > 0 || (topics && topics > 0) ? (
+                      <span className={'text-xs leading-none text-gray-400'}>
+                        {isCustomResource ? (
+                          <>
+                            Custom &middot; {topics} topic
+                            {topics && topics > 1 ? 's' : ''}
+                          </>
+                        ) : (
+                          <>
+                            {removedTopics.length} topic
+                            {removedTopics.length > 1 ? 's' : ''} removed
+                          </>
+                        )}
+                      </span>
+                    ) : (
+                      <span className="text-xs italic leading-none text-gray-400/60">
+                        {isCustomResource
+                          ? 'Placeholder roadmap.'
+                          : 'No changes made ..'}
+                      </span>
+                    )}
+                  </div>
 
-            return (
-              <div className="flex flex-col items-start rounded-md border border-gray-300">
-                <div className={'w-full px-3 pb-2 pt-4'}>
-                  <span className="mb-0.5 block text-base font-medium leading-none text-black">
-                    {roadmapTitle}
-                  </span>
-                  {removedTopics.length > 0 ? (
-                    <span className={'text-xs leading-none text-gray-900'}>
-                      {removedTopics.length} topic
-                      {removedTopics.length > 1 ? 's' : ''} removed
-                    </span>
-                  ) : (
-                    <span className="text-xs italic leading-none text-gray-400/60">
-                      No changes made ..
-                    </span>
+                  {removingRoadmapId === resourceId && (
+                    <div
+                      className={
+                        'flex w-full items-center justify-end p-3 text-sm'
+                      }
+                    >
+                      <span className="text-xs text-gray-500">
+                        Are you sure?{' '}
+                        <button
+                          onClick={() => onRemove(resourceId)}
+                          className="mx-0.5 text-red-500 underline underline-offset-1"
+                        >
+                          Yes
+                        </button>{' '}
+                        <button
+                          onClick={() => setRemovingRoadmapId('')}
+                          className="text-red-500 underline underline-offset-1"
+                        >
+                          No
+                        </button>
+                      </span>
+                    </div>
+                  )}
+                  {(!removingRoadmapId || removingRoadmapId !== resourceId) && (
+                    <div className={'flex w-full justify-between p-3'}>
+                      <button
+                        type="button"
+                        className={
+                          'text-xs text-gray-500 underline hover:text-black focus:outline-none'
+                        }
+                        onClick={() => {
+                          if (isCustomResource) {
+                            window.open(
+                              `${
+                                import.meta.env.PUBLIC_EDITOR_APP_URL
+                              }/${resourceId}`,
+                              '_blank'
+                            );
+                            return;
+                          }
+                          setChangingRoadmapId(resourceId);
+                        }}
+                      >
+                        Customize
+                      </button>
+
+                      <button
+                        type="button"
+                        className={
+                          'text-xs text-red-500 underline hover:text-black'
+                        }
+                        onClick={() => setRemovingRoadmapId(resourceId)}
+                      >
+                        Remove
+                      </button>
+                    </div>
                   )}
                 </div>
-
-                <div className={'flex w-full justify-between p-3'}>
-                  <button
-                    type="button"
-                    className={
-                      'text-xs text-gray-500 underline hover:text-black focus:outline-none'
-                    }
-                    onClick={() => setChangingRoadmapId(resourceId)}
-                  >
-                    Customize
-                  </button>
-
-                  <button
-                    type="button"
-                    className={
-                      'text-xs text-red-500 underline hover:text-black'
-                    }
-                    onClick={() => onRemove(resourceId)}
-                  >
-                    Remove
-                  </button>
-                </div>
-              </div>
-            );
-          })}
+              );
+            }
+          )}
         </div>
       )}
     </div>

src/components/CreateTeam/SelectRoadmapModal.tsx

@@ -3,8 +3,8 @@ import { useKeydown } from '../../hooks/use-keydown';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import type { PageType } from '../CommandMenu/CommandMenu';
 import type { TeamResourceConfig } from './RoadmapSelector';
-import CloseIcon from '../../icons/close.svg';
 import { SelectRoadmapModalItem } from './SelectRoadmapModalItem';
+import { XIcon } from 'lucide-react';
 
 export type SelectRoadmapModalProps = {
   teamId: string;
@@ -60,11 +60,11 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
     setSearchResults(searchResults);
   }, [searchText, allRoadmaps]);
 
-  const roleBasedRoadmaps = searchResults.filter((roadmap) =>
-    roadmap?.metadata?.tags?.includes('role-roadmap')
+  const roleBasedRoadmaps = searchResults.filter(
+    (roadmap) => roadmap?.metadata?.tags?.includes('role-roadmap'),
   );
-  const skillBasedRoadmaps = searchResults.filter((roadmap) =>
-    roadmap?.metadata?.tags?.includes('skill-roadmap')
+  const skillBasedRoadmaps = searchResults.filter(
+    (roadmap) => roadmap?.metadata?.tags?.includes('skill-roadmap'),
   );
 
   return (
@@ -79,7 +79,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
             className="popup-close absolute right-2.5 top-3 ml-auto inline-flex items-center rounded-lg bg-transparent p-1.5 text-sm text-gray-400 hover:bg-gray-100 hover:text-gray-900"
             onClick={onClose}
           >
-            <img alt={'close'} src={CloseIcon.src} className="h-4 w-4" />
+            <XIcon className="h-4 w-4" />
             <span className="sr-only">Close modal</span>
           </button>
           <input
@@ -100,12 +100,13 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
             {roleBasedRoadmaps.length > 0 && (
               <div className="mb-5 flex flex-wrap items-center gap-2">
                 {roleBasedRoadmaps.map((roadmap) => {
-                  const isSelected = !!teamResourceConfig.find(
-                    (r) => r.resourceId === roadmap.id
+                  const isSelected = !!teamResourceConfig?.find(
+                    (r) => r.resourceId === roadmap.id,
                   );
 
                   return (
                     <SelectRoadmapModalItem
+                      key={roadmap.id}
                       title={roadmap.title}
                       isSelected={isSelected}
                       onClick={() => {
@@ -126,11 +127,12 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
             <div className="flex flex-wrap items-center gap-2">
               {skillBasedRoadmaps.map((roadmap) => {
                 const isSelected = !!teamResourceConfig.find(
-                  (r) => r.resourceId === roadmap.id
+                  (r) => r.resourceId === roadmap.id,
                 );
 
                 return (
                   <SelectRoadmapModalItem
+                    key={roadmap.id}
                     title={roadmap.title}
                     isSelected={isSelected}
                     onClick={() => {

src/components/CreateTeam/Step0.tsx

@@ -1,22 +1,24 @@
-import BuildingIcon from '../../icons/building.svg';
-import UsersIcon from '../../icons/users.svg';
 import type { TeamDocument } from './CreateTeamForm';
 import { httpPut } from '../../lib/http';
 import { useState } from 'react';
 import { NextButton } from './NextButton';
+import { BuildingIcon } from '../ReactIcons/BuildingIcon.tsx';
+import { UsersIcon } from '../ReactIcons/UsersIcon.tsx';
 
 export const validTeamTypes = [
   {
     value: 'company',
     label: 'Company',
-    icon: BuildingIcon.src,
-    description: 'Track the skills and learning progress of the tech team at your company',
+    icon: BuildingIcon,
+    description:
+      'Track the skills and learning progress of the tech team at your company',
   },
   {
     value: 'study_group',
     label: 'Study Group',
-    icon: UsersIcon.src,
-    description: 'Invite your friends or course-mates and track your learning progress together',
+    icon: UsersIcon,
+    description:
+      'Invite your friends or course-mates and track your learning progress together',
   },
 ] as const;
 
@@ -54,7 +56,7 @@ export function Step0(props: Step0Props) {
           teamSize: team.teamSize,
           linkedInUrl: team?.links?.linkedIn || undefined,
         }),
-      }
+      },
     );
 
     if (error || !response) {
@@ -70,27 +72,28 @@ export function Step0(props: Step0Props) {
 
   return (
     <>
-      <div className={'flex flex-col sm:flex-row gap-3'}>
+      <div className={'flex flex-col gap-3 sm:flex-row'}>
         {validTeamTypes.map((validTeamType) => (
           <button
-            className={`flex flex-grow flex-col items-center rounded-lg border px-5 py-12 ${
+            key={validTeamType.value}
+            className={`flex flex-grow flex-col items-center rounded-lg border px-5 pb-10 pt-12 ${
               validTeamType.value == selectedTeamType
                 ? 'border-gray-400 bg-gray-100'
                 : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50'
             }`}
             onClick={() => setSelectedTeamType(validTeamType.value)}
           >
-            <img
-              alt={validTeamType.label}
-              src={validTeamType.icon}
-              className={`mb-3 h-12 w-12 opacity-10 ${
-                validTeamType.value === selectedTeamType ? 'opacity-100' : ''
-              }`}
-            />
+            {
+              <validTeamType.icon
+                className={`mb-3 h-12 w-12 opacity-10 ${
+                  validTeamType.value === selectedTeamType ? 'opacity-100' : ''
+                }`}
+              />
+            }
             <span className="mb-2 block text-2xl font-bold">
               {validTeamType.label}
             </span>
-            <span className="text-sm text-gray-500 leading-[21px]">
+            <span className="text-sm leading-[21px] text-gray-500">
               {validTeamType.description}
             </span>
           </button>
@@ -100,11 +103,11 @@ export function Step0(props: Step0Props) {
       {/*Error message*/}
       {error && <div className="mt-4 text-sm text-red-500">{error}</div>}
 
-      <div className="mt-4 flex flex-col md:flex-row items-stretch md:items-center justify-between gap-2">
+      <div className="mt-4 flex flex-col items-stretch justify-between gap-2 md:flex-row md:items-center">
         <a
           href="/account"
           className={
-            'rounded-md border border-red-400 bg-white px-8 py-2 text-red-500 text-center'
+            'rounded-md border border-red-400 bg-white px-8 py-2 text-center text-red-500'
           }
         >
           Cancel

src/components/CreateTeam/Step1.tsx

@@ -221,11 +221,11 @@ export function Step1(props: Step1Props) {
               setTeamSize((e.target as HTMLSelectElement).value as any)
             }
           >
-            <option value="" selected>
+            <option value="">
               Select team size
             </option>
             {validTeamSizes.map((size) => (
-              <option value={size}>{size} people</option>
+              <option key={size} value={size}>{size} people</option>
             ))}
           </select>
         </div>

src/components/CreateTeam/Step2.tsx

@@ -17,7 +17,9 @@ export function Step2(props: Step2Props) {
     <>
       <div className="mt-4 flex w-full flex-col">
         <div className="mb-1 mt-2">
-          <h2 className="mb-1 md:mb-1.5 text-lg md:text-2xl font-bold">Select Roadmaps</h2>
+          <h2 className="mb-1 text-lg font-bold md:mb-1.5 md:text-2xl">
+            Select Roadmaps
+          </h2>
           <p className="text-sm text-gray-700">
             You can always add and customize your roadmaps later.
           </p>
@@ -25,12 +27,12 @@ export function Step2(props: Step2Props) {
 
         <RoadmapSelector
           teamId={team._id!}
-          teamResourceConfig={teamResourceConfig}
-          setTeamResourceConfig={setTeamResourceConfig}
+          teamResources={teamResourceConfig}
+          setTeamResources={setTeamResourceConfig}
         />
       </div>
 
-      <div className="mt-4 flex flex-col md:flex-row items-stretch md:items-center justify-between gap-2">
+      <div className="mt-4 flex flex-col items-stretch justify-between gap-2 md:flex-row md:items-center">
         <button
           type="button"
           onClick={onBack}
@@ -46,8 +48,9 @@ export function Step2(props: Step2Props) {
           <button
             type="button"
             onClick={onNext}
+            disabled={teamResourceConfig.length !== 0}
             className={
-              'flex-grow rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black md:flex-auto'
+              'flex-grow rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black md:flex-auto disabled:opacity-50 disabled:pointer-events-none'
             }
           >
             Skip for Now

src/components/CreateTeam/Step3.tsx

@@ -178,8 +178,9 @@ export function Step3(props: Step3Props) {
           <button
             type="button"
             onClick={onNext}
+            disabled={users.filter((u) => u.email).length !== 0}
             className={
-              'rounded-md flex-grow md:flex-auto border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black'
+              'rounded-md flex-grow md:flex-auto border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black disabled:opacity-50 disabled:pointer-events-none'
             }
           >
             Skip for Now

src/components/CreateTeam/UpdateTeamResourceModal.tsx

@@ -1,15 +1,14 @@
 import { useEffect, useRef, useState } from 'react';
 import { wireframeJSONToSVG } from 'roadmap-renderer';
 import { Spinner } from '../ReactIcons/Spinner';
-import { httpGet, httpPut } from '../../lib/http';
+import { httpPut } from '../../lib/http';
 import { renderTopicProgress } from '../../lib/resource-progress';
 import '../FrameRenderer/FrameRenderer.css';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { useKeydown } from '../../hooks/use-keydown';
 import type { TeamResourceConfig } from './RoadmapSelector';
 import { useToast } from '../../hooks/use-toast';
-import { useStore } from '@nanostores/react';
-import { $currentTeam } from '../../stores/team';
+import {replaceChildren} from "../../lib/dom.ts";
 
 export type ProgressMapProps = {
   teamId: string;
@@ -40,8 +39,6 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
   const [removedItems, setRemovedItems] =
     useState<string[]>(defaultRemovedItems);
 
-  const currentTeam = useStore($currentTeam);
-
   useEffect(() => {
     function onTopicClick(e: any) {
       const groupEl = e.target.closest('.clickable-group');
@@ -69,7 +66,9 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
     };
   }, [removedItems]);
 
-  let resourceJsonUrl = 'https://roadmap.sh';
+  let resourceJsonUrl = import.meta.env.DEV
+    ? 'http://localhost:3000'
+    : 'https://roadmap.sh';
   if (resourceType === 'roadmap') {
     resourceJsonUrl += `/${resourceId}.json`;
   } else {
@@ -83,7 +82,8 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
       fontURL: '/fonts/balsamiq.woff2',
     });
 
-    containerEl.current?.replaceChildren(svg);
+    replaceChildren(containerEl.current!, svg);
+    // containerEl.current?.replaceChildren(svg);
 
     // Render team configuration
     removedItems.forEach((topicId: string) => {
@@ -151,11 +151,7 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
     <div className="fixed left-0 right-0 top-0 z-50 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
       <div className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
         <div
-          id={
-            currentTeam?.type === 'company'
-              ? 'customized-roadmap'
-              : 'original-roadmap'
-          }
+          id={'customized-roadmap'}
           ref={popupBodyEl}
           className="popup-body relative rounded-lg bg-white shadow"
         >

src/components/CreateVersion/CreateVersion.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useState } from 'react';
+import { httpGet, httpPost } from '../../lib/http';
+import { useToast } from '../../hooks/use-toast';
+import { isLoggedIn } from '../../lib/jwt';
+import { GitFork, Loader2, Map } from 'lucide-react';
+import { showLoginPopup } from '../../lib/popup';
+import type { RoadmapDocument } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
+
+type CreateVersionProps = {
+  roadmapId: string;
+};
+
+export function CreateVersion(props: CreateVersionProps) {
+  const { roadmapId } = props;
+
+  const toast = useToast();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isCreating, setIsCreating] = useState(false);
+  const [isConfirming, setIsConfirming] = useState(false);
+  const [userVersion, setUserVersion] = useState<RoadmapDocument>();
+
+  async function loadMyVersion() {
+    if (!isLoggedIn()) {
+      return;
+    }
+
+    setIsLoading(true);
+    const { response, error } = await httpGet<RoadmapDocument>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-my-version/${roadmapId}`,
+      {},
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(false);
+    setUserVersion(response);
+  }
+
+  useEffect(() => {
+    loadMyVersion().finally(() => {
+      setIsLoading(false);
+    });
+  }, []);
+
+  async function createVersion() {
+    if (isCreating || !roadmapId) {
+      return;
+    }
+
+    if (!isLoggedIn()) {
+      showLoginPopup();
+      return;
+    }
+
+    setIsCreating(true);
+    const { response, error } = await httpPost<{ roadmapId: string }>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-create-version/${roadmapId}`,
+      {},
+    );
+
+    if (error || !response) {
+      setIsCreating(false);
+      toast.error(error?.message || 'Failed to create version');
+      return;
+    }
+
+    window.location.href = `${
+      import.meta.env.PUBLIC_EDITOR_APP_URL
+    }/${response?.roadmapId}`;
+  }
+
+  if (isLoading) {
+    return (
+      <div className="h-[30px] w-[312px] animate-pulse rounded-md bg-gray-300"></div>
+    );
+  }
+
+  if (!isLoading && userVersion?._id) {
+    return (
+      <div className={'flex items-center'}>
+        <a
+          href={`/r?id=${userVersion._id}`}
+          className="flex items-center rounded-md border border-blue-400 bg-gray-50 px-2.5 py-1 text-xs font-medium text-blue-600 hover:bg-blue-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:hover:bg-gray-100 max-sm:hidden sm:text-sm"
+        >
+          <Map size="15px" className="mr-1.5" />
+          Visit your own version of this Roadmap
+        </a>
+      </div>
+    );
+  }
+
+  if (isConfirming) {
+    return (
+      <p className="flex h-[30px] items-center text-sm text-red-500">
+        Create and edit a custom roadmap from this roadmap?
+        <button
+          onClick={() => {
+            setIsConfirming(false);
+            createVersion().finally(() => null);
+          }}
+          className="ml-2 font-semibold underline underline-offset-2"
+        >
+          Yes
+        </button>
+        <span className="text-xs">&nbsp;/&nbsp;</span>
+        <button
+          className="font-semibold underline underline-offset-2"
+          onClick={() => setIsConfirming(false)}
+        >
+          No
+        </button>
+      </p>
+    );
+  }
+
+  return (
+    <button
+      disabled={isCreating}
+      className="flex items-center justify-center rounded-md border border-gray-300 bg-gray-50 px-2.5 py-1 text-xs font-medium text-black hover:bg-gray-200 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:hover:bg-gray-100 max-sm:hidden sm:text-sm"
+      onClick={() => {
+        if (!isLoggedIn()) {
+          showLoginPopup();
+          return;
+        }
+
+        setIsConfirming(true);
+      }}
+    >
+      {isCreating ? (
+        <>
+          <Loader2 className="mr-2 h-3 w-3 animate-spin stroke-[2.5]" />
+          Please wait ..
+        </>
+      ) : (
+        <>
+          <GitFork className="mr-1.5" size="16px" />
+          Create your own version of this roadmap
+        </>
+      )}
+    </button>
+  );
+}

src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapButton.tsx

@@ -0,0 +1,50 @@
+import { Plus } from 'lucide-react';
+import { isLoggedIn } from '../../../lib/jwt';
+import { showLoginPopup } from '../../../lib/popup';
+import { cn } from '../../../lib/classname';
+import { CreateRoadmapModal } from './CreateRoadmapModal';
+import { useState } from 'react';
+
+type CreateRoadmapButtonProps = {
+  className?: string;
+  text?: string;
+  teamId?: string;
+};
+
+export function CreateRoadmapButton(props: CreateRoadmapButtonProps) {
+  const { teamId, className, text = 'Create your own Roadmap' } = props;
+
+  const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);
+
+  function toggleCreateRoadmapHandler() {
+    if (!isLoggedIn()) {
+      return showLoginPopup();
+    }
+
+    setIsCreatingRoadmap(true);
+  }
+
+  return (
+    <>
+      {isCreatingRoadmap && (
+        <CreateRoadmapModal
+          teamId={teamId}
+          onClose={() => {
+            setIsCreatingRoadmap(false);
+          }}
+        />
+      )}
+
+      <button
+        className={cn(
+          'flex h-full w-full items-center justify-center gap-1 overflow-hidden rounded-md border border-dashed border-gray-800 p-3 text-sm text-gray-400 hover:border-gray-600 hover:bg-gray-900 hover:text-gray-300',
+          className,
+        )}
+        onClick={toggleCreateRoadmapHandler}
+      >
+        <Plus size={16} />
+        {text}
+      </button>
+    </>
+  );
+}

src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx

@@ -0,0 +1,244 @@
+import {
+  type FormEvent,
+  type MouseEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Loader2 } from 'lucide-react';
+import { Modal } from '../../Modal';
+import { useToast } from '../../../hooks/use-toast';
+import { httpPost } from '../../../lib/http';
+import { cn } from '../../../lib/classname';
+
+export const allowedRoadmapVisibility = [
+  'me',
+  'friends',
+  'team',
+  'public',
+] as const;
+export type AllowedRoadmapVisibility =
+  (typeof allowedRoadmapVisibility)[number];
+export const allowedCustomRoadmapType = ['role', 'skill'] as const;
+export type AllowedCustomRoadmapType =
+  (typeof allowedCustomRoadmapType)[number];
+
+export interface RoadmapDocument {
+  _id?: string;
+  title: string;
+  description?: string;
+  creatorId: string;
+  teamId?: string;
+  isDiscoverable: boolean;
+  type: AllowedCustomRoadmapType;
+  visibility: AllowedRoadmapVisibility;
+  sharedFriendIds?: string[];
+  sharedTeamMemberIds?: string[];
+  nodes: any[];
+  edges: any[];
+  createdAt: Date;
+  updatedAt: Date;
+  canManage: boolean;
+  isCustomResource: boolean;
+}
+
+interface CreateRoadmapModalProps {
+  onClose: () => void;
+  onCreated?: (roadmap: RoadmapDocument) => void;
+  teamId?: string;
+  visibility?: AllowedRoadmapVisibility;
+}
+
+export function CreateRoadmapModal(props: CreateRoadmapModalProps) {
+  const { onClose, onCreated, teamId } = props;
+
+  const titleRef = useRef<HTMLInputElement>(null);
+  const toast = useToast();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const isInvalidDescription = description?.trim().length > 80;
+
+  async function handleSubmit(
+    e: FormEvent<HTMLFormElement> | MouseEvent<HTMLButtonElement>,
+    redirect: boolean = true,
+  ) {
+    e.preventDefault();
+    if (isLoading) {
+      return;
+    }
+
+    if (title.trim() === '' || isInvalidDescription) {
+      toast.error('Please fill all the fields');
+      return;
+    }
+
+    setIsLoading(true);
+    const { response, error } = await httpPost<RoadmapDocument>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-create-roadmap`,
+      {
+        title,
+        description,
+        ...(teamId && {
+          teamId,
+        }),
+        nodes: [],
+        edges: [],
+      },
+    );
+
+    if (error) {
+      setIsLoading(false);
+      toast.error(error?.message || 'Something went wrong, please try again');
+      return;
+    }
+
+    toast.success('Roadmap created successfully');
+    if (redirect) {
+      window.location.href = `${
+        import.meta.env.PUBLIC_EDITOR_APP_URL
+      }/${response?._id}`;
+      return;
+    }
+
+    if (onCreated) {
+      onCreated(response as RoadmapDocument);
+      return;
+    }
+
+    onClose();
+
+    setTitle('');
+    setDescription('');
+    setIsLoading(false);
+  }
+
+  useEffect(() => {
+    titleRef.current?.focus();
+  }, []);
+
+  return (
+    <Modal
+      onClose={onClose}
+      bodyClassName="p-4"
+      wrapperClassName={cn(teamId && 'max-w-lg')}
+    >
+      <div className="mb-4">
+        <h2 className="text-lg font-medium text-gray-900">Create Roadmap</h2>
+        <p className="mt-1 text-sm text-gray-500">
+          Add a title and description to your roadmap.
+        </p>
+      </div>
+      <form onSubmit={handleSubmit}>
+        <div className="mt-4">
+          <label
+            htmlFor="title"
+            className="block text-xs uppercase text-gray-400"
+          >
+            Roadmap Title
+          </label>
+          <div className="mt-1">
+            <input
+              ref={titleRef}
+              type="text"
+              name="title"
+              id="title"
+              required
+              className="block text-black w-full rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm"
+              placeholder="Enter Title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </div>
+        </div>
+        <div className="mt-4">
+          <label
+            htmlFor="description"
+            className="block text-xs uppercase text-gray-400"
+          >
+            Description
+          </label>
+          <div className="relative mt-1">
+            <textarea
+              id="description"
+              name="description"
+              required
+              className={cn(
+                'block text-black h-24 w-full resize-none rounded-md border border-gray-300 px-2.5 py-2 outline-none focus:border-black sm:text-sm',
+                isInvalidDescription && 'border-red-300 bg-red-100'
+              )}
+              placeholder="Enter Description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+            <div className="absolute bottom-2 right-2 text-xs text-gray-400">
+              {description.length}/80
+            </div>
+          </div>
+        </div>
+
+        <div
+          className={cn('mt-4 flex justify-between gap-2', teamId && 'mt-8')}
+        >
+          <button
+            onClick={onClose}
+            type="button"
+            className={cn(
+              'block h-9 rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-black outline-none hover:border-gray-300 hover:bg-gray-50 focus:border-gray-300 focus:bg-gray-100',
+              !teamId && 'w-full',
+            )}
+          >
+            Cancel
+          </button>
+
+          <div className={cn('flex items-center gap-2', !teamId && 'w-full')}>
+            {teamId && !isLoading && (
+              <button
+                disabled={isLoading}
+                type="button"
+                onClick={(e) => handleSubmit(e, false)}
+                className="flex h-9 items-center justify-center rounded-md border border-black bg-white px-4 py-2 text-sm font-medium text-black outline-none hover:bg-black hover:text-white focus:bg-black focus:text-white"
+              >
+                {isLoading ? (
+                  <Loader2 size={16} className="animate-spin" />
+                ) : (
+                  'Save as Placeholder'
+                )}
+              </button>
+            )}
+
+            <button
+              disabled={isLoading}
+              type="submit"
+              className={cn(
+                'flex h-9 items-center justify-center rounded-md border border-transparent bg-black px-4 py-2 text-sm font-medium text-white outline-none hover:bg-gray-800 focus:bg-gray-800',
+                teamId ? 'hidden sm:flex' : 'w-full',
+              )}
+            >
+              {isLoading ? (
+                <Loader2 size={16} className="animate-spin" />
+              ) : teamId ? (
+                'Continue to Editor'
+              ) : (
+                'Create'
+              )}
+            </button>
+          </div>
+        </div>
+        {teamId && (
+          <>
+            <p className="mt-4 hidden rounded-md border border-orange-200 bg-orange-50 p-2.5 text-sm text-orange-600 sm:block">
+              Preparing the roadmap might take some time, feel free to save it
+              as a placeholder and anyone with the role <strong>admin</strong>{' '}
+              or <strong>manager</strong> can prepare it later.
+            </p>
+            <p className="mt-4 rounded-md border border-orange-200 bg-orange-50 p-2.5 text-sm text-orange-600 sm:hidden">
+              Create a placeholder now and prepare it later.
+            </p>
+          </>
+        )}
+      </form>
+    </Modal>
+  );
+}

src/components/CustomRoadmap/CustomRoadmap.tsx

@@ -0,0 +1,125 @@
+import { useEffect, useState } from 'react';
+import { getUrlParams } from '../../lib/browser';
+import {
+  type AppError,
+  type FetchError,
+  httpGet,
+  httpPost,
+} from '../../lib/http';
+import { RoadmapHeader } from './RoadmapHeader';
+import { TopicDetail } from '../TopicDetail/TopicDetail';
+import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
+import { currentRoadmap } from '../../stores/roadmap';
+import { RestrictedPage } from './RestrictedPage';
+import { isLoggedIn } from '../../lib/jwt';
+import { FlowRoadmapRenderer } from './FlowRoadmapRenderer';
+
+export const allowedLinkTypes = [
+  'video',
+  'article',
+  'opensource',
+  'course',
+  'website',
+  'podcast',
+] as const;
+
+export type AllowedLinkTypes = (typeof allowedLinkTypes)[number];
+
+export interface RoadmapContentDocument {
+  _id?: string;
+  roadmapId: string;
+  nodeId: string;
+  title: string;
+  description: string;
+  links: {
+    id: string;
+    type: AllowedLinkTypes;
+    title: string;
+    url: string;
+  }[];
+}
+
+export type CreatorType = {
+  id: string;
+  name: string;
+  avatar: string;
+};
+
+export type GetRoadmapResponse = RoadmapDocument & {
+  canManage: boolean;
+  creator?: CreatorType;
+  team?: CreatorType;
+};
+
+export function hideRoadmapLoader() {
+  const loaderEl = document.querySelector(
+    '[data-roadmap-loader]',
+  ) as HTMLElement;
+  if (loaderEl) {
+    loaderEl.remove();
+  }
+}
+
+type CustomRoadmapProps = {
+  isEmbed?: boolean;
+};
+
+export function CustomRoadmap(props: CustomRoadmapProps) {
+  const { isEmbed = false } = props;
+
+  const { id, secret } = getUrlParams() as { id: string; secret: string };
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [roadmap, setRoadmap] = useState<GetRoadmapResponse | null>(null);
+  const [error, setError] = useState<AppError | FetchError | undefined>();
+
+  async function getRoadmap() {
+    setIsLoading(true);
+
+    const roadmapUrl = new URL(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-roadmap/${id}`,
+    );
+
+    if (secret) {
+      roadmapUrl.searchParams.set('secret', secret);
+    }
+
+    const { response, error } = await httpGet<GetRoadmapResponse>(
+      roadmapUrl.toString(),
+    );
+
+    if (error || !response) {
+      setError(error);
+      setIsLoading(false);
+      return;
+    }
+
+    document.title = `${response.title} - roadmap.sh`;
+
+    setRoadmap(response);
+    currentRoadmap.set(response);
+    setIsLoading(false);
+  }
+
+  useEffect(() => {
+    getRoadmap().finally(() => {
+      hideRoadmapLoader();
+    });
+  }, []);
+
+  if (isLoading) {
+    return null;
+  }
+
+  if (error) {
+    return <RestrictedPage error={error} />;
+  }
+
+  return (
+    <>
+      {!isEmbed && <RoadmapHeader />}
+      <FlowRoadmapRenderer isEmbed={isEmbed} roadmap={roadmap!} />
+      <TopicDetail isEmbed={isEmbed} canSubmitContribution={false} />
+    </>
+  );
+}

src/components/CustomRoadmap/EmbedRoadmapModal.tsx

@@ -0,0 +1,81 @@
+import { useStore } from '@nanostores/react';
+import { Check, Copy } from 'lucide-react';
+
+import { Modal } from '../Modal';
+import { useToast } from '../../hooks/use-toast';
+import { useCopyText } from '../../hooks/use-copy-text';
+import { currentRoadmap, isCurrentRoadmapPersonal } from '../../stores/roadmap';
+import { cn } from '../../lib/classname.ts';
+
+type ShareRoadmapModalProps = {
+  onClose: () => void;
+};
+
+export function EmbedRoadmapModal(props: ShareRoadmapModalProps) {
+  const { onClose } = props;
+
+  const toast = useToast();
+  const $currentRoadmap = useStore(currentRoadmap);
+  const $isCurrentRoadmapPersonal = useStore(isCurrentRoadmapPersonal);
+  const roadmapId = $currentRoadmap?._id!;
+
+  const { copyText, isCopied } = useCopyText();
+
+  const isDev = import.meta.env.DEV;
+  const baseUrl = isDev ? 'http://localhost:3000' : 'https://roadmap.sh';
+
+  const embedHtml = `<iframe src="${baseUrl}/r/embed?id=${roadmapId}" width="100%" height="500px" frameBorder="0"\n></iframe>`;
+
+  return (
+    <Modal onClose={onClose} wrapperClassName={'max-w-[500px]'}>
+      <div className="p-4 pb-0">
+        <h1 className="text-xl font-semibold leading-5 text-gray-900">
+          Embed Roadmap
+        </h1>
+      </div>
+
+      <div className="px-4 pt-3">
+        <p className={'mb-2 text-sm text-gray-500'}>
+          Copy the following HTML code and paste it into your website.
+        </p>
+        <input
+          type="text"
+          value={embedHtml}
+          readOnly={true}
+          onClick={(e) => {
+            e.currentTarget.select();
+            copyText(embedHtml);
+          }}
+          className="w-full resize-none rounded-md border bg-gray-50 p-2 text-sm"
+        />
+      </div>
+
+      <div className="flex items-center justify-between px-4 pb-4 pt-2">
+        <button
+          className={cn(
+            'flex h-9 w-full items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white outline-none',
+            {
+              'bg-green-500 hover:bg-green-600 focus:bg-green-600': isCopied,
+              'bg-gray-900 hover:bg-gray-800 focus:bg-gray-800': !isCopied,
+            },
+          )}
+          onClick={() => {
+            copyText(embedHtml);
+          }}
+        >
+          {isCopied ? (
+            <>
+              <Check size={14} className="mr-2 stroke-[2.5]" />
+              Copied
+            </>
+          ) : (
+            <>
+              <Copy size={14} className="mr-2 stroke-[2.5]" />
+              Copy Link
+            </>
+          )}
+        </button>
+      </div>
+    </Modal>
+  );
+}

src/components/CustomRoadmap/EmptyRoadmap.tsx

@@ -0,0 +1,32 @@
+import { CircleSlash, PenSquare, Shapes } from 'lucide-react';
+import { cn } from '../../lib/classname';
+
+type EmptyRoadmapProps = {
+  roadmapId: string;
+  canManage: boolean;
+  className?: string;
+};
+
+export function EmptyRoadmap(props: EmptyRoadmapProps) {
+  const { roadmapId, canManage, className } = props;
+  const editUrl = `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${roadmapId}`;
+
+  return (
+    <div className={cn('flex h-full items-center justify-center', className)}>
+      <div className="flex flex-col items-center">
+        <CircleSlash className="mx-auto h-20 w-20 text-gray-400" />
+        <h3 className="mt-2">This roadmap is currently empty.</h3>
+
+        {canManage && (
+          <a
+            href={editUrl}
+            className="mt-4 flex items-center rounded-md bg-gray-500 px-4 py-2 font-medium text-white hover:bg-gray-600"
+          >
+            <Shapes className="mr-2 inline-block h-4 w-4" />
+            Edit Roadmap
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/CustomRoadmap/FlowRoadmapRenderer.tsx

@@ -0,0 +1,170 @@
+import { ReadonlyEditor } from '../../../editor/readonly-editor';
+import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
+import {
+  refreshProgressCounters,
+  renderResourceProgress,
+  renderTopicProgress,
+  type ResourceProgressType,
+  updateResourceProgress,
+} from '../../lib/resource-progress';
+import { pageProgressMessage } from '../../stores/page';
+import { useToast } from '../../hooks/use-toast';
+import type { Node } from 'reactflow';
+import { type MouseEvent, useCallback, useRef, useState } from 'react';
+import { EmptyRoadmap } from './EmptyRoadmap';
+import { cn } from '../../lib/classname';
+import { totalRoadmapNodes } from '../../stores/roadmap.ts';
+
+type FlowRoadmapRendererProps = {
+  isEmbed?: boolean;
+  roadmap: RoadmapDocument;
+};
+
+export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
+  const { roadmap, isEmbed = false } = props;
+  const roadmapId = String(roadmap._id!);
+
+  const [hideRenderer, setHideRenderer] = useState(false);
+  const editorWrapperRef = useRef<HTMLDivElement>(null);
+
+  const toast = useToast();
+
+  async function updateTopicStatus(
+    topicId: string,
+    newStatus: ResourceProgressType,
+  ) {
+    if (isEmbed) {
+      return;
+    }
+
+    pageProgressMessage.set('Updating progress');
+    updateResourceProgress(
+      {
+        resourceId: roadmapId,
+        resourceType: 'roadmap',
+        topicId,
+      },
+      newStatus,
+    )
+      .then(() => {
+        renderTopicProgress(topicId, newStatus);
+      })
+      .catch((err) => {
+        toast.error('Something went wrong, please try again.');
+        console.error(err);
+      })
+      .finally(() => {
+        pageProgressMessage.set('');
+        refreshProgressCounters();
+      });
+
+    return;
+  }
+
+  const handleTopicRightClick = useCallback((e: MouseEvent, node: Node) => {
+    const target = e?.currentTarget as HTMLDivElement;
+    if (!target) {
+      return;
+    }
+
+    const isCurrentStatusDone = target?.classList.contains('done');
+    updateTopicStatus(node.id, isCurrentStatusDone ? 'pending' : 'done');
+  }, []);
+
+  const handleTopicShiftClick = useCallback((e: MouseEvent, node: Node) => {
+    const target = e?.currentTarget as HTMLDivElement;
+    if (!target) {
+      return;
+    }
+
+    const isCurrentStatusLearning = target?.classList.contains('learning');
+    updateTopicStatus(
+      node.id,
+      isCurrentStatusLearning ? 'pending' : 'learning',
+    );
+  }, []);
+
+  const handleTopicAltClick = useCallback((e: MouseEvent, node: Node) => {
+    const target = e?.currentTarget as HTMLDivElement;
+    if (!target) {
+      return;
+    }
+
+    const isCurrentStatusSkipped = target?.classList.contains('skipped');
+    updateTopicStatus(node.id, isCurrentStatusSkipped ? 'pending' : 'skipped');
+  }, []);
+
+  const handleTopicClick = useCallback((e: MouseEvent, node: Node) => {
+    const target = e?.currentTarget as HTMLDivElement;
+    if (!target) {
+      return;
+    }
+
+    window.dispatchEvent(
+      new CustomEvent('roadmap.node.click', {
+        detail: {
+          topicId: node.id,
+          resourceId: roadmapId,
+          resourceType: 'roadmap',
+          isCustomResource: true,
+        },
+      }),
+    );
+  }, []);
+
+  const handleLinkClick = useCallback((linkId: string, href: string) => {
+    if (!href) {
+      return;
+    }
+
+    const isExternalLink = href.startsWith('http');
+    if (isExternalLink) {
+      window.open(href, '_blank');
+    } else {
+      window.location.href = href;
+    }
+  }, []);
+
+  return (
+    <>
+      {hideRenderer && (
+        <EmptyRoadmap
+          roadmapId={roadmapId}
+          canManage={roadmap.canManage}
+          className="grow"
+        />
+      )}
+      <ReadonlyEditor
+        ref={editorWrapperRef}
+        roadmap={roadmap}
+        className={cn(
+          roadmap?.nodes?.length === 0
+            ? 'grow'
+            : 'min-h-0 max-md:min-h-[1000px]',
+        )}
+        onRendered={() => {
+          renderResourceProgress('roadmap', roadmapId).then(() => {
+            totalRoadmapNodes.set(
+              roadmap?.nodes?.filter((node) => {
+                return ['topic', 'subtopic'].includes(node.type);
+              }).length || 0,
+            );
+
+            if (roadmap?.nodes?.length === 0) {
+              setHideRenderer(true);
+              editorWrapperRef?.current?.classList.add('hidden');
+            }
+          });
+        }}
+        onTopicClick={handleTopicClick}
+        onTopicRightClick={handleTopicRightClick}
+        onTopicShiftClick={handleTopicShiftClick}
+        onTopicAltClick={handleTopicAltClick}
+        onButtonNodeClick={handleLinkClick}
+        onLinkClick={handleLinkClick}
+        fontFamily="Balsamiq Sans"
+        fontURL="/fonts/balsamiq.woff2"
+      />
+    </>
+  );
+}

src/components/CustomRoadmap/PersonalRoadmapActionDropdown.tsx

@@ -0,0 +1,96 @@
+import { useRef, useState } from 'react';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { Lock, MoreVertical, Shapes, Trash2 } from 'lucide-react';
+import { MoreVerticalIcon } from '../ReactIcons/MoreVerticalIcon.tsx';
+
+type PersonalRoadmapActionDropdownProps = {
+  onDelete?: () => void;
+  onCustomize?: () => void;
+  onUpdateSharing?: () => void;
+};
+
+export function PersonalRoadmapActionDropdown(
+  props: PersonalRoadmapActionDropdownProps,
+) {
+  const { onDelete, onUpdateSharing, onCustomize } = props;
+
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useOutsideClick(menuRef, () => {
+    setIsOpen(false);
+  });
+
+  return (
+    <div className="relative">
+      <button
+        disabled={false}
+        onClick={() => setIsOpen(!isOpen)}
+        className="hidden items-center opacity-60 transition-opacity hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30 sm:flex"
+      >
+        <MoreVerticalIcon className={'h-4 w-4'} />
+      </button>
+
+      <button
+        disabled={false}
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none sm:hidden"
+      >
+        <MoreVertical size={14} />
+        Options
+      </button>
+
+      {isOpen && (
+        <div
+          ref={menuRef}
+          className="align-right absolute right-auto top-full z-50 mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md sm:right-0"
+        >
+          <ul>
+            {onUpdateSharing && (
+              <li>
+                <button
+                  onClick={() => {
+                    setIsOpen(false);
+                    onUpdateSharing();
+                  }}
+                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                >
+                  <Lock size={14} className="mr-2" />
+                  Sharing
+                </button>
+              </li>
+            )}
+            {onCustomize && (
+              <li>
+                <button
+                  onClick={() => {
+                    setIsOpen(false);
+                    onCustomize();
+                  }}
+                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                >
+                  <Shapes size={14} className="mr-2" />
+                  Customize
+                </button>
+              </li>
+            )}
+            {onDelete && (
+              <li>
+                <button
+                  onClick={() => {
+                    setIsOpen(false);
+                    onDelete();
+                  }}
+                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                >
+                  <Trash2 size={14} className="mr-2" />
+                  Delete
+                </button>
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/CustomRoadmap/PersonalRoadmapList.tsx

@@ -0,0 +1,248 @@
+import { httpDelete } from '../../lib/http';
+import { pageProgressMessage } from '../../stores/page';
+import {
+  ExternalLink,
+  Shapes,
+  type LucideIcon,
+  Globe,
+  LockIcon,
+  Users,
+  PenSquare,
+} from 'lucide-react';
+import { useToast } from '../../hooks/use-toast';
+import {
+  type AllowedRoadmapVisibility,
+  type RoadmapDocument,
+} from './CreateRoadmap/CreateRoadmapModal';
+import { PersonalRoadmapActionDropdown } from './PersonalRoadmapActionDropdown';
+import type { GetRoadmapListResponse } from './RoadmapListPage';
+import { useState, type Dispatch, type SetStateAction } from 'react';
+import { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal';
+import {RoadmapIcon} from "../ReactIcons/RoadmapIcon.tsx";
+
+type PersonalRoadmapListType = {
+  roadmaps: GetRoadmapListResponse['personalRoadmaps'];
+  onDelete: (roadmapId: string) => void;
+  setAllRoadmaps: Dispatch<SetStateAction<GetRoadmapListResponse>>;
+};
+
+export function PersonalRoadmapList(props: PersonalRoadmapListType) {
+  const { roadmaps: roadmapList, onDelete, setAllRoadmaps } = props;
+
+  const toast = useToast();
+
+  const [selectedRoadmap, setSelectedRoadmap] = useState<
+    GetRoadmapListResponse['personalRoadmaps'][number] | null
+  >(null);
+
+  async function deleteRoadmap(roadmapId: string) {
+    const { response, error } = await httpDelete<RoadmapDocument[]>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-delete-roadmap/${roadmapId}`
+    );
+
+    if (error || !response) {
+      console.error(error);
+      toast.error(error?.message || 'Something went wrong, please try again');
+
+      return;
+    }
+
+    toast.success('Roadmap deleted');
+    onDelete(roadmapId);
+  }
+
+  async function onRemove(roadmapId: string) {
+    pageProgressMessage.set('Deleting roadmap');
+
+    deleteRoadmap(roadmapId).finally(() => {
+      pageProgressMessage.set('');
+    });
+  }
+
+  const shareSettingsModal = selectedRoadmap && (
+    <ShareOptionsModal
+      isDiscoverable={selectedRoadmap.isDiscoverable}
+      description={selectedRoadmap.description}
+      visibility={selectedRoadmap.visibility}
+      sharedFriendIds={selectedRoadmap.sharedFriendIds}
+      sharedTeamMemberIds={selectedRoadmap.sharedTeamMemberIds}
+      roadmapId={selectedRoadmap._id!}
+      onClose={() => setSelectedRoadmap(null)}
+      onShareSettingsUpdate={(settings) => {
+        setAllRoadmaps((prev) => {
+          return {
+            ...prev,
+            personalRoadmaps: prev.personalRoadmaps.map((roadmap) => {
+              if (roadmap._id === selectedRoadmap._id) {
+                return {
+                  ...roadmap,
+                  ...settings,
+                };
+              }
+
+              return roadmap;
+            }),
+          };
+        });
+      }}
+    />
+  );
+
+  if (roadmapList.length === 0) {
+    return (
+      <div className="flex flex-col items-center p-4 py-20">
+        <RoadmapIcon className="mb-4 h-24 w-24 opacity-10" />
+
+        <h3 className="mb-1 text-2xl font-bold text-gray-900">No roadmaps</h3>
+        <p className="text-base text-gray-500">
+          Create a roadmap to get started
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {shareSettingsModal}
+      <div className="mb-3 flex items-center justify-between">
+        <span className={'text-sm text-gray-400'}>
+          {roadmapList.length} custom roadmap(s)
+        </span>
+      </div>
+      <ul className="flex flex-col divide-y rounded-md border">
+        {roadmapList.map((roadmap) => {
+          return (
+            <CustomRoadmapItem
+              key={roadmap._id!}
+              roadmap={roadmap}
+              onRemove={onRemove}
+              setSelectedRoadmap={setSelectedRoadmap}
+            />
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+type CustomRoadmapItemProps = {
+  roadmap: GetRoadmapListResponse['personalRoadmaps'][number];
+  onRemove: (roadmapId: string) => Promise<void>;
+  setSelectedRoadmap: (
+    roadmap: GetRoadmapListResponse['personalRoadmaps'][number] | null
+  ) => void;
+};
+
+function CustomRoadmapItem(props: CustomRoadmapItemProps) {
+  const { roadmap, onRemove, setSelectedRoadmap } = props;
+
+  const editorLink = `${import.meta.env.PUBLIC_EDITOR_APP_URL}/${roadmap._id}`;
+
+  return (
+    <li
+      className="grid grid-cols-1 p-2.5 sm:grid-cols-[auto_172px]"
+      key={roadmap._id!}
+    >
+      <div className="mb-3 grid grid-cols-1 sm:mb-0">
+        <p className="mb-1.5 truncate text-base font-medium leading-tight text-black">
+          {roadmap.title}
+        </p>
+        <span className="flex items-center text-xs leading-none text-gray-400">
+          <VisibilityBadge
+            visibility={roadmap.visibility!}
+            sharedFriendIds={roadmap.sharedFriendIds}
+          />
+          <span className="mx-2 font-semibold">&middot;</span>
+          <Shapes size={16} className="mr-1 inline-block h-4 w-4" />
+          {roadmap.topics} topic
+        </span>
+      </div>
+      <div className="mr-1 flex items-center justify-start sm:justify-end">
+        <PersonalRoadmapActionDropdown
+          onUpdateSharing={() => {
+            setSelectedRoadmap(roadmap);
+          }}
+          onCustomize={() => {
+            window.open(editorLink, '_blank');
+          }}
+          onDelete={() => {
+            if (confirm('Are you sure you want to remove this roadmap?')) {
+              onRemove(roadmap._id!).finally(() => {});
+            }
+          }}
+        />
+
+        <a
+          href={editorLink}
+          className={
+            'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs text-black hover:bg-gray-50 focus:outline-none'
+          }
+          target={'_blank'}
+        >
+          <PenSquare className="inline-block h-4 w-4" />
+          Edit
+        </a>
+        <a
+          href={`/r?id=${roadmap._id}`}
+          className={
+            'ml-2 flex items-center gap-2 rounded-md border border-blue-400 bg-white px-2 py-1.5 text-xs hover:bg-blue-50 focus:outline-none text-blue-600'
+          }
+          target={'_blank'}
+        >
+          <ExternalLink className="inline-block h-4 w-4" />
+          Visit
+        </a>
+      </div>
+    </li>
+  );
+}
+
+type VisibilityLabelProps = {
+  visibility: AllowedRoadmapVisibility;
+  sharedFriendIds?: string[];
+};
+
+const visibilityDetails: Record<
+  AllowedRoadmapVisibility,
+  {
+    icon: LucideIcon;
+    label: string;
+  }
+> = {
+  public: {
+    icon: Globe,
+    label: 'Public',
+  },
+  me: {
+    icon: LockIcon,
+    label: 'Only me',
+  },
+  team: {
+    icon: Users,
+    label: 'Team Member(s)',
+  },
+  friends: {
+    icon: Users,
+    label: 'Friend(s)',
+  },
+} as const;
+
+function VisibilityBadge(props: VisibilityLabelProps) {
+  const { visibility, sharedFriendIds = [] } = props;
+
+  const { label, icon: Icon } = visibilityDetails[visibility];
+
+  return (
+    <span
+      className={`inline-flex items-center gap-1.5 whitespace-nowrap text-xs font-normal`}
+    >
+      <Icon className="inline-block h-3 w-3" />
+      <div className="flex items-center">
+        {visibility === 'friends' && sharedFriendIds?.length > 0 && (
+          <span className="mr-1">{sharedFriendIds.length}</span>
+        )}
+        {label}
+      </div>
+    </span>
+  );
+}

src/components/CustomRoadmap/ResourceProgressStats.tsx

@@ -0,0 +1,113 @@
+import { HelpCircle } from 'lucide-react';
+import { cn } from '../../lib/classname';
+import type { ResourceType } from '../../lib/resource-progress';
+import { useState } from 'react';
+import { useStore } from '@nanostores/react';
+import { canManageCurrentRoadmap, currentRoadmap } from '../../stores/roadmap';
+import { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal';
+
+type ResourceProgressStatsProps = {
+  resourceId: string;
+  resourceType: ResourceType;
+  isSecondaryBanner?: boolean;
+};
+
+export function ResourceProgressStats(props: ResourceProgressStatsProps) {
+  const { isSecondaryBanner = false } = props;
+
+  const [isSharing, setIsSharing] = useState(false);
+
+  const $canManageCurrentRoadmap = useStore(canManageCurrentRoadmap);
+  const $currentRoadmap = useStore(currentRoadmap);
+
+  return (
+    <>
+      {isSharing && $canManageCurrentRoadmap && $currentRoadmap && (
+        <ShareOptionsModal
+          isDiscoverable={$currentRoadmap.isDiscoverable}
+          description={$currentRoadmap?.description}
+          visibility={$currentRoadmap?.visibility}
+          teamId={$currentRoadmap?.teamId}
+          roadmapId={$currentRoadmap?._id!}
+          sharedFriendIds={$currentRoadmap?.sharedFriendIds || []}
+          sharedTeamMemberIds={$currentRoadmap?.sharedTeamMemberIds || []}
+          onClose={() => setIsSharing(false)}
+          onShareSettingsUpdate={(settings) => {
+            currentRoadmap.set({
+              ...$currentRoadmap,
+              ...settings,
+            });
+          }}
+        />
+      )}
+      <div
+        data-progress-nums-container=""
+        className={cn(
+          'striped-loader relative z-50 hidden items-center justify-between bg-white px-2 py-1.5 sm:flex',
+          {
+            'rounded-bl-md rounded-br-md': isSecondaryBanner,
+            'rounded-md': !isSecondaryBanner,
+          }
+        )}
+      >
+        <p
+          className="flex text-sm opacity-0 transition-opacity duration-300"
+          data-progress-nums=""
+        >
+          <span className="mr-2.5 rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+            <span data-progress-percentage="">0</span>% Done
+          </span>
+
+          <span className="itesm-center hidden md:flex">
+            <span>
+              <span data-progress-done="">0</span> completed
+            </span>
+            <span className="mx-1.5 text-gray-400">&middot;</span>
+            <span>
+              <span data-progress-learning="">0</span> in progress
+            </span>
+            <span className="mx-1.5 text-gray-400">&middot;</span>
+            <span>
+              <span data-progress-skipped="">0</span> skipped
+            </span>
+            <span className="mx-1.5 text-gray-400">&middot;</span>
+            <span>
+              <span data-progress-total="">0</span> Total
+            </span>
+          </span>
+          <span className="md:hidden">
+            <span data-progress-done="">0</span> of{' '}
+            <span data-progress-total="">0</span> Done
+          </span>
+        </p>
+
+        <div
+          className="flex items-center gap-3 opacity-0 transition-opacity duration-300"
+          data-progress-nums=""
+        >
+          <button
+            data-popup="progress-help"
+            className="flex items-center gap-1 text-sm font-medium text-gray-500 opacity-0 transition-opacity hover:text-black"
+            data-progress-nums=""
+          >
+            <HelpCircle className="h-3.5 w-3.5 stroke-[2.5px]" />
+            Track Progress
+          </button>
+        </div>
+      </div>
+
+      <div
+        data-progress-nums-container=""
+        className="striped-loader relative -mb-2 flex items-center justify-between rounded-md border bg-white px-2 py-1.5 text-sm text-gray-700 sm:hidden"
+      >
+        <span
+          data-progress-nums=""
+          className="text-gray-500 opacity-0 transition-opacity duration-300"
+        >
+          <span data-progress-done="">0</span> of{' '}
+          <span data-progress-total="">0</span> Done
+        </span>
+      </div>
+    </>
+  );
+}

src/components/CustomRoadmap/RestrictedPage.tsx

@@ -0,0 +1,52 @@
+import { ShieldBan } from 'lucide-react';
+import type { FetchError } from '../../lib/http';
+
+type RestrictedPageProps = {
+  error: FetchError;
+};
+
+export function RestrictedPage(props: RestrictedPageProps) {
+  const { error } = props;
+
+  if (error.status === 404) {
+    return (
+      <ErrorMessage
+        icon={<ShieldBan className="h-16 w-16" />}
+        title="Roadmap not found"
+        message="The roadmap you are looking for does not exist or has been deleted."
+      />
+    );
+  }
+
+  return (
+    <ErrorMessage
+      icon={<ShieldBan className="h-16 w-16" />}
+      title="Restricted Access"
+      message={error?.message}
+    />
+  );
+}
+
+type ErrorMessageProps = {
+  title: string;
+  message: string;
+  icon: React.ReactNode;
+};
+
+function ErrorMessage(props: ErrorMessageProps) {
+  const { title, message, icon } = props;
+  return (
+    <div className="flex grow flex-col items-center justify-center">
+      {icon}
+      <h2 className="mt-4 text-2xl font-semibold">{title}</h2>
+      <p>{message || 'This roadmap is not available for public access.'}</p>
+
+      <a
+        href="/"
+        className="mt-4 font-medium underline underline-offset-2 hover:no-underline"
+      >
+        &larr; Go back to home
+      </a>
+    </div>
+  );
+}

src/components/CustomRoadmap/RoadmapActionButton.tsx

@@ -0,0 +1,85 @@
+import { useRef, useState } from 'react';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { Lock, MoreVertical, Shapes, Trash2 } from 'lucide-react';
+
+type RoadmapActionButtonProps = {
+  onDelete?: () => void;
+  onCustomize?: () => void;
+  onUpdateSharing?: () => void;
+};
+
+export function RoadmapActionButton(props: RoadmapActionButtonProps) {
+  const { onDelete, onUpdateSharing, onCustomize } = props;
+
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useOutsideClick(menuRef, () => {
+    setIsOpen(false);
+  });
+
+  return (
+    <div className="relative">
+      <button
+        disabled={false}
+        onClick={() => setIsOpen(!isOpen)}
+        className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:border-gray-300 hover:bg-gray-300 sm:pl-1.5 sm:pr-3 sm:text-sm"
+      >
+        <MoreVertical className="mr-0 h-4 w-4 stroke-[2.5] sm:mr-1.5" />
+        <span className="hidden sm:inline">Actions</span>
+      </button>
+
+      {isOpen && (
+        <div
+          ref={menuRef}
+          className="align-right absolute right-0 top-full mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md z-[9999]"
+        >
+          <ul>
+            {onUpdateSharing && (
+              <li>
+                <button
+                  onClick={() => {
+                    setIsOpen(false);
+                    onUpdateSharing();
+                  }}
+                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                >
+                  <Lock size={14} className="mr-2" />
+                  Sharing
+                </button>
+              </li>
+            )}
+            {onCustomize && (
+              <li>
+                <button
+                  onClick={() => {
+                    setIsOpen(false);
+                    onCustomize();
+                  }}
+                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                >
+                  <Shapes size={14} className="mr-2" />
+                  Customize
+                </button>
+              </li>
+            )}
+            {onDelete && (
+              <li>
+                <button
+                  onClick={() => {
+                    setIsOpen(false);
+                    onDelete();
+                  }}
+                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                >
+                  <Trash2 size={14} className="mr-2" />
+                  Delete
+                </button>
+              </li>
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -0,0 +1,221 @@
+import { RoadmapHint } from './RoadmapHint';
+import { useStore } from '@nanostores/react';
+import { canManageCurrentRoadmap, currentRoadmap } from '../../stores/roadmap';
+import { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal';
+import { useState } from 'react';
+import { pageProgressMessage } from '../../stores/page';
+import { httpDelete, httpPut } from '../../lib/http';
+import { type TeamResourceConfig } from '../CreateTeam/RoadmapSelector';
+import { useToast } from '../../hooks/use-toast';
+import { RoadmapActionButton } from './RoadmapActionButton';
+import { Lock, Shapes } from 'lucide-react';
+import { Modal } from '../Modal';
+import { ShareSuccess } from '../ShareOptions/ShareSuccess';
+import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx';
+
+type RoadmapHeaderProps = {};
+
+export function RoadmapHeader(props: RoadmapHeaderProps) {
+  const $canManageCurrentRoadmap = useStore(canManageCurrentRoadmap);
+  const $currentRoadmap = useStore(currentRoadmap);
+
+  const {
+    title,
+    description,
+    _id: roadmapId,
+    creator,
+    team,
+    visibility,
+  } = useStore(currentRoadmap) || {};
+
+  const [isSharing, setIsSharing] = useState(false);
+  const [isSharingWithOthers, setIsSharingWithOthers] = useState(false);
+  const toast = useToast();
+
+  async function deleteResource() {
+    pageProgressMessage.set('Deleting roadmap');
+
+    const teamId = $currentRoadmap?.teamId;
+    const baseApiUrl = import.meta.env.PUBLIC_API_URL;
+
+    let error, response;
+    if (teamId) {
+      ({ error, response } = await httpPut<TeamResourceConfig>(
+        `${baseApiUrl}/v1-delete-team-resource-config/${teamId}`,
+        {
+          resourceId: roadmapId,
+          resourceType: 'roadmap',
+        },
+      ));
+    } else {
+      ({ error, response } = await httpDelete<TeamResourceConfig>(
+        `${baseApiUrl}/v1-delete-roadmap/${roadmapId}`,
+      ));
+    }
+
+    if (error || !response) {
+      toast.error(error?.message || 'Something went wrong');
+      return;
+    }
+
+    toast.success('Roadmap removed');
+    if (!teamId) {
+      window.location.href = '/account/roadmaps';
+    } else {
+      window.location.href = `/team/roadmaps?t=${teamId}`;
+    }
+  }
+
+  const avatarUrl = creator?.avatar
+    ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${creator?.avatar}`
+    : '/images/default-avatar.png';
+
+  const sharingWithOthersModal = isSharingWithOthers && (
+    <Modal
+      onClose={() => setIsSharingWithOthers(false)}
+      wrapperClassName="max-w-lg"
+      bodyClassName="p-4 flex flex-col"
+    >
+      <ShareSuccess
+        visibility="public"
+        roadmapId={roadmapId!}
+        description={description}
+        onClose={() => setIsSharingWithOthers(false)}
+        isSharingWithOthers={true}
+      />
+    </Modal>
+  );
+
+  return (
+    <div className="border-b">
+      <div className="container relative py-5 sm:py-12">
+        {creator?.name && (
+          <div className="-mb-1 flex items-center gap-1.5 text-sm text-gray-500">
+            <img
+              alt={creator.name}
+              src={avatarUrl}
+              className="h-5 w-5 rounded-full"
+            />
+            <span>
+              Created by&nbsp;
+              <span className="font-semibold text-gray-900">
+                {creator?.name}
+              </span>
+              {team && (
+                <>
+                  &nbsp;from&nbsp;
+                  <span className="font-semibold text-gray-900">
+                    {team?.name}
+                  </span>
+                </>
+              )}
+            </span>
+          </div>
+        )}
+        <div className="mb-3 mt-4 sm:mb-4">
+          <h1 className="text-2xl font-bold sm:mb-2 sm:text-4xl">{title}</h1>
+          <p className="mt-0.5 text-sm text-gray-500 sm:text-lg">
+            {description}
+          </p>
+        </div>
+
+        <div className="flex justify-between gap-2 sm:gap-0">
+          <div className="flex justify-stretch gap-1 sm:gap-2">
+            <a
+              href="/roadmaps"
+              className="rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm"
+              aria-label="Back to All Roadmaps"
+            >
+              &larr;<span className="hidden sm:inline">&nbsp;All Roadmaps</span>
+            </a>
+
+            <ShareRoadmapButton
+              roadmapId={roadmapId!}
+              description={description!}
+              pageUrl={`https://roadmap.sh/r?id=${roadmapId}`}
+              allowEmbed={true}
+            />
+          </div>
+          <div className="flex items-center gap-2">
+            {$canManageCurrentRoadmap && (
+              <>
+                {isSharing && $currentRoadmap && (
+                  <ShareOptionsModal
+                    isDiscoverable={$currentRoadmap.isDiscoverable}
+                    description={$currentRoadmap?.description}
+                    visibility={$currentRoadmap?.visibility}
+                    teamId={$currentRoadmap?.teamId}
+                    roadmapId={$currentRoadmap?._id!}
+                    sharedFriendIds={$currentRoadmap?.sharedFriendIds || []}
+                    sharedTeamMemberIds={
+                      $currentRoadmap?.sharedTeamMemberIds || []
+                    }
+                    onClose={() => setIsSharing(false)}
+                    onShareSettingsUpdate={(settings) => {
+                      currentRoadmap.set({
+                        ...$currentRoadmap,
+                        ...settings,
+                      });
+                    }}
+                  />
+                )}
+
+                <a
+                  href={`${
+                    import.meta.env.PUBLIC_EDITOR_APP_URL
+                  }/${$currentRoadmap?._id}`}
+                  target="_blank"
+                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium  text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
+                >
+                  <Shapes className="mr-1.5 h-4 w-4 stroke-[2.5]" />
+                  <span className="hidden sm:inline-block">Edit Roadmap</span>
+                  <span className="sm:hidden">Edit</span>
+                </a>
+                <button
+                  onClick={() => setIsSharing(true)}
+                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
+                >
+                  <Lock className="mr-1.5 h-4 w-4 stroke-[2.5]" />
+                  Sharing
+                </button>
+
+                <RoadmapActionButton
+                  onDelete={() => {
+                    const confirmation = window.confirm(
+                      'Are you sure you want to delete this roadmap?',
+                    );
+
+                    if (!confirmation) {
+                      return;
+                    }
+
+                    deleteResource().finally(() => null);
+                  }}
+                />
+              </>
+            )}
+
+            {!$canManageCurrentRoadmap && visibility === 'public' && (
+              <>
+                {sharingWithOthersModal}
+                <button
+                  onClick={() => setIsSharingWithOthers(true)}
+                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium  text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
+                >
+                  <Lock className="mr-1.5 h-4 w-4 stroke-[2.5]" />
+                  Share with Others
+                </button>
+              </>
+            )}
+          </div>
+        </div>
+
+        <RoadmapHint
+          roadmapTitle={title!}
+          hasTNSBanner={false}
+          roadmapId={roadmapId!}
+        />
+      </div>
+    </div>
+  );
+}

src/components/CustomRoadmap/RoadmapHint.tsx

@@ -0,0 +1,48 @@
+import { cn } from '../../lib/classname';
+import { ResourceProgressStats } from './ResourceProgressStats';
+
+type RoadmapHintProps = {
+  roadmapId: string;
+  roadmapTitle: string;
+  hasTNSBanner?: boolean;
+  tnsBannerLink?: string;
+};
+
+export function RoadmapHint(props: RoadmapHintProps) {
+  const {
+    roadmapTitle,
+    roadmapId,
+    hasTNSBanner = false,
+    tnsBannerLink = '',
+  } = props;
+
+  return (
+    <div
+      className={cn('mb-0 mt-4 rounded-md border-0 sm:mt-7 sm:border', {
+        'sm:-mb-[82px]': hasTNSBanner,
+        'sm:-mb-[65px]': !hasTNSBanner,
+      })}
+    >
+      {hasTNSBanner && (
+        <div className="hidden border-b bg-gray-100 px-2 py-1.5 sm:block">
+          <p className="text-sm">
+            Get the latest {roadmapTitle} news from our sister site{' '}
+            <a
+              href={tnsBannerLink}
+              target="_blank"
+              className="font-semibold underline"
+            >
+              TheNewStack.io
+            </a>
+          </p>
+        </div>
+      )}
+
+      <ResourceProgressStats
+        isSecondaryBanner={hasTNSBanner}
+        resourceId={roadmapId}
+        resourceType="roadmap"
+      />
+    </div>
+  );
+}

src/components/CustomRoadmap/RoadmapListPage.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useState } from 'react';
+import { httpGet } from '../../lib/http';
+import { pageProgressMessage } from '../../stores/page';
+import {
+  CreateRoadmapModal,
+  type RoadmapDocument,
+} from './CreateRoadmap/CreateRoadmapModal';
+import { PersonalRoadmapList } from './PersonalRoadmapList';
+import { useToast } from '../../hooks/use-toast';
+import { SharedRoadmapList } from './SharedRoadmapList';
+import type { FriendshipStatus } from '../Befriend';
+
+export type FriendUserType = {
+  id: string;
+  name: string;
+  avatar: string;
+  status: FriendshipStatus;
+};
+
+export type GetRoadmapListResponse = {
+  personalRoadmaps: (RoadmapDocument & {
+    topics: number;
+  })[];
+  sharedRoadmaps: (RoadmapDocument & {
+    topics: number;
+    creator: FriendUserType;
+  })[];
+};
+
+type TabType = {
+  label: string;
+  value: 'personal' | 'shared';
+};
+
+const tabTypes: TabType[] = [
+  { label: 'Personal', value: 'personal' },
+  { label: 'Shared by Friends', value: 'shared' },
+];
+
+export function RoadmapListPage() {
+  const toast = useToast();
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);
+
+  const [activeTab, setActiveTab] = useState<TabType['value']>('personal');
+  const [allRoadmaps, setAllRoadmaps] = useState<GetRoadmapListResponse>({
+    personalRoadmaps: [],
+    sharedRoadmaps: [],
+  });
+
+  async function loadRoadmapList() {
+    setIsLoading(true);
+    const { response, error } = await httpGet<GetRoadmapListResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-roadmap-list`
+    );
+
+    if (error || !response) {
+      console.error(error);
+      toast.error(error?.message || 'Something went wrong, please try again');
+      return;
+    }
+
+    setAllRoadmaps(
+      response! || {
+        personalRoadmaps: [],
+        sharedRoadmaps: [],
+      }
+    );
+  }
+
+  useEffect(() => {
+    loadRoadmapList().finally(() => {
+      setIsLoading(false);
+      pageProgressMessage.set('');
+    });
+  }, []);
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <div>
+      {isCreatingRoadmap && (
+        <CreateRoadmapModal onClose={() => setIsCreatingRoadmap(false)} />
+      )}
+
+      <div className="mb-6 flex flex-col justify-between gap-2 sm:flex-row sm:items-center sm:gap-0">
+        <div className="flex grow items-center gap-2">
+          {tabTypes.map((tab) => {
+            return (
+              <button
+                key={tab.value}
+                className={`relative flex w-full items-center justify-center whitespace-nowrap rounded-md border p-1 px-3 text-sm sm:w-auto ${
+                  activeTab === tab.value ? ' border-gray-400 bg-gray-200 ' : ''
+                } w-full sm:w-auto`}
+                onClick={() => setActiveTab(tab.value)}
+              >
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+        <button
+          className={`relative flex w-full items-center justify-center rounded-md border p-1 px-3 text-sm sm:w-auto`}
+          onClick={() => setIsCreatingRoadmap(true)}
+        >
+          + Create Roadmap
+        </button>
+      </div>
+
+      <div className="mt-4">
+        {activeTab === 'personal' && (
+          <PersonalRoadmapList
+            roadmaps={allRoadmaps?.personalRoadmaps}
+            setAllRoadmaps={setAllRoadmaps}
+            onDelete={(roadmapId) => {
+              setAllRoadmaps({
+                ...allRoadmaps,
+                personalRoadmaps: allRoadmaps.personalRoadmaps.filter(
+                  (r) => r._id !== roadmapId
+                ),
+              });
+            }}
+          />
+        )}
+        {activeTab === 'shared' && (
+          <SharedRoadmapList roadmaps={allRoadmaps?.sharedRoadmaps} />
+        )}
+      </div>
+    </div>
+  );
+}

src/components/CustomRoadmap/ShareRoadmapModal.tsx

@@ -0,0 +1,162 @@
+import { useState } from 'react';
+import { useStore } from '@nanostores/react';
+import { Check, Copy, Loader2 } from 'lucide-react';
+
+import { Modal } from '../Modal';
+import type { AllowedRoadmapVisibility } from './CreateRoadmap/CreateRoadmapModal';
+import { cn } from '../../lib/classname';
+import { httpPatch } from '../../lib/http';
+import { useToast } from '../../hooks/use-toast';
+import { useCopyText } from '../../hooks/use-copy-text';
+import { currentRoadmap, isCurrentRoadmapPersonal } from '../../stores/roadmap';
+
+type ShareRoadmapModalProps = {
+  onClose: () => void;
+};
+
+export const allowedVisibilityLabels: {
+  id: AllowedRoadmapVisibility;
+  label: string;
+}[] = [
+  {
+    id: 'me',
+    label: 'Only visible to me',
+  },
+  {
+    id: 'public',
+    label: 'Anyone with the link',
+  },
+  {
+    id: 'team',
+    label: 'Visible to team members',
+  },
+  {
+    id: 'friends',
+    label: 'Only friends can view',
+  },
+];
+
+export function ShareRoadmapModal(props: ShareRoadmapModalProps) {
+  const { onClose } = props;
+
+  const toast = useToast();
+  const $currentRoadmap = useStore(currentRoadmap);
+  const $isCurrentRoadmapPersonal = useStore(isCurrentRoadmapPersonal);
+  const roadmapId = $currentRoadmap?._id!;
+
+  const { copyText, isCopied } = useCopyText();
+  const [visibility, setVisibility] = useState($currentRoadmap?.visibility);
+  const [isLoading, setIsLoading] = useState(false);
+
+  async function updateVisibility(newVisibility: AllowedRoadmapVisibility) {
+    setIsLoading(true);
+    const { response, error } = await httpPatch(
+      `${import.meta.env.PUBLIC_API_URL}/v1-update-roadmap-visibility/${
+        $currentRoadmap?._id
+      }`,
+      {
+        visibility: newVisibility,
+      }
+    );
+
+    if (error) {
+      console.error(error);
+      toast.error(error?.message || 'Something went wrong, please try again');
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(false);
+    toast.success('Visibility updated');
+    setVisibility(newVisibility);
+    currentRoadmap.set({
+      ...$currentRoadmap!,
+      visibility: newVisibility,
+    });
+  }
+
+  function handleCopy() {
+    const isDev = import.meta.env.DEV;
+    const url = new URL(
+      isDev ? 'http://localhost:3000/r' : 'https://roadmap.sh/r'
+    );
+    url.searchParams.set('id', roadmapId);
+    copyText(url.toString());
+  }
+
+  return (
+    <Modal onClose={onClose}>
+      <div className="p-4 pb-0">
+        <h1 className="text-lg font-medium leading-5 text-gray-900">
+          Updating {$currentRoadmap?.title}
+        </h1>
+      </div>
+
+      <ul className="mt-4 border-t">
+        {allowedVisibilityLabels.map((v) => {
+          if (v.id === 'team' && $isCurrentRoadmapPersonal) {
+            return null;
+          } else if (v.id === 'friends' && !$isCurrentRoadmapPersonal) {
+            return null;
+          }
+
+          return (
+            <li key={v.id}>
+              <button
+                disabled={v.id === visibility || isLoading}
+                key={v.id}
+                className={cn(
+                  'relative flex w-full items-center border-b p-2.5 px-4 text-sm text-gray-700 hover:bg-gray-200 hover:text-gray-900 disabled:cursor-not-allowed',
+                  v.id === visibility &&
+                    'bg-gray-900 text-white hover:bg-gray-900 hover:text-white'
+                )}
+                onClick={() => updateVisibility(v.id)}
+              >
+                {v.label}
+
+                {v.id === visibility && (
+                  <span className="absolute bottom-0 right-0 top-0 flex w-8 items-center justify-center">
+                    <span className="h-2 w-2 rounded-full bg-green-500" />
+                  </span>
+                )}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+
+      <div className="flex items-center justify-between p-4">
+        <button
+          disabled={isLoading}
+          className="flex h-9 items-center rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-black outline-none hover:border-gray-300 hover:bg-gray-50 focus:border-gray-300 focus:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-70"
+          onClick={onClose}
+        >
+          {isLoading ? (
+            <>
+              <Loader2 size={14} className="mr-2 animate-spin stroke-[2.5]" />
+              Saving
+            </>
+          ) : (
+            'Cancel'
+          )}
+        </button>
+        <button
+          className="flex h-9 items-center justify-center rounded-md border border-transparent bg-gray-900 px-4 py-2 text-sm font-medium text-white outline-none hover:bg-gray-800 focus:bg-gray-800"
+          onClick={handleCopy}
+        >
+          {isCopied ? (
+            <>
+              <Check size={14} className="mr-2 stroke-[2.5]" />
+              Copied
+            </>
+          ) : (
+            <>
+              <Copy size={14} className="mr-2 stroke-[2.5]" />
+              Copy Link
+            </>
+          )}
+        </button>
+      </div>
+    </Modal>
+  );
+}

src/components/CustomRoadmap/SharedRoadmapList.tsx

@@ -0,0 +1,118 @@
+import { ExternalLinkIcon, Map, Plus } from 'lucide-react';
+import RoadmapIcon from '../../icons/roadmap.svg';
+import type { GetRoadmapListResponse } from './RoadmapListPage';
+
+type GroupByCreator = {
+  creator: GetRoadmapListResponse['sharedRoadmaps'][number]['creator'];
+  roadmaps: GetRoadmapListResponse['sharedRoadmaps'];
+};
+
+type SharedRoadmapListProps = {
+  roadmaps: GetRoadmapListResponse['sharedRoadmaps'];
+};
+
+export function SharedRoadmapList(props: SharedRoadmapListProps) {
+  const { roadmaps: sharedRoadmaps } = props;
+
+  const allUniqueCreatorIds = new Set(
+    sharedRoadmaps.map((roadmap) => roadmap.creator.id)
+  );
+
+  const groupByCreator: GroupByCreator[] = [];
+  for (const creatorId of allUniqueCreatorIds) {
+    const creator = sharedRoadmaps.find(
+      (roadmap) => roadmap.creator.id === creatorId
+    )?.creator;
+    if (!creator) {
+      continue;
+    }
+
+    groupByCreator.push({
+      creator,
+      roadmaps: sharedRoadmaps.filter(
+        (roadmap) => roadmap.creator.id === creatorId
+      ),
+    });
+  }
+
+  if (sharedRoadmaps.length === 0) {
+    return (
+      <div className="flex flex-col items-center p-4 py-20">
+        <Map className="mb-4 h-24 w-24 opacity-10" />
+        <h3 className="mb-1 text-2xl font-bold text-gray-900">No roadmaps</h3>
+        <p className="text-base text-gray-500">
+          Roadmaps from your friends will appear here
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="mb-3 flex items-center justify-between">
+        <span className={'text-sm text-gray-400'}>
+          {sharedRoadmaps.length} shared roadmap(s)
+        </span>
+      </div>
+      <div>
+        <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {groupByCreator.map((group) => {
+            const creator = group.creator;
+            return (
+              <li
+                key={creator.id}
+                className="flex flex-col items-start overflow-hidden rounded-md border border-gray-300"
+              >
+                <div className="relative flex w-full items-center gap-3 p-3">
+                  <img
+                    src={
+                      creator.avatar
+                        ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${
+                            creator.avatar
+                          }`
+                        : '/images/default-avatar.png'
+                    }
+                    alt={creator.name || ''}
+                    className="h-8 w-8 rounded-full"
+                  />
+                  <div>
+                    <h3 className="truncate font-medium">{creator.name}</h3>
+                    <p className="truncate text-sm text-gray-500">
+                      {group?.roadmaps?.length || 0} shared roadmap(s)
+                    </p>
+                  </div>
+                </div>
+
+                <ul className="w-full">
+                  {group?.roadmaps?.map((roadmap) => {
+                    return (
+                      <li
+                        key={roadmap._id}
+                        className="relative flex w-full border-t"
+                      >
+                        <a
+                          href={`/r?id=${roadmap._id}`}
+                          className="group inline-grid w-full grid-cols-[auto,16px] items-center justify-between gap-2 px-3 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-black"
+                          target={'_blank'}
+                        >
+                          <span className="w-full truncate">
+                            {roadmap.title}
+                          </span>
+
+                          <ExternalLinkIcon
+                            size={16}
+                            className="opacity-20 transition-opacity group-hover:opacity-100"
+                          />
+                        </a>
+                      </li>
+                    );
+                  })}
+                </ul>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}

src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx

@@ -0,0 +1,39 @@
+export function SkeletonRoadmapHeader() {
+  return (
+    <div className="border-b">
+      <div className="container relative py-5 sm:py-12">
+        <div className="flex items-center gap-1.5">
+          <div className="h-4 w-4 animate-pulse rounded-full bg-gray-300" />
+          <div className="h-5 w-5/12 animate-pulse rounded-md bg-gray-200" />
+        </div>
+        <div className="mb-3 mt-4 sm:mb-4">
+          <div className="h-8 w-1/2 animate-pulse rounded-md bg-gray-300 sm:mb-2 sm:h-10" />
+          <div className="mt-0.5 h-5 w-1/3 animate-pulse rounded-md bg-gray-200 sm:h-7" />
+        </div>
+
+        <div className="flex justify-between gap-2 sm:gap-0">
+          <div className='flex gap-1 sm:gap-2'>
+            <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-32" />
+            <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[85px]" />
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="h-7 w-[60.52px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[139.71px]" />
+            <div className="h-7 w-[71.48px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[100.34px]" />
+            <div className="h-7 w-[32px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[89.73px]" />
+          </div>
+        </div>
+
+        <div className="mb-0 mt-4 rounded-md border-0 sm:-mb-[65px] sm:mt-7 sm:border">
+          <div
+            data-progress-nums-container
+            className="striped-loader relative hidden h-8 items-center justify-between rounded-md bg-white sm:flex"
+          />
+          <div
+            data-progress-nums-container
+            className="striped-loader relative -mb-2 flex h-[34px] items-center justify-between rounded-md border bg-white px-2 py-1.5 text-sm text-gray-700 sm:hidden"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/FeaturedItems/FeaturedItems.astro

@@ -1,13 +1,20 @@
 ---
-import FeaturedItem, { FeaturedItemType } from './FeaturedItem.astro';
+import { CreateRoadmapButton } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapButton';
+import FeaturedItem, { type FeaturedItemType } from './FeaturedItem.astro';
 
 export interface Props {
   featuredItems: FeaturedItemType[];
   heading: string;
+  showCreateRoadmap?: boolean;
   allowBookmark?: boolean;
 }
 
-const { featuredItems, heading, allowBookmark = true } = Astro.props;
+const {
+  featuredItems,
+  heading,
+  showCreateRoadmap,
+  allowBookmark = true,
+} = Astro.props;
 ---
 
 <div class='relative border-b border-b-[#1e293c] py-10 sm:py-14'>
@@ -32,6 +39,13 @@ const { featuredItems, heading, allowBookmark = true } = Astro.props;
           </li>
         ))
       }
+      {
+        showCreateRoadmap && (
+          <li>
+            <CreateRoadmapButton client:load className='min-h-[54px]' />
+          </li>
+        )
+      }
     </ul>
   </div>
 </div>