feat: add ai course generator (#8322)

* Course landing page

* Add ai course page

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip: error handling

* wip

* wip

* wip

* wip: ai course progress

* wip

* wip

* wip

* feat: code highlighting

* feat: usage limit

* feat: follow up message

* Update UI

* wip

* Add course content

* wip: autogrow textarea & examples

* Update types

* Update

* fix: add highlight to the AI chat

* UI changes

* Refactor

* Update

* Improve outline style

* Improve spacing

* Improve spacing

* UI changes for sidebar

* Update UI for sidebar

* Improve course UI

* Mark done, undone

* Add toggle lesson done/undone

* Update forward backward UI

* wip

* Minor ui change

* Responsiveness of sidebar

* wip

* wip

* wip: billing page

* wip

* Update UI

* fix: hide upgrade if paid user

* feat: token usage

* feat: list ai courses

* fix: limit for followup

* Course content responsiveness

* Make course content responsive

* Responsiveness

* Outline button

* Responsiveness of course content

* Responsiveness of course content

* Add course upgrade button

* Update design for upgrade

* Improve logic for upgrade and limits button

* Limits and errors

* Add lesson count

* Add course card

* Improve UI for course generator

* Update course functionality

* Refactor AI course generation

* Responsiveness of screen

* Improve

* Add responsiveness

* Improve empty billing page design

* Add empty billing screen

* Update UI for billing page

* Update UI for billing page

* Update UI for billing page

* Update billing page design

* Update

* Remove sidebar

* Update

---------

Co-authored-by: Arik Chakma <arikchangma@gmail.com>

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1739229597159
+		"lastUpdateCheck": 1741697790683
 	}
 }

.env.example

@@ -1,4 +1,10 @@
 PUBLIC_API_URL=https://api.roadmap.sh
 PUBLIC_AVATAR_BASE_URL=https://dodrc8eu8m09s.cloudfront.net/avatars
 PUBLIC_EDITOR_APP_URL=https://draw.roadmap.sh
-PUBLIC_COURSE_APP_URL=http://localhost:5173
+PUBLIC_COURSE_APP_URL=http://localhost:5173
+
+PUBLIC_STRIPE_INDIVIDUAL_MONTHLY_PRICE_ID=
+PUBLIC_STRIPE_INDIVIDUAL_YEARLY_PRICE_ID=
+
+PUBLIC_STRIPE_INDIVIDUAL_MONTHLY_PRICE_AMOUNT=10
+PUBLIC_STRIPE_INDIVIDUAL_YEARLY_PRICE_AMOUNT=100

package.json

@@ -53,6 +53,7 @@
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.452.0",
     "luxon": "^3.5.0",
+    "markdown-it-async": "^2.0.0",
     "nanoid": "^5.0.7",
     "nanostores": "^0.11.3",
     "node-html-parser": "^6.1.13",
@@ -63,6 +64,7 @@
     "react-calendar-heatmap": "^1.9.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.3.1",
+    "react-textarea-autosize": "^8.5.7",
     "react-tooltip": "^5.28.0",
     "reactflow": "^11.11.4",
     "rehype-external-links": "^3.0.0",
@@ -72,6 +74,7 @@
     "satori": "^0.11.2",
     "satori-html": "^0.3.2",
     "sharp": "^0.33.5",
+    "shiki": "^3.1.0",
     "slugify": "^1.6.6",
     "tailwind-merge": "^2.5.3",
     "tailwindcss": "^3.4.13",

pnpm-lock.yaml

@@ -80,6 +80,9 @@ importers:
       luxon:
         specifier: ^3.5.0
         version: 3.5.0
+      markdown-it-async:
+        specifier: ^2.0.0
+        version: 2.0.0
       nanoid:
         specifier: ^5.0.7
         version: 5.0.9
@@ -110,6 +113,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-textarea-autosize:
+        specifier: ^8.5.7
+        version: 8.5.7(@types/react@18.3.18)(react@18.3.1)
       react-tooltip:
         specifier: ^5.28.0
         version: 5.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -137,6 +143,9 @@ importers:
       sharp:
         specifier: ^0.33.5
         version: 0.33.5
+      shiki:
+        specifier: ^3.1.0
+        version: 3.1.0
       slugify:
         specifier: ^1.6.6
         version: 1.6.6
@@ -396,6 +405,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.26.9':
+    resolution: {integrity: sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.25.9':
     resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
     engines: {node: '>=6.9.0'}
@@ -1179,24 +1192,45 @@ packages:
   '@shikijs/core@1.29.1':
     resolution: {integrity: sha512-Mo1gGGkuOYjDu5H8YwzmOuly9vNr8KDVkqj9xiKhhhFS8jisAtDSEWB9hzqRHLVQgFdA310e8XRJcW4tYhRB2A==}
 
+  '@shikijs/core@3.1.0':
+    resolution: {integrity: sha512-1ppAOyg3F18N8Ge9DmJjGqRVswihN33rOgPovR6gUHW17Hw1L4RlRhnmVQcsacSHh0A8IO1FIgNbtTxUFwodmg==}
+
   '@shikijs/engine-javascript@1.29.1':
     resolution: {integrity: sha512-Hpi8k9x77rCQ7F/7zxIOUruNkNidMyBnP5qAGbLFqg4kRrg1HZhkB8btib5EXbQWTtLb5gBHOdBwshk20njD7Q==}
 
+  '@shikijs/engine-javascript@3.1.0':
+    resolution: {integrity: sha512-/LwkhW17jYi7uPcdaaSQQDNW+xgrHXarkrxYPoC6WPzH2xW5mFMw12doHXJBqxmYvtcTbaatcv2MkH9+3PU1FA==}
+
   '@shikijs/engine-oniguruma@1.29.1':
     resolution: {integrity: sha512-gSt2WhLNgEeLstcweQOSp+C+MhOpTsgdNXRqr3zP6M+BUBZ8Md9OU2BYwUYsALBxHza7hwaIWtFHjQ/aOOychw==}
 
+  '@shikijs/engine-oniguruma@3.1.0':
+    resolution: {integrity: sha512-reRgy8VzDPdiDocuGDD60Rk/jLxgcgy+6H4n6jYLeN2Yw5ikasRjQQx8ERXtDM35yg2v/d6KolDBcK8hYYhcmw==}
+
   '@shikijs/langs@1.29.1':
     resolution: {integrity: sha512-iERn4HlyuT044/FgrvLOaZgKVKf3PozjKjyV/RZ5GnlyYEAZFcgwHGkYboeBv2IybQG1KVS/e7VGgiAU4JY2Gw==}
 
+  '@shikijs/langs@3.1.0':
+    resolution: {integrity: sha512-hAM//sExPXAXG3ZDWjrmV6Vlw4zlWFOcT1ZXNhFRBwPP27scZu/ZIdZ+TdTgy06zSvyF4KIjnF8j6+ScKGu6ww==}
+
   '@shikijs/themes@1.29.1':
     resolution: {integrity: sha512-lb11zf72Vc9uxkl+aec2oW1HVTHJ2LtgZgumb4Rr6By3y/96VmlU44bkxEb8WBWH3RUtbqAJEN0jljD9cF7H7g==}
 
+  '@shikijs/themes@3.1.0':
+    resolution: {integrity: sha512-A4MJmy9+ydLNbNCtkmdTp8a+ON+MMXoUe1KTkELkyu0+pHGOcbouhNuobhZoK59cL4cOST6CCz1x+kUdkp9UZA==}
+
   '@shikijs/types@1.29.1':
     resolution: {integrity: sha512-aBqAuhYRp5vSir3Pc9+QPu9WESBOjUo03ao0IHLC4TyTioSsp/SkbAZSrIH4ghYYC1T1KTEpRSBa83bas4RnPA==}
 
+  '@shikijs/types@3.1.0':
+    resolution: {integrity: sha512-F8e7Fy4ihtcNpJG572BZZC1ErYrBrzJ5Cbc9Zi3REgWry43gIvjJ9lFAoUnuy7Bvy4IFz7grUSxL5edfrrjFEA==}
+
   '@shikijs/vscode-textmate@10.0.1':
     resolution: {integrity: sha512-fTIQwLF+Qhuws31iw7Ncl1R3HUDtGwIipiJ9iU+UsDUwMhegFcQKQHd51nZjb7CArq0MvON8rbgCGQYWHUKAdg==}
 
+  '@shikijs/vscode-textmate@10.0.2':
+    resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
+
   '@shuding/opentype.js@1.4.0-beta.0':
     resolution: {integrity: sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==}
     engines: {node: '>= 8.0.0'}
@@ -2090,6 +2124,9 @@ packages:
   hast-util-to-html@9.0.4:
     resolution: {integrity: sha512-wxQzXtdbhiwGAUKrnQJXlOPmHnEehzphwkK7aluUPQ+lEc1xefC8pblMgpp2w5ldBTEfveRIrADcrhGIWrlTDA==}
 
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
   hast-util-to-parse5@8.0.0:
     resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
 
@@ -2343,6 +2380,9 @@ packages:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
 
+  markdown-it-async@2.0.0:
+    resolution: {integrity: sha512-jBthmQR5MwXR9Y8Y0teRoZAenaKQMdjuTfpbNARqMBSRPvyzyXCVduHZHakyyhL3ugIacCobXJrO07t277sIjw==}
+
   markdown-it-task-lists@2.1.1:
     resolution: {integrity: sha512-TxFAc76Jnhb2OUu+n3yz9RMu4CwGfaT788br6HhEDlvWfdeJcLUsxk1Hgw2yJio0OXsxv7pyIPmvECY7bMbluA==}
 
@@ -2603,6 +2643,9 @@ packages:
   oniguruma-to-es@2.3.0:
     resolution: {integrity: sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g==}
 
+  oniguruma-to-es@3.1.1:
+    resolution: {integrity: sha512-bUH8SDvPkH3ho3dvwJwfonjlQ4R80vjyvrU8YpxuROddv55vAEJrTuCuCVUhhsHbtlD9tGGbaNApGQckXhS8iQ==}
+
   openai@4.80.1:
     resolution: {integrity: sha512-+6+bbXFwbIE88foZsBEt36bPkgZPdyFN82clAXG61gnHb2gXdZApDyRrcAHqEtpYICywpqaNo57kOm9dtnb7Cw==}
     hasBin: true
@@ -2847,6 +2890,9 @@ packages:
   property-information@6.5.0:
     resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
 
+  property-information@7.0.0:
+    resolution: {integrity: sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==}
+
   prosemirror-changeset@2.2.1:
     resolution: {integrity: sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==}
 
@@ -2942,6 +2988,12 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
+  react-textarea-autosize@8.5.7:
+    resolution: {integrity: sha512-2MqJ3p0Jh69yt9ktFIaZmORHXw4c4bxSIhCeWiFwmJ9EYKgLmuNII3e9c9b2UO+ijl4StnpZdqpxNIhTdHvqtQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   react-tooltip@5.28.0:
     resolution: {integrity: sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg==}
     peerDependencies:
@@ -2965,15 +3017,24 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
   regex-recursion@5.1.1:
     resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==}
 
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
   regex-utilities@2.3.0:
     resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
 
   regex@5.1.1:
     resolution: {integrity: sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==}
 
+  regex@6.0.1:
+    resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
+
   rehype-external-links@3.0.0:
     resolution: {integrity: sha512-yp+e5N9V3C6bwBeAC4n796kc86M4gJCdlVhiMTxIrJG5UHDMh+PJANf9heqORJbt1nrCbDwIlAZKjANIaVBbvw==}
 
@@ -3110,6 +3171,9 @@ packages:
   shiki@1.29.1:
     resolution: {integrity: sha512-TghWKV9pJTd/N+IgAIVJtr0qZkB7FfFCUrrEJc0aRmZupo3D1OCVRknQWVRVA7AX/M0Ld7QfoAruPzr3CnUJuw==}
 
+  shiki@3.1.0:
+    resolution: {integrity: sha512-LdTNyWQlC5zdCaHdcp1zPA1OVA2ivb+KjGOOnGcy02tGaF5ja+dGibWFH7Ar8YlngUgK/scDqworK18Ys9cbYA==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -3348,6 +3412,33 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  use-composed-ref@1.4.0:
+    resolution: {integrity: sha512-djviaxuOOh7wkj0paeO1Q/4wMZ8Zrnag5H6yBvzN7AKKe8beOaED9SF5/ByLqsku8NP4zQqsvM2u3ew/tJK8/w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-isomorphic-layout-effect@1.2.0:
+    resolution: {integrity: sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-latest@1.3.0:
+    resolution: {integrity: sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   use-sync-external-store@1.4.0:
     resolution: {integrity: sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==}
     peerDependencies:
@@ -3743,6 +3834,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/runtime@7.26.9':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
   '@babel/template@7.25.9':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -4336,32 +4431,65 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.4
 
+  '@shikijs/core@3.1.0':
+    dependencies:
+      '@shikijs/types': 3.1.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
   '@shikijs/engine-javascript@1.29.1':
     dependencies:
       '@shikijs/types': 1.29.1
       '@shikijs/vscode-textmate': 10.0.1
       oniguruma-to-es: 2.3.0
 
+  '@shikijs/engine-javascript@3.1.0':
+    dependencies:
+      '@shikijs/types': 3.1.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 3.1.1
+
   '@shikijs/engine-oniguruma@1.29.1':
     dependencies:
       '@shikijs/types': 1.29.1
       '@shikijs/vscode-textmate': 10.0.1
 
+  '@shikijs/engine-oniguruma@3.1.0':
+    dependencies:
+      '@shikijs/types': 3.1.0
+      '@shikijs/vscode-textmate': 10.0.2
+
   '@shikijs/langs@1.29.1':
     dependencies:
       '@shikijs/types': 1.29.1
 
+  '@shikijs/langs@3.1.0':
+    dependencies:
+      '@shikijs/types': 3.1.0
+
   '@shikijs/themes@1.29.1':
     dependencies:
       '@shikijs/types': 1.29.1
 
+  '@shikijs/themes@3.1.0':
+    dependencies:
+      '@shikijs/types': 3.1.0
+
   '@shikijs/types@1.29.1':
     dependencies:
       '@shikijs/vscode-textmate': 10.0.1
       '@types/hast': 3.0.4
 
+  '@shikijs/types@3.1.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   '@shikijs/vscode-textmate@10.0.1': {}
 
+  '@shikijs/vscode-textmate@10.0.2': {}
+
   '@shuding/opentype.js@1.4.0-beta.0':
     dependencies:
       fflate: 0.7.4
@@ -5381,6 +5509,20 @@ snapshots:
       stringify-entities: 4.0.4
       zwitch: 2.0.4
 
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.0
+      property-information: 7.0.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
   hast-util-to-parse5@8.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -5611,6 +5753,11 @@ snapshots:
     dependencies:
       semver: 6.3.1
 
+  markdown-it-async@2.0.0:
+    dependencies:
+      '@types/markdown-it': 14.1.2
+      markdown-it: 14.1.0
+
   markdown-it-task-lists@2.1.1: {}
 
   markdown-it@14.1.0:
@@ -6027,6 +6174,12 @@ snapshots:
       regex: 5.1.1
       regex-recursion: 5.1.1
 
+  oniguruma-to-es@3.1.1:
+    dependencies:
+      emoji-regex-xs: 1.0.0
+      regex: 6.0.1
+      regex-recursion: 6.0.2
+
   openai@4.80.1(zod@3.24.1):
     dependencies:
       '@types/node': 18.19.74
@@ -6214,6 +6367,8 @@ snapshots:
 
   property-information@6.5.0: {}
 
+  property-information@7.0.0: {}
+
   prosemirror-changeset@2.2.1:
     dependencies:
       prosemirror-transform: 1.10.2
@@ -6348,6 +6503,15 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
+  react-textarea-autosize@8.5.7(@types/react@18.3.18)(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.26.9
+      react: 18.3.1
+      use-composed-ref: 1.4.0(@types/react@18.3.18)(react@18.3.1)
+      use-latest: 1.3.0(@types/react@18.3.18)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+
   react-tooltip@5.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@floating-ui/dom': 1.6.13
@@ -6381,17 +6545,27 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  regenerator-runtime@0.14.1: {}
+
   regex-recursion@5.1.1:
     dependencies:
       regex: 5.1.1
       regex-utilities: 2.3.0
 
+  regex-recursion@6.0.2:
+    dependencies:
+      regex-utilities: 2.3.0
+
   regex-utilities@2.3.0: {}
 
   regex@5.1.1:
     dependencies:
       regex-utilities: 2.3.0
 
+  regex@6.0.1:
+    dependencies:
+      regex-utilities: 2.3.0
+
   rehype-external-links@3.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -6655,6 +6829,17 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.1
       '@types/hast': 3.0.4
 
+  shiki@3.1.0:
+    dependencies:
+      '@shikijs/core': 3.1.0
+      '@shikijs/engine-javascript': 3.1.0
+      '@shikijs/engine-oniguruma': 3.1.0
+      '@shikijs/langs': 3.1.0
+      '@shikijs/themes': 3.1.0
+      '@shikijs/types': 3.1.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   signal-exit@4.1.0: {}
 
   simple-swizzle@0.2.2:
@@ -6912,6 +7097,25 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  use-composed-ref@1.4.0(@types/react@18.3.18)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  use-isomorphic-layout-effect@1.2.0(@types/react@18.3.18)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.18
+
+  use-latest@1.3.0(@types/react@18.3.18)(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      use-isomorphic-layout-effect: 1.2.0(@types/react@18.3.18)(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.18
+
   use-sync-external-store@1.4.0(react@18.3.1):
     dependencies:
       react: 18.3.1

src/api/ai-roadmap.ts

@@ -18,3 +18,16 @@ export function aiRoadmapApi(context: APIContext) {
     },
   };
 }
+
+export interface AICourseDocument {
+  _id: string;
+  userId: string;
+  title: string;
+  slug?: string;
+  keyword: string;
+  difficulty: string;
+  data: string;
+  viewCount: number;
+  createdAt: Date;
+  updatedAt: Date;
+}

src/components/AccountSidebar.astro

@@ -27,7 +27,7 @@ const sidebarLinks = [
     href: '/account/update-profile',
     title: 'Profile',
     id: 'profile',
-    isNew: true,
+    isNew: false,
     icon: {
       glyph: 'user',
       classes: 'h-4 w-4',
@@ -56,7 +56,7 @@ const sidebarLinks = [
   },
   {
     href: '/account/road-card',
-    title: 'Card',
+    title: 'Road Card',
     id: 'road-card',
     isNew: false,
     icon: {
@@ -64,6 +64,16 @@ const sidebarLinks = [
       classes: 'h-4 w-4',
     },
   },
+  // {
+  //   href: '/account/billing',
+  //   title: 'Billing',
+  //   id: 'billing',
+  //   isNew: true,
+  //   icon: {
+  //     glyph: 'credit-card',
+  //     classes: 'h-4 w-4',
+  //   },
+  // },
   {
     href: '/account/settings',
     title: 'Settings',
@@ -97,7 +107,7 @@ const sidebarLinks = [
         }`}
       >
         <AstroIcon icon={'users'} class={`h-4 w-4 mr-2`} />
-         Teams
+        Teams
       </a>
     </li>
     {

src/components/Billing/BillingPage.tsx

@@ -0,0 +1,219 @@
+import { useEffect, useState } from 'react';
+import { pageProgressMessage } from '../../stores/page';
+import { useToast } from '../../hooks/use-toast';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import {
+  billingDetailsOptions,
+  USER_SUBSCRIPTION_PLAN_PRICES,
+} from '../../queries/billing';
+import { queryClient } from '../../stores/query-client';
+import { httpPost } from '../../lib/query-http';
+import { UpgradeAccountModal } from './UpgradeAccountModal';
+import { getUrlParams } from '../../lib/browser';
+import { VerifyUpgrade } from './VerifyUpgrade';
+import { EmptyBillingScreen } from './EmptyBillingScreen';
+import {
+  Calendar,
+  RefreshCw,
+  Loader2,
+  AlertTriangle,
+  CreditCard,
+  ArrowRightLeft,
+} from 'lucide-react';
+
+export type CreateCustomerPortalBody = {};
+
+export type CreateCustomerPortalResponse = {
+  url: string;
+};
+
+export function BillingPage() {
+  const toast = useToast();
+
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const [showVerifyUpgradeModal, setShowVerifyUpgradeModal] = useState(false);
+
+  const { data: billingDetails, isPending: isLoadingBillingDetails } = useQuery(
+    billingDetailsOptions(),
+    queryClient,
+  );
+
+  const {
+    mutate: createCustomerPortal,
+    isSuccess: isCreatingCustomerPortalSuccess,
+    isPending: isCreatingCustomerPortal,
+  } = useMutation(
+    {
+      mutationFn: (body: CreateCustomerPortalBody) => {
+        return httpPost<CreateCustomerPortalResponse>(
+          '/v1-create-customer-portal',
+          body,
+        );
+      },
+      onSuccess: (data) => {
+        window.location.href = data.url;
+      },
+      onError: (error) => {
+        console.error(error);
+        toast.error(error?.message || 'Failed to Create Customer Portal');
+      },
+    },
+    queryClient,
+  );
+
+  useEffect(() => {
+    if (isLoadingBillingDetails) {
+      return;
+    }
+
+    pageProgressMessage.set('');
+    const shouldVerifyUpgrade = getUrlParams()?.s === '1';
+    if (shouldVerifyUpgrade) {
+      setShowVerifyUpgradeModal(true);
+    }
+  }, [isLoadingBillingDetails]);
+
+  if (isLoadingBillingDetails || !billingDetails) {
+    return null;
+  }
+
+  const selectedPlanDetails = USER_SUBSCRIPTION_PLAN_PRICES.find(
+    (plan) => plan.priceId === billingDetails?.priceId,
+  );
+
+  const shouldHideDeleteButton =
+    billingDetails?.status === 'canceled' || billingDetails?.cancelAtPeriodEnd;
+  const priceDetails = selectedPlanDetails;
+
+  const formattedNextBillDate = new Date(
+    billingDetails?.currentPeriodEnd || '',
+  ).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+
+  return (
+    <>
+      {showUpgradeModal && (
+        <UpgradeAccountModal
+          onClose={() => {
+            setShowUpgradeModal(false);
+          }}
+          success="/account/billing?s=1"
+          cancel="/account/billing"
+        />
+      )}
+
+      {showVerifyUpgradeModal && <VerifyUpgrade />}
+
+      {billingDetails?.status === 'none' && !isLoadingBillingDetails && (
+        <EmptyBillingScreen onUpgrade={() => setShowUpgradeModal(true)} />
+      )}
+
+      {billingDetails?.status !== 'none' &&
+        !isLoadingBillingDetails &&
+        priceDetails && (
+          <div className="mt-1">
+            {billingDetails?.status === 'past_due' && (
+              <div className="mb-6 flex items-center gap-2 rounded-lg border border-red-300 bg-red-50 p-4 text-sm text-red-600">
+                <AlertTriangle className="h-5 w-5" />
+                <span>
+                  We were not able to charge your card.{' '}
+                  <button
+                    disabled={
+                      isCreatingCustomerPortal ||
+                      isCreatingCustomerPortalSuccess
+                    }
+                    onClick={() => {
+                      createCustomerPortal({});
+                    }}
+                    className="font-semibold underline underline-offset-4 disabled:cursor-not-allowed disabled:opacity-50"
+                  >
+                    Update payment information.
+                  </button>
+                </span>
+              </div>
+            )}
+
+            <h2 className="mb-2 text-xl font-semibold text-black">
+              Current Subscription
+            </h2>
+
+            <p className="text-sm text-gray-500">
+              Thank you for being a pro member. Your plan details are below.
+            </p>
+
+            <div className="mt-8 flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
+              <div className="flex items-center gap-4">
+                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
+                  <RefreshCw className="size-5 text-gray-600" />
+                </div>
+                <div>
+                  <span className="text-xs uppercase tracking-wider text-gray-400">
+                    Payment
+                  </span>
+                  <h3 className="flex items-baseline text-lg font-semibold text-black">
+                    ${priceDetails.amount}
+                    <span className="ml-1 text-sm font-normal text-gray-500">
+                      / {priceDetails.interval}
+                    </span>
+                  </h3>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-6 border-t border-gray-100 pt-6">
+              <div className="flex items-start gap-4">
+                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
+                  <Calendar className="size-5 text-gray-600" />
+                </div>
+                <div>
+                  <span className="text-xs uppercase tracking-wider text-gray-400">
+                    {billingDetails?.cancelAtPeriodEnd
+                      ? 'Expires On'
+                      : 'Renews On'}
+                  </span>
+                  <h3 className="text-lg font-semibold text-black">
+                    {formattedNextBillDate}
+                  </h3>
+                </div>
+              </div>
+
+              <div className="mt-8 flex gap-3 max-sm:flex-col">
+                {!shouldHideDeleteButton && (
+                  <button
+                    className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 max-sm:flex-grow"
+                    onClick={() => {
+                      setShowUpgradeModal(true);
+                    }}
+                  >
+                    <ArrowRightLeft className="mr-2 h-4 w-4" />
+                    Switch Plan
+                  </button>
+                )}
+
+                <button
+                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  onClick={() => {
+                    createCustomerPortal({});
+                  }}
+                  disabled={
+                    isCreatingCustomerPortal || isCreatingCustomerPortalSuccess
+                  }
+                >
+                  {isCreatingCustomerPortal ||
+                  isCreatingCustomerPortalSuccess ? (
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  ) : (
+                    <CreditCard className="mr-2 h-4 w-4" />
+                  )}
+                  Manage Subscription
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+    </>
+  );
+}

src/components/Billing/CheckSubscriptionVerification.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { getUrlParams } from '../../lib/browser';
+import { VerifyUpgrade } from "./VerifyUpgrade";
+
+export function CheckSubscriptionVerification() {
+  const [shouldVerifyUpgrade, setShouldVerifyUpgrade] = useState(false);
+
+  useEffect(() => {
+    const params = getUrlParams();
+    if (params.s !== '1') {
+      return;
+    }
+
+    setShouldVerifyUpgrade(true);
+  }, []);
+
+  if (!shouldVerifyUpgrade) {
+    return null;
+  }
+
+  return <VerifyUpgrade />;
+}

src/components/Billing/EmptyBillingScreen.tsx

@@ -0,0 +1,83 @@
+import {
+  CreditCard,
+  Ellipsis,
+  HeartHandshake,
+  MessageCircleIcon,
+  SparklesIcon,
+  Zap,
+  CheckCircle,
+} from 'lucide-react';
+
+type EmptyBillingScreenProps = {
+  onUpgrade: () => void;
+};
+
+const perks = [
+  {
+    icon: Zap,
+    text: 'Unlimited AI course generations',
+  },
+  {
+    icon: MessageCircleIcon,
+    text: 'Unlimited AI Chat feature usage',
+  },
+  {
+    icon: SparklesIcon,
+    text: 'Early access to new features',
+  },
+  {
+    icon: HeartHandshake,
+    text: 'Support the development of platform',
+  },
+  {
+    icon: Ellipsis,
+    text: 'more perks coming soon!',
+  },
+];
+
+export function EmptyBillingScreen(props: EmptyBillingScreenProps) {
+  const { onUpgrade } = props;
+
+  return (
+    <div className="mt-6 max-w-3xl">
+      <h2 className="mb-6 text-2xl font-bold text-black">Subscription Details</h2>
+      
+      <div className="overflow-hidden rounded-lg bg-white shadow-sm">
+        <div className="p-6">
+          <div className="flex flex-col items-center text-center">
+            <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100">
+              <CreditCard className="h-8 w-8 text-gray-500" />
+            </div>
+            
+            <h3 className="mt-4 text-xl font-semibold text-black">
+              No Active Subscription
+            </h3>
+
+            <p className="mt-2 max-w-md text-balance text-gray-600">
+              Unlock premium benefits by upgrading to a subscription
+            </p>
+
+            <div className="mt-6 w-full max-w-md rounded-lg border border-gray-200 bg-gray-50 p-4">
+              <h4 className="mb-3 font-medium text-gray-800">Premium Benefits</h4>
+              <div className="flex flex-col gap-3">
+                {perks.map((perk) => (
+                  <div className="flex items-center gap-2 text-gray-700" key={perk.text}>
+                    <CheckCircle className="h-5 w-5 text-green-500" />
+                    <span>{perk.text}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            <button
+              onClick={onUpgrade}
+              className="mt-6 inline-flex items-center justify-center rounded-md bg-black px-6 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-black/80 focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2"
+            >
+              Upgrade Account
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Billing/UpdatePlanConfirmation.tsx

@@ -0,0 +1,96 @@
+import { useMutation } from '@tanstack/react-query';
+import type { USER_SUBSCRIPTION_PLAN_PRICES } from '../../queries/billing';
+import { Modal } from '../Modal';
+import { queryClient } from '../../stores/query-client';
+import { useToast } from '../../hooks/use-toast';
+import { VerifyUpgrade } from './VerifyUpgrade';
+import { Loader2Icon } from 'lucide-react';
+import { httpPost } from '../../lib/query-http';
+
+type UpdatePlanBody = {
+  priceId: string;
+};
+
+type UpdatePlanResponse = {
+  status: 'ok';
+};
+
+type UpdatePlanConfirmationProps = {
+  planDetails: (typeof USER_SUBSCRIPTION_PLAN_PRICES)[number];
+  onClose: () => void;
+  onCancel: () => void;
+};
+
+export function UpdatePlanConfirmation(props: UpdatePlanConfirmationProps) {
+  const { planDetails, onClose, onCancel } = props;
+
+  const toast = useToast();
+  const {
+    mutate: updatePlan,
+    isPending,
+    status,
+  } = useMutation(
+    {
+      mutationFn: (body: UpdatePlanBody) => {
+        return httpPost<UpdatePlanResponse>(
+          '/v1-update-subscription-plan',
+          body,
+        );
+      },
+      onError: (error) => {
+        console.error(error);
+        toast.error(error?.message || 'Failed to Create Customer Portal');
+      },
+    },
+    queryClient,
+  );
+
+  if (!planDetails) {
+    return null;
+  }
+
+  const selectedPrice = planDetails;
+  if (status === 'success') {
+    return <VerifyUpgrade newPriceId={selectedPrice.priceId} />;
+  }
+
+  return (
+    <Modal
+      onClose={isPending ? () => {} : onClose}
+      bodyClassName="rounded-xl bg-white p-6"
+    >
+      <h3 className="text-xl font-bold text-black">Subscription Update</h3>
+      <p className="mt-2 text-balance text-gray-600">
+        Your plan will be updated to the{' '}
+        <b className="text-black">{planDetails.interval}</b> plan, and will
+        be charged{' '}
+        <b className="text-black">
+          ${selectedPrice.amount}/{selectedPrice.interval}
+        </b>
+        .
+      </p>
+
+      <div className="mt-6 grid grid-cols-2 gap-3">
+        <button
+          className="rounded-md border border-gray-200 py-2 text-sm font-semibold hover:bg-gray-50 transition-colors disabled:opacity-50"
+          onClick={onCancel}
+          disabled={isPending}
+        >
+          Cancel
+        </button>
+        <button
+          className="flex items-center justify-center rounded-md bg-purple-600 py-2 text-sm font-semibold text-white hover:bg-purple-500 transition-colors disabled:opacity-50"
+          disabled={isPending}
+          onClick={() => {
+            updatePlan({ priceId: selectedPrice.priceId });
+          }}
+        >
+          {isPending && (
+            <Loader2Icon className="size-4 animate-spin stroke-[2.5] mr-2" />
+          )}
+          {!isPending && 'Confirm'}
+        </button>
+      </div>
+    </Modal>
+  );
+}

src/components/Billing/UpgradeAccountModal.tsx

@@ -0,0 +1,308 @@
+import {
+  Loader2,
+  Zap,
+  Infinity,
+  MessageSquare,
+  Sparkles,
+  Heart,
+} from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { getUser } from '../../lib/jwt';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { Modal } from '../Modal';
+import {
+  billingDetailsOptions,
+  USER_SUBSCRIPTION_PLAN_PRICES,
+  type AllowedSubscriptionInterval,
+} from '../../queries/billing';
+import { cn } from '../../lib/classname';
+import { queryClient } from '../../stores/query-client';
+import { httpPost } from '../../lib/query-http';
+import { useToast } from '../../hooks/use-toast';
+import { UpdatePlanConfirmation } from './UpdatePlanConfirmation';
+
+type CreateSubscriptionCheckoutSessionBody = {
+  priceId: string;
+  success?: string;
+  cancel?: string;
+};
+
+type CreateSubscriptionCheckoutSessionResponse = {
+  checkoutUrl: string;
+};
+
+type UpgradeAccountModalProps = {
+  onClose: () => void;
+
+  success?: string;
+  cancel?: string;
+};
+
+export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
+  const { onClose, success, cancel } = props;
+
+  const [selectedPlan, setSelectedPlan] =
+    useState<AllowedSubscriptionInterval>('month');
+  const [isUpdatingPlan, setIsUpdatingPlan] = useState(false);
+
+  const user = getUser();
+
+  const {
+    data: userBillingDetails,
+    isLoading,
+    error: billingError,
+  } = useQuery(billingDetailsOptions(), queryClient);
+
+  const toast = useToast();
+
+  const {
+    mutate: createCheckoutSession,
+    isPending: isCreatingCheckoutSession,
+  } = useMutation(
+    {
+      mutationFn: (body: CreateSubscriptionCheckoutSessionBody) => {
+        return httpPost<CreateSubscriptionCheckoutSessionResponse>(
+          '/v1-create-subscription-checkout-session',
+          body,
+        );
+      },
+      onSuccess: (data) => {
+        window.location.href = data.checkoutUrl;
+      },
+      onError: (error) => {
+        console.error(error);
+        toast.error(error?.message || 'Failed to create checkout session');
+      },
+    },
+    queryClient,
+  );
+
+  const selectedPlanDetails = USER_SUBSCRIPTION_PLAN_PRICES.find(
+    (plan) => plan.interval === selectedPlan,
+  );
+  const currentPlanPriceId = userBillingDetails?.priceId;
+  const currentPlan = USER_SUBSCRIPTION_PLAN_PRICES.find(
+    (plan) => plan.priceId === currentPlanPriceId,
+  );
+
+  useEffect(() => {
+    if (!currentPlan) {
+      return;
+    }
+
+    setSelectedPlan(currentPlan.interval);
+  }, [currentPlan]);
+
+  if (!user) {
+    return null;
+  }
+
+  const loader = isLoading ? (
+    <div className="absolute inset-0 flex h-[540px] w-full items-center justify-center bg-white">
+      <Loader2 className="h-6 w-6 animate-spin stroke-[3px] text-green-600" />
+    </div>
+  ) : null;
+
+  const error = billingError;
+  const errorContent = error ? (
+    <div className="flex h-full w-full flex-col">
+      <p className="text-center text-red-400">
+        {error?.message ||
+          'An error occurred while loading the billing details.'}
+      </p>
+    </div>
+  ) : null;
+
+  const calculateYearlyPrice = (monthlyPrice: number) => {
+    return (monthlyPrice * 12).toFixed(2);
+  };
+
+  if (isUpdatingPlan && selectedPlanDetails) {
+    return (
+      <UpdatePlanConfirmation
+        planDetails={selectedPlanDetails}
+        onClose={() => setIsUpdatingPlan(false)}
+        onCancel={() => setIsUpdatingPlan(false)}
+      />
+    );
+  }
+
+  return (
+    <Modal
+      onClose={onClose}
+      bodyClassName="p-4 sm:p-6 bg-white"
+      wrapperClassName="h-auto rounded-xl max-w-3xl w-full min-h-[540px] mx-2 sm:mx-4"
+      overlayClassName="items-start md:items-center"
+    >
+      <div onClick={(e) => e.stopPropagation()}>
+        {errorContent}
+
+        {loader}
+        {!isLoading && !error && (
+          <div className="flex flex-col">
+            <div className="mb-6 sm:mb-8 text-left">
+              <h2 className="text-xl sm:text-2xl font-bold text-black">
+                Unlock Premium Features
+              </h2>
+              <p className="mt-1 sm:mt-2 text-sm sm:text-base text-gray-600">
+                Supercharge your learning experience with premium benefits
+              </p>
+            </div>
+
+            <div className="mb-6 sm:mb-8 grid grid-cols-1 gap-4 sm:gap-6 md:grid-cols-2">
+              {USER_SUBSCRIPTION_PLAN_PRICES.map((plan) => {
+                const isCurrentPlanSelected =
+                  currentPlan?.priceId === plan.priceId;
+                const isYearly = plan.interval === 'year';
+
+                return (
+                  <div
+                    key={plan.interval}
+                    className={cn(
+                      'flex flex-col space-y-3 sm:space-y-4 rounded-lg bg-white p-4 sm:p-6',
+                      isYearly
+                        ? 'border-2 border-purple-400'
+                        : 'border border-gray-200',
+                    )}
+                  >
+                    <div className="flex items-start justify-between">
+                      <div>
+                        <h4 className="text-sm sm:text-base font-semibold text-black">
+                          {isYearly ? 'Yearly Payment' : 'Monthly Payment'}
+                        </h4>
+                        {isYearly && (
+                          <span className="text-xs sm:text-sm font-medium text-blue-600">
+                            (2 months free)
+                          </span>
+                        )}
+                      </div>
+                      {isYearly && (
+                        <span className="rounded-full bg-purple-600 px-1.5 py-0.5 sm:px-2 sm:py-1 text-xs font-semibold text-white">
+                          Most Popular
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex items-baseline">
+                      {isYearly && (
+                        <p className="mr-2 text-xs sm:text-sm text-gray-400 line-through">
+                          $
+                          {calculateYearlyPrice(
+                            USER_SUBSCRIPTION_PLAN_PRICES[0].amount,
+                          )}
+                        </p>
+                      )}
+                      <p className="text-2xl sm:text-3xl font-bold text-black">
+                        ${plan.amount}{' '}
+                        <span className="text-xs sm:text-sm font-normal text-gray-500">
+                          / {isYearly ? 'year' : 'month'}
+                        </span>
+                      </p>
+                    </div>
+
+                    <div className="flex-grow"></div>
+
+                    <div>
+                      <button
+                        className={cn(
+                          'flex min-h-9 sm:min-h-11 w-full items-center justify-center rounded-md py-2 sm:py-2.5 text-sm sm:text-base font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-purple-400 disabled:cursor-not-allowed disabled:opacity-60',
+                          'bg-purple-600 text-white hover:bg-purple-500',
+                        )}
+                        disabled={
+                          isCurrentPlanSelected || isCreatingCheckoutSession
+                        }
+                        onClick={() => {
+                          setSelectedPlan(plan.interval);
+                          if (!currentPlanPriceId) {
+                            const currentUrlPath = window.location.pathname;
+                            createCheckoutSession({
+                              priceId: plan.priceId,
+                              success: success || `${currentUrlPath}?s=1`,
+                              cancel: cancel || `${currentUrlPath}?s=0`,
+                            });
+                            return;
+                          }
+                          setIsUpdatingPlan(true);
+                        }}
+                        data-1p-ignore=""
+                        data-form-type="other"
+                        data-lpignore="true"
+                      >
+                        {isCreatingCheckoutSession &&
+                        selectedPlan === plan.interval ? (
+                          <Loader2 className="h-3.5 w-3.5 sm:h-4 sm:w-4 animate-spin" />
+                        ) : isCurrentPlanSelected ? (
+                          'Current Plan'
+                        ) : (
+                          'Select Plan'
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Benefits Section */}
+            <div className="grid grid-cols-1 gap-3 sm:gap-4 md:grid-cols-2">
+              <div className="flex items-start space-x-2 sm:space-x-3">
+                <Zap className="mt-0.5 h-4 w-4 sm:h-5 sm:w-5 text-purple-400" />
+                <div>
+                  <h4 className="text-sm sm:text-base font-medium text-black">
+                    Unlimited AI Course Generations
+                  </h4>
+                  <p className="text-xs sm:text-sm text-gray-600">
+                    Generate as many custom courses as you need
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start space-x-2 sm:space-x-3">
+                <Infinity className="mt-0.5 h-4 w-4 sm:h-5 sm:w-5 text-purple-400" />
+                <div>
+                  <h4 className="text-sm sm:text-base font-medium text-black">
+                    No Daily Limits on course features
+                  </h4>
+                  <p className="text-xs sm:text-sm text-gray-600">
+                    Use all features without restrictions
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start space-x-2 sm:space-x-3">
+                <MessageSquare className="mt-0.5 h-4 w-4 sm:h-5 sm:w-5 text-purple-400" />
+                <div>
+                  <h4 className="text-sm sm:text-base font-medium text-black">
+                    Unlimited Course Follow-ups
+                  </h4>
+                  <p className="text-xs sm:text-sm text-gray-600">
+                    Ask as many questions as you need
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start space-x-2 sm:space-x-3">
+                <Sparkles className="mt-0.5 h-4 w-4 sm:h-5 sm:w-5 text-purple-400" />
+                <div>
+                  <h4 className="text-sm sm:text-base font-medium text-black">
+                    Early Access to Features
+                  </h4>
+                  <p className="text-xs sm:text-sm text-gray-600">
+                    Be the first to try new tools and features
+                  </p>
+                </div>
+              </div>
+              <div className="flex items-start space-x-2 sm:space-x-3">
+                <Heart className="mt-0.5 h-4 w-4 sm:h-5 sm:w-5 text-purple-400" />
+                <div>
+                  <h4 className="text-sm sm:text-base font-medium text-black">
+                    Support Development
+                  </h4>
+                  <p className="text-xs sm:text-sm text-gray-600">
+                    Help us continue building roadmap.sh
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}

src/components/Billing/VerifyUpgrade.tsx

@@ -0,0 +1,76 @@
+import { useEffect } from 'react';
+import { Loader2, CheckCircle } from 'lucide-react';
+import { useQuery } from '@tanstack/react-query';
+import { billingDetailsOptions } from '../../queries/billing';
+import { queryClient } from '../../stores/query-client';
+import { Modal } from '../Modal';
+import { deleteUrlParam } from '../../lib/browser';
+
+type VerifyUpgradeProps = {
+  newPriceId?: string;
+};
+
+export function VerifyUpgrade(props: VerifyUpgradeProps) {
+  const { newPriceId } = props;
+
+  const { data: userBillingDetails } = useQuery(
+    {
+      ...billingDetailsOptions(),
+      refetchInterval: 1000,
+    },
+    queryClient,
+  );
+
+  useEffect(() => {
+    if (!userBillingDetails) {
+      return;
+    }
+
+    if (
+      userBillingDetails.status === 'active' &&
+      (newPriceId ? userBillingDetails.priceId === newPriceId : true)
+    ) {
+      deleteUrlParam('s');
+      window.location.reload();
+    }
+  }, [userBillingDetails]);
+
+  return (
+    <Modal
+      // it's an unique modal, so we don't need to close it
+      // user can close it by refreshing the page
+      onClose={() => {}}
+      bodyClassName="rounded-xl bg-white p-6"
+    >
+      <div className="mb-4 flex flex-col items-center text-center">
+        <CheckCircle className="mb-3 h-12 w-12 text-green-600" />
+        <h3 className="text-xl font-bold text-black">Subscription Activated</h3>
+      </div>
+
+      <p className="mt-2 text-balance text-center text-gray-600">
+        Your subscription has been activated successfully.
+      </p>
+
+      <p className="mt-4 text-balance text-center text-gray-600">
+        It might take a minute for the changes to reflect. We will{' '}
+        <b className="text-black">reload</b> the page for you.
+      </p>
+
+      <div className="my-6 flex animate-pulse items-center justify-center gap-2">
+        <Loader2 className="size-4 animate-spin stroke-[2.5px] text-green-600" />
+        <span className="text-gray-600">Please wait...</span>
+      </div>
+
+      <p className="text-center text-sm text-gray-500">
+        If it takes longer than expected, please email us at{' '}
+        <a
+          href="mailto:info@roadmap.sh"
+          className="text-blue-600 underline underline-offset-2 hover:text-blue-700"
+        >
+          info@roadmap.sh
+        </a>
+        .
+      </p>
+    </Modal>
+  );
+}

src/components/GenerateCourse/AICourse.tsx

@@ -0,0 +1,123 @@
+import { SearchIcon, WandIcon } from 'lucide-react';
+import { useState } from 'react';
+import { cn } from '../../lib/classname';
+import { isLoggedIn } from '../../lib/jwt';
+import { showLoginPopup } from '../../lib/popup';
+import { UserCoursesList } from './UserCoursesList';
+
+export const difficultyLevels = [
+  'beginner',
+  'intermediate',
+  'advanced',
+] as const;
+export type DifficultyLevel = (typeof difficultyLevels)[number];
+
+type AICourseProps = {};
+
+export function AICourse(props: AICourseProps) {
+  const [keyword, setKeyword] = useState('');
+  const [difficulty, setDifficulty] = useState<DifficultyLevel>('beginner');
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && keyword.trim()) {
+      onSubmit();
+    }
+  };
+
+  function onSubmit() {
+    if (!isLoggedIn()) {
+      showLoginPopup();
+      return;
+    }
+
+    window.location.href = `/ai-tutor/search?term=${encodeURIComponent(keyword)}&difficulty=${difficulty}`;
+  }
+
+  return (
+    <section className="flex flex-grow flex-col bg-gray-100">
+      <div className="container mx-auto flex max-w-3xl flex-col py-24 max-sm:py-4">
+        <h1 className="mb-2.5 text-center text-4xl font-bold max-sm:mb-2 max-sm:text-left max-sm:text-xl">
+          Learn anything with AI
+        </h1>
+        <p className="mb-6 text-center text-lg text-gray-600 max-sm:hidden max-sm:text-left max-sm:text-sm">
+          Enter a topic below to generate a personalized course for it
+        </p>
+
+        <div className="rounded-lg border border-gray-200 bg-white p-6 max-sm:p-4">
+          <form
+            className="flex flex-col gap-5"
+            onSubmit={(e) => {
+              e.preventDefault();
+              onSubmit();
+            }}
+          >
+            <div className="flex flex-col">
+              <label
+                htmlFor="keyword"
+                className="mb-2.5 text-sm font-medium text-gray-700"
+              >
+                Course Topic
+              </label>
+              <div className="relative">
+                <div className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">
+                  <SearchIcon size={18} />
+                </div>
+                <input
+                  id="keyword"
+                  type="text"
+                  value={keyword}
+                  onChange={(e) => setKeyword(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder="e.g., Algebra, JavaScript, Photography"
+                  className="w-full rounded-md border border-gray-300 bg-white p-3 pl-10 text-gray-900 focus:outline-none focus:ring-1 focus:ring-gray-500 max-sm:placeholder:text-base"
+                  maxLength={50}
+                />
+              </div>
+            </div>
+
+            <div className="flex flex-col">
+              <label className="mb-2.5 text-sm font-medium text-gray-700">
+                Difficulty Level
+              </label>
+              <div className="flex gap-2 max-sm:flex-col max-sm:gap-1">
+                {difficultyLevels.map((level) => (
+                  <button
+                    key={level}
+                    type="button"
+                    onClick={() => setDifficulty(level)}
+                    className={cn(
+                      'rounded-md border px-4 py-2 capitalize max-sm:text-sm',
+                      difficulty === level
+                        ? 'border-gray-800 bg-gray-800 text-white'
+                        : 'border-gray-200 bg-gray-100 text-gray-700 hover:bg-gray-200',
+                    )}
+                  >
+                    {level}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            <button
+              type="submit"
+              disabled={!keyword.trim()}
+              className={cn(
+                'mt-2 flex items-center justify-center rounded-md px-4 py-2 font-medium text-white transition-colors max-sm:text-sm',
+                !keyword.trim()
+                  ? 'cursor-not-allowed bg-gray-400'
+                  : 'bg-black hover:bg-gray-800',
+              )}
+            >
+              <WandIcon size={18} className="mr-2" />
+              Generate Course
+            </button>
+          </form>
+        </div>
+
+        <div className="mt-8 min-h-[200px]">
+          <UserCoursesList />
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/GenerateCourse/AICourseCard.tsx

@@ -0,0 +1,73 @@
+import type { AICourseListItem } from '../../queries/ai-course';
+import type { DifficultyLevel } from './AICourse';
+import { BookOpen } from 'lucide-react';
+
+type AICourseCardProps = {
+  course: AICourseListItem;
+};
+
+export function AICourseCard(props: AICourseCardProps) {
+  const { course } = props;
+
+  // Format date if available
+  const formattedDate = course.createdAt
+    ? new Date(course.createdAt).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+      })
+    : null;
+
+  // Map difficulty to color
+  const difficultyColor =
+    {
+      beginner: 'text-green-700',
+      intermediate: 'text-blue-700',
+      advanced: 'text-purple-700',
+    }[course.difficulty as DifficultyLevel] || 'text-gray-700';
+
+  // Calculate progress percentage
+  const totalTopics = course.lessonCount || 0;
+  const completedTopics = course.progress?.done?.length || 0;
+  const progressPercentage =
+    totalTopics > 0 ? Math.round((completedTopics / totalTopics) * 100) : 0;
+
+  return (
+    <a
+      href={`/ai-tutor/${course.slug}`}
+      className="hover:border-gray-3 00 group relative flex w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-4 text-left transition-all hover:bg-gray-50"
+    >
+      <div className="flex items-center justify-between">
+        <span
+          className={`rounded-full text-xs font-medium capitalize opacity-80 ${difficultyColor}`}
+        >
+          {course.difficulty}
+        </span>
+      </div>
+
+      <h3 className="my-2 text-base font-semibold text-gray-900">
+        {course.title}
+      </h3>
+
+      <div className="mt-auto flex items-center justify-between pt-2">
+        <div className="flex items-center text-xs text-gray-600">
+          <BookOpen className="mr-1 h-3.5 w-3.5" />
+          <span>{totalTopics} lessons</span>
+        </div>
+
+        {totalTopics > 0 && (
+          <div className="flex items-center">
+            <div className="mr-2 h-1.5 w-16 overflow-hidden rounded-full bg-gray-200">
+              <div
+                className="h-full rounded-full bg-blue-600"
+                style={{ width: `${progressPercentage}%` }}
+              />
+            </div>
+            <span className="text-xs font-medium text-gray-700">
+              {progressPercentage}%
+            </span>
+          </div>
+        )}
+      </div>
+    </a>
+  );
+}

src/components/GenerateCourse/AICourseContent.tsx

@@ -0,0 +1,451 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  BookOpenCheck,
+  ChevronLeft,
+  Loader2,
+  Menu,
+  X,
+  CircleAlert,
+} from 'lucide-react';
+import { useState } from 'react';
+import { type AiCourse } from '../../lib/ai';
+import { cn } from '../../lib/classname';
+import { slugify } from '../../lib/slugger';
+import { getAiCourseProgressOptions } from '../../queries/ai-course';
+import { queryClient } from '../../stores/query-client';
+import { CheckIcon } from '../ReactIcons/CheckIcon';
+import { ErrorIcon } from '../ReactIcons/ErrorIcon';
+import { AICourseLimit } from './AICourseLimit';
+import { AICourseModuleList } from './AICourseModuleList';
+import { AICourseModuleView } from './AICourseModuleView';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+import { AILimitsPopup } from './AILimitsPopup';
+
+type AICourseContentProps = {
+  courseSlug?: string;
+  course: AiCourse;
+  isLoading: boolean;
+  error?: string;
+};
+
+export function AICourseContent(props: AICourseContentProps) {
+  const { course, courseSlug, isLoading, error } = props;
+
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const [showAILimitsPopup, setShowAILimitsPopup] = useState(false);
+
+  const [activeModuleIndex, setActiveModuleIndex] = useState(0);
+  const [activeLessonIndex, setActiveLessonIndex] = useState(0);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [viewMode, setViewMode] = useState<'module' | 'full'>('full');
+
+  const { data: aiCourseProgress } = useQuery(
+    getAiCourseProgressOptions({ aiCourseSlug: courseSlug || '' }),
+    queryClient,
+  );
+
+  const [expandedModules, setExpandedModules] = useState<
+    Record<number, boolean>
+  >({});
+
+  const goToNextModule = () => {
+    if (activeModuleIndex < course.modules.length - 1) {
+      const nextModuleIndex = activeModuleIndex + 1;
+      setActiveModuleIndex(nextModuleIndex);
+      setActiveLessonIndex(0);
+
+      setExpandedModules((prev) => {
+        const newState: Record<number, boolean> = {};
+        course.modules.forEach((_, idx) => {
+          newState[idx] = false;
+        });
+
+        newState[nextModuleIndex] = true;
+        return newState;
+      });
+    }
+  };
+
+  const goToNextLesson = () => {
+    const currentModule = course.modules[activeModuleIndex];
+    if (currentModule && activeLessonIndex < currentModule.lessons.length - 1) {
+      setActiveLessonIndex(activeLessonIndex + 1);
+    } else {
+      goToNextModule();
+    }
+  };
+
+  const goToPrevLesson = () => {
+    if (activeLessonIndex > 0) {
+      setActiveLessonIndex(activeLessonIndex - 1);
+    } else {
+      const prevModule = course.modules[activeModuleIndex - 1];
+      if (prevModule) {
+        const prevModuleIndex = activeModuleIndex - 1;
+        setActiveModuleIndex(prevModuleIndex);
+        setActiveLessonIndex(prevModule.lessons.length - 1);
+
+        // Expand the previous module in the sidebar
+        setExpandedModules((prev) => {
+          const newState: Record<number, boolean> = {};
+          // Set all modules to collapsed
+          course.modules.forEach((_, idx) => {
+            newState[idx] = false;
+          });
+          // Expand only the previous module
+          newState[prevModuleIndex] = true;
+          return newState;
+        });
+      }
+    }
+  };
+
+  const currentModule = course.modules[activeModuleIndex];
+  const currentLesson = currentModule?.lessons[activeLessonIndex];
+  const totalModules = course.modules.length;
+  const totalLessons = currentModule?.lessons.length || 0;
+
+  const totalCourseLessons = course.modules.reduce(
+    (total, module) => total + module.lessons.length,
+    0,
+  );
+  const totalDoneLessons = aiCourseProgress?.done?.length || 0;
+  const finishedPercentage = Math.round(
+    (totalDoneLessons / totalCourseLessons) * 100,
+  );
+
+  const modals = (
+    <>
+      {showUpgradeModal && (
+        <UpgradeAccountModal onClose={() => setShowUpgradeModal(false)} />
+      )}
+
+      {showAILimitsPopup && (
+        <AILimitsPopup
+          onClose={() => setShowAILimitsPopup(false)}
+          onUpgrade={() => {
+            setShowAILimitsPopup(false);
+            setShowUpgradeModal(true);
+          }}
+        />
+      )}
+    </>
+  );
+
+  if (error && !isLoading) {
+    const isLimitReached = error.includes('limit');
+
+    const icon = isLimitReached ? (
+      <CircleAlert className="mb-4 size-16 text-yellow-500" />
+    ) : (
+      <ErrorIcon additionalClasses="mb-4 size-16" />
+    );
+    const title = isLimitReached ? 'Limit Reached' : 'Error Generating Course';
+    const message = isLimitReached
+      ? 'You have reached the daily AI usage limit. Please upgrade your account to continue.'
+      : error;
+    return (
+      <>
+        {modals}
+        <div className="flex h-screen flex-col items-center justify-center px-4 text-center">
+          {icon}
+          <h1 className="text-2xl font-bold">{title}</h1>
+          <p className="my-3 max-w-sm text-balance text-gray-500">{message}</p>
+
+          {isLimitReached && (
+            <div className="mt-4">
+              <button
+                onClick={() => setShowUpgradeModal(true)}
+                className="rounded-md bg-yellow-400 px-6 py-2 text-sm font-medium text-black hover:bg-yellow-500"
+              >
+                Upgrade to remove Limits
+              </button>
+
+              <p className="mt-4 text-sm text-black">
+                <a href="/ai-tutor" className="underline underline-offset-2">
+                  Back to AI Tutor
+                </a>
+              </p>
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <section className="flex h-screen flex-grow flex-col overflow-hidden bg-gray-50">
+      {modals}
+
+      <div className="border-b border-gray-200 bg-gray-100">
+        <div className="flex items-center justify-between px-4 py-2">
+          <a
+            href="/ai-tutor"
+            className="flex flex-row items-center gap-1.5 text-sm font-medium text-gray-700 hover:text-gray-900"
+            aria-label="Back to generator"
+          >
+            <ChevronLeft className="size-4" strokeWidth={2.5} />
+            Back<span className="hidden lg:inline"> to Generator</span>
+          </a>
+          <div className="flex items-center gap-2">
+            <div className="flex flex-row lg:hidden">
+              <AICourseLimit
+                onUpgrade={() => setShowUpgradeModal(true)}
+                onShowLimits={() => setShowAILimitsPopup(true)}
+              />
+            </div>
+
+            <button
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+              className="flex items-center justify-center text-gray-400 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900 lg:hidden"
+            >
+              {sidebarOpen ? (
+                <X size={17} strokeWidth={3} />
+              ) : (
+                <Menu size={17} strokeWidth={3} />
+              )}
+            </button>
+          </div>
+        </div>
+      </div>
+      <header className="flex items-center justify-between border-b border-gray-200 bg-white px-6 max-lg:py-4 lg:h-[80px]">
+        <div className="flex items-center">
+          <div className="flex flex-col">
+            <h1 className="text-balance text-xl font-bold !leading-tight text-gray-900 max-lg:mb-0.5 max-lg:text-lg">
+              {course.title || 'Loading Course...'}
+            </h1>
+            <div className="mt-1 flex flex-row items-center gap-2 text-sm text-gray-600 max-lg:text-xs">
+              <span className="font-medium">{totalModules} modules</span>
+              <span className="text-gray-400">•</span>
+              <span className="font-medium">{totalCourseLessons} lessons</span>
+              {viewMode === 'module' && (
+                <span className="flex flex-row items-center gap-1 lg:hidden">
+                  <span className="text-gray-400">•</span>
+                  <button
+                    className="underline underline-offset-2"
+                    onClick={() => {
+                      setExpandedModules({});
+                      setViewMode('full');
+                    }}
+                  >
+                    View outline
+                  </button>
+                </span>
+              )}
+              {finishedPercentage > 0 && (
+                <>
+                  <span className="text-gray-400">•</span>
+                  <span className="font-medium text-green-600">
+                    {finishedPercentage}% complete
+                  </span>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <div className="hidden gap-2 lg:flex">
+            <AICourseLimit
+              onUpgrade={() => setShowUpgradeModal(true)}
+              onShowLimits={() => setShowAILimitsPopup(true)}
+            />
+          </div>
+
+          {viewMode === 'module' && (
+            <button
+              onClick={() => {
+                setExpandedModules({});
+                setViewMode('full');
+              }}
+              className="flex flex-shrink-0 items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 hover:text-gray-900 max-lg:hidden"
+            >
+              <BookOpenCheck size={18} className="mr-2" />
+              View Course Outline
+            </button>
+          )}
+        </div>
+      </header>
+
+      <div className="flex flex-1 overflow-hidden">
+        <aside
+          className={cn(
+            'fixed inset-y-0 left-0 z-20 w-80 transform overflow-y-auto border-r border-gray-200 bg-white transition-transform duration-200 ease-in-out lg:relative lg:mt-0 lg:translate-x-0',
+            sidebarOpen ? 'translate-x-0' : '-translate-x-full',
+          )}
+        >
+          <div
+            className={cn(
+              'relative flex min-h-[40px] items-center justify-between border-b border-gray-200 px-3',
+              isLoading && 'striped-loader bg-gray-50',
+            )}
+          >
+            {!isLoading && (
+              <div className="text-xs text-black">
+                <span className="relative z-10 rounded-full bg-yellow-400 px-1.5 py-0.5">
+                  {finishedPercentage}%
+                </span>{' '}
+                <span className="relative z-10">Completed</span>
+                <span
+                  style={{
+                    width: `${finishedPercentage}%`,
+                  }}
+                  className={cn(
+                    'absolute bottom-0 left-0 top-0',
+                    'bg-gray-200/50',
+                  )}
+                ></span>
+              </div>
+            )}
+
+            <button
+              onClick={() => setSidebarOpen(false)}
+              className="rounded-md p-1 hover:bg-gray-100 lg:hidden"
+            >
+              <X size={18} />
+            </button>
+          </div>
+
+          <AICourseModuleList
+            course={course}
+            courseSlug={courseSlug}
+            activeModuleIndex={
+              viewMode === 'module' ? activeModuleIndex : undefined
+            }
+            setActiveModuleIndex={setActiveModuleIndex}
+            activeLessonIndex={
+              viewMode === 'module' ? activeLessonIndex : undefined
+            }
+            setActiveLessonIndex={setActiveLessonIndex}
+            setSidebarOpen={setSidebarOpen}
+            viewMode={viewMode}
+            setViewMode={setViewMode}
+            expandedModules={expandedModules}
+            setExpandedModules={setExpandedModules}
+            isLoading={isLoading}
+          />
+        </aside>
+
+        <main
+          className={cn(
+            'flex-1 overflow-y-auto p-6 transition-all duration-200 ease-in-out max-lg:p-3',
+            sidebarOpen ? 'lg:ml-0' : '',
+          )}
+        >
+          {viewMode === 'module' && (
+            <AICourseModuleView
+              courseSlug={courseSlug!}
+              activeModuleIndex={activeModuleIndex}
+              totalModules={totalModules}
+              currentModuleTitle={currentModule?.title || ''}
+              activeLessonIndex={activeLessonIndex}
+              totalLessons={totalLessons}
+              currentLessonTitle={currentLesson || ''}
+              onGoToPrevLesson={goToPrevLesson}
+              onGoToNextLesson={goToNextLesson}
+              key={`${courseSlug}-${activeModuleIndex}-${activeLessonIndex}`}
+              onUpgrade={() => setShowUpgradeModal(true)}
+            />
+          )}
+
+          {viewMode === 'full' && (
+            <div className="mx-auto rounded-xl border border-gray-200 bg-white shadow-sm lg:max-w-3xl">
+              <div
+                className={cn(
+                  'mb-1 flex items-start justify-between border-b border-gray-100 p-6 max-lg:hidden',
+                  isLoading && 'striped-loader',
+                )}
+              >
+                <div>
+                  <h2 className="mb-1 text-balance text-2xl font-bold max-lg:text-lg max-lg:leading-tight">
+                    {course.title || 'Loading course ..'}
+                  </h2>
+                  <p className="text-sm capitalize text-gray-500">
+                    {course.title ? course.difficulty : 'Please wait ..'}
+                  </p>
+                </div>
+              </div>
+              {course.title ? (
+                <div className="flex flex-col p-6 max-lg:mt-0.5 max-lg:p-4">
+                  {course.modules.map((courseModule, moduleIdx) => {
+                    return (
+                      <div
+                        key={moduleIdx}
+                        className="mb-5 pb-4 last:border-0 last:pb-0 max-lg:mb-2"
+                      >
+                        <h2 className="mb-4 text-xl font-bold text-gray-800 max-lg:mb-2 max-lg:text-lg max-lg:leading-tight">
+                          {courseModule.title}
+                        </h2>
+                        <div className="divide-y divide-gray-100">
+                          {courseModule.lessons.map((lesson, lessonIdx) => {
+                            const key = `${slugify(courseModule.title)}__${slugify(lesson)}`;
+                            const isCompleted =
+                              aiCourseProgress?.done.includes(key);
+
+                            return (
+                              <div
+                                key={key}
+                                className="flex cursor-pointer items-center gap-2 px-2 py-2.5 transition-colors hover:bg-gray-100 max-lg:px-0 max-lg:py-1.5"
+                                onClick={() => {
+                                  setActiveModuleIndex(moduleIdx);
+                                  setActiveLessonIndex(lessonIdx);
+                                  setExpandedModules((prev) => {
+                                    const newState: Record<number, boolean> =
+                                      {};
+                                    course.modules.forEach((_, idx) => {
+                                      newState[idx] = false;
+                                    });
+                                    newState[moduleIdx] = true;
+                                    return newState;
+                                  });
+
+                                  setSidebarOpen(false);
+                                  setViewMode('module');
+                                }}
+                              >
+                                {!isCompleted && (
+                                  <span
+                                    className={cn(
+                                      'flex size-6 flex-shrink-0 items-center justify-center rounded-full bg-gray-200 text-sm font-medium text-gray-800 max-lg:size-5 max-lg:text-xs',
+                                    )}
+                                  >
+                                    {lessonIdx + 1}
+                                  </span>
+                                )}
+
+                                {isCompleted && (
+                                  <CheckIcon additionalClasses="size-6 flex-shrink-0 text-green-500" />
+                                )}
+
+                                <p className="flex-1 truncate text-base text-gray-800 max-lg:text-sm">
+                                  {lesson.replace(/^Lesson\s*?\d+[\.:]\s*/, '')}
+                                </p>
+                                <span className="text-sm font-medium text-gray-700 max-lg:hidden">
+                                  {isCompleted ? 'View' : 'Start'} →
+                                </span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : (
+                <div className="flex h-64 items-center justify-center">
+                  <Loader2 size={36} className="animate-spin text-gray-300" />
+                </div>
+              )}
+            </div>
+          )}
+        </main>
+      </div>
+
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 z-10 bg-gray-900 bg-opacity-50 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        ></div>
+      )}
+    </section>
+  );
+}

src/components/GenerateCourse/AICourseFollowUp.css

@@ -0,0 +1,131 @@
+.prose ul li > code,
+.prose ol li > code,
+p code,
+a > code,
+strong > code,
+em > code,
+h1 > code,
+h2 > code,
+h3 > code {
+  background: #ebebeb !important;
+  color: currentColor !important;
+  font-size: 14px;
+  font-weight: normal !important;
+}
+
+.course-ai-content.course-content.prose ul li > code,
+.course-ai-content.course-content.prose ol li > code,
+.course-ai-content.course-content.prose p code,
+.course-ai-content.course-content.prose a > code,
+.course-ai-content.course-content.prose strong > code,
+.course-ai-content.course-content.prose em > code,
+.course-ai-content.course-content.prose h1 > code,
+.course-ai-content.course-content.prose h2 > code,
+.course-ai-content.course-content.prose h3 > code,
+.course-notes-content.prose ul li > code,
+.course-notes-content.prose ol li > code,
+.course-notes-content.prose p code,
+.course-notes-content.prose a > code,
+.course-notes-content.prose strong > code,
+.course-notes-content.prose em > code,
+.course-notes-content.prose h1 > code,
+.course-notes-content.prose h2 > code,
+.course-notes-content.prose h3 > code {
+  font-size: 12px !important;
+}
+
+.course-ai-content pre {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.course-ai-content pre::-webkit-scrollbar {
+  display: none;
+}
+
+.course-ai-content pre,
+.course-notes-content pre {
+  overflow: scroll;
+  font-size: 15px;
+  margin: 10px 0;
+}
+
+.prose ul li > code:before,
+p > code:before,
+.prose ul li > code:after,
+.prose ol li > code:before,
+p > code:before,
+.prose ol li > code:after,
+.course-content h1 > code:after,
+.course-content h1 > code:before,
+.course-content h2 > code:after,
+.course-content h2 > code:before,
+.course-content h3 > code:after,
+.course-content h3 > code:before,
+.course-content h4 > code:after,
+.course-content h4 > code:before,
+p > code:after,
+a > code:after,
+a > code:before {
+  content: '' !important;
+}
+
+.course-content.prose ul li > code,
+.course-content.prose ol li > code,
+.course-content p code,
+.course-content a > code,
+.course-content strong > code,
+.course-content em > code,
+.course-content h1 > code,
+.course-content h2 > code,
+.course-content h3 > code,
+.course-content table code {
+  background: #f4f4f5 !important;
+  border: 1px solid #282a36 !important;
+  color: #282a36 !important;
+  padding: 2px 4px;
+  border-radius: 5px;
+  font-size: 16px !important;
+  white-space: pre;
+  font-weight: normal;
+}
+
+.course-content blockquote {
+  font-style: normal;
+}
+
+.course-content.prose blockquote h1,
+.course-content.prose blockquote h2,
+.course-content.prose blockquote h3,
+.course-content.prose blockquote h4 {
+  font-style: normal;
+  margin-bottom: 8px;
+}
+
+.course-content.prose ul li > code:before,
+.course-content p > code:before,
+.course-content.prose ul li > code:after,
+.course-content p > code:after,
+.course-content h2 > code:after,
+.course-content h2 > code:before,
+.course-content table code:before,
+.course-content table code:after,
+.course-content a > code:after,
+.course-content a > code:before,
+.course-content h2 code:after,
+.course-content h2 code:before,
+.course-content h2 code:after,
+.course-content h2 code:before {
+  content: '' !important;
+}
+
+.course-content table {
+  border-collapse: collapse;
+  border: 1px solid black;
+  border-radius: 5px;
+}
+
+.course-content table td,
+.course-content table th {
+  padding: 5px 10px;
+}

src/components/GenerateCourse/AICourseFollowUp.tsx

@@ -0,0 +1,77 @@
+import { ArrowRightIcon, BotIcon } from 'lucide-react';
+import { useState } from 'react';
+import {
+  AICourseFollowUpPopover,
+  type AIChatHistoryType,
+} from './AICourseFollowUpPopover';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+
+type AICourseFollowUpProps = {
+  courseSlug: string;
+  moduleTitle: string;
+  lessonTitle: string;
+};
+
+export function AICourseFollowUp(props: AICourseFollowUpProps) {
+  const { courseSlug, moduleTitle, lessonTitle } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+
+  const [courseAIChatHistory, setCourseAIChatHistory] = useState<
+    AIChatHistoryType[]
+  >([
+    {
+      role: 'assistant',
+      content:
+        'Hey, I am your AI instructor. Here are some examples of what you can ask me about 🤖',
+      isDefault: true,
+    },
+  ]);
+
+  return (
+    <div className="relative">
+      <button
+        className="mt-4 flex w-full items-center gap-2 rounded-lg border border-yellow-300 bg-yellow-100 p-4 hover:bg-yellow-200 max-lg:mt-3 max-lg:text-sm"
+        onClick={() => setIsOpen(true)}
+      >
+        <BotIcon className="h-4 w-4" />
+        <span>
+          <span className="max-sm:hidden">Still confused?&nbsp;</span>
+          Ask AI some follow up questions
+        </span>
+
+        <ArrowRightIcon className="ml-auto h-4 w-4 max-sm:hidden" />
+      </button>
+
+      {showUpgradeModal && (
+        <UpgradeAccountModal onClose={() => setShowUpgradeModal(false)} />
+      )}
+
+      {isOpen && (
+        <AICourseFollowUpPopover
+          courseSlug={courseSlug}
+          moduleTitle={moduleTitle}
+          lessonTitle={lessonTitle}
+          courseAIChatHistory={courseAIChatHistory}
+          setCourseAIChatHistory={setCourseAIChatHistory}
+          onUpgradeClick={() => {
+            setIsOpen(false);
+            setShowUpgradeModal(true);
+          }}
+          onOutsideClick={() => {
+            if (!isOpen) {
+              return;
+            }
+
+            setIsOpen(false);
+          }}
+        />
+      )}
+
+      {isOpen && (
+        <div className="pointer-events-none fixed inset-0 z-50 bg-black/50" />
+      )}
+    </div>
+  );
+}

src/components/GenerateCourse/AICourseFollowUpPopover.tsx

@@ -0,0 +1,382 @@
+import { useQuery } from '@tanstack/react-query';
+import { BookOpen, Bot, Code, HelpCircle, LockIcon, Send } from 'lucide-react';
+import { useEffect, useMemo, useRef, useState, type FormEvent } from 'react';
+import { flushSync } from 'react-dom';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { readAICourseLessonStream } from '../../helper/read-stream';
+import { isLoggedIn, removeAuthToken } from '../../lib/jwt';
+import { useToast } from '../../hooks/use-toast';
+import {
+  markdownToHtml,
+  markdownToHtmlWithHighlighting,
+} from '../../lib/markdown';
+import { cn } from '../../lib/classname';
+import { getAiCourseLimitOptions } from '../../queries/ai-course';
+import { queryClient } from '../../stores/query-client';
+import TextareaAutosize from 'react-textarea-autosize';
+
+export type AllowedAIChatRole = 'user' | 'assistant';
+export type AIChatHistoryType = {
+  role: AllowedAIChatRole;
+  content: string;
+  isDefault?: boolean;
+  html?: string;
+};
+
+type AICourseFollowUpPopoverProps = {
+  courseSlug: string;
+  moduleTitle: string;
+  lessonTitle: string;
+
+  courseAIChatHistory: AIChatHistoryType[];
+  setCourseAIChatHistory: (value: AIChatHistoryType[]) => void;
+
+  onOutsideClick?: () => void;
+  onUpgradeClick: () => void;
+};
+
+export function AICourseFollowUpPopover(props: AICourseFollowUpPopoverProps) {
+  const {
+    courseSlug,
+    moduleTitle,
+    lessonTitle,
+    onOutsideClick,
+    onUpgradeClick,
+
+    courseAIChatHistory,
+    setCourseAIChatHistory,
+  } = props;
+
+  const toast = useToast();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const scrollareaRef = useRef<HTMLDivElement | null>(null);
+
+  const [isStreamingMessage, setIsStreamingMessage] = useState(false);
+  const [message, setMessage] = useState('');
+  const [streamedMessage, setStreamedMessage] = useState('');
+
+  useOutsideClick(containerRef, onOutsideClick);
+
+  const { data: tokenUsage, isLoading } = useQuery(
+    getAiCourseLimitOptions(),
+    queryClient,
+  );
+
+  const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);
+
+  const handleChatSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const trimmedMessage = message.trim();
+    if (
+      !trimmedMessage ||
+      isStreamingMessage ||
+      !isLoggedIn() ||
+      isLimitExceeded ||
+      isLoading
+    ) {
+      return;
+    }
+
+    const newMessages: AIChatHistoryType[] = [
+      ...courseAIChatHistory,
+      {
+        role: 'user',
+        content: trimmedMessage,
+      },
+    ];
+
+    flushSync(() => {
+      setCourseAIChatHistory(newMessages);
+      setMessage('');
+    });
+
+    scrollToBottom();
+    completeCourseAIChat(newMessages);
+  };
+
+  const scrollToBottom = () => {
+    scrollareaRef.current?.scrollTo({
+      top: scrollareaRef.current.scrollHeight,
+      behavior: 'smooth',
+    });
+  };
+
+  const completeCourseAIChat = async (messages: AIChatHistoryType[]) => {
+    setIsStreamingMessage(true);
+
+    const response = await fetch(
+      `${import.meta.env.PUBLIC_API_URL}/v1-follow-up-ai-course/${courseSlug}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify({
+          moduleTitle,
+          lessonTitle,
+          messages: messages.slice(-10),
+        }),
+      },
+    );
+
+    if (!response.ok) {
+      const data = await response.json();
+
+      toast.error(data?.message || 'Something went wrong');
+      setCourseAIChatHistory([...messages].slice(0, messages.length - 1));
+      setIsStreamingMessage(false);
+
+      if (data.status === 401) {
+        removeAuthToken();
+        window.location.reload();
+      }
+    }
+
+    const reader = response.body?.getReader();
+
+    if (!reader) {
+      setIsStreamingMessage(false);
+      toast.error('Something went wrong');
+      return;
+    }
+
+    await readAICourseLessonStream(reader, {
+      onStream: async (content) => {
+        flushSync(() => {
+          setStreamedMessage(content);
+        });
+
+        scrollToBottom();
+      },
+      onStreamEnd: async (content) => {
+        const newMessages: AIChatHistoryType[] = [
+          ...messages,
+          {
+            role: 'assistant',
+            content,
+            html: await markdownToHtmlWithHighlighting(content),
+          },
+        ];
+
+        flushSync(() => {
+          setStreamedMessage('');
+          setIsStreamingMessage(false);
+          setCourseAIChatHistory(newMessages);
+        });
+
+        queryClient.invalidateQueries(getAiCourseLimitOptions());
+        scrollToBottom();
+      },
+    });
+
+    setIsStreamingMessage(false);
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, []);
+
+  return (
+    <div
+      className="absolute bottom-0 left-0 z-[99] flex h-[500px] w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow"
+      ref={containerRef}
+    >
+      <div className="flex items-center justify-between gap-2 border-b border-gray-200 px-4 py-2 text-sm">
+        <h4 className="text-base font-medium">Course AI</h4>
+      </div>
+
+      <div
+        className="scrollbar-thumb-gray-300 scrollbar-track-transparent scrollbar-thin relative grow overflow-y-auto"
+        ref={scrollareaRef}
+      >
+        <div className="absolute inset-0 flex flex-col">
+          <div className="flex grow flex-col justify-end">
+            <div className="flex flex-col justify-end gap-2 px-3 py-2">
+              {courseAIChatHistory.map((chat, index) => {
+                return (
+                  <>
+                    <AIChatCard
+                      key={`chat-${index}`}
+                      role={chat.role}
+                      content={chat.content}
+                      html={chat.html}
+                    />
+
+                    {chat.isDefault && (
+                      <div className="mb-1 mt-0.5">
+                        <div className="grid grid-cols-2 gap-2">
+                          {capabilities.map((capability, index) => (
+                            <CapabilityCard
+                              key={`capability-${index}`}
+                              {...capability}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </>
+                );
+              })}
+
+              {isStreamingMessage && !streamedMessage && (
+                <AIChatCard role="assistant" content="Thinking..." />
+              )}
+
+              {streamedMessage && (
+                <AIChatCard role="assistant" content={streamedMessage} />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <form
+        className="relative flex items-start border-t border-gray-200 text-sm"
+        onSubmit={handleChatSubmit}
+      >
+        {isLimitExceeded && (
+          <div className="absolute inset-0 flex items-center justify-center gap-2 bg-black text-white">
+            <LockIcon className="size-4 cursor-not-allowed" strokeWidth={2.5} />
+            <p className="cursor-not-allowed">Limit reached for today</p>
+            <button
+              onClick={() => {
+                onUpgradeClick();
+              }}
+              className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300"
+            >
+              Upgrade for more
+            </button>
+          </div>
+        )}
+        <TextareaAutosize
+          className="h-full min-h-[41px] grow resize-none bg-transparent px-4 py-2 focus:outline-none"
+          placeholder="Ask AI anything about the lesson..."
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          autoFocus={true}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              handleChatSubmit(e as unknown as FormEvent<HTMLFormElement>);
+            }
+          }}
+        />
+        <button
+          type="submit"
+          disabled={isStreamingMessage || isLimitExceeded}
+          className="flex aspect-square size-[41px] items-center justify-center text-zinc-500 hover:text-black"
+        >
+          <Send className="size-4 stroke-[2.5]" />
+        </button>
+      </form>
+    </div>
+  );
+}
+
+type AIChatCardProps = {
+  role: AllowedAIChatRole;
+  content: string;
+  html?: string;
+};
+
+function AIChatCard(props: AIChatCardProps) {
+  const { role, content, html: defaultHtml } = props;
+
+  const html = useMemo(() => {
+    if (defaultHtml) {
+      return defaultHtml;
+    }
+
+    return markdownToHtml(content, false);
+  }, [content, defaultHtml]);
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col rounded-lg',
+        role === 'user' ? 'bg-gray-300/30' : 'bg-yellow-500/30',
+      )}
+    >
+      <div className="flex items-start gap-2.5 p-3">
+        <div
+          className={cn(
+            'flex size-6 shrink-0 items-center justify-center rounded-full',
+            role === 'user'
+              ? 'bg-gray-200 text-black'
+              : 'bg-yellow-400 text-black',
+          )}
+        >
+          <Bot className="size-4 stroke-[2.5]" />
+        </div>
+        <div
+          className="course-content course-ai-content prose prose-sm mt-0.5 max-w-full overflow-hidden text-sm"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </div>
+    </div>
+  );
+}
+
+type CapabilityCardProps = {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  className?: string;
+};
+
+function CapabilityCard({
+  icon,
+  title,
+  description,
+  className,
+}: CapabilityCardProps) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-2 rounded-lg bg-yellow-500/10 p-3',
+        className,
+      )}
+    >
+      <div className="flex items-center gap-2">
+        {icon}
+        <span className="text-[13px] font-medium leading-none text-black">
+          {title}
+        </span>
+      </div>
+      <p className="text-[12px] leading-normal text-gray-600">{description}</p>
+    </div>
+  );
+}
+
+const capabilities = [
+  {
+    icon: (
+      <HelpCircle
+        className="size-4 shrink-0 text-yellow-600"
+        strokeWidth={2.5}
+      />
+    ),
+    title: 'Clarify Concepts',
+    description: "If you don't understand a concept, ask me to clarify it",
+  },
+  {
+    icon: (
+      <BookOpen className="size-4 shrink-0 text-yellow-600" strokeWidth={2.5} />
+    ),
+    title: 'More Details',
+    description: 'Get deeper insights about topics covered in the lesson',
+  },
+  {
+    icon: (
+      <Code className="size-4 shrink-0 text-yellow-600" strokeWidth={2.5} />
+    ),
+    title: 'Code Help',
+    description: 'Share your code and ask me to help you debug it',
+  },
+  {
+    icon: <Bot className="size-4 shrink-0 text-yellow-600" strokeWidth={2.5} />,
+    title: 'Best Practices',
+    description: 'Share your code and ask me the best way to do something',
+  },
+] as const;

src/components/GenerateCourse/AICourseLimit.tsx

@@ -0,0 +1,78 @@
+import { useQuery } from '@tanstack/react-query';
+import { getAiCourseLimitOptions } from '../../queries/ai-course';
+import { queryClient } from '../../stores/query-client';
+import { billingDetailsOptions } from '../../queries/billing';
+import { getPercentage } from '../../helper/number';
+import { Gift, Info } from 'lucide-react';
+
+type AICourseLimitProps = {
+  onUpgrade: () => void;
+  onShowLimits: () => void;
+};
+
+export function AICourseLimit(props: AICourseLimitProps) {
+  const { onUpgrade, onShowLimits } = props;
+
+  const { data: limits, isLoading } = useQuery(
+    getAiCourseLimitOptions(),
+    queryClient,
+  );
+
+  const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
+    useQuery(billingDetailsOptions(), queryClient);
+
+  if (isLoading || !limits || isBillingDetailsLoading || !userBillingDetails) {
+    return (
+      <div className="hidden h-[38px] w-[208.09px] animate-pulse rounded-lg border border-gray-200 bg-gray-200 lg:block"></div>
+    );
+  }
+
+  const { used, limit } = limits;
+
+  const totalPercentage = getPercentage(used, limit);
+
+  // has consumed 80% of the limit
+  const isNearLimit = used >= limit * 0.8;
+  const isPaidUser = userBillingDetails.status !== 'none';
+
+  return (
+    <>
+      <button
+        className="mr-1 flex items-center gap-1 text-sm font-medium underline underline-offset-2 lg:hidden"
+        onClick={() => onShowLimits()}
+      >
+        <Info className="size-4" />
+        {totalPercentage}% limit used
+      </button>
+
+      {(!isPaidUser || isNearLimit) && (
+        <button
+          onClick={() => {
+            onShowLimits();
+          }}
+          className="relative hidden h-full min-h-[38px] cursor-pointer items-center overflow-hidden rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50 lg:flex"
+        >
+          <span className="relative z-10">
+            {totalPercentage}% of the daily limit used
+          </span>
+          <div
+            className="absolute inset-0 h-full bg-gray-200/80"
+            style={{
+              width: `${totalPercentage}%`,
+            }}
+          ></div>
+        </button>
+      )}
+
+      {!isPaidUser && (
+        <button
+          className="hidden items-center justify-center gap-1 rounded-md bg-yellow-400 px-4 py-1 text-sm font-medium underline-offset-2 hover:bg-yellow-500 lg:flex"
+          onClick={() => onUpgrade()}
+        >
+          <Gift className="size-4" />
+          Upgrade
+        </button>
+      )}
+    </>
+  );
+}

src/components/GenerateCourse/AICourseModuleList.tsx

@@ -0,0 +1,208 @@
+import { type Dispatch, type SetStateAction, useState } from 'react';
+import type { AiCourse } from '../../lib/ai';
+import { Check, ChevronDownIcon, ChevronRightIcon } from 'lucide-react';
+import { cn } from '../../lib/classname';
+import { getAiCourseProgressOptions } from '../../queries/ai-course';
+import { useQuery } from '@tanstack/react-query';
+import { queryClient } from '../../stores/query-client';
+import { slugify } from '../../lib/slugger';
+import { CheckIcon } from '../ReactIcons/CheckIcon';
+import { CircularProgress } from './CircularProgress';
+
+type AICourseModuleListProps = {
+  course: AiCourse;
+  courseSlug?: string;
+  activeModuleIndex: number | undefined;
+  setActiveModuleIndex: (index: number) => void;
+  activeLessonIndex: number | undefined;
+  setActiveLessonIndex: (index: number) => void;
+
+  setSidebarOpen: (open: boolean) => void;
+
+  viewMode: 'module' | 'full';
+  setViewMode: (mode: 'module' | 'full') => void;
+
+  expandedModules: Record<number, boolean>;
+  setExpandedModules: Dispatch<SetStateAction<Record<number, boolean>>>;
+
+  isLoading: boolean;
+};
+
+export function AICourseModuleList(props: AICourseModuleListProps) {
+  const {
+    course,
+    courseSlug,
+    activeModuleIndex,
+    setActiveModuleIndex,
+    activeLessonIndex,
+    setActiveLessonIndex,
+    setSidebarOpen,
+    setViewMode,
+    expandedModules,
+    setExpandedModules,
+
+    isLoading,
+  } = props;
+
+  const { data: aiCourseProgress } = useQuery(
+    getAiCourseProgressOptions({ aiCourseSlug: courseSlug || '' }),
+    queryClient,
+  );
+
+  const toggleModule = (index: number) => {
+    setExpandedModules((prev) => {
+      // If this module is already expanded, collapse it
+      if (prev[index]) {
+        return {
+          ...prev,
+          [index]: false,
+        };
+      }
+
+      // Otherwise, collapse all modules and expand only this one
+      const newState: Record<number, boolean> = {};
+      // Set all modules to collapsed
+      course.modules.forEach((_, idx) => {
+        newState[idx] = false;
+      });
+      // Expand only the clicked module
+      newState[index] = true;
+      return newState;
+    });
+  };
+
+  const { done = [] } = aiCourseProgress || {};
+
+  return (
+    <nav className="bg-gray-100">
+      {course.modules.map((courseModule, moduleIdx) => {
+        const totalLessons = courseModule.lessons.length;
+        const completedLessons = courseModule.lessons.filter((lesson) => {
+          const key = `${slugify(courseModule.title)}__${slugify(lesson)}`;
+          return done.includes(key);
+        }).length;
+
+        const percentage = Math.round((completedLessons / totalLessons) * 100);
+        const isActive = expandedModules[moduleIdx];
+        const isModuleCompleted = completedLessons === totalLessons;
+
+        return (
+          <div key={moduleIdx} className="rounded-md">
+            <button
+              onClick={() => toggleModule(moduleIdx)}
+              className={cn(
+                'relative z-10 flex w-full cursor-pointer flex-row items-center gap-2 border-b border-b-gray-200 bg-white px-2 py-3 text-base text-gray-600 hover:bg-gray-100',
+                activeModuleIndex === moduleIdx
+                  ? 'text-gray-900'
+                  : 'text-gray-700',
+                moduleIdx === 0 && 'pt-4',
+              )}
+            >
+              <div className="flex min-w-0 flex-1 items-center gap-2">
+                <div className="flex-shrink-0">
+                  <CircularProgress
+                    percentage={percentage}
+                    isVisible={!isModuleCompleted}
+                    isActive={isActive}
+                    isLoading={isLoading}
+                  >
+                    <span
+                      className={cn(
+                        'flex size-[21px] flex-shrink-0 items-center justify-center rounded-full bg-gray-400/70 text-xs font-semibold text-white',
+                        {
+                          'bg-black': isActive,
+                          'bg-green-600': isModuleCompleted,
+                        },
+                      )}
+                    >
+                      {!isModuleCompleted && moduleIdx + 1}
+                      {isModuleCompleted && (
+                        <Check className="size-3 stroke-[3] text-white" />
+                      )}
+                    </span>
+                  </CircularProgress>
+                </div>
+                <span className="flex flex-1 items-center break-words text-left text-sm leading-relaxed">
+                  {courseModule.title?.replace(/^Module\s*?\d+[\.:]\s*/, '')}
+                </span>
+              </div>
+              <div className="ml-auto self-center">
+                {expandedModules[moduleIdx] ? (
+                  <ChevronDownIcon size={16} className="flex-shrink-0" />
+                ) : (
+                  <ChevronRightIcon size={16} className="flex-shrink-0" />
+                )}
+              </div>
+            </button>
+
+            {/* Lessons */}
+            {expandedModules[moduleIdx] && (
+              <div className="flex flex-col border-b border-b-gray-200 bg-gray-100">
+                {courseModule.lessons.map((lesson, lessonIdx) => {
+                  const key = `${slugify(courseModule.title)}__${slugify(lesson)}`;
+                  const isCompleted = done.includes(key);
+
+                  return (
+                    <button
+                      key={key}
+                      onClick={() => {
+                        setActiveModuleIndex(moduleIdx);
+                        setActiveLessonIndex(lessonIdx);
+                        setExpandedModules((prev) => {
+                          const newState: Record<number, boolean> = {};
+                          course.modules.forEach((_, idx) => {
+                            newState[idx] = false;
+                          });
+                          newState[moduleIdx] = true;
+                          return newState;
+                        });
+                        setSidebarOpen(false);
+                        setViewMode('module');
+                      }}
+                      className={cn(
+                        'flex gap-2.5 w-full cursor-pointer items-center py-3 pl-3.5 pr-2 text-left text-sm leading-normal',
+                        activeModuleIndex === moduleIdx &&
+                          activeLessonIndex === lessonIdx
+                          ? 'bg-gray-200 text-black'
+                          : 'text-gray-600 hover:bg-gray-200/70',
+                      )}
+                    >
+                      {isCompleted ? (
+                        <CheckIcon
+                          additionalClasses={cn(
+                            'size-[18px] relative bg-white rounded-full top-[2px] flex-shrink-0 text-green-600',
+                            {
+                              'text-black':
+                                activeModuleIndex === moduleIdx &&
+                                activeLessonIndex === lessonIdx,
+                            },
+                          )}
+                        />
+                      ) : (
+                        <span
+                          className={cn(
+                            'flex size-[18px] flex-shrink-0 items-center justify-center rounded-full bg-gray-400/70 text-xs font-semibold text-white',
+                            {
+                              'bg-black':
+                                activeModuleIndex === moduleIdx &&
+                                activeLessonIndex === lessonIdx,
+                            },
+                          )}
+                        >
+                          {lessonIdx + 1}
+                        </span>
+                      )}
+                      <span className="break-words">
+                        {lesson?.replace(/^Lesson\s*?\d+[\.:]\s*/, '')}
+                      </span>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </nav>
+  );
+}

src/components/GenerateCourse/AICourseModuleView.tsx

@@ -0,0 +1,344 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import {
+  CheckIcon,
+  ChevronLeft,
+  ChevronRight,
+  Loader2Icon,
+  LockIcon,
+  XIcon,
+} from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { readAICourseLessonStream } from '../../helper/read-stream';
+import { cn } from '../../lib/classname';
+import { isLoggedIn, removeAuthToken } from '../../lib/jwt';
+import {
+  markdownToHtml,
+  markdownToHtmlWithHighlighting,
+} from '../../lib/markdown';
+import { httpPatch } from '../../lib/query-http';
+import { slugify } from '../../lib/slugger';
+import {
+  getAiCourseLimitOptions,
+  getAiCourseProgressOptions,
+  type AICourseProgressDocument,
+} from '../../queries/ai-course';
+import { queryClient } from '../../stores/query-client';
+import { AICourseFollowUp } from './AICourseFollowUp';
+import './AICourseFollowUp.css';
+
+type AICourseModuleViewProps = {
+  courseSlug: string;
+
+  activeModuleIndex: number;
+  totalModules: number;
+  currentModuleTitle: string;
+  activeLessonIndex: number;
+  totalLessons: number;
+  currentLessonTitle: string;
+
+  onGoToPrevLesson: () => void;
+  onGoToNextLesson: () => void;
+
+  onUpgrade: () => void;
+};
+
+export function AICourseModuleView(props: AICourseModuleViewProps) {
+  const {
+    courseSlug,
+
+    activeModuleIndex,
+    totalModules,
+    currentModuleTitle,
+    activeLessonIndex,
+    totalLessons,
+    currentLessonTitle,
+
+    onGoToPrevLesson,
+    onGoToNextLesson,
+
+    onUpgrade,
+  } = props;
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [error, setError] = useState('');
+
+  const [lessonHtml, setLessonHtml] = useState('');
+  const { data: aiCourseProgress } = useQuery(
+    getAiCourseProgressOptions({ aiCourseSlug: courseSlug || '' }),
+    queryClient,
+  );
+
+  const lessonId = `${slugify(currentModuleTitle)}__${slugify(currentLessonTitle)}`;
+  const isLessonDone = aiCourseProgress?.done.includes(lessonId);
+
+  const abortController = useMemo(
+    () => new AbortController(),
+    [activeModuleIndex, activeLessonIndex],
+  );
+
+  const generateAiCourseContent = async () => {
+    setIsLoading(true);
+    setError('');
+    setLessonHtml('');
+
+    if (!isLoggedIn()) {
+      setIsLoading(false);
+      setError('Please login to generate course content');
+      return;
+    }
+
+    if (!currentModuleTitle || !currentLessonTitle) {
+      setIsLoading(false);
+      setError('Invalid module title or lesson title');
+      return;
+    }
+
+    const response = await fetch(
+      `${import.meta.env.PUBLIC_API_URL}/v1-generate-ai-course-lesson/${courseSlug}`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        signal: abortController.signal,
+        credentials: 'include',
+        body: JSON.stringify({
+          moduleTitle: currentModuleTitle,
+          lessonTitle: currentLessonTitle,
+          modulePosition: activeModuleIndex,
+          lessonPosition: activeLessonIndex,
+          totalLessonsInModule: totalLessons,
+        }),
+      },
+    );
+
+    if (!response.ok) {
+      const data = await response.json();
+
+      setError(data?.message || 'Something went wrong');
+      setIsLoading(false);
+
+      // Logout user if token is invalid
+      if (data.status === 401) {
+        removeAuthToken();
+        window.location.reload();
+      }
+    }
+
+    const reader = response.body?.getReader();
+
+    if (!reader) {
+      setIsLoading(false);
+      setError('Something went wrong');
+      return;
+    }
+
+    setIsLoading(false);
+    setIsGenerating(true);
+    await readAICourseLessonStream(reader, {
+      onStream: async (result) => {
+        if (abortController.signal.aborted) {
+          return;
+        }
+
+        setLessonHtml(markdownToHtml(result, false));
+      },
+      onStreamEnd: async (result) => {
+        if (abortController.signal.aborted) {
+          return;
+        }
+
+        setLessonHtml(await markdownToHtmlWithHighlighting(result));
+        queryClient.invalidateQueries(getAiCourseLimitOptions());
+        setIsGenerating(false);
+      },
+    });
+  };
+
+  const { mutate: toggleDone, isPending: isTogglingDone } = useMutation(
+    {
+      mutationFn: () => {
+        return httpPatch<AICourseProgressDocument>(
+          `/v1-toggle-done-ai-lesson/${courseSlug}`,
+          {
+            lessonId,
+          },
+        );
+      },
+      onSuccess: (data) => {
+        queryClient.setQueryData(
+          ['ai-course-progress', { aiCourseSlug: courseSlug }],
+          data,
+        );
+      },
+    },
+    queryClient,
+  );
+
+  useEffect(() => {
+    generateAiCourseContent();
+  }, [currentModuleTitle, currentLessonTitle]);
+
+  useEffect(() => {
+    return () => {
+      abortController.abort();
+    };
+  }, [abortController]);
+
+  const cantGoForward =
+    (activeModuleIndex === totalModules - 1 &&
+      activeLessonIndex === totalLessons - 1) ||
+    isGenerating ||
+    isLoading;
+
+  const cantGoBack =
+    (activeModuleIndex === 0 && activeLessonIndex === 0) || isGenerating;
+
+  return (
+    <div className="mx-auto max-w-4xl">
+      <div className="relative rounded-lg border border-gray-200 bg-white p-6 shadow-sm max-lg:px-4 max-lg:pb-4 max-lg:pt-3">
+        {(isGenerating || isLoading) && (
+          <div className="absolute right-3 top-3 flex items-center justify-center">
+            <Loader2Icon
+              size={18}
+              strokeWidth={3}
+              className="animate-spin text-gray-400/70"
+            />
+          </div>
+        )}
+
+        <div className="mb-4 flex items-center justify-between">
+          <div className="text-sm text-gray-500">
+            Lesson {activeLessonIndex + 1} of {totalLessons}
+          </div>
+
+          {!isGenerating && !isLoading && (
+            <>
+              <button
+                disabled={isLoading || isTogglingDone}
+                className={cn(
+                  'absolute right-3 top-3 flex items-center gap-1.5 rounded-full bg-black py-1 pl-2 pr-3 text-sm text-white hover:bg-gray-800 disabled:opacity-50 max-lg:text-xs',
+                  isLessonDone
+                    ? 'bg-red-500 hover:bg-red-600'
+                    : 'bg-green-500 hover:bg-green-600',
+                )}
+                onClick={() => toggleDone()}
+              >
+                {isTogglingDone ? (
+                  <>
+                    <Loader2Icon
+                      size={16}
+                      strokeWidth={3}
+                      className="animate-spin text-white"
+                    />
+                    Please wait ...
+                  </>
+                ) : (
+                  <>
+                    {isLessonDone ? (
+                      <>
+                        <XIcon size={16} />
+                        Mark as Undone
+                      </>
+                    ) : (
+                      <>
+                        <CheckIcon size={16} />
+                        Mark as Done
+                      </>
+                    )}
+                  </>
+                )}
+              </button>
+            </>
+          )}
+        </div>
+
+        <h1 className="mb-6 text-balance text-3xl font-semibold max-lg:mb-3 max-lg:text-xl">
+          {currentLessonTitle?.replace(/^Lesson\s*?\d+[\.:]\s*/, '')}
+        </h1>
+
+        {!error && isLoggedIn() && (
+          <div
+            className="course-content prose prose-lg mt-8 max-w-full text-black prose-headings:mb-3 prose-headings:mt-8 prose-blockquote:font-normal prose-pre:rounded-2xl prose-pre:text-lg prose-li:my-1 prose-thead:border-zinc-800 prose-tr:border-zinc-800 max-lg:mt-4 max-lg:text-base max-lg:prose-h2:mt-3 max-lg:prose-h2:text-lg max-lg:prose-h3:text-base max-lg:prose-pre:px-3 max-lg:prose-pre:text-sm"
+            dangerouslySetInnerHTML={{ __html: lessonHtml }}
+          />
+        )}
+
+        {error && isLoggedIn() && (
+          <div className="mt-8 flex min-h-[300px] items-center justify-center rounded-xl bg-red-50/80">
+            {error.includes('reached the limit') ? (
+              <div className="flex max-w-sm flex-col items-center text-center">
+                <h2 className="text-xl font-semibold text-red-600">
+                  Limit reached
+                </h2>
+                <p className="my-3 text-red-600">
+                  You have reached the AI usage limit for today. Please upgrade
+                  your account to continue.
+                </p>
+
+                <button
+                  onClick={() => {
+                    onUpgrade();
+                  }}
+                  className="rounded-full bg-red-600 px-4 py-1 text-white hover:bg-red-700"
+                >
+                  Upgrade Account
+                </button>
+              </div>
+            ) : (
+              <p className="text-red-600">{error}</p>
+            )}
+          </div>
+        )}
+
+        {!isLoggedIn() && (
+          <div className="mt-8 flex min-h-[152px] flex-col items-center justify-center gap-3 rounded-lg border border-gray-200 p-8">
+            <LockIcon className="size-7 stroke-[2] text-gray-400/90" />
+            <p className="text-sm text-gray-500">
+              Please login to generate course content
+            </p>
+          </div>
+        )}
+
+        <div className="mt-8 flex items-center justify-between">
+          <button
+            onClick={onGoToPrevLesson}
+            disabled={cantGoBack}
+            className={cn(
+              'flex items-center rounded-full px-4 py-2 disabled:opacity-50 max-lg:px-3 max-lg:py-1.5 max-lg:text-sm',
+              cantGoBack
+                ? 'cursor-not-allowed text-gray-400'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200',
+            )}
+          >
+            <ChevronLeft size={16} className="mr-2" />
+            Previous <span className="hidden lg:inline">&nbsp;Lesson</span>
+          </button>
+
+          <button
+            onClick={onGoToNextLesson}
+            disabled={cantGoForward}
+            className={cn(
+              'flex items-center rounded-full px-4 py-2 disabled:opacity-50 max-lg:px-3 max-lg:py-1.5 max-lg:text-sm',
+              cantGoForward
+                ? 'cursor-not-allowed text-gray-400'
+                : 'bg-gray-800 text-white hover:bg-gray-700',
+            )}
+          >
+            Next <span className="hidden lg:inline">&nbsp;Lesson</span>
+            <ChevronRight size={16} className="ml-2" />
+          </button>
+        </div>
+      </div>
+
+      {!isGenerating && !isLoading && (
+        <AICourseFollowUp
+          courseSlug={courseSlug}
+          moduleTitle={currentModuleTitle}
+          lessonTitle={currentLessonTitle}
+        />
+      )}
+    </div>
+  );
+}

src/components/GenerateCourse/AILimitsPopup.tsx

@@ -0,0 +1,103 @@
+import { Gift } from 'lucide-react';
+import { Modal } from '../Modal';
+import { formatCommaNumber } from '../../lib/number';
+import { billingDetailsOptions } from '../../queries/billing';
+import { queryClient } from '../../stores/query-client';
+import { useQuery } from '@tanstack/react-query';
+import { getAiCourseLimitOptions } from '../../queries/ai-course';
+
+type AILimitsPopupProps = {
+  onClose: () => void;
+  onUpgrade: () => void;
+};
+
+export function AILimitsPopup(props: AILimitsPopupProps) {
+  const { onClose, onUpgrade } = props;
+
+  const { data: limits, isLoading } = useQuery(
+    getAiCourseLimitOptions(),
+    queryClient,
+  );
+
+  const { used, limit } = limits ?? { used: 0, limit: 0 };
+
+  const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
+    useQuery(billingDetailsOptions(), queryClient);
+
+  const isPaidUser = userBillingDetails?.status !== 'none';
+
+  return (
+    <Modal
+      onClose={onClose}
+      wrapperClassName="rounded-xl max-w-xl w-full h-auto"
+      bodyClassName="p-6"
+      overlayClassName="items-start md:items-center"
+    >
+      <h2 className="mb-8 text-center text-xl font-semibold">
+        Daily AI Limits
+      </h2>
+
+      {/* Usage Progress Bar */}
+      <div className="mb-6">
+        <div className="mb-2 flex justify-between">
+          <span className="text-sm font-medium">
+            Usage: {formatCommaNumber(used)}&nbsp;/&nbsp;
+            {formatCommaNumber(limit)} tokens
+          </span>
+          <span className="text-sm font-medium">
+            {Math.round((used / limit) * 100)}%
+          </span>
+        </div>
+        <div className="h-2.5 w-full rounded-full bg-gray-200">
+          <div
+            className="h-2.5 rounded-full bg-yellow-500"
+            style={{ width: `${Math.min(100, (used / limit) * 100)}%` }}
+          ></div>
+        </div>
+      </div>
+
+      {/* Usage Stats */}
+      <div className="rounded-lg bg-gray-50 p-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <p className="text-sm text-gray-500">Used Today</p>
+            <p className="text-2xl font-bold">{formatCommaNumber(used)}</p>
+          </div>
+          <div>
+            <p className="text-sm text-gray-500">Daily Limit</p>
+            <p className="text-2xl font-bold">{formatCommaNumber(limit)}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Explanation */}
+      <div className="mt-2">
+        <div className="space-y-3 text-gray-600">
+          <p className="text-sm">
+            Limit resets every 24 hours.{' '}
+            {!isPaidUser && 'Consider upgrading for more tokens.'}
+          </p>
+        </div>
+      </div>
+
+      {/* Action Button */}
+      <div className="mt-auto flex flex-col gap-2 pt-4">
+        {!isPaidUser && (
+          <button
+            onClick={onUpgrade}
+            className="flex w-full items-center justify-center gap-2 rounded-lg bg-yellow-400 px-4 py-2.5 text-sm font-medium text-black transition-colors hover:bg-yellow-500"
+          >
+            <Gift className="size-4" />
+            Upgrade to Unlimited
+          </button>
+        )}
+        <button
+          onClick={onClose}
+          className="w-full rounded-lg bg-gray-200 px-4 py-2.5 text-sm text-gray-600 transition-colors hover:bg-gray-300"
+        >
+          Close
+        </button>
+      </div>
+    </Modal>
+  );
+}

src/components/GenerateCourse/CircularProgress.tsx

@@ -0,0 +1,57 @@
+import { cn } from '../../lib/classname';
+
+export function ChapterNumberSkeleton() {
+  return (
+    <div className="h-[28px] w-[28px] animate-pulse rounded-full bg-gray-200" />
+  );
+}
+
+type CircularProgressProps = {
+  percentage: number;
+  children: React.ReactNode;
+  isVisible?: boolean;
+  isActive?: boolean;
+  isLoading?: boolean;
+};
+
+export function CircularProgress(props: CircularProgressProps) {
+  const {
+    percentage,
+    children,
+    isVisible = true,
+    isActive = false,
+    isLoading = false,
+  } = props;
+
+  const circumference = 2 * Math.PI * 13;
+  const strokeDasharray = `${circumference}`;
+  const strokeDashoffset = circumference - (percentage / 100) * circumference;
+
+  return (
+    <div className="relative flex h-[28px] w-[28px] flex-shrink-0 items-center justify-center">
+      {isVisible && !isLoading && (
+        <svg className="absolute h-full w-full -rotate-90">
+          <circle
+            cx="14"
+            cy="14"
+            r="13"
+            stroke="currentColor"
+            strokeWidth="1.75"
+            fill="none"
+            className={cn('text-gray-400/70', {
+              'text-black': isActive,
+            })}
+            style={{
+              strokeDasharray,
+              strokeDashoffset,
+              transition: 'stroke-dashoffset 0.3s ease',
+            }}
+          />
+        </svg>
+      )}
+
+      {!isLoading && children}
+      {isLoading && <ChapterNumberSkeleton />}
+    </div>
+  );
+}

src/components/GenerateCourse/GenerateAICourse.tsx

@@ -0,0 +1,189 @@
+import { useEffect, useState } from 'react';
+import { getUrlParams } from '../../lib/browser';
+import { isLoggedIn } from '../../lib/jwt';
+import { generateAiCourseStructure, type AiCourse } from '../../lib/ai';
+import { readAICourseStream } from '../../helper/read-stream';
+import { AICourseContent } from './AICourseContent';
+import { queryClient } from '../../stores/query-client';
+import { getAiCourseLimitOptions } from '../../queries/ai-course';
+
+type GenerateAICourseProps = {};
+
+export function GenerateAICourse(props: GenerateAICourseProps) {
+  const [term, setTerm] = useState('');
+  const [difficulty, setDifficulty] = useState('');
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const [courseId, setCourseId] = useState('');
+  const [courseSlug, setCourseSlug] = useState('');
+  const [course, setCourse] = useState<AiCourse>({
+    title: '',
+    modules: [],
+    difficulty: '',
+  });
+
+  useEffect(() => {
+    if (term || difficulty) {
+      return;
+    }
+
+    const params = getUrlParams();
+    const paramsTerm = params?.term;
+    const paramsDifficulty = params?.difficulty;
+    if (!paramsTerm || !paramsDifficulty) {
+      return;
+    }
+
+    setTerm(paramsTerm);
+    setDifficulty(paramsDifficulty);
+    generateCourse({ term: paramsTerm, difficulty: paramsDifficulty });
+  }, [term, difficulty]);
+
+  const generateCourse = async (options: {
+    term: string;
+    difficulty: string;
+  }) => {
+    const { term, difficulty } = options;
+
+    if (!isLoggedIn()) {
+      window.location.href = '/ai-tutor';
+      return;
+    }
+
+    setIsLoading(true);
+    setCourse({
+      title: '',
+      modules: [],
+      difficulty: '',
+    });
+    setError('');
+
+    try {
+      const response = await fetch(
+        `${import.meta.env.PUBLIC_API_URL}/v1-generate-ai-course`,
+        {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            keyword: term,
+            difficulty,
+          }),
+          credentials: 'include',
+        },
+      );
+
+      if (!response.ok) {
+        const data = await response.json();
+        console.error(
+          'Error generating course:',
+          data?.message || 'Something went wrong',
+        );
+        setIsLoading(false);
+        setError(data?.message || 'Something went wrong');
+        return;
+      }
+
+      const reader = response.body?.getReader();
+
+      if (!reader) {
+        console.error('Failed to get reader from response');
+        setError('Something went wrong');
+        setIsLoading(false);
+        return;
+      }
+
+      const COURSE_ID_REGEX = new RegExp('@COURSEID:(\\w+)@');
+      const COURSE_SLUG_REGEX = new RegExp(/@COURSESLUG:([\w-]+)@/);
+
+      await readAICourseStream(reader, {
+        onStream: (result) => {
+          if (result.includes('@COURSEID') || result.includes('@COURSESLUG')) {
+            const courseIdMatch = result.match(COURSE_ID_REGEX);
+            const courseSlugMatch = result.match(COURSE_SLUG_REGEX);
+            const extractedCourseId = courseIdMatch?.[1] || '';
+            const extractedCourseSlug = courseSlugMatch?.[1] || '';
+
+            if (extractedCourseSlug) {
+              window.history.replaceState(
+                {
+                  courseId,
+                  courseSlug: extractedCourseSlug,
+                  term,
+                  difficulty,
+                },
+                '',
+                `${origin}/ai-tutor/${extractedCourseSlug}`,
+              );
+            }
+
+            result = result
+              .replace(COURSE_ID_REGEX, '')
+              .replace(COURSE_SLUG_REGEX, '');
+
+            setCourseId(extractedCourseId);
+            setCourseSlug(extractedCourseSlug);
+          }
+
+          try {
+            const aiCourse = generateAiCourseStructure(result);
+            setCourse({
+              ...aiCourse,
+              difficulty: difficulty || '',
+            });
+          } catch (e) {
+            console.error('Error parsing streamed course content:', e);
+          }
+        },
+        onStreamEnd: (result) => {
+          result = result
+            .replace(COURSE_ID_REGEX, '')
+            .replace(COURSE_SLUG_REGEX, '');
+          setIsLoading(false);
+          queryClient.invalidateQueries(getAiCourseLimitOptions());
+        },
+      });
+    } catch (error: any) {
+      setError(error?.message || 'Something went wrong');
+      console.error('Error in course generation:', error);
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const handlePopState = (e: PopStateEvent) => {
+      const { courseId, courseSlug, term, difficulty } = e.state || {};
+      if (!courseId || !courseSlug) {
+        window.location.reload();
+        return;
+      }
+
+      setCourseId(courseId);
+      setCourseSlug(courseSlug);
+      setTerm(term);
+      setDifficulty(difficulty);
+
+      setIsLoading(true);
+      generateCourse({ term, difficulty }).finally(() => {
+        setIsLoading(false);
+      });
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => {
+      window.removeEventListener('popstate', handlePopState);
+    };
+  }, []);
+
+  return (
+    <AICourseContent
+      courseSlug={courseSlug}
+      course={course}
+      isLoading={isLoading}
+      error={error}
+    />
+  );
+}

src/components/GenerateCourse/GetAICourse.tsx

@@ -0,0 +1,65 @@
+import { useQuery } from '@tanstack/react-query';
+import { getAiCourseOptions } from '../../queries/ai-course';
+import { queryClient } from '../../stores/query-client';
+import { useEffect, useState } from 'react';
+import { AICourseContent } from './AICourseContent';
+import { generateAiCourseStructure } from '../../lib/ai';
+import { isLoggedIn } from '../../lib/jwt';
+
+type GetAICourseProps = {
+  courseSlug: string;
+};
+
+export function GetAICourse(props: GetAICourseProps) {
+  const { courseSlug } = props;
+
+  const [isLoading, setIsLoading] = useState(true);
+  const { data: aiCourse, error } = useQuery(
+    {
+      ...getAiCourseOptions({ aiCourseSlug: courseSlug }),
+      select: (data) => {
+        return {
+          ...data,
+          course: generateAiCourseStructure(data.data),
+        };
+      },
+      enabled: !!courseSlug && !!isLoggedIn(),
+    },
+    queryClient,
+  );
+
+  useEffect(() => {
+    if (!isLoggedIn()) {
+      window.location.href = '/ai-tutor';
+    }
+  }, [isLoggedIn]);
+
+  useEffect(() => {
+    if (!aiCourse) {
+      return;
+    }
+
+    setIsLoading(false);
+  }, [aiCourse]);
+
+  useEffect(() => {
+    if (!error) {
+      return;
+    }
+
+    setIsLoading(false);
+  }, [error]);
+
+  return (
+    <AICourseContent
+      course={{
+        title: aiCourse?.title || '',
+        modules: aiCourse?.course.modules || [],
+        difficulty: aiCourse?.difficulty || 'Easy',
+      }}
+      isLoading={isLoading}
+      courseSlug={courseSlug}
+      error={error?.message}
+    />
+  );
+}

src/components/GenerateCourse/UserCoursesList.tsx

@@ -0,0 +1,180 @@
+import { useQuery } from '@tanstack/react-query';
+import {
+  getAiCourseLimitOptions,
+  listUserAiCoursesOptions,
+} from '../../queries/ai-course';
+import { queryClient } from '../../stores/query-client';
+import { AICourseCard } from './AICourseCard';
+import { useEffect, useState } from 'react';
+import { Gift, Loader2, Search, User2 } from 'lucide-react';
+import { isLoggedIn } from '../../lib/jwt';
+import { showLoginPopup } from '../../lib/popup';
+import { cn } from '../../lib/classname';
+import { billingDetailsOptions } from '../../queries/billing';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+
+type UserCoursesListProps = {};
+
+export function UserCoursesList(props: UserCoursesListProps) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [showUpgradePopup, setShowUpgradePopup] = useState(false);
+
+  const { data: limits, isLoading } = useQuery(
+    getAiCourseLimitOptions(),
+    queryClient,
+  );
+
+  const { used, limit } = limits ?? { used: 0, limit: 0 };
+
+  const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
+    useQuery(billingDetailsOptions(), queryClient);
+
+  const isPaidUser = userBillingDetails?.status !== 'none';
+
+  const { data: userAiCourses, isFetching: isUserAiCoursesLoading } = useQuery(
+    listUserAiCoursesOptions(),
+    queryClient,
+  );
+
+  useEffect(() => {
+    setIsInitialLoading(false);
+  }, [userAiCourses]);
+
+  const filteredCourses = userAiCourses?.filter((course) => {
+    if (!searchTerm.trim()) {
+      return true;
+    }
+
+    const searchLower = searchTerm.toLowerCase();
+
+    return (
+      course.title.toLowerCase().includes(searchLower) ||
+      course.keyword.toLowerCase().includes(searchLower)
+    );
+  });
+
+  const isAuthenticated = isLoggedIn();
+
+  const canSearch =
+    !isInitialLoading &&
+    !isUserAiCoursesLoading &&
+    isAuthenticated &&
+    userAiCourses?.length !== 0;
+
+  const limitUsedPercentage = Math.round((used / limit) * 100);
+
+  return (
+    <>
+      {showUpgradePopup && (
+        <UpgradeAccountModal onClose={() => setShowUpgradePopup(false)} />
+      )}
+      <div className="mb-3 flex min-h-[35px] items-center justify-between max-sm:mb-1">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">
+            <span className='max-md:hidden'>Your </span>Courses
+          </h2>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <div
+            className={cn(
+              'flex items-center gap-2 opacity-0 transition-opacity',
+              {
+                'opacity-100': !isPaidUser,
+              },
+            )}
+          >
+            <p className="flex items-center text-sm text-yellow-600">
+              <span className="max-md:hidden">
+                {limitUsedPercentage}% of daily limit used{' '}
+              </span>
+              <span className="inline md:hidden">
+                {limitUsedPercentage}% used
+              </span>
+              <button
+                onClick={() => {
+                  setShowUpgradePopup(true);
+                }}
+                className="ml-1.5 flex items-center gap-1 rounded-full bg-yellow-600 py-0.5 pl-1.5 pr-2 text-xs text-white"
+              >
+                <Gift className="size-4" />
+                Upgrade
+              </button>
+            </p>
+          </div>
+
+          <div className={cn('relative w-64 max-sm:hidden', {})}>
+            <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+              <Search className="h-4 w-4 text-gray-400" />
+            </div>
+            <input
+              type="text"
+              className="block w-full rounded-md border border-gray-200 bg-white py-1.5 pl-10 pr-3 leading-5 placeholder-gray-500 transition-all focus:border-gray-300 focus:outline-none focus:ring-blue-500 disabled:opacity-70 sm:text-sm"
+              placeholder="Search your courses..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+        </div>
+      </div>
+
+      {!isInitialLoading && !isUserAiCoursesLoading && !isAuthenticated && (
+        <div className="flex min-h-[152px] flex-col items-center justify-center rounded-lg border border-gray-200 bg-white px-6 py-4">
+          <User2 className="mb-2 size-8 text-gray-300" />
+          <p className="max-w-sm text-balance text-center text-gray-500">
+            <button
+              onClick={() => {
+                showLoginPopup();
+              }}
+              className="font-medium text-black underline underline-offset-2 hover:opacity-80"
+            >
+              Sign up (free and takes 2s) or login
+            </button>{' '}
+            to generate and save courses.
+          </p>
+        </div>
+      )}
+
+      {!isUserAiCoursesLoading &&
+        !isInitialLoading &&
+        userAiCourses?.length === 0 && (
+          <div className="flex min-h-[152px] items-center justify-center rounded-lg border border-gray-200 bg-white py-4">
+            <p className="text-sm text-gray-600">
+              You haven't generated any courses yet.
+            </p>
+          </div>
+        )}
+
+      {(isUserAiCoursesLoading || isInitialLoading) && (
+        <div className="flex min-h-[152px] items-center justify-center gap-2 rounded-lg border border-gray-200 bg-white py-4">
+          <Loader2
+            className="size-4 animate-spin text-gray-400"
+            strokeWidth={2.5}
+          />
+          <p className="text-sm font-medium text-gray-600">Loading...</p>
+        </div>
+      )}
+
+      {!isUserAiCoursesLoading &&
+        filteredCourses &&
+        filteredCourses.length > 0 && (
+          <div className="flex flex-col gap-2">
+            {filteredCourses.map((course) => (
+              <AICourseCard key={course._id} course={course} />
+            ))}
+          </div>
+        )}
+
+      {!isUserAiCoursesLoading &&
+        (userAiCourses?.length || 0 > 0) &&
+        filteredCourses?.length === 0 && (
+          <div className="flex min-h-[114px] items-center justify-center rounded-lg border border-gray-200 bg-white py-4">
+            <p className="text-sm text-gray-600">
+              No courses match your search.
+            </p>
+          </div>
+        )}
+    </>
+  );
+}

src/components/Guide/RelatedGuides.tsx

@@ -1,6 +1,6 @@
+import { ChevronDown } from 'lucide-react';
 import { useState } from 'react';
 import { cn } from '../../lib/classname';
-import { ChevronDown } from 'lucide-react';
 
 type RelatedGuidesProps = {
   relatedTitle?: string;
@@ -27,7 +27,7 @@ export function RelatedGuides(props: RelatedGuidesProps) {
     <div className={cn('relative min-w-[250px] pt-0 lg:px-5 lg:pt-10')}>
       <h4 className="text-lg font-medium max-lg:hidden">{relatedTitle}</h4>
       <button
-        className="flex border-b w-full items-center justify-between gap-2 bg-gray-300 px-3 py-2 text-sm font-medium lg:hidden"
+        className="flex w-full items-center justify-between gap-2 border-b bg-gray-300 px-3 py-2 text-sm font-medium lg:hidden"
         onClick={() => setIsOpen(!isOpen)}
       >
         {relatedTitle}

src/components/SQLCourse/CourseAnnouncement.tsx

@@ -10,11 +10,8 @@ export function CourseAnnouncement() {
 
   return (
     <div className="sticky top-0 z-[91]">
-      <a
+      <a href="/courses/sql" className="flex items-center bg-yellow-400 py-1.5">
-        href="/courses/sql"
+        <span className="container mx-auto flex items-center justify-start gap-2 text-center sm:justify-center sm:gap-4">
-        className="flex items-center bg-yellow-400 py-1.5"
-      >
-        <span className="container mx-auto flex items-center justify-start sm:justify-center gap-2 text-center sm:gap-4">
           <span className="flex items-center gap-1.5 text-xs font-medium text-black md:text-base">
             <Database className="hidden h-4 w-4 flex-shrink-0 text-black sm:block" />
             <span className="hidden sm:block">
@@ -22,7 +19,7 @@ export function CourseAnnouncement() {
             </span>
             <span className="block sm:hidden">Announcing our SQL course</span>
           </span>
-          <span className="items-center gap-1.5 rounded-full bg-black px-2 py-0.5 text-sm text-xs font-medium uppercase tracking-wide text-white hover:bg-zinc-800 sm:px-3 sm:py-1">
+          <span className="items-center gap-1.5 rounded-full bg-black px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-white hover:bg-zinc-800 sm:px-3 sm:py-1">
             <span className="mr-1.5 hidden sm:inline">Start Learning</span>
             <span className="mr-1.5 inline sm:hidden">Visit</span>
             <span className="">→</span>

src/helper/number.ts

@@ -1,12 +1,12 @@
-export function getPercentage(portion: number, total: number): string {
+export function getPercentage(portion: number, total: number): number {
   if (portion <= 0 || total <= 0) {
-    return '0.00';
+    return 0;
   }
-  
+
   if (portion >= total) {
-    return '100.00';
+    return 100;
   }
 
   const percentage = (portion / total) * 100;
-  return percentage.toFixed(2);
+  return Math.round(percentage);
 }

src/helper/read-stream.ts

@@ -71,3 +71,71 @@ export async function readAIRoadmapContentStream(
   onStreamEnd?.(result);
   reader.releaseLock();
 }
+
+export async function readAICourseStream(
+  reader: ReadableStreamDefaultReader<Uint8Array>,
+  {
+    onStream,
+    onStreamEnd,
+  }: {
+    onStream?: (course: string) => void;
+    onStreamEnd?: (course: string) => void;
+  },
+) {
+  const decoder = new TextDecoder('utf-8');
+  let result = '';
+
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) {
+      break;
+    }
+
+    // Process the stream data as it comes in
+    if (value) {
+      let start = 0;
+      for (let i = 0; i < value.length; i++) {
+        if (value[i] === NEW_LINE) {
+          result += decoder.decode(value.slice(start, i + 1));
+          onStream?.(result);
+          start = i + 1;
+        }
+      }
+      if (start < value.length) {
+        result += decoder.decode(value.slice(start));
+      }
+    }
+  }
+
+  onStream?.(result);
+  onStreamEnd?.(result);
+  reader.releaseLock();
+}
+
+export async function readAICourseLessonStream(
+  reader: ReadableStreamDefaultReader<Uint8Array>,
+  {
+    onStream,
+    onStreamEnd,
+  }: {
+    onStream?: (lesson: string) => void;
+    onStreamEnd?: (lesson: string) => void;
+  },
+) {
+  const decoder = new TextDecoder('utf-8');
+  let result = '';
+
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) {
+      break;
+    }
+
+    result += decoder.decode(value);
+    onStream?.(result);
+  }
+
+  onStream?.(result);
+  onStreamEnd?.(result);
+  reader.releaseLock();
+}

src/icons/credit-card.svg

@@ -0,0 +1 @@
+<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" class="lucide lucide-credit-card"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" x2="22" y1="10" y2="10"/></svg>

src/lib/ai.ts

@@ -1 +1,55 @@
-export const IS_KEY_ONLY_ROADMAP_GENERATION = false;
+export const IS_KEY_ONLY_ROADMAP_GENERATION = false;
+
+type Lesson = string;
+
+type Module = {
+  title: string;
+  lessons: Lesson[];
+};
+
+export type AiCourse = {
+  title: string;
+  modules: Module[];
+  difficulty: string;
+};
+
+export function generateAiCourseStructure(
+  data: string,
+): Omit<AiCourse, 'difficulty'> {
+  const lines = data.split('\n');
+  let title = '';
+  const modules: Module[] = [];
+  let currentModule: Module | null = null;
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].trim();
+
+    if (i === 0 && line.startsWith('#')) {
+      // First line is the title
+      title = line.replace('#', '').trim();
+    } else if (line.startsWith('## ')) {
+      // New module
+      if (currentModule) {
+        modules.push(currentModule);
+      }
+      currentModule = {
+        title: line.replace('## ', ''),
+        lessons: [],
+      };
+      // Removed auto-expand code to keep modules collapsed by default
+    } else if (line.startsWith('- ') && currentModule) {
+      // Lesson within current module
+      currentModule.lessons.push(line.replace('- ', ''));
+    }
+  }
+
+  // Add the last module if it exists
+  if (currentModule) {
+    modules.push(currentModule);
+  }
+
+  return {
+    title,
+    modules,
+  };
+}

src/lib/markdown.ts

@@ -1,5 +1,6 @@
 // @ts-ignore
 import MarkdownIt from 'markdown-it';
+import MarkdownItAsync from 'markdown-it-async';
 
 // replaces @variableName@ with the value of the variable
 export function replaceVariables(
@@ -16,13 +17,13 @@ export function replaceVariables(
   });
 }
 
+const md = new MarkdownIt({
+  html: true,
+  linkify: true,
+});
+
 export function markdownToHtml(markdown: string, isInline = true): string {
   try {
-    const md = new MarkdownIt({
-      html: true,
-      linkify: true,
-    });
-
     // Solution to open links in new tab in markdown
     // otherwise default behaviour is to open in same tab
     //
@@ -60,3 +61,52 @@ export function markdownToHtml(markdown: string, isInline = true): string {
 export function sanitizeMarkdown(markdown: string) {
   return markdown.replace(/\\\[([^\\]+)\\\]\(([^\\]+)\)/g, '[$1]($2)');
 }
+
+const markdownItAsync = MarkdownItAsync({
+  html: true,
+  linkify: true,
+
+  async highlight(code, lang, attrs) {
+    const { codeToHtml } = await import('shiki');
+
+    const html = await codeToHtml(code, {
+      lang: lang?.toLowerCase(),
+      theme: 'dracula',
+    });
+
+    return html;
+  },
+});
+
+export async function markdownToHtmlWithHighlighting(markdown: string) {
+  try {
+    // Solution to open links in new tab in markdown
+    // otherwise default behaviour is to open in same tab
+    //
+    // SOURCE: https://github.com/markdown-it/markdown-it/blob/master/docs/architecture.md#renderer
+    //
+    const defaultRender =
+      markdownItAsync.renderer.rules.link_open ||
+      function (tokens, idx, options, env, self) {
+        return self.renderToken(tokens, idx, options);
+      };
+
+    markdownItAsync.renderer.rules.link_open = function (
+      tokens,
+      idx,
+      options,
+      env,
+      self,
+    ) {
+      // Add a new `target` attribute, or replace the value of the existing one.
+      tokens[idx].attrSet('target', '_blank');
+
+      // Pass the token to the default renderer.
+      return defaultRender(tokens, idx, options, env, self);
+    };
+
+    return markdownItAsync.renderAsync(markdown);
+  } catch (e) {
+    return markdown;
+  }
+}

src/pages/account/billing.astro

@@ -0,0 +1,16 @@
+---
+import AccountSidebar from '../../components/AccountSidebar.astro';
+import AccountLayout from '../../layouts/AccountLayout.astro';
+import { BillingPage } from '../../components/Billing/BillingPage';
+---
+
+<AccountLayout
+  title='Billing'
+  description=''
+  noIndex={true}
+  initialLoadingMessage={'Loading billing details'}
+>
+  <AccountSidebar activePageId='billing' activePageTitle='Billing'>
+    <BillingPage client:load />
+  </AccountSidebar>
+</AccountLayout>

src/pages/ai-tutor/[courseSlug].astro

@@ -0,0 +1,24 @@
+---
+import { GetAICourse } from '../../components/GenerateCourse/GetAICourse';
+import SkeletonLayout from '../../layouts/SkeletonLayout.astro';
+import { CheckSubscriptionVerification } from '../../components/Billing/CheckSubscriptionVerification';
+
+export const prerender = false;
+
+interface Params extends Record<string, string | undefined> {
+  courseSlug: string;
+}
+
+const { courseSlug } = Astro.params as Params;
+---
+
+<SkeletonLayout
+  title='AI Tutor'
+  briefTitle='AI Tutor'
+  description='AI Tutor'
+  keywords={['ai', 'tutor', 'education', 'learning']}
+  canonicalUrl={`/ai-tutor/${courseSlug}`}
+>
+  <GetAICourse client:load courseSlug={courseSlug} />
+  <CheckSubscriptionVerification client:load />
+</SkeletonLayout>

src/pages/ai-tutor/index.astro

@@ -0,0 +1,10 @@
+---
+import { AICourse } from '../../components/GenerateCourse/AICourse';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { CheckSubscriptionVerification } from '../../components/Billing/CheckSubscriptionVerification';
+---
+
+<BaseLayout title='AI Tutor' noIndex={true}>
+  <AICourse client:load />
+  <CheckSubscriptionVerification client:load />
+</BaseLayout>

src/pages/ai-tutor/search.astro

@@ -0,0 +1,16 @@
+---
+import { GenerateAICourse } from '../../components/GenerateCourse/GenerateAICourse';
+import SkeletonLayout from '../../layouts/SkeletonLayout.astro';
+import { CheckSubscriptionVerification } from '../../components/Billing/CheckSubscriptionVerification';
+---
+
+<SkeletonLayout
+  title='AI Tutor'
+  briefTitle='AI Tutor'
+  description='AI Tutor'
+  keywords={['ai', 'tutor', 'education', 'learning']}
+  canonicalUrl='/ai-tutor/search'
+>
+  <GenerateAICourse client:load />
+  <CheckSubscriptionVerification client:load />
+</SkeletonLayout>

src/queries/ai-course.ts

@@ -0,0 +1,92 @@
+import { httpGet } from '../lib/query-http';
+import { isLoggedIn } from '../lib/jwt';
+import { queryOptions } from '@tanstack/react-query';
+
+export interface AICourseProgressDocument {
+  _id: string;
+  userId: string;
+  courseId: string;
+  done: string[];
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+type GetAICourseProgressParams = {
+  aiCourseSlug: string;
+};
+
+type GetAICourseProgressResponse = AICourseProgressDocument;
+
+export function getAiCourseProgressOptions(params: GetAICourseProgressParams) {
+  return {
+    queryKey: ['ai-course-progress', params],
+    queryFn: () => {
+      return httpGet<GetAICourseProgressResponse>(
+        `/v1-get-ai-course-progress/${params.aiCourseSlug}`,
+      );
+    },
+    enabled: !!params.aiCourseSlug && isLoggedIn(),
+  };
+}
+
+type GetAICourseParams = {
+  aiCourseSlug: string;
+};
+
+export interface AICourseDocument {
+  _id: string;
+  userId: string;
+  title: string;
+  slug?: string;
+  keyword: string;
+  difficulty: string;
+  data: string;
+  viewCount: number;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+type GetAICourseResponse = AICourseDocument;
+
+export function getAiCourseOptions(params: GetAICourseParams) {
+  return {
+    queryKey: ['ai-course', params],
+    queryFn: () => {
+      return httpGet<GetAICourseResponse>(
+        `/v1-get-ai-course/${params.aiCourseSlug}`,
+      );
+    },
+  };
+}
+
+export type GetAICourseLimitResponse = {
+  used: number;
+  limit: number;
+};
+
+export function getAiCourseLimitOptions() {
+  return queryOptions({
+    queryKey: ['ai-course-limit'],
+    queryFn: () => {
+      return httpGet<GetAICourseLimitResponse>(`/v1-get-ai-course-limit`);
+    },
+    enabled: !!isLoggedIn(),
+  });
+}
+
+export type AICourseListItem = AICourseDocument & {
+  progress: AICourseProgressDocument;
+  lessonCount: number;
+};
+
+type ListUserAiCoursesResponse = AICourseListItem[];
+
+export function listUserAiCoursesOptions() {
+  return {
+    queryKey: ['user-ai-courses'],
+    queryFn: () => {
+      return httpGet<ListUserAiCoursesResponse>(`/v1-list-user-ai-courses`);
+    },
+    enabled: !!isLoggedIn(),
+  };
+}

src/queries/billing.ts

@@ -1,5 +1,57 @@
 import { queryOptions } from '@tanstack/react-query';
 import { httpGet } from '../lib/query-http';
+import { isLoggedIn } from '../lib/jwt';
+
+export const allowedSubscriptionStatus = [
+  'active',
+  'canceled',
+  'incomplete',
+  'incomplete_expired',
+  'past_due',
+  'paused',
+  'trialing',
+  'unpaid',
+  'none',
+] as const;
+export type AllowedSubscriptionStatus =
+  (typeof allowedSubscriptionStatus)[number];
+
+export const USER_SUBSCRIPTION_PLAN_PRICES = [
+  {
+    name: 'Pay Monthly',
+    interval: 'month',
+    priceId: import.meta.env.PUBLIC_STRIPE_INDIVIDUAL_MONTHLY_PRICE_ID,
+    amount: import.meta.env.PUBLIC_STRIPE_INDIVIDUAL_MONTHLY_PRICE_AMOUNT,
+  },
+  {
+    name: 'Pay Yearly',
+    interval: 'year',
+    priceId: import.meta.env.PUBLIC_STRIPE_INDIVIDUAL_YEARLY_PRICE_ID,
+    amount: import.meta.env.PUBLIC_STRIPE_INDIVIDUAL_YEARLY_PRICE_AMOUNT,
+  },
+] as const;
+
+export type AllowedSubscriptionInterval =
+  (typeof USER_SUBSCRIPTION_PLAN_PRICES)[number]['interval'];
+
+type BillingDetailsResponse = {
+  status: AllowedSubscriptionStatus;
+  planId?: string;
+  priceId?: string;
+  interval?: string;
+  currentPeriodEnd?: Date;
+  cancelAtPeriodEnd?: boolean;
+};
+
+export function billingDetailsOptions() {
+  return queryOptions({
+    queryKey: ['billing-details'],
+    queryFn: async () => {
+      return httpGet<BillingDetailsResponse>('/v1-billing-details');
+    },
+    enabled: !!isLoggedIn(),
+  });
+}
 
 type CoursePriceParams = {
   courseSlug: string;
@@ -22,4 +74,4 @@ export function coursePriceOptions(params: CoursePriceParams) {
       );
     },
   });
-}
+}