wip: feedback popup state

The syntax for Function Expression was incorrect. It was an example of a function declared using Function Declaration.

.github/ISSUE_TEMPLATE/01-suggest-changes.yml

@@ -0,0 +1,25 @@
+name: "✍️ ​ ​Suggest Changes"
+description: Help us improve the roadmaps by suggesting changes
+labels: [suggestion]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to help us improve the roadmaps with your suggestions.
+  - type: input
+    id: url
+    attributes:
+      label: Roadmap URL
+      description: Please provide the URL of the roadmap you are suggesting changes to.
+      placeholder: https://roadmap.sh
+    validations:
+      required: true
+  - type: textarea
+    id: roadmap-suggestions
+    attributes:
+      label: Suggestions
+      description: What changes would you like to suggest?
+      placeholder: Enter your suggestions here.
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/02-bug-report.yml

@@ -0,0 +1,42 @@
+name: "🐛 ​ ​Bug Report"
+description: Report an issue or possible bug
+labels: [bug]
+assignees: []
+body:
+  - type: input
+    id: url
+    attributes:
+      label: What is the URL where the issue is happening
+      placeholder: https://roadmap.sh
+    validations:
+      required: true
+  - type: dropdown
+    id: browsers
+    attributes:
+      label: What browsers are you seeing the problem on?
+      multiple: true
+      options:
+        - Firefox
+        - Chrome
+        - Safari
+        - Microsoft Edge
+        - Other
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the Bug
+      description: A clear and concise description of what the bug is.
+    validations:
+      required: true
+  - type: textarea
+    id: logs
+    attributes:
+      label: Output from browser console (if any)
+      description: Please copy and paste any relevant log output.
+  - type: checkboxes
+    id: will-pr
+    attributes:
+      label: Participation
+      options:
+        - label:  I am willing to submit a pull request for this issue.
+          required: false

.github/ISSUE_TEMPLATE/03-feature-suggestion.yml

@@ -0,0 +1,12 @@
+name: "✨ ​ ​Feature Suggestion"
+description: Is there a feature you'd like to see on Roadmap.sh? Let us know!
+labels: [feature request]
+assignees: []
+body:
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Feature Description
+      description: Please provide a detailed description of the feature you are suggesting and how it would help you/others.
+    validations:
+      required: true

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

@@ -0,0 +1,37 @@
+name: "🙏 ​ ​Submit a Roadmap"
+description: Help us launch a new roadmap with your expertise.
+labels: [roadmap contribution]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to submit a roadmap! Please fill out the information below and we'll get back to you as soon as we can.
+  - type: input
+    id: roadmap-title
+    attributes:
+      label: What is the title of the roadmap you are submitting?
+      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).
+      placeholder: |
+          - Item 1
+            - Subitem 1
+            - Subitem 2
+          - Item 2
+            - Subitem 1
+            - Subitem 2
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/05-something-else.yml

@@ -0,0 +1,12 @@
+name: "🤷‍♂️ ​ ​Something else"
+description: If none of the above templates fit your needs, please use this template to submit your issue.
+labels: []
+assignees: []
+body:
+  - type: textarea
+    id: issue-description
+    attributes:
+      label: Detailed Description
+      description: Please provide a detailed description of the issue.
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,14 @@
+blank_issues_enabled: false
+contact_links:
+  - name: ✋ ​ ​Roadmap Request
+    url: https://discord.gg/cJpEt5Qbwa
+    about: Please do not open issues with roadmap requests, hop onto the discord server for that.
+  - name: 📝 ​ ​Typo or Grammatical Mistake
+    url: https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data
+    about: Please submit a pull request instead of reporting it as an issue.
+  - name: 💬 ​ ​Chat on Discord
+    url: https://discord.gg/cJpEt5Qbwa
+    about: Join the community on our Discord server.
+  - name: 🤝 ​ ​Guidance
+    url: https://discord.gg/cJpEt5Qbwa
+    about: Join the community in our Discord server.

astro.config.mjs

@@ -2,7 +2,7 @@
 import preact from '@astrojs/preact';
 import sitemap from '@astrojs/sitemap';
 import tailwind from '@astrojs/tailwind';
-import compress from 'astro-compress';
+import compress from '@otterlord/astro-compress';
 import { defineConfig } from 'astro/config';
 import rehypeExternalLinks from 'rehype-external-links';
 import { fileURLToPath } from 'node:url';

contributing.md

@@ -16,7 +16,7 @@ For new roadmaps, submit a roadmap by providing [a textual roadmap similar to th
 
 For the existing roadmaps, please follow the details listed for the nature of contribution:
 
-- **Fixing Typos** — Make your changes in the [roadmap JSON file](https://github.com/kamranahmedse/developer-roadmap/tree/master/public/jsons)
+- **Fixing Typos** — Make your changes in the [roadmap JSON file](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps)
 - **Adding or Removing Nodes** — Please open an issue with your suggestion.
 
 **Note:** Please note that our goal is not to have the biggest list of items. Our goal is to list items or skills most relevant today.

package.json

@@ -26,27 +26,28 @@
     "@astrojs/tailwind": "^3.1.3",
     "@fingerprintjs/fingerprintjs": "^3.4.1",
     "@nanostores/preact": "^0.5.0",
-    "astro": "^2.6.3",
-    "astro-compress": "^1.1.47",
+    "astro": "^2.6.6",
+    "@otterlord/astro-compress": "^1.1.48",
     "jose": "^4.14.4",
     "js-cookie": "^3.0.5",
-    "nanostores": "^0.9.1",
+    "nanostores": "^0.9.2",
     "node-html-parser": "^6.1.5",
     "npm-check-updates": "^16.10.12",
     "preact": "^10.15.1",
     "rehype-external-links": "^2.1.0",
     "roadmap-renderer": "^1.0.6",
+    "slugify": "^1.6.6",
     "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
-    "@playwright/test": "^1.35.0",
+    "@playwright/test": "^1.35.1",
     "@tailwindcss/typography": "^0.5.9",
     "@types/js-cookie": "^3.0.3",
     "csv-parser": "^3.0.0",
     "gh-pages": "^5.0.0",
     "js-yaml": "^4.1.0",
     "markdown-it": "^13.0.1",
-    "openai": "^3.2.1",
+    "openai": "^3.3.0",
     "prettier": "^2.8.8",
     "prettier-plugin-astro": "^0.10.0",
     "prettier-plugin-tailwindcss": "^0.3.0"

public/images/cursors/add.svg

@@ -0,0 +1,8 @@
+<svg width="63" height="24" viewBox="0 0 63 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="63" height="24" rx="7" fill="#563AFF"/>
+    <path d="M27.2629 16.7273H25.2856L28.2984 8H30.6763L33.6848 16.7273H31.7075L29.5214 9.99432H29.4533L27.2629 16.7273ZM27.1393 13.2969H31.8098V14.7372H27.1393V13.2969Z" fill="white"/>
+    <path d="M37.829 16.7273H34.7352V8H37.8545C38.7324 8 39.4881 8.17472 40.1216 8.52415C40.7551 8.87074 41.2423 9.36932 41.5832 10.0199C41.927 10.6705 42.0989 11.4489 42.0989 12.3551C42.0989 13.2642 41.927 14.0455 41.5832 14.6989C41.2423 15.3523 40.7523 15.8537 40.1131 16.2031C39.4767 16.5526 38.7153 16.7273 37.829 16.7273ZM36.5804 15.1463H37.7523C38.2977 15.1463 38.7565 15.0497 39.1287 14.8565C39.5037 14.6605 39.7849 14.358 39.9724 13.9489C40.1628 13.5369 40.2579 13.0057 40.2579 12.3551C40.2579 11.7102 40.1628 11.1832 39.9724 10.7741C39.7849 10.3651 39.5051 10.0639 39.1329 9.87074C38.7608 9.67756 38.302 9.58097 37.7565 9.58097H36.5804V15.1463Z" fill="white"/>
+    <path d="M46.5594 16.7273H43.4657V8H46.585C47.4628 8 48.2185 8.17472 48.8521 8.52415C49.4856 8.87074 49.9728 9.36932 50.3137 10.0199C50.6574 10.6705 50.8293 11.4489 50.8293 12.3551C50.8293 13.2642 50.6574 14.0455 50.3137 14.6989C49.9728 15.3523 49.4827 15.8537 48.8435 16.2031C48.2072 16.5526 47.4458 16.7273 46.5594 16.7273ZM45.3109 15.1463H46.4827C47.0282 15.1463 47.487 15.0497 47.8592 14.8565C48.2342 14.6605 48.5154 14.358 48.7029 13.9489C48.8932 13.5369 48.9884 13.0057 48.9884 12.3551C48.9884 11.7102 48.8932 11.1832 48.7029 10.7741C48.5154 10.3651 48.2356 10.0639 47.8634 9.87074C47.4913 9.67756 47.0324 9.58097 46.487 9.58097H45.3109V15.1463Z" fill="white"/>
+    <path d="M10 12H18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M14 8V16" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

public/images/cursors/remove.svg

@@ -0,0 +1,5 @@
+<svg width="89" height="24" viewBox="0 0 89 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="89" height="24" rx="7" fill="black"/>
+    <path d="M23.8217 17V7.54545H27.5518C28.2659 7.54545 28.8752 7.67318 29.38 7.92862C29.8878 8.18099 30.274 8.53954 30.5387 9.00426C30.8065 9.46591 30.9403 10.0091 30.9403 10.6339C30.9403 11.2617 30.8049 11.8018 30.5341 12.2543C30.2633 12.7036 29.8709 13.0483 29.3569 13.2884C28.846 13.5284 28.2274 13.6484 27.5011 13.6484H25.0036V12.0419H27.1779C27.5595 12.0419 27.8765 11.9896 28.1289 11.8849C28.3813 11.7803 28.569 11.6233 28.6921 11.4141C28.8183 11.2048 28.8814 10.9447 28.8814 10.6339C28.8814 10.32 28.8183 10.0553 28.6921 9.83984C28.569 9.62441 28.3797 9.46129 28.1243 9.3505C27.8719 9.23662 27.5534 9.17969 27.1687 9.17969H25.8207V17H23.8217ZM28.9276 12.6974L31.2773 17H29.0707L26.7717 12.6974H28.9276ZM32.353 17V7.54545H38.7237V9.19354H34.3519V11.4464H38.396V13.0945H34.3519V15.3519H38.7422V17H32.353ZM40.3129 7.54545H42.7781L45.3818 13.8977H45.4926L48.0963 7.54545H50.5615V17H48.6226V10.8462H48.5441L46.0974 16.9538H44.7771L42.3303 10.8232H42.2519V17H40.3129V7.54545ZM60.8967 12.2727C60.8967 13.3037 60.7012 14.1809 60.3104 14.9041C59.9226 15.6274 59.3932 16.1798 58.7223 16.5614C58.0545 16.94 57.3035 17.1293 56.4695 17.1293C55.6293 17.1293 54.8752 16.9384 54.2074 16.5568C53.5395 16.1752 53.0117 15.6228 52.6239 14.8995C52.2362 14.1763 52.0423 13.3007 52.0423 12.2727C52.0423 11.2417 52.2362 10.3646 52.6239 9.64134C53.0117 8.91809 53.5395 8.36719 54.2074 7.98864C54.8752 7.60701 55.6293 7.41619 56.4695 7.41619C57.3035 7.41619 58.0545 7.60701 58.7223 7.98864C59.3932 8.36719 59.9226 8.91809 60.3104 9.64134C60.7012 10.3646 60.8967 11.2417 60.8967 12.2727ZM58.87 12.2727C58.87 11.6049 58.77 11.0417 58.57 10.5831C58.373 10.1245 58.0945 9.77675 57.7344 9.53977C57.3743 9.30279 56.9527 9.1843 56.4695 9.1843C55.9863 9.1843 55.5646 9.30279 55.2045 9.53977C54.8445 9.77675 54.5644 10.1245 54.3643 10.5831C54.1674 11.0417 54.0689 11.6049 54.0689 12.2727C54.0689 12.9406 54.1674 13.5038 54.3643 13.9624C54.5644 14.4209 54.8445 14.7687 55.2045 15.0057C55.5646 15.2427 55.9863 15.3612 56.4695 15.3612C56.9527 15.3612 57.3743 15.2427 57.7344 15.0057C58.0945 14.7687 58.373 14.4209 58.57 13.9624C58.77 13.5038 58.87 12.9406 58.87 12.2727ZM63.5523 7.54545L65.8374 14.7287H65.9252L68.2149 7.54545H70.4308L67.1716 17H64.5956L61.3318 7.54545H63.5523ZM71.5688 17V7.54545H77.9395V9.19354H73.5677V11.4464H77.6118V13.0945H73.5677V15.3519H77.958V17H71.5688Z" fill="white"/>
+    <path d="M8 12L17 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

readme.md

@@ -42,6 +42,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [TypeScript Roadmap](https://roadmap.sh/typescript)
 - [C++ Roadmap](https://roadmap.sh/cpp)
 - [React Roadmap](https://roadmap.sh/react)
+- [React Native Roadmap](https://roadmap.sh/react-native)
 - [Vue Roadmap](https://roadmap.sh/vue)
 - [Angular Roadmap](https://roadmap.sh/angular)
 - [Node.js Roadmap](https://roadmap.sh/nodejs)
@@ -53,7 +54,8 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [Java Roadmap](https://roadmap.sh/java)
 - [Spring Boot Roadmap](https://roadmap.sh/spring-boot)
 - [Design System Roadmap](https://roadmap.sh/design-system)
-- [DBA Roadmap](https://roadmap.sh/postgresql-dba)
+- [PostgreSQL Roadmap](https://roadmap.sh/postgresql-dba)
+- [SQL Roadmap](https://roadmap.sh/sql)
 - [Blockchain Roadmap](https://roadmap.sh/blockchain)
 - [ASP.NET Core Roadmap](https://roadmap.sh/aspnet-core)
 - [System Design Roadmap](https://roadmap.sh/system-design)
@@ -93,6 +95,12 @@ npm install
 npm run dev
 ```
 
+Note: use the `depth` parameter to reduce the clone size and speed up the clone.
+
+```sh
+git clone --depth=1 https://github.com/kamranahmedse/developer-roadmap.git
+```
+
 ## Contribution
 
 > Have a look at [contribution docs](./contributing.md) for how to update any of the roadmaps

src/components/AccountSidebar.astro

@@ -1,13 +1,16 @@
 ---
 import AstroIcon from './AstroIcon.astro';
-
-const { activePageId, activePageTitle } = Astro.props;
+import { TeamDropdown } from './TeamDropdown/TeamDropdown';
+import { SidebarFriendsCounter } from './Friends/SidebarFriendsCounter';
 
 export interface Props {
   activePageId: string;
   activePageTitle: string;
+  hasDesktopSidebar?: boolean;
 }
 
+const { hasDesktopSidebar = true, activePageId, activePageTitle } = Astro.props;
+
 const sidebarLinks = [
   {
     href: '/account',
@@ -19,11 +22,21 @@ const sidebarLinks = [
       classes: 'h-3 w-4',
     },
   },
+  {
+    href: '/account/friends',
+    title: 'Friends',
+    id: 'friends',
+    isNew: true,
+    icon: {
+      glyph: 'users',
+      classes: 'h-4 w-4',
+    },
+  },
   {
     href: '/account/road-card',
     title: 'Card',
     id: 'road-card',
-    isNew: true,
+    isNew: false,
     icon: {
       glyph: 'badge',
       classes: 'h-4 w-4',
@@ -40,12 +53,12 @@ const sidebarLinks = [
     },
   },
   {
-    href: '/account/update-password',
-    title: 'Security',
-    id: 'change-password',
+    href: '/account/settings',
+    title: 'Settings',
+    id: 'settings',
     isNew: false,
     icon: {
-      glyph: 'security',
+      glyph: 'cog',
       classes: 'h-4 w-4',
     },
   },
@@ -64,6 +77,17 @@ const sidebarLinks = [
     id='settings-menu-dropdown'
     class='absolute left-0 right-0 z-10 mt-1 hidden space-y-1.5 bg-white p-2 shadow-lg'
   >
+    <li>
+      <a
+        href='/team'
+        class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
+          activePageId === 'team' ? 'bg-slate-100' : ''
+        }`}
+      >
+        <AstroIcon icon={'users'} class={`h-4 w-4 mr-2`} />
+        Teams
+      </a>
+    </li>
     {
       sidebarLinks.map((sidebarLink) => {
         const isActive = activePageId === sidebarLink.id;
@@ -91,48 +115,63 @@ const sidebarLinks = [
 
 <div class='container flex min-h-screen items-stretch'>
   <!-- Start Desktop Sidebar -->
-  <aside class='hidden w-44 shrink-0 border-r border-slate-200 py-10 md:block'>
-    <nav>
-      <ul class='space-y-1'>
-        {
-          sidebarLinks.map((sidebarLink) => {
-            const isActive = activePageId === sidebarLink.id;
+  {
+    hasDesktopSidebar && (
+      <aside class='hidden w-[195px] shrink-0 border-r border-slate-200 py-10 md:block'>
+        <TeamDropdown client:load />
 
-            return (
-              <li>
-                <a
-                  href={sidebarLink.href}
-                  class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${
-                    isActive
-                      ? 'border-r-black bg-gray-100 text-black'
-                      : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
-                  }`}
-                >
-                  <span class='flex flex-grow items-center'>
-                    <AstroIcon
-                      icon={sidebarLink.icon.glyph}
-                      class={`${sidebarLink.icon.classes} mr-2`}
-                    />
-                    {sidebarLink.title}
-                  </span>
+        <nav>
+          <ul class='space-y-1'>
+            {sidebarLinks.map((sidebarLink) => {
+              const isActive = activePageId === sidebarLink.id;
 
-                  {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' />
+              return (
+                <li>
+                  <a
+                    href={sidebarLink.href}
+                    class={`font-regular flex w-full items-center border-r-2 px-2 py-1.5 text-sm ${
+                      isActive
+                        ? 'border-r-black bg-gray-100 text-black'
+                        : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
+                    }`}
+                  >
+                    <span class='flex flex-grow items-center'>
+                      <AstroIcon
+                        icon={sidebarLink.icon.glyph}
+                        class={`${sidebarLink.icon.classes} mr-2`}
+                      />
+                      {sidebarLink.title}
                     </span>
-                  )}
-                </a>
-              </li>
-            );
-          })
-        }
-      </ul>
-    </nav>
-  </aside>
+
+                    {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.id === 'friends' && (
+                      <SidebarFriendsCounter client:load />
+                    )}
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+      </aside>
+    )
+  }
   <!-- /End Desktop Sidebar -->
 
-  <div class='grow px-0 py-0 md:px-10 md:py-10'>
+  <div
+    class:list={[
+      'grow px-0 py-0 md:py-10',
+      { 'md:px-10': hasDesktopSidebar, 'md:px-5': !hasDesktopSidebar },
+    ]}
+  >
     <slot />
   </div>
 </div>

src/components/Activity/ActivityPage.tsx

@@ -5,7 +5,7 @@ import { ResourceProgress } from './ResourceProgress';
 import { pageProgressMessage } from '../../stores/page';
 import { EmptyActivity } from './EmptyActivity';
 
-type ActivityResponse = {
+export type ActivityResponse = {
   done: {
     today: number;
     total: number;

src/components/Activity/ResourceProgress.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'preact/hooks';
 import { httpPost } from '../../lib/http';
 import { getRelativeTimeString } from '../../lib/date';
+import { useToast } from '../../hooks/use-toast';
+import { ProgressShareButton } from '../UserProgress/ProgressShareButton';
 
 type ResourceProgressType = {
   resourceType: 'roadmap' | 'best-practice';
@@ -11,10 +13,13 @@ type ResourceProgressType = {
   doneCount: number;
   learningCount: number;
   skippedCount: number;
-  onCleared: () => void;
+  onCleared?: () => void;
+  showClearButton?: boolean;
 };
 
 export function ResourceProgress(props: ResourceProgressType) {
+  const { showClearButton = true } = props;
+  const toast = useToast();
   const [isClearing, setIsClearing] = useState(false);
   const [isConfirming, setIsConfirming] = useState(false);
 
@@ -41,17 +46,20 @@ export function ResourceProgress(props: ResourceProgressType) {
     );
 
     if (error || !response) {
-      alert('Error clearing progress. Please try again.');
+      toast.error('Error clearing progress. Please try again.');
       console.error(error);
       setIsClearing(false);
       return;
     }
 
+    localStorage.removeItem(`${resourceType}-${resourceId}-favorite`);
     localStorage.removeItem(`${resourceType}-${resourceId}-progress`);
-    console.log(`${resourceType}-${resourceId}-progress`);
+
     setIsClearing(false);
     setIsConfirming(false);
-    onCleared();
+    if (onCleared) {
+      onCleared();
+    }
   }
 
   const url =
@@ -81,7 +89,7 @@ export function ResourceProgress(props: ResourceProgressType) {
           {getRelativeTimeString(updatedAt)}
         </span>
       </a>
-      <p className="sm:space-between flex flex-row items-start rounded-b-md border border-t-0 px-2 py-2 text-xs text-gray-500">
+      <div className="sm:space-between flex flex-row items-start rounded-b-md border border-t-0 px-2 py-2 text-xs text-gray-500">
         <span className="hidden flex-1 gap-1 sm:flex">
           {doneCount > 0 && (
             <>
@@ -100,40 +108,55 @@ export function ResourceProgress(props: ResourceProgressType) {
           )}
           <span>{totalCount} total</span>
         </span>
-        {!isConfirming && (
-          <button
-            className="text-red-500 hover:text-red-800"
-            onClick={() => setIsConfirming(true)}
-            disabled={isClearing}
-          >
-            {!isClearing && (
-              <>
-                Clear Progress <span>&times;</span>
-              </>
-            )}
+        <div className="flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-start">
+          <ProgressShareButton
+            resourceType={resourceType}
+            resourceId={resourceId}
+            className="text-xs font-normal"
+            shareIconClassName="w-2.5 h-2.5 stroke-2"
+            checkIconClassName="w-2.5 h-2.5"
+          />
+          <span className={'hidden sm:block'}>&bull;</span>
 
-            {isClearing && 'Processing...'}
-          </button>
-        )}
+          {showClearButton && (
+            <>
+              {!isConfirming && (
+                <button
+                  className="text-red-500 hover:text-red-800"
+                  onClick={() => setIsConfirming(true)}
+                  disabled={isClearing}
+                >
+                  {!isClearing && (
+                    <>
+                      Clear Progress <span>&times;</span>
+                    </>
+                  )}
 
-        {isConfirming && (
-          <span>
-            Are you sure?{' '}
-            <button
-              onClick={clearProgress}
-              className="ml-1 mr-1 text-red-500 underline hover:text-red-800"
-            >
-              Yes
-            </button>{' '}
-            <button
-              onClick={() => setIsConfirming(false)}
-              className="text-red-500 underline hover:text-red-800"
-            >
-              No
-            </button>
-          </span>
-        )}
-      </p>
+                  {isClearing && 'Processing...'}
+                </button>
+              )}
+
+              {isConfirming && (
+                <span>
+                  Are you sure?{' '}
+                  <button
+                    onClick={clearProgress}
+                    className="ml-1 mr-1 text-red-500 underline hover:text-red-800"
+                  >
+                    Yes
+                  </button>{' '}
+                  <button
+                    onClick={() => setIsConfirming(false)}
+                    className="text-red-500 underline hover:text-red-800"
+                  >
+                    No
+                  </button>
+                </span>
+              )}
+            </>
+          )}
+        </div>
+      </div>
     </div>
   );
 }

src/components/AddTeamRoadmap.tsx

@@ -0,0 +1,174 @@
+import { useRef, useState } from 'preact/hooks';
+import { useOutsideClick } from '../hooks/use-outside-click';
+import { OptionType, SearchSelector } from './SearchSelector';
+import type { PageType } from './CommandMenu/CommandMenu';
+import { CheckIcon } from './ReactIcons/CheckIcon';
+import { httpPut } from '../lib/http';
+import type { TeamResourceConfig } from './CreateTeam/RoadmapSelector';
+import { Spinner } from './ReactIcons/Spinner';
+
+type AddTeamRoadmapProps = {
+  teamId: string;
+  allRoadmaps: PageType[];
+  availableRoadmaps: PageType[];
+  onClose: () => void;
+  onMakeChanges: (roadmapId: string) => void;
+  setResourceConfigs: (config: TeamResourceConfig) => void;
+};
+
+export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
+  const {
+    teamId,
+    onMakeChanges,
+    onClose,
+    allRoadmaps,
+    availableRoadmaps,
+    setResourceConfigs,
+  } = props;
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedRoadmap, setSelectedRoadmap] = useState<string>('');
+  const popupBodyEl = useRef<HTMLDivElement>(null);
+
+  async function addTeamResource(roadmapId: string) {
+    if (!teamId) {
+      return;
+    }
+
+    setIsLoading(true);
+    const { error, response } = await httpPut<TeamResourceConfig>(
+      `${
+        import.meta.env.PUBLIC_API_URL
+      }/v1-update-team-resource-config/${teamId}`,
+      {
+        teamId: teamId,
+        resourceId: roadmapId,
+        resourceType: 'roadmap',
+        removed: [],
+      }
+    );
+
+    if (error || !response) {
+      setError(error?.message || 'Error adding roadmap');
+      return;
+    }
+
+    setResourceConfigs(response);
+  }
+
+  useOutsideClick(popupBodyEl, () => {
+    onClose();
+  });
+
+  const selectedRoadmapTitle = allRoadmaps.find(
+    (roadmap) => roadmap.id === selectedRoadmap
+  )?.title;
+
+  return (
+    <div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+        <div
+          ref={popupBodyEl}
+          class="popup-body relative rounded-lg bg-white p-4 shadow"
+        >
+          {isLoading && (
+            <>
+              <div class="flex items-center justify-center gap-2 py-8">
+                <Spinner isDualRing={false} className="h-4 w-4" />
+                <h2 className="font-medium">Loading...</h2>
+              </div>
+            </>
+          )}
+          {!isLoading && !error && selectedRoadmap && (
+            <div className={'text-center'}>
+              <CheckIcon additionalClasses="h-10 w-10 mx-auto opacity-20 mb-3 mt-4" />
+              <h3 class="mb-1.5 text-2xl font-medium">
+                {selectedRoadmapTitle} Added
+              </h3>
+              <p className="mb-4 text-sm leading-none text-gray-400">
+                <button
+                  onClick={() => onMakeChanges(selectedRoadmap)}
+                  className="underline underline-offset-2 hover:text-gray-900"
+                >
+                  Click here
+                </button>{' '}
+                to make changes to the roadmap.
+              </p>
+
+              <div class="flex items-center gap-2">
+                <button
+                  onClick={onClose}
+                  type="button"
+                  class="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                >
+                  Done
+                </button>
+                <button
+                  onClick={() => {
+                    setSelectedRoadmap('');
+                    setError('');
+                    setIsLoading(false);
+                  }}
+                  type="button"
+                  class="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white"
+                >
+                  + Add More
+                </button>
+              </div>
+            </div>
+          )}
+          {!isLoading && error && (
+            <>
+              <h3 class="mb-1.5 text-2xl font-medium">Error</h3>
+              <p className="mb-3 text-sm leading-none text-red-400">{error}</p>
+
+              <div class="flex items-center gap-2">
+                <button
+                  onClick={onClose}
+                  type="button"
+                  class="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                >
+                  Cancel
+                </button>
+              </div>
+            </>
+          )}
+          {!isLoading && !error && !selectedRoadmap && (
+            <>
+              <h3 class="mb-1.5 text-2xl font-medium">Add Roadmap</h3>
+              <p className="mb-3 text-sm leading-none text-gray-400">
+                Search and add a roadmap
+              </p>
+
+              <SearchSelector
+                options={availableRoadmaps.map((roadmap) => ({
+                  value: roadmap.id,
+                  label: roadmap.title,
+                }))}
+                onSelect={(option: OptionType) => {
+                  const roadmapId = option.value;
+                  addTeamResource(roadmapId).finally(() => {
+                    setIsLoading(false);
+                    setSelectedRoadmap(roadmapId);
+                  });
+                }}
+                inputClassName="mt-2 mb-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+                placeholder={'Search for roadmap'}
+              />
+
+              <div class="flex items-center gap-2">
+                <button
+                  onClick={onClose}
+                  type="button"
+                  class="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                >
+                  Cancel
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/AuthenticationFlow/GitHubButton.tsx

@@ -90,8 +90,13 @@ export function GitHubButton(props: GitHubButtonProps) {
     // 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;
+
       localStorage.setItem(GITHUB_REDIRECT_AT, Date.now().toString());
-      localStorage.setItem(GITHUB_LAST_PAGE, window.location.pathname);
+      localStorage.setItem(GITHUB_LAST_PAGE, pagePath);
     }
 
     window.location.href = response.loginUrl;

src/components/AuthenticationFlow/GoogleButton.tsx

@@ -85,8 +85,13 @@ 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;
+
           localStorage.setItem(GOOGLE_REDIRECT_AT, Date.now().toString());
-          localStorage.setItem(GOOGLE_LAST_PAGE, window.location.pathname);
+          localStorage.setItem(GOOGLE_LAST_PAGE, pagePath);
         }
 
         window.location.href = response.loginUrl;

src/components/AuthenticationFlow/LinkedInButton.tsx

@@ -85,8 +85,13 @@ export function LinkedInButton(props: LinkedInButtonProps) {
         // 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;
+
           localStorage.setItem(LINKEDIN_REDIRECT_AT, Date.now().toString());
-          localStorage.setItem(LINKEDIN_LAST_PAGE, window.location.pathname);
+          localStorage.setItem(LINKEDIN_LAST_PAGE, pagePath);
         }
 
         window.location.href = response.loginUrl;

src/components/Authenticator/authenticator.ts

@@ -33,9 +33,18 @@ function showHideGuestElements(hideOrShow: 'hide' | 'show' = 'hide') {
 function handleGuest() {
   const authenticatedRoutes = [
     '/account/update-profile',
+    '/account/notification',
     '/account/update-password',
+    '/account/settings',
     '/account/road-card',
+    '/account/friends',
     '/account',
+    '/team',
+    '/team/progress',
+    '/team/roadmaps',
+    '/team/new',
+    '/team/members',
+    '/team/settings',
   ];
 
   showHideAuthElements('hide');

src/components/Befriend.tsx

@@ -0,0 +1,368 @@
+import { useEffect, useState } from 'preact/hooks';
+import { httpDelete, httpGet, httpPatch, httpPost } from '../lib/http';
+import { pageProgressMessage } from '../stores/page';
+import { isLoggedIn } from '../lib/jwt';
+import { showLoginPopup } from '../lib/popup';
+import { getUrlParams } from '../lib/browser';
+import { CheckIcon } from './ReactIcons/CheckIcon';
+import { DeleteUserIcon } from './ReactIcons/DeleteUserIcon';
+import { useToast } from '../hooks/use-toast';
+import { useAuth } from '../hooks/use-auth';
+import { AddedUserIcon } from './ReactIcons/AddedUserIcon';
+import { StopIcon } from './ReactIcons/StopIcon';
+import { ErrorIcon } from './ReactIcons/ErrorIcon';
+
+export type FriendshipStatus =
+  | 'none'
+  | 'sent'
+  | 'received'
+  | 'accepted'
+  | 'rejected'
+  | 'got_rejected';
+
+type UserResponse = {
+  id: string;
+  links: Record<string, string>;
+  avatar: string;
+  name: string;
+  status: FriendshipStatus;
+};
+
+export function Befriend() {
+  const { u: inviteId } = getUrlParams();
+
+  const toast = useToast();
+  const currentUser = useAuth();
+
+  const [isConfirming, setIsConfirming] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [user, setUser] = useState<UserResponse>();
+  const isAuthenticated = isLoggedIn();
+
+  async function loadUser(userId: string) {
+    const { response, error } = await httpGet<UserResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-friend/${userId}`
+    );
+    if (error || !response) {
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    if (response.status === 'accepted') {
+      window.location.href = '/account/friends?c=fa';
+      return;
+    }
+
+    setUser(response);
+  }
+
+  useEffect(() => {
+    if (inviteId) {
+      loadUser(inviteId).finally(() => {
+        pageProgressMessage.set('');
+        setIsLoading(false);
+      });
+    } else {
+      setIsLoading(false);
+      setError('Missing invite ID in URL');
+      pageProgressMessage.set('');
+    }
+  }, [inviteId]);
+
+  async function addFriend(userId: string, successMessage: string) {
+    pageProgressMessage.set('Please wait...');
+    setError('');
+    const { response, error } = await httpPost<UserResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-add-friend/${userId}`,
+      {}
+    );
+
+    if (error || !response) {
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    if (response.status === 'accepted') {
+      window.location.href = '/account/friends?c=fa';
+      return;
+    }
+
+    setUser(response);
+  }
+
+  async function deleteFriend(userId: string, successMessage: string) {
+    pageProgressMessage.set('Please wait...');
+    setError('');
+    const { response, error } = await httpDelete<UserResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-delete-friend/${userId}`,
+      {}
+    );
+
+    if (error || !response) {
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    setUser(response);
+    toast.success(successMessage);
+  }
+
+  if (isLoading) {
+    return null;
+  }
+
+  if (!user) {
+    return (
+      <div className="container text-center">
+        <ErrorIcon additionalClasses="mx-auto mb-4 mt-24 w-20 opacity-20" />
+
+        <h2 className={'mb-1 text-2xl font-bold'}>Error</h2>
+        <p class="mb-4 text-base leading-6 text-gray-600">
+          {error || 'There was a problem, please try again.'}
+        </p>
+
+        <div>
+          <a
+            href="/"
+            className="flex-grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
+          >
+            Back to home
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  const userAvatar = user.avatar
+    ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${user.avatar}`
+    : '/images/default-avatar.png';
+
+  const isMe = currentUser?.id === user.id;
+
+  return (
+    <div className="container max-w-[400px] text-center">
+      <img
+        alt={'join team'}
+        src={userAvatar}
+        className="mx-auto mb-4 mt-24 w-28 rounded-full"
+      />
+
+      <h2 className={'mb-1 text-3xl font-bold'}>{user.name}</h2>
+      <p class="mb-6 text-base leading-6 text-gray-600">
+        After you add {user.name} as a friend, you will be able to view each
+        other's skills and progress.
+      </p>
+
+      <div class="mx-auto w-full duration-500 sm:max-w-md">
+        <div class="flex w-full flex-col items-center gap-2">
+          {user.status === 'none' && (
+            <button
+              disabled={isMe}
+              onClick={() => {
+                if (!isAuthenticated) {
+                  return showLoginPopup();
+                }
+
+                addFriend(user.id, 'Friend request sent').finally(() => {
+                  pageProgressMessage.set('');
+                });
+              }}
+              type="button"
+              class="w-full flex-grow cursor-pointer rounded-lg bg-black px-3 py-2 text-center text-white disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              {isMe ? "You can't add yourself" : 'Add Friend'}
+            </button>
+          )}
+
+          {user.status === 'sent' && (
+            <>
+              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
+                <CheckIcon additionalClasses="mr-2 h-4 w-4" />
+                Request Sent
+              </span>
+
+              {!isConfirming && (
+                <button
+                  onClick={() => {
+                    setIsConfirming(true);
+                  }}
+                  type="button"
+                  class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
+                >
+                  <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
+                  Withdraw Request
+                </button>
+              )}
+
+              {isConfirming && (
+                <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                  Are you sure?{' '}
+                  <button
+                    className="ml-2 text-red-700 underline"
+                    onClick={() => {
+                      deleteFriend(user.id, 'Friend request withdrawn').finally(
+                        () => {
+                          pageProgressMessage.set('');
+                        }
+                      );
+                    }}
+                  >
+                    Yes
+                  </button>{' '}
+                  <button
+                    onClick={() => {
+                      setIsConfirming(false);
+                    }}
+                    className="ml-2 text-red-600 underline"
+                  >
+                    No
+                  </button>
+                </span>
+              )}
+            </>
+          )}
+
+          {user.status === 'accepted' && (
+            <>
+              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
+                <AddedUserIcon additionalClasses="mr-2 h-5 w-5" />
+                You are friends
+              </span>
+
+              {!isConfirming && (
+                <button
+                  onClick={() => {
+                    setIsConfirming(true);
+                  }}
+                  type="button"
+                  class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
+                >
+                  <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
+                  Remove Friend
+                </button>
+              )}
+
+              {isConfirming && (
+                <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                  Are you sure?{' '}
+                  <button
+                    className="ml-2 text-red-700 underline"
+                    onClick={() => {
+                      deleteFriend(user.id, 'Friend removed').finally(() => {
+                        pageProgressMessage.set('');
+                      });
+                    }}
+                  >
+                    Yes
+                  </button>{' '}
+                  <button
+                    onClick={() => {
+                      setIsConfirming(false);
+                    }}
+                    className="ml-2 text-red-600 underline"
+                  >
+                    No
+                  </button>
+                </span>
+              )}
+            </>
+          )}
+
+          {user.status === 'rejected' && (
+            <>
+              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-gray-300 px-3 py-2 text-center text-black">
+                <DeleteUserIcon additionalClasses="mr-2 h-4 w-4" />
+                Request Rejected
+              </span>
+
+              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                Changed your mind?{' '}
+                <button
+                  className="ml-2 text-red-700 underline"
+                  onClick={() => {
+                    addFriend(user.id, 'Friend request accepted').finally(
+                      () => {
+                        pageProgressMessage.set('');
+                      }
+                    );
+                  }}
+                >
+                  Click here to Accept
+                </button>
+              </span>
+            </>
+          )}
+
+          {user.status === 'got_rejected' && (
+            <>
+              <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-500 px-3 py-2 text-center text-red-500">
+                <StopIcon additionalClasses="mr-2 h-4 w-4" />
+                Request Rejected
+              </span>
+            </>
+          )}
+
+          {user.status === 'received' && (
+            <>
+              <button
+                onClick={() => {
+                  addFriend(user.id, 'Friend request accepted').finally(() => {
+                    pageProgressMessage.set('');
+                  });
+                }}
+                class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border  border-gray-800 bg-gray-800 px-3 py-2 text-center text-white hover:bg-black"
+              >
+                <CheckIcon additionalClasses="mr-2 h-4 w-4" />
+                Accept Request
+              </button>
+
+              {!isConfirming && (
+                <button
+                  onClick={() => {
+                    setIsConfirming(true);
+                  }}
+                  type="button"
+                  class="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-white px-3 py-2 text-center text-red-600 hover:bg-red-100"
+                >
+                  <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
+                  Reject Request
+                </button>
+              )}
+
+              {isConfirming && (
+                <span class="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                  Are you sure?{' '}
+                  <button
+                    className="ml-2 text-red-700 underline"
+                    onClick={() => {
+                      deleteFriend(user.id, 'Friend request rejected').finally(
+                        () => {
+                          pageProgressMessage.set('');
+                        }
+                      );
+                    }}
+                  >
+                    Yes
+                  </button>{' '}
+                  <button
+                    onClick={() => {
+                      setIsConfirming(false);
+                    }}
+                    className="ml-2 text-red-600 underline"
+                  >
+                    No
+                  </button>
+                </span>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+
+      {error && (
+        <p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">{error}</p>
+      )}
+    </div>
+  );
+}

src/components/BestPracticeHeader.astro

@@ -2,6 +2,8 @@
 import Icon from './AstroIcon.astro';
 import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
 import BestPracticeHint from './BestPracticeHint.astro';
+import { MarkFavorite } from './FeaturedItems/MarkFavorite';
+import ProgressHelpPopup from './ProgressHelpPopup.astro';
 
 export interface Props {
   title: string;
@@ -15,36 +17,43 @@ const isBestPracticeReady = !isUpcoming;
 ---
 
 <LoginPopup />
+<ProgressHelpPopup />
 
-<div class='border-b'>
-  <div class='container relative py-5 sm:py-12'>
-    <div class='mb-3 mt-0 sm:mb-6'>
-      <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'>
+<div class="border-b">
+  <div class="container relative py-5 sm:py-12">
+    <div class="mb-3 mt-0 sm:mb-6">
+      <h1 class="mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl">
         {title}
+        <MarkFavorite
+          resourceId={bestPracticeId}
+          resourceType="best-practice"
+          className="text-gray-500 !opacity-100 hover:text-gray-600 [&>svg]:stroke-[0.4] [&>svg]:stroke-gray-400 hover:[&>svg]:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 sm:[&>svg]:h-5 sm:[&>svg]:w-5 ml-1.5 relative focus:outline-0"
+          client:load
+        />
       </h1>
-      <p class='text-sm text-gray-500 sm:text-lg'>{description}</p>
+      <p class="text-sm text-gray-500 sm:text-lg">{description}</p>
     </div>
 
-    <div class='flex justify-between'>
-      <div class='flex gap-1 sm:gap-2'>
+    <div class="flex justify-between">
+      <div class="flex gap-1 sm:gap-2">
         <a
-          href='/best-practices'
-          class='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 Best Practices'
+          href="/best-practices"
+          class="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 Best Practices"
         >
-          &larr;<span class='hidden sm:inline'>&nbsp;All Best Practices</span>
+          &larr;<span class="hidden sm:inline">&nbsp;All Best Practices</span>
         </a>
 
         {
           isBestPracticeReady && (
             <button
               data-guest-required
-              data-popup='login-popup'
-              class='hidden inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
-              aria-label='Download Roadmap'
+              data-popup="login-popup"
+              class="inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm"
+              aria-label="Download Roadmap"
             >
-              <Icon icon='download' />
-              <span class='ml-2 hidden sm:inline'>Download</span>
+              <Icon icon="download" />
+              <span class="ml-2 hidden sm:inline">Download</span>
             </button>
           )
         }
@@ -53,25 +62,25 @@ const isBestPracticeReady = !isUpcoming;
           isBestPracticeReady && (
             <a
               data-auth-required
-              class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
-              aria-label='Download Roadmap'
+              class="inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm"
+              aria-label="Download Roadmap"
               target="_blank"
               href={`/pdfs/best-practices/${bestPracticeId}.pdf`}
             >
-              <Icon icon='download' />
-              <span class='ml-2 hidden sm:inline'>Download</span>
+              <Icon icon="download" />
+              <span class="ml-2 hidden sm:inline">Download</span>
             </a>
           )
         }
 
         <button
           data-guest-required
-          data-popup='login-popup'
-          class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
-          aria-label='Subscribe for Updates'
+          data-popup="login-popup"
+          class="inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm"
+          aria-label="Subscribe for Updates"
         >
-          <Icon icon='email' />
-          <span class='ml-2'>Subscribe</span>
+          <Icon icon="email" />
+          <span class="ml-2">Subscribe</span>
         </button>
       </div>
 
@@ -79,13 +88,13 @@ const isBestPracticeReady = !isUpcoming;
         isBestPracticeReady && (
           <a
             href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
-            target='_blank'
-            class='inline-flex items-center justify-center 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='Suggest Changes'
+            target="_blank"
+            class="inline-flex items-center justify-center 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="Suggest Changes"
           >
-            <Icon icon='comment' class='h-3 w-3' />
-            <span class='ml-2 hidden sm:inline'>Suggest Changes</span>
-            <span class='ml-2 inline sm:hidden'>Suggest</span>
+            <Icon icon="comment" class="h-3 w-3" />
+            <span class="ml-2 hidden sm:inline">Suggest Changes</span>
+            <span class="ml-2 inline sm:hidden">Suggest</span>
           </a>
         )
       }

src/components/BestPracticeHint.astro

@@ -3,8 +3,9 @@ import ResourceProgressStats from './ResourceProgressStats.astro';
 export interface Props {
   bestPracticeId: string;
 }
+const { bestPracticeId } = Astro.props;
 ---
 
 <div class='mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0 sm:-mb-[65px]'>
-  <ResourceProgressStats />
+  <ResourceProgressStats resourceId={bestPracticeId} resourceType='best-practice' />
 </div>

src/components/CommandMenu/CommandMenu.tsx

@@ -6,36 +6,67 @@ 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';
 
-type PageType = {
+export type PageType = {
+  id: string;
   url: string;
   title: string;
   group: string;
   icon?: string;
   isProtected?: boolean;
+  metadata?: Record<string, any>;
 };
 
 const defaultPages: PageType[] = [
-  { url: '/', title: 'Home', group: 'Pages', icon: HomeIcon },
+  { id: 'home', url: '/', title: 'Home', group: 'Pages', icon: HomeIcon },
   {
+    id: 'account',
     url: '/account',
     title: 'Account',
     group: 'Pages',
     icon: UserIcon,
     isProtected: true,
   },
-  { url: '/roadmaps', title: 'Roadmaps', group: 'Pages', icon: RoadmapIcon },
   {
+    id: 'team',
+    url: '/team',
+    title: 'Teams',
+    group: 'Pages',
+    icon: GroupIcon,
+    isProtected: true,
+  },
+  {
+    id: 'roadmaps',
+    url: '/roadmaps',
+    title: 'Roadmaps',
+    group: 'Pages',
+    icon: RoadmapIcon,
+  },
+  {
+    id: 'best-practices',
     url: '/best-practices',
     title: 'Best Practices',
     group: 'Pages',
     icon: BestPracticesIcon,
   },
-  { url: '/guides', title: 'Guides', group: 'Pages', icon: GuideIcon },
-  { url: '/videos', title: 'Videos', group: 'Pages', icon: VideoIcon },
+  {
+    id: 'guides',
+    url: '/guides',
+    title: 'Guides',
+    group: 'Pages',
+    icon: GuideIcon,
+  },
+  {
+    id: 'videos',
+    url: '/videos',
+    title: 'Videos',
+    group: 'Pages',
+    icon: VideoIcon,
+  },
 ];
 
 function shouldShowPage(page: PageType) {
@@ -188,7 +219,7 @@ export function CommandMenu() {
                         <span class="mr-2 text-gray-400">{page.group}</span>
                       )}
                       {page.icon && (
-                        <img src={page.icon} class="mr-2 h-4 w-4" />
+                        <img alt={page.title} src={page.icon} class="mr-2 h-4 w-4" />
                       )}
                       {page.title}
                     </a>

src/components/CreateTeam/CreateTeamForm.tsx

@@ -0,0 +1,216 @@
+import { useEffect, useState } from 'preact/hooks';
+import { Stepper } from '../Stepper';
+import { Step0, ValidTeamType } from './Step0';
+import { Step1, ValidTeamSize } from './Step1';
+import { Step2 } from './Step2';
+import { httpGet } from '../../lib/http';
+import { getUrlParams, setUrlParams } from '../../lib/browser';
+import { pageProgressMessage } from '../../stores/page';
+import type { TeamResourceConfig } from './RoadmapSelector';
+import { Step3 } from './Step3';
+import { Step4 } from './Step4';
+import {useToast} from "../../hooks/use-toast";
+
+export interface TeamDocument {
+  _id?: string;
+  name: string;
+  avatar?: string;
+  creatorId: string;
+  links: {
+    website?: string;
+    github?: string;
+    linkedIn?: string;
+  };
+  type: ValidTeamType;
+  canMemberSendInvite: boolean;
+  teamSize?: ValidTeamSize;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export function CreateTeamForm() {
+  // Can't use hook `useParams` because it runs asynchronously
+  const { s: queryStepIndex, t: teamId } = getUrlParams();
+
+  const toast = useToast();
+  const [team, setTeam] = useState<TeamDocument>();
+
+  const [loadingTeam, setLoadingTeam] = useState(!!teamId && !team?._id);
+  const [stepIndex, setStepIndex] = useState(0);
+
+  async function loadTeam(
+    teamIdToFetch: string,
+    requiredStepIndex: number | string
+  ) {
+    const { response, error } = await httpGet<TeamDocument>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-team/${teamIdToFetch}`
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Error loading team');
+      window.location.href = '/account';
+      return;
+    }
+
+    const requiredStepIndexNumber = parseInt(requiredStepIndex as string, 10);
+    const completedSteps = Array(requiredStepIndexNumber)
+      .fill(1)
+      .map((_, counter) => counter);
+
+    setTeam(response);
+    setSelectedTeamType(response.type);
+    setCompletedSteps(completedSteps);
+    setStepIndex(requiredStepIndexNumber);
+
+    await loadTeamResourceConfig(teamIdToFetch);
+  }
+
+  const [teamResourceConfig, setTeamResourceConfig] =
+    useState<TeamResourceConfig>([]);
+
+  async function loadTeamResourceConfig(teamId: string) {
+    const { error, response } = await httpGet<TeamResourceConfig>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-team-resource-config/${teamId}`
+    );
+    if (error || !Array.isArray(response)) {
+      console.error(error);
+      return;
+    }
+
+    setTeamResourceConfig(response);
+  }
+
+  useEffect(() => {
+    if (!teamId || !queryStepIndex || team) {
+      return;
+    }
+
+    pageProgressMessage.set('Fetching team');
+    setLoadingTeam(true);
+    loadTeam(teamId, queryStepIndex).finally(() => {
+      setLoadingTeam(false);
+      pageProgressMessage.set('');
+    });
+
+    // fetch team and move to step
+  }, [teamId, queryStepIndex]);
+
+  const [selectedTeamType, setSelectedTeamType] = useState<ValidTeamType>(
+    team?.type || 'company'
+  );
+
+  const [completedSteps, setCompletedSteps] = useState([0]);
+  if (loadingTeam) {
+    return null;
+  }
+
+  let stepForm = null;
+  if (stepIndex === 0) {
+    stepForm = (
+      <Step0
+        team={team}
+        selectedTeamType={selectedTeamType}
+        setSelectedTeamType={setSelectedTeamType}
+        onStepComplete={() => {
+          if (team?._id) {
+            setUrlParams({ t: team._id, s: '1' });
+          }
+
+          setCompletedSteps([0]);
+          setStepIndex(1);
+        }}
+      />
+    );
+  } else if (stepIndex === 1) {
+    stepForm = (
+      <Step1
+        team={team}
+        onBack={() => {
+          if (team?._id) {
+            setUrlParams({ t: team._id, s: '0' });
+          }
+
+          setStepIndex(0);
+        }}
+        onStepComplete={(team: TeamDocument) => {
+          const createdTeamId = team._id!;
+
+          setUrlParams({ t: createdTeamId, s: '2' });
+
+          setCompletedSteps([0, 1]);
+          setStepIndex(2);
+          setTeam(team);
+        }}
+        selectedTeamType={selectedTeamType}
+      />
+    );
+  } else if (stepIndex === 2) {
+    stepForm = (
+      <Step2
+        team={team!}
+        teamResourceConfig={teamResourceConfig}
+        setTeamResourceConfig={setTeamResourceConfig}
+        onBack={() => {
+          if (team) {
+            setUrlParams({ t: team._id!, s: '1' });
+          }
+
+          setStepIndex(1);
+        }}
+        onNext={() => {
+          setUrlParams({ t: teamId!, s: '3' });
+          setCompletedSteps([0, 1, 2]);
+          setStepIndex(3);
+        }}
+      />
+    );
+  } else if (stepIndex === 3) {
+    stepForm = (
+      <Step3
+        team={team}
+        onBack={() => {
+          if (team) {
+            setUrlParams({ t: team._id!, s: '2' });
+          }
+
+          setStepIndex(2);
+        }}
+        onNext={() => {
+          if (team) {
+            setUrlParams({ t: team._id!, s: '4' });
+          }
+
+          setCompletedSteps([0, 1, 2, 3]);
+          setStepIndex(4);
+        }}
+      />
+    );
+  } else if (stepIndex === 4) {
+    stepForm = <Step4 team={team!} />;
+  }
+
+  return (
+    <div className={'mx-auto max-w-[700px] py-1 md:py-6'}>
+      <div className={'mb-3 md:mb-8 pb-3 md:pb-0 border-b md:border-b-0 flex flex-col items-start md:items-center'}>
+        <h1 className={'text-xl md:text-4xl font-bold'}>Create Team</h1>
+        <p className={'mt-1 md:mt-2 text-sm md:text-base text-gray-500'}>
+          Complete the steps below to create your team
+        </p>
+      </div>
+      <div className="mb-8 mt-8 hidden sm:flex w-full">
+        <Stepper
+          activeIndex={stepIndex}
+          completeSteps={completedSteps}
+          steps={[
+            { label: 'Type' },
+            { label: 'Details' },
+            { label: 'Skills' },
+            { label: 'Members' },
+          ]}
+        />
+      </div>
+
+      {stepForm}
+    </div>
+  );
+}

src/components/CreateTeam/NextButton.tsx

@@ -0,0 +1,44 @@
+import { Spinner } from '../ReactIcons/Spinner';
+
+type NextButtonProps = {
+  isLoading?: boolean;
+  loadingMessage?: string;
+  text: string;
+  hasNextArrow?: boolean;
+  onClick?: () => void;
+  type?: string;
+};
+
+export function NextButton(props: NextButtonProps) {
+  const {
+    isLoading = false,
+    text = 'Next Step',
+    type = 'button',
+    loadingMessage = 'Please wait ..',
+    onClick = () => null,
+    hasNextArrow = true,
+  } = props;
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={isLoading}
+      className={
+        'rounded-md border border-black bg-black px-4 py-2 text-white disabled:opacity-50'
+      }
+    >
+      {isLoading ? (
+        <span className={'flex items-center justify-center'}>
+          <Spinner />
+          <span className="ml-2">{loadingMessage}</span>
+        </span>
+      ) : (
+        <>
+          {text}
+          {hasNextArrow && <span className="ml-1">&rarr;</span>}
+        </>
+      )}
+    </button>
+  );
+}

src/components/CreateTeam/NotDropdown.tsx

@@ -0,0 +1,47 @@
+import ChevronDownIcon from '../../icons/chevron-down.svg';
+
+type NotDropdownProps = {
+  onClick: () => void;
+  selectedCount: number;
+  singularName: string;
+  pluralName: string;
+};
+
+export function NotDropdown(props: NotDropdownProps) {
+  const { onClick, selectedCount, singularName, pluralName } = props;
+
+  const singularOrPlural = selectedCount === 1 ? singularName : pluralName;
+
+  return (
+    <div
+      className="flex cursor-text items-center justify-between rounded-md border border-gray-300 px-3 py-2.5 hover:border-gray-400/50 hover:bg-gray-50"
+      role="button"
+      onClick={onClick}
+    >
+      {selectedCount > 0 && (
+        <div className="flex flex-col">
+          <p className="mb-1.5 text-base font-medium text-gray-800">
+            {selectedCount} {singularOrPlural} selected
+          </p>
+          <p className="text-sm text-gray-400">
+            Click to add or change selection
+          </p>
+        </div>
+      )}
+
+      {selectedCount === 0 && (
+        <div className="flex flex-col">
+          <p className="text-base text-gray-400">
+            Click to select {pluralName}
+          </p>
+        </div>
+      )}
+
+      <img
+        alt={singularName}
+        src={ChevronDownIcon}
+        className={'relative top-[1px] h-[17px] w-[17px] opacity-40'}
+      />
+    </div>
+  );
+}

src/components/CreateTeam/RoadmapSelector.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useState } from 'preact/hooks';
+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';
+
+export type TeamResourceConfig = {
+  resourceId: string;
+  resourceType: string;
+  removed: string[];
+}[];
+
+type RoadmapSelectorProps = {
+  teamId: string;
+  teamResourceConfig: TeamResourceConfig;
+  setTeamResourceConfig: (config: TeamResourceConfig) => void;
+};
+
+export function RoadmapSelector(props: RoadmapSelectorProps) {
+  const { teamId, teamResourceConfig = [], setTeamResourceConfig } = props;
+
+  const [showSelectRoadmapModal, setShowSelectRoadmapModal] = useState(false);
+  const [allRoadmaps, setAllRoadmaps] = useState<PageType[]>([]);
+  const [changingRoadmapId, setChangingRoadmapId] = useState<string>('');
+  const [error, setError] = useState<string>('');
+
+  async function loadAllRoadmaps() {
+    const { error, response } = await httpGet<PageType[]>(`/pages.json`);
+
+    if (error) {
+      setError(error.message || 'Something went wrong. Please try again!');
+      return;
+    }
+
+    if (!response) {
+      return [];
+    }
+
+    const allRoadmaps = response
+      .filter((page) => page.group === 'Roadmaps')
+      .sort((a, b) => {
+        if (a.title === 'Android') return 1;
+        return a.title.localeCompare(b.title);
+      });
+
+    setAllRoadmaps(allRoadmaps);
+    return response;
+  }
+
+  async function deleteResource(roadmapId: string) {
+    if (!teamId) {
+      return;
+    }
+
+    pageProgressMessage.set(`Deleting resource`);
+    const { error, response } = await httpPut<TeamResourceConfig>(
+      `${
+        import.meta.env.PUBLIC_API_URL
+      }/v1-delete-team-resource-config/${teamId}`,
+      {
+        resourceId: roadmapId,
+        resourceType: 'roadmap',
+      }
+    );
+
+    if (error || !response) {
+      setError(error?.message || 'Error deleting roadmap');
+      return;
+    }
+
+    setTeamResourceConfig(response);
+  }
+
+  async function onRemove(resourceId: string) {
+    pageProgressMessage.set('Removing roadmap');
+
+    deleteResource(resourceId).finally(() => {
+      pageProgressMessage.set('');
+    });
+  }
+
+  async function addTeamResource(roadmapId: string) {
+    if (!teamId) {
+      return;
+    }
+
+    pageProgressMessage.set(`Adding roadmap to team`);
+    const { error, response } = await httpPut<TeamResourceConfig>(
+      `${
+        import.meta.env.PUBLIC_API_URL
+      }/v1-update-team-resource-config/${teamId}`,
+      {
+        teamId: teamId,
+        resourceId: roadmapId,
+        resourceType: 'roadmap',
+        removed: [],
+      }
+    );
+
+    if (error || !response) {
+      setError(error?.message || 'Error adding roadmap');
+      return;
+    }
+
+    setTeamResourceConfig(response);
+  }
+
+  useEffect(() => {
+    loadAllRoadmaps().finally();
+  }, []);
+
+  return (
+    <div>
+      {changingRoadmapId && (
+        <UpdateTeamResourceModal
+          onClose={() => setChangingRoadmapId('')}
+          resourceId={changingRoadmapId}
+          resourceType={'roadmap'}
+          teamId={teamId}
+          setTeamResourceConfig={setTeamResourceConfig}
+          defaultRemovedItems={
+            teamResourceConfig.find((c) => c.resourceId === changingRoadmapId)
+              ?.removed || []
+          }
+        />
+      )}
+      {showSelectRoadmapModal && (
+        <SelectRoadmapModal
+          onClose={() => setShowSelectRoadmapModal(false)}
+          teamResourceConfig={teamResourceConfig}
+          allRoadmaps={allRoadmaps}
+          teamId={teamId}
+          onRoadmapAdd={(roadmapId) => {
+            addTeamResource(roadmapId).finally(() => {
+              pageProgressMessage.set('');
+            });
+          }}
+          onRoadmapRemove={(roadmapId) => {
+            onRemove(roadmapId).finally(() => {});
+          }}
+        />
+      )}
+
+      <div className="mt-3">
+        <NotDropdown
+          onClick={() => {
+            setShowSelectRoadmapModal(true);
+          }}
+          selectedCount={teamResourceConfig.length}
+          singularName={'roadmap'}
+          pluralName={'roadmaps'}
+        />
+      </div>
+
+      {!teamResourceConfig.length && (
+        <p className={'mb-3 mt-2 text-base text-gray-400'}>
+          No roadmaps selected.
+        </p>
+      )}
+
+      {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 ||
+              '...';
+
+            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>
+                  )}
+                </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/RoleDropdown.tsx

@@ -0,0 +1,132 @@
+import { ChevronDownIcon } from '../ReactIcons/ChevronDownIcon';
+import { useRef, useState } from 'preact/hooks';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+
+const allowedRoles = [
+  {
+    name: 'Admin',
+    value: 'admin',
+    description: 'Can do everything',
+  },
+  {
+    name: 'Manager',
+    value: 'manager',
+    description: 'Can manage team and skills',
+  },
+  {
+    name: 'Member',
+    value: 'member',
+    description: 'Can view team and skills',
+  },
+] as const;
+
+export type AllowedRoles = (typeof allowedRoles)[number]['value'];
+
+type RoleDropdownProps = {
+  className?: string;
+  selectedRole: string;
+  setSelectedRole: (role: AllowedRoles) => void;
+};
+
+export function RoleDropdown(props: RoleDropdownProps) {
+  const { selectedRole, setSelectedRole, className = 'w-[120px]' } = props;
+  const dropdownRef = useRef(null);
+
+  const [activeRoleIndex, setActiveRoleIndex] = useState(0);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  useOutsideClick(dropdownRef, () => {
+    setIsMenuOpen(false);
+  });
+
+  return (
+    <div className={`relative ${className}`}>
+      <button
+        type={'button'}
+        onKeyDown={(e) => {
+          const isUpOrDown = e.key === 'ArrowUp' || e.key === 'ArrowDown';
+          if (isUpOrDown && !isMenuOpen) {
+            e.preventDefault();
+            setIsMenuOpen(true);
+            return;
+          }
+
+          const isEnter = e.key === 'Enter';
+          if (isEnter && isMenuOpen) {
+            e.preventDefault();
+            setSelectedRole(allowedRoles[activeRoleIndex].value);
+            setIsMenuOpen(false);
+            return;
+          }
+
+          if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setActiveRoleIndex((prev) => {
+              const nextIndex = prev + 1;
+              if (nextIndex >= allowedRoles.length) {
+                return 0;
+              }
+              return nextIndex;
+            });
+          }
+          if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setActiveRoleIndex((prev) => {
+              const nextIndex = prev - 1;
+              if (nextIndex < 0) {
+                return allowedRoles.length - 1;
+              }
+              return nextIndex;
+            });
+          }
+        }}
+        onClick={() => setIsMenuOpen(!isMenuOpen)}
+        className={`flex h-full w-full cursor-default items-center justify-between rounded-md border px-4 ${
+          isMenuOpen ? 'border-gray-300 bg-gray-100' : ''
+        }`}
+      >
+        <span
+          className={`capitalize`}>
+          {selectedRole || 'Select Role'}
+        </span>
+        <ChevronDownIcon
+          className={'relative top-0.5 ml-2 h-4 w-4 text-gray-400'}
+        />
+      </button>
+
+      {isMenuOpen && (
+        <div
+          className="absolute z-10 mt-1 w-[200px] rounded-md border bg-white shadow-md"
+          ref={dropdownRef}
+        >
+          <div
+            className="py-1"
+            role="menu"
+            aria-orientation="vertical"
+            aria-labelledby="options-menu"
+          >
+            {allowedRoles.map((allowedRole, roleCounter) => (
+              <button
+                key={allowedRole.value}
+                type={'button'}
+                className={`w-full cursor-default px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 ${
+                  roleCounter === activeRoleIndex ? 'bg-gray-100' : 'bg-white'
+                }`}
+                role="menuitem"
+                onClick={() => {
+                  setIsMenuOpen(false);
+                  setSelectedRole(allowedRole.value);
+                }}
+              >
+                <span className="block font-medium">{allowedRole.name}</span>
+                <span className="block text-xs text-gray-400">
+                  {allowedRole.description}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/CreateTeam/SelectRoadmapModal.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+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';
+
+export type SelectRoadmapModalProps = {
+  teamId: string;
+  allRoadmaps: PageType[];
+  onClose: () => void;
+  teamResourceConfig: TeamResourceConfig;
+  onRoadmapAdd: (roadmapId: string) => void;
+  onRoadmapRemove: (roadmapId: string) => void;
+};
+
+export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
+  const {
+    onClose,
+    allRoadmaps,
+    onRoadmapAdd,
+    onRoadmapRemove,
+    teamResourceConfig,
+  } = props;
+  const popupBodyEl = useRef<HTMLDivElement>(null);
+  const searchInputEl = useRef<HTMLInputElement>(null);
+
+  const [searchResults, setSearchResults] = useState<PageType[]>(allRoadmaps);
+  const [searchText, setSearchText] = useState('');
+
+  useKeydown('Escape', () => {
+    onClose();
+  });
+
+  useOutsideClick(popupBodyEl, () => {
+    onClose();
+  });
+
+  useEffect(() => {
+    if (!searchInputEl.current) {
+      return;
+    }
+
+    searchInputEl.current.focus();
+  }, [searchInputEl]);
+
+  useEffect(() => {
+    if (searchText.length === 0) {
+      setSearchResults(allRoadmaps);
+      return;
+    }
+
+    const searchResults = allRoadmaps.filter((roadmap) => {
+      return (
+        roadmap.title.toLowerCase().includes(searchText.toLowerCase()) ||
+        roadmap.id.toLowerCase().includes(searchText.toLowerCase())
+      );
+    });
+    setSearchResults(searchResults);
+  }, [searchText, allRoadmaps]);
+
+  const roleBasedRoadmaps = searchResults.filter((roadmap) =>
+    roadmap?.metadata?.tags?.includes('role-roadmap')
+  );
+  const skillBasedRoadmaps = searchResults.filter((roadmap) =>
+    roadmap?.metadata?.tags?.includes('skill-roadmap')
+  );
+
+  return (
+    <div class="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 class="relative mx-auto h-full w-full max-w-2xl p-4 md:h-auto">
+        <div
+          ref={popupBodyEl}
+          class="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow"
+        >
+          <button
+            type="button"
+            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} className="h-4 w-4" />
+            <span class="sr-only">Close modal</span>
+          </button>
+          <input
+            ref={searchInputEl}
+            type="text"
+            placeholder="Search roadmaps"
+            className="block w-full border-b px-5 pb-3.5 pt-4 outline-none placeholder:text-gray-400"
+            value={searchText}
+            onInput={(e) => setSearchText((e.target as HTMLInputElement).value)}
+          />
+          <div className="min-h-[200px] p-4">
+            <span className="block pb-3 text-xs uppercase text-gray-400">
+              Role Based Roadmaps
+            </span>
+            {roleBasedRoadmaps.length === 0 && (
+              <p className="mb-1 flex h-full items-start text-sm italic text-gray-400"></p>
+            )}
+            {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
+                  );
+
+                  return (
+                    <SelectRoadmapModalItem
+                      title={roadmap.title}
+                      isSelected={isSelected}
+                      onClick={() => {
+                        if (isSelected) {
+                          onRoadmapRemove(roadmap.id);
+                        } else {
+                          onRoadmapAdd(roadmap.id);
+                        }
+                      }}
+                    />
+                  );
+                })}
+              </div>
+            )}
+            <span className="block pb-3 text-xs uppercase text-gray-400">
+              Skill Based Roadmaps
+            </span>
+            <div className="flex flex-wrap items-center gap-2">
+              {skillBasedRoadmaps.map((roadmap) => {
+                const isSelected = !!teamResourceConfig.find(
+                  (r) => r.resourceId === roadmap.id
+                );
+
+                return (
+                  <SelectRoadmapModalItem
+                    title={roadmap.title}
+                    isSelected={isSelected}
+                    onClick={() => {
+                      if (isSelected) {
+                        onRoadmapRemove(roadmap.id);
+                      } else {
+                        onRoadmapAdd(roadmap.id);
+                      }
+                    }}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/CreateTeam/SelectRoadmapModalItem.tsx

@@ -0,0 +1,34 @@
+import type { SelectRoadmapModalProps } from './SelectRoadmapModal';
+
+type SelectRoadmapModalItemProps = {
+  title: string;
+  isSelected: boolean;
+  onClick: () => void;
+};
+
+export function SelectRoadmapModalItem(props: SelectRoadmapModalItemProps) {
+  const { isSelected, onClick, title } = props;
+  return (
+    <button
+      className={`group flex min-h-[35px] items-stretch overflow-hidden rounded-md text-sm ${
+        !isSelected
+          ? 'border border-gray-300 hover:bg-gray-100'
+          : 'bg-black text-white transition-colors hover:bg-gray-700'
+      }`}
+      onClick={onClick}
+    >
+      <span className="flex items-center px-3">{title}</span>
+      {isSelected && (
+        <span className="flex items-center bg-gray-700 px-3 text-xs text-white transition-colors">
+          &times;
+        </span>
+      )}
+
+      {!isSelected && (
+        <span className="flex items-center bg-gray-100 px-2.5 text-xs text-gray-500">
+          +
+        </span>
+      )}
+    </button>
+  );
+}

src/components/CreateTeam/Step0.tsx

@@ -0,0 +1,122 @@
+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 'preact/hooks';
+import { NextButton } from './NextButton';
+
+export const validTeamTypes = [
+  {
+    value: 'company',
+    label: '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,
+    description: 'Invite your friends or course-mates and track your learning progress together',
+  },
+] as const;
+
+export type ValidTeamType = (typeof validTeamTypes)[number]['value'];
+
+type Step0Props = {
+  team?: TeamDocument;
+  selectedTeamType: ValidTeamType;
+  setSelectedTeamType: (teamType: ValidTeamType) => void;
+  onStepComplete: () => void;
+};
+
+export function Step0(props: Step0Props) {
+  const { team, selectedTeamType, onStepComplete, setSelectedTeamType } = props;
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>();
+
+  async function onNextClick() {
+    if (!team) {
+      onStepComplete();
+      return;
+    }
+
+    setIsLoading(true);
+    setError('');
+
+    const { response, error } = await httpPut(
+      `${import.meta.env.PUBLIC_API_URL}/v1-update-team/${team._id}`,
+      {
+        name: team.name,
+        website: team?.links?.website || undefined,
+        type: selectedTeamType,
+        gitHubUrl: team?.links?.github || undefined,
+        ...(selectedTeamType === 'company' && {
+          teamSize: team.teamSize,
+          linkedInUrl: team?.links?.linkedIn || undefined,
+        }),
+      }
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    setIsLoading(false);
+    setError('');
+    onStepComplete();
+  }
+
+  return (
+    <>
+      <div className={'flex flex-col sm:flex-row gap-3'}>
+        {validTeamTypes.map((validTeamType) => (
+          <button
+            className={`flex flex-grow flex-col items-center rounded-lg border px-5 py-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' : ''
+              }`}
+            />
+            <span className="mb-2 block text-2xl font-bold">
+              {validTeamType.label}
+            </span>
+            <span className="text-sm text-gray-500 leading-[21px]">
+              {validTeamType.description}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/*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">
+        <a
+          href="/account"
+          className={
+            'rounded-md border border-red-400 bg-white px-8 py-2 text-red-500 text-center'
+          }
+        >
+          Cancel
+        </a>
+        <NextButton
+          type={'button'}
+          onClick={onNextClick}
+          isLoading={isLoading}
+          text={'Next Step'}
+          loadingMessage={'Updating team ..'}
+        />
+      </div>
+    </>
+  );
+}

src/components/CreateTeam/Step1.tsx

@@ -0,0 +1,260 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { AppError, httpPost, httpPut } from '../../lib/http';
+import type { ValidTeamType } from './Step0';
+import type { TeamDocument } from './CreateTeamForm';
+import { NextButton } from './NextButton';
+
+export const validTeamSizes = [
+  '1-5',
+  '6-10',
+  '11-25',
+  '26-50',
+  '51-100',
+  '101-200',
+  '201-500',
+  '501-1000',
+  '1000+',
+] as const;
+
+export type ValidTeamSize = (typeof validTeamSizes)[number];
+
+type Step1Props = {
+  team?: TeamDocument;
+  selectedTeamType: ValidTeamType;
+  onStepComplete: (team: TeamDocument) => void;
+  onBack: () => void;
+};
+
+export function Step1(props: Step1Props) {
+  const { team, selectedTeamType, onBack, onStepComplete } = props;
+  const [error, setError] = useState('');
+
+  const nameRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!nameRef.current) {
+      return;
+    }
+
+    nameRef.current.focus();
+  }, [nameRef]);
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [name, setName] = useState(team?.name || '');
+  const [website, setWebsite] = useState(team?.links?.website || '');
+  const [linkedInUrl, setLinkedInUrl] = useState(team?.links?.linkedIn || '');
+  const [gitHubUrl, setGitHubUrl] = useState(team?.links?.github || '');
+  const [teamSize, setTeamSize] = useState<ValidTeamSize>(
+    team?.teamSize || ('' as any)
+  );
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    setIsLoading(true);
+    if (!name || !selectedTeamType) {
+      setIsLoading(false);
+      return;
+    }
+
+    let response: TeamDocument | undefined;
+    let error: AppError | undefined;
+
+    if (!team?._id) {
+      ({ response, error } = await httpPost(
+        `${import.meta.env.PUBLIC_API_URL}/v1-create-team`,
+        {
+          name,
+          website: website || undefined,
+          type: selectedTeamType,
+          gitHubUrl: gitHubUrl || undefined,
+          ...(selectedTeamType === 'company' && {
+            teamSize,
+            linkedInUrl: linkedInUrl || undefined,
+          }),
+          roadmapIds: [],
+          bestPracticeIds: [],
+        }
+      ));
+
+      if (error || !response?._id) {
+        setError(error?.message || 'Something went wrong. Please try again.');
+        setIsLoading(false);
+        return;
+      }
+
+      onStepComplete(response as TeamDocument);
+    } else {
+      ({ response, error } = await httpPut(
+        `${import.meta.env.PUBLIC_API_URL}/v1-update-team/${team._id}`,
+        {
+          name,
+          website: website || undefined,
+          type: selectedTeamType,
+          gitHubUrl: gitHubUrl || undefined,
+          ...(selectedTeamType === 'company' && {
+            teamSize,
+            linkedInUrl: linkedInUrl || undefined,
+          }),
+        }
+      ));
+
+      if (error || (response as any)?.status !== 'ok') {
+        setError(error?.message || 'Something went wrong. Please try again.');
+        setIsLoading(false);
+        return;
+      }
+
+      onStepComplete({
+        ...team,
+        name,
+        _id: team._id,
+        links: {
+          website: website || team?.links?.website,
+          linkedIn: linkedInUrl || team?.links?.linkedIn,
+          github: gitHubUrl || team?.links?.github,
+        },
+        type: selectedTeamType,
+        teamSize: teamSize!,
+      });
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="flex w-full flex-col">
+        <label
+          for="name"
+          className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
+        >
+          {selectedTeamType === 'company' ? 'Company Name' : 'Group Name'}
+        </label>
+        <input
+          type="text"
+          name="name"
+          ref={nameRef as any}
+          autofocus={true}
+          id="name"
+          className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+          placeholder="Roadmap Inc."
+          disabled={isLoading}
+          required
+          value={name}
+          onInput={(e) => setName((e.target as HTMLInputElement).value)}
+        />
+      </div>
+
+      {selectedTeamType === 'company' && (
+        <div className="mt-4 flex w-full flex-col">
+          <label
+            for="website"
+            className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
+          >
+            Website
+          </label>
+          <input
+            type="url"
+            name="website"
+            required
+            id="website"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            placeholder="https://roadmap.sh"
+            disabled={isLoading}
+            value={website}
+            onInput={(e) => setWebsite((e.target as HTMLInputElement).value)}
+          />
+        </div>
+      )}
+
+      {selectedTeamType === 'company' && (
+        <div className="mt-4 flex w-full flex-col">
+          <label for="website" className="text-sm leading-none text-slate-500">
+            Company LinkedIn URL
+          </label>
+          <input
+            type="url"
+            name="website"
+            id="website"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            placeholder="https://www.linkedin.com/company/roadmapsh"
+            disabled={isLoading}
+            value={linkedInUrl}
+            onInput={(e) =>
+              setLinkedInUrl((e.target as HTMLInputElement).value)
+            }
+          />
+        </div>
+      )}
+
+      <div className="mt-4 flex w-full flex-col">
+        <label for="website" className="text-sm leading-none text-slate-500">
+          GitHub Organization URL
+        </label>
+        <input
+          type="url"
+          name="website"
+          id="website"
+          className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+          placeholder="https://github.com/roadmapsh"
+          disabled={isLoading}
+          value={gitHubUrl}
+          onInput={(e) => setGitHubUrl((e.target as HTMLInputElement).value)}
+        />
+      </div>
+
+      {selectedTeamType === 'company' && (
+        <div className="mt-4 flex w-full flex-col">
+          <label
+            for="team-size"
+            className='text-sm leading-none text-slate-500 after:text-red-400 after:content-["*"]'
+          >
+            Tech Team Size
+          </label>
+          <select
+            name="team-size"
+            id="team-size"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            required={selectedTeamType === 'company'}
+            disabled={isLoading}
+            value={teamSize}
+            onChange={(e) =>
+              setTeamSize((e.target as HTMLSelectElement).value as any)
+            }
+          >
+            <option value="" selected>
+              Select team size
+            </option>
+            {validTeamSizes.map((size) => (
+              <option value={size}>{size} people</option>
+            ))}
+          </select>
+        </div>
+      )}
+
+      {error && (
+        <div className="mt-4 flex w-full flex-col">
+          <span className="text-sm text-red-500">{error}</span>
+        </div>
+      )}
+
+      <div className="mt-4 flex flex-col md:flex-row items-center justify-between gap-2">
+        <button
+          type="button"
+          onClick={onBack}
+          className={
+            'rounded-md border border-red-400 bg-white px-4 py-2 text-red-500'
+          }
+        >
+          <span className="mr-1">&larr;</span>
+          Previous Step
+        </button>
+        <NextButton
+          isLoading={isLoading}
+          text={'Next Step'}
+          type={'submit'}
+          loadingMessage={'Creating team ..'}
+        />
+      </div>
+    </form>
+  );
+}

src/components/CreateTeam/Step2.tsx

@@ -0,0 +1,70 @@
+import { RoadmapSelector, TeamResourceConfig } from './RoadmapSelector';
+import type { TeamDocument } from './CreateTeamForm';
+
+type Step2Props = {
+  team: TeamDocument;
+  teamResourceConfig: TeamResourceConfig;
+  setTeamResourceConfig: (config: TeamResourceConfig) => void;
+  onBack: () => void;
+  onNext: () => void;
+};
+
+export function Step2(props: Step2Props) {
+  const { team, onBack, onNext, teamResourceConfig, setTeamResourceConfig } =
+    props;
+
+  return (
+    <>
+      <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>
+          <p className="text-sm text-gray-700">
+            You can always add and customize your roadmaps later.
+          </p>
+        </div>
+
+        <RoadmapSelector
+          teamId={team._id!}
+          teamResourceConfig={teamResourceConfig}
+          setTeamResourceConfig={setTeamResourceConfig}
+        />
+      </div>
+
+      <div className="mt-4 flex flex-col md:flex-row items-stretch md:items-center justify-between gap-2">
+        <button
+          type="button"
+          onClick={onBack}
+          className={
+            'rounded-md border border-red-400 bg-white px-4 py-2 text-red-500'
+          }
+        >
+          <span className="mr-1">&larr;</span>
+          Previous Step
+        </button>
+
+        <div className={'flex gap-2'}>
+          <button
+            type="button"
+            onClick={onNext}
+            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'
+            }
+          >
+            Skip for Now
+          </button>
+          <button
+            type="submit"
+            disabled={teamResourceConfig.length === 0}
+            onClick={onNext}
+            className={
+              'rounded-md border bg-black px-4 py-2 text-white disabled:opacity-50'
+            }
+          >
+            Next Step
+            <span className="ml-1">&rarr;</span>
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/CreateTeam/Step3.tsx

@@ -0,0 +1,198 @@
+import type { TeamDocument } from './CreateTeamForm';
+import { NextButton } from './NextButton';
+import { TrashIcon } from '../ReactIcons/TrashIcon';
+import { AllowedRoles, RoleDropdown } from './RoleDropdown';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { httpPost } from '../../lib/http';
+
+type Step3Props = {
+  team?: TeamDocument;
+  onNext: () => void;
+  onBack: () => void;
+};
+
+type InviteType = {
+  id: string;
+  email: string;
+  role: AllowedRoles;
+};
+
+function generateId() {
+  return `${new Date().getTime()}`;
+}
+
+export function Step3(props: Step3Props) {
+  const { onNext, onBack, team } = props;
+
+  const [error, setError] = useState('');
+  const [invitingTeam, setInvitingTeam] = useState(false);
+  const emailInputRef = useRef(null);
+
+  const [users, setUsers] = useState<InviteType[]>([
+    {
+      id: generateId(),
+      email: '',
+      role: 'member',
+    },
+  ]);
+
+  async function inviteTeam() {
+    setInvitingTeam(true);
+    const { error, response } = await httpPost(
+      `${import.meta.env.PUBLIC_API_URL}/v1-invite-team/${team?._id}`,
+      {
+        members: users,
+      }
+    );
+
+    if (error || !response) {
+      setError(error?.message || 'Something went wrong');
+      setInvitingTeam(false);
+
+      return;
+    }
+
+    onNext();
+  }
+
+  function focusLastEmailInput() {
+    if (!emailInputRef.current) {
+      return;
+    }
+
+    (emailInputRef.current as HTMLInputElement).focus();
+  }
+
+  function onSubmit(e: any) {
+    e.preventDefault();
+
+    inviteTeam().finally(() => null);
+  }
+
+  useEffect(() => {
+    focusLastEmailInput();
+  }, [users.length]);
+
+  return (
+    <form className="mt-4 flex w-full flex-col" onSubmit={onSubmit}>
+      <div class="mb-1 mt-2">
+        <h2 class="mb-1 md:mb-2 text-lg md:text-2xl font-bold">Invite your Team</h2>
+        <p class="text-sm text-gray-700">
+          Use the form below to invite your team members to your team. You can
+          also invite them later.
+        </p>
+      </div>
+      <div className="mt-4 flex flex-col gap-1">
+        {users.map((user, userCounter) => {
+          return (
+            <div className="flex flex-col sm:flex-row gap-2" key={user.id}>
+              <input
+                ref={userCounter === users.length - 1 ? emailInputRef : null}
+                autofocus={true}
+                type="email"
+                name="email"
+                required
+                id="email"
+                placeholder="Email"
+                value={user.email}
+                onChange={(e) => {
+                  const newUsers = users.map((u) => {
+                    if (u.id === user.id) {
+                      return {
+                        ...u,
+                        email: (e.target as HTMLInputElement)?.value,
+                      };
+                    }
+
+                    return u;
+                  });
+
+                  setUsers(newUsers);
+                }}
+                className="flex-grow rounded-md border border-gray-200 bg-white px-4 py-2 text-gray-900"
+              />
+              <RoleDropdown
+                selectedRole={user.role}
+                setSelectedRole={(role: AllowedRoles) => {
+                  const newUsers = users.map((u) => {
+                    if (u.id === user.id) {
+                      return {
+                        ...u,
+                        role,
+                      };
+                    }
+
+                    return u;
+                  });
+
+                  setUsers(newUsers);
+                }}
+              />
+              <button
+                disabled={users.length <= 1}
+                type="button"
+                className="rounded-md border border-red-200 bg-white px-4 py-2 text-red-500 hover:bg-red-100 disabled:opacity-30"
+                onClick={() => {
+                  setUsers(users.filter((u) => u.id !== user.id));
+                }}
+              >
+                <TrashIcon className="h-5 w-5" />
+              </button>
+            </div>
+          );
+        })}
+      </div>
+      {users.length <= 30 && (
+        <button
+          onClick={() => {
+            setUsers([
+              ...users,
+              { id: generateId(), email: '', role: 'member' },
+            ]);
+          }}
+          type="button"
+          className="mt-2 rounded-md border border-dashed border-gray-400 py-2 text-sm text-gray-500 hover:border-gray-500 hover:text-gray-800"
+        >
+          + Add another
+        </button>
+      )}
+
+      {error && (
+        <div className="mt-2 text-sm font-medium text-red-500" role="alert">
+          {error}
+        </div>
+      )}
+
+      <div className="mt-4 flex flex-col sm:flex-row items-stretch md:items-center justify-between gap-2">
+        <button
+          type="button"
+          onClick={onBack}
+          className={
+            'rounded-md border border-red-400 bg-white px-4 py-2 text-red-500'
+          }
+        >
+          <span className="mr-1">&larr;</span>
+          Previous Step
+        </button>
+        <div className={'flex gap-2'}>
+          <button
+            type="button"
+            onClick={onNext}
+            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'
+            }
+          >
+            Skip for Now
+          </button>
+          <NextButton
+            type={'submit'}
+            isLoading={invitingTeam}
+            text={'Send Invites'}
+            loadingMessage={'Updating team ..'}
+            hasNextArrow={false}
+          />
+        </div>
+      </div>
+    </form>
+  );
+}

src/components/CreateTeam/Step4.tsx

@@ -0,0 +1,26 @@
+import { CheckIcon } from '../ReactIcons/CheckIcon';
+import type { TeamDocument } from './CreateTeamForm';
+
+type Step4Props = {
+  team: TeamDocument;
+};
+
+export function Step4({ team }: Step4Props) {
+  return (
+    <div className="mt-4 flex flex-col rounded-xl border py-12 text-center">
+      <div class="mb-1 flex flex-col items-center">
+        <CheckIcon additionalClasses={'h-14 w-14 mb-4 opacity-100'} />
+        <h2 class="mb-2 text-2xl font-bold">Team Created</h2>
+        <p class="text-sm text-gray-700">
+          Your team has been created. Happy learning!
+        </p>
+        <a
+          href={`/team/progress?t=${team._id}`}
+          class="mt-4 rounded-md bg-black px-5 py-1.5 text-sm text-white"
+        >
+          View Team
+        </a>
+      </div>
+    </div>
+  );
+}

src/components/CreateTeam/UpdateTeamResourceModal.tsx

@@ -0,0 +1,215 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { wireframeJSONToSVG } from 'roadmap-renderer';
+import { Spinner } from '../ReactIcons/Spinner';
+import { httpGet, 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/preact';
+import { $currentTeam } from '../../stores/team';
+
+export type ProgressMapProps = {
+  teamId: string;
+  resourceId: string;
+  resourceType: 'roadmap' | 'best-practice';
+  defaultRemovedItems?: string[];
+  setTeamResourceConfig: (config: TeamResourceConfig) => void;
+  onClose: () => void;
+};
+
+export function UpdateTeamResourceModal(props: ProgressMapProps) {
+  const {
+    defaultRemovedItems = [],
+    resourceId,
+    resourceType,
+    teamId,
+    setTeamResourceConfig,
+    onClose,
+  } = props;
+
+  const containerEl = useRef<HTMLDivElement>(null);
+  const popupBodyEl = useRef<HTMLDivElement>(null);
+
+  const toast = useToast();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isUpdating, setIsUpdating] = useState(false);
+
+  const [removedItems, setRemovedItems] =
+    useState<string[]>(defaultRemovedItems);
+
+  const currentTeam = useStore($currentTeam);
+
+  useEffect(() => {
+    function onTopicClick(e: any) {
+      const groupEl = e.target.closest('.clickable-group');
+      const groupId = groupEl?.dataset?.groupId;
+
+      if (!groupId) {
+        return;
+      }
+
+      const normalizedGroupId = groupId.replace(/^\d+-/, '');
+      if (removedItems.includes(normalizedGroupId)) {
+        setRemovedItems((prev) =>
+          prev.filter((id) => id !== normalizedGroupId)
+        );
+        renderTopicProgress(normalizedGroupId, 'reset' as any);
+      } else {
+        setRemovedItems((prev) => [...prev, normalizedGroupId]);
+        renderTopicProgress(normalizedGroupId, 'removed');
+      }
+    }
+
+    document.addEventListener('click', onTopicClick);
+    return () => {
+      document.removeEventListener('click', onTopicClick);
+    };
+  }, [removedItems]);
+
+  let resourceJsonUrl = 'https://roadmap.sh';
+  if (resourceType === 'roadmap') {
+    resourceJsonUrl += `/${resourceId}.json`;
+  } else {
+    resourceJsonUrl += `/best-practices/${resourceId}.json`;
+  }
+
+  async function renderResource(jsonUrl: string) {
+    const res = await fetch(jsonUrl);
+    const json = await res.json();
+    const svg = await wireframeJSONToSVG(json, {
+      fontURL: '/fonts/balsamiq.woff2',
+    });
+
+    containerEl.current?.replaceChildren(svg);
+
+    // Render team configuration
+    removedItems.forEach((topicId: string) => {
+      renderTopicProgress(topicId, 'removed');
+    });
+  }
+
+  useKeydown('Escape', () => {
+    onClose();
+  });
+
+  useOutsideClick(popupBodyEl, () => {
+    onClose();
+  });
+
+  async function onSaveChanges() {
+    if (removedItems.length === 0) {
+      return;
+    }
+
+    setIsUpdating(true);
+    const { error, response } = await httpPut<TeamResourceConfig>(
+      `${
+        import.meta.env.PUBLIC_API_URL
+      }/v1-update-team-resource-config/${teamId}`,
+      {
+        teamId: teamId,
+        resourceId: resourceId,
+        resourceType: resourceType,
+        removed: removedItems,
+      }
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Error adding roadmap');
+      return;
+    }
+
+    setTeamResourceConfig(response);
+    onClose();
+  }
+
+  useEffect(() => {
+    if (
+      !containerEl.current ||
+      !resourceJsonUrl ||
+      !resourceId ||
+      !resourceType ||
+      !teamId
+    ) {
+      return;
+    }
+
+    renderResource(resourceJsonUrl)
+      .catch((err) => {
+        console.error(err);
+        toast.error('Something went wrong. Please try again!');
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  return (
+    <div class="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 class="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
+        <div
+          id={
+            currentTeam?.type === 'company'
+              ? 'customized-roadmap'
+              : 'original-roadmap'
+          }
+          ref={popupBodyEl}
+          class="popup-body relative rounded-lg bg-white shadow"
+        >
+          <div
+            className={
+              'sticky top-0 mb-3 rounded-2xl border-4 border-white bg-black p-4'
+            }
+          >
+            <p className="mb-2 text-gray-300">
+              Click and select the items to remove from the roadmap.
+            </p>
+            <div className="flex flex-row items-center gap-1.5">
+              <button
+                disabled={removedItems.length === 0}
+                onClick={() =>
+                  onSaveChanges().finally(() => setIsUpdating(false))
+                }
+                className={
+                  'rounded-md bg-blue-600 px-2.5 py-1.5 text-sm text-white hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-400'
+                }
+              >
+                {isUpdating ? (
+                  <span className={'flex items-center gap-1.5'}>
+                    <Spinner
+                      className="h-3 w-3"
+                      innerFill="white"
+                      isDualRing={false}
+                    />{' '}
+                    Saving ..
+                  </span>
+                ) : (
+                  'Save Changes'
+                )}
+              </button>
+              <button
+                onClick={onClose}
+                className="rounded-md bg-gray-600 px-2.5 py-1.5 text-sm text-white hover:bg-gray-700"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+          <div id="resource-svg-wrap" ref={containerEl} className="px-4"></div>
+
+          {isLoading && (
+            <div class="flex w-full justify-center">
+              <Spinner
+                isDualRing={false}
+                className="mb-4 mt-2 h-4 w-4 animate-spin fill-blue-600 text-gray-200 sm:h-8 sm:w-8"
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/DeleteAccount/DeleteAccount.astro

@@ -0,0 +1,16 @@
+---
+import DeleteAccountPopup from "./DeleteAccountPopup.astro";
+---
+<DeleteAccountPopup />
+
+<h2 class='text-xl font-bold sm:text-2xl'>Delete Account</h2>
+<p class='mt-2 text-gray-400'>
+  Permanently remove your account from the roadmap.sh. This cannot be undone and all your progress and data will be lost.
+</p>
+
+<button
+  data-popup='delete-account-popup'
+  class="mt-4 w-full rounded-lg bg-red-600 py-2 text-base font-regular text-white outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1"
+>
+  Delete Account
+</button>

src/components/DeleteAccount/DeleteAccountForm.tsx

@@ -0,0 +1,89 @@
+import {useEffect, useState} from 'preact/hooks';
+import { httpDelete } from '../../lib/http';
+import { logout } from '../Navigation/navigation';
+
+export function DeleteAccountForm() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [confirmationText, setConfirmationText] = useState('');
+
+  useEffect(() => {
+    setError('');
+    setConfirmationText('');
+  }, [])
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    if (confirmationText.toUpperCase() !== 'DELETE') {
+      setError('Verification text does not match');
+      setIsLoading(false);
+      return;
+    }
+
+    const { response, error } = await httpDelete(
+      `${import.meta.env.PUBLIC_API_URL}/v1-delete-account`
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    logout();
+  };
+
+  const handleClosePopup = () => {
+    setIsLoading(false);
+    setError('');
+    setConfirmationText('');
+
+    const deleteAccountPopup = document.getElementById('delete-account-popup');
+    deleteAccountPopup?.classList.add('hidden');
+    deleteAccountPopup?.classList.remove('flex');
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <div className="my-4">
+        <input
+          type="text"
+          name="delete-account"
+          id="delete-account"
+          className="mt-2 block w-full rounded-md border border-gray-300 py-2 px-3 outline-none placeholder:text-gray-400 focus:border-gray-400"
+          placeholder={'Type "delete" to confirm'}
+          required
+          autoFocus
+          value={confirmationText}
+          onInput={(e) =>
+            setConfirmationText((e.target as HTMLInputElement).value)
+          }
+        />
+        {error && (
+          <p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">{error}</p>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          disabled={isLoading}
+          onClick={handleClosePopup}
+          className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          disabled={isLoading || confirmationText.toUpperCase() !== 'DELETE'}
+          className="flex-grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
+        >
+          {isLoading ? 'Please wait ..' : 'Confirm'}
+        </button>
+      </div>
+    </form>
+  );
+}

src/components/DeleteAccount/DeleteAccountPopup.astro

@@ -0,0 +1,17 @@
+---
+import Popup from '../Popup/Popup.astro';
+import { DeleteAccountForm } from './DeleteAccountForm';
+---
+
+<Popup id='delete-account-popup' title='Delete Account' subtitle=''>
+  <div class='-mt-2.5'>
+    <p>
+      This will permanently delete your account and all your associated data
+      including your progress.
+    </p>
+
+    <p class="text-black font-medium -mb-2 mt-3 text-base">Please type "delete" to confirm.</p>
+
+    <DeleteAccountForm client:only />
+  </div>
+</Popup>

src/components/DeleteTeamPopup.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { httpDelete } from '../lib/http';
+import type { TeamDocument } from './CreateTeam/CreateTeamForm';
+import { useTeamId } from '../hooks/use-team-id';
+import { useOutsideClick } from '../hooks/use-outside-click';
+import { useKeydown } from '../hooks/use-keydown';
+import { useToast } from '../hooks/use-toast';
+
+type DeleteTeamPopupProps = {
+  onClose: () => void;
+};
+
+export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
+  const { onClose } = props;
+
+  const toast = useToast();
+  const popupBodyEl = useRef<HTMLDivElement>(null);
+  const inputEl = useRef<HTMLInputElement>(null);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [confirmationText, setConfirmationText] = useState('');
+  const { teamId } = useTeamId();
+
+  useOutsideClick(popupBodyEl, () => {
+    onClose();
+  });
+
+  useKeydown('Escape', () => {
+    onClose();
+  });
+
+  useEffect(() => {
+    inputEl.current?.focus();
+  }, []);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    if (confirmationText.toUpperCase() !== 'DELETE') {
+      setError('Verification text does not match');
+      setIsLoading(false);
+      return;
+    }
+
+    const { response, error } = await httpDelete<TeamDocument>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-delete-team/${teamId}`
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    toast.success('Team deleted successfully');
+    window.location.href = '/account';
+  };
+
+  const handleClosePopup = () => {
+    setIsLoading(false);
+    setError('');
+    setConfirmationText('');
+
+    onClose();
+  };
+
+  return (
+    <>
+      <div class="fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+        <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+          <div
+            ref={popupBodyEl}
+            class="popup-body relative rounded-lg bg-white p-4 shadow"
+          >
+            <h2 class="text-2xl font-semibold text-black">Delete Team</h2>
+            <p className="text-gray-500">
+              This will permanently delete your team and all associated data.
+            </p>
+
+            <p class="-mb-2 mt-3 text-base font-medium text-black">
+              Please type "delete" to confirm.
+            </p>
+            <form onSubmit={handleSubmit}>
+              <div className="my-4">
+                <input
+                  ref={inputEl}
+                  type="text"
+                  name="delete-account"
+                  id="delete-account"
+                  className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+                  placeholder={'Type "delete" to confirm'}
+                  required
+                  autoFocus
+                  value={confirmationText}
+                  onInput={(e) =>
+                    setConfirmationText((e.target as HTMLInputElement).value)
+                  }
+                />
+                {error && (
+                  <p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">
+                    {error}
+                  </p>
+                )}
+              </div>
+
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  disabled={isLoading}
+                  onClick={handleClosePopup}
+                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={
+                    isLoading || confirmationText.toUpperCase() !== 'DELETE'
+                  }
+                  className="flex-grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
+                >
+                  {isLoading ? 'Please wait ..' : 'Confirm'}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/FeaturedItems/FavoriteIcon.tsx

@@ -0,0 +1,45 @@
+type FavoriteIconProps = {
+  isFavorite?: boolean;
+};
+
+export function FavoriteIcon(props: FavoriteIconProps) {
+  const { isFavorite } = props;
+
+  if (!isFavorite) {
+    return (
+      <svg
+        width="8"
+        height="10"
+        viewBox="0 0 8 10"
+        fill="none"
+        className="h-3.5 w-3.5"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M5.93682 0.5H2.06282C1.63546 0.500094 1.22423 0.663195 0.912987 0.956045C0.601741 1.2489 0.413919 1.64944 0.387822 2.076L0.00182198 8.461C-0.012178 8.6905 0.0548218 8.9185 0.191822 9.104L0.242322 9.1665C0.575322 9.5485 1.15132 9.6165 1.56582 9.31L3.99982 7.5115L6.43382 9.31C6.58413 9.42115 6.76305 9.48708 6.94954 9.50006C7.13603 9.51303 7.32235 9.4725 7.4866 9.38323C7.65085 9.29397 7.78621 9.15967 7.87677 8.99613C7.96733 8.83258 8.00932 8.64659 7.99782 8.46L7.61232 2.0765C7.58622 1.64981 7.39835 1.24914 7.08701 0.956192C6.77567 0.663248 6.36431 0.500094 5.93682 0.5ZM5.93682 1.25C6.42732 1.25 6.83382 1.632 6.86382 2.122L7.24932 8.506C7.25216 8.55018 7.24229 8.59425 7.22089 8.63301C7.19949 8.67176 7.16745 8.70359 7.12854 8.72472C7.08964 8.74585 7.0455 8.75542 7.00134 8.75228C6.95718 8.74914 6.91484 8.73343 6.87932 8.707L4.27582 6.783C4.19591 6.72397 4.09917 6.69211 3.99982 6.69211C3.90047 6.69211 3.80373 6.72397 3.72382 6.783L1.11982 8.707C1.0843 8.73343 1.04196 8.74914 0.9978 8.75228C0.953639 8.75542 0.909502 8.74585 0.8706 8.72472C0.831697 8.70359 0.799653 8.67176 0.778252 8.63301C0.756851 8.59425 0.746986 8.55018 0.749822 8.506L1.13632 2.122C1.16632 1.632 1.57232 1.25 2.06282 1.25H5.93682Z"
+          fill="currentColor"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      width="8"
+      height="10"
+      viewBox="0 0 8 10"
+      className="h-3.5 w-3.5"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M5.93682 0.5H2.06282C1.63546 0.500094 1.22423 0.663195 0.912987 0.956045C0.601741 1.2489 0.413919 1.64944 0.387822 2.076L0.00182198 8.461C-0.012178 8.6905 0.0548218 8.9185 0.191822 9.104L0.242322 9.1665C0.575322 9.5485 1.15132 9.6165 1.56582 9.31L3.99982 7.5115L6.43382 9.31C6.58413 9.42115 6.76305 9.48708 6.94954 9.50006C7.13603 9.51303 7.32235 9.4725 7.4866 9.38323C7.65085 9.29397 7.78621 9.15967 7.87677 8.99613C7.96733 8.83258 8.00932 8.64659 7.99782 8.46L7.61232 2.0765C7.58622 1.64981 7.39835 1.24914 7.08701 0.956192C6.77567 0.663248 6.36431 0.500094 5.93682 0.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

src/components/FeaturedItems/FeaturedItem.astro

@@ -1,4 +1,6 @@
 ---
+import AstroIcon from '../AstroIcon.astro';
+import { MarkFavorite } from './MarkFavorite';
 export interface FeaturedItemType {
   isUpcoming?: boolean;
   isNew?: boolean;
@@ -20,16 +22,22 @@ const { isUpcoming = false, isNew = false, text, url } = Astro.props;
   ]}
   href={url}
 >
-  <span class='text-slate-400 relative z-20'>
+  <span class='relative z-20 text-slate-400'>
     {text}
   </span>
 
+  <MarkFavorite
+    resourceId={url.split('/').pop()!}
+    resourceType={url.includes('best-practices') ? 'best-practice' : 'roadmap'}
+    client:load
+  />
+
   {
     isNew && (
-      <span class='absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-purple-300 flex items-center'>
-        <span class='flex h-2 w-2 mr-1.5'>
-          <span class='animate-ping absolute inline-flex h-2 w-2 rounded-full bg-purple-400 opacity-75' />
-          <span class='relative inline-flex rounded-full h-2 w-2 bg-purple-500' />
+      <span class='absolute bottom-1.5 right-2 flex items-center rounded-br rounded-tl text-xs font-medium text-purple-300'>
+        <span class='mr-1.5 flex h-2 w-2'>
+          <span class='absolute inline-flex h-2 w-2 animate-ping rounded-full bg-purple-400 opacity-75' />
+          <span class='relative inline-flex h-2 w-2 rounded-full bg-purple-500' />
         </span>
         New
       </span>
@@ -38,14 +46,17 @@ const { isUpcoming = false, isNew = false, text, url } = Astro.props;
 
   {
     isUpcoming && (
-      <span class='absolute bottom-1.5 right-2 text-xs font-medium rounded-br rounded-tl text-slate-500 flex items-center'>
-        <span class='flex h-2 w-2 mr-1.5'>
-          <span class='animate-ping absolute inline-flex h-2 w-2 rounded-full bg-slate-500 opacity-75' />
-          <span class='relative inline-flex rounded-full h-2 w-2 bg-slate-600' />
+      <span class='absolute bottom-1.5 right-2 flex items-center rounded-br rounded-tl text-xs font-medium text-slate-500'>
+        <span class='mr-1.5 flex h-2 w-2'>
+          <span class='absolute inline-flex h-2 w-2 animate-ping rounded-full bg-slate-500 opacity-75' />
+          <span class='relative inline-flex h-2 w-2 rounded-full bg-slate-600' />
         </span>
         Upcoming
       </span>
     )
   }
-  <span data-progress class="z-10 bg-[#172a3a] absolute top-0 left-0 bottom-0 duration-300 transition-[width] w-0"></span>
+  <span
+    data-progress
+    class='absolute bottom-0 left-0 top-0 z-10 w-0 bg-[#172a3a] transition-[width] duration-300'
+  ></span>
 </a>

src/components/FeaturedItems/MarkFavorite.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useState } from 'preact/hooks';
+import { httpPatch } from '../../lib/http';
+import type { ResourceType } from '../../lib/resource-progress';
+import { isLoggedIn } from '../../lib/jwt';
+import { showLoginPopup } from '../../lib/popup';
+import { FavoriteIcon } from './FavoriteIcon';
+import { Spinner } from '../ReactIcons/Spinner';
+import { useToast } from '../../hooks/use-toast';
+
+type MarkFavoriteType = {
+  resourceType: ResourceType;
+  resourceId: string;
+  favorite?: boolean;
+  className?: string;
+};
+
+export function MarkFavorite({
+  resourceId,
+  resourceType,
+  favorite,
+  className,
+}: MarkFavoriteType) {
+  const localStorageKey = `${resourceType}-${resourceId}-favorite`;
+
+  const toast = useToast();
+  const [isLoading, setIsLoading] = useState(false);
+  const [isFavorite, setIsFavorite] = useState(
+    favorite ?? localStorage.getItem(localStorageKey) === '1'
+  );
+
+  async function toggleFavoriteHandler(e: Event) {
+    e.preventDefault();
+    if (!isLoggedIn()) {
+      showLoginPopup();
+      return;
+    }
+
+    if (isLoading) {
+      return;
+    }
+
+    setIsLoading(true);
+
+    const { error } = await httpPatch<{ status: 'ok' }>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-mark-favorite`,
+      {
+        resourceType,
+        resourceId,
+      }
+    );
+
+    if (error) {
+      setIsLoading(false);
+      toast.error('Failed to update favorite status');
+      return;
+    }
+
+    // Dispatching an event instead of setting the state because
+    // MarkFavorite component is used in the HeroSection as well
+    // as featured items section. We will let the custom event
+    // listener set the update `useEffect`
+    window.dispatchEvent(
+      new CustomEvent('mark-favorite', {
+        detail: {
+          resourceId,
+          resourceType,
+          isFavorite: !isFavorite,
+        },
+      })
+    );
+
+    window.dispatchEvent(new CustomEvent('refresh-favorites', {}));
+    setIsLoading(false);
+  }
+
+  useEffect(() => {
+    const listener = (e: Event) => {
+      const {
+        resourceId: id,
+        resourceType: type,
+        isFavorite: fav,
+      } = (e as CustomEvent).detail;
+      if (id === resourceId && type === resourceType) {
+        setIsFavorite(fav);
+        localStorage.setItem(localStorageKey, fav ? '1' : '0');
+      }
+    };
+
+    window.addEventListener('mark-favorite', listener);
+    return () => {
+      window.removeEventListener('mark-favorite', listener);
+    };
+  }, []);
+
+  return (
+    <button
+      onClick={toggleFavoriteHandler}
+      tabIndex={-1}
+      className={`${isFavorite ? '' : 'opacity-30 hover:opacity-100'} ${
+        className || 'absolute right-1.5 top-1.5 z-30 focus:outline-0'
+      }`}
+    >
+      {isLoading ? <Spinner /> : <FavoriteIcon isFavorite={isFavorite} />}
+    </button>
+  );
+}

src/components/Feedback/SubmitFeedbackPopup.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { useToast } from '../../hooks/use-toast';
+import { useTeamId } from '../../hooks/use-team-id';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { useKeydown } from '../../hooks/use-keydown';
+import { httpPost } from '../../lib/http';
+import { CheckIcon } from '../ReactIcons/CheckIcon';
+
+type SubmitFeedbackPopupProps = {
+  onClose: () => void;
+};
+
+export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
+  const { onClose } = props;
+
+  const toast = useToast();
+  const popupBodyEl = useRef<HTMLDivElement>(null);
+  const inputEl = useRef<HTMLTextAreaElement>(null);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [feedbackText, setFeedbackText] = useState('');
+  const [isSuccess, setIsSuccess] = useState(false);
+  const { teamId } = useTeamId();
+
+  useOutsideClick(popupBodyEl, () => {
+    onClose();
+  });
+
+  useKeydown('Escape', () => {
+    onClose();
+  });
+
+  useEffect(() => {
+    inputEl.current?.focus();
+  }, []);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    const { response, error } = await httpPost<{ status: 'ok' }>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-submit-team-feedback/${teamId}`,
+      {
+        feedback: feedbackText,
+      }
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    toast.success('Team feedback submitted successfully');
+    setIsSuccess(true);
+  };
+
+  const handleClosePopup = () => {
+    setIsLoading(false);
+    setError('');
+    setFeedbackText('');
+
+    onClose();
+  };
+
+  return (
+    <div class="fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+        <div
+          ref={popupBodyEl}
+          class="popup-body relative rounded-lg bg-white p-4 shadow"
+        >
+          {!isSuccess && (
+            <>
+              <h2 class="text-2xl font-semibold text-black">
+                Enter your feedback
+              </h2>
+              <form onSubmit={handleSubmit}>
+                <div className="my-4">
+                  <textarea
+                    ref={inputEl}
+                    name="submit-feedback"
+                    id="submit-feedback"
+                    className="mt-2 block min-h-[150px] w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+                    placeholder="Enter your feedback"
+                    required
+                    autoFocus
+                    value={feedbackText}
+                    onInput={(e) =>
+                      setFeedbackText((e.target as HTMLInputElement).value)
+                    }
+                  />
+                  {error && (
+                    <p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">
+                      {error}
+                    </p>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    disabled={isLoading}
+                    onClick={handleClosePopup}
+                    className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    disabled={isLoading}
+                    type="submit"
+                    className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-white disabled:opacity-40"
+                  >
+                    {isLoading ? 'Please wait ..' : 'Send'}
+                  </button>
+                </div>
+              </form>
+            </>
+          )}
+
+          {isSuccess && (
+            <div className="flex w-full flex-col items-center">
+              <CheckIcon additionalClasses="w-16 h-16 text-green-500" />
+              <h1 className="mt-4 text-xl font-semibold text-black sm:text-2xl">
+                Feedback Submitted
+              </h1>
+              <p className="text-center text-sm text-gray-500 sm:text-base">
+                Thank you for submitting your feedback.
+              </p>
+              <button
+                type="button"
+                onClick={handleClosePopup}
+                className="mt-8 w-full flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
+              >
+                Close
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Footer.astro

@@ -1,4 +1,5 @@
 ---
+import AstroIcon from './AstroIcon.astro';
 import Icon from './AstroIcon.astro';
 ---
 
@@ -24,10 +25,8 @@ import Icon from './AstroIcon.astro';
         href='/videos'>Videos</a
       >
       <a
-        target='_blank'
-        rel='noopener noreferrer nofollow'
         class='border-b border-b-gray-700 px-2 py-1.5 transition-colors hover:text-white sm:border-b-0 sm:px-0 sm:py-0'
-        href='https://cottonbureau.com/people/roadmapsh'>Store</a
+        href='/about'>FAQs</a
       >
       <a
         class='px-2 py-1.5 transition-colors hover:text-white sm:border-b-0 sm:px-0 sm:py-0'
@@ -64,11 +63,24 @@ import Icon from './AstroIcon.astro';
           <p>
             &copy; roadmap.sh
             <span class='mx-1.5'>&middot;</span>
-            <a href='/about' class='hover:text-white'>FAQs</a>
-            <span class='mx-1.5'>&middot;</span>
             <a href='/terms' class='hover:text-white'>Terms</a>
             <span class='mx-1.5'>&middot;</span>
             <a href='/privacy' class='hover:text-white'>Privacy</a>
+            <span class='mx-1.5'>&middot;</span>
+            <a
+              href='https://youtube.com/theroadmap?sub_confirmation=1'
+              target='_blank'
+              class='hover:text-white'
+            >
+              <AstroIcon icon='youtube' class='inline-block h-5 w-5' />
+            </a>
+            <a
+              href='https://twitter.com/roadmapsh'
+              target='_blank'
+              class='ml-2 hover:text-white'
+            >
+              <AstroIcon icon='twitter-fill' class='inline-block h-5 w-5 fill-current' />
+            </a>
           </p>
         </div>
       </div>

src/components/FrameRenderer/FrameRenderer.css

@@ -49,7 +49,8 @@ svg .done rect {
   fill: #cbcbcb !important;
 }
 
-svg .done text, svg .skipped text {
+svg .done text,
+svg .skipped text {
   text-decoration: line-through;
 }
 
@@ -58,7 +59,7 @@ svg .learning rect {
 }
 
 svg .skipped rect {
-  fill: #496b69!important;
+  fill: #496b69 !important;
 }
 
 svg .learning rect[fill='rgb(51,51,51)'] + text,
@@ -79,6 +80,21 @@ svg .clickable-group.done[data-group-id^='check:'] rect {
   user-select: none;
 }
 
+svg .removed rect {
+  fill: #fdfdfd !important;
+  stroke: #c4c4c4 !important;
+}
+
+svg .removed text {
+  fill: #9c9c9c !important;
+}
+
+svg .removed g,
+svg .removed circle,
+svg .removed path {
+  opacity: 0;
+}
+
 /************************************
     Aspect ratio implementation
   *************************************/
@@ -109,3 +125,14 @@ svg .clickable-group.done[data-group-id^='check:'] rect {
     height: 100%;
   }
 }
+
+#customized-roadmap #resource-svg-wrap g:not([class]),
+#customized-roadmap #resource-svg-wrap circle,
+#customized-roadmap #resource-svg-wrap path[stroke='#fff'],
+#customized-roadmap #resource-svg-wrap g[data-group-id$="-note"]{
+  display: none;
+}
+
+/*.clickable-group:hover {*/
+/*  cursor: url(/images/cursors/add.svg) 5 5, move;*/
+/*}*/

src/components/FrameRenderer/renderer.ts

@@ -2,13 +2,19 @@ import { wireframeJSONToSVG } from 'roadmap-renderer';
 import { httpPost } from '../../lib/http';
 import { isLoggedIn } from '../../lib/jwt';
 import {
+  refreshProgressCounters,
   renderResourceProgress,
+  renderTopicProgress,
+  ResourceProgressType,
   ResourceType,
+  updateResourceProgress,
 } from '../../lib/resource-progress';
+import { pageProgressMessage } from '../../stores/page';
+import { showLoginPopup } from '../../lib/popup';
 
 export class Renderer {
   resourceId: string;
-  resourceType: string;
+  resourceType: ResourceType | string;
   jsonUrl: string;
   loaderHTML: string | null;
 
@@ -28,8 +34,10 @@ export class Renderer {
     this.onDOMLoaded = this.onDOMLoaded.bind(this);
     this.jsonToSvg = this.jsonToSvg.bind(this);
     this.handleSvgClick = this.handleSvgClick.bind(this);
+    this.handleSvgRightClick = this.handleSvgRightClick.bind(this);
     this.prepareConfig = this.prepareConfig.bind(this);
     this.switchRoadmap = this.switchRoadmap.bind(this);
+    this.updateTopicStatus = this.updateTopicStatus.bind(this);
   }
 
   get loaderEl() {
@@ -161,6 +169,57 @@ export class Renderer {
     this.jsonToSvg(newJsonUrl)?.then(() => {});
   }
 
+  updateTopicStatus(topicId: string, newStatus: ResourceProgressType) {
+    if (!isLoggedIn()) {
+      showLoginPopup();
+      return;
+    }
+
+    pageProgressMessage.set('Updating progress');
+    updateResourceProgress(
+      {
+        resourceId: this.resourceId,
+        resourceType: this.resourceType as ResourceType,
+        topicId,
+      },
+      newStatus
+    )
+      .then(() => {
+        renderTopicProgress(topicId, newStatus);
+        refreshProgressCounters();
+      })
+      .catch((err) => {
+        alert('Something went wrong, please try again.');
+        console.error(err);
+      })
+      .finally(() => {
+        pageProgressMessage.set('');
+      });
+
+    return;
+  }
+
+  handleSvgRightClick(e: any) {
+    const targetGroup = e.target?.closest('g') || {};
+    const groupId = targetGroup.dataset ? targetGroup.dataset.groupId : '';
+    if (!groupId) {
+      return;
+    }
+
+    if (targetGroup.classList.contains('removed')) {
+      return;
+    }
+
+    e.preventDefault();
+
+    const isCurrentStatusDone = targetGroup.classList.contains('done');
+    const normalizedGroupId = groupId.replace(/^\d+-/, '');
+    this.updateTopicStatus(
+      normalizedGroupId,
+      !isCurrentStatusDone ? 'done' : 'pending'
+    );
+  }
+
   handleSvgClick(e: any) {
     const targetGroup = e.target?.closest('g') || {};
     const groupId = targetGroup.dataset ? targetGroup.dataset.groupId : '';
@@ -170,6 +229,10 @@ export class Renderer {
 
     e.stopImmediatePropagation();
 
+    if (targetGroup.classList.contains('removed')) {
+      return;
+    }
+
     if (/^ext_link/.test(groupId)) {
       const externalLink = groupId.replace('ext_link:', '');
 
@@ -209,6 +272,28 @@ export class Renderer {
     // Remove sorting prefix from groupId
     const normalizedGroupId = groupId.replace(/^\d+-/, '');
 
+    const isCurrentStatusLearning = targetGroup.classList.contains('learning');
+    const isCurrentStatusSkipped = targetGroup.classList.contains('skipped');
+
+    if (e.shiftKey) {
+      e.preventDefault();
+      this.updateTopicStatus(
+        normalizedGroupId,
+        !isCurrentStatusLearning ? 'learning' : 'pending'
+      );
+      return;
+    }
+
+    if (e.altKey) {
+      e.preventDefault();
+      this.updateTopicStatus(
+        normalizedGroupId,
+        !isCurrentStatusSkipped ? 'skipped' : 'pending'
+      );
+
+      return;
+    }
+
     window.dispatchEvent(
       new CustomEvent(`${this.resourceType}.topic.click`, {
         detail: {
@@ -223,7 +308,7 @@ export class Renderer {
   init() {
     window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
     window.addEventListener('click', this.handleSvgClick);
-    // window.addEventListener('contextmenu', this.handleSvgClick);
+    window.addEventListener('contextmenu', this.handleSvgRightClick);
   }
 }
 

src/components/Friends/EmptyFriends.tsx

@@ -0,0 +1,54 @@
+import UserPlusIcon from '../../icons/user-plus.svg';
+import CopyIcon from '../../icons/copy.svg';
+import { useCopyText } from '../../hooks/use-copy-text';
+
+type EmptyFriendsProps = {
+  befriendUrl: string;
+};
+
+export function EmptyFriends(props: EmptyFriendsProps) {
+  const { befriendUrl } = props;
+  const { isCopied, copyText } = useCopyText();
+
+  return (
+    <div class="rounded-md">
+      <div class="mx-auto flex flex-col items-center p-7 text-center">
+        <img
+          alt="no friends"
+          src={UserPlusIcon}
+          class="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]"
+        />
+        <h2 class="text-lg font-bold sm:text-xl">Invite your Friends</h2>
+        <p className="mb-4 mt-1 max-w-[400px] text-sm leading-relaxed text-gray-500">
+          Share the unique link below with your friends to track their skills and progress.
+        </p>
+
+        <div class="flex w-full max-w-[352px] items-center justify-center gap-2 rounded-lg border-2 p-1 text-sm">
+          <input
+            onClick={(e) => {
+              e.currentTarget.select();
+              copyText(befriendUrl);
+            }}
+            type="text"
+            value={befriendUrl}
+            class="w-full border-none bg-transparent px-1.5 outline-none"
+            readonly
+          />
+          <button
+            class={`flex items-center justify-center gap-1 rounded-md border-0 p-2 px-4 text-sm text-black ${
+              isCopied
+                ? 'bg-green-300 hover:bg-green-300'
+                : 'bg-gray-200 hover:bg-gray-300'
+            }`}
+            onClick={() => {
+              copyText(befriendUrl);
+            }}
+          >
+            <img src={CopyIcon} className="h-4 w-4" alt="Invite Friends" />
+            {isCopied ? 'Copied' : 'Copy'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Friends/FriendProgressItem.tsx

@@ -0,0 +1,326 @@
+import { useState } from 'preact/hooks';
+import type { ListFriendsResponse } from './FriendsPage';
+import { DeleteUserIcon } from '../ReactIcons/DeleteUserIcon';
+import { pageProgressMessage } from '../../stores/page';
+import { httpDelete, httpPost } from '../../lib/http';
+import { useToast } from '../../hooks/use-toast';
+import { TrashIcon } from '../ReactIcons/TrashIcon';
+import { AddedUserIcon } from '../ReactIcons/AddedUserIcon';
+import { AddUserIcon } from '../ReactIcons/AddUserIcon';
+
+type FriendProgressItemProps = {
+  friend: ListFriendsResponse[0];
+  onShowResourceProgress: (resourceId: string) => void;
+  onReload: () => void;
+};
+
+export function FriendProgressItem(props: FriendProgressItemProps) {
+  const { friend, onShowResourceProgress, onReload } = props;
+  const toast = useToast();
+  const [isConfirming, setIsConfirming] =
+    useState<ListFriendsResponse[0]['status']>();
+
+  async function deleteFriend(userId: string, successMessage: string) {
+    pageProgressMessage.set('Please wait...');
+    const { response, error } = await httpDelete(
+      `${import.meta.env.PUBLIC_API_URL}/v1-delete-friend/${userId}`,
+      {}
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Something went wrong');
+      return;
+    }
+
+    toast.success(successMessage);
+    onReload();
+  }
+
+  async function addFriend(userId: string, successMessage: string) {
+    pageProgressMessage.set('Please wait...');
+    const { response, error } = await httpPost(
+      `${import.meta.env.PUBLIC_API_URL}/v1-add-friend/${userId}`,
+      {}
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Something went wrong');
+      return;
+    }
+
+    toast.success(successMessage);
+    onReload();
+  }
+
+  const roadmaps = (friend.roadmaps || []).sort((a, b) => {
+    return b.done - a.done;
+  });
+
+  const [showAll, setShowAll] = useState(false);
+  const status = friend.status;
+
+  return (
+    <>
+      <div
+        className={`flex h-full min-h-[270px] flex-col overflow-hidden rounded-md border`}
+        key={friend.userId}
+      >
+        <div className={`relative flex items-center gap-3 border-b p-3`}>
+          <img
+            src={
+              friend.avatar
+                ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${friend.avatar}`
+                : '/images/default-avatar.png'
+            }
+            alt={friend.name || ''}
+            className="h-8 w-8 rounded-full"
+          />
+          <div className="inline-grid w-full">
+            <h3 className="truncate font-medium">{friend.name}</h3>
+            <p className="truncate text-sm text-gray-500">{friend.email}</p>
+          </div>
+        </div>
+        {friend.status === 'accepted' && (
+          <>
+            <div className="relative flex grow flex-col space-y-2 p-3">
+              {(showAll ? roadmaps : roadmaps.slice(0, 4)).map((progress) => {
+                return (
+                  <button
+                    onClick={() => onShowResourceProgress(progress.resourceId)}
+                    className="group relative overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none"
+                    key={progress.resourceId}
+                  >
+                    <span className="relative z-10 flex items-center justify-between text-sm">
+                      <span className="inline-grid">
+                        <span className={'truncate'}>{progress.title}</span>
+                      </span>
+                      <span className="ml-1.5 shrink-0 text-xs text-gray-400">
+                        {progress.done} / {progress.total}
+                      </span>
+                    </span>
+                    <span
+                      className="absolute inset-0 bg-gray-100 group-hover:bg-gray-200"
+                      style={{
+                        width: `${(progress.done / progress.total) * 100}%`,
+                      }}
+                    />
+                  </button>
+                );
+              })}
+
+              {roadmaps.length > 4 && !showAll && (
+                <button
+                  onClick={() => setShowAll(true)}
+                  className={'text-xs text-gray-400 underline'}
+                >
+                  + {roadmaps.length - 4} more
+                </button>
+              )}
+
+              {showAll && (
+                <button
+                  onClick={() => setShowAll(false)}
+                  className={'text-sm text-gray-400 underline'}
+                >
+                  - Show less
+                </button>
+              )}
+
+              {roadmaps.length === 0 && (
+                <div className="text-sm text-gray-500">No progress</div>
+              )}
+            </div>
+            <>
+              {isConfirming !== 'accepted' && (
+                <button
+                  className="flex w-full items-center justify-center border-t py-2 text-sm font-medium text-red-700 hover:bg-red-50/50 hover:text-red-500"
+                  onClick={() => {
+                    setIsConfirming('accepted');
+                  }}
+                >
+                  <TrashIcon className="mr-1 h-4 w-4" />
+                  Remove Friend
+                </button>
+              )}
+
+              {isConfirming === 'accepted' && (
+                <span className="flex w-full items-center justify-center border-t py-2 text-sm text-red-700">
+                  Are you sure?{' '}
+                  <button
+                    className="ml-2 font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
+                    onClick={() => {
+                      deleteFriend(friend.userId, 'Friend removed').finally(
+                        () => {
+                          pageProgressMessage.set('');
+                        }
+                      );
+                    }}
+                  >
+                    Yes
+                  </button>{' '}
+                  <button
+                    className="ml-2 font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
+                    onClick={() => {
+                      setIsConfirming(undefined);
+                    }}
+                  >
+                    No
+                  </button>
+                </span>
+              )}
+            </>
+          </>
+        )}
+
+        {friend.status === 'rejected' && (
+          <>
+            <div
+              className={'flex w-full flex-grow items-center justify-center'}
+            >
+              <span class=" flex flex-col items-center text-red-500">
+                <DeleteUserIcon additionalClasses="mr-2 h-8 w-8 mb-1" />
+                Request Rejected
+              </span>
+            </div>
+            <span class="flex cursor-default items-center justify-center border-t py-2 text-center text-sm">
+              Changed your mind?{' '}
+              <button
+                className="ml-2 font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
+                onClick={() => {
+                  addFriend(friend.userId, 'Friend request accepted').finally(
+                    () => {
+                      pageProgressMessage.set('');
+                    }
+                  );
+                }}
+              >
+                Accept
+              </button>
+            </span>
+          </>
+        )}
+
+        {friend.status === 'got_rejected' && (
+          <>
+            <div
+              className={'flex w-full flex-grow items-center justify-center'}
+            >
+              <span class=" flex flex-col items-center text-sm text-red-500">
+                <DeleteUserIcon additionalClasses="mr-2 h-8 w-8 mb-1" />
+                Request Rejected
+              </span>
+            </div>
+            <span class="flex cursor-default items-center justify-center border-t py-2.5 text-center text-sm">
+              <button
+                className="ml-2 flex items-center font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
+                onClick={() => {
+                  deleteFriend(friend.userId, 'Friend request removed').finally(
+                    () => {
+                      pageProgressMessage.set('');
+                    }
+                  );
+                }}
+              >
+                <TrashIcon className="mr-1 h-4 w-4" />
+                Delete Request
+              </button>
+            </span>
+          </>
+        )}
+
+        {friend.status === 'sent' && (
+          <>
+            <div
+              className={'flex w-full flex-grow items-center justify-center'}
+            >
+              <span class=" flex flex-col items-center text-green-500">
+                <AddedUserIcon additionalClasses="mr-2 h-8 w-8 mb-1" />
+                Request Sent
+              </span>
+            </div>
+            <>
+              {isConfirming !== 'sent' && (
+                <button
+                  className="flex w-full items-center justify-center border-t py-2 text-sm font-medium text-red-700 hover:bg-red-50/50 hover:text-red-500"
+                  onClick={() => {
+                    setIsConfirming('sent');
+                  }}
+                >
+                  <TrashIcon className="mr-1 h-4 w-4" />
+                  Withdraw Request
+                </button>
+              )}
+
+              {isConfirming === 'sent' && (
+                <span className="flex w-full items-center justify-center border-t py-2 text-sm text-red-700">
+                  Are you sure?{' '}
+                  <button
+                    className="ml-2 font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
+                    onClick={() => {
+                      deleteFriend(
+                        friend.userId,
+                        'Friend request withdrawn'
+                      ).finally(() => {
+                        pageProgressMessage.set('');
+                      });
+                    }}
+                  >
+                    Yes
+                  </button>{' '}
+                  <button
+                    className="ml-2 font-medium text-red-700 underline underline-offset-2 hover:text-red-500"
+                    onClick={() => {
+                      setIsConfirming(undefined);
+                    }}
+                  >
+                    No
+                  </button>
+                </span>
+              )}
+            </>
+          </>
+        )}
+
+        {friend.status === 'received' && (
+          <>
+            <div
+              className={
+                'flex w-full flex-grow flex-col items-center justify-center px-4'
+              }
+            >
+              <AddUserIcon additionalClasses="mr-2 h-8 w-8 mb-1 text-green-500" />
+              <span className="mb-3 text-green-600">Request Received</span>
+
+              <button
+                onClick={() => {
+                  addFriend(friend.userId, 'Friend request accepted').finally(
+                    () => {
+                      pageProgressMessage.set('');
+                    }
+                  );
+                }}
+                className="mb-1 block w-full max-w-[150px] rounded-md bg-black py-1.5 text-sm text-white"
+              >
+                Accept
+              </button>
+
+              <button
+                onClick={() => {
+                  deleteFriend(
+                    friend.userId,
+                    'Friend request rejected'
+                  ).finally(() => {
+                    pageProgressMessage.set('');
+                  });
+                }}
+                className="block w-full max-w-[150px] rounded-md border border-red-500 py-1 text-sm text-red-500"
+              >
+                Reject
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+    </>
+  );
+}

src/components/Friends/FriendsPage.tsx

@@ -0,0 +1,215 @@
+import { useEffect, useState } from 'preact/hooks';
+import { pageProgressMessage } from '../../stores/page';
+import { useAuth } from '../../hooks/use-auth';
+import { AddUserIcon } from '../ReactIcons/AddUserIcon';
+import { httpGet } from '../../lib/http';
+import type { FriendshipStatus } from '../Befriend';
+import { useToast } from '../../hooks/use-toast';
+import { EmptyFriends } from './EmptyFriends';
+import { FriendProgressItem } from './FriendProgressItem';
+import UserIcon from '../../icons/user.svg';
+import { UserProgressModal } from '../UserProgress/UserProgressModal';
+import { InviteFriendPopup } from './InviteFriendPopup';
+
+type FriendResourceProgress = {
+  updatedAt: string;
+  title: string;
+  resourceId: string;
+  resourceType: string;
+  learning: number;
+  skipped: number;
+  done: number;
+  total: number;
+};
+
+export type ListFriendsResponse = {
+  userId: string;
+  name: string;
+  email: string;
+  avatar: string;
+  status: FriendshipStatus;
+  roadmaps: FriendResourceProgress[];
+  bestPractices: FriendResourceProgress[];
+}[];
+
+type GroupingType = {
+  label: string;
+  value: 'active' | 'requests' | 'sent';
+  statuses: FriendshipStatus[];
+};
+
+const groupingTypes: GroupingType[] = [
+  { label: 'Active', value: 'active', statuses: ['accepted'] },
+  { label: 'Requests', value: 'requests', statuses: ['received', 'rejected'] },
+  { label: 'Sent', value: 'sent', statuses: ['sent', 'got_rejected'] },
+];
+
+export function FriendsPage() {
+  const toast = useToast();
+
+  const [showInviteFriendPopup, setShowInviteFriendPopup] = useState(false);
+
+  const [showFriendProgress, setShowFriendProgress] = useState<{
+    resourceId: string;
+    friend: ListFriendsResponse[0];
+  }>();
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [friends, setFriends] = useState<ListFriendsResponse>([]);
+  const [selectedGrouping, setSelectedGrouping] =
+    useState<GroupingType['value']>('active');
+
+  async function loadFriends() {
+    const { response, error } = await httpGet<ListFriendsResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-list-friends`
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Something went wrong');
+      return;
+    }
+
+    setFriends(response);
+  }
+
+  useEffect(() => {
+    loadFriends().finally(() => {
+      pageProgressMessage.set('');
+      setIsLoading(false);
+    });
+  }, []);
+
+  const user = useAuth();
+  const baseUrl = import.meta.env.DEV
+    ? 'http://localhost:3000'
+    : 'https://roadmap.sh';
+  const befriendUrl = `${baseUrl}/befriend?u=${user?.id}`;
+
+  const selectedGroupingType = groupingTypes.find(
+    (grouping) => grouping.value === selectedGrouping
+  );
+
+  const filteredFriends = friends.filter((friend) =>
+    selectedGroupingType?.statuses.includes(friend.status)
+  );
+
+  const receivedRequests = friends.filter(
+    (friend) => friend.status === 'received'
+  );
+
+  if (isLoading) {
+    return null;
+  }
+
+  if (!friends?.length) {
+    return <EmptyFriends befriendUrl={befriendUrl} />;
+  }
+
+  return (
+    <div>
+      {showInviteFriendPopup && (
+        <InviteFriendPopup
+          befriendUrl={befriendUrl}
+          onClose={() => setShowInviteFriendPopup(false)}
+        />
+      )}
+
+      {showFriendProgress && (
+        <UserProgressModal
+          userId={showFriendProgress.friend.userId}
+          resourceId={showFriendProgress.resourceId}
+          resourceType={'roadmap'}
+          onClose={() => setShowFriendProgress(undefined)}
+        />
+      )}
+
+      <div className="mb-4 flex flex-col items-stretch justify-between gap-2 sm:flex-row sm:items-center sm:gap-0">
+        <div className="flex items-center gap-2">
+          {groupingTypes.map((grouping) => {
+            let requestCount = 0;
+            if (grouping.value === 'requests') {
+              requestCount = receivedRequests.length;
+            }
+
+            return (
+              <button
+                className={`relative flex items-center justify-center rounded-md border p-1 px-3 text-sm ${
+                  selectedGrouping === grouping.value
+                    ? ' border-gray-400 bg-gray-200 '
+                    : ''
+                } w-full sm:w-auto`}
+                onClick={() => setSelectedGrouping(grouping.value)}
+              >
+                {grouping.label}
+                {requestCount > 0 && (
+                  <span className="ml-1.5 inline-flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white">
+                    {requestCount}
+                  </span>
+                )}
+              </button>
+            );
+          })}
+        </div>
+        <button
+          onClick={() => {
+            setShowInviteFriendPopup(true);
+          }}
+          class="flex items-center justify-center gap-1.5 rounded-md border border-gray-400 bg-gray-50 p-1 px-2 text-sm hover:border-gray-500 hover:bg-gray-100"
+        >
+          <AddUserIcon additionalClasses="w-4 h-4" />
+          Invite Friends
+        </button>
+      </div>
+
+      {filteredFriends.length > 0 && (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {filteredFriends.map((friend) => (
+            <FriendProgressItem
+              friend={friend}
+              onShowResourceProgress={(resourceId) => {
+                setShowFriendProgress({
+                  resourceId,
+                  friend,
+                });
+              }}
+              key={friend.userId}
+              onReload={() => {
+                pageProgressMessage.set('Reloading friends ..');
+                loadFriends().finally(() => {
+                  pageProgressMessage.set('');
+                });
+              }}
+            />
+          ))}
+        </div>
+      )}
+
+      {filteredFriends.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-12">
+          <img
+            src={UserIcon}
+            alt="Empty Friends"
+            className="mb-3 w-12 opacity-20"
+          />
+          <h2 className="text-lg font-semibold">
+            {selectedGrouping === 'active' && 'No friends yet'}
+            {selectedGrouping === 'sent' && 'No requests sent'}
+            {selectedGrouping === 'requests' && 'No requests received'}
+          </h2>
+          <p className="text-sm text-gray-500">
+            Invite your friends to join you on Roadmap
+          </p>
+          <button
+            onClick={() => {
+              setShowInviteFriendPopup(true);
+            }}
+            className="mt-4 flex items-center justify-center gap-1.5 rounded-md border border-gray-400 bg-gray-50 p-1 px-2 text-sm hover:border-gray-500 hover:bg-gray-100"
+          >
+            <AddUserIcon additionalClasses="w-4 h-4" />
+            Invite Friends
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Friends/InviteFriendPopup.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef } from 'preact/hooks';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import CopyIcon from '../../icons/copy.svg';
+import { useCopyText } from '../../hooks/use-copy-text';
+
+type InviteFriendPopupProps = {
+  befriendUrl: string;
+  onClose: () => void;
+};
+
+export function InviteFriendPopup(props: InviteFriendPopupProps) {
+  const { onClose, befriendUrl } = props;
+
+  const { isCopied, copyText } = useCopyText();
+
+  const popupBodyRef = useRef<HTMLDivElement>(null);
+
+  const handleClosePopup = () => {
+    onClose();
+  };
+
+  useOutsideClick(popupBodyRef, handleClosePopup);
+
+  return (
+    <div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+        <div
+          ref={popupBodyRef}
+          class="popup-body relative rounded-lg bg-white p-4 shadow"
+        >
+          <h3 class="mb-1.5 text-xl font-medium sm:text-2xl">Invite URL</h3>
+          <p className="mb-3 hidden text-sm leading-none text-gray-400 sm:block">
+            Share the link below with your friends to invite them.
+          </p>
+
+          <div className="mt-4 flex flex-col gap-2 sm:mt-4">
+            <input
+              readOnly={true}
+              className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+              value={befriendUrl}
+              onClick={(e) => {
+                e?.target?.select();
+                copyText(befriendUrl);
+              }}
+            />
+            <button
+              class={`flex items-center justify-center gap-1 rounded-md border-0 px-3 py-2.5 text-sm text-black ${
+                isCopied
+                  ? 'bg-green-300 hover:bg-green-300'
+                  : 'bg-gray-200 hover:bg-gray-300'
+              }`}
+              onClick={() => {
+                copyText(befriendUrl);
+              }}
+            >
+              <img src={CopyIcon} className="h-4 w-4" alt="Invite Friends" />
+              {isCopied ? 'Copied' : 'Copy URL'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Friends/SidebarFriendsCounter.tsx

@@ -0,0 +1,46 @@
+import { httpGet } from '../../lib/http';
+import type { TeamListResponse } from '../TeamDropdown/TeamDropdown';
+import { useEffect, useState } from 'preact/hooks';
+
+type GetFriendCountsResponse = {
+  sentCount: number;
+  acceptedCount: number;
+  receivedCount: number;
+  rejectedCount: number;
+  gotRejectedCount: number;
+};
+
+export function SidebarFriendsCounter() {
+  const [friendCounts, setFriendCounts] = useState<GetFriendCountsResponse>();
+  async function getFriendCounts() {
+    const { response, error } = await httpGet<GetFriendCountsResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-friend-counts`
+    );
+
+    if (error || !response) {
+      return;
+    }
+
+    setFriendCounts(response);
+  }
+
+  useEffect(() => {
+    getFriendCounts().finally(() => null);
+  }, []);
+
+  const pendingCount = friendCounts?.receivedCount || 0;
+  if (!pendingCount) {
+    return (
+      <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>
+    );
+  }
+
+  return (
+    <span class="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs font-medium text-white">
+      {pendingCount}
+    </span>
+  );
+}

src/components/HeroSection/EmptyProgress.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon } from './CheckIcon';
+import { CheckIcon } from '../ReactIcons/CheckIcon';
 
 type EmptyProgressProps = {
     title?: string;

src/components/HeroSection/FavoriteRoadmaps.tsx

@@ -7,6 +7,7 @@ export type UserProgressResponse = {
   resourceId: string;
   resourceType: 'roadmap' | 'best-practice';
   resourceTitle: string;
+  isFavorite: boolean;
   done: number;
   learning: number;
   skipped: number;
@@ -25,6 +26,16 @@ function renderProgress(progressList: UserProgressResponse) {
       return;
     }
 
+    window.dispatchEvent(
+      new CustomEvent('mark-favorite', {
+        detail: {
+          resourceId: progress.resourceId,
+          resourceType: progress.resourceType,
+          isFavorite: progress.isFavorite,
+        },
+      })
+    );
+
     const totalDone = progress.done + progress.skipped;
     const percentageDone = (totalDone / progress.total) * 100;
 
@@ -61,6 +72,7 @@ export function FavoriteRoadmaps() {
 
   async function loadProgress() {
     setIsLoading(true);
+
     const { response: progressList, error } =
       await httpGet<UserProgressResponse>(
         `${import.meta.env.PUBLIC_API_URL}/v1-get-user-all-progress`
@@ -84,6 +96,11 @@ export function FavoriteRoadmaps() {
     });
   }, []);
 
+  useEffect(() => {
+    window.addEventListener('refresh-favorites', loadProgress);
+    return () => window.removeEventListener('refresh-favorites', loadProgress);
+  }, []);
+
   if (isPreparing) {
     return null;
   }
@@ -97,10 +114,9 @@ export function FavoriteRoadmaps() {
       }`}
     >
       <div className="container min-h-full">
-        {isLoading && <EmptyProgress title="Loading progress .." />}
         {!isLoading && progress.length == 0 && <EmptyProgress />}
-        {!isLoading && progress.length > 0 && (
-          <ProgressList progress={progress} />
+        {progress.length > 0 && (
+          <ProgressList progress={progress} isLoading={isLoading} />
         )}
       </div>
     </div>

src/components/HeroSection/ProgressList.tsx

@@ -1,22 +1,31 @@
 import type { UserProgressResponse } from './FavoriteRoadmaps';
-import { CheckIcon } from './CheckIcon';
+import { CheckIcon } from '../ReactIcons/CheckIcon';
+import { MarkFavorite } from '../FeaturedItems/MarkFavorite';
+import { Spinner } from '../ReactIcons/Spinner';
 
 type ProgressListProps = {
   progress: UserProgressResponse;
+  isLoading?: boolean;
 };
 
 export function ProgressList(props: ProgressListProps) {
-  const { progress } = props;
+  const { progress, isLoading = false } = props;
 
   return (
-    <div className="relative pt-4 sm:pt-7 pb-12">
+    <div className="relative pb-12 pt-4 sm:pt-7">
       <p className="mb-4 flex items-center text-sm text-gray-400">
-        <CheckIcon additionalClasses={'mr-1.5 w-[14px] h-[14px]'} />
-        <span className='hidden sm:inline'>Your progress and favorite roadmaps.</span>
-        <span className='inline sm:hidden'>Your progress and favorite roadmaps.</span>
+        {!isLoading && (
+          <CheckIcon additionalClasses={'mr-1.5 w-[14px] h-[14px]'} />
+        )}
+        {isLoading && (
+          <span className="mr-1.5">
+            <Spinner />
+          </span>
+        )}
+        Your progress and favorite roadmaps.
       </p>
 
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3">
         {progress.map((resource) => {
           const url =
             resource.resourceType === 'roadmap'
@@ -28,15 +37,21 @@ export function ProgressList(props: ProgressListProps) {
 
           return (
             <a
+              key={resource.resourceId}
               href={url}
-              className="relative flex flex-col rounded-md border border-slate-800 bg-slate-900 p-3 text-sm text-slate-400 hover:border-slate-600 hover:text-slate-300 overflow-hidden"
+              className="relative flex flex-col overflow-hidden rounded-md border border-slate-800 bg-slate-900 p-3 text-sm text-slate-400 hover:border-slate-600 hover:text-slate-300"
             >
-              <span className='relative z-20'>{resource.resourceTitle}</span>
+              <span className="relative z-20">{resource.resourceTitle}</span>
 
               <span
                 class="absolute bottom-0 left-0 top-0 z-10 bg-[#172a3a]"
                 style={{ width: `${percentageDone}%` }}
               ></span>
+              <MarkFavorite
+                resourceId={resource.resourceId}
+                resourceType={resource.resourceType}
+                favorite={resource.isFavorite}
+              />
             </a>
           );
         })}

src/components/Navigation/AccountDropdown.astro

@@ -18,7 +18,7 @@ import Icon from '../AstroIcon.astro';
   </button>
 
   <div
-    class='absolute right-0 z-10 mt-2 hidden w-48 rounded-md bg-slate-800 py-1 shadow-xl'
+    class='absolute right-0 z-50 mt-2 hidden w-48 rounded-md bg-slate-800 py-1 shadow-xl'
     data-account-dropdown
   >
     <ul>
@@ -30,6 +30,22 @@ import Icon from '../AstroIcon.astro';
           Profile
         </a>
       </li>
+      <li class='px-1'>
+        <a
+          href='/account/friends'
+          class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
+        >
+          Friends
+        </a>
+      </li>
+      <li class='px-1'>
+        <a
+          href='/team'
+          class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
+        >
+          Teams
+        </a>
+      </li>
       <li class='px-1'>
         <button
           class='block w-full rounded px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700'

src/components/Navigation/navigation.ts

@@ -1,8 +1,15 @@
 import Cookies from 'js-cookie';
-import { TOKEN_COOKIE_NAME } from "../../lib/jwt";
+import { TOKEN_COOKIE_NAME } from '../../lib/jwt';
 
 export function logout() {
   Cookies.remove(TOKEN_COOKIE_NAME);
+
+  // @FIXME: fix the domain name in the cookie created by the API
+  Cookies.remove(TOKEN_COOKIE_NAME, {
+    path: '/',
+    domain: 'api.roadmap.sh',
+  });
+
   // Reloading will automatically redirect the user if required
   window.location.reload();
 }
@@ -17,6 +24,7 @@ function bindEvents() {
 
     // If the user clicks on the logout button, remove the token cookie
     if (dataset.logoutButton !== undefined) {
+      e.preventDefault();
       logout();
     } else if (dataset.showMobileNav !== undefined) {
       document.querySelector('[data-mobile-nav]')?.classList.remove('hidden');
@@ -35,10 +43,10 @@ function bindEvents() {
     });
 
   document
-      .querySelector('[data-command-menu]')
-      ?.addEventListener('click', () => {
-        window.dispatchEvent(new CustomEvent('command.k'));
-      });
+    .querySelector('[data-command-menu]')
+    ?.addEventListener('click', () => {
+      window.dispatchEvent(new CustomEvent('command.k'));
+    });
 }
 
 bindEvents();

src/components/Notification/NotificationPage.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'preact/hooks';
+import { httpGet, httpPatch, httpPost } from '../../lib/http';
+import { pageProgressMessage } from '../../stores/page';
+import type { TeamMemberDocument } from '../TeamMembers/TeamMembersPage';
+import XIcon from '../../icons/close-dark.svg';
+import AcceptIcon from '../../icons/accept.svg';
+import { useToast } from '../../hooks/use-toast';
+
+interface NotificationList extends TeamMemberDocument {
+  name: string;
+}
+
+export function NotificationPage() {
+  const toast = useToast();
+  const [isLoading, setIsLoading] = useState(false);
+  const [notifications, setNotifications] = useState<NotificationList[]>([]);
+  const [error, setError] = useState('');
+
+  const lostNotifications = async () => {
+    const { error, response } = await httpGet<NotificationList[]>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-invitation-list`
+    );
+    if (error || !response) {
+      toast.error(error?.message || 'Something went wrong');
+      return;
+    }
+
+    setNotifications(response);
+  };
+
+  async function respondInvitation(status: 'accept' | 'reject', inviteId: string) {
+    setIsLoading(true);
+    setError('');
+    const { response, error } = await httpPatch<{ teamId: string }>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-respond-invite/${inviteId}`, {
+      status
+    });
+    if (error || !response) {
+      setError(error?.message || 'Something went wrong')
+      setIsLoading(false)
+      return;
+    }
+
+    if (status === 'accept') {
+      window.location.href = `/team/progress?t=${response.teamId}`;
+    } else {
+      window.dispatchEvent(new CustomEvent('refresh-notification', {
+        detail: {
+          count: notifications.length - 1
+        }
+      }));
+      setNotifications(notifications.filter((notification) => notification._id !== inviteId));
+      setIsLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    lostNotifications().finally(() => {
+      pageProgressMessage.set('');
+    });
+  }, []);
+
+  return (
+    <div>
+      <div class="mb-8 hidden md:block">
+        <h2 className="text-3xl font-bold sm:text-4xl">Notification</h2>
+        <p className="mt-2 text-gray-400">Manage your notifications</p>
+      </div>
+      {
+        notifications.length === 0 && (
+          <div className="flex items-center justify-center mt-6">
+            <p className="text-gray-400">
+              No notifications, you can <a href="/team/new" className="text-blue-500 underline hover:no-underline">create a team</a> and invite your friends to join.
+            </p>
+          </div>
+        )
+      }
+      <div className="space-y-4">
+        {notifications.map((notification) => (
+          <div className="flex items-center justify-between rounded-md border p-2">
+            <div className="flex items-center space-x-4">
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-medium text-gray-900">
+                  {notification.name}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center space-x-2">
+              <button type="button"
+                disabled={isLoading}
+                className="inline-flex border p-1 rounded hover:bg-gray-50 disabled:opacity-75"
+                onClick={() => respondInvitation('accept', notification?._id!)}
+              >
+                <img src={AcceptIcon} className="h-4 w-4" />
+              </button>
+              <button type="button"
+                disabled={isLoading}
+                className="inline-flex border p-1 rounded hover:bg-gray-50 disabled:opacity-75"
+                onClick={() => respondInvitation('reject', notification?._id!)}
+              >
+                <img src={XIcon} className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/PageSponsor.tsx

@@ -36,7 +36,8 @@ export function PageSponsor(props: PageSponsorProps) {
       currentPath === '/roadmaps' ||
       currentPath.startsWith('/guides') ||
       currentPath.startsWith('/videos') ||
-      currentPath.startsWith('/account')
+      currentPath.startsWith('/account') ||
+      currentPath.startsWith('/team')
     ) {
       return;
     }

src/components/Popup/popup.js

@@ -19,6 +19,7 @@ export class Popup {
       return;
     }
 
+    e.preventDefault();
     popupEl.classList.remove('hidden');
     popupEl.classList.add('flex');
     const focusEl = popupEl.querySelector('[autofocus]');

src/components/ProgressHelpPopup.astro

@@ -0,0 +1,47 @@
+---
+import AstroIcon from './AstroIcon.astro';
+import Popup from './Popup/Popup.astro';
+---
+
+<Popup id='progress-help' title='' subtitle=''>
+  <div class='-mt-2.5'>
+    <h2 class='mb-3 text-2xl font-semibold leading-5 text-gray-900'>
+      Track your Progress
+    </h2>
+    <p class='text-sm leading-4 text-gray-600'>
+      Login and use one of the options listed below.
+    </p>
+
+    <div class='mt-4 flex flex-col gap-1.5'>
+      <div class='rounded-md border px-3 py-3 text-gray-500'>
+        <span class='mb-1.5 block text-xs font-medium uppercase text-green-600'
+          >Option 1</span
+        >
+        <p class='text-sm'>
+          Click the roadmap topics and use <span class='underline'
+            >Update Progress</span
+          > dropdown to update your progress.
+        </p>
+      </div>
+
+      <div class='rounded-md border border-yellow-300 bg-yellow-50 px-3 py-3 text-gray-500'>
+        <span class='mb-1.5 block text-xs font-medium uppercase text-green-600'
+          >Option 2</span
+        >
+        <p class='text-sm'>Use the keyboard shortcuts listed below.</p>
+
+        <ul class="flex flex-col gap-1 mt-3 mb-1.5">
+          <li class='text-sm leading-loose'>
+            <kbd class="px-2 py-1.5 text-xs text-white bg-gray-900 rounded-md">Right Mouse Click</kbd> to mark as Done.
+          </li>
+          <li class='text-sm leading-loose'>
+            <kbd class="px-2 py-1.5 text-xs text-white bg-gray-900 rounded-md">Shift</kbd> + <kbd class="px-2 py-1.5 text-xs text-white bg-gray-900 rounded-md">Click</kbd> to mark as in progress.
+          </li>
+          <li class='text-sm leading-loose'>
+            <kbd class="px-2 py-1.5 text-xs text-white bg-gray-900 rounded-md">Option / Alt</kbd> + <kbd class="px-2 py-1.5 text-xs text-white bg-gray-900 rounded-md">Click</kbd> to mark as skipped.
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</Popup>

src/components/ReactIcons/AddUserIcon.tsx

@@ -0,0 +1,27 @@
+type CheckIconProps = {
+  additionalClasses?: string;
+};
+
+export function AddUserIcon(props: CheckIconProps) {
+  const { additionalClasses = 'mr-2 w-[20px] h-[20px]' } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className={`relative ${additionalClasses}`}
+    >
+      <path d="M14 19a6 6 0 0 0-12 0" />
+      <circle cx="8" cy="9" r="4" />
+      <line x1="19" x2="19" y1="8" y2="14" />
+      <line x1="22" x2="16" y1="11" y2="11" />
+    </svg>
+  );
+}

src/components/ReactIcons/AddedUserIcon.tsx

@@ -0,0 +1,26 @@
+type CheckIconProps = {
+  additionalClasses?: string;
+};
+
+export function AddedUserIcon(props: CheckIconProps) {
+  const { additionalClasses = 'mr-2 w-[20px] h-[20px]' } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={`relative ${additionalClasses}`}
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M14 19a6 6 0 0 0-12 0" />
+      <circle cx="8" cy="9" r="4" />
+      <polyline points="16 11 18 13 22 9" />
+    </svg>
+  );
+}

src/components/ReactIcons/CheckIcon.tsx

@@ -7,7 +7,7 @@ export function CheckIcon(props: CheckIconProps) {
 
   return (
     <svg
-      className={`relative ${additionalClasses}]`}
+      className={`relative ${additionalClasses}`}
       stroke="currentColor"
       fill="currentColor"
       stroke-width="0"

src/components/ReactIcons/ChevronDownIcon.tsx

@@ -0,0 +1,26 @@
+type ChevronDownIconProps = {
+  className?: string;
+};
+
+export function ChevronDownIcon(props: ChevronDownIconProps) {
+  const { className } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      className={className}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+      />
+    </svg>
+  );
+}

src/components/ReactIcons/CloseIcon.tsx

@@ -0,0 +1,22 @@
+type CloseIconProps = {
+  className?: string;
+};
+
+export function CloseIcon(props: CloseIconProps) {
+  const { className } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      className={className}
+    >
+      <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+    </svg>
+  );
+}

src/components/ReactIcons/DeleteUserIcon.tsx

@@ -0,0 +1,27 @@
+type CheckIconProps = {
+  additionalClasses?: string;
+};
+
+export function DeleteUserIcon(props: CheckIconProps) {
+  const { additionalClasses = 'mr-2 w-[20px] h-[20px]' } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      className={`relative ${additionalClasses}`}
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <line x1="17" x2="22" y1="8" y2="13" />
+      <line x1="22" x2="17" y1="8" y2="13" />
+    </svg>
+  );
+}

src/components/ReactIcons/ErrorIcon.tsx

@@ -0,0 +1,41 @@
+type ErrorIconProps = {
+  additionalClasses?: string;
+};
+
+export function ErrorIcon(props: ErrorIconProps) {
+  const { additionalClasses = 'mr-2 top-[0.5px] w-[20px] h-[20px]' } = props;
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`relative ${additionalClasses}`}
+    >
+      <path
+        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+        fill="currentColor"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M15 9L9 15"
+        stroke="white"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M9 9L15 15"
+        stroke="white"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

src/components/ReactIcons/InfoIcon.tsx

@@ -0,0 +1,41 @@
+type InfoIconProps = {
+  additionalClasses?: string;
+};
+
+export function InfoIcon(props: InfoIconProps) {
+  const { additionalClasses = 'mr-2 top-[0.5px] w-[20px] h-[20px]' } = props;
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`relative ${additionalClasses}`}
+    >
+      <path
+        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+        fill="currentColor"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 16V12"
+        stroke="white"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 8H12.01"
+        stroke="white"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

src/components/ReactIcons/MailIcon.tsx

@@ -0,0 +1,23 @@
+interface MailIconProps {
+  className?: string;
+}
+export function MailIcon(props: MailIconProps) {
+  const { className } = props;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className={className}
+    >
+      <rect width="20" height="16" x="2" y="4" rx="2" />
+      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
+    </svg>
+  );
+}

src/components/ReactIcons/ShareIcon.tsx

@@ -0,0 +1,24 @@
+import type { JSX } from "preact/jsx-runtime";
+
+type ShareIconProps = JSX.SVGAttributes<SVGSVGElement>
+
+export function ShareIcon(props: ShareIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      {...props}
+    >
+      <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+      <polyline points="16 6 12 2 8 6" />
+      <line x1="12" x2="12" y1="2" y2="15" />
+    </svg>
+  );
+}

src/components/ReactIcons/Spinner.tsx

@@ -0,0 +1,38 @@
+type SpinnerProps = {
+  className?: string;
+  isDualRing?: boolean;
+  outerFill?: string;
+  innerFill?: string;
+};
+
+export function Spinner({
+  className = '',
+  isDualRing = true,
+  outerFill = '#404040',
+  innerFill = '#94a3b8',
+}: SpinnerProps) {
+
+  className += className?.includes('w-') ? '' : ' w-3.5 h-3.5';
+
+  return (
+    <svg
+      className={`animate-spin ${className ?? ''}`}
+      viewBox="0 0 93 93"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      {isDualRing && (
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M46.5 93C72.1812 93 93 72.1812 93 46.5C93 20.8188 72.1812 0 46.5 0C20.8188 0 0 20.8188 0 46.5C0 72.1812 20.8188 93 46.5 93ZM46.5 77C63.3447 77 77 63.3447 77 46.5C77 29.6553 63.3447 16 46.5 16C29.6553 16 16 29.6553 16 46.5C16 63.3447 29.6553 77 46.5 77Z"
+          style={`fill: ${outerFill};`}
+        ></path>
+      )}
+      <path
+        d="M84.9746 49.5667C89.3257 49.9135 93.2042 46.6479 92.81 42.3008C92.3588 37.3251 91.1071 32.437 89.0872 27.8298C86.0053 20.7998 81.2311 14.6422 75.1905 9.90623C69.15 5.17027 62.031 2.00329 54.4687 0.687889C49.5126 -0.174203 44.467 -0.223422 39.5274 0.525737C35.2118 1.18024 32.966 5.72596 34.3411 9.86865V9.86865C35.7161 14.0113 40.2118 16.1424 44.5681 15.8677C46.9635 15.7166 49.3773 15.8465 51.7599 16.2609C56.7515 17.1291 61.4505 19.2196 65.4377 22.3456C69.4249 25.4717 72.5762 29.5362 74.6105 34.1764C75.5815 36.3912 76.2835 38.7044 76.7084 41.0666C77.4811 45.3626 80.6234 49.2199 84.9746 49.5667V49.5667Z"
+        style={`fill: ${innerFill};`}
+      ></path>
+    </svg>
+  );
+}

src/components/ReactIcons/StopIcon.tsx

@@ -0,0 +1,25 @@
+type CheckIconProps = {
+  additionalClasses?: string;
+};
+
+export function StopIcon(props: CheckIconProps) {
+  const { additionalClasses = 'mr-2 w-[20px] h-[20px]' } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className={`relative ${additionalClasses}`}
+    >
+      <circle cx="12" cy="12" r="10" />
+      <path d="m4.9 4.9 14.2 14.2" />
+    </svg>
+  );
+}

src/components/ReactIcons/TrashIcon.tsx

@@ -0,0 +1,27 @@
+type TrashIconProps = {
+  className?: string;
+};
+export function TrashIcon(props: TrashIconProps) {
+  const { className = '' } = props;
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className={className}
+    >
+      <path d="M3 6h18" />
+      <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+      <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+      <line x1="10" x2="10" y1="11" y2="17" />
+      <line x1="14" x2="14" y1="11" y2="17" />
+    </svg>
+  );
+}

src/components/ReactIcons/WarningIcon.tsx

@@ -0,0 +1,41 @@
+type WarningIconProps = {
+  additionalClasses?: string;
+};
+
+export function WarningIcon(props: WarningIconProps) {
+  const { additionalClasses = 'mr-2 top-[0.5px] w-[20px] h-[20px]' } = props;
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`relative ${additionalClasses}`}
+    >
+      <path
+        d="M21.7304 18.0002L13.7304 4.00022C13.556 3.69243 13.303 3.43641 12.9973 3.25829C12.6917 3.08017 12.3442 2.98633 11.9904 2.98633C11.6366 2.98633 11.2892 3.08017 10.9835 3.25829C10.6778 3.43641 10.4249 3.69243 10.2504 4.00022L2.25042 18.0002C2.0741 18.3056 1.98165 18.6521 1.98243 19.0047C1.98321 19.3573 2.0772 19.7035 2.25486 20.008C2.43253 20.3126 2.68757 20.5648 2.99411 20.7391C3.30066 20.9133 3.64783 21.0034 4.00042 21.0002H20.0004C20.3513 20.9999 20.6959 20.9072 20.9997 20.7315C21.3035 20.5558 21.5556 20.3033 21.7309 19.9993C21.9062 19.6954 21.9985 19.3506 21.9984 18.9997C21.9983 18.6488 21.9059 18.3041 21.7304 18.0002Z"
+        fill="currentColor"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 9V13"
+        stroke="white"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M12 17H12.01"
+        stroke="white"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+}

src/components/ResourceProgressStats.astro

@@ -1,9 +1,14 @@
 ---
+import type { ResourceType } from '../lib/resource-progress';
+import AstroIcon from './AstroIcon.astro';
+import { ProgressShareButton } from './UserProgress/ProgressShareButton';
 export interface Props {
+  resourceId: string;
+  resourceType: ResourceType;
   isSecondaryBanner?: boolean;
 }
 
-const { isSecondaryBanner = false } = Astro.props;
+const { isSecondaryBanner = false, resourceId, resourceType } = Astro.props;
 ---
 
 <div
@@ -26,32 +31,62 @@ const { isSecondaryBanner = false } = Astro.props;
       <span data-progress-percentage>0</span>% Done
     </span>
 
-    <span><span data-progress-done>0</span> completed</span><span
-      class='mx-1.5 text-gray-400'>&middot;</span
-    >
-    <span><span data-progress-learning>0</span> in progress</span><span
-      class='mx-1.5 text-gray-400'>&middot;</span
-    >
-    <span><span data-progress-skipped>0</span> skipped</span><span
-      class='mx-1.5 text-gray-400'>&middot;</span
-    >
-    <span><span data-progress-total>0</span> Total</span>
-  </p>
-</div>
-
-<p
-  data-progress-nums-container
-  class='relative block rounded-md border bg-white px-2 py-1.5 text-sm text-sm text-gray-700 sm:hidden striped-loader bg-white -mb-2'
->
-  <span data-progress-nums class='opacity-0 transition-opacity duration-300'>
-    <span
-      class='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 class='itesm-center hidden md:flex'>
+      <span><span data-progress-done>0</span> completed</span><span
+        class='mx-1.5 text-gray-400'>&middot;</span
+      >
+      <span><span data-progress-learning>0</span> in progress</span><span
+        class='mx-1.5 text-gray-400'>&middot;</span
+      >
+      <span><span data-progress-skipped>0</span> skipped</span><span
+        class='mx-1.5 text-gray-400'>&middot;</span
+      >
+      <span><span data-progress-total>0</span> Total</span>
     </span>
-
-    <span>
+    <span class='md:hidden'>
       <span data-progress-done>0</span> of <span data-progress-total>0</span> Done
     </span>
+  </p>
+
+  <div
+    class='flex items-center gap-3 opacity-0 transition-opacity duration-300'
+    data-progress-nums
+  >
+    <ProgressShareButton
+      resourceId={resourceId}
+      resourceType={resourceType}
+      client:load
+    />
+    <button
+      data-popup='progress-help'
+      class='flex items-center gap-1 text-sm font-medium text-gray-500 opacity-0 transition-opacity hover:text-black'
+      data-progress-nums
+    >
+      <AstroIcon icon='question' />
+      Track Progress
+    </button>
+  </div>
+</div>
+
+<div
+  data-progress-nums-container
+  class='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
+    class='text-gray-500 opacity-0 transition-opacity duration-300'
+  >
+    <span data-progress-done>0</span> of <span data-progress-total>0</span> Done
   </span>
-</p>
+
+  <div
+    class='flex items-center gap-2 opacity-0 transition-opacity duration-300'
+    data-progress-nums
+  >
+    <ProgressShareButton
+      resourceId={resourceId}
+      resourceType={resourceType}
+      client:load
+    />
+  </div>
+</div>

src/components/RespondInviteForm.tsx

@@ -0,0 +1,176 @@
+import { useEffect, useState } from 'preact/hooks';
+import { httpGet, httpPatch } from '../lib/http';
+import BuildingIcon from '../icons/building.svg';
+import ErrorIcon from '../icons/error.svg';
+import { pageProgressMessage } from '../stores/page';
+import type { TeamDocument } from './CreateTeam/CreateTeamForm';
+import type { AllowedRoles } from './CreateTeam/RoleDropdown';
+import type { AllowedMemberStatus } from './TeamDropdown/TeamDropdown';
+import { isLoggedIn } from '../lib/jwt';
+import { showLoginPopup } from '../lib/popup';
+import { getUrlParams } from '../lib/browser';
+
+type InvitationResponse = {
+  team: TeamDocument;
+  invite: {
+    _id?: string;
+    userId?: string;
+    invitedEmail?: string;
+    teamId: string;
+    role: AllowedRoles;
+    status: AllowedMemberStatus;
+    createdAt: Date;
+    updatedAt: Date;
+  };
+};
+
+export function RespondInviteForm() {
+  const { i: inviteId } = getUrlParams();
+
+  const [isLoadingInvite, setIsLoadingInvite] = useState(true);
+  const [error, setError] = useState('');
+  const [invite, setInvite] = useState<InvitationResponse>();
+  const isAuthenticated = isLoggedIn();
+
+  async function loadInvitation(inviteId: string) {
+    const { response, error } = await httpGet<InvitationResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-invitation/${inviteId}`
+    );
+    if (error || !response) {
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    setInvite(response);
+  }
+
+  useEffect(() => {
+    if (inviteId) {
+      loadInvitation(inviteId).finally(() => {
+        pageProgressMessage.set('');
+        setIsLoadingInvite(false);
+      });
+    } else {
+      setIsLoadingInvite(false);
+      setError('Missing invite ID in URL');
+      pageProgressMessage.set('');
+    }
+  }, [inviteId]);
+
+  async function respondInvitation(status: 'accept' | 'reject') {
+    pageProgressMessage.set('Please wait...');
+    setError('');
+    const { response, error } = await httpPatch<{ teamId: string }>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-respond-invite/${inviteId}`,
+      {
+        status,
+      }
+    );
+    if (error || !response) {
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    if (status === 'reject') {
+      window.location.href = '/';
+      return;
+    }
+    window.location.href = `/team/progress?t=${response.teamId}`;
+  }
+
+  if (isLoadingInvite) {
+    return null;
+  }
+
+  if (!invite) {
+    return (
+      <div className="container text-center">
+        <img
+          alt={'error'}
+          src={ErrorIcon}
+          className="mx-auto mb-4 mt-24 w-20 opacity-20"
+        />
+
+        <h2 className={'mb-1 text-2xl font-bold'}>Error</h2>
+        <p class="mb-4 text-base leading-6 text-gray-600">
+          {error || 'There was a problem, please try again.'}
+        </p>
+
+        <div>
+          <a
+            href="/"
+            className="flex-grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
+          >
+            Back to home
+          </a>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container text-center">
+      <img
+        alt={'join team'}
+        src={BuildingIcon}
+        className="mx-auto mb-4 mt-24 w-20 opacity-20"
+      />
+
+      <h2 className={'mb-1 text-2xl font-bold'}>Join Team</h2>
+      <p class="mb-3 text-base leading-6 text-gray-600">
+        You have been invited to join the team{' '}
+        <strong id="team-name">{invite?.team?.name}</strong>.
+      </p>
+
+      {!isAuthenticated && (
+        <div class="mx-auto w-full duration-500 sm:max-w-md">
+          <div class="flex w-full items-center gap-2">
+            <button
+              onClick={() => showLoginPopup()}
+              data-popup="login-popup"
+              type="button"
+              class="flex-grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
+            >
+              Login to respond
+            </button>
+          </div>
+        </div>
+      )}
+
+      {isAuthenticated && (
+        <div className={`mx-auto w-full max-w-md`}>
+          <div className="flex w-full items-center gap-2">
+            <button
+              type="button"
+              onClick={() =>
+                respondInvitation('accept').finally(() => {
+                  pageProgressMessage.set('');
+                })
+              }
+              className="flex-grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
+            >
+              Accept
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                respondInvitation('reject').finally(() => {
+                  pageProgressMessage.set('');
+                })
+              }
+              className="flex-grow cursor-pointer rounded-lg bg-red-500 px-3 py-2 text-white disabled:opacity-40"
+            >
+              Reject
+            </button>
+          </div>
+
+          {error && (
+            <p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">
+              {error}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/RoadmapHeader.astro

@@ -5,6 +5,9 @@ import RoadmapHint from './RoadmapHint.astro';
 import RoadmapNote from './RoadmapNote.astro';
 import TopicSearch from './TopicSearch/TopicSearch.astro';
 import YouTubeAlert from './YouTubeAlert.astro';
+import ProgressHelpPopup from './ProgressHelpPopup.astro';
+import { MarkFavorite } from './FeaturedItems/MarkFavorite';
+import { TeamVersions } from './TeamVersions/TeamVersions';
 
 export interface Props {
   title: string;
@@ -32,19 +35,24 @@ const isRoadmapReady = !isUpcoming;
 ---
 
 <LoginPopup />
+<ProgressHelpPopup />
 
 <div class='border-b'>
   <div class='container relative py-5 sm:py-12'>
-    <YouTubeAlert />
-
-    <div class='mb-3 mt-0 sm:mb-4 sm:mt-4'>
+    <div class='mb-3 mt-0 sm:mb-4'>
       <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'>
         {title}
+        <MarkFavorite
+          resourceId={roadmapId}
+          resourceType='roadmap'
+          className='text-gray-500 !opacity-100 hover:text-gray-600 [&>svg]:stroke-[0.4] [&>svg]:stroke-gray-400 hover:[&>svg]:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 sm:[&>svg]:h-5 sm:[&>svg]:w-5 ml-1.5 relative focus:outline-0'
+          client:load
+        />
       </h1>
       <p class='text-sm text-gray-500 sm:text-lg'>{description}</p>
     </div>
 
-    <div class='flex justify-between'>
+    <div class='flex justify-between gap-2 sm:gap-0'>
       <div class='flex gap-1 sm:gap-2'>
         {
           !hasSearch && (
@@ -109,20 +117,28 @@ const isRoadmapReady = !isUpcoming;
         }
       </div>
 
-      {
-        isRoadmapReady && (
-          <a
-            href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
-            target='_blank'
-            class='inline-flex items-center justify-center 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='Suggest Changes'
-          >
-            <Icon icon='comment' class='h-3 w-3' />
-            <span class='ml-2 hidden sm:inline'>Suggest Changes</span>
-            <span class='ml-2 inline sm:hidden'>Suggest</span>
-          </a>
-        )
-      }
+      <div class='flex items-center gap-1 sm:gap-2'>
+        <TeamVersions
+          resourceType='roadmap'
+          resourceId={roadmapId}
+          client:only
+        />
+
+        {
+          isRoadmapReady && (
+            <a
+              href={`https://github.com/kamranahmedse/developer-roadmap/issues/new?title=[Suggestion] ${title}`}
+              target='_blank'
+              class='inline-flex items-center justify-center 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='Suggest Changes'
+            >
+              <Icon icon='comment' class='h-3 w-3' />
+              <span class='ml-2 hidden sm:inline'>Suggest Changes</span>
+              <span class='ml-2 inline sm:hidden'>Suggest</span>
+            </a>
+          )
+        }
+      </div>
     </div>
 
     <!-- Desktop: Roadmap Resources - Alert -->

src/components/RoadmapHint.astro

@@ -1,5 +1,4 @@
 ---
-import { ClearProgress } from './Activity/ClearProgress';
 import AstroIcon from './AstroIcon.astro';
 import Icon from './AstroIcon.astro';
 import ResourceProgressStats from './ResourceProgressStats.astro';
@@ -44,5 +43,5 @@ const roadmapTitle =
     )
   }
 
-  <ResourceProgressStats isSecondaryBanner={hasTNSBanner} />
+  <ResourceProgressStats isSecondaryBanner={hasTNSBanner} resourceId={roadmapId} resourceType='roadmap' />
 </div>

src/components/SearchSelector.tsx

@@ -0,0 +1,156 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+
+export type OptionType = {
+  value: string;
+  label: string;
+};
+
+export function SearchSelector({
+  options,
+  onSelect,
+  inputClassName,
+  searchInputId,
+  placeholder,
+}: {
+  options: OptionType[];
+  onSelect: (data: OptionType) => void;
+  inputClassName?: string;
+  searchInputId?: string;
+  placeholder?: string;
+}) {
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isActive, setIsActive] = useState(false);
+  const [searchResults, setSearchResults] = useState<OptionType[]>([]);
+  const [searchedText, setSearchedText] = useState('');
+  const [activeCounter, setActiveCounter] = useState(0);
+
+  useEffect(() => {
+    if (searchedText.length === 0) {
+      setSearchResults(options.slice(0, 5));
+      return;
+    }
+
+    setIsActive(true);
+    const normalizedSearchedText = searchedText.trim().toLowerCase();
+    const results = options
+      .filter((data) => {
+        return data.label.toLowerCase().indexOf(normalizedSearchedText) !== -1;
+      })
+      .slice(0, 5);
+
+    setSearchResults(results);
+    setActiveCounter(0);
+  }, [searchedText]);
+
+  useEffect(() => {
+    setSearchResults(options.slice(0, 5));
+  }, [options]);
+
+  useEffect(() => {
+    if (isActive) {
+      const handleOutsideClick = (e: MouseEvent) => {
+        if (
+          dropdownRef.current &&
+          !dropdownRef.current.contains(e.target as Node) &&
+          searchInputRef.current &&
+          !searchInputRef.current.contains(e.target as Node)
+        ) {
+          setIsActive(false);
+          setSearchedText('');
+          setSearchResults(options.slice(0, 5));
+        }
+      };
+
+      document.addEventListener('mousedown', handleOutsideClick);
+
+      return () => {
+        document.removeEventListener('mousedown', handleOutsideClick);
+      };
+    }
+  }, [isActive]);
+
+  return (
+    <div className="relative">
+      <input
+        ref={searchInputRef}
+        type="text"
+        id={searchInputId}
+        value={searchedText}
+        className={`w-full ${inputClassName}`}
+        placeholder={placeholder}
+        autoComplete="off"
+        onInput={(e) => {
+          const value = (e.target as HTMLInputElement).value.trim();
+          setSearchedText(value);
+        }}
+        onFocus={() => {
+          setIsActive(true);
+          setSearchResults(options.slice(0, 5));
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'ArrowDown') {
+            const canGoNext = activeCounter < searchResults.length - 1;
+            setActiveCounter(canGoNext ? activeCounter + 1 : 0);
+          } else if (e.key === 'ArrowUp') {
+            const canGoPrev = activeCounter > 0;
+            setActiveCounter(
+              canGoPrev ? activeCounter - 1 : searchResults.length - 1
+            );
+          } else if (e.key === 'Tab') {
+            if (isActive) {
+              e.preventDefault();
+            }
+          } else if (e.key === 'Escape') {
+            setSearchedText('');
+            setIsActive(false);
+          } else if (e.key === 'Enter') {
+            e.preventDefault();
+            const activeData = searchResults[activeCounter];
+            if (activeData) {
+              onSelect(activeData);
+              setSearchedText('');
+              setIsActive(false);
+            }
+          }
+        }}
+      />
+
+      {isActive && (
+        <div
+          class="absolute top-full z-50 mt-2 w-full rounded-md bg-gray-100 px-2 py-2"
+          ref={dropdownRef}
+        >
+          <div className="flex flex-col">
+            {searchResults.length === 0 && (
+              <div class="p-5 text-center text-sm text-gray-400">
+                No results found
+              </div>
+            )}
+
+            {searchResults.map((result, counter) => {
+              return (
+                <>
+                  <button
+                    type="button"
+                    class={`flex w-full items-center rounded p-2 text-sm ${
+                      counter === activeCounter ? 'bg-gray-200' : ''
+                    }`}
+                    onMouseOver={() => setActiveCounter(counter)}
+                    onClick={() => {
+                      onSelect(result);
+                      setSearchedText('');
+                      setIsActive(false);
+                    }}
+                  >
+                    {result.label}
+                  </button>
+                </>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/Stepper.tsx

@@ -0,0 +1,51 @@
+import { CheckIcon } from './ReactIcons/CheckIcon';
+
+type StepperStep = {
+  label: string;
+  onClick?: () => void;
+};
+
+type StepperProps = {
+  activeIndex: number;
+  completeSteps: number[];
+  steps: StepperStep[];
+};
+
+export function Stepper(props: StepperProps) {
+  const { steps, activeIndex = 0, completeSteps = [] } = props;
+
+  return (
+    <ol className="flex w-full items-center text-gray-500">
+      {steps.map((step, stepCounter) => {
+        const isComplete = completeSteps.includes(stepCounter);
+        const isActive = activeIndex === stepCounter;
+        const isLast = stepCounter === (steps.length - 1);
+
+        return (
+          <>
+            <li
+              className={`flex items-center ${
+                isComplete || isActive ? 'text-black' : 'text-gray-400'
+              }`}
+            >
+              {isComplete && (
+                <CheckIcon
+                  additionalClasses={'mr-2 top-[0.5px] w-[18px] h-[18px]'}
+                />
+              )}
+              {!isComplete && (
+                <span class="mr-2 font-semibold">{stepCounter + 1}</span>
+              )}
+              <span className="flex flex-grow">{step.label}</span>
+            </li>
+            {!isLast && (
+              <li className={'mx-5 flex flex-grow rounded-md bg-gray-200'}>
+                <span className={'h-1 w-full'} />
+              </li>
+            )}
+          </>
+        );
+      })}
+    </ol>
+  );
+}

src/components/TeamDropdown/TeamDropdown.tsx

@@ -0,0 +1,200 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import ChevronDown from '../../icons/dropdown.svg';
+import { httpGet } from '../../lib/http';
+import { useAuth } from '../../hooks/use-auth';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { Spinner } from '../ReactIcons/Spinner';
+import type { AllowedRoles } from '../CreateTeam/RoleDropdown';
+import { $currentTeam, $teamList } from '../../stores/team';
+import { useStore } from '@nanostores/preact';
+import { useTeamId } from '../../hooks/use-team-id';
+import { useToast } from '../../hooks/use-toast';
+import type { ValidTeamType } from '../CreateTeam/Step0';
+
+const allowedStatus = ['invited', 'joined', 'rejected'] as const;
+export type AllowedMemberStatus = (typeof allowedStatus)[number];
+
+export type UserTeamItem = {
+  _id: string;
+  name: string;
+  avatar?: string;
+  roadmaps: string[];
+  type: ValidTeamType;
+  role: AllowedRoles;
+  status: AllowedMemberStatus;
+  memberId: string;
+};
+
+export type TeamListResponse = UserTeamItem[];
+
+export function TeamDropdown() {
+  const user = useAuth();
+  const { teamId } = useTeamId();
+
+  const [shouldShowTeamsIndicator, setShouldShowTeamsIndicator] =
+    useState(false);
+
+  useEffect(() => {
+    // Show team dropdown "New" indicator to first 3 refreshes
+    const viewedTeamsCount = localStorage.getItem('viewedTeamsCount');
+    const viewedTeamsCountNumber = parseInt(viewedTeamsCount || '0', 10);
+    const shouldShowTeamIndicator = viewedTeamsCountNumber < 5;
+
+    setShouldShowTeamsIndicator(shouldShowTeamIndicator);
+    if (shouldShowTeamIndicator) {
+      localStorage.setItem(
+        'viewedTeamsCount',
+        (viewedTeamsCountNumber + 1).toString()
+      );
+    }
+  }, []);
+
+  const teamList = useStore($teamList);
+  const currentTeam = useStore($currentTeam);
+
+  const toast = useToast();
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  const selectedAvatar = currentTeam ? currentTeam.avatar : user?.avatar;
+  const selectedLabel = currentTeam ? currentTeam.name : user?.name;
+
+  useOutsideClick(dropdownRef, () => {
+    setShowDropdown(false);
+  });
+
+  async function getAllTeams() {
+    const { response, error } = await httpGet<TeamListResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-teams`
+    );
+    if (error || !response) {
+      toast.error(error?.message || 'Something went wrong');
+      return;
+    }
+
+    $teamList.set(response);
+  }
+
+  useEffect(() => {
+    if (!teamId || !teamList) {
+      return;
+    }
+
+    $currentTeam.set(teamList.find((team) => team._id === teamId));
+  }, [teamList, teamId]);
+
+  useEffect(() => {
+    setIsLoading(true);
+    getAllTeams().finally(() => {
+      setIsLoading(false);
+    });
+  }, []);
+
+  const pendingTeamIds = teamList
+    .filter((team) => team.status === 'invited')
+    .map((team) => team._id);
+
+  return (
+    <>
+      <div className="relative mr-2">
+        <span className="mb-2 flex items-center justify-between text-xs uppercase text-gray-400">
+          <span>Choose Team</span>
+
+          {shouldShowTeamsIndicator && (
+            <span class="mr-1 inline-flex h-1 w-1 items-center justify-center font-medium text-blue-300">
+              <span class="relative 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>
+            </span>
+          )}
+        </span>
+        <button
+          className="flex w-full cursor-pointer items-center justify-between rounded border p-2 text-sm hover:bg-gray-100"
+          onClick={() => setShowDropdown(!showDropdown)}
+        >
+          {pendingTeamIds.length > 0 && (
+            <span className="absolute -left-1.5 -top-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs font-medium text-white">
+              {pendingTeamIds.length}
+            </span>
+          )}
+          <div className="mr-1.5 inline-grid grid-cols-[16px_auto] items-center gap-1.5">
+            {isLoading && <Spinner className="h-4 w-4" isDualRing={false} />}
+            {!isLoading && (
+              <img
+                src={
+                  selectedAvatar
+                    ? `${
+                        import.meta.env.PUBLIC_AVATAR_BASE_URL
+                      }/${selectedAvatar}`
+                    : '/images/default-avatar.png'
+                }
+                alt=""
+                className="h-4 w-4 rounded-full object-cover"
+              />
+            )}
+            <span className="truncate">
+              {!isLoading && selectedLabel}
+              {isLoading && 'Loading ..'}
+            </span>
+          </div>
+          <img alt={'show dropdown'} src={ChevronDown} className="h-4 w-4" />
+        </button>
+
+        {showDropdown && (
+          <div
+            ref={dropdownRef}
+            className="absolute top-full z-50 mt-2 w-full rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
+          >
+            <ul>
+              <li>
+                <a
+                  className="flex w-full cursor-pointer items-center gap-2 truncate rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  href="/account"
+                >
+                  <span className="truncate">Personal Account</span>
+                </a>
+              </li>
+              {teamList.map((team) => {
+                let pageLink = '';
+                if (team.status === 'invited') {
+                  pageLink = `/respond-invite?i=${team.memberId}`;
+                } else if (team.status === 'joined') {
+                  pageLink = `/team/progress?t=${team._id}`;
+                }
+
+                return (
+                  <li>
+                    <a
+                      className="flex w-full cursor-pointer items-center gap-2 rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                      href={`${pageLink}`}
+                    >
+                      <span className="min-w-0 flex-grow truncate">
+                        {team.name}
+                      </span>
+                      {pendingTeamIds.includes(team._id) && (
+                        <span className="flex rounded-md bg-red-500 px-2 text-xs text-white">
+                          Invite
+                        </span>
+                      )}
+                    </a>
+                  </li>
+                );
+              })}
+            </ul>
+            <a
+              className="mt-2 flex w-full cursor-pointer items-center justify-center gap-2 rounded bg-gray-100 p-2 text-sm font-medium text-slate-800 hover:opacity-90"
+              href="/team/new"
+            >
+              <span>+</span>
+              <span>New Team</span>
+            </a>
+          </div>
+        )}
+      </div>
+      <hr class="my-4" />
+    </>
+  );
+}

src/components/TeamMembers/InviteMemberPopup.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { httpPost } from '../../lib/http';
+import { useTeamId } from '../../hooks/use-team-id';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { AllowedRoles, RoleDropdown } from '../CreateTeam/RoleDropdown';
+
+type InviteMemberPopupProps = {
+  onInvited: () => void;
+  onClose: () => void;
+};
+
+export function InviteMemberPopup(props: InviteMemberPopupProps) {
+  const { onClose, onInvited } = props;
+
+  const popupBodyRef = useRef<HTMLDivElement>(null);
+  const emailRef = useRef<HTMLInputElement>(null);
+  const [selectedRole, setSelectedRole] = useState<AllowedRoles>('member');
+  const [email, setEmail] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const { teamId } = useTeamId();
+
+  useEffect(() => {
+    emailRef?.current?.focus();
+  }, []);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    const { response, error } = await httpPost(
+      `${import.meta.env.PUBLIC_API_URL}/v1-invite-member/${teamId}`,
+      { email, role: selectedRole }
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    setIsLoading(false);
+    handleClosePopup();
+    onInvited();
+  };
+
+  const handleClosePopup = () => {
+    setIsLoading(false);
+    setError('');
+
+    onClose();
+  };
+
+  useOutsideClick(popupBodyRef, handleClosePopup);
+
+  return (
+    <div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+        <div
+          ref={popupBodyRef}
+          class="popup-body relative rounded-lg bg-white p-4 shadow"
+        >
+          <h3 class="mb-1.5 text-xl sm:text-2xl font-medium">Invite Member</h3>
+          <p className="mb-3 text-sm leading-none text-gray-400 hidden sm:block">
+            Enter the email and role below to invite a member.
+          </p>
+
+          <form onSubmit={handleSubmit}>
+            <div className="mt-0 sm:mt-4 my-4 flex flex-col gap-2">
+              <input
+                ref={emailRef}
+                type="email"
+                name="invite-member"
+                id="invite-member"
+                className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+                placeholder="Enter email address"
+                required
+                autoFocus
+                value={email}
+                onInput={(e) => setEmail((e.target as HTMLInputElement).value)}
+              />
+
+              <div className="flex h-[42px] w-full flex-col">
+                <RoleDropdown
+                  className="h-full w-full"
+                  selectedRole={selectedRole}
+                  setSelectedRole={setSelectedRole}
+                />
+              </div>
+
+              {error && (
+                <p className=" rounded-md border border-red-300 bg-red-50 p-2 text-sm text-red-700">
+                  {error}
+                </p>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                disabled={isLoading}
+                onClick={handleClosePopup}
+                className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={isLoading || !email}
+                class="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
+              >
+                {isLoading ? 'Please wait ..' : 'Invite'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/TeamMembers/LeaveTeamButton.tsx

@@ -0,0 +1,30 @@
+import { useState } from 'preact/hooks';
+import { LeaveTeamPopup } from './LeaveTeamPopup';
+
+type LeaveTeamButtonProps = {
+  teamId: string;
+};
+
+export function LeaveTeamButton(props: LeaveTeamButtonProps) {
+  const [showLeaveTeamPopup, setShowLeaveTeamPopup] = useState(false);
+
+  return (
+    <>
+      {showLeaveTeamPopup && (
+        <LeaveTeamPopup
+          onClose={() => {
+            setShowLeaveTeamPopup(false);
+          }}
+        />
+      )}
+      <button
+        onClick={() => {
+          setShowLeaveTeamPopup(true);
+        }}
+        className="flex h-7 min-w-[95px] items-center justify-center rounded-md border border-gray-200 bg-gray-50 px-2 py-1.5 text-sm font-medium leading-none text-red-600"
+      >
+        Leave team
+      </button>
+    </>
+  );
+}

src/components/TeamMembers/LeaveTeamPopup.tsx

@@ -0,0 +1,124 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { httpDelete } from '../../lib/http';
+import { useTeamId } from '../../hooks/use-team-id';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+
+type LeaveTeamPopupProps = {
+  onClose: () => void;
+};
+
+export function LeaveTeamPopup(props: LeaveTeamPopupProps) {
+  const { onClose } = props;
+
+  const popupBodyRef = useRef<HTMLDivElement>(null);
+  const confirmationEl = useRef<HTMLInputElement>(null);
+  const [confirmationText, setConfirmationText] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const { teamId } = useTeamId();
+
+  useEffect(() => {
+    setError('');
+    setConfirmationText('');
+    confirmationEl?.current?.focus();
+  }, []);
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    if (confirmationText.toUpperCase() !== 'LEAVE') {
+      setError('Verification text does not match');
+      setIsLoading(false);
+      return;
+    }
+
+    const { response, error } = await httpDelete(
+      `${import.meta.env.PUBLIC_API_URL}/v1-leave-team/${teamId}`,
+      {}
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    window.location.href = '/account?c=tl';
+  };
+
+  const handleClosePopup = () => {
+    setIsLoading(false);
+    setError('');
+    setConfirmationText('');
+
+    onClose();
+  };
+
+  useOutsideClick(popupBodyRef, handleClosePopup);
+
+  return (
+    <div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+        <div
+          ref={popupBodyRef}
+          class="popup-body relative rounded-lg bg-white p-4 shadow"
+        >
+          <h2 class="text-2xl font-semibold text-black">
+            Leave Team
+          </h2>
+          <p className="text-gray-500">
+            You will lose access to the team, the roadmaps and progress of other team members.
+          </p>
+          <p className="-mb-2 mt-3 text-base font-medium text-black">
+            Please type "leave" to confirm.
+          </p>
+          <form onSubmit={handleSubmit}>
+            <div className="my-4">
+              <input
+                ref={confirmationEl}
+                type="text"
+                name="leave-team"
+                id="leave-team"
+                className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+                placeholder={'Type "leave" to confirm'}
+                required
+                autoFocus
+                value={confirmationText}
+                onInput={(e) =>
+                  setConfirmationText((e.target as HTMLInputElement).value)
+                }
+              />
+              {error && (
+                <p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">
+                  {error}
+                </p>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                disabled={isLoading}
+                onClick={handleClosePopup}
+                className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={
+                  isLoading || confirmationText.toUpperCase() !== 'LEAVE'
+                }
+                className="flex-grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
+              >
+                {isLoading ? 'Please wait ..' : 'Leave Team'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/TeamMembers/MemberActionDropdown.tsx

@@ -0,0 +1,111 @@
+import { useRef, useState } from 'preact/hooks';
+import type { TeamMemberDocument } from './TeamMembersPage';
+import MoreIcon from '../../icons/more-vertical.svg';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { useToast } from '../../hooks/use-toast';
+import { MailIcon } from '../ReactIcons/MailIcon';
+
+export function MemberActionDropdown({
+  member,
+  onUpdateMember,
+  onDeleteMember,
+  onResendInvite,
+  isDisabled = false,
+  onSendProgressReminder,
+  allowProgressReminder = false,
+  allowUpdateRole = true,
+}: {
+  onDeleteMember: () => void;
+  onUpdateMember: () => void;
+  onResendInvite: () => void;
+  onSendProgressReminder: () => void;
+  isDisabled: boolean;
+  allowProgressReminder: boolean;
+  allowUpdateRole: boolean;
+  member: TeamMemberDocument;
+}) {
+  const menuRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useOutsideClick(menuRef, () => {
+    setIsOpen(false);
+  });
+
+  const actions = [
+    {
+      name: 'Delete',
+      handleClick: () => {
+        onDeleteMember();
+        setIsOpen(false);
+      },
+    },
+    ...(allowUpdateRole
+      ? [
+          {
+            name: 'Update Role',
+            handleClick: () => {
+              onUpdateMember();
+              setIsOpen(false);
+            },
+          },
+        ]
+      : []),
+    ...(allowProgressReminder
+      ? [
+          {
+            name: 'Send Progress Reminder',
+            handleClick: () => {
+              onSendProgressReminder();
+              setIsOpen(false);
+            },
+          },
+        ]
+      : []),
+    ...(['invited'].includes(member.status)
+      ? [
+          {
+            name: 'Resend Invite',
+            handleClick: () => {
+              onResendInvite();
+              setIsOpen(false);
+            },
+          },
+        ]
+      : []),
+  ];
+  return (
+    <div className="relative">
+      <button
+        disabled={isDisabled}
+        onClick={() => setIsOpen(!isOpen)}
+        className="ml-2 flex items-center opacity-60 transition-opacity hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-30"
+      >
+        <img alt="menu" src={MoreIcon} className="h-4 w-4" />
+      </button>
+
+      {isOpen && (
+        <div
+          ref={menuRef}
+          className="align-right absolute right-0 top-full z-50 mt-1 w-[200px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
+        >
+          <ul>
+            {actions.map((action, index) => {
+              return (
+                <li key={index}>
+                  <button
+                    onClick={action.handleClick}
+                    disabled={isLoading}
+                    className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  >
+                    {action.name}
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/TeamMembers/RoleBadge.tsx

@@ -0,0 +1,14 @@
+import type { AllowedRoles } from '../CreateTeam/RoleDropdown';
+
+export function MemberRoleBadge({ role }: { role: AllowedRoles }) {
+  return (
+    <span
+      className={`rounded-full px-2 py-0.5 text-xs sm:flex items-center capitalize ${['admin'].includes(role)
+        ? 'bg-blue-100 text-blue-700 '
+        : 'bg-gray-100 text-gray-700 '
+        } ${['manager'].includes(role) ? 'bg-green-100 text-green-700' : ''}`}
+    >
+      {role}
+    </span>
+  );
+}

src/components/TeamMembers/TeamMemberItem.tsx

@@ -0,0 +1,130 @@
+import { MailIcon } from '../ReactIcons/MailIcon';
+import { MemberActionDropdown } from './MemberActionDropdown';
+import { MemberRoleBadge } from './RoleBadge';
+import type { TeamMemberItem } from './TeamMembersPage';
+import { $canManageCurrentTeam } from '../../stores/team';
+import { useStore } from '@nanostores/preact';
+
+type TeamMemberProps = {
+  member: TeamMemberItem;
+  userId: string;
+  index: number;
+  teamId: string;
+  canManageCurrentTeam: boolean;
+  onDeleteMember: () => void;
+  onUpdateMember: () => void;
+  onSendProgressReminder: () => void;
+  onResendInvite: () => void;
+};
+
+export function TeamMemberItem(props: TeamMemberProps) {
+  const {
+    member,
+    index,
+    onResendInvite,
+    onUpdateMember,
+    canManageCurrentTeam,
+    userId,
+    onDeleteMember,
+    onSendProgressReminder,
+  } = props;
+
+  const canManageTeam = useStore($canManageCurrentTeam);
+  const showNoProgressBadge = !member.hasProgress && member.status === 'joined';
+  const allowProgressReminder =
+    canManageTeam &&
+    !member.hasProgress &&
+    member.status === 'joined' &&
+    member.userId !== userId;
+
+  return (
+    <div
+      className={`flex items-center justify-between gap-2 p-3 ${
+        index === 0 ? '' : 'border-t'
+      }`}
+    >
+      <div className="flex items-center gap-3">
+        <img
+          src={
+            member.avatar
+              ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${member.avatar}`
+              : '/images/default-avatar.png'
+          }
+          alt={member.name || ''}
+          className="hidden h-10 w-10 rounded-full sm:block"
+        />
+        <div>
+          <div className="mb-1 flex items-center gap-2 sm:hidden">
+            <MemberRoleBadge role={member.role} />
+          </div>
+          <div className="flex items-center">
+            <h3 className="inline-grid grid-cols-[auto_auto_auto] items-center font-medium">
+              <span className="truncate">{member.name}</span>
+              {showNoProgressBadge && (
+                <span className="ml-2 rounded-full bg-red-400 px-2 py-0.5 text-xs font-normal text-white">
+                  No Progress
+                </span>
+              )}
+              {member.userId === userId && (
+                <span className="ml-2 hidden text-xs font-normal text-blue-500 sm:inline">
+                  You
+                </span>
+              )}
+            </h3>
+            <div className="ml-2 flex items-center gap-0.5">
+              {member.status === 'invited' && (
+                <span className="rounded-full bg-yellow-100 px-2 py-0.5 text-xs text-yellow-700">
+                  Invited
+                </span>
+              )}
+              {member.status === 'rejected' && (
+                <span className="rounded-full bg-red-100 px-2 py-0.5 text-xs text-red-700">
+                  Rejected
+                </span>
+              )}
+            </div>
+          </div>
+          <p className="truncate text-sm text-gray-500">
+            {member.invitedEmail}
+          </p>
+        </div>
+      </div>
+
+      <div className="flex shrink-0 items-center text-sm">
+        <span class={'hidden sm:block'}>
+          <MemberRoleBadge role={member.role} />
+        </span>
+        {canManageCurrentTeam && (
+          <MemberActionDropdown
+            allowUpdateRole={member.status !== 'rejected'}
+            allowProgressReminder={allowProgressReminder}
+            onResendInvite={onResendInvite}
+            onSendProgressReminder={onSendProgressReminder}
+            onDeleteMember={onDeleteMember}
+            isDisabled={member.userId === userId}
+            onUpdateMember={onUpdateMember}
+            member={member}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+type SendProgressReminderProps = {
+  handleSendReminder: () => void;
+};
+
+function SendProgressReminder(props: SendProgressReminderProps) {
+  const { handleSendReminder } = props;
+
+  return (
+    <button
+      onClick={handleSendReminder}
+      className="ml-2 flex items-center gap-1.5 whitespace-nowrap rounded-full bg-orange-100 px-2 py-0.5 text-xs text-orange-700"
+    >
+      <MailIcon className="h-3 w-3" />
+      <span>Remind</span>
+    </button>
+  );
+}

src/components/TeamMembers/TeamMembersPage.tsx

@@ -0,0 +1,327 @@
+import { useEffect, useState } from 'preact/hooks';
+import { httpDelete, httpGet, httpPatch } from '../../lib/http';
+import { useAuth } from '../../hooks/use-auth';
+import { pageProgressMessage } from '../../stores/page';
+import type { TeamDocument } from '../CreateTeam/CreateTeamForm';
+import { LeaveTeamButton } from './LeaveTeamButton';
+import type { AllowedRoles } from '../CreateTeam/RoleDropdown';
+import type { AllowedMemberStatus } from '../TeamDropdown/TeamDropdown';
+import { InviteMemberPopup } from './InviteMemberPopup';
+import { getUrlParams } from '../../lib/browser';
+import { UpdateMemberPopup } from './UpdateMemberPopup';
+import { useStore } from '@nanostores/preact';
+import { $canManageCurrentTeam } from '../../stores/team';
+import { useToast } from '../../hooks/use-toast';
+import { TeamMemberItem } from './TeamMemberItem';
+
+export interface TeamMemberDocument {
+  _id?: string;
+  userId?: string;
+  invitedEmail?: string;
+  teamId: string;
+  role: AllowedRoles;
+  status: AllowedMemberStatus;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface UserResourceProgressDocument {
+  _id?: string;
+  userId: string;
+  resourceId: string;
+  resourceType: 'roadmap' | 'best-practice';
+  isFavorite?: boolean;
+  done: string[];
+  learning: string[];
+  skipped: string[];
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+export interface TeamMemberItem extends TeamMemberDocument {
+  name: string;
+  avatar: string;
+  hasProgress: boolean;
+}
+
+export function TeamMembersPage() {
+  const { t: teamId } = getUrlParams();
+
+  const toast = useToast();
+  const canManageCurrentTeam = useStore($canManageCurrentTeam);
+
+  const [memberToUpdate, setMemberToUpdate] = useState<TeamMemberItem>();
+  const [isInvitingMember, setIsInvitingMember] = useState(false);
+  const [teamMembers, setTeamMembers] = useState<TeamMemberItem[]>([]);
+  const [team, setTeam] = useState<TeamDocument>();
+
+  const user = useAuth();
+
+  async function loadTeam() {
+    const { response, error } = await httpGet<TeamDocument>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-team/${teamId}`
+    );
+    if (error || !response) {
+      toast.error(error?.message || 'Something went wrong');
+      return;
+    }
+
+    if (response) {
+      setTeam(response);
+    }
+  }
+
+  async function getTeamMemberList() {
+    const { response, error } = await httpGet<TeamMemberItem[]>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-team-member-list/${teamId}`
+    );
+    if (error || !response) {
+      toast.error(error?.message || 'Failed to load team member list');
+      return;
+    }
+
+    setTeamMembers(response);
+  }
+
+  useEffect(() => {
+    if (!teamId) {
+      return;
+    }
+
+    Promise.all([loadTeam(), getTeamMemberList()]).finally(() => {
+      pageProgressMessage.set('');
+    });
+  }, [teamId]);
+  async function deleteMember(teamId: string, memberId: string) {
+    pageProgressMessage.set('Deleting member');
+    const { response, error } = await httpDelete(
+      `${
+        import.meta.env.PUBLIC_API_URL
+      }/v1-delete-member/${teamId}/${memberId}`,
+      {}
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Something went wrong');
+      return;
+    }
+
+    toast.success('Member has been deleted');
+    await getTeamMemberList();
+  }
+
+  async function resendInvite(teamId: string, memberId: string) {
+    pageProgressMessage.set('Resending Invite');
+    const { response, error } = await httpPatch(
+      `${
+        import.meta.env.PUBLIC_API_URL
+      }/v1-resend-invite/${teamId}/${memberId}`,
+      {}
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Something went wrong');
+      return;
+    }
+
+    toast.success('Invite has been sent');
+  }
+
+  async function handleSendReminder(teamId: string, memberId: string) {
+    pageProgressMessage.set('Sending Reminder');
+    const { response, error } = await httpPatch(
+      `${
+        import.meta.env.PUBLIC_API_URL
+      }/v1-send-progress-reminder/${teamId}/${memberId}`,
+      {}
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Something went wrong');
+      return;
+    }
+
+    toast.success('Reminder has been sent');
+  }
+
+  const joinedMembers = teamMembers.filter(
+    (member) => member.status === 'joined'
+  );
+  const invitedMembers = teamMembers.filter(
+    (member) => member.status === 'invited'
+  );
+  const rejectedMembers = teamMembers.filter(
+    (member) => member.status === 'rejected'
+  );
+
+  return (
+    <div>
+      {memberToUpdate && (
+        <UpdateMemberPopup
+          member={memberToUpdate}
+          onUpdated={() => {
+            pageProgressMessage.set('Refreshing members');
+            getTeamMemberList().finally(() => {
+              pageProgressMessage.set('');
+            });
+            setMemberToUpdate(undefined);
+            toast.success('Member has been updated');
+          }}
+          onClose={() => {
+            setMemberToUpdate(undefined);
+          }}
+        />
+      )}
+      {isInvitingMember && (
+        <InviteMemberPopup
+          onInvited={() => {
+            toast.success('Invite sent');
+            getTeamMemberList().then(() => null);
+            setIsInvitingMember(false);
+          }}
+          onClose={() => {
+            setIsInvitingMember(false);
+          }}
+        />
+      )}
+      <div>
+        <div className="rounded-md border">
+          <div className="flex items-center justify-between gap-2 border-b p-3">
+            <p className="hidden text-sm sm:block">
+              {teamMembers.length} people in the team.
+            </p>
+            <p className="block text-sm sm:hidden">
+              {teamMembers.length} members
+            </p>
+            <LeaveTeamButton teamId={team?._id!} />
+          </div>
+          {joinedMembers.map((member, index) => {
+            return (
+              <TeamMemberItem
+                key={index}
+                member={member}
+                index={index}
+                teamId={teamId}
+                userId={user?.id!}
+                onResendInvite={() => {
+                  resendInvite(teamId, member._id!).finally(() => {
+                    pageProgressMessage.set('');
+                  });
+                }}
+                canManageCurrentTeam={canManageCurrentTeam}
+                onDeleteMember={() => {
+                  deleteMember(teamId, member._id!).finally(() => {
+                    pageProgressMessage.set('');
+                  });
+                }}
+                onUpdateMember={() => {
+                  setMemberToUpdate(member);
+                }}
+                onSendProgressReminder={() => {
+                  handleSendReminder(teamId, member._id!).finally(() => {
+                    pageProgressMessage.set('');
+                  });
+                }}
+              />
+            );
+          })}
+        </div>
+
+        {invitedMembers.length > 0 && (
+          <div className="mt-6">
+            <h3 className="text-xs uppercase text-gray-400">Invited Members</h3>
+            <div className="mt-2 rounded-md border">
+              {invitedMembers.map((member, index) => {
+                return (
+                  <TeamMemberItem
+                    key={index}
+                    member={member}
+                    index={index}
+                    teamId={teamId}
+                    userId={user?.id!}
+                    onResendInvite={() => {
+                      resendInvite(teamId, member._id!).finally(() => {
+                        pageProgressMessage.set('');
+                      });
+                    }}
+                    canManageCurrentTeam={canManageCurrentTeam}
+                    onDeleteMember={() => {
+                      deleteMember(teamId, member._id!).finally(() => {
+                        pageProgressMessage.set('');
+                      });
+                    }}
+                    onUpdateMember={() => {
+                      setMemberToUpdate(member);
+                    }}
+                    onSendProgressReminder={() => {
+                      handleSendReminder(teamId, member._id!).finally(() => {
+                        pageProgressMessage.set('');
+                      });
+                    }}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {rejectedMembers.length > 0 && (
+          <div className="mt-6">
+            <h3 className="text-xs uppercase text-gray-400">Rejected Invites</h3>
+            <div className="mt-2 rounded-b-sm rounded-t-md border">
+              {rejectedMembers.map((member, index) => {
+                return (
+                  <TeamMemberItem
+                    key={index}
+                    member={member}
+                    index={index}
+                    teamId={teamId}
+                    userId={user?.id!}
+                    onResendInvite={() => {
+                      resendInvite(teamId, member._id!).finally(() => {
+                        pageProgressMessage.set('');
+                      });
+                    }}
+                    canManageCurrentTeam={canManageCurrentTeam}
+                    onDeleteMember={() => {
+                      deleteMember(teamId, member._id!).finally(() => {
+                        pageProgressMessage.set('');
+                      });
+                    }}
+                    onUpdateMember={() => {
+                      setMemberToUpdate(member);
+                    }}
+                    onSendProgressReminder={() => {
+                      handleSendReminder(teamId, member._id!).finally(() => {
+                        pageProgressMessage.set('');
+                      });
+                    }}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {canManageCurrentTeam && (
+        <div className="mt-4">
+          <button
+            disabled={teamMembers.length >= 25}
+            onClick={() => setIsInvitingMember(true)}
+            className="block w-full rounded-md border border-dashed border-gray-300 py-2 text-sm transition-colors hover:border-gray-600 hover:bg-gray-50 focus:outline-0"
+          >
+            + Invite Member
+          </button>
+        </div>
+      )}
+
+      {teamMembers.length >= 25 && canManageCurrentTeam && (
+        <p className="mt-2 rounded-lg bg-red-100 p-2 text-red-700">
+          You have reached the maximum number of members in a team. Please reach
+          out to us if you need more.
+        </p>
+      )}
+    </div>
+  );
+}

src/components/TeamMembers/UpdateMemberPopup.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { httpPost, httpPut } from '../../lib/http';
+import { useTeamId } from '../../hooks/use-team-id';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { AllowedRoles, RoleDropdown } from '../CreateTeam/RoleDropdown';
+import type { TeamMemberDocument } from './TeamMembersPage';
+
+type InviteMemberPopupProps = {
+  member: TeamMemberDocument;
+  onUpdated: () => void;
+  onClose: () => void;
+};
+
+export function UpdateMemberPopup(props: InviteMemberPopupProps) {
+  const { onClose, onUpdated, member } = props;
+
+  const popupBodyRef = useRef<HTMLDivElement>(null);
+  const [selectedRole, setSelectedRole] = useState<AllowedRoles>(member.role);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const { teamId } = useTeamId();
+
+  const handleSubmit = async (e: Event) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    const { response, error } = await httpPut(
+      `${import.meta.env.PUBLIC_API_URL}/v1-update-member-role/${teamId}/${
+        member._id
+      }`,
+      { role: selectedRole }
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      setError(error?.message || 'Something went wrong');
+      return;
+    }
+
+    setIsLoading(false);
+    onUpdated();
+  };
+
+  const handleClosePopup = () => {
+    setIsLoading(false);
+    setError('');
+
+    onClose();
+  };
+
+  useOutsideClick(popupBodyRef, handleClosePopup);
+
+  return (
+    <div class="popup fixed left-0 right-0 top-0 z-50 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50">
+      <div class="relative h-full w-full max-w-md p-4 md:h-auto">
+        <div
+          ref={popupBodyRef}
+          class="popup-body relative rounded-lg bg-white p-4 shadow"
+        >
+          <h3 class="mb-1.5 text-xl sm:text-2xl font-medium">Update Role</h3>
+          <p className="mb-3 text-sm leading-none text-gray-400 hidden sm:block">
+            Select the role to update for this member
+          </p>
+
+          <form onSubmit={handleSubmit}>
+            <div className="mt-0 sm:mt-4 my-4 flex flex-col gap-2">
+              <span className="mt-2 block w-full rounded-md bg-gray-100 p-2">
+                {member.invitedEmail}
+              </span>
+
+              <div className="flex h-[42px] w-full flex-col">
+                <RoleDropdown
+                  className="h-full w-full"
+                  selectedRole={selectedRole}
+                  setSelectedRole={setSelectedRole}
+                />
+              </div>
+
+              {error && (
+                <p className=" rounded-md border border-red-300 bg-red-50 p-2 text-sm text-red-700">
+                  {error}
+                </p>
+              )}
+            </div>
+
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                disabled={isLoading}
+                onClick={handleClosePopup}
+                className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+              >
+                Cancel
+              </button>
+              <button
+                type="submit"
+                disabled={isLoading || !selectedRole}
+                class="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
+              >
+                {isLoading ? 'Please wait ..' : 'Update Role'}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/TeamProgress/GroupRoadmapItem.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'preact/hooks';
+import type { GroupByRoadmap, TeamMember } from './TeamProgressPage';
+import { getUrlParams } from '../../lib/browser';
+import ExternalLinkIcon from '../../icons/external-link.svg';
+import { useAuth } from '../../hooks/use-auth';
+
+type GroupRoadmapItemProps = {
+  roadmap: GroupByRoadmap;
+  onShowResourceProgress: (member: TeamMember, resourceId: string) => void;
+};
+
+export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
+  const { onShowResourceProgress } = props;
+  const { members, resourceTitle, resourceId } = props.roadmap;
+
+  const { t: teamId } = getUrlParams();
+  const user = useAuth();
+
+  const [showAll, setShowAll] = useState(false);
+
+  return (
+    <>
+      <div className="flex h-full min-h-[270px] flex-col rounded-md border">
+        <div className="flex items-center gap-3 border-b p-3">
+          <div className="flex min-w-0 flex-grow items-center justify-between">
+            <h3 className="truncate font-medium">{resourceTitle}</h3>
+            <a
+              href={`/${resourceId}?t=${teamId}`}
+              className="group mb-0.5 flex shrink-0 items-center justify-between text-base font-medium leading-none text-black"
+              target={'_blank'}
+            >
+              <img
+                alt={'link'}
+                src={ExternalLinkIcon}
+                className="ml-2 h-4 w-4 opacity-20 transition-opacity group-hover:opacity-100"
+              />
+            </a>
+          </div>
+        </div>
+        <div className="relative flex grow flex-col space-y-2 p-3">
+          {(showAll ? members : members.slice(0, 4)).map((member) => {
+            const isMyProgress = user?.email === member?.member?.email;
+
+            if (!member.progress) {
+              return null;
+            }
+
+            return (
+              <button
+                className={`group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none ${
+                  isMyProgress ? 'border-green-500 hover:border-green-600' : ''
+                }`}
+                key={member?.member._id}
+                onClick={() => {
+                  onShowResourceProgress(
+                    member.member,
+                    member.progress?.resourceId!
+                  );
+                }}
+              >
+                <span className="relative z-10 flex items-center justify-between gap-1 text-sm">
+                  <span className="inline-grid grid-cols-[20px_auto] gap-3">
+                    <img
+                      src={
+                        member.member.avatar
+                          ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${
+                              member.member.avatar
+                            }`
+                          : '/images/default-avatar.png'
+                      }
+                      alt={member.member.name || ''}
+                      className="h-5 w-5 shrink-0 rounded-full"
+                    />
+                    <span className="inline-grid grid-cols-[auto,32px] items-center">
+                      <span className="mr-[5px] truncate">
+                        {member?.member?.name}
+                      </span>
+                    </span>
+                  </span>
+                  <span className="shrink-0 text-xs text-gray-400">
+                    {member?.progress?.done} / {member?.progress?.total}
+                  </span>
+                </span>
+                <span
+                  className={`absolute inset-0 ${
+                    isMyProgress
+                      ? 'bg-green-100 group-hover:bg-green-200'
+                      : 'bg-gray-100 group-hover:bg-gray-200'
+                  }`}
+                  style={{
+                    width: `${
+                      (member?.progress?.done / member?.progress?.total) * 100
+                    }%`,
+                  }}
+                />
+              </button>
+            );
+          })}
+
+          {members.length > 4 && !showAll && (
+            <button
+              onClick={() => setShowAll(true)}
+              className={'text-sm text-gray-400 underline'}
+            >
+              + {members.length - 4} more
+            </button>
+          )}
+
+          {showAll && (
+            <button
+              onClick={() => setShowAll(false)}
+              className={'text-sm text-gray-400 underline'}
+            >
+              - Show less
+            </button>
+          )}
+
+          {members.length === 0 && (
+            <div className="text-sm text-gray-500">No progress</div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

src/components/TeamProgress/MemberProgressItem.tsx

@@ -0,0 +1,104 @@
+import type { TeamMember } from './TeamProgressPage';
+import { useState } from 'preact/hooks';
+
+type MemberProgressItemProps = {
+  member: TeamMember;
+  onShowResourceProgress: (resourceId: string) => void;
+  isMyProgress?: boolean;
+};
+export function MemberProgressItem(props: MemberProgressItemProps) {
+  const { member, onShowResourceProgress, isMyProgress = false } = props;
+
+  const memberProgress = member?.progress?.sort((a, b) => {
+    return b.done - a.done;
+  });
+
+  const [showAll, setShowAll] = useState(false);
+
+  return (
+    <>
+      <div
+        className={`flex h-full min-h-[270px] flex-col overflow-hidden rounded-md border`}
+        key={member._id}
+      >
+        <div className={`relative flex items-center gap-3 border-b p-3`}>
+          <img
+            src={
+              member.avatar
+                ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${member.avatar}`
+                : '/images/default-avatar.png'
+            }
+            alt={member.name || ''}
+            className="h-8 w-8 rounded-full"
+          />
+          <div className="inline-grid w-full">
+            {!isMyProgress && (
+              <h3 className="truncate font-medium">{member.name}</h3>
+            )}
+            {isMyProgress && (
+              <div className="inline-grid grid-cols-[auto,32px] items-center gap-1.5">
+                <h3 className="truncate font-medium">{member.name}</h3>
+                <span className="rounded-md bg-red-500 px-1 py-0.5 text-xs text-white">
+                  You
+                </span>
+              </div>
+            )}
+            <p className="truncate text-sm text-gray-500">{member.email}</p>
+          </div>
+        </div>
+        <div className="relative flex grow flex-col space-y-2 p-3">
+          {(showAll ? memberProgress : memberProgress.slice(0, 4)).map(
+            (progress) => {
+              return (
+                <button
+                  onClick={() => onShowResourceProgress(progress.resourceId)}
+                  className="group relative overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none"
+                  key={progress.resourceId}
+                >
+                  <span className="relative z-10 flex items-center justify-between text-sm">
+                    <span className="inline-grid">
+                      <span className={'truncate'}>
+                        {progress.resourceTitle}
+                      </span>
+                    </span>
+                    <span className="ml-1.5 shrink-0 text-xs text-gray-400">
+                      {progress.done} / {progress.total}
+                    </span>
+                  </span>
+                  <span
+                    className="absolute inset-0 bg-gray-100 group-hover:bg-gray-200"
+                    style={{
+                      width: `${(progress.done / progress.total) * 100}%`,
+                    }}
+                  />
+                </button>
+              );
+            }
+          )}
+
+          {memberProgress.length > 4 && !showAll && (
+            <button
+              onClick={() => setShowAll(true)}
+              className={'text-sm text-gray-400 underline'}
+            >
+              + {memberProgress.length - 4} more
+            </button>
+          )}
+
+          {showAll && (
+            <button
+              onClick={() => setShowAll(false)}
+              className={'text-sm text-gray-400 underline'}
+            >
+              - Show less
+            </button>
+          )}
+
+          {memberProgress.length === 0 && (
+            <div className="text-sm text-gray-500">No progress</div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}