Remove outdated resource

* Update design-principles@p96fNXv0Z4rEEXJR9hAYX.md

add design principles description

* Update src/data/roadmaps/software-design-architecture/content/design-principles@p96fNXv0Z4rEEXJR9hAYX.md

* Update src/data/roadmaps/software-design-architecture/content/design-principles@p96fNXv0Z4rEEXJR9hAYX.md

* Update src/data/roadmaps/software-design-architecture/content/design-principles@p96fNXv0Z4rEEXJR9hAYX.md

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

.astro/settings.json

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

.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

.cursor/rules/content-migration.mdc

@@ -0,0 +1,155 @@
+---
+description: When user requests migrating old roadmap content to new folder from content-old to content folder
+globs: 
+alwaysApply: false
+---
+# Content Migration Rule
+
+## Rule Name: content-migration
+
+## Description
+This rule provides a complete process for migrating roadmap content from old structure to new structure using migration mapping files.
+
+## When to Use
+Use this rule when you need to:
+- Migrate content from content-old directories to content directories
+- Use a migration-mapping.json file to map topic paths to content IDs
+- Populate empty content files with existing content from legacy structure
+
+## Process
+
+### 1. Prerequisites Check
+- Verify the roadmap directory has a `migration-mapping.json` file
+- Confirm `content-old/` directory exists with source content
+- Confirm `content/` directory exists with target files
+
+### 2. Migration Script Creation
+Create a Node.js script with the following functionality:
+
+```javascript
+const fs = require('fs');
+const path = require('path');
+
+// Load the migration mapping
+const migrationMapping = JSON.parse(fs.readFileSync('migration-mapping.json', 'utf8'));
+
+// Function to find old content file based on topic path
+function findOldContentFile(topicPath) {
+  const parts = topicPath.split(':');
+  
+  if (parts.length === 1) {
+    // Top level file like "introduction"
+    return path.join('content-old', parts[0], 'index.md');
+  } else if (parts.length === 2) {
+    // Like "introduction:what-is-rust"
+    const [folder, filename] = parts;
+    return path.join('content-old', folder, `${filename}.md`);
+  } else if (parts.length === 3) {
+    // Like "language-basics:syntax:variables"
+    const [folder, subfolder, filename] = parts;
+    return path.join('content-old', folder, subfolder, `${filename}.md`);
+  }
+  
+  return null;
+}
+
+// Function to find new content file based on content ID
+function findNewContentFile(contentId) {
+  const contentDir = 'content';
+  const files = fs.readdirSync(contentDir);
+  
+  // Find file that ends with the content ID
+  const matchingFile = files.find(file => file.includes(`@${contentId}.md`));
+  
+  if (matchingFile) {
+    return path.join(contentDir, matchingFile);
+  }
+  
+  return null;
+}
+
+// Process each mapping
+console.log('Starting content migration...\n');
+
+let migratedCount = 0;
+let skippedCount = 0;
+
+for (const [topicPath, contentId] of Object.entries(migrationMapping)) {
+  const oldFilePath = findOldContentFile(topicPath);
+  const newFilePath = findNewContentFile(contentId);
+  
+  if (!oldFilePath) {
+    console.log(`❌ Could not determine old file path for: ${topicPath}`);
+    skippedCount++;
+    continue;
+  }
+  
+  if (!newFilePath) {
+    console.log(`❌ Could not find new file for content ID: ${contentId} (topic: ${topicPath})`);
+    skippedCount++;
+    continue;
+  }
+  
+  if (!fs.existsSync(oldFilePath)) {
+    console.log(`❌ Old file does not exist: ${oldFilePath} (topic: ${topicPath})`);
+    skippedCount++;
+    continue;
+  }
+  
+  try {
+    // Read old content
+    const oldContent = fs.readFileSync(oldFilePath, 'utf8');
+    
+    // Write to new file
+    fs.writeFileSync(newFilePath, oldContent);
+    
+    console.log(`✅ Migrated: ${topicPath} -> ${path.basename(newFilePath)}`);
+    migratedCount++;
+  } catch (error) {
+    console.log(`❌ Error migrating ${topicPath}: ${error.message}`);
+    skippedCount++;
+  }
+}
+
+console.log(`\n📊 Migration complete:`);
+console.log(`   Migrated: ${migratedCount} files`);
+console.log(`   Skipped: ${skippedCount} files`);
+console.log(`   Total: ${Object.keys(migrationMapping).length} mappings`);
+```
+
+### 3. Execution Steps
+1. Navigate to the roadmap directory (e.g., `src/data/roadmaps/[roadmap-name]`)
+2. Create the migration script as `migrate_content.cjs`
+3. Run: `node migrate_content.cjs`
+4. Review the migration results
+5. Clean up the temporary script file
+
+### 4. Validation
+After migration:
+- Verify a few migrated files have proper content (not just titles)
+- Check that the content structure matches the old content
+- Ensure proper markdown formatting is preserved
+
+## File Structure Expected
+```
+roadmap-directory/
+├── migration-mapping.json
+├── content/
+│   ├── file1@contentId1.md
+│   ├── file2@contentId2.md
+│   └── ...
+└── content-old/
+    ├── section1/
+    │   ├── index.md
+    │   ├── topic1.md
+    │   └── subsection1/
+    │       └── subtopic1.md
+    └── section2/
+        └── ...
+```
+
+## Notes
+- The migration mapping uses colons (`:`) to separate nested paths
+- Content files in the new structure use the pattern `filename@contentId.md`
+- The script handles 1-3 levels of nesting in the old structure
+- Always create the script with `.cjs` extension to avoid ES module issues

.cursor/rules/gh-cli.mdc

@@ -0,0 +1,389 @@
+---
+description: GitHub pull requests
+globs: 
+alwaysApply: false
+---
+# gh cli
+
+Work seamlessly with GitHub from the command line.
+
+USAGE
+  gh <command> <subcommand> [flags]
+
+CORE COMMANDS
+  auth:          Authenticate gh and git with GitHub
+  browse:        Open repositories, issues, pull requests, and more in the browser
+  codespace:     Connect to and manage codespaces
+  gist:          Manage gists
+  issue:         Manage issues
+  org:           Manage organizations
+  pr:            Manage pull requests
+  project:       Work with GitHub Projects.
+  release:       Manage releases
+  repo:          Manage repositories
+
+GITHUB ACTIONS COMMANDS
+  cache:         Manage GitHub Actions caches
+  run:           View details about workflow runs
+  workflow:      View details about GitHub Actions workflows
+
+ALIAS COMMANDS
+  co:            Alias for "pr checkout"
+
+ADDITIONAL COMMANDS
+  alias:         Create command shortcuts
+  api:           Make an authenticated GitHub API request
+  attestation:   Work with artifact attestations
+  completion:    Generate shell completion scripts
+  config:        Manage configuration for gh
+  extension:     Manage gh extensions
+  gpg-key:       Manage GPG keys
+  label:         Manage labels
+  preview:       Execute previews for gh features
+  ruleset:       View info about repo rulesets
+  search:        Search for repositories, issues, and pull requests
+  secret:        Manage GitHub secrets
+  ssh-key:       Manage SSH keys
+  status:        Print information about relevant issues, pull requests, and notifications across repositories
+  variable:      Manage GitHub Actions variables
+
+HELP TOPICS
+  accessibility: Learn about GitHub CLI's accessibility experiences
+  actions:       Learn about working with GitHub Actions
+  environment:   Environment variables that can be used with gh
+  exit-codes:    Exit codes used by gh
+  formatting:    Formatting options for JSON data exported from gh
+  mintty:        Information about using gh with MinTTY
+  reference:     A comprehensive reference of all gh commands
+
+FLAGS
+  --help      Show help for command
+  --version   Show gh version
+
+EXAMPLES
+  $ gh issue create
+  $ gh repo clone cli/cli
+  $ gh pr checkout 321
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr
+
+Work with GitHub pull requests.
+
+USAGE
+  gh pr <command> [flags]
+
+GENERAL COMMANDS
+  create:        Create a pull request
+  list:          List pull requests in a repository
+  status:        Show status of relevant pull requests
+
+TARGETED COMMANDS
+  checkout:      Check out a pull request in git
+  checks:        Show CI status for a single pull request
+  close:         Close a pull request
+  comment:       Add a comment to a pull request
+  diff:          View changes in a pull request
+  edit:          Edit a pull request
+  lock:          Lock pull request conversation
+  merge:         Merge a pull request
+  ready:         Mark a pull request as ready for review
+  reopen:        Reopen a pull request
+  review:        Add a review to a pull request
+  unlock:        Unlock pull request conversation
+  update-branch: Update a pull request branch
+  view:          View a pull request
+
+FLAGS
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+INHERITED FLAGS
+  --help   Show help for command
+
+ARGUMENTS
+  A pull request can be supplied as argument in any of the following formats:
+  - by number, e.g. "123";
+  - by URL, e.g. "https://github.com/OWNER/REPO/pull/123"; or
+  - by the name of its head branch, e.g. "patch-1" or "OWNER:patch-1".
+
+EXAMPLES
+  $ gh pr checkout 353
+  $ gh pr create --fill
+  $ gh pr view --web
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr list
+
+List pull requests in a GitHub repository. By default, this only lists open PRs.
+
+The search query syntax is documented here:
+<https://docs.github.com/en/search-github/searching-on-github/searching-issues-and-pull-requests>
+
+For more information about output formatting flags, see `gh help formatting`.
+
+USAGE
+  gh pr list [flags]
+
+ALIASES
+  gh pr ls
+
+FLAGS
+      --app string        Filter by GitHub App author
+  -a, --assignee string   Filter by assignee
+  -A, --author string     Filter by author
+  -B, --base string       Filter by base branch
+  -d, --draft             Filter by draft state
+  -H, --head string       Filter by head branch ("<owner>:<branch>" syntax not supported)
+  -q, --jq expression     Filter JSON output using a jq expression
+      --json fields       Output JSON with the specified fields
+  -l, --label strings     Filter by label
+  -L, --limit int         Maximum number of items to fetch (default 30)
+  -S, --search query      Search pull requests with query
+  -s, --state string      Filter by state: {open|closed|merged|all} (default "open")
+  -t, --template string   Format JSON output using a Go template; see "gh help formatting"
+  -w, --web               List pull requests in the web browser
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+JSON FIELDS
+  additions, assignees, author, autoMergeRequest, baseRefName, baseRefOid, body,
+  changedFiles, closed, closedAt, closingIssuesReferences, comments, commits,
+  createdAt, deletions, files, fullDatabaseId, headRefName, headRefOid,
+  headRepository, headRepositoryOwner, id, isCrossRepository, isDraft, labels,
+  latestReviews, maintainerCanModify, mergeCommit, mergeStateStatus, mergeable,
+  mergedAt, mergedBy, milestone, number, potentialMergeCommit, projectCards,
+  projectItems, reactionGroups, reviewDecision, reviewRequests, reviews, state,
+  statusCheckRollup, title, updatedAt, url
+
+EXAMPLES
+  # List PRs authored by you
+  $ gh pr list --author "@me"
+  
+  # List PRs with a specific head branch name
+  $ gh pr list --head "typo"
+  
+  # List only PRs with all of the given labels
+  $ gh pr list --label bug --label "priority 1"
+  
+  # Filter PRs using search syntax
+  $ gh pr list --search "status:success review:required"
+  
+  # Find a PR that introduced a given commit
+  $ gh pr list --search "<SHA>" --state merged
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr diff
+
+View changes in a pull request.
+
+Without an argument, the pull request that belongs to the current branch
+is selected.
+
+With `--web` flag, open the pull request diff in a web browser instead.
+
+
+USAGE
+  gh pr diff [<number> | <url> | <branch>] [flags]
+
+FLAGS
+      --color string   Use color in diff output: {always|never|auto} (default "auto")
+      --name-only      Display only names of changed files
+      --patch          Display diff in patch format
+  -w, --web            Open the pull request diff in the browser
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr merge
+
+Merge a pull request on GitHub.
+
+Without an argument, the pull request that belongs to the current branch
+is selected.
+
+When targeting a branch that requires a merge queue, no merge strategy is required.
+If required checks have not yet passed, auto-merge will be enabled.
+If required checks have passed, the pull request will be added to the merge queue.
+To bypass a merge queue and merge directly, pass the `--admin` flag.
+
+
+USAGE
+  gh pr merge [<number> | <url> | <branch>] [flags]
+
+FLAGS
+      --admin                   Use administrator privileges to merge a pull request that does not meet requirements
+  -A, --author-email text       Email text for merge commit author
+      --auto                    Automatically merge only after necessary requirements are met
+  -b, --body text               Body text for the merge commit
+  -F, --body-file file          Read body text from file (use "-" to read from standard input)
+  -d, --delete-branch           Delete the local and remote branch after merge
+      --disable-auto            Disable auto-merge for this pull request
+      --match-head-commit SHA   Commit SHA that the pull request head must match to allow merge
+  -m, --merge                   Merge the commits with the base branch
+  -r, --rebase                  Rebase the commits onto the base branch
+  -s, --squash                  Squash the commits into one commit and merge it into the base branch
+  -t, --subject text            Subject text for the merge commit
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr review 
+
+Add a review to a pull request.
+
+Without an argument, the pull request that belongs to the current branch is reviewed.
+
+
+USAGE
+  gh pr review [<number> | <url> | <branch>] [flags]
+
+FLAGS
+  -a, --approve           Approve pull request
+  -b, --body string       Specify the body of a review
+  -F, --body-file file    Read body text from file (use "-" to read from standard input)
+  -c, --comment           Comment on a pull request
+  -r, --request-changes   Request changes on a pull request
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+EXAMPLES
+  # Approve the pull request of the current branch
+  $ gh pr review --approve
+  
+  # Leave a review comment for the current branch
+  $ gh pr review --comment -b "interesting"
+  
+  # Add a review for a specific pull request
+  $ gh pr review 123
+  
+  # Request changes on a specific pull request
+  $ gh pr review 123 -r -b "needs more ASCII art"
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr checkout
+
+Check out a pull request in git
+
+USAGE
+  gh pr checkout [<number> | <url> | <branch>] [flags]
+
+FLAGS
+  -b, --branch string        Local branch name to use (default [the name of the head branch])
+      --detach               Checkout PR with a detached HEAD
+  -f, --force                Reset the existing local branch to the latest state of the pull request
+      --recurse-submodules   Update all submodules after checkout
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+EXAMPLES
+  # Interactively select a PR from the 10 most recent to check out
+  $ gh pr checkout
+  
+  # Checkout a specific PR
+  $ gh pr checkout 32
+  $ gh pr checkout https://github.com/OWNER/REPO/pull/32
+  $ gh pr checkout feature
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+  ## gh pr close
+
+  Close a pull request
+
+USAGE
+  gh pr close {<number> | <url> | <branch>} [flags]
+
+FLAGS
+  -c, --comment string   Leave a closing comment
+  -d, --delete-branch    Delete the local and remote branch after close
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+## gh pr comment
+
+Add a comment to a GitHub pull request.
+
+Without the body text supplied through flags, the command will interactively
+prompt for the comment text.
+
+
+USAGE
+  gh pr comment [<number> | <url> | <branch>] [flags]
+
+FLAGS
+  -b, --body text        The comment body text
+  -F, --body-file file   Read body text from file (use "-" to read from standard input)
+      --create-if-none   Create a new comment if no comments are found. Can be used only with --edit-last
+      --delete-last      Delete the last comment of the current user
+      --edit-last        Edit the last comment of the current user
+  -e, --editor           Skip prompts and open the text editor to write the body in
+  -w, --web              Open the web browser to write the comment
+      --yes              Skip the delete confirmation prompt when --delete-last is provided
+
+INHERITED FLAGS
+      --help                     Show help for command
+  -R, --repo [HOST/]OWNER/REPO   Select another repository using the [HOST/]OWNER/REPO format
+
+EXAMPLES
+  $ gh pr comment 13 --body "Hi from GitHub CLI"
+
+LEARN MORE
+  Use `gh <command> <subcommand> --help` for more information about a command.
+  Read the manual at https://cli.github.com/manual
+  Learn about exit codes using `gh help exit-codes`
+  Learn about accessibility experiences using `gh help accessibility`
+
+
+

.env.example

@@ -1,3 +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_EDITOR_APP_URL=https://draw.roadmap.sh
+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

.github/workflows/cloudfront-api-cache.yml

@@ -0,0 +1,16 @@
+name: Clears API Cloudfront Cache
+on:
+  workflow_dispatch:
+jobs:
+  cloudfront_api_cache:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clear Cloudfront Caching
+        run: |
+          curl -L \
+            -X POST \
+            -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
+            -H "X-GitHub-Api-Version: 2022-11-28" \
+            https://api.github.com/repos/roadmapsh/infra-ansible/actions/workflows/playbook.yml/dispatches \
+            -d '{ "ref":"master", "inputs": { "playbook": "roadmap_web.yml", "tags": "cloudfront-api", "is_verbose": false } }'

.github/workflows/cloudfront-cache.yml

@@ -1,16 +0,0 @@
-name: Clears Cloudfront Cache
-on:
-  workflow_dispatch:
-jobs:
-  aws_costs:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Clear Cloudfront Caching
-        run: |
-          curl -L \
-            -X POST \
-            -H "Accept: application/vnd.github+json" \
-            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
-            -H "X-GitHub-Api-Version: 2022-11-28" \
-            https://api.github.com/repos/roadmapsh/infra-ansible/actions/workflows/playbook.yml/dispatches \
-            -d '{ "ref":"master", "inputs": { "playbook": "roadmap_web.yml", "tags": "cloudfront", "is_verbose": false } }'

.github/workflows/cloudfront-fe-cache.yml

@@ -0,0 +1,16 @@
+name: Clears Frontend Cloudfront Cache
+on:
+  workflow_dispatch:
+jobs:
+  cloudfront_fe_cache:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clear Cloudfront Caching
+        run: |
+          curl -L \
+            -X POST \
+            -H "Accept: application/vnd.github+json" \
+            -H "Authorization: Bearer ${{ secrets.GH_PAT }}" \
+            -H "X-GitHub-Api-Version: 2022-11-28" \
+            https://api.github.com/repos/roadmapsh/infra-ansible/actions/workflows/playbook.yml/dispatches \
+            -d '{ "ref":"master", "inputs": { "playbook": "roadmap_web.yml", "tags": "cloudfront,cloudfront-course", "is_verbose": false } }'

.github/workflows/deployment.yml

@@ -1,24 +1,26 @@
 name: Deploy to EC2
+
 on:
-  workflow_dispatch: # allow manual run
+  workflow_dispatch:
+
 jobs:
   deploy:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
+      - name: Checkout Repository
+        uses: actions/checkout@v4
         with:
           fetch-depth: 2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
-      - uses: pnpm/action-setup@v3.0.0
+      - uses: pnpm/action-setup@v4.0.0
         with:
-          version: 8.15.6
+          version: 9
 
-      # --------------------
+      # -------------------
       # Setup configuration
-      # --------------------
+      # -------------------
       - name: Prepare configuration files
         run: |
           git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/infra-config.git configuration --depth 1
@@ -26,13 +28,14 @@ jobs:
         run: |
           cp configuration/dist/github/developer-roadmap.env .env
 
-      # --------------------
-      # Prepare the build
-      # --------------------
-      - name: Install dependencies
+      # -----------------
+      # Prepare the Build
+      # -----------------
+      - name: Install Dependencies
         run: |
           pnpm install
-      - name: Generate build
+
+      - name: Generate Production Build
         run: |
           git clone https://${{ secrets.GH_PAT }}@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
           npm run generate-renderer
@@ -45,7 +48,7 @@ jobs:
       - uses: webfactory/ssh-agent@v0.7.0
         with:
           ssh-private-key: ${{ secrets.EC2_PRIVATE_KEY }}
-      - name: Deploy app to EC2
+      - name: Deploy Application to EC2
         run: |
           rsync -apvz --delete --no-times --exclude "configuration" -e "ssh -o StrictHostKeyChecking=no" -p ./ ${{ secrets.EC2_USERNAME }}@${{ secrets.EC2_HOST }}:/var/www/roadmap.sh/
       - name: Restart PM2
@@ -58,9 +61,9 @@ jobs:
             cd /var/www/roadmap.sh
             sudo pm2 restart web-roadmap
 
-      # --------------------
+      # ----------------------
       # Clear cloudfront cache
-      # --------------------
+      # ----------------------
       - name: Clear Cloudfront Caching
         run: |
           curl -L \

.github/workflows/label-issue.yml

@@ -1,13 +1,15 @@
 name: Label Issue
+
 on:
   issues:
     types: [ opened, edited ]
+  
 jobs:
   label-topic-change-issue:
     runs-on: ubuntu-latest
     steps:
-      - name: Add roadmap slug to issue as label
-        uses: actions/github-script@v3
+      - name: Add Labels To Issue
+        uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
@@ -18,7 +20,7 @@ jobs:
             if (issue.labels.some(label => label.name === 'topic-change')) {
               if (roadmapUrl) {
                 const roadmapSlug = new URL(roadmapUrl[0]).pathname.replace(/\//, '');
-                github.issues.addLabels({
+                github.rest.issues.addLabels({
                   owner: context.repo.owner,
                   repo: context.repo.repo,
                   issue_number: issue.number,
@@ -28,7 +30,7 @@ jobs:
             
               // Close the issue if it has no roadmap URL
               if (!roadmapUrl) {
-                github.issues.update({
+                github.rest.issues.update({
                   owner: context.repo.owner,
                   repo: context.repo.repo,
                   issue_number: issue.number,

.github/workflows/refresh-roadmap-content-json.yml

@@ -1,35 +1,35 @@
-name: Refreshes roadmap content JSON
+name: Refresh Roadmap Content JSON
 
 on:
-  workflow_dispatch: # allow manual run
+  workflow_dispatch:
   schedule:
-    - cron: '0 0 * * *' # every day at midnight
+    - cron: '0 0 * * *'
 
 jobs:
-  upgrade-deps:
+  refresh-content:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v4
+      - uses: actions/checkout@v4
 
-      - name: Setup pnpm
+      - name: Setup pnpm@v9
         uses: pnpm/action-setup@v4
         with:
           version: 9
           run_install: false
 
-      - name: Setup Node.js
+      - name: Setup Node.js Version 20 (LTS)
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: 'pnpm'
 
-      - name: Install dependencies and generate content JSON
+      - name: Install Dependencies and Generate Content JSON
         run: |
           pnpm install
           npm run generate:roadmap-content-json
+      
       - name: Create PR
-        uses: peter-evans/create-pull-request@v4
+        uses: peter-evans/create-pull-request@v7
         with:
           delete-branch: false
           branch: "chore/update-content-json"
@@ -37,9 +37,16 @@ jobs:
           labels: |
             dependencies
             automated pr
-          reviewers: kamranahmedse,arikchakma
+          reviewers: kamranahmedse
           commit-message: "chore: update roadmap content json"
-          title: "Update roadmap content json"
+          title: "Updated Roadmap Content JSON - Automated"
           body: |
-            Updates the roadmap content JSON files in the `public` folder.
-            Please review the changes and merge if everything looks good.
+            ## Updated Roadmap Content JSON
+            
+            > [!IMPORTANT]
+            > This PR Updates the Roadmap Content JSON files stored in the `public` directory.
+            >
+            > Commit: ${{ github.sha }}
+            > Workflow Path: ${{ github.workflow_ref }}
+
+            **Please Review the Changes and Merge the PR if everything is fine.**

.github/workflows/update-deps.yml

@@ -1,38 +0,0 @@
-name: Update dependencies
-
-on:
-  workflow_dispatch: # allow manual run
-  schedule:
-    - cron: '0 0 * * 0' # every sunday at midnight
-
-jobs:
-  upgrade-deps:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - uses: pnpm/action-setup@v2.2.2
-        with:
-          version: 7.13.4
-      - name: Upgrade dependencies
-        run: |
-          pnpm install
-          npm run upgrade
-          pnpm install --lockfile-only
-      - name: Create PR
-        uses: peter-evans/create-pull-request@v4
-        with:
-          delete-branch: false
-          branch: "update-deps"
-          base: "master"
-          labels: |
-            dependencies
-            automated pr
-          reviewers: kamranahmedse
-          commit-message: "chore: update dependencies to latest"
-          title: "Upgrade dependencies to latest"
-          body: |
-            Updates all dependencies to latest versions.
-            Please review the changes and merge if everything looks good.

.github/workflows/upgrade-dependencies.yml

@@ -0,0 +1,51 @@
+name: Upgrade Dependencies
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '0 0 * * 0'
+
+jobs:
+  upgrade-deps:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js Version 20 (LTS)
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Setup pnpm@v9
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+
+      - name: Install & Upgrade Dependencies
+        run: |
+          pnpm install
+          npm run upgrade
+          pnpm install --lockfile-only
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v7
+        with:
+          delete-branch: false
+          branch: "update-deps"
+          base: "master"
+          labels: |
+            dependencies
+            automated pr
+          reviewers: kamranahmedse
+          commit-message: "chore: update dependencies to latest"
+          title: "Upgrade Dependencies To Latest - Automated"
+          body: |
+            ## Updated all Dependencies to Latest Versions.
+
+            > [!IMPORTANT]
+            > This PR Upgrades the Dependencies to the their latest versions.
+            >
+            > Commit: ${{ github.sha }}
+            > Workflow Path: ${{ github.workflow_ref }}
+
+            **Please Review the Changes and Merge the PR if everything is fine.**

.gitignore

@@ -1,5 +1,6 @@
 .idea
 .temp
+.astro
 
 # build output
 dist/
@@ -27,9 +28,6 @@ pnpm-debug.log*
 /playwright-report/
 /playwright/.cache/
 tests-examples
-*.csv
+*.csveditor/
 
-/editor/*
-!/editor/readonly-editor.tsx
-!/editor/renderer/renderer.ts
-!/editor/renderer/index.tsx
+packages/editor

.vscode/settings.json

@@ -2,5 +2,13 @@
   "prettier.documentSelectors": ["**/*.astro"],
   "[astro]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "tailwindCSS.experimental.classRegex": [
+    ["\\b\\w+[cC]lassName\\s*=\\s*[\"']([^\"']*)[\"']"],
+    ["\\b\\w+[cC]lassName\\s*=\\s*`([^`]*)`"],
+    ["[\\w]+[cC]lassName[\"']?\\s*:\\s*[\"']([^\"']*)[\"']"],
+    ["[\\w]+[cC]lassName[\"']?\\s*:\\s*`([^`]*)`"],
+    ["cva\\(((?:[^()]|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    ["cx\\(((?:[^()]|\\([^()]*\\))*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ]
 }

astro.config.mjs

@@ -1,16 +1,31 @@
 // https://astro.build/config
 import sitemap from '@astrojs/sitemap';
-import tailwind from '@astrojs/tailwind';
 import node from '@astrojs/node';
 import { defineConfig } from 'astro/config';
 import rehypeExternalLinks from 'rehype-external-links';
 import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
+import tailwindcss from '@tailwindcss/vite';
 
 import react from '@astrojs/react';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://roadmap.sh/',
+  redirects: {
+    '/devops/devops-engineer': {
+      status: 301,
+      destination: '/devops',
+    },
+    '/ai-tutor': {
+      status: 301,
+      destination: '/ai',
+    },
+  },
+  vite: {
+    server: {
+      allowedHosts: ['roadmap.sh', 'port3k.kamranahmed.info'],
+    },
+  },
   markdown: {
     shikiConfig: {
       theme: 'dracula',
@@ -40,21 +55,22 @@ export default defineConfig({
       ],
     ],
   },
-  output: 'hybrid',
+  output: 'server',
   adapter: node({
     mode: 'standalone',
   }),
   trailingSlash: 'never',
   integrations: [
-    tailwind({
-      config: {
-        applyBaseStyles: false,
-      },
-    }),
     sitemap({
       filter: shouldIndexPage,
       serialize: serializeSitemap,
     }),
     react(),
   ],
+  vite: {
+    plugins: [tailwindcss()],
+    ssr: {
+      noExternal: [/^@roadmapsh\/editor.*$/],
+    },
+  },
 });

contributing.md

@@ -1,16 +1,18 @@
-# Contribution
+# ✨ Contribution Guidelines ✨
 
-First of all thank you for considering to contribute. Please look at the details below:
+First of all, thank you for considering to contribute. Please look at the details below:
 
 - [New Roadmaps](#new-roadmaps)
 - [Existing Roadmaps](#existing-roadmaps)
 - [Adding Projects](#adding-projects)
 - [Adding Content](#adding-content)
 - [Guidelines](#guidelines)
+- [Good vs. Not So Good Contributions](#good-vs-not-so-good-contributions)
 
 ## New Roadmaps
 
 For new roadmaps, you can either:
+
 - Submit a roadmap by providing [a textual roadmap similar to this roadmap](https://gist.github.com/kamranahmedse/98758d2c73799b3a6ce17385e4c548a5) in an [issue](https://github.com/kamranahmedse/developer-roadmap/issues).
 - Create an interactive roadmap yourself using [our roadmap editor](https://draw.roadmap.sh/) & submit the link to that roadmap in an [issue](https://github.com/kamranahmedse/developer-roadmap/issues).
 
@@ -18,29 +20,29 @@ For new roadmaps, you can either:
 
 For the existing roadmaps, please follow the details listed for the nature of contribution:
 
-- **Fixing Typos** — Make your changes in the [roadmap JSON file](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps) and submit a [PR](https://github.com/kamranahmedse/developer-roadmap/pulls).
+- **Fixing Typos** — Make your changes in the [roadmap markdown file](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps) and submit a [PR](https://github.com/kamranahmedse/developer-roadmap/pulls).
 - **Adding or Removing Nodes** — Please open an [issue](https://github.com/kamranahmedse/developer-roadmap/issues) with your suggestion.
 
-**Note:** Please note that our goal is <strong>not to have the biggest list of items</strong>. Our goal is to list items or skills most relevant today.
+**Note:** Please note that our goal is **not to have the biggest list of items**. Our goal is to list items or skills most relevant today.
 
 ## Adding Projects
 
-If you have a project idea that you think we should add to the roadmap, feel free to open an issue with as much details about the project as possible and the roadmap you think it should be added to.
+If you have a project idea that you think we should add to the roadmap, feel free to open an issue with as many details about the project as possible and the roadmap you think it should be added to.
 
-The detailed format for issue should be as follows:
+The detailed format for the issue should be as follows:
 
-```
+```md
 ## What is this project about?
 
-(Add introduction to the project)
+(Add an introduction to the project.)
 
 ## Skills this Project Covers
 
-(Comma separated list of skills e.g. Programming Knowledge, Database,)
+(Comma separated list of skills, e.g. Programming Knowledge, Database, etc.)
 
 ## Requirements
 
-( Detailed list of requirements, i.e. input, output, an hints to help build this etc)
+( Detailed list of requirements, i.e. input, output, hints to help build this, etc.)
 ```
 
 Have a look at this project to get an idea of [what we are looking for](https://roadmap.sh/projects/github-user-activity).
@@ -53,21 +55,23 @@ Find [the content directory inside the relevant roadmap](https://github.com/kamr
 - Maximum of 8 links per topic.
 - Follow the below style guide for content.
 
+Please note that we are intentionally keeping the content under the topic popup concise. You MUST always aim to explain the topic simply in a **single paragraph** or so and provide external resources where users can learn more about the topic.
+
 ### How To Structure Content
 
 Please adhere to the following style when adding content to a topic:
 
-```
+```md
 # Topic Title
 
 (Content)
 
 Visit the following resources to learn more:
 
-- [@type@Description of link](Link)
+- [@type@Title/Description of Link](Link)
 ```
 
-`@type@` must be one of the following and describes the type of content you are adding:
+`@type@` must be one of the following and describe the type of content you are adding:
 
 - `@official@`
 - `@opensource@`
@@ -75,20 +79,21 @@ Visit the following resources to learn more:
 - `@course@`
 - `@podcast@`
 - `@video@`
+- `@book@`
 
-It's important to add a valid type, this will help us categorize the content and display it properly on the roadmap.
+It's important to add a valid type, this will help us categorize the content and display it properly on the roadmap. The order of the links based on type is same as above.
 
 ## Guidelines
 
-- <p><strong>Please don't use the project for self-promotion!</strong><br />
+- <p><strong>Please don't use the project for self-promotion!</strong><br/>
 
-  We believe this project is a valuable asset to the developer community and it includes numerous helpful resources. We kindly ask you to avoid submitting pull requests for the sole purpose of self-promotion. We appreciate contributions that genuinely add value, such as guides from maintainers of well-known frameworks, and will consider accepting these even if they're self authored. Thank you for your understanding and cooperation!
+  We believe this project is a valuable asset to the developer community, and it includes numerous helpful resources. We kindly ask you to avoid submitting pull requests for the sole purpose of self-promotion. We appreciate contributions that genuinely add value, such as guides from maintainers of well-known frameworks, and will consider accepting these even if they're self authored. Thank you for your understanding and cooperation!
 
-- <p><strong>Adding everything available out there is not the goal!</strong><br />
+- <p><strong>Adding everything available out there is not the goal!</strong><br/>
 
-  The roadmaps represent the skillset most valuable today, i.e., if you were to enter any of the listed fields today, what would you learn? There might be things that are of-course being used today but prioritize the things that are most in demand today, e.g., agreed that lots of people are using angular.js today but you wouldn't want to learn that instead of React, Angular, or Vue. Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included.</p>
+  The roadmaps represent the skillset most valuable today, i.e., if you were to enter any of the listed fields today, what would you learn? There might be things that are of-course being used today, but prioritize the things that are most in demand today, e.g., agree that lots of people are using angular.js today, but you wouldn't want to learn that instead of React, Angular, or Vue. Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included.</p>
 
-- <p><strong>Do not add things you have not evaluated personally!</strong><br />
+- <p><strong>Do not add things you have not evaluated personally!</strong><br/>
 
   Use your critical thinking to filter out non-essential stuff. Give honest arguments for why the resource should be included. Have you read this book? Can you give a short article?</p>
 
@@ -96,26 +101,47 @@ It's important to add a valid type, this will help us categorize the content and
 
   If you are planning to contribute by adding content to the roadmaps, I recommend you to clone the repository, add content to the [content directory of the roadmap](./src/data/roadmaps/) and create a single PR to make it easier for me to review and merge the PR.
 
-- <p><strong>Write meaningful commit messages</strong><br >
+- <p><strong>Write meaningful commit messages</strong><br/>
 
-  Meaningful commit messages help speed up the review process as well as help other contributors in gaining a good overview of the repositories commit history without having to dive into every commit.
+  Meaningful commit messages help speed up the review process as well as help other contributors gain a good overview of the repositories commit history without having to dive into every commit.
 
   </p>
 - <p><strong>Look at the existing issues/pull requests before opening new ones</strong></p>
 
-### Good vs Not So Good Contributions
+## Good vs. Not So Good Contributions
 
 <strong>Good</strong>
 
-  - New Roadmaps.
-  - Engaging, fresh content links.
-  - Typos and grammatical fixes.
-  - Content copy in topics that do not have any (or minimal copy exists).
+- New Roadmaps.
+- Engaging and fresh content links.
+- Typos and grammatical fixes.
+- Enhanced Existing Content.
+- Content copy in topics that do not have any (or minimal copy exists).
 
 <strong>Not So Good</strong>
 
-  - Adding whitespace that doesn't add to the readability of the content.
-  - Rewriting content in a way that doesn't add any value.
-  - Non-English content.
-  - PR's that don't follow our style guide, have no description and a default title.
-  - Links to your own blog articles.
+- Adding whitespace that doesn't add to the readability of the content.
+- Rewriting content in a way that doesn't add any value.
+- Non-English content.
+- PR's that don't follow our style guide, have no description, and a default title.
+- Links to your own blog articles.
+
+## Local Development
+
+For local development, you can use the following commands:
+
+```bash
+git clone git@github.com:kamranahmedse/developer-roadmap.git --depth 1
+cd developer-roadmap
+pnpm add @roadmapsh/editor@npm:@roadmapsh/dummy-editor -w
+pnpm install
+```
+Run the development server with:
+
+```bash
+pnpm dev
+```
+
+***
+
+Have a look at the [License](./license) file.

editor/readonly-editor.tsx

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

editor/renderer/index.tsx

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

editor/renderer/renderer.ts

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

license

@@ -1,7 +1,7 @@
 Everything including text and images in this project are protected by the copyright laws.
 You are allowed to use this material for personal use but are not allowed to use it for
-any other purpose including publishing the images, the project files or the content in the
-images in any form either digital, non-digital, textual, graphical or written formats.
+any other purpose including publishing the images, the project files or the content in
+the images in any form either digital, non-digital, textual, graphical or written formats.
 You are allowed to share the links to the repository or the website roadmap.sh but not
 the content for any sort of usage that involves the content of this repository taken out
 of the repository and be shared from any other medium including but not limited to blog
@@ -9,7 +9,7 @@ posts, articles, newsletters, you must get prior consent from the understated. T
 conditions do not apply to the readonly GitHub forks created using the Fork button on
 GitHub with the whole purpose of contributing to the project.
 
-Copyright © 2023 Kamran Ahmed <kamranahmed.se@gmail.com>
+Copyright © 2017 - Present. Kamran Ahmed <kamranahmed.se@gmail.com>
 
 Please note that I am really flexible with allowing the usage of the content in this
 repository. If you reach out to me with a brief detail of why and how you would like

package.json

@@ -20,77 +20,108 @@
     "editor-roadmap-content": "tsx scripts/editor-roadmap-content.ts",
     "roadmap-content": "node scripts/roadmap-content.cjs",
     "generate-renderer": "sh scripts/generate-renderer.sh",
+    "generate-renderer-dummy": "sh scripts/generate-renderer-dummy.sh",
     "best-practice-dirs": "node scripts/best-practice-dirs.cjs",
     "best-practice-content": "node scripts/best-practice-content.cjs",
     "generate:og": "node ./scripts/generate-og-images.mjs",
     "warm:urls": "sh ./scripts/warm-urls.sh https://roadmap.sh/sitemap-0.xml",
     "compress:images": "tsx ./scripts/compress-images.ts",
     "generate:roadmap-content-json": "tsx ./scripts/editor-roadmap-content-json.ts",
+    "migrate:editor-roadmaps": "tsx ./scripts/migrate-editor-roadmap.ts",
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/node": "^8.3.2",
-    "@astrojs/react": "^3.6.1",
-    "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/tailwind": "^5.1.0",
-    "@fingerprintjs/fingerprintjs": "^4.4.3",
-    "@nanostores/react": "^0.7.2",
+    "@astrojs/node": "^9.2.1",
+    "@astrojs/react": "^4.2.7",
+    "@astrojs/sitemap": "^3.4.0",
+    "@fingerprintjs/fingerprintjs": "^4.6.2",
+    "@microsoft/clarity": "^1.0.0",
+    "@nanostores/react": "^1.0.0",
     "@napi-rs/image": "^1.9.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.14",
     "@resvg/resvg-js": "^2.6.2",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "astro": "^4.13.0",
+    "@roadmapsh/editor": "workspace:*",
+    "@tailwindcss/vite": "^4.1.7",
+    "@tanstack/react-query": "^5.76.1",
+    "@tiptap/core": "^2.12.0",
+    "@tiptap/extension-document": "^2.12.0",
+    "@tiptap/extension-paragraph": "^2.12.0",
+    "@tiptap/extension-placeholder": "^2.12.0",
+    "@tiptap/extension-text": "^2.12.0",
+    "@tiptap/pm": "^2.12.0",
+    "@tiptap/react": "^2.12.0",
+    "@tiptap/suggestion": "^2.12.0",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
+    "astro": "^5.7.13",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.12",
+    "dayjs": "^1.11.13",
     "dom-to-image": "^2.6.0",
     "dracula-prism": "^2.1.16",
     "gray-matter": "^4.0.3",
     "htm": "^3.1.1",
-    "image-size": "^1.1.1",
-    "jose": "^5.6.3",
+    "image-size": "^2.0.2",
+    "jose": "^6.0.11",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.419.0",
-    "nanoid": "^5.0.7",
-    "nanostores": "^0.10.3",
-    "node-html-parser": "^6.1.13",
-    "npm-check-updates": "^17.0.0",
-    "playwright": "^1.45.3",
-    "prismjs": "^1.29.0",
-    "react": "^18.3.1",
-    "react-calendar-heatmap": "^1.9.0",
-    "react-confetti": "^6.1.0",
-    "react-dom": "^18.3.1",
-    "react-tooltip": "^5.27.1",
-    "reactflow": "^11.11.4",
+    "lucide-react": "^0.511.0",
+    "luxon": "^3.6.1",
+    "markdown-it-async": "^2.2.0",
+    "nanoid": "^5.1.5",
+    "nanostores": "^1.0.1",
+    "node-html-parser": "^7.0.1",
+    "npm-check-updates": "^18.0.1",
+    "playwright": "^1.52.0",
+    "prismjs": "^1.30.0",
+    "radix-ui": "^1.4.2",
+    "react": "^19.1.0",
+    "react-calendar-heatmap": "^1.10.0",
+    "react-confetti": "^6.4.0",
+    "react-dom": "^19.1.0",
+    "react-dropzone": "^14.3.8",
+    "react-resizable-panels": "^3.0.2",
+    "react-textarea-autosize": "^8.5.9",
+    "react-tooltip": "^5.28.1",
     "rehype-external-links": "^3.0.0",
     "remark-parse": "^11.0.0",
-    "roadmap-renderer": "^1.0.6",
-    "satori": "^0.10.14",
+    "roadmap-renderer": "^1.0.7",
+    "sanitize-html": "^2.17.0",
+    "satori": "^0.13.1",
     "satori-html": "^0.3.2",
-    "sharp": "^0.33.4",
+    "sharp": "^0.34.1",
+    "shiki": "^3.4.2",
     "slugify": "^1.6.6",
-    "tailwind-merge": "^2.4.0",
-    "tailwindcss": "^3.4.7",
+    "tailwind-merge": "^3.3.0",
+    "tailwindcss": "^4.1.7",
+    "tippy.js": "^6.3.7",
+    "tiptap-markdown": "^0.8.10",
     "turndown": "^7.2.0",
     "unified": "^11.0.5",
-    "zustand": "^4.5.4"
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
-    "@playwright/test": "^1.45.3",
-    "@tailwindcss/typography": "^0.5.13",
+    "@ai-sdk/google": "^1.2.18",
+    "@playwright/test": "^1.52.0",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/dom-to-image": "^2.6.7",
     "@types/js-cookie": "^3.0.6",
-    "@types/prismjs": "^1.26.4",
-    "@types/react-calendar-heatmap": "^1.6.7",
+    "@types/luxon": "^3.6.2",
+    "@types/markdown-it": "^14.1.2",
+    "@types/prismjs": "^1.26.5",
+    "@types/react-calendar-heatmap": "^1.9.0",
+    "@types/react-slick": "^0.23.13",
+    "@types/sanitize-html": "^2.16.0",
     "@types/turndown": "^5.0.5",
-    "csv-parser": "^3.0.0",
-    "gh-pages": "^6.1.1",
+    "ai": "^4.3.16",
+    "csv-parser": "^3.2.0",
+    "gh-pages": "^6.3.0",
     "js-yaml": "^4.1.0",
     "markdown-it": "^14.1.0",
-    "openai": "^4.53.2",
-    "prettier": "^3.3.3",
+    "openai": "^4.100.0",
+    "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "tsx": "^4.16.5"
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwind-scrollbar": "^4.0.2",
+    "tsx": "^4.19.4"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - packages/*

public/roadmap-content/ai-data-scientist.json

@@ -2,22 +2,11 @@
   "aStaDENn5PhEa-cFvNzXa": {
     "title": "Mathematics",
     "description": "Mathematics is the foundation of AI and Data Science. It is essential to have a good understanding of mathematics to excel in these fields.",
-    "links": [
-      {
-        "title": "Mathematics for Machine Learning",
-        "url": "https://imp.i384100.net/baqMYv",
-        "type": "article"
-      },
-      {
-        "title": "Algebra and Differential Calculus",
-        "url": "https://imp.i384100.net/LX5M7M",
-        "type": "article"
-      }
-    ]
+    "links": []
   },
   "4WZL_fzJ3cZdWLLDoWN8D": {
     "title": "Statistics",
-    "description": "Statistics is the science of collecting, analyzing, interpreting, presenting, and organizing data. It is a branch of mathematics that deals with the collection, analysis, interpretation, presentation, and organization of data. It is used in a wide range of fields, including science, engineering, medicine, and social science. Statistics is used to make informed decisions, to predict future events, and to test hypotheses. It is also used to summarize data, to describe relationships between variables, and to make inferences about populations based on samples.\n\nLearn more from the resources given on the roadmap.",
+    "description": "Statistics is the science of collecting, analyzing, interpreting, presenting, and organizing data. It is a branch of mathematics that deals with the collection, analysis, interpretation, presentation, and organization of data. It is used in a wide range of fields, including science, engineering, medicine, and social science. Statistics is used to make informed decisions, to predict future events, and to test hypotheses. It is also used to summarize data, to describe relationships between variables, and to make inferences about populations based on samples.",
     "links": []
   },
   "gWMvD83hVXeTmCuHGIiOL": {
@@ -42,13 +31,18 @@
     ]
   },
   "mwPJh33MEUQ4Co_LiVEOb": {
-    "title": "Differential Calculus",
+    "title": "Differential Calculus ",
     "description": "",
     "links": [
       {
         "title": "Algebra and Differential Calculus for Data Science",
         "url": "https://imp.i384100.net/LX5M7M",
         "type": "article"
+      },
+      {
+        "title": "Calculus Youtube Course",
+        "url": "https://www.youtube.com/playlist?list=PLZHQObOWTQDMsr9K-rj53DwVRMYO3t5Yr",
+        "type": "video"
       }
     ]
   },
@@ -106,7 +100,7 @@
       },
       {
         "title": "Step by Step Process for Planning an A/B Test",
-        "url": "https://towardsdatascience.com/step-by-step-for-planning-an-a-b-test-ef3c93143c0b",
+        "url": "https://medium.com/data-science/step-by-step-for-planning-an-a-b-test-ef3c93143c0b",
         "type": "article"
       },
       {
@@ -170,7 +164,7 @@
   },
   "Gd2egqKZPnbPW1W2jw4j8": {
     "title": "Econometrics",
-    "description": "Ecenometrics is the application of statistical methods to economic data. It is a branch of economics that aims to give empirical content to economic relations. More precisely, it is \"the quantitative analysis of actual economic phenomena based on the concurrent development of theory and observation, related by appropriate methods of inference.\" Econometrics can be described as something that allows economists \"to sift through mountains of data to extract simple relationships.\"",
+    "description": "Econometrics is the application of statistical methods to economic data. It is a branch of economics that aims to give empirical content to economic relations. More precisely, it is \"the quantitative analysis of actual economic phenomena based on the concurrent development of theory and observation, related by appropriate methods of inference.\" Econometrics can be described as something that allows economists \"to sift through mountains of data to extract simple relationships.\"",
     "links": []
   },
   "y6xXsc-uSAmRDnNuyhqH2": {
@@ -318,8 +312,8 @@
         "type": "article"
       },
       {
-        "title": "Exploratory Data Analysis with Seaborn",
-        "url": "https://imp.i384100.net/ZQmMgR",
+        "title": "Python for Data Visualization: Matplotlib & Seaborn",
+        "url": "https://imp.i384100.net/55xvzn",
         "type": "article"
       }
     ]

public/roadmap-content/api-design.json

@@ -9,7 +9,17 @@
     "description": "APIs, or Application Programming Interfaces, provide a manner in which software applications communicate with each other. They abstract the complexity of applications to allow developers to use only the essentials of the software they are working with. They define the methods and data formats an application should use in order to perform tasks, like sending, retrieving, or modifying data. Understanding APIs is integral to mastering modern software development, primarily because they allow applications to exchange data and functionality with ease, thus enabling integration and convergence of technological services. Therefore, a solid understanding of what APIs are forms the basic cornerstone of API design.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "What is an API?",
+        "title": "Getting Started with APIs - Postman",
+        "url": "https://www.postman.com/what-is-an-api/",
+        "type": "article"
+      },
+      {
+        "title": "API - IBM",
+        "url": "https://www.ibm.com/topics/api",
+        "type": "article"
+      },
+      {
+        "title": "What is an API? - AWS",
         "url": "https://aws.amazon.com/what-is/api/",
         "type": "article"
       },
@@ -61,7 +71,7 @@
         "type": "article"
       },
       {
-        "title": "HTTP: 1.0 vs. 1.1 vs 2.0 vs. 3.0",
+        "title": "HTTP: 1.0 vs 1.1 vs 2.0 vs 3.0",
         "url": "https://www.baeldung.com/cs/http-versions",
         "type": "article"
       }
@@ -72,17 +82,12 @@
     "description": "HTTP (Hypertext Transfer Protocol) Methods play a significant role in API design. They define the type of request a client can make to a server, providing the framework for interaction between client and server. Understanding HTTP methods is paramount to creating a robust and effective API. Some of the common HTTP methods used in API design include GET, POST, PUT, DELETE, and PATCH. Each of these methods signifies a different type of request, allowing for various interactions with your API endpoints. This in turn creates a more dynamic, functional, and user-friendly API.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "HTTP request methods",
+        "title": "HTTP Methods - MDN",
         "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods",
         "type": "article"
       },
       {
-        "title": "HTTP Request Methods - W3Schools",
-        "url": "https://www.w3schools.com/tags/ref_httpmethods.asp",
-        "type": "article"
-      },
-      {
-        "title": "What are HTTP Methods?",
+        "title": "What are HTTP Methods? - Postman",
         "url": "https://blog.postman.com/what-are-http-methods/",
         "type": "article"
       }
@@ -124,12 +129,12 @@
         "type": "article"
       },
       {
-        "title": "What are HTTP headers?",
+        "title": "What are HTTP Headers?",
         "url": "https://blog.postman.com/what-are-http-headers/",
         "type": "article"
       },
       {
-        "title": "What are HTTP Headers & Understand different types of HTTP headers",
+        "title": "What are HTTP Headers & Types of HTTP headers",
         "url": "https://requestly.com/blog/what-are-http-headers-understand-different-types-of-http-headers/",
         "type": "article"
       }
@@ -150,7 +155,7 @@
         "type": "article"
       },
       {
-        "title": "Path parameters",
+        "title": "Path Parameters",
         "url": "https://help.iot-x.com/api/how-to-use-the-api/parameters/path-parameters",
         "type": "article"
       }
@@ -166,8 +171,8 @@
         "type": "article"
       },
       {
-        "title": "Cookes - Mozilla",
-        "url": "https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies",
+        "title": "Using HTTP cookies - Mozilla",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies",
         "type": "article"
       }
     ]
@@ -182,7 +187,7 @@
         "type": "article"
       },
       {
-        "title": "Content Negotiation in practice",
+        "title": "Content Negotiation in Practice",
         "url": "https://softwaremill.com/content-negotiation-in-practice/",
         "type": "article"
       }
@@ -244,6 +249,11 @@
         "url": "https://aws.amazon.com/route53/what-is-dns/",
         "type": "article"
       },
+      {
+        "title": "DNS Record Crash Course for Web Developers",
+        "url": "https://dev.to/chrisachard/dns-record-crash-course-for-web-developers-35hn",
+        "type": "article"
+      },
       {
         "title": "DNS explained in 100 seconds",
         "url": "https://www.youtube.com/watch?v=UVR9lhUGAyU",
@@ -253,8 +263,19 @@
   },
   "o8i093VQv-T5Qf1yGqU0R": {
     "title": "Different API Styles",
-    "description": "Application Programming Interface (API) design isn't a one-size-fits-all endeavor. APIs can be structured in various styles, each with its own unique characteristics, advantages, and use cases. Early identification of the appropriate API style is crucial in ensuring a functional, efficient and seamless end-user experience. Commonly used API styles include REST, SOAP, GraphQL, and gRPC. Understanding these diverse API styles would help in making better design choices, fostering efficient overall system architecture, and promoting an intuitive and easy-to-use application.",
-    "links": []
+    "description": "Application Programming Interface (API) design isn't a one-size-fits-all endeavor. APIs can be structured in various styles, each with its own unique characteristics, advantages, and use cases. Early identification of the appropriate API style is crucial in ensuring a functional, efficient and seamless end-user experience. Commonly used API styles include REST, SOAP, GraphQL, and gRPC. Understanding these diverse API styles would help in making better design choices, fostering efficient overall system architecture, and promoting an intuitive and easy-to-use application.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "API Styles",
+        "url": "https://www.redhat.com/architect/api-styles",
+        "type": "article"
+      },
+      {
+        "title": "Top API Styles",
+        "url": "https://www.youtube.com/watch?v=4vLxWqE94l4",
+        "type": "video"
+      }
+    ]
   },
   "BvwdASMvuNQ9DNgzdSZ4o": {
     "title": "RESTful APIs",
@@ -269,6 +290,11 @@
         "title": "What is a RESTul API?",
         "url": "https://aws.amazon.com/what-is/restful-api/",
         "type": "article"
+      },
+      {
+        "title": "Understanding RESTful APIs",
+        "url": "https://www.youtube.com/watch?v=lsMQRaeKNDk",
+        "type": "video"
       }
     ]
   },
@@ -277,45 +303,30 @@
     "description": "Simple JSON (JavaScript Object Notation) APIs are a popular form of API or \"Application Programming Interface\" which utilise JSON to exchange data between servers and web applications. This method has gained prominence mainly for its simplicity, light weight, and easy readability. In the context of API design, a well-structured JSON API allows developers to efficiently interact with the backend and retrieve only the data they need in a consistent and comprehensible manner. From reducing redundant data to enabling quick parsing, Simple JSON APIs provide numerous benefits to improve the overall performance of applications. Designing a good JSON API requires careful planning, sound knowledge of HTTP methods, endpoints, error handling mechanisms, and most importantly, a clear understanding of the application's data requirements.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "A specification for building JSON APIs",
+        "title": "Specification for Building JSON APIs",
         "url": "https://github.com/json-api/json-api",
         "type": "opensource"
       },
       {
-        "title": "JSON API: Explained in 4 minutes (+ EXAMPLES)",
+        "title": "JSON API: Explained in 4 Minutes",
         "url": "https://www.youtube.com/watch?v=N-4prIh7t38",
         "type": "video"
       }
     ]
   },
   "Wwd-0PjrtViMFWxRGaQey": {
-    "title": "gRPC APIs",
-    "description": "gRPC is a platform agnostic serialization protocol that is used to communicate between services. Designed by Google in 2015, it is a modern alternative to REST APIs. It is a binary protocol that uses HTTP/2 as a transport layer. It is a high performance, open source, general-purpose RPC framework that puts mobile and HTTP/2 first.\n\nIt's main use case is for communication between two different languages within the same application. You can use Python to communicate with Go, or Java to communicate with C#.\n\ngRPC uses the protocol buffer language to define the structure of the data that is\n\nVisit the following resources to learn more:",
+    "title": "SOAP APIs",
+    "description": "SOAP (Simple Object Access Protocol) APIs are a standard communication protocol system that permits programs that run on different operating systems (like Linux and Windows) to communicate using Hypertext Transfer Protocol (HTTP) and its Extensible Markup Language (XML). In the context of API Design, SOAP APIs offer a robust and well-defined process for interaction between various software applications, mostly over a network. They are highly extensible, versatile and support a wide range of communications protocols. Despite being more complex compared to other API types like REST, SOAP APIs ensure high reliability and security, making them the choice for certain business-focused, high-transaction applications.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "gRPC Website",
-        "url": "https://grpc.io/",
+        "title": "What are SOAP APIs?",
+        "url": "https://www.indeed.com/career-advice/career-development/what-is-soap-api",
         "type": "article"
       },
       {
-        "title": "gRPC Introduction",
-        "url": "https://grpc.io/docs/what-is-grpc/introduction/",
+        "title": "SOAP vs REST 101: Understand The Differences",
+        "url": "https://www.soapui.org/learn/api/soap-vs-rest-api/",
         "type": "article"
-      },
-      {
-        "title": "gRPC Core Concepts",
-        "url": "https://grpc.io/docs/what-is-grpc/core-concepts/",
-        "type": "article"
-      },
-      {
-        "title": "Explore top posts about gRPC",
-        "url": "https://app.daily.dev/tags/grpc?ref=roadmapsh",
-        "type": "article"
-      },
-      {
-        "title": "Stephane Maarek - gRPC Introduction",
-        "url": "https://youtu.be/XRXTsQwyZSU",
-        "type": "video"
       }
     ]
   },
@@ -328,13 +339,18 @@
         "url": "https://github.com/graphql-kit/graphql-apis",
         "type": "opensource"
       },
+      {
+        "title": "Visit Dedicated GraphQL Roadmap",
+        "url": "https://roadmap.sh/graphql",
+        "type": "article"
+      },
       {
         "title": "GraphQL Website",
         "url": "https://graphql.org/",
         "type": "article"
       },
       {
-        "title": "GraphQL explained in 100 seconds",
+        "title": "GraphQL Explained in 100 Seconds",
         "url": "https://www.youtube.com/watch?v=eIQh02xuVw4",
         "type": "video"
       }
@@ -345,12 +361,12 @@
     "description": "Building JSON/RESTful APIs involves designing and implementing APIs that adhere to the architectural constraints of Representational State Transfer (REST). These APIs use JSON (JavaScript Object Notation) as a format for information interchange, due to its lightweight, easy-to-understand, and universally accepted nature. A well-designed RESTful API, utilizing JSON, is key in developing applications that are scalable, maintainable, and easily integrated with other systems. This design approach enables the resources on a server to be accessed and manipulated using standard HTTP protocols, facilitating communication between different services and systems. Furthermore, it enables client-server interactions to be stateless, meaning each request from a client must contain all the information needed by the server to understand and process the request.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "A specification for building APIs in JSON",
+        "title": "Specification for Building APIs in JSON",
         "url": "https://jsonapi.org/",
         "type": "article"
       },
       {
-        "title": "How to make a REST API",
+        "title": "How to Make a RESTful API",
         "url": "https://www.integrate.io/blog/how-to-make-a-rest-api/",
         "type": "article"
       },
@@ -382,7 +398,7 @@
     "description": "URI (Uniform Resource Identifier) is a string of characters used to identify a name or a resource on the Internet. Designing URIs carefully is a crucial part of creating a smooth API interface that is easy to understand, remember and use. Good URI design ensures that related resources are grouped together in a logical manner and can greatly impact the usability and maintainability of an API. It involves crafting standardised, intuitive HTTP paths that take advantage of the hierarchical nature of URLs to provide a better structure to the API. This hierarchy can then be used to expand the API over time without breaking existing clients' functionality.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Guidelines for URI design",
+        "title": "Guidelines for URI Design",
         "url": "https://css-tricks.com/guidelines-for-uri-design/",
         "type": "article"
       },
@@ -398,12 +414,12 @@
     "description": "API Versioning is a critical component of API Design and Management. As the APIs evolve over time to meet the new business requirements and functionality enhancements, it is crucial to manage the changes in a way that doesn't break the existing client applications. This calls for effective versioning strategies in API design. There are different versioning strategies like URI versioning, Request Header versioning, and Media Type versioning which are adopted based on the ease of implementation, client compatibility, and accessibility. Understanding each strategy and its pros and cons can lead to better API Design and maintainability.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "What is API versioning?",
+        "title": "What is API Versioning?",
         "url": "https://www.postman.com/api-platform/api-versioning/",
         "type": "article"
       },
       {
-        "title": "4 API versioning best practices",
+        "title": "API Versioning Best Practices",
         "url": "https://kodekloud.com/blog/api-versioning-best-practices/",
         "type": "article"
       },
@@ -437,8 +453,29 @@
   },
   "O7wjldZ3yTA2s_F-UnJw_": {
     "title": "Rate Limiting",
-    "description": "Rate Limiting is a critical aspect of API Design that dictates the number of API calls a client can make within a specified timeframe. This helps in managing resource allocation, preventing abuse of the API, and maintaining the overall health of the API system. Proper rate limiting measures should be in place to ensure the API's stability, thereby delivering a consistent and reliable service to all consumers. It works primarily by setting a limit on the frequency of client requests, thereby preventing individual users from overloading the system. It is crucial to design and implement rate limiting carefully for maintaining API availability and performance.",
-    "links": []
+    "description": "Rate Limiting is a critical aspect of API Design that dictates the number of API calls a client can make within a specified timeframe. This helps in managing resource allocation, preventing abuse of the API, and maintaining the overall health of the API system. Proper rate limiting measures should be in place to ensure the API's stability, thereby delivering a consistent and reliable service to all consumers. It works primarily by setting a limit on the frequency of client requests, thereby preventing individual users from overloading the system. It is crucial to design and implement rate limiting carefully for maintaining API availability and performance.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Rate limit",
+        "url": "https://developer.mozilla.org/en-US/docs/Glossary/Rate_limit",
+        "type": "article"
+      },
+      {
+        "title": "Throttle",
+        "url": "https://developer.mozilla.org/en-US/docs/Glossary/Throttle",
+        "type": "article"
+      },
+      {
+        "title": "Debounce",
+        "url": "https://developer.mozilla.org/en-US/docs/Glossary/Debounce",
+        "type": "article"
+      },
+      {
+        "title": "What is rate limiting? | Rate limiting and bots",
+        "url": "https://www.cloudflare.com/en-gb/learning/bots/what-is-rate-limiting/",
+        "type": "article"
+      }
+    ]
   },
   "20KEgZH6cu_UokqWpV-9I": {
     "title": "Idempotency",
@@ -503,7 +540,7 @@
     "description": "Error Handling is a crucial aspect of API design that ensures the stability, usability, and reliability of the API in production. APIs are designed to help systems communicate with each other. However, there can be instances where these systems might encounter exceptions or errors. The process of predicting, catching, and managing these error occurrences is what we refer to as 'Error Handling'. In the context of API Design, it involves defining and implementing specific strategies to detect, manage and inform consumers of any exception or error that occurs while executing requests. Configuring this appropriately provides a more robust and seamless communication experience, enabling developers to debug and rectify issues more efficiently.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Best practices for API error handling",
+        "title": "Best Practices for API Error Handling",
         "url": "https://blog.postman.com/best-practices-for-api-error-handling/",
         "type": "article"
       },
@@ -548,18 +585,34 @@
         "title": "Caching REST API Response",
         "url": "https://restfulapi.net/caching/",
         "type": "article"
+      },
+      {
+        "title": "HTTP caching",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching",
+        "type": "article"
       }
     ]
   },
   "cQnQ9v3mH27MGNwetz3JW": {
     "title": "Authentication Methods",
-    "description": "Application Programming Interfaces (APIs) are critical components in software development that allow different software systems to communicate and share functionality. To ensure secure communication, it's essential to authenticate the parties involved in the API transactions. The authentication process confirms the identity of the API user. There are numerous authentication methods available when designing an API, each with its own pros and cons. This includes Basic Authentication, API Key Authentication, OAuth, and JWT among others. Understanding these different methods and their best use cases is fundamental to designing secure and effective APIs.",
-    "links": []
+    "description": "Application Programming Interfaces (APIs) are critical components in software development that allow different software systems to communicate and share functionality. To ensure secure communication, it's essential to authenticate the parties involved in the API transactions. The authentication process confirms the identity of the API user. There are numerous authentication methods available when designing an API, each with its own pros and cons. This includes Basic Authentication, API Key Authentication, OAuth, and JWT among others. Understanding these different methods and their best use cases is fundamental to designing secure and effective APIs.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "API Authentication",
+        "url": "https://www.postman.com/api-platform/api-authentication/",
+        "type": "article"
+      }
+    ]
   },
   "0FzHERK5AeYL5wv1FBJbH": {
     "title": "Basic Auth",
     "description": "Basic Auth, short for Basic Authentication, is a simple method often used in API design for handling user authentication. In this method, client credentials, consisting of a username and password pair, are passed to the API server in a field in the HTTP header. The server then verifies these credentials before granting access to protected resources. Although Basic Auth is straightforward to implement, it is less secure compared to more advanced methods since it involves transmitting credentials in an encoded, but not encrypted, format. It is often used in cases where simplicity is paramount, or High security levels are not required.\n\nLearn more from the following resources:",
     "links": [
+      {
+        "title": "Basic Authentication",
+        "url": "https://roadmap.sh/guides/basic-authentication",
+        "type": "article"
+      },
       {
         "title": "Basic Auth Generation Header",
         "url": "https://www.debugbear.com/basic-auth-header-generator",
@@ -581,6 +634,11 @@
     "title": "Token Based Auth",
     "description": "Token-based authentication is a crucial aspect of API design. It involves providing the user with a token that validates their identity after they have successfully logged in. Once the token is obtained, users can use it to access resources and services provided by the API. This token is usually passed in the headers of subsequent HTTP requests done by the client. One key advantage of token-based auth is that tokens can be created and checked by the server without storing them persistently, which can help to scale applications more easily. This authentication method enhances the security and scalability of web applications and it is mainly used in modern API strategies, including RESTful APIs.\n\nLearn more from the following resources:",
     "links": [
+      {
+        "title": "Token Based Authentication",
+        "url": "https://roadmap.sh/guides/token-authentication",
+        "type": "article"
+      },
       {
         "title": "What Is Token-Based Authentication?",
         "url": "https://www.okta.com/uk/identity-101/what-is-token-based-authentication/",
@@ -590,11 +648,6 @@
         "title": "Session vs Token Authentication in 100 Seconds",
         "url": "https://www.youtube.com/watch?v=UBUNrFtufWo",
         "type": "video"
-      },
-      {
-        "title": "Token based auth",
-        "url": "https://www.youtube.com/watch?v=woNZJMSNbuo",
-        "type": "video"
       }
     ]
   },
@@ -602,6 +655,11 @@
     "title": "JWT ",
     "description": "JSON Web Tokens, or JWT, are a popular and secure method of transferring information between two parties in the domain of API design. As a compact, URL-safe means of representing claims to be transferred between two parties, they play a vital role in security and authorization in modern APIs. By encoding these claims, the information can be verified and trusted with a digital signature - ensuring that the API end-points can handle requests in a secure and reliable way. JWT is a relatively lightweight and scalable method that brings improved authentication and information exchange processes in API design.\n\nLearn more from the following resources:",
     "links": [
+      {
+        "title": "JWT Authentication",
+        "url": "https://roadmap.sh/guides/jwt-authentication",
+        "type": "article"
+      },
       {
         "title": "Introduction to JSON Web Tokens",
         "url": "https://jwt.io/introduction",
@@ -623,6 +681,11 @@
     "title": "OAuth 2.0",
     "description": "OAuth 2.0 is an authorization framework that allows applications to obtain limited access to user accounts on an HTTP service, such as Facebook, GitHub, DigitalOcean, and others. It works by delegating user authentication to the service that hosts the user account and authorizing third-party applications to access the user account. OAuth 2.0 defines four roles: resource owner, client, resource server and authorization server. With regards to API design, OAuth 2.0 can be used to protect API endpoints by ensuring that the client applications having valid access tokens can only interact with the API. It provides detailed workflow processes and a set of protocols for the client application to get authorization to access resources.\n\nLearn more from the following resources:",
     "links": [
+      {
+        "title": "OAuth",
+        "url": "https://roadmap.sh/guides/oauth",
+        "type": "article"
+      },
       {
         "title": "OAuth Website",
         "url": "https://oauth.net/2/",
@@ -645,7 +708,7 @@
     "description": "Application Programming Interfaces (APIs) are critical for building software applications. Among several key considerations during API design, one is deciding how to implement authentication and security. Session Based Authentication is one popular way to apply security in API design.\n\nThis method revolves around the server creating a session for the user after they successfully log in, associating it with a session identifier. This Session ID is then stored client-side within a cookie. On subsequent requests, the server validates the Session ID before processing the API call. The server will destroy the session after the user logs out, thereby invalidating the Session ID.\n\nUnderstanding Session Based Authentication is crucial for secure API design, especially in scenarios where security is a top priority or in legacy systems where this method is prevalent.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Session Based Authentication - Roadmap.sh",
+        "title": "Session Based Authentication",
         "url": "https://roadmap.sh/guides/session-based-authentication",
         "type": "article"
       },
@@ -663,8 +726,14 @@
   },
   "nHbn8_sMY7J8o6ckbD-ER": {
     "title": "Authorization Methods",
-    "description": "In API design, authorization methods play a crucial role in ensuring the security and integrity of data transactions. They are the mechanisms through which an API identifies and validates a user, system, or application before granting them access to specific resources. These methods include Basic Authentication, OAuth, Token-based authentication, JSON Web Tokens (JWT), and API Key based, among others. So, understanding these methods enhances the ability to design APIs that effectively protect resources while allowing necessary access. Each method has its own pros and cons, usage scenarios and security features that make them more suitable for certain situations rather than others.",
-    "links": []
+    "description": "In API design, authorization methods play a crucial role in ensuring the security and integrity of data transactions. They are the mechanisms through which an API identifies and validates a user, system, or application before granting them access to specific resources. These methods include Basic Authentication, OAuth, Token-based authentication, JSON Web Tokens (JWT), and API Key based, among others. So, understanding these methods enhances the ability to design APIs that effectively protect resources while allowing necessary access. Each method has its own pros and cons, usage scenarios and security features that make them more suitable for certain situations rather than others.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "API Authorization Methods",
+        "url": "https://www.pingidentity.com/en/resources/identity-fundamentals/authorization/authorization-methods.html",
+        "type": "article"
+      }
+    ]
   },
   "wFsbmMi5Ey9UyDADdbdPW": {
     "title": "Role Based Access Control (RBAC)",
@@ -676,12 +745,12 @@
         "type": "article"
       },
       {
-        "title": "What is role-based access control (RBAC)?",
+        "title": "What is Role-based Access Control (RBAC)?",
         "url": "https://www.redhat.com/en/topics/security/what-is-role-based-access-control",
         "type": "article"
       },
       {
-        "title": "Role-based access control (RBAC) vs. Attribute-based access control (ABAC)",
+        "title": "Role-based Access Control (RBAC) vs. Attribute-based Access Control (ABAC)",
         "url": "https://www.youtube.com/watch?v=rvZ35YW4t5k",
         "type": "video"
       }
@@ -708,12 +777,12 @@
     "description": "API keys and management is an integral part of API design. An API key is a unique identifier used to authenticate a user, developer, or calling program to an API. This ensures security and control over API endpoints, as only those with a valid API key can make requests. API Management, on the other hand, refers to the practices and tools that enable an organization to govern and monitor its API usage. It involves all the aspects of managing APIs including design, deployment, documentation, security, versioning, and analytics. Both elements play crucial roles in securing and organizing API access for efficient and controlled data sharing and communication.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "What is API key management?",
+        "title": "What is API Key Management?",
         "url": "https://www.akeyless.io/secrets-management-glossary/api-key-management/",
         "type": "article"
       },
       {
-        "title": "API Key Management | Definition and Best Practices",
+        "title": "API Key Management - Definition and Best Practices",
         "url": "https://infisical.com/blog/api-key-management",
         "type": "article"
       }
@@ -750,13 +819,13 @@
         "type": "article"
       },
       {
-        "title": "What is Swagger?",
-        "url": "https://blog.hubspot.com/website/what-is-swagger",
+        "title": "OpenAPI Inititive",
+        "url": "https://www.openapis.org/",
         "type": "article"
       },
       {
-        "title": "OpenAPI Inititive",
-        "url": "https://www.openapis.org/",
+        "title": "What is Swagger?",
+        "url": "https://blog.hubspot.com/website/what-is-swagger",
         "type": "article"
       }
     ]
@@ -771,7 +840,12 @@
         "type": "article"
       },
       {
-        "title": "Postman Api Testing Tutorial for beginners",
+        "title": "Postman Docs",
+        "url": "https://www.postman.com/api-documentation-tool/",
+        "type": "article"
+      },
+      {
+        "title": "Postman Tutorial for Beginners",
         "url": "https://www.youtube.com/watch?v=MFxk5BZulVU",
         "type": "video"
       }
@@ -782,12 +856,12 @@
     "description": "[Readme.com](http://Readme.com) is an invaluable tool in the realm of API Design, renowned for providing a collaborative platform for creating beautiful, dynamic and intuitive documentation. It's a tool which aids developers in outlining clear, comprehensive documentation for their API interfaces. The API documentation created with [Readme.com](http://Readme.com) is not just about the presentation of information, but enhances the reader's understanding by making it interactive. This interactive approach encourages practical learning and offers insights into how the API will behave under different circumstances. With [Readme.com](http://Readme.com), developers can create a user-focused documentation environment that streamlines the learning process and makes their APIs easier to consume and implement.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "readmeio",
-        "url": "https://github.com/readmeio",
+        "title": "ReadMe",
+        "url": "https://github.com/orgs/readmeio/repositories?type=source",
         "type": "opensource"
       },
       {
-        "title": "readme.com",
+        "title": "ReadMe Website",
         "url": "https://readme.com",
         "type": "article"
       }
@@ -798,7 +872,7 @@
     "description": "Stoplight is an advanced tool that offers a comprehensive platform for technical teams to handle all aspects of API design. Leveraging Stoplight, teams can design, document and develop APIs in a more collaborative and streamlined manner. It uses an OpenAPI specification and allows users to design APIs visually, making API development easier. With its ability to auto-generate API documentation, performing API mock testing, and providing API management features, Stoplight plays a crucial role in adopting a design-first approach in API development. By using Stoplight, APIs can be designed to be easy-to-use, scalable, and robust from the outset, which ultimately improves the overall development process and quality of the APIs.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "/stoplightio",
+        "title": "stoplightio",
         "url": "https://github.com/stoplightio",
         "type": "opensource"
       },
@@ -846,12 +920,12 @@
     "description": "API design has rapidly emerged as a vital component of software development. When designing an API, it is crucial to follow best practices to ensure optimization, scalability, and efficiency. The best practices in API design revolve around principles such as simplicity, consistency, security, and proper documentation among others. These practices not only smoothens the development process but also makes the API more user-friendly, stable, and easily maintainable. Thus, following the best practices in API design is not an option but rather a must for developers and organizations looking to create APIs that last longer and perform better.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Best practices for REST API design",
+        "title": "Best Practices for REST API Design",
         "url": "https://stackoverflow.blog/2020/03/02/best-practices-for-rest-api-design/",
         "type": "article"
       },
       {
-        "title": "Best practices in API design",
+        "title": "Best Practices in API Design",
         "url": "https://swagger.io/resources/articles/best-practices-in-api-design/",
         "type": "article"
       }
@@ -883,7 +957,7 @@
         "type": "article"
       },
       {
-        "title": "How does API monitoring improve API performance?",
+        "title": "How does API Monitoring Improves API Performance?",
         "url": "https://tyk.io/blog/api-product-metrics-what-you-need-to-know/",
         "type": "article"
       }
@@ -899,7 +973,7 @@
         "type": "article"
       },
       {
-        "title": "Using caching strategies to improve API performance",
+        "title": "Using Caching Strategies to Improve API Performance",
         "url": "https://www.lonti.com/blog/using-caching-strategies-to-improve-api-performance",
         "type": "article"
       },
@@ -915,17 +989,22 @@
     "description": "Load Balancing plays a crucial role in the domain of API Design. It primarily revolves around evenly and efficiently distributing network traffic across a group of backend servers, also known as a server farm or server pool. When it comes to API design, implementing load balancing algorithms is of immense importance to ensure that no single server bears too much demand. This allows for high availability and reliability by rerouting the traffic in case of server failure, effectively enhancing application performance and contributing to a positive user experience. Therefore, it's a vital tactic in ensuring the scalability and robustness of system architectures which heavily rely on API interactions.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "What is load balancing?",
+        "title": "What is Load Balancing?",
         "url": "https://www.cloudflare.com/en-gb/learning/performance/what-is-load-balancing/",
         "type": "article"
       },
+      {
+        "title": "Load Balancers in API",
+        "url": "https://learn.microsoft.com/en-us/rest/api/load-balancer/",
+        "type": "article"
+      },
       {
         "title": "API Gateway vs Load Balancer: Which is Right for Your Application?",
         "url": "https://konghq.com/blog/engineering/api-gateway-vs-load-balancer",
         "type": "article"
       },
       {
-        "title": "What is a load balancer?",
+        "title": "What is a Load Balancer?",
         "url": "https://www.youtube.com/watch?v=sCR3SAVdyCc",
         "type": "video"
       }
@@ -957,7 +1036,7 @@
     "description": "Profiling and monitoring are critical aspects of API design and implementation. Profiling, in this context, refers to the process of analyzing the behavior of your API in order to understand various performance metrics including response times, request rates, error rates, and the overall health and functionality of your API. On the other hand, monitoring is the ongoing process of checking the status of your API to ensure it's functioning as expected while also providing an early warning system for potential issues and improvements. Together, profiling and monitoring your API can lead to a more reliable, efficient, and high-performing service.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Monitor health and performance of your APIs",
+        "title": "Monitor Health and Performance of your APIs",
         "url": "https://learning.postman.com/docs/monitoring-your-api/intro-monitors/",
         "type": "article"
       },
@@ -994,7 +1073,7 @@
         "type": "article"
       },
       {
-        "title": "API Integration Patterns",
+        "title": "API Integration Patterns - Devoteam",
         "url": "https://uk.devoteam.com/expert-view/api-integration-patterns/",
         "type": "article"
       }
@@ -1026,12 +1105,12 @@
     "description": "Event-driven architecture (EDA) is a software design concept that revolves around the production, interpretation, and consumption of events. With regards to API design, EDA grants systems the flexibility to decentralize analytics, microservices, and operations, thus promoting real-time information sharing and reaction. Event-driven APIs prioritize asynchronous communication, allowing applications to stay responsive even when tackling heavy data loads. For an effective API, adhering to EDA provides data reliability, maturity with a scalable structure, and efficient real-time data processing capabilities.\n\nLearn more form the following resources:",
     "links": [
       {
-        "title": "Event-driven architecture style",
+        "title": "Event Driven Architecture Style",
         "url": "https://learn.microsoft.com/en-us/azure/architecture/guide/architecture-styles/event-driven",
         "type": "article"
       },
       {
-        "title": "Event-driven architecture",
+        "title": "Event-driven Architecture",
         "url": "https://aws.amazon.com/event-driven-architecture/",
         "type": "article"
       },
@@ -1073,7 +1152,7 @@
         "type": "article"
       },
       {
-        "title": "Microservices explained in 5 minutes",
+        "title": "Microservices Explained in 5 Minutes",
         "url": "https://www.youtube.com/watch?v=lL_j7ilk7rc",
         "type": "video"
       }
@@ -1084,12 +1163,12 @@
     "description": "Messaging Queues play a fundamental role in API design, particularly in creating robust, decoupled, and efficient systems. These queues act like a buffer, storing messages or data sent from a sender (producer), allowing a receiver (consumer) to retrieve and process them at its own pace. In the context of API design, this concept enables developers to handle high-volume data processing requirements, providing an asynchronous communication protocol between multiple services. The benefits of messaging queues in API design include better system scalability, fault tolerance, and increased overall system resiliency.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "What is a message queue?",
+        "title": "What is a Message Queue?",
         "url": "https://aws.amazon.com/message-queue/",
         "type": "article"
       },
       {
-        "title": "REST API message queues explained",
+        "title": "REST API Message Queues Explained",
         "url": "https://www.youtube.com/watch?v=2idPgA6IN_Q",
         "type": "video"
       }
@@ -1116,12 +1195,12 @@
     "description": "Batch Processing refers to the method of handling bulk data requests in API design. Here, multiple API requests are packed and processed as a single group or 'batch'. Instead of making numerous individual API calls, a user can make one batch request with numerous operations. This approach can increase performance and efficiency by reducing the overhead of establishing and closing multiple connections. The concept of 'batch processing' in API design is particularly useful in data-intensive applications or systems where the need for processing high volumes of data is prevalent.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "API design guidance: bulk vs batch import",
+        "title": "API Design Guidance: Bulk vs Batch Import",
         "url": "https://tyk.io/blog/api-design-guidance-bulk-and-batch-import/",
         "type": "article"
       },
       {
-        "title": "Stream vs Batch processing explained with examples",
+        "title": "Stream vs Batch Processing Explained with Examples",
         "url": "https://www.youtube.com/watch?v=1xgBQTF24mU",
         "type": "video"
       }
@@ -1129,7 +1208,7 @@
   },
   "H22jAI2W5QLL-b1rq-c56": {
     "title": "Rabbit MQ",
-    "description": "RabbitMQ is an open-source message-broker software/system that plays a crucial role in API design, specifically in facilitating effective and efficient inter-process communication. It implements the Advanced Message Queuing Protocol (AMQP) to enable secure and reliable data transmission in various formats such as text, binary, or serialized objects.\n\nIn API design, RabbitMQ comes in handy in decoupling application processes for scalability and robustness, whilst ensuring that data delivery occurs safely and seamlessly. It introduces queuing as a way of handling multiple users or service calls at once hence enhancing responsiveness and performance of APIs. Its queue system elegantly digests API request loads, allowing services to evenly process data while preventing overloading.\n\nLearn more from the following resources:",
+    "description": "RabbitMQ is an open-source message-broker software/system that plays a crucial role in API design, specifically in facilitating effective and efficient inter-process communication. It implements the Advanced Message Queuing Protocol (AMQP) to enable secure and reliable data transmission in various formats such as text, binary, or serialized objects. RabbitMQ comes in handy in decoupling application processes for scalability and robustness, whilst ensuring that data delivery occurs safely and seamlessly. It introduces queuing as a way of handling multiple users or service calls at once hence enhancing responsiveness and performance of APIs. Its queue system elegantly digests API request loads, allowing services to evenly process data while preventing overloading.\n\nLearn more from the following resources:",
     "links": [
       {
         "title": "RabbitMQ Website",
@@ -1169,7 +1248,7 @@
     "description": "API Testing refers to the process of checking the functionality, reliability, performance, and security of Application Programming Interfaces (APIs). It plays a crucial role in API design as it ensures that the APIs work correctly and as expected. This kind of testing does not require a user interface and mainly focuses on the business logic layer of the software architecture. API Testing is integral to guarantee that the data communication and responses between different software systems are error-free and streamlined.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "What is API testing?",
+        "title": "What is API Testing?",
         "url": "https://www.postman.com/api-platform/api-testing/",
         "type": "article"
       },
@@ -1214,7 +1293,7 @@
   },
   "6lm3wy9WTAERTqXCn6pFt": {
     "title": "Functional Testing",
-    "description": "Functional testing in the context of API design involves validating the endpoints and key-value pairs of an API. It ensures the server response works as expected and assesses the functionality of the API -- whether it is performing all the intended functions correctly. Various approaches like testing request-response pairs, error codes, and data accuracy are used. Functional testing can provide invaluable insights into how well an API meets the specified requirements and whether it is ready for integration into applications.\n\nLearn more from the following resources:",
+    "description": "Functional testing in the context of API design involves validating the endpoints and key-value pairs of an API. It ensures the server response works as expected and assesses the functionality of the API whether it is performing all the intended functions correctly. Various approaches like testing request-response pairs, error codes, and data accuracy are used. Functional testing can provide invaluable insights into how well an API meets the specified requirements and whether it is ready for integration into applications.\n\nLearn more from the following resources:",
     "links": [
       {
         "title": "API Functional Testing – Why Is It Important And How to Test",
@@ -1233,17 +1312,17 @@
     "description": "Load testing is a crucial aspect of API design that ensures reliability, efficiency and performance under varying loads. It primarily focuses on identifying the maximum capacity of the API in terms of the volume of requests it can handle and its subsequent behavior when this threshold is reached or overloaded. By simulating varying degrees of user load, developers can identify and rectify bottlenecks or breakdown points in the system, hence enhancing overall API resilience.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "API load testing - a beginners guide",
+        "title": "API Load Testing - Beginners Guide",
         "url": "https://grafana.com/blog/2024/01/30/api-load-testing/",
         "type": "article"
       },
       {
-        "title": "Test your API’s performance by simulating real-world traffic",
+        "title": "Test Your API’s Performance by Simulating Real-world Traffic",
         "url": "https://blog.postman.com/postman-api-performance-testing/",
         "type": "article"
       },
       {
-        "title": "Load testing your API's",
+        "title": "Load Testing API's",
         "url": "https://www.youtube.com/watch?v=a5hWE4hMOoY",
         "type": "video"
       }
@@ -1259,7 +1338,7 @@
         "type": "article"
       },
       {
-        "title": "@articleWhat is API mocking (What is API Mocking? Definition, Guide, and Best Practices)",
+        "title": "What is API mocking (What is API Mocking? Definition, Guide, and Best Practices)",
         "url": "https://blog.postman.com/what-is-api-mocking/",
         "type": "article"
       },
@@ -1275,12 +1354,12 @@
     "description": "Contract Testing is a critical aspect of maintaining a robust and reliable API infrastructure. In the realm of API design, Contract Testing refers to the method of ensuring that APIs work as anticipated and that changes to them do not break their intended functionality. This approach validates the interaction between two different systems, typically consumer and provider ( API), ensuring they comply with their agreed-upon contract. By defining clear and concise contracts for our APIs, developers can avoid common deployment issues and enhance system integration processes.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "A complete guide to Contract Testing",
+        "title": "Complete Guide to Contract Testing",
         "url": "https://testsigma.com/blog/api-contract-testing/",
         "type": "article"
       },
       {
-        "title": "Get started with API Contract Testing",
+        "title": "Geting Started with API Contract Testing",
         "url": "https://saucelabs.com/resources/blog/getting-started-with-api-contract-testing",
         "type": "article"
       },
@@ -1293,7 +1372,7 @@
   },
   "XD1vDtrRQFbLyKJaD1AlA": {
     "title": "Error Handling / Retries",
-    "description": "When creating effective API designs, addressing Error Handling and Retries forms an essential facet. This is primarily due to the fact that APIs aren't always error-free and instances of network hiccups or input inaccuracies from users can occur. Without robust error handling, such occurrences can easily lead to catastrophic application failure or unsatisfactory user experiences.\n\nIn this context, error handling can refer to validating inputs, managing exceptions, and returning appropriate error message or status codes to the user. Meanwhile, the concept of retries comes into play to ensure maximum request success amidst transient failures. Through correctly implemented retries, an API can repeatedly attempt to execute a request until it is successful, thus ensuring seamless operation. The criteria and mechanisms of retries, including the count, delay, and conditions for retries, are crucial aspects to solidify during the API design.\n\nLearn more from the following resources:",
+    "description": "When creating effective API designs, addressing Error Handling and Retries forms an essential facet. This is primarily due to the fact that APIs aren't always error-free and instances of network hiccups or input inaccuracies from users can occur. Without robust error handling, such occurrences can easily lead to catastrophic application failure or unsatisfactory user experiences. Error handling can refer to validating inputs, managing exceptions, and returning appropriate error message or status codes to the user. Meanwhile, the concept of retries comes into play to ensure maximum request success amidst transient failures. Through correctly implemented retries, an API can repeatedly attempt to execute a request until it is successful, thus ensuring seamless operation.\n\nLearn more from the following resources:",
     "links": [
       {
         "title": "How To Improve Your Backend By Adding Retries to Your API Calls",
@@ -1301,7 +1380,7 @@
         "type": "article"
       },
       {
-        "title": "How to make resilient web applications with retries",
+        "title": "How to Make Resilient Web Applications with Retries",
         "url": "https://www.youtube.com/watch?v=Gly94hp3Eec",
         "type": "video"
       }
@@ -1333,12 +1412,12 @@
         "type": "article"
       },
       {
-        "title": "What are websockets?",
+        "title": "What are Web Sockets?",
         "url": "https://www.pubnub.com/guides/websockets/",
         "type": "article"
       },
       {
-        "title": "How web sockets work",
+        "title": "How Web Sockets Work",
         "url": "https://www.youtube.com/watch?v=pnj3Jbho5Ck",
         "type": "video"
       }
@@ -1362,20 +1441,20 @@
   },
   "yvdfoly5WHHTq2Puss355": {
     "title": "Standards and Compliance",
-    "description": "When designing APIs, it's crucial to consider the concept of standards and compliance. Standards represent the set of rules and best practices that guide developers to create well-structured and easily maintainable APIs. They can range from the proper structure of the endpoints, the standardization of error responses, to naming conventions, and the usage of HTTP verbs.\n\nCompliance on the other hand, emphasizes on meeting protocol requirements or standards such as REST or SOAP. Furthermore, operating within regulated industries can also necessitate certain compliance measures like GDPR, HIPAA and others. Compliance in API Design ensures interoperability and safety of data transmission between systems.\n\nIn essence, Standards and Compliance in API Design contributes towards building more secure, robust, and efficient APIs that are user-friendly and universally understandable.\n\nLearn more from the following resources:",
+    "description": "When designing APIs, it's crucial to consider the concept of standards and compliance. Standards represent the set of rules and best practices that guide developers to create well-structured and easily maintainable APIs. They can range from the proper structure of the endpoints, the standardization of error responses, to naming conventions, and the usage of HTTP verbs. Compliance on the other hand, emphasizes on meeting protocol requirements or standards such as REST or SOAP. Furthermore, operating within regulated industries can also necessitate certain compliance measures like GDPR, HIPAA and others. Compliance in API Design ensures interoperability and safety of data transmission between systems.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "What is API compliance?",
+        "title": "What is API Compliance?",
         "url": "https://tyk.io/learning-center/api-compliance/",
         "type": "article"
       },
       {
-        "title": "What is API compliance and why is it important?",
+        "title": "What is API Compliance and Why is it important?",
         "url": "https://www.traceable.ai/blog-post/achieve-api-compliance",
         "type": "article"
       },
       {
-        "title": "REST API standards",
+        "title": "REST API Standards",
         "url": "https://www.integrate.io/blog/rest-api-standards/",
         "type": "article"
       }
@@ -1402,17 +1481,17 @@
     "description": "API Lifecycle Management is a crucial aspect in API design that oversees the process of creating, managing, and retiring APIs. This involves various stages from initial planning, designing, testing, deployment, to eventual retirement of the API. Proper lifecycle management ensures that an API meets the requirements, is reliable, and that it evolves with the needs of end users and developers. Moreover, it helps in maintaining the security, performance, and accessibility of the API throughout its lifetime. This comprehensive approach enables organizations to make the most of their APIs, mitigate issues, and facilitate successful digital transformation.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "What is the API lifecycle?",
+        "title": "What is the API Lifecycle?",
         "url": "https://www.postman.com/api-platform/api-lifecycle/",
         "type": "article"
       },
       {
-        "title": "What is API lifescycle management?",
+        "title": "What is API Lifecycle Management?",
         "url": "https://swagger.io/blog/api-strategy/what-is-api-lifecycle-management/",
         "type": "article"
       },
       {
-        "title": "Day in the lifecycle of an API",
+        "title": "Day in the Lifecycle of an API",
         "url": "https://www.youtube.com/watch?v=VxY_cz0VQXE",
         "type": "video"
       }
@@ -1481,5 +1560,36 @@
         "type": "article"
       }
     ]
+  },
+  "1DrqtOwxCuFtWQXQ6ZALp": {
+    "title": "gRPC APIs",
+    "description": "gRPC is a platform agnostic serialization protocol that is used to communicate between services. Designed by Google in 2015, it is a modern alternative to REST APIs. It is a binary protocol that uses HTTP/2 as a transport layer. It is a high performance, open source, general-purpose RPC framework that puts mobile and HTTP/2 first. It's main use case is for communication between two different languages within the same application. You can use Python to communicate with Go, or Java to communicate with C#.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "gRPC Website",
+        "url": "https://grpc.io/",
+        "type": "article"
+      },
+      {
+        "title": "gRPC Introduction",
+        "url": "https://grpc.io/docs/what-is-grpc/introduction/",
+        "type": "article"
+      },
+      {
+        "title": "gRPC Core Concepts",
+        "url": "https://grpc.io/docs/what-is-grpc/core-concepts/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about gRPC",
+        "url": "https://app.daily.dev/tags/grpc?ref=roadmapsh",
+        "type": "article"
+      },
+      {
+        "title": "Stephane Maarek - gRPC Introduction",
+        "url": "https://youtu.be/XRXTsQwyZSU",
+        "type": "video"
+      }
+    ]
   }
 }