fix: bcrypt open source link

chore: update roadmap content json (#7339 )
Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>
2026-03-13 18:21:57 +08:00 · 2024-10-05 10:53:14 +06:00 · 2024-10-05 09:52:41 +06:00 · 2024-10-04 18:41:47 +01:00 · 2024-10-04 14:31:53 +01:00 · 2024-10-04 11:59:48 +01:00
576 changed files with 6570 additions and 2450 deletions
--- a/contributing.md
+++ b/contributing.md
@@ -2,12 +2,67 @@

 First of all, thank you for considering to contribute. Please look at the details below:

+- [Hacktoberfest Contributions](#hacktoberfest-contributions)
 - [New Roadmaps](#new-roadmaps)
 - [Existing Roadmaps](#existing-roadmaps)
 - [Adding Projects](#adding-projects)
 - [Adding Content](#adding-content)
 - [Guidelines](#guidelines)

+## Hacktoberfest Contributions
+
+We are taking part in [Hacktoberfest 11](https://hacktoberfest.com/)!
+
+Before you start to contribute to our project in order to satisfy [Hacktoberfest requirements](https://hacktoberfest.com/participation/#contributors), please bare in mind the following:
+
+* There is not a Hacktoberfest t-shirt this year [(see their FAQ)](https://hacktoberfest.com/participation/#faq).
+* There is not an infinite opportunity to contribute to the roadmap.sh project.
+
+### Hacktoberfest Specific Contribution rules
+
+As Hacktoberfest attracts a lot of contributors (which is awesome), it does require a more rigid and strictly enforced set of guidelines than the average contribution.
+
+These are as follows:
+
+1. No single file contributions, please contribute to a minimum of two.
+
+Whilst single file contributions, such as adding one link to a single topic, is perfectly fine outside of hacktoberfest, this can (and probably will) result it an easy 4 pull requests for everyone and we will just become a Hacktoberfest farming project.
+
+***Note: If you contribute the entire contents of a topic i.e. the topic has 0 copy and 0 links, this will count.***
+
+2. Typo fixes will not count (by themselves).
+
+Whilst fixing typos is a great thing to do, lets bundle them in with actual contributions if we see them!
+
+3. The same basic rules apply.
+
+- Content must be in English.
+- Maximum of 8 links per topic.
+- Follow the below style guide for content.
+
+Here is an example of a **fully complete** topic:
+
+```markdown
+# Redis
+
+Redis is an open-source, in-memory data structure store known for its speed and versatility. It supports various data types, including strings, lists, sets, hashes, and sorted sets, and provides functionalities such as caching, session management, real-time analytics, and message brokering. Redis operates as a key-value store, allowing for rapid read and write operations, and is often used to enhance performance and scalability in applications. It supports persistence options to save data to disk, replication for high availability, and clustering for horizontal scaling. Redis is widely used for scenarios requiring low-latency access to data and high-throughput performance.
+
+Learn more from the following resources:
+
+[@official@Link 1](https:/google.com)
+[@article@Link 2](https:/google.com)
+[@article@Link 3](https:/google.com)
+[@course@Link 4](https:/google.com)
+[@course@Link 5](https:/google.com)
+[@video@Link 6](https:/google.com)
+[@video@Link 7](https:/google.com)
+[@video@Link 8](https:/google.com)
+```
+
+Contributions to the project that meet these requirements will be given the label `hacktoberfest-accepted` and merged, contributions that do not meet the requirements will simply be closed.
+
+Any attempts at spam PRs will be given the `spam` tag. If you recieve 2 `spam` tags against you, you will be [disqualified from Hacktoberfest](https://hacktoberfest.com/participation/#spam).
+
 ## New Roadmaps

 For new roadmaps, you can either:
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,16 +29,18 @@
        "jose": "^5.6.3",
        "js-cookie": "^3.0.5",
        "lucide-react": "^0.419.0",
+        "luxon": "^3.5.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",
+        "playwright": "^1.47.1",
        "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-slick": "^0.30.2",
        "react-tooltip": "^5.27.1",
        "reactflow": "^11.11.4",
        "rehype-external-links": "^3.0.0",
@@ -47,6 +49,7 @@
        "satori": "^0.10.14",
        "satori-html": "^0.3.2",
        "sharp": "^0.33.4",
+        "slick-carousel": "^1.8.1",
        "slugify": "^1.6.6",
        "tailwind-merge": "^2.4.0",
        "tailwindcss": "^3.4.7",
@@ -59,8 +62,10 @@
        "@tailwindcss/typography": "^0.5.13",
        "@types/dom-to-image": "^2.6.7",
        "@types/js-cookie": "^3.0.6",
+        "@types/luxon": "^3.4.2",
        "@types/prismjs": "^1.26.4",
        "@types/react-calendar-heatmap": "^1.6.7",
+        "@types/react-slick": "^0.23.13",
        "@types/turndown": "^5.0.5",
        "csv-parser": "^3.0.0",
        "gh-pages": "^6.1.1",
@@ -1749,6 +1754,50 @@
        "node": ">=18"
      }
    },
+    "node_modules/@playwright/test/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/@playwright/test/node_modules/playwright": {
+      "version": "1.46.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.0.tgz",
+      "integrity": "sha512-XYJ5WvfefWONh1uPAUAi0H2xXV5S3vrtcnXe6uAOgdGi3aSpqOSXX08IAjXW34xitfuOJsvXU5anXZxPSEQiJw==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.46.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/@playwright/test/node_modules/playwright-core": {
+      "version": "1.46.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.0.tgz",
+      "integrity": "sha512-9Y/d5UIwuJk8t3+lhmMSAJyNP1BUC/DqP3cQJDQQL/oWqAiuPTLgy7Q5dzglmTLwcBRdetzgNM/gni7ckfTr6A==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/@reactflow/background": {
      "version": "11.3.14",
      "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz",
@@ -2622,6 +2671,12 @@
      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
      "dev": true
    },
+    "node_modules/@types/luxon": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.4.2.tgz",
+      "integrity": "sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==",
+      "dev": true
+    },
    "node_modules/@types/mdast": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -2698,6 +2753,15 @@
        "@types/react": "*"
      }
    },
+    "node_modules/@types/react-slick": {
+      "version": "0.23.13",
+      "resolved": "https://registry.npmjs.org/@types/react-slick/-/react-slick-0.23.13.tgz",
+      "integrity": "sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==",
+      "dev": true,
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/sax": {
      "version": "1.2.7",
      "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.7.tgz",
@@ -3931,6 +3995,11 @@
        "iconv-lite": "^0.6.2"
      }
    },
+    "node_modules/enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
    "node_modules/entities": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -4953,6 +5022,12 @@
        "url": "https://github.com/sponsors/panva"
      }
    },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
    "node_modules/js-cookie": {
      "version": "3.0.5",
      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
@@ -4988,6 +5063,14 @@
        "node": ">=4"
      }
    },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
    "node_modules/json5": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -5114,6 +5197,11 @@
      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
      "dev": true
    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
    "node_modules/lodash.isplainobject": {
      "version": "4.0.6",
      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
@@ -5199,6 +5287,14 @@
        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },
+    "node_modules/luxon": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
+      "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/magic-string": {
      "version": "0.30.11",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
@@ -6656,11 +6752,11 @@
      }
    },
    "node_modules/playwright": {
-      "version": "1.46.0",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.46.0.tgz",
-      "integrity": "sha512-XYJ5WvfefWONh1uPAUAi0H2xXV5S3vrtcnXe6uAOgdGi3aSpqOSXX08IAjXW34xitfuOJsvXU5anXZxPSEQiJw==",
+      "version": "1.47.2",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.47.2.tgz",
+      "integrity": "sha512-nx1cLMmQWqmA3UsnjaaokyoUpdVaaDhJhMoxX2qj3McpjnsqFHs516QAKYhqHAgOP+oCFTEOCOAaD1RgD/RQfA==",
      "dependencies": {
-        "playwright-core": "1.46.0"
+        "playwright-core": "1.47.2"
      },
      "bin": {
        "playwright": "cli.js"
@@ -6673,9 +6769,9 @@
      }
    },
    "node_modules/playwright-core": {
-      "version": "1.46.0",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.46.0.tgz",
-      "integrity": "sha512-9Y/d5UIwuJk8t3+lhmMSAJyNP1BUC/DqP3cQJDQQL/oWqAiuPTLgy7Q5dzglmTLwcBRdetzgNM/gni7ckfTr6A==",
+      "version": "1.47.2",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.47.2.tgz",
+      "integrity": "sha512-3JvMfF+9LJfe16l7AbSmU555PaTl2tPyQsVInqm3id16pdDfvZ8TTZ/pyzmkbDrZTQefyzU7AIHlZqQnxpqHVQ==",
      "bin": {
        "playwright-core": "cli.js"
      },
@@ -7125,6 +7221,22 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-slick": {
+      "version": "0.30.2",
+      "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.30.2.tgz",
+      "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/react-tooltip": {
      "version": "5.27.1",
      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.27.1.tgz",
@@ -7329,6 +7441,11 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
    "node_modules/resolve": {
      "version": "1.22.8",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
@@ -7771,6 +7888,14 @@
      "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
      "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw=="
    },
+    "node_modules/slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "peerDependencies": {
+        "jquery": ">=1.8.0"
+      }
+    },
    "node_modules/slugify": {
      "version": "1.6.6",
      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.6.tgz",
@@ -7820,6 +7945,11 @@
      "resolved": "https://registry.npmjs.org/stream-replace-string/-/stream-replace-string-2.0.0.tgz",
      "integrity": "sha512-TlnjJ1C0QrmxRNrON00JvaFFlNh5TTG00APw23j74ET7gkQpTASi6/L2fuiav8pzK715HXtUeClpBTw2NPSn6w=="
    },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
    "node_modules/string-width": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
    "@types/luxon": "^3.4.2",
    "@types/prismjs": "^1.26.4",
    "@types/react-calendar-heatmap": "^1.6.7",
+    "@types/react-slick": "^0.23.13",
    "@types/turndown": "^5.0.5",
    "csv-parser": "^3.0.0",
    "gh-pages": "^6.1.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,16 +10,16 @@ importers:
    dependencies:
      '@astrojs/node':
        specifier: ^8.3.3
-        version: 8.3.3(astro@4.15.8(@types/node@18.19.50)(rollup@4.22.0)(typescript@5.6.2))
+        version: 8.3.4(astro@4.15.8(@types/node@18.19.50)(rollup@4.22.4)(typescript@5.6.2))
      '@astrojs/react':
        specifier: ^3.6.2
-        version: 3.6.2(@types/react-dom@18.3.0)(@types/react@18.3.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.4.6(@types/node@18.19.50))
+        version: 3.6.2(@types/react-dom@18.3.0)(@types/react@18.3.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.4.7(@types/node@18.19.50))
      '@astrojs/sitemap':
        specifier: ^3.1.6
        version: 3.1.6
      '@astrojs/tailwind':
        specifier: ^5.1.0
-        version: 5.1.1(astro@4.15.8(@types/node@18.19.50)(rollup@4.22.0)(typescript@5.6.2))(tailwindcss@3.4.12)
+        version: 5.1.1(astro@4.15.8(@types/node@18.19.50)(rollup@4.22.4)(typescript@5.6.2))(tailwindcss@3.4.13)
      '@fingerprintjs/fingerprintjs':
        specifier: ^4.4.3
        version: 4.5.0
@@ -40,7 +40,7 @@ importers:
        version: 18.3.0
      astro:
        specifier: ^4.15.4
-        version: 4.15.8(@types/node@18.19.50)(rollup@4.22.0)(typescript@5.6.2)
+        version: 4.15.8(@types/node@18.19.50)(rollup@4.22.4)(typescript@5.6.2)
      clsx:
        specifier: ^2.1.1
        version: 2.1.1
@@ -64,7 +64,7 @@ importers:
        version: 1.1.1
      jose:
        specifier: ^5.6.3
-        version: 5.9.2
+        version: 5.9.3
      js-cookie:
        specifier: ^3.0.5
        version: 3.0.5
@@ -85,10 +85,10 @@ importers:
        version: 6.1.13
      npm-check-updates:
        specifier: ^17.0.0
-        version: 17.1.2
+        version: 17.1.3
      playwright:
        specifier: ^1.47.1
-        version: 1.47.1
+        version: 1.47.2
      prismjs:
        specifier: ^1.29.0
        version: 1.29.0
@@ -136,7 +136,7 @@ importers:
        version: 2.5.2
      tailwindcss:
        specifier: ^3.4.7
-        version: 3.4.12
+        version: 3.4.13
      turndown:
        specifier: ^7.2.0
        version: 7.2.0
@@ -149,10 +149,10 @@ importers:
    devDependencies:
      '@playwright/test':
        specifier: ^1.45.3
-        version: 1.47.1
+        version: 1.47.2
      '@tailwindcss/typography':
        specifier: ^0.5.13
-        version: 0.5.15(tailwindcss@3.4.12)
+        version: 0.5.15(tailwindcss@3.4.13)
      '@types/dom-to-image':
        specifier: ^2.6.7
        version: 2.6.7
@@ -168,6 +168,9 @@ importers:
      '@types/react-calendar-heatmap':
        specifier: ^1.6.7
        version: 1.6.7
+      '@types/react-slick':
+        specifier: ^0.23.13
+        version: 0.23.13
      '@types/turndown':
        specifier: ^5.0.5
        version: 5.0.5
@@ -185,7 +188,7 @@ importers:
        version: 14.1.0
      openai:
        specifier: ^4.53.2
-        version: 4.62.1(zod@3.23.8)
+        version: 4.63.0(zod@3.23.8)
      prettier:
        specifier: ^3.3.3
        version: 3.3.3
@@ -218,8 +221,8 @@ packages:
  '@astrojs/markdown-remark@5.2.0':
    resolution: {integrity: sha512-vWGM24KZXz11jR3JO+oqYU3T2qpuOi4uGivJ9SQLCAI01+vEkHC60YJMRvHPc+hwd60F7euNs1PeOEixIIiNQw==}

-  '@astrojs/node@8.3.3':
-    resolution: {integrity: sha512-idrKhnnPSi0ABV+PCQsRQqVNwpOvVDF/+fkwcIiE8sr9J8EMvW9g/oyAt8T4X2OBJ8FUzYPL8klfCdG7r0eB5g==}
+  '@astrojs/node@8.3.4':
+    resolution: {integrity: sha512-xzQs39goN7xh9np9rypGmbgZj3AmmjNxEMj9ZWz5aBERlqqFF3n8A/w/uaJeZ/bkHS60l1BXVS0tgsQt9MFqBA==}
    peerDependencies:
      astro: ^4.2.0

@@ -889,8 +892,8 @@ packages:
    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
    engines: {node: '>=14'}

-  '@playwright/test@1.47.1':
-    resolution: {integrity: sha512-dbWpcNQZ5nj16m+A5UNScYx7HX5trIy7g4phrcitn+Nk83S32EBX/CLU4hiF4RGKX/yRc93AAqtfaXB7JWBd4Q==}
+  '@playwright/test@1.47.2':
+    resolution: {integrity: sha512-jTXRsoSPONAs8Za9QEQdyjFn+0ZQFjCiIztAIF6bi1HqhBzG9Ma7g1WotyiGqFSBRZjIEqMdT8RUlbk1QVhzCQ==}
    engines: {node: '>=18'}
    hasBin: true

@@ -1006,8 +1009,8 @@ packages:
    resolution: {integrity: sha512-xBaJish5OeGmniDj9cW5PRa/PtmuVU3ziqrbr5xJj901ZDN4TosrVaNZpEiLZAxdfnhAe7uQ7QFWfjPe9d9K2Q==}
    engines: {node: '>= 10'}

-  '@rollup/pluginutils@5.1.0':
-    resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==}
+  '@rollup/pluginutils@5.1.1':
+    resolution: {integrity: sha512-bVRmQqBIyGD+VMihdEV2IBurfIrdW9tD9yzJUL3CBRDbyPBVzQnBSMSgyUZHl1E335rpMRj7r4o683fXLYw8iw==}
    engines: {node: '>=14.0.0'}
    peerDependencies:
      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -1015,83 +1018,83 @@ packages:
      rollup:
        optional: true

-  '@rollup/rollup-android-arm-eabi@4.22.0':
-    resolution: {integrity: sha512-/IZQvg6ZR0tAkEi4tdXOraQoWeJy9gbQ/cx4I7k9dJaCk9qrXEcdouxRVz5kZXt5C2bQ9pILoAA+KB4C/d3pfw==}
+  '@rollup/rollup-android-arm-eabi@4.22.4':
+    resolution: {integrity: sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==}
    cpu: [arm]
    os: [android]

-  '@rollup/rollup-android-arm64@4.22.0':
-    resolution: {integrity: sha512-ETHi4bxrYnvOtXeM7d4V4kZWixib2jddFacJjsOjwbgYSRsyXYtZHC4ht134OsslPIcnkqT+TKV4eU8rNBKyyQ==}
+  '@rollup/rollup-android-arm64@4.22.4':
+    resolution: {integrity: sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==}
    cpu: [arm64]
    os: [android]

-  '@rollup/rollup-darwin-arm64@4.22.0':
-    resolution: {integrity: sha512-ZWgARzhSKE+gVUX7QWaECoRQsPwaD8ZR0Oxb3aUpzdErTvlEadfQpORPXkKSdKbFci9v8MJfkTtoEHnnW9Ulng==}
+  '@rollup/rollup-darwin-arm64@4.22.4':
+    resolution: {integrity: sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==}
    cpu: [arm64]
    os: [darwin]

-  '@rollup/rollup-darwin-x64@4.22.0':
-    resolution: {integrity: sha512-h0ZAtOfHyio8Az6cwIGS+nHUfRMWBDO5jXB8PQCARVF6Na/G6XS2SFxDl8Oem+S5ZsHQgtsI7RT4JQnI1qrlaw==}
+  '@rollup/rollup-darwin-x64@4.22.4':
+    resolution: {integrity: sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==}
    cpu: [x64]
    os: [darwin]

-  '@rollup/rollup-linux-arm-gnueabihf@4.22.0':
-    resolution: {integrity: sha512-9pxQJSPwFsVi0ttOmqLY4JJ9pg9t1gKhK0JDbV1yUEETSx55fdyCjt39eBQ54OQCzAF0nVGO6LfEH1KnCPvelA==}
+  '@rollup/rollup-linux-arm-gnueabihf@4.22.4':
+    resolution: {integrity: sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==}
    cpu: [arm]
    os: [linux]

-  '@rollup/rollup-linux-arm-musleabihf@4.22.0':
-    resolution: {integrity: sha512-YJ5Ku5BmNJZb58A4qSEo3JlIG4d3G2lWyBi13ABlXzO41SsdnUKi3HQHe83VpwBVG4jHFTW65jOQb8qyoR+qzg==}
+  '@rollup/rollup-linux-arm-musleabihf@4.22.4':
+    resolution: {integrity: sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==}
    cpu: [arm]
    os: [linux]

-  '@rollup/rollup-linux-arm64-gnu@4.22.0':
-    resolution: {integrity: sha512-U4G4u7f+QCqHlVg1Nlx+qapZy+QoG+NV6ux+upo/T7arNGwKvKP2kmGM4W5QTbdewWFgudQxi3kDNST9GT1/mg==}
+  '@rollup/rollup-linux-arm64-gnu@4.22.4':
+    resolution: {integrity: sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==}
    cpu: [arm64]
    os: [linux]

-  '@rollup/rollup-linux-arm64-musl@4.22.0':
-    resolution: {integrity: sha512-aQpNlKmx3amwkA3a5J6nlXSahE1ijl0L9KuIjVOUhfOh7uw2S4piR3mtpxpRtbnK809SBtyPsM9q15CPTsY7HQ==}
+  '@rollup/rollup-linux-arm64-musl@4.22.4':
+    resolution: {integrity: sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==}
    cpu: [arm64]
    os: [linux]

-  '@rollup/rollup-linux-powerpc64le-gnu@4.22.0':
-    resolution: {integrity: sha512-9fx6Zj/7vve/Fp4iexUFRKb5+RjLCff6YTRQl4CoDhdMfDoobWmhAxQWV3NfShMzQk1Q/iCnageFyGfqnsmeqQ==}
+  '@rollup/rollup-linux-powerpc64le-gnu@4.22.4':
+    resolution: {integrity: sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==}
    cpu: [ppc64]
    os: [linux]

-  '@rollup/rollup-linux-riscv64-gnu@4.22.0':
-    resolution: {integrity: sha512-VWQiCcN7zBgZYLjndIEh5tamtnKg5TGxyZPWcN9zBtXBwfcGSZ5cHSdQZfQH/GB4uRxk0D3VYbOEe/chJhPGLQ==}
+  '@rollup/rollup-linux-riscv64-gnu@4.22.4':
+    resolution: {integrity: sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==}
    cpu: [riscv64]
    os: [linux]

-  '@rollup/rollup-linux-s390x-gnu@4.22.0':
-    resolution: {integrity: sha512-EHmPnPWvyYqncObwqrosb/CpH3GOjE76vWVs0g4hWsDRUVhg61hBmlVg5TPXqF+g+PvIbqkC7i3h8wbn4Gp2Fg==}
+  '@rollup/rollup-linux-s390x-gnu@4.22.4':
+    resolution: {integrity: sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==}
    cpu: [s390x]
    os: [linux]

-  '@rollup/rollup-linux-x64-gnu@4.22.0':
-    resolution: {integrity: sha512-tsSWy3YQzmpjDKnQ1Vcpy3p9Z+kMFbSIesCdMNgLizDWFhrLZIoN21JSq01g+MZMDFF+Y1+4zxgrlqPjid5ohg==}
+  '@rollup/rollup-linux-x64-gnu@4.22.4':
+    resolution: {integrity: sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==}
    cpu: [x64]
    os: [linux]

-  '@rollup/rollup-linux-x64-musl@4.22.0':
-    resolution: {integrity: sha512-anr1Y11uPOQrpuU8XOikY5lH4Qu94oS6j0xrulHk3NkLDq19MlX8Ng/pVipjxBJ9a2l3+F39REZYyWQFkZ4/fw==}
+  '@rollup/rollup-linux-x64-musl@4.22.4':
+    resolution: {integrity: sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==}
    cpu: [x64]
    os: [linux]

-  '@rollup/rollup-win32-arm64-msvc@4.22.0':
-    resolution: {integrity: sha512-7LB+Bh+Ut7cfmO0m244/asvtIGQr5pG5Rvjz/l1Rnz1kDzM02pSX9jPaS0p+90H5I1x4d1FkCew+B7MOnoatNw==}
+  '@rollup/rollup-win32-arm64-msvc@4.22.4':
+    resolution: {integrity: sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==}
    cpu: [arm64]
    os: [win32]

-  '@rollup/rollup-win32-ia32-msvc@4.22.0':
-    resolution: {integrity: sha512-+3qZ4rer7t/QsC5JwMpcvCVPRcJt1cJrYS/TMJZzXIJbxWFQEVhrIc26IhB+5Z9fT9umfVc+Es2mOZgl+7jdJQ==}
+  '@rollup/rollup-win32-ia32-msvc@4.22.4':
+    resolution: {integrity: sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==}
    cpu: [ia32]
    os: [win32]

-  '@rollup/rollup-win32-x64-msvc@4.22.0':
-    resolution: {integrity: sha512-YdicNOSJONVx/vuPkgPTyRoAPx3GbknBZRCOUkK84FJ/YTfs/F0vl/YsMscrB6Y177d+yDRcj+JWMPMCgshwrA==}
+  '@rollup/rollup-win32-x64-msvc@4.22.4':
+    resolution: {integrity: sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==}
    cpu: [x64]
    os: [win32]

@@ -1285,6 +1288,9 @@ packages:
  '@types/react-dom@18.3.0':
    resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}

+  '@types/react-slick@0.23.13':
+    resolution: {integrity: sha512-bNZfDhe/L8t5OQzIyhrRhBr/61pfBcWaYJoq6UDqFtv5LMwfg4NsVDD2J8N01JqdAdxLjOt66OZEp6PX+dGs/A==}
+
  '@types/react@18.3.8':
    resolution: {integrity: sha512-syBUrW3/XpnW4WJ41Pft+I+aPoDVbrBVQGEnbD7NijDGlVC+8gV/XKRY+7vMDlfPpbwYt0l1vd/Sj8bJGMbs9Q==}

@@ -1358,8 +1364,8 @@ packages:
  argparse@2.0.1:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}

-  aria-query@5.3.1:
-    resolution: {integrity: sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==}
+  aria-query@5.3.2:
+    resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
    engines: {node: '>= 0.4'}

  array-iterate@2.0.1:
@@ -1445,8 +1451,8 @@ packages:
  camelize@1.0.1:
    resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}

-  caniuse-lite@1.0.30001662:
-    resolution: {integrity: sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==}
+  caniuse-lite@1.0.30001663:
+    resolution: {integrity: sha512-o9C3X27GLKbLeTYZ6HBOLU1tsAcBZsLis28wrVzddShCS16RujjHp9GDHKZqrB3meE0YjhawvMFsGb/igqiPzA==}

  ccount@2.0.1:
    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
@@ -1716,8 +1722,8 @@ packages:
  ee-first@1.1.1:
    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}

-  electron-to-chromium@1.5.25:
-    resolution: {integrity: sha512-kMb204zvK3PsSlgvvwzI3wBIcAw15tRkYk+NQdsjdDtcQWTp2RABbMQ9rUBy8KNEOM+/E6ep+XC3AykiWZld4g==}
+  electron-to-chromium@1.5.27:
+    resolution: {integrity: sha512-o37j1vZqCoEgBuWWXLHQgTN/KDKe7zwpiY5CPeq2RvUqOyJw9xnrULzZAEVQ5p4h+zjMk7hgtOoPdnLxr7m/jw==}

  email-addresses@5.0.0:
    resolution: {integrity: sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw==}
@@ -2084,8 +2090,8 @@ packages:
    resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
    hasBin: true

-  jose@5.9.2:
-    resolution: {integrity: sha512-ILI2xx/I57b20sd7rHZvgiiQrmp2mcotwsAH+5ajbpFQbrYVQdNHYlQhoA5cFb78CgtBOxtC05TeA+mcgkuCqQ==}
+  jose@5.9.3:
+    resolution: {integrity: sha512-egLIoYSpcd+QUF+UHgobt5YzI2Pkw/H39ou9suW687MY6PmCwPmkNV/4TNjn1p2tX5xO3j0d0sq5hiYE24bSlg==}

  js-cookie@3.0.5:
    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
@@ -2433,8 +2439,8 @@ packages:
    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
    engines: {node: '>=0.10.0'}

-  npm-check-updates@17.1.2:
-    resolution: {integrity: sha512-k3osAbCNXIXqC7QAuF2uRHsKtTUS50KhOW1VAojRHlLdZRh/5EYfduvnVPGDWsbQXFakbSrSbWDdV8qIvDSUtA==}
+  npm-check-updates@17.1.3:
+    resolution: {integrity: sha512-4uDLBWPuDHT5KLieIJ20FoAB8yqJejmupI42wPyfObgQOBbPAikQSwT73afDwREvhuxYrRDqlRvxTMSfvO+L8A==}
    engines: {node: ^18.18.0 || >=20.0.0, npm: '>=8.12.1'}
    hasBin: true

@@ -2463,8 +2469,8 @@ packages:
  oniguruma-to-js@0.4.3:
    resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==}

-  openai@4.62.1:
-    resolution: {integrity: sha512-Aa6i4oBR1tV8E2d2p3MvXg57X98i8gZtHq4bQNX274qLKZVX7PXXq5P1FMonTXOrX3zwvkqN1iNccn3XK3CwVg==}
+  openai@4.63.0:
+    resolution: {integrity: sha512-Y9V4KODbmrOpqiOmCDVnPfMxMqKLOx8Hwcdn/r8mePq4yv7FSXGnxCs8/jZKO7zCB/IVPWihpJXwJNAIOEiZ2g==}
    hasBin: true
    peerDependencies:
      zod: ^3.23.8
@@ -2565,13 +2571,13 @@ packages:
    resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
    engines: {node: '>=8'}

-  playwright-core@1.47.1:
-    resolution: {integrity: sha512-i1iyJdLftqtt51mEk6AhYFaAJCDx0xQ/O5NU8EKaWFgMjItPVma542Nh/Aq8aLCjIJSzjaiEQGW/nyqLkGF1OQ==}
+  playwright-core@1.47.2:
+    resolution: {integrity: sha512-3JvMfF+9LJfe16l7AbSmU555PaTl2tPyQsVInqm3id16pdDfvZ8TTZ/pyzmkbDrZTQefyzU7AIHlZqQnxpqHVQ==}
    engines: {node: '>=18'}
    hasBin: true

-  playwright@1.47.1:
-    resolution: {integrity: sha512-SUEKi6947IqYbKxRiqnbUobVZY4bF1uu+ZnZNJX9DfU1tlf2UhWfvVjLf01pQx9URsOr18bFVUKXmanYWhbfkw==}
+  playwright@1.47.2:
+    resolution: {integrity: sha512-nx1cLMmQWqmA3UsnjaaokyoUpdVaaDhJhMoxX2qj3McpjnsqFHs516QAKYhqHAgOP+oCFTEOCOAaD1RgD/RQfA==}
    engines: {node: '>=18'}
    hasBin: true

@@ -2826,8 +2832,8 @@ packages:
  roadmap-renderer@1.0.6:
    resolution: {integrity: sha512-IQejjIfr9RIvesNwp3SyhEq1DMQ2RdJfJhgsb1AyPuKXsfJgOG8F++Cz1p3SIcY0bnB57Q16Ke2VJLjiUVwI3Q==}

-  rollup@4.22.0:
-    resolution: {integrity: sha512-W21MUIFPZ4+O2Je/EU+GP3iz7PH4pVPUXSbEZdatQnxo29+3rsUjgrJmzuAZU24z7yRAnFN6ukxeAhZh/c7hzg==}
+  rollup@4.22.4:
+    resolution: {integrity: sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==}
    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
    hasBin: true

@@ -2866,8 +2872,8 @@ packages:
    engines: {node: '>=10'}
    hasBin: true

-  send@0.18.0:
-    resolution: {integrity: sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==}
+  send@0.19.0:
+    resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
    engines: {node: '>= 0.8.0'}

  server-destroy@1.0.1:
@@ -2988,8 +2994,8 @@ packages:
  tailwind-merge@2.5.2:
    resolution: {integrity: sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==}

-  tailwindcss@3.4.12:
-    resolution: {integrity: sha512-Htf/gHj2+soPb9UayUNci/Ja3d8pTmu9ONTfh4QY8r3MATTZOzmv6UYWF7ZwikEIC8okpfqmGqrmDehua8mF8w==}
+  tailwindcss@3.4.13:
+    resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==}
    engines: {node: '>=14.0.0'}
    hasBin: true

@@ -3136,8 +3142,8 @@ packages:
  vfile@6.0.3:
    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}

-  vite@5.4.6:
-    resolution: {integrity: sha512-IeL5f8OO5nylsgzd9tq4qD2QqI0k2CQLGrWD0rCN0EQJZpBK5vJAx0I+GDkMOXxQX/OfFHMuLIx6ddAxGX/k+Q==}
+  vite@5.4.7:
+    resolution: {integrity: sha512-5l2zxqMEPVENgvzTuBpHer2awaetimj2BGkhBPdnwKbPNOlHsODU+oiazEZzLK7KhAnOrO+XGYJYn4ZlUhDtDQ==}
    engines: {node: ^18.0.0 || >=20.0.0}
    hasBin: true
    peerDependencies:
@@ -3306,10 +3312,10 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@astrojs/node@8.3.3(astro@4.15.8(@types/node@18.19.50)(rollup@4.22.0)(typescript@5.6.2))':
+  '@astrojs/node@8.3.4(astro@4.15.8(@types/node@18.19.50)(rollup@4.22.4)(typescript@5.6.2))':
    dependencies:
-      astro: 4.15.8(@types/node@18.19.50)(rollup@4.22.0)(typescript@5.6.2)
-      send: 0.18.0
+      astro: 4.15.8(@types/node@18.19.50)(rollup@4.22.4)(typescript@5.6.2)
+      send: 0.19.0
      server-destroy: 1.0.1
    transitivePeerDependencies:
      - supports-color
@@ -3318,11 +3324,11 @@ snapshots:
    dependencies:
      prismjs: 1.29.0

-  '@astrojs/react@3.6.2(@types/react-dom@18.3.0)(@types/react@18.3.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.4.6(@types/node@18.19.50))':
+  '@astrojs/react@3.6.2(@types/react-dom@18.3.0)(@types/react@18.3.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(vite@5.4.7(@types/node@18.19.50))':
    dependencies:
      '@types/react': 18.3.8
      '@types/react-dom': 18.3.0
-      '@vitejs/plugin-react': 4.3.1(vite@5.4.6(@types/node@18.19.50))
+      '@vitejs/plugin-react': 4.3.1(vite@5.4.7(@types/node@18.19.50))
      react: 18.3.1
      react-dom: 18.3.1(react@18.3.1)
      ultrahtml: 1.5.3
@@ -3336,13 +3342,13 @@ snapshots:
      stream-replace-string: 2.0.0
      zod: 3.23.8

-  '@astrojs/tailwind@5.1.1(astro@4.15.8(@types/node@18.19.50)(rollup@4.22.0)(typescript@5.6.2))(tailwindcss@3.4.12)':
+  '@astrojs/tailwind@5.1.1(astro@4.15.8(@types/node@18.19.50)(rollup@4.22.4)(typescript@5.6.2))(tailwindcss@3.4.13)':
    dependencies:
-      astro: 4.15.8(@types/node@18.19.50)(rollup@4.22.0)(typescript@5.6.2)
+      astro: 4.15.8(@types/node@18.19.50)(rollup@4.22.4)(typescript@5.6.2)
      autoprefixer: 10.4.20(postcss@8.4.47)
      postcss: 8.4.47
      postcss-load-config: 4.0.2(postcss@8.4.47)
-      tailwindcss: 3.4.12
+      tailwindcss: 3.4.13
    transitivePeerDependencies:
      - ts-node

@@ -3859,9 +3865,9 @@ snapshots:
  '@pkgjs/parseargs@0.11.0':
    optional: true

-  '@playwright/test@1.47.1':
+  '@playwright/test@1.47.2':
    dependencies:
-      playwright: 1.47.1
+      playwright: 1.47.2

  '@reactflow/background@11.3.14(@types/react@18.3.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
    dependencies:
@@ -3992,60 +3998,60 @@ snapshots:
      '@resvg/resvg-js-win32-ia32-msvc': 2.6.2
      '@resvg/resvg-js-win32-x64-msvc': 2.6.2

-  '@rollup/pluginutils@5.1.0(rollup@4.22.0)':
+  '@rollup/pluginutils@5.1.1(rollup@4.22.4)':
    dependencies:
      '@types/estree': 1.0.6
      estree-walker: 2.0.2
      picomatch: 2.3.1
    optionalDependencies:
-      rollup: 4.22.0
+      rollup: 4.22.4

-  '@rollup/rollup-android-arm-eabi@4.22.0':
+  '@rollup/rollup-android-arm-eabi@4.22.4':
    optional: true

-  '@rollup/rollup-android-arm64@4.22.0':
+  '@rollup/rollup-android-arm64@4.22.4':
    optional: true

-  '@rollup/rollup-darwin-arm64@4.22.0':
+  '@rollup/rollup-darwin-arm64@4.22.4':
    optional: true

-  '@rollup/rollup-darwin-x64@4.22.0':
+  '@rollup/rollup-darwin-x64@4.22.4':
    optional: true

-  '@rollup/rollup-linux-arm-gnueabihf@4.22.0':
+  '@rollup/rollup-linux-arm-gnueabihf@4.22.4':
    optional: true

-  '@rollup/rollup-linux-arm-musleabihf@4.22.0':
+  '@rollup/rollup-linux-arm-musleabihf@4.22.4':
    optional: true

-  '@rollup/rollup-linux-arm64-gnu@4.22.0':
+  '@rollup/rollup-linux-arm64-gnu@4.22.4':
    optional: true

-  '@rollup/rollup-linux-arm64-musl@4.22.0':
+  '@rollup/rollup-linux-arm64-musl@4.22.4':
    optional: true

-  '@rollup/rollup-linux-powerpc64le-gnu@4.22.0':
+  '@rollup/rollup-linux-powerpc64le-gnu@4.22.4':
    optional: true

-  '@rollup/rollup-linux-riscv64-gnu@4.22.0':
+  '@rollup/rollup-linux-riscv64-gnu@4.22.4':
    optional: true

-  '@rollup/rollup-linux-s390x-gnu@4.22.0':
+  '@rollup/rollup-linux-s390x-gnu@4.22.4':
    optional: true

-  '@rollup/rollup-linux-x64-gnu@4.22.0':
+  '@rollup/rollup-linux-x64-gnu@4.22.4':
    optional: true

-  '@rollup/rollup-linux-x64-musl@4.22.0':
+  '@rollup/rollup-linux-x64-musl@4.22.4':
    optional: true

-  '@rollup/rollup-win32-arm64-msvc@4.22.0':
+  '@rollup/rollup-win32-arm64-msvc@4.22.4':
    optional: true

-  '@rollup/rollup-win32-ia32-msvc@4.22.0':
+  '@rollup/rollup-win32-ia32-msvc@4.22.4':
    optional: true

-  '@rollup/rollup-win32-x64-msvc@4.22.0':
+  '@rollup/rollup-win32-x64-msvc@4.22.4':
    optional: true

  '@shikijs/core@1.18.0':
@@ -4080,13 +4086,13 @@ snapshots:
      fflate: 0.7.4
      string.prototype.codepointat: 0.2.1

-  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.12)':
+  '@tailwindcss/typography@0.5.15(tailwindcss@3.4.13)':
    dependencies:
      lodash.castarray: 4.4.0
      lodash.isplainobject: 4.0.6
      lodash.merge: 4.6.2
      postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.12
+      tailwindcss: 3.4.13

  '@tybys/wasm-util@0.9.0':
    dependencies:
@@ -4286,6 +4292,10 @@ snapshots:
    dependencies:
      '@types/react': 18.3.8

+  '@types/react-slick@0.23.13':
+    dependencies:
+      '@types/react': 18.3.8
+
  '@types/react@18.3.8':
    dependencies:
      '@types/prop-types': 15.7.13
@@ -4301,14 +4311,14 @@ snapshots:

  '@ungap/structured-clone@1.2.0': {}

-  '@vitejs/plugin-react@4.3.1(vite@5.4.6(@types/node@18.19.50))':
+  '@vitejs/plugin-react@4.3.1(vite@5.4.7(@types/node@18.19.50))':
    dependencies:
      '@babel/core': 7.25.2
      '@babel/plugin-transform-react-jsx-self': 7.24.7(@babel/core@7.25.2)
      '@babel/plugin-transform-react-jsx-source': 7.24.7(@babel/core@7.25.2)
      '@types/babel__core': 7.20.5
      react-refresh: 0.14.2
-      vite: 5.4.6(@types/node@18.19.50)
+      vite: 5.4.7(@types/node@18.19.50)
    transitivePeerDependencies:
      - supports-color

@@ -4355,7 +4365,7 @@ snapshots:

  argparse@2.0.1: {}

-  aria-query@5.3.1: {}
+  aria-query@5.3.2: {}

  array-iterate@2.0.1: {}

@@ -4365,7 +4375,7 @@ snapshots:

  array-uniq@1.0.3: {}

-  astro@4.15.8(@types/node@18.19.50)(rollup@4.22.0)(typescript@5.6.2):
+  astro@4.15.8(@types/node@18.19.50)(rollup@4.22.4)(typescript@5.6.2):
    dependencies:
      '@astrojs/compiler': 2.10.3
      '@astrojs/internal-helpers': 0.4.1
@@ -4375,11 +4385,11 @@ snapshots:
      '@babel/plugin-transform-react-jsx': 7.25.2(@babel/core@7.25.2)
      '@babel/types': 7.25.6
      '@oslojs/encoding': 0.4.1
-      '@rollup/pluginutils': 5.1.0(rollup@4.22.0)
+      '@rollup/pluginutils': 5.1.1(rollup@4.22.4)
      '@types/babel__core': 7.20.5
      '@types/cookie': 0.6.0
      acorn: 8.12.1
-      aria-query: 5.3.1
+      aria-query: 5.3.2
      axobject-query: 4.1.0
      boxen: 7.1.1
      ci-info: 4.0.0
@@ -4424,8 +4434,8 @@ snapshots:
      tsconfck: 3.1.3(typescript@5.6.2)
      unist-util-visit: 5.0.0
      vfile: 6.0.3
-      vite: 5.4.6(@types/node@18.19.50)
-      vitefu: 1.0.2(vite@5.4.6(@types/node@18.19.50))
+      vite: 5.4.7(@types/node@18.19.50)
+      vitefu: 1.0.2(vite@5.4.7(@types/node@18.19.50))
      which-pm: 3.0.0
      xxhash-wasm: 1.0.2
      yargs-parser: 21.1.1
@@ -4454,7 +4464,7 @@ snapshots:
  autoprefixer@10.4.20(postcss@8.4.47):
    dependencies:
      browserslist: 4.23.3
-      caniuse-lite: 1.0.30001662
+      caniuse-lite: 1.0.30001663
      fraction.js: 4.3.7
      normalize-range: 0.1.2
      picocolors: 1.1.0
@@ -4501,8 +4511,8 @@ snapshots:

  browserslist@4.23.3:
    dependencies:
-      caniuse-lite: 1.0.30001662
-      electron-to-chromium: 1.5.25
+      caniuse-lite: 1.0.30001663
+      electron-to-chromium: 1.5.27
      node-releases: 2.0.18
      update-browserslist-db: 1.1.0(browserslist@4.23.3)

@@ -4512,7 +4522,7 @@ snapshots:

  camelize@1.0.1: {}

-  caniuse-lite@1.0.30001662: {}
+  caniuse-lite@1.0.30001663: {}

  ccount@2.0.1: {}

@@ -4740,7 +4750,7 @@ snapshots:

  ee-first@1.1.1: {}

-  electron-to-chromium@1.5.25: {}
+  electron-to-chromium@1.5.27: {}

  email-addresses@5.0.0: {}

@@ -5168,7 +5178,7 @@ snapshots:

  jiti@1.21.6: {}

-  jose@5.9.2: {}
+  jose@5.9.3: {}

  js-cookie@3.0.5: {}

@@ -5663,7 +5673,7 @@ snapshots:

  normalize-range@0.1.2: {}

-  npm-check-updates@17.1.2: {}
+  npm-check-updates@17.1.3: {}

  nth-check@2.1.1:
    dependencies:
@@ -5689,7 +5699,7 @@ snapshots:
    dependencies:
      regex: 4.3.2

-  openai@4.62.1(zod@3.23.8):
+  openai@4.63.0(zod@3.23.8):
    dependencies:
      '@types/node': 18.19.50
      '@types/node-fetch': 2.6.11
@@ -5791,11 +5801,11 @@ snapshots:
    dependencies:
      find-up: 4.1.0

-  playwright-core@1.47.1: {}
+  playwright-core@1.47.2: {}

-  playwright@1.47.1:
+  playwright@1.47.2:
    dependencies:
-      playwright-core: 1.47.1
+      playwright-core: 1.47.2
    optionalDependencies:
      fsevents: 2.3.2

@@ -6059,26 +6069,26 @@ snapshots:

  roadmap-renderer@1.0.6: {}

-  rollup@4.22.0:
+  rollup@4.22.4:
    dependencies:
      '@types/estree': 1.0.5
    optionalDependencies:
-      '@rollup/rollup-android-arm-eabi': 4.22.0
-      '@rollup/rollup-android-arm64': 4.22.0
-      '@rollup/rollup-darwin-arm64': 4.22.0
-      '@rollup/rollup-darwin-x64': 4.22.0
-      '@rollup/rollup-linux-arm-gnueabihf': 4.22.0
-      '@rollup/rollup-linux-arm-musleabihf': 4.22.0
-      '@rollup/rollup-linux-arm64-gnu': 4.22.0
-      '@rollup/rollup-linux-arm64-musl': 4.22.0
-      '@rollup/rollup-linux-powerpc64le-gnu': 4.22.0
-      '@rollup/rollup-linux-riscv64-gnu': 4.22.0
-      '@rollup/rollup-linux-s390x-gnu': 4.22.0
-      '@rollup/rollup-linux-x64-gnu': 4.22.0
-      '@rollup/rollup-linux-x64-musl': 4.22.0
-      '@rollup/rollup-win32-arm64-msvc': 4.22.0
-      '@rollup/rollup-win32-ia32-msvc': 4.22.0
-      '@rollup/rollup-win32-x64-msvc': 4.22.0
+      '@rollup/rollup-android-arm-eabi': 4.22.4
+      '@rollup/rollup-android-arm64': 4.22.4
+      '@rollup/rollup-darwin-arm64': 4.22.4
+      '@rollup/rollup-darwin-x64': 4.22.4
+      '@rollup/rollup-linux-arm-gnueabihf': 4.22.4
+      '@rollup/rollup-linux-arm-musleabihf': 4.22.4
+      '@rollup/rollup-linux-arm64-gnu': 4.22.4
+      '@rollup/rollup-linux-arm64-musl': 4.22.4
+      '@rollup/rollup-linux-powerpc64le-gnu': 4.22.4
+      '@rollup/rollup-linux-riscv64-gnu': 4.22.4
+      '@rollup/rollup-linux-s390x-gnu': 4.22.4
+      '@rollup/rollup-linux-x64-gnu': 4.22.4
+      '@rollup/rollup-linux-x64-musl': 4.22.4
+      '@rollup/rollup-win32-arm64-msvc': 4.22.4
+      '@rollup/rollup-win32-ia32-msvc': 4.22.4
+      '@rollup/rollup-win32-x64-msvc': 4.22.4
      fsevents: 2.3.3

  run-parallel@1.2.0:
@@ -6123,7 +6133,7 @@ snapshots:

  semver@7.6.3: {}

-  send@0.18.0:
+  send@0.19.0:
    dependencies:
      debug: 2.6.9
      depd: 2.0.0
@@ -6278,7 +6288,7 @@ snapshots:

  tailwind-merge@2.5.2: {}

-  tailwindcss@3.4.12:
+  tailwindcss@3.4.13:
    dependencies:
      '@alloc/quick-lru': 5.2.0
      arg: 5.0.2
@@ -6452,18 +6462,18 @@ snapshots:
      '@types/unist': 3.0.3
      vfile-message: 4.0.2

-  vite@5.4.6(@types/node@18.19.50):
+  vite@5.4.7(@types/node@18.19.50):
    dependencies:
      esbuild: 0.21.5
      postcss: 8.4.47
-      rollup: 4.22.0
+      rollup: 4.22.4
    optionalDependencies:
      '@types/node': 18.19.50
      fsevents: 2.3.3

-  vitefu@1.0.2(vite@5.4.6(@types/node@18.19.50)):
+  vitefu@1.0.2(vite@5.4.7(@types/node@18.19.50)):
    optionalDependencies:
-      vite: 5.4.6(@types/node@18.19.50)
+      vite: 5.4.7(@types/node@18.19.50)

  web-namespaces@2.0.1: {}

--- a/public/images/gifs/party-popper.gif
+++ b/public/images/gifs/party-popper.gif
--- a/public/images/gifs/rocket.gif
+++ b/public/images/gifs/rocket.gif
--- a/public/images/gifs/star.gif
+++ b/public/images/gifs/star.gif
--- a/public/images/gifs/starstruck.gif
+++ b/public/images/gifs/starstruck.gif
--- a/public/images/gifs/sunglasses.gif
+++ b/public/images/gifs/sunglasses.gif
--- a/public/pdfs/roadmaps/ai-engineer.pdf
+++ b/public/pdfs/roadmaps/ai-engineer.pdf
--- a/public/roadmap-content/ai-engineer.json
+++ b/public/roadmap-content/ai-engineer.json
@@ -0,0 +1,582 @@
+{
+  "_hYN0gEi9BL24nptEtXWU": {
+    "title": "Introduction",
+    "description": "",
+    "links": []
+  },
+  "GN6SnI7RXIeW8JeD-qORW": {
+    "title": "What is an AI Engineer?",
+    "description": "",
+    "links": []
+  },
+  "jSZ1LhPdhlkW-9QJhIvFs": {
+    "title": "AI Engineer vs ML Engineer",
+    "description": "",
+    "links": []
+  },
+  "wf2BSyUekr1S1q6l8kyq6": {
+    "title": "LLMs",
+    "description": "",
+    "links": []
+  },
+  "KWjD4xEPhOOYS51dvRLd2": {
+    "title": "Inference",
+    "description": "",
+    "links": []
+  },
+  "xostGgoaYkqMO28iN2gx8": {
+    "title": "Training",
+    "description": "",
+    "links": []
+  },
+  "XyEp6jnBSpCxMGwALnYfT": {
+    "title": "Embeddings",
+    "description": "",
+    "links": []
+  },
+  "LnQ2AatMWpExUHcZhDIPd": {
+    "title": "Vector Databases",
+    "description": "",
+    "links": []
+  },
+  "9JwWIK0Z2MK8-6EQQJsCO": {
+    "title": "RAG",
+    "description": "",
+    "links": []
+  },
+  "Dc15ayFlzqMF24RqIF_-X": {
+    "title": "Prompt Engineering",
+    "description": "",
+    "links": []
+  },
+  "9XCxilAQ7FRet7lHQr1gE": {
+    "title": "AI Agents",
+    "description": "",
+    "links": []
+  },
+  "5QdihE1lLpMc3DFrGy46M": {
+    "title": "AI vs AGI",
+    "description": "",
+    "links": []
+  },
+  "qJVgKe9uBvXc-YPfvX_Y7": {
+    "title": "Impact on Product Development",
+    "description": "",
+    "links": []
+  },
+  "K9EiuFgPBFgeRxY4wxAmb": {
+    "title": "Roles and Responsiblities",
+    "description": "",
+    "links": []
+  },
+  "d7fzv_ft12EopsQdmEsel": {
+    "title": "Pre-trained Models",
+    "description": "",
+    "links": []
+  },
+  "1Ga6DbOPc6Crz7ilsZMYy": {
+    "title": "Benefits of Pre-trained Models",
+    "description": "",
+    "links": []
+  },
+  "MXqbQGhNM3xpXlMC2ib_6": {
+    "title": "Limitations and Considerations",
+    "description": "",
+    "links": []
+  },
+  "2WbVpRLqwi3Oeqk1JPui4": {
+    "title": "Open AI Models",
+    "description": "",
+    "links": []
+  },
+  "vvpYkmycH0_W030E-L12f": {
+    "title": "Capabilities / Context Length",
+    "description": "",
+    "links": []
+  },
+  "LbB2PeytxRSuU07Bk0KlJ": {
+    "title": "Cut-off Dates / Knowledge",
+    "description": "",
+    "links": []
+  },
+  "hy6EyKiNxk1x84J63dhez": {
+    "title": "Anthropic's Claude",
+    "description": "",
+    "links": []
+  },
+  "oe8E6ZIQWuYvHVbYJHUc1": {
+    "title": "Google's Gemini",
+    "description": "",
+    "links": []
+  },
+  "3PQVZbcr4neNMRr6CuNzS": {
+    "title": "Azure AI",
+    "description": "",
+    "links": []
+  },
+  "OkYO-aSPiuVYuLXHswBCn": {
+    "title": "AWS Sagemaker",
+    "description": "",
+    "links": []
+  },
+  "8XjkRqHOdyH-DbXHYiBEt": {
+    "title": "Hugging Face Models",
+    "description": "",
+    "links": []
+  },
+  "n-Ud2dXkqIzK37jlKItN4": {
+    "title": "Mistral AI",
+    "description": "",
+    "links": []
+  },
+  "a7qsvoauFe5u953I699ps": {
+    "title": "Cohere",
+    "description": "",
+    "links": []
+  },
+  "5ShWZl1QUqPwO-NRGN85V": {
+    "title": "OpenAI Models",
+    "description": "",
+    "links": []
+  },
+  "zdeuA4GbdBl2DwKgiOA4G": {
+    "title": "OpenAI API",
+    "description": "",
+    "links": []
+  },
+  "_bPTciEA1GT1JwfXim19z": {
+    "title": "Chat Completions API",
+    "description": "",
+    "links": []
+  },
+  "9-5DYeOnKJq9XvEMWP45A": {
+    "title": "Writing Prompts",
+    "description": "",
+    "links": []
+  },
+  "nyBgEHvUhwF-NANMwkRJW": {
+    "title": "Open AI Playground",
+    "description": "",
+    "links": []
+  },
+  "15XOFdVp0IC-kLYPXUJWh": {
+    "title": "Fine-tuning",
+    "description": "",
+    "links": []
+  },
+  "qzvp6YxWDiGakA2mtspfh": {
+    "title": "Maximum Tokens",
+    "description": "",
+    "links": []
+  },
+  "FjV3oD7G2Ocq5HhUC17iH": {
+    "title": "Token Counting",
+    "description": "",
+    "links": []
+  },
+  "DZPM9zjCbYYWBPLmQImxQ": {
+    "title": "Pricing Considerations",
+    "description": "",
+    "links": []
+  },
+  "8ndKHDJgL_gYwaXC7XMer": {
+    "title": "AI Safety and Ethics",
+    "description": "",
+    "links": []
+  },
+  "cUyLT6ctYQ1pgmodCKREq": {
+    "title": "Prompt Injection Attacks",
+    "description": "",
+    "links": []
+  },
+  "lhIU0ulpvDAn1Xc3ooYz_": {
+    "title": "Bias and Fareness",
+    "description": "",
+    "links": []
+  },
+  "sWBT-j2cRuFqRFYtV_5TK": {
+    "title": "Security and Privacy Concerns",
+    "description": "",
+    "links": []
+  },
+  "Pt-AJmSJrOxKvolb5_HEv": {
+    "title": "Conducting adversarial testing",
+    "description": "",
+    "links": []
+  },
+  "ljZLa3yjQpegiZWwtnn_q": {
+    "title": "OpenAI Moderation API",
+    "description": "",
+    "links": []
+  },
+  "4Q5x2VCXedAWISBXUIyin": {
+    "title": "Adding end-user IDs in prompts",
+    "description": "",
+    "links": []
+  },
+  "qmx6OHqx4_0JXVIv8dASp": {
+    "title": "Robust prompt engineering",
+    "description": "",
+    "links": []
+  },
+  "t1SObMWkDZ1cKqNNlcd9L": {
+    "title": "Know your Customers / Usecases",
+    "description": "",
+    "links": []
+  },
+  "ONLDyczNacGVZGojYyJrU": {
+    "title": "Constraining outputs and inputs",
+    "description": "",
+    "links": []
+  },
+  "a_3SabylVqzzOyw3tZN5f": {
+    "title": "OpenSource AI",
+    "description": "",
+    "links": []
+  },
+  "RBwGsq9DngUsl8PrrCbqx": {
+    "title": "Open vs Closed Source Models",
+    "description": "",
+    "links": []
+  },
+  "97eu-XxYUH9pYbD_KjAtA": {
+    "title": "Popular Open Source Models",
+    "description": "",
+    "links": []
+  },
+  "v99C5Bml2a6148LCJ9gy9": {
+    "title": "Hugging Face",
+    "description": "",
+    "links": []
+  },
+  "YLOdOvLXa5Fa7_mmuvKEi": {
+    "title": "Hugging Face Hub",
+    "description": "",
+    "links": []
+  },
+  "YKIPOiSj_FNtg0h8uaSMq": {
+    "title": "Hugging Face Tasks",
+    "description": "",
+    "links": []
+  },
+  "3kRTzlLNBnXdTsAEXVu_M": {
+    "title": "Inference SDK",
+    "description": "",
+    "links": []
+  },
+  "bGLrbpxKgENe2xS1eQtdh": {
+    "title": "Transformers.js",
+    "description": "",
+    "links": []
+  },
+  "rTT2UnvqFO3GH6ThPLEjO": {
+    "title": "Ollama",
+    "description": "",
+    "links": []
+  },
+  "ro3vY_sp6xMQ-hfzO-rc1": {
+    "title": "Ollama Models",
+    "description": "",
+    "links": []
+  },
+  "TsG_I7FL-cOCSw8gvZH3r": {
+    "title": "Ollama SDK",
+    "description": "",
+    "links": []
+  },
+  "--ig0Ume_BnXb9K2U7HJN": {
+    "title": "What are Embeddings",
+    "description": "",
+    "links": []
+  },
+  "eMfcyBxnMY_l_5-8eg6sD": {
+    "title": "Semantic Search",
+    "description": "",
+    "links": []
+  },
+  "HQe9GKy3p0kTUPxojIfSF": {
+    "title": "Recommendation Systems",
+    "description": "",
+    "links": []
+  },
+  "AglWJ7gb9rTT2rMkstxtk": {
+    "title": "Anomaly Detection",
+    "description": "",
+    "links": []
+  },
+  "06Xta-OqSci05nV2QMFdF": {
+    "title": "Data Classification",
+    "description": "",
+    "links": []
+  },
+  "l6priWeJhbdUD5tJ7uHyG": {
+    "title": "Open AI Embeddings API",
+    "description": "",
+    "links": []
+  },
+  "y0qD5Kb4Pf-ymIwW-tvhX": {
+    "title": "Open AI Embedding Models",
+    "description": "",
+    "links": []
+  },
+  "4GArjDYipit4SLqKZAWDf": {
+    "title": "Pricing Considerations",
+    "description": "",
+    "links": []
+  },
+  "apVYIV4EyejPft25oAvdI": {
+    "title": "Open-Source Embeddings",
+    "description": "",
+    "links": []
+  },
+  "ZV_V6sqOnRodgaw4mzokC": {
+    "title": "Sentence Transformers",
+    "description": "",
+    "links": []
+  },
+  "dLEg4IA3F5jgc44Bst9if": {
+    "title": "Models on Hugging Face",
+    "description": "",
+    "links": []
+  },
+  "tt9u3oFlsjEMfPyojuqpc": {
+    "title": "Vector Databases",
+    "description": "",
+    "links": []
+  },
+  "WcjX6p-V-Rdd77EL8Ega9": {
+    "title": "Purpose and Functionality",
+    "description": "",
+    "links": []
+  },
+  "dSd2C9lNl-ymmCRT9_ZC3": {
+    "title": "Chroma",
+    "description": "",
+    "links": []
+  },
+  "_Cf7S1DCvX7p1_3-tP3C3": {
+    "title": "Pinecone",
+    "description": "",
+    "links": []
+  },
+  "VgUnrZGKVjAAO4n_llq5-": {
+    "title": "Weaviate",
+    "description": "",
+    "links": []
+  },
+  "JurLbOO1Z8r6C3yUqRNwf": {
+    "title": "FAISS",
+    "description": "",
+    "links": []
+  },
+  "rjaCNT3Li45kwu2gXckke": {
+    "title": "LanceDB",
+    "description": "",
+    "links": []
+  },
+  "DwOAL5mOBgBiw-EQpAzQl": {
+    "title": "Qdrant",
+    "description": "",
+    "links": []
+  },
+  "9kT7EEQsbeD2WDdN9ADx7": {
+    "title": "Supabase",
+    "description": "",
+    "links": []
+  },
+  "j6bkm0VUgLkHdMDDJFiMC": {
+    "title": "MongoDB Atlas",
+    "description": "",
+    "links": []
+  },
+  "5TQnO9B4_LTHwqjI7iHB1": {
+    "title": "Indexing Embeddings",
+    "description": "",
+    "links": []
+  },
+  "ZcbRPtgaptqKqWBgRrEBU": {
+    "title": "Performing Similarity Search",
+    "description": "",
+    "links": []
+  },
+  "lVhWhZGR558O-ljHobxIi": {
+    "title": "RAG & Implementation",
+    "description": "",
+    "links": []
+  },
+  "GCn4LGNEtPI0NWYAZCRE-": {
+    "title": "RAG Usecases",
+    "description": "",
+    "links": []
+  },
+  "qlBEXrbV88e_wAGRwO9hW": {
+    "title": "RAG vs Fine-tuning",
+    "description": "",
+    "links": []
+  },
+  "mX987wiZF7p3V_gExrPeX": {
+    "title": "Chunking",
+    "description": "",
+    "links": []
+  },
+  "grTcbzT7jKk_sIUwOTZTD": {
+    "title": "Embedding",
+    "description": "",
+    "links": []
+  },
+  "zZA1FBhf1y4kCoUZ-hM4H": {
+    "title": "Vector Database",
+    "description": "",
+    "links": []
+  },
+  "OCGCzHQM2LQyUWmiqe6E0": {
+    "title": "Retrieval Process",
+    "description": "",
+    "links": []
+  },
+  "2jJnS9vRYhaS69d6OxrMh": {
+    "title": "Generation",
+    "description": "",
+    "links": []
+  },
+  "WZVW8FQu6LyspSKm1C_sl": {
+    "title": "Using SDKs Directly",
+    "description": "",
+    "links": []
+  },
+  "ebXXEhNRROjbbof-Gym4p": {
+    "title": "Langchain",
+    "description": "",
+    "links": []
+  },
+  "d0ontCII8KI8wfP-8Y45R": {
+    "title": "Llama Index",
+    "description": "",
+    "links": []
+  },
+  "eOqCBgBTKM8CmY3nsWjre": {
+    "title": "Open AI Assistant API",
+    "description": "",
+    "links": []
+  },
+  "c0RPhpD00VIUgF4HJgN2T": {
+    "title": "Replicate",
+    "description": "",
+    "links": []
+  },
+  "AeHkNU-uJ_gBdo5-xdpEu": {
+    "title": "AI Agents",
+    "description": "",
+    "links": []
+  },
+  "778HsQzTuJ_3c9OSn5DmH": {
+    "title": "Agents Usecases",
+    "description": "",
+    "links": []
+  },
+  "voDKcKvXtyLzeZdx2g3Qn": {
+    "title": "ReAct Prompting",
+    "description": "",
+    "links": []
+  },
+  "6xaRB34_g0HGt-y1dGYXR": {
+    "title": "Manual Implementation",
+    "description": "",
+    "links": []
+  },
+  "Sm0Ne5Nx72hcZCdAcC0C2": {
+    "title": "OpenAI Functions / Tools",
+    "description": "",
+    "links": []
+  },
+  "mbp2NoL-VZ5hZIIblNBXt": {
+    "title": "OpenAI Assistant API",
+    "description": "",
+    "links": []
+  },
+  "W7cKPt_UxcUgwp8J6hS4p": {
+    "title": "Multimodal AI",
+    "description": "",
+    "links": []
+  },
+  "sGR9qcro68KrzM8qWxcH8": {
+    "title": "Multimodal AI Usecases",
+    "description": "",
+    "links": []
+  },
+  "fzVq4hGoa2gdbIzoyY1Zp": {
+    "title": "Image Understanding",
+    "description": "",
+    "links": []
+  },
+  "49BWxYVFpIgZCCqsikH7l": {
+    "title": "Image Generation",
+    "description": "",
+    "links": []
+  },
+  "TxaZCtTCTUfwCxAJ2pmND": {
+    "title": "Video Understanding",
+    "description": "",
+    "links": []
+  },
+  "mxQYB820447DC6kogyZIL": {
+    "title": "Audio Processing",
+    "description": "",
+    "links": []
+  },
+  "GCERpLz5BcRtWPpv-asUz": {
+    "title": "Text-to-Speech",
+    "description": "",
+    "links": []
+  },
+  "jQX10XKd_QM5wdQweEkVJ": {
+    "title": "Speech-to-Text",
+    "description": "",
+    "links": []
+  },
+  "CRrqa-dBw1LlOwVbrZhjK": {
+    "title": "OpenAI Vision API",
+    "description": "",
+    "links": []
+  },
+  "LKFwwjtcawJ4Z12X102Cb": {
+    "title": "DALL-E API",
+    "description": "",
+    "links": []
+  },
+  "OTBd6cPUayKaAM-fLWdSt": {
+    "title": "Whisper API",
+    "description": "",
+    "links": []
+  },
+  "EIDbwbdolR_qsNKVDla6V": {
+    "title": "Hugging Face Models",
+    "description": "",
+    "links": []
+  },
+  "j9zD3pHysB1CBhLfLjhpD": {
+    "title": "LangChain for Multimodal Apps",
+    "description": "",
+    "links": []
+  },
+  "akQTCKuPRRelj2GORqvsh": {
+    "title": "LlamaIndex for Multimodal Apps",
+    "description": "",
+    "links": []
+  },
+  "NYge7PNtfI-y6QWefXJ4d": {
+    "title": "Development Tools",
+    "description": "",
+    "links": []
+  },
+  "XcKeQfpTA5ITgdX51I4y-": {
+    "title": "AI Code Editors",
+    "description": "",
+    "links": []
+  },
+  "TifVhqFm1zXNssA8QR3SM": {
+    "title": "Code Completion Tools",
+    "description": "",
+    "links": []
+  }
+}
--- a/public/roadmap-content/android.json
+++ b/public/roadmap-content/android.json
--- a/public/roadmap-content/backend.json
+++ b/public/roadmap-content/backend.json
@@ -1,13 +1,30 @@
 {
  "gKTSe9yQFVbPVlLzWB0hC": {
    "title": "Search Engines",
-    "description": "Search engines like Elasticsearch are specialized tools designed for fast, scalable, and flexible searching and analyzing of large volumes of data. Elasticsearch is an open-source, distributed search and analytics engine built on Apache Lucene, offering full-text search capabilities, real-time indexing, and advanced querying features. Key characteristics of search engines like Elasticsearch include:\n\n1.  **Full-Text Search**: Support for complex search queries, including relevance scoring and text analysis.\n2.  **Distributed Architecture**: Scalability through horizontal distribution across multiple nodes or servers.\n3.  **Real-Time Indexing**: Ability to index and search data almost instantaneously.\n4.  **Powerful Query DSL**: A domain-specific language for constructing and executing sophisticated queries.\n5.  **Analytics**: Capabilities for aggregating and analyzing data, often used for log and event data analysis.\n\nElasticsearch is commonly used in applications requiring advanced search functionality, such as search engines, data analytics platforms, and real-time monitoring systems.",
-    "links": []
+    "description": "Search engines like Elasticsearch are specialized tools designed for fast, scalable, and flexible searching and analyzing of large volumes of data. Elasticsearch is an open-source, distributed search and analytics engine built on Apache Lucene, offering full-text search capabilities, real-time indexing, and advanced querying features. Key characteristics of search engines like Elasticsearch include:\n\n1.  **Full-Text Search**: Support for complex search queries, including relevance scoring and text analysis.\n2.  **Distributed Architecture**: Scalability through horizontal distribution across multiple nodes or servers.\n3.  **Real-Time Indexing**: Ability to index and search data almost instantaneously.\n4.  **Powerful Query DSL**: A domain-specific language for constructing and executing sophisticated queries.\n5.  **Analytics**: Capabilities for aggregating and analyzing data, often used for log and event data analysis.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Elasticsearch",
+        "url": "https://www.elastic.co/elasticsearch/",
+        "type": "article"
+      }
+    ]
  },
  "9Fpoor-Os_9lvrwu5Zjh-": {
    "title": "Design and Development Principles",
-    "description": "Design and Development Principles are fundamental guidelines that inform the creation of software systems. Key principles include:\n\n1.  SOLID (Single Responsibility, Open-Closed, Liskov Substitution, Interface Segregation, Dependency Inversion)\n2.  DRY (Don't Repeat Yourself)\n3.  KISS (Keep It Simple, Stupid)\n4.  YAGNI (You Aren't Gonna Need It)\n5.  Separation of Concerns\n6.  Modularity\n7.  Encapsulation\n8.  Composition over Inheritance\n9.  Loose Coupling and High Cohesion\n10.  Principle of Least Astonishment\n\nThese principles aim to create more maintainable, scalable, and robust software. They encourage clean code, promote reusability, reduce complexity, and enhance flexibility. While not rigid rules, these principles guide developers in making design decisions that lead to better software architecture and easier long-term maintenance. Applying these principles helps in creating systems that are easier to understand, modify, and extend over time.",
-    "links": []
+    "description": "Design and Development Principles are fundamental guidelines that inform the creation of software systems. Key principles include:\n\n*   SOLID (Single Responsibility, Open-Closed, Liskov Substitution, Interface Segregation, Dependency Inversion)\n*   DRY (Don't Repeat Yourself)\n*   KISS (Keep It Simple, Stupid)\n*   YAGNI (You Aren't Gonna Need It)\n*   Separation of Concerns\n*   Modularity\n*   Encapsulation\n*   Composition over Inheritance\n*   Loose Coupling and High Cohesion\n*   Principle of Least Astonishment\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Design Principles - Wikipedia",
+        "url": "https://en.wikipedia.org/wiki/Design_principles",
+        "type": "article"
+      },
+      {
+        "title": "Design Principles - Microsoft",
+        "url": "https://docs.microsoft.com/en-us/dotnet/standard/design-guidelines/index",
+        "type": "article"
+      }
+    ]
  },
  "EwvLPSI6AlZ4TnNIJTZA4": {
    "title": "Learn about APIs",
@@ -71,7 +88,7 @@
    "description": "Rust is a systems programming language known for its focus on safety, performance, and concurrency. It provides fine-grained control over system resources while ensuring memory safety without needing a garbage collector. Rust's ownership model enforces strict rules on how data is accessed and managed, preventing common issues like null pointer dereferences and data races. Its strong type system and modern features, such as pattern matching and concurrency support, make it suitable for a wide range of applications, from low-level systems programming to high-performance web servers and tools. Rust is gaining traction in both industry and open source for its reliability and efficiency.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "The Rust Programming Language - online book",
+        "title": "The Rust Programming Language - Book",
        "url": "https://doc.rust-lang.org/book/",
        "type": "article"
      },
@@ -334,8 +351,8 @@
        "type": "article"
      },
      {
-        "title": "Learn Git with Tutorials, News and Tips - Atlassian",
-        "url": "https://www.atlassian.com/git",
+        "title": "Git Documentation",
+        "url": "https://git-scm.com/doc",
        "type": "article"
      },
      {
@@ -370,8 +387,8 @@
        "type": "article"
      },
      {
-        "title": "Git",
-        "url": "https://git-scm.com/",
+        "title": "Git Documentation",
+        "url": "https://git-scm.com/doc",
        "type": "article"
      },
      {
@@ -396,7 +413,7 @@
        "type": "article"
      },
      {
-        "title": "GitHub Website",
+        "title": "GitHub",
        "url": "https://github.com",
        "type": "article"
      },
@@ -424,7 +441,7 @@
  },
  "Ry_5Y-BK7HrkIc6X0JG1m": {
    "title": "Bitbucket",
-    "description": "Bitbucket is a web-based version control repository hosting service owned by Atlassian. It primarily uses Git version control systems, offering both cloud-hosted and self-hosted options. Bitbucket provides features such as pull requests for code review, branch permissions, and inline commenting on code. It integrates seamlessly with other Atlassian products like Jira and Trello, making it popular among teams already using Atlassian tools. Bitbucket supports continuous integration and deployment through Bitbucket Pipelines. It offers unlimited private repositories for small teams, making it cost-effective for smaller organizations. While similar to GitHub in many aspects, Bitbucket's integration with Atlassian's ecosystem and its pricing model for private repositories are key differentiators. It's widely used for collaborative software development, particularly in enterprise environments already invested in Atlassian's suite of products.\n\nVisit the following resources to learn more:",
+    "description": "Bitbucket is a web-based version control repository hosting service owned by Atlassian. It primarily uses Git version control systems, offering both cloud-hosted and self-hosted options. Bitbucket provides features such as pull requests for code review, branch permissions, and inline commenting on code. It integrates seamlessly with other Atlassian products like Jira and Trello, making it popular among teams already using Atlassian tools. Bitbucket supports continuous integration and deployment through Bitbucket Pipelines. It offers unlimited private repositories for small teams, making it cost-effective for smaller organizations.\n\nVisit the following resources to learn more:",
    "links": [
      {
        "title": "Bitbucket Website",
@@ -453,9 +470,9 @@
    "description": "GitLab is a web-based DevOps platform that provides a complete solution for the software development lifecycle. It offers source code management, continuous integration/continuous deployment (CI/CD), issue tracking, and more, all integrated into a single application. GitLab supports Git repositories and includes features like merge requests (similar to GitHub's pull requests), wiki pages, and issue boards. It emphasizes DevOps practices, providing built-in CI/CD pipelines, container registry, and Kubernetes integration. GitLab offers both cloud-hosted and self-hosted options, giving organizations flexibility in deployment. Its all-in-one approach differentiates it from competitors, as it includes features that might require multiple tools in other ecosystems. GitLab's focus on the entire DevOps lifecycle, from planning to monitoring, makes it popular among enterprises and teams seeking a unified platform for their development workflows.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "GitLab Website",
+        "title": "GitLab",
        "url": "https://gitlab.com/",
-        "type": "opensource"
+        "type": "article"
      },
      {
        "title": "GitLab Documentation",
@@ -546,7 +563,7 @@
        "type": "article"
      },
      {
-        "title": "MS SQL website",
+        "title": "MS SQL",
        "url": "https://www.microsoft.com/en-ca/sql-server/",
        "type": "article"
      },
@@ -567,12 +584,12 @@
    "description": "MySQL is an open-source relational database management system (RDBMS) known for its speed, reliability, and ease of use. It uses SQL (Structured Query Language) for database interactions and supports a range of features for data management, including transactions, indexing, and stored procedures. MySQL is widely used for web applications, data warehousing, and various other applications due to its scalability and flexibility. It integrates well with many programming languages and platforms, and is often employed in conjunction with web servers and frameworks in popular software stacks like LAMP (Linux, Apache, MySQL, PHP/Python/Perl). MySQL is maintained by Oracle Corporation and has a large community and ecosystem supporting its development and use.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "MySQL website",
+        "title": "MySQL",
        "url": "https://www.mysql.com/",
        "type": "article"
      },
      {
-        "title": "W3Schools - MySQL tutorial ",
+        "title": "W3Schools - MySQL Tutorial",
        "url": "https://www.w3schools.com/mySQl/default.asp",
        "type": "article"
      },
@@ -603,12 +620,12 @@
    "description": "Oracle Database is a highly robust, enterprise-grade relational database management system (RDBMS) developed by Oracle Corporation. Known for its scalability, reliability, and comprehensive features, Oracle Database supports complex data management tasks and mission-critical applications. It provides advanced functionalities like SQL querying, transaction management, high availability through clustering, and data warehousing. Oracle's database solutions include support for various data models, such as relational, spatial, and graph, and offer tools for security, performance optimization, and data integration. It is widely used in industries requiring large-scale, secure, and high-performance data processing.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Official Website",
+        "title": "Oracle Website",
        "url": "https://www.oracle.com/database/",
        "type": "article"
      },
      {
-        "title": "Official Docs",
+        "title": "Oracle Docs",
        "url": "https://docs.oracle.com/en/database/index.html",
        "type": "article"
      },
@@ -626,10 +643,10 @@
  },
  "tD3i-8gBpMKCHB-ITyDiU": {
    "title": "MariaDB",
-    "description": "MariaDB server is a community developed fork of MySQL server. Started by core members of the original MySQL team, MariaDB actively works with outside developers to deliver the most featureful, stable, and sanely licensed open SQL server in the industry. MariaDB was created with the intention of being a more versatile, drop-in replacement version of MySQL\n\nVisit the following resources to learn more:",
+    "description": "MariaDB server is a community developed fork of MySQL server. Started by core members of the original MySQL team, MariaDB actively works with outside developers to deliver the most feature rich, stable, and sanely licensed open SQL server in the industry. MariaDB was created with the intention of being a more versatile, drop-in replacement version of MySQL\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "MariaDB website",
+        "title": "MariaDB",
        "url": "https://mariadb.org/",
        "type": "article"
      },
@@ -782,8 +799,14 @@
  },
  "GwApfL4Yx-b5Y8dB9Vy__": {
    "title": "Failure Modes",
-    "description": "Database failure modes refer to the various ways in which a database system can malfunction or cease to operate correctly. These include hardware failures (like disk crashes or network outages), software bugs, data corruption, performance degradation due to overload, and inconsistencies in distributed systems. Common failure modes involve data loss, system unavailability, replication lag in distributed databases, and deadlocks. To mitigate these, databases employ strategies such as redundancy, regular backups, transaction logging, and failover mechanisms. Understanding potential failure modes is crucial for designing robust database systems with high availability and data integrity. It informs the implementation of fault tolerance measures, recovery procedures, and monitoring systems to ensure database reliability and minimize downtime in critical applications.",
-    "links": []
+    "description": "Database failure modes refer to the various ways in which a database system can malfunction or cease to operate correctly. These include hardware failures (like disk crashes or network outages), software bugs, data corruption, performance degradation due to overload, and inconsistencies in distributed systems. Common failure modes involve data loss, system unavailability, replication lag in distributed databases, and deadlocks. To mitigate these, databases employ strategies such as redundancy, regular backups, transaction logging, and failover mechanisms. Understanding potential failure modes is crucial for designing robust database systems with high availability and data integrity. It informs the implementation of fault tolerance measures, recovery procedures, and monitoring systems to ensure database reliability and minimize downtime in critical applications.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Database Failure Modes",
+        "url": "https://ieeexplore.ieee.org/document/7107294/",
+        "type": "article"
+      }
+    ]
  },
  "rq_y_OBMD9AH_4aoecvAi": {
    "title": "Transactions",
@@ -921,7 +944,7 @@
    "description": "Data replication is the process of creating and maintaining multiple copies of the same data across different locations or nodes in a distributed system. It enhances data availability, reliability, and performance by ensuring that data remains accessible even if one or more nodes fail. Replication can be synchronous (changes are applied to all copies simultaneously) or asynchronous (changes are propagated after being applied to the primary copy). It's widely used in database systems, content delivery networks, and distributed file systems. Replication strategies include master-slave, multi-master, and peer-to-peer models. While improving fault tolerance and read performance, replication introduces challenges in maintaining data consistency across copies and managing potential conflicts. Effective replication strategies must balance consistency, availability, and partition tolerance, often in line with the principles of the CAP theorem.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "What is data replication?",
+        "title": "Data Replication? - IBM",
        "url": "https://www.ibm.com/topics/data-replication",
        "type": "article"
      },
@@ -984,7 +1007,7 @@
    "description": "JSON or JavaScript Object Notation is an encoding scheme that is designed to eliminate the need for an ad-hoc code for each application to communicate with servers that communicate in a defined way. JSON API module exposes an implementation for data stores and data structures, such as entity types, bundles, and fields.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Official Website",
+        "title": "JSON API",
        "url": "https://jsonapi.org/",
        "type": "article"
      },
@@ -1014,15 +1037,15 @@
        "url": "https://swagger.io/tools/swagger-editor/",
        "type": "article"
      },
-      {
-        "title": " REST API and OpenAPI: It’s Not an Either/Or Question ",
-        "url": "https://www.youtube.com/watch?v=pRS9LRBgjYg",
-        "type": "article"
-      },
      {
        "title": "OpenAPI 3.0: How to Design and Document APIs with the Latest OpenAPI Specification 3.0",
        "url": "https://www.youtube.com/watch?v=6kwmW_p_Tig",
        "type": "video"
+      },
+      {
+        "title": " REST API and OpenAPI: It’s Not an Either/Or Question",
+        "url": "https://www.youtube.com/watch?v=pRS9LRBgjYg",
+        "type": "video"
      }
    ]
  },
@@ -1109,7 +1132,7 @@
        "type": "article"
      },
      {
-        "title": "GraphQL Official Website",
+        "title": "GraphQL",
        "url": "https://graphql.org/",
        "type": "article"
      },
@@ -1130,7 +1153,7 @@
    "description": "Client-side caching is a technique where web browsers or applications store data locally on the user's device to improve performance and reduce server load. It involves saving copies of web pages, images, scripts, and other resources on the client's system for faster access on subsequent visits. Modern browsers implement various caching mechanisms, including HTTP caching (using headers like Cache-Control and ETag), service workers for offline functionality, and local storage APIs. Client-side caching significantly reduces network traffic and load times, enhancing user experience, especially on slower connections. However, it requires careful management to balance improved performance with the need for up-to-date content. Developers must implement appropriate cache invalidation strategies and consider cache-busting techniques for critical updates. Effective client-side caching is crucial for creating responsive, efficient web applications while minimizing server resource usage.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Client-side Caching",
+        "title": "Client Side Caching",
        "url": "https://redis.io/docs/latest/develop/use/client-side-caching/",
        "type": "article"
      },
@@ -1143,13 +1166,18 @@
  },
  "Nq2BO53bHJdFT1rGZPjYx": {
    "title": "CDN",
-    "description": "A Content Delivery Network (CDN) service aims to provide high availability and performance improvements of websites. This is achieved with fast delivery of website assets and content typically via geographically closer endpoints to the client requests. Traditional commercial CDNs (Amazon CloudFront, Akamai, CloudFlare and Fastly) provide servers across the globe which can be used for this purpose. Serving assets and contents via a CDN reduces bandwidth on website hosting, provides an extra layer of caching to reduce potential outages and can improve website security as well\n\nVisit the following resources to learn more:",
+    "description": "A Content Delivery Network (CDN) service aims to provide high availability and performance improvements of websites. This is achieved with fast delivery of website assets and content typically via geographically closer endpoints to the client requests.\n\nTraditional commercial CDNs (Amazon CloudFront, Akamai, CloudFlare and Fastly) provide servers across the globe which can be used for this purpose. Serving assets and contents via a CDN reduces bandwidth on website hosting, provides an extra layer of caching to reduce potential outages and can improve website security as well\n\nVisit the following resources to learn more:",
    "links": [
      {
        "title": "CloudFlare - What is a CDN? | How do CDNs work?",
        "url": "https://www.cloudflare.com/en-ca/learning/cdn/what-is-a-cdn/",
        "type": "article"
      },
+      {
+        "title": "AWS - CDN",
+        "url": "https://aws.amazon.com/what-is/cdn/",
+        "type": "article"
+      },
      {
        "title": "What is Cloud CDN?",
        "url": "https://www.youtube.com/watch?v=841kyd_mfH0",
@@ -1190,8 +1218,19 @@
  },
  "ELj8af7Mi38kUbaPJfCUR": {
    "title": "Caching",
-    "description": "Caching is a technique used in computing to store and retrieve frequently accessed data quickly, reducing the need to fetch it from the original, slower source repeatedly. It involves keeping a copy of data in a location that's faster to access than its primary storage. Caching can occur at various levels, including browser caching, application-level caching, and database caching. It significantly improves performance by reducing latency, decreasing network traffic, and lowering the load on servers or databases. Common caching strategies include time-based expiration, least recently used (LRU) algorithms, and write-through or write-back policies. While caching enhances speed and efficiency, it also introduces challenges in maintaining data consistency and freshness. Effective cache management is crucial in balancing performance gains with the need for up-to-date information in dynamic systems.",
-    "links": []
+    "description": "Caching is a technique used in computing to store and retrieve frequently accessed data quickly, reducing the need to fetch it from the original, slower source repeatedly. It involves keeping a copy of data in a location that's faster to access than its primary storage. Caching can occur at various levels, including browser caching, application-level caching, and database caching. It significantly improves performance by reducing latency, decreasing network traffic, and lowering the load on servers or databases. Common caching strategies include time-based expiration, least recently used (LRU) algorithms, and write-through or write-back policies. While caching enhances speed and efficiency, it also introduces challenges in maintaining data consistency and freshness. Effective cache management is crucial in balancing performance gains with the need for up-to-date information in dynamic systems.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is Caching - AWS",
+        "url": "https://aws.amazon.com/caching/",
+        "type": "article"
+      },
+      {
+        "title": "Caching - Cloudflare",
+        "url": "https://www.cloudflare.com/learning/cdn/what-is-caching/",
+        "type": "article"
+      }
+    ]
  },
  "RBrIP5KbVQ2F0ly7kMfTo": {
    "title": "Web Security",
@@ -1333,7 +1372,7 @@
        "type": "article"
      },
      {
-        "title": "DevOps CI/CD Explained in 100 Seconds by Fireship",
+        "title": "DevOps CI/CD Explained in 100 Seconds",
        "url": "https://www.youtube.com/watch?v=scEDHsr3APg",
        "type": "video"
      },
@@ -1581,7 +1620,7 @@
  },
  "8DmabQJXlrT__COZrDVTV": {
    "title": "Twelve Factor Apps",
-    "description": "The Twelve-Factor App methodology is a set of principles for building modern, scalable, and maintainable web applications, particularly suited for cloud environments. It emphasizes best practices for developing applications in a way that facilitates portability, scalability, and ease of deployment. Key principles include:\n\n1.  **Codebase**: One codebase tracked in version control, with many deploys.\n2.  **Dependencies**: Explicitly declare and isolate dependencies.\n3.  **Config**: Store configuration in the environment.\n4.  **Backing Services**: Treat backing services as attached resources.\n5.  **Build, Release, Run**: Separate build and run stages.\n6.  **Processes**: Execute the app as one or more stateless processes.\n7.  **Port Binding**: Export services via port binding.\n8.  **Concurrency**: Scale out via the process model.\n9.  **Disposability**: Maximize robustness with fast startup and graceful shutdown.\n10.  **Dev/Prod Parity**: Keep development, staging, and production environments as similar as possible.\n11.  **Logs**: Treat logs as streams of events.\n12.  **Admin Processes**: Run administrative or management tasks as one-off processes.\n\nThese principles help create applications that are easy to deploy, manage, and scale in cloud environments, promoting operational simplicity and consistency.\n\nVisit the following resources to learn more:",
+    "description": "The Twelve-Factor App methodology is a set of principles for building modern, scalable, and maintainable web applications, particularly suited for cloud environments. It emphasizes best practices for developing applications in a way that facilitates portability, scalability, and ease of deployment. Key principles include:\n\n1.  **Codebase**: One codebase tracked in version control, with many deploys.\n2.  **Dependencies**: Explicitly declare and isolate dependencies.\n3.  **Config**: Store configuration in the environment.\n4.  **Backing Services**: Treat backing services as attached resources.\n5.  **Build, Release, Run**: Separate build and run stages.\n6.  **Processes**: Execute the app as one or more stateless processes.\n7.  **Port Binding**: Export services via port binding.\n8.  **Concurrency**: Scale out via the process model.\n9.  **Disposability**: Maximize robustness with fast startup and graceful shutdown.\n10.  **Dev/Prod Parity**: Keep development, staging, and production environments as similar as possible.\n11.  **Logs**: Treat logs as streams of events.\n12.  **Admin Processes**: Run administrative or management tasks as one-off processes.\n\nVisit the following resources to learn more:",
    "links": [
      {
        "title": "The Twelve-Factor App",
@@ -1647,7 +1686,7 @@
    "description": "Apache Kafka is a distributed event streaming platform designed for high-throughput, fault-tolerant data processing. It acts as a message broker, allowing systems to publish and subscribe to streams of records, similar to a distributed commit log. Kafka is highly scalable and can handle large volumes of data with low latency, making it ideal for real-time analytics, log aggregation, and data integration. It features topics for organizing data streams, partitions for parallel processing, and replication for fault tolerance, enabling reliable and efficient handling of large-scale data flows across distributed systems.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Apache Kafka quickstart",
+        "title": "Apache Kafka",
        "url": "https://kafka.apache.org/quickstart",
        "type": "article"
      },
@@ -1704,12 +1743,12 @@
        "type": "article"
      },
      {
-        "title": "Getting started with LXD Containerization",
+        "title": "Getting Started with LXD Containerization",
        "url": "https://www.youtube.com/watch?v=aIwgPKkVj8s",
        "type": "video"
      },
      {
-        "title": "Getting started with LXC containers",
+        "title": "Getting Started with LXC containers",
        "url": "https://youtu.be/CWmkSj_B-wo",
        "type": "video"
      }
@@ -1767,7 +1806,7 @@
    "description": "Server-Sent Events (SSE) is a technology for sending real-time updates from a server to a web client over a single, persistent HTTP connection. It enables servers to push updates to clients efficiently and automatically reconnects if the connection is lost. SSE is ideal for applications needing one-way communication, such as live notifications or real-time data feeds, and uses a simple text-based format for transmitting event data, which can be easily handled by clients using the `EventSource` API in JavaScript.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Server-Sent Events - MDN",
+        "title": "Server Sent Events - MDN",
        "url": "https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events",
        "type": "article"
      },
@@ -1783,7 +1822,7 @@
    "description": "Nginx is a high-performance, open-source web server and reverse proxy server known for its efficiency, scalability, and low resource consumption. Originally developed as a web server, Nginx is also commonly used as a load balancer, HTTP cache, and mail proxy. It excels at handling a large number of concurrent connections due to its asynchronous, event-driven architecture. Nginx's features include support for serving static content, handling dynamic content through proxying to application servers, and providing SSL/TLS termination. Its modular design allows for extensive customization and integration with various applications and services, making it a popular choice for modern web infrastructures.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Official Website",
+        "title": "Nginx Website",
        "url": "https://nginx.org/",
        "type": "article"
      },
@@ -1809,7 +1848,7 @@
    "description": "Caddy is a modern, open-source web server written in Go. It's known for its simplicity, automatic HTTPS encryption, and HTTP/2 support out of the box. Caddy stands out for its ease of use, with a simple configuration syntax and the ability to serve static files with zero configuration. It automatically obtains and renews SSL/TLS certificates from Let's Encrypt, making secure deployments straightforward. Caddy supports various plugins and modules for extended functionality, including reverse proxying, load balancing, and dynamic virtual hosting. It's designed with security in mind, implementing modern web standards by default. While it may not match the raw performance of servers like Nginx in extremely high-load scenarios, Caddy's simplicity, built-in security features, and low resource usage make it an attractive choice for many web hosting needs, particularly for smaller to medium-sized projects or developers seeking a hassle-free server setup.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "caddyserver/caddy",
+        "title": "caddyserver/caddy - Caddy on GitHub",
        "url": "https://github.com/caddyserver/caddy",
        "type": "opensource"
      },
@@ -1856,7 +1895,7 @@
    "description": "Microsoft Internet Information Services (IIS) is a flexible, secure, and high-performance web server developed by Microsoft for hosting and managing web applications and services on Windows Server. IIS supports a variety of web technologies, including [ASP.NET](http://ASP.NET), PHP, and static content. It provides features such as request handling, authentication, SSL/TLS encryption, and URL rewriting. IIS also offers robust management tools, including a graphical user interface and command-line options, for configuring and monitoring web sites and applications. It is commonly used for deploying enterprise web applications and services in a Windows-based environment, offering integration with other Microsoft technologies and services.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Official Website",
+        "title": "Microsoft -IIS",
        "url": "https://www.iis.net/",
        "type": "article"
      },
@@ -1942,7 +1981,7 @@
  },
  "xPvVwGQw28uMeLYIWn8yn": {
    "title": "Memcached",
-    "description": "Memcached (pronounced variously mem-cash-dee or mem-cashed) is a general-purpose distributed memory-caching system. It is often used to speed up dynamic database-driven websites by caching data and objects in RAM to reduce the number of times an external data source (such as a database or API) must be read. Memcached is free and open-source software, licensed under the Revised BSD license. Memcached runs on Unix-like operating systems (Linux and macOS) and on Microsoft Windows. It depends on the `libevent` library. Memcached's APIs provide a very large hash table distributed across multiple machines. When the table is full, subsequent inserts cause older data to be purged in the least recently used (LRU) order. Applications using Memcached typically layer requests and additions into RAM before falling back on a slower backing store, such as a database.\n\nMemcached has no internal mechanism to track misses which may happen. However, some third-party utilities provide this functionality.\n\nVisit the following resources to learn more:",
+    "description": "Memcached (pronounced variously mem-cash-dee or mem-cashed) is a general-purpose distributed memory-caching system. It is often used to speed up dynamic database-driven websites by caching data and objects in RAM to reduce the number of times an external data source (such as a database or API) must be read. Memcached is free and open-source software, licensed under the Revised BSD license. Memcached runs on Unix-like operating systems (Linux and macOS) and on Microsoft Windows. It depends on the `libevent` library. Memcached's APIs provide a very large hash table distributed across multiple machines. When the table is full, subsequent inserts cause older data to be purged in the least recently used (LRU) order. Applications using Memcached typically layer requests and additions into RAM before falling back on a slower backing store, such as a database.\n\nVisit the following resources to learn more:",
    "links": [
      {
        "title": "memcached/memcached",
@@ -2091,7 +2130,7 @@
        "type": "article"
      },
      {
-        "title": "Backpressure explained — the resisted flow of data through software",
+        "title": "Backpressure explained — The Resisted Flow of Data through Software",
        "url": "https://medium.com/@jayphelps/backpressure-explained-the-flow-of-data-through-software-2350b3e77ce7",
        "type": "article"
      },
@@ -2136,7 +2175,7 @@
  },
  "f7iWBkC0X7yyCoP_YubVd": {
    "title": "Migration Strategies",
-    "description": "Migration strategies involve planning and executing the transition of applications, data, or infrastructure from one environment to another, such as from on-premises systems to the cloud or between different cloud providers. Key strategies include:\n\n1.  **Rehost (Lift and Shift)**: Moving applications as-is to the new environment with minimal changes, which is often the quickest but may not fully leverage new platform benefits.\n2.  **Replatform**: Making some optimizations or changes to adapt applications for the new environment, enhancing performance or scalability while retaining most of the existing architecture.\n3.  **Refactor**: Redesigning and modifying applications to optimize for the new environment, often taking advantage of new features and improving functionality or performance.\n4.  **Repurchase**: Replacing existing applications with new, often cloud-based, solutions that better meet current needs.\n5.  **Retain**: Keeping certain applications or systems in their current environment due to specific constraints or requirements.\n6.  **Retire**: Decommissioning applications that are no longer needed or are redundant.\n\nEach strategy has its own trade-offs in terms of cost, complexity, and benefits, and the choice depends on factors like the application’s architecture, business needs, and resource availability.\n\nVisit the following resources to learn more:",
+    "description": "Migration strategies involve planning and executing the transition of applications, data, or infrastructure from one environment to another, such as from on-premises systems to the cloud or between different cloud providers. Key strategies include:\n\n1.  **Rehost (Lift and Shift)**: Moving applications as-is to the new environment with minimal changes, which is often the quickest but may not fully leverage new platform benefits.\n2.  **Replatform**: Making some optimizations or changes to adapt applications for the new environment, enhancing performance or scalability while retaining most of the existing architecture.\n3.  **Refactor**: Redesigning and modifying applications to optimize for the new environment, often taking advantage of new features and improving functionality or performance.\n4.  **Repurchase**: Replacing existing applications with new, often cloud-based, solutions that better meet current needs.\n5.  **Retain**: Keeping certain applications or systems in their current environment due to specific constraints or requirements.\n6.  **Retire**: Decommissioning applications that are no longer needed or are redundant.\n\nVisit the following resources to learn more:",
    "links": [
      {
        "title": "Databases as a Challenge for Continuous Delivery",
@@ -2152,7 +2191,7 @@
  },
  "osQlGGy38xMcKLtgZtWaZ": {
    "title": "Types of Scaling",
-    "description": "Horizontal scaling (scaling out/in) involves adding or removing instances of resources, such as servers or containers, to handle increased or decreased loads. It distributes the workload across multiple instances to improve performance and redundancy. This method enhances the system's capacity by expanding the number of nodes in a distributed system.\n\nVertical scaling (scaling up/down) involves increasing or decreasing the resources (CPU, memory, storage) of a single instance or server to handle more load or reduce capacity. This method improves performance by upgrading the existing hardware or virtual machine but has limits based on the maximum capacity of the individual resource.\n\nBoth approaches have their advantages: horizontal scaling offers better fault tolerance and flexibility, while vertical scaling is often simpler to implement but can be limited by the hardware constraints of a single machine.\n\nVisit the following resources to learn more:",
+    "description": "Horizontal scaling (scaling out/in) involves adding or removing instances of resources, such as servers or containers, to handle increased or decreased loads. It distributes the workload across multiple instances to improve performance and redundancy. This method enhances the system's capacity by expanding the number of nodes in a distributed system.\n\nVertical scaling (scaling up/down) involves increasing or decreasing the resources (CPU, memory, storage) of a single instance or server to handle more load or reduce capacity. This method improves performance by upgrading the existing hardware or virtual machine but has limits based on the maximum capacity of the individual resource.\n\nVisit the following resources to learn more:",
    "links": [
      {
        "title": "Horizontal vs Vertical Scaling",
@@ -2207,7 +2246,7 @@
    "description": "Monitoring involves continuously observing and tracking the performance, availability, and health of systems, applications, and infrastructure. It typically includes collecting and analyzing metrics, logs, and events to ensure systems are operating within desired parameters. Monitoring helps detect anomalies, identify potential issues before they escalate, and provides insights into system behavior. It often involves tools and platforms that offer dashboards, alerts, and reporting features to facilitate real-time visibility and proactive management. Effective monitoring is crucial for maintaining system reliability, performance, and for supporting incident response and troubleshooting.\n\nA few popular tools are Grafana, Sentry, Mixpanel, NewRelic.",
    "links": [
      {
-        "title": "Top monitoring tools 2024",
+        "title": "Top Monitoring Tools",
        "url": "https://thectoclub.com/tools/best-application-monitoring-software/",
        "type": "article"
      },
@@ -2307,9 +2346,9 @@
    "description": "Bcrypt is a password-hashing function designed to securely hash passwords for storage in databases. Created by Niels Provos and David Mazières, it's based on the Blowfish cipher and incorporates a salt to protect against rainbow table attacks. Bcrypt's key feature is its adaptive nature, allowing for the adjustment of its cost factor to make it slower as computational power increases, thus maintaining resistance against brute-force attacks over time. It produces a fixed-size hash output, typically 60 characters long, which includes the salt and cost factor. Bcrypt is widely used in many programming languages and frameworks due to its security strength and relative ease of implementation. Its deliberate slowness in processing makes it particularly effective for password storage, where speed is not a priority but security is paramount.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "bcrypts npm package",
+        "title": "bcrypt",
        "url": "https://www.npmjs.com/package/bcrypt",
-        "type": "article"
+        "type": "opensource"
      },
      {
        "title": "Understanding bcrypt",
@@ -2429,7 +2468,7 @@
  },
  "TZ0BWOENPv6pQm8qYB8Ow": {
    "title": "Server Security",
-    "description": "Server security involves protecting servers from threats and vulnerabilities to ensure the confidentiality, integrity, and availability of the data and services they manage. Key practices include:\n\n1.  **Patch Management**: Regularly updating software and operating systems to fix vulnerabilities.\n2.  **Access Control**: Implementing strong authentication mechanisms and restricting access to authorized users only.\n3.  **Firewalls and Intrusion Detection**: Using firewalls to block unauthorized access and intrusion detection systems to monitor and respond to suspicious activities.\n4.  **Encryption**: Encrypting data both in transit and at rest to protect sensitive information from unauthorized access.\n5.  **Security Hardening**: Configuring servers with minimal services and features, applying security best practices to reduce the attack surface.\n6.  **Regular Backups**: Performing regular backups to ensure data can be restored in case of loss or corruption.\n7.  **Monitoring and Logging**: Continuously monitoring server activity and maintaining logs for auditing and detecting potential security incidents.\n\nEffective server security is crucial for safeguarding against attacks, maintaining system stability, and protecting sensitive data.\n\nLearn more from the following resources:",
+    "description": "Server security involves protecting servers from threats and vulnerabilities to ensure the confidentiality, integrity, and availability of the data and services they manage. Key practices include:\n\n1.  **Patch Management**: Regularly updating software and operating systems to fix vulnerabilities.\n2.  **Access Control**: Implementing strong authentication mechanisms and restricting access to authorized users only.\n3.  **Firewalls and Intrusion Detection**: Using firewalls to block unauthorized access and intrusion detection systems to monitor and respond to suspicious activities.\n4.  **Encryption**: Encrypting data both in transit and at rest to protect sensitive information from unauthorized access.\n5.  **Security Hardening**: Configuring servers with minimal services and features, applying security best practices to reduce the attack surface.\n6.  **Regular Backups**: Performing regular backups to ensure data can be restored in case of loss or corruption.\n7.  **Monitoring and Logging**: Continuously monitoring server activity and maintaining logs for auditing and detecting potential security incidents.\n\nLearn more from the following resources:",
    "links": [
      {
        "title": "What is a hardened server?",
@@ -2600,7 +2639,7 @@
  },
  "hkxw9jPGYphmjhTjw8766": {
    "title": "DNS and how it works?",
-    "description": "DNS (Domain Name System) is a hierarchical, decentralized naming system for computers, services, or other resources connected to the Internet or a private network. It translates human-readable domain names (like [www.example.com](http://www.example.com)) into IP addresses (like 192.0.2.1) that computers use to identify each other. DNS servers distributed worldwide work together to resolve these queries, forming a global directory service. The system uses a tree-like structure with root servers at the top, followed by top-level domain servers (.com, .org, etc.), authoritative name servers for specific domains, and local DNS servers. DNS is crucial for the functioning of the Internet, enabling users to access websites and services using memorable names instead of numerical IP addresses. It also supports email routing, service discovery, and other network protocols.\n\nVisit the following resources to learn more:",
+    "description": "DNS (Domain Name System) is a hierarchical, decentralized naming system for computers, services, or other resources connected to the Internet or a private network. It translates human-readable domain names (like `www.example.com`) into IP addresses (like 192.0.2.1) that computers use to identify each other. DNS servers distributed worldwide work together to resolve these queries, forming a global directory service. The system uses a tree-like structure with root servers at the top, followed by top-level domain servers (.com, .org, etc.), authoritative name servers for specific domains, and local DNS servers. DNS is crucial for the functioning of the Internet, enabling users to access websites and services using memorable names instead of numerical IP addresses. It also supports email routing, service discovery, and other network protocols.\n\nVisit the following resources to learn more:",
    "links": [
      {
        "title": "What is DNS?",
@@ -2811,7 +2850,7 @@
    "description": "OpenID is an open standard for decentralized authentication that allows users to log in to multiple websites and applications using a single set of credentials, managed by an identity provider (IdP). It enables users to authenticate their identity through an external service, simplifying the login process and reducing the need for multiple usernames and passwords. OpenID typically works in conjunction with OAuth 2.0 for authorization, allowing users to grant access to their data while maintaining security. This approach enhances user convenience and streamlines identity management across various platforms.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Official Website",
+        "title": "OpenID Website",
        "url": "https://openid.net/",
        "type": "article"
      },
@@ -2839,7 +2878,7 @@
  },
  "UCHtaePVxS-0kpqlYxbfC": {
    "title": "SAML",
-    "description": "Security Assertion Markup Language (SAML)\n-----------------------------------------\n\nSecurity Assertion Markup Language (SAML) is an XML-based framework used for single sign-on (SSO) and identity federation, enabling users to authenticate once and gain access to multiple applications or services. It allows for the exchange of authentication and authorization data between an identity provider (IdP) and a service provider (SP). SAML assertions are XML documents that contain user identity information and attributes, and are used to convey authentication credentials and permissions. By implementing SAML, organizations can streamline user management, enhance security through centralized authentication, and simplify the user experience by reducing the need for multiple logins across different systems.\n\nLearn more from the following resources:",
+    "description": "Security Assertion Markup Language (SAML) is an XML-based framework used for single sign-on (SSO) and identity federation, enabling users to authenticate once and gain access to multiple applications or services. It allows for the exchange of authentication and authorization data between an identity provider (IdP) and a service provider (SP). SAML assertions are XML documents that contain user identity information and attributes, and are used to convey authentication credentials and permissions. By implementing SAML, organizations can streamline user management, enhance security through centralized authentication, and simplify the user experience by reducing the need for multiple logins across different systems.\n\nLearn more from the following resources:",
    "links": [
      {
        "title": "SAML Explained in Plain English",
@@ -2884,17 +2923,17 @@
    "description": "Solr is an open-source, highly scalable search platform built on Apache Lucene, designed for full-text search, faceted search, and real-time indexing. It provides powerful features for indexing and querying large volumes of data with high performance and relevance. Solr supports complex queries, distributed searching, and advanced text analysis, including tokenization and stemming. It offers features such as faceted search, highlighting, and geographic search, and is commonly used for building search engines and data retrieval systems in various applications, from e-commerce to content management.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "apache/solr",
+        "title": "Solr on Github",
        "url": "https://github.com/apache/solr",
        "type": "opensource"
      },
      {
-        "title": "Official Website",
+        "title": "Solr Website",
        "url": "https://solr.apache.org/",
        "type": "article"
      },
      {
-        "title": "Official Documentation",
+        "title": "Solr Documentation",
        "url": "https://solr.apache.org/resources.html#documentation",
        "type": "article"
      },
@@ -2910,7 +2949,7 @@
    "description": "Real-time data refers to information that is processed and made available immediately or with minimal delay, allowing users or systems to react promptly to current conditions. This type of data is essential in applications requiring immediate updates and responses, such as financial trading platforms, online gaming, real-time analytics, and monitoring systems. Real-time data processing involves capturing, analyzing, and delivering information as it is generated, often using technologies like stream processing frameworks (e.g., Apache Kafka, Apache Flink) and low-latency databases. Effective real-time data systems can handle high-speed data flows, ensuring timely and accurate decision-making.\n\nLearn more from the following resources:",
    "links": [
      {
-        "title": "Real-time data - Wiki",
+        "title": "Real-time Data - Wiki",
        "url": "https://en.wikipedia.org/wiki/Real-time_data",
        "type": "article"
      },
@@ -2942,7 +2981,7 @@
    "description": "Short polling is a technique where a client periodically sends requests to a server at regular intervals to check for updates or new data. The server responds with the current state or any changes since the last request. While simple to implement and compatible with most HTTP infrastructures, short polling can be inefficient due to the frequent network requests and potential for increased latency in delivering updates. It contrasts with long polling and WebSockets, which offer more efficient mechanisms for real-time communication. Short polling is often used when real-time requirements are less stringent and ease of implementation is a priority.\n\nLearn more from the following resources:",
    "links": [
      {
-        "title": "Amazon SQS short and long polling",
+        "title": "Amazon SQS Short and Long Polling",
        "url": "https://docs.aws.amazon.com/AWSSimpleQueueService/latest/SQSDeveloperGuide/sqs-short-and-long-polling.html",
        "type": "article"
      },
@@ -2984,7 +3023,7 @@
    "description": "Amazon DynamoDB is a fully managed, serverless NoSQL database service provided by Amazon Web Services (AWS). It offers high-performance, scalable, and flexible data storage for applications of any scale. DynamoDB supports both key-value and document data models, providing fast and predictable performance with seamless scalability. It features automatic scaling, built-in security, backup and restore options, and global tables for multi-region deployment. DynamoDB excels in handling high-traffic web applications, gaming backends, mobile apps, and IoT solutions. It offers consistent single-digit millisecond latency at any scale and supports both strongly consistent and eventually consistent read models. With its integration into the AWS ecosystem, on-demand capacity mode, and support for transactions, DynamoDB is widely used for building highly responsive and scalable applications, particularly those with unpredictable workloads or requiring low-latency data access.\n\nLearn more from the following resources:",
    "links": [
      {
-        "title": "AWS DynamoDB Website",
+        "title": "AWS DynamoDB",
        "url": "https://aws.amazon.com/dynamodb/",
        "type": "article"
      },
@@ -3002,10 +3041,10 @@
  },
  "RyJFLLGieJ8Xjt-DlIayM": {
    "title": "Firebase",
-    "description": "Firebase is a comprehensive mobile and web application development platform owned by Google. It provides a suite of cloud-based services that simplify app development, hosting, and scaling. Key features include real-time database, cloud storage, authentication, hosting, cloud functions, and analytics. Firebase offers real-time synchronization, allowing data to be updated across clients instantly. Its authentication service supports multiple providers, including email/password, social media logins, and phone authentication. The platform's serverless architecture enables developers to focus on front-end development without managing backend infrastructure. Firebase also provides tools for app testing, crash reporting, and performance monitoring. While it excels in rapid prototyping and building real-time applications, its proprietary nature and potential for vendor lock-in are considerations for large-scale or complex applications. Firebase's ease of use and integration with Google Cloud Platform make it popular for startups and projects requiring quick deployment.\n\nLearn more from the following resources:",
+    "description": "Firebase is a comprehensive mobile and web application development platform owned by Google. It provides a suite of cloud-based services that simplify app development, hosting, and scaling. Key features include real-time database, cloud storage, authentication, hosting, cloud functions, and analytics. Firebase offers real-time synchronization, allowing data to be updated across clients instantly. Its authentication service supports multiple providers, including email/password, social media logins, and phone authentication. The platform's serverless architecture enables developers to focus on front-end development without managing backend infrastructure. Firebase also provides tools for app testing, crash reporting, and performance monitoring.\n\nLearn more from the following resources:",
    "links": [
      {
-        "title": "The ultimate guide to Firebase",
+        "title": "The Ultimate Guide to Firebase",
        "url": "https://fireship.io/lessons/the-ultimate-beginners-guide-to-firebase/",
        "type": "course"
      },
@@ -3042,7 +3081,7 @@
    "description": "SQLite is a lightweight, serverless, self-contained SQL database engine that is designed for simplicity and efficiency. It is widely used in embedded systems and applications where a full-featured database server is not required, such as mobile apps, desktop applications, and small to medium-sized websites. SQLite stores data in a single file, which makes it easy to deploy and manage. It supports standard SQL queries and provides ACID (Atomicity, Consistency, Isolation, Durability) compliance to ensure data integrity. SQLite’s small footprint, minimal configuration, and ease of use make it a popular choice for applications needing a compact, high-performance database solution.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "SQLite website",
+        "title": "SQLite",
        "url": "https://www.sqlite.org/index.html",
        "type": "article"
      },
@@ -3104,7 +3143,7 @@
        "type": "video"
      },
      {
-        "title": "What is time series data?",
+        "title": "What is Time Series Data?",
        "url": "https://www.youtube.com/watch?v=Se5ipte9DMY",
        "type": "video"
      }
@@ -3203,5 +3242,21 @@
        "type": "video"
      }
    ]
+  },
+  "ZsZvStCvKwFhlBYe9HGhl": {
+    "title": "Migrations",
+    "description": "Database migrations are a version-controlled way to manage and apply incremental changes to a database schema over time, allowing developers to modify the database structure (e.g., adding tables, altering columns) without affecting existing data. They ensure that the database evolves alongside application code in a consistent, repeatable manner across environments (e.g., development, testing, production), while maintaining compatibility with older versions of the schema. Migrations are typically written in SQL or a database-agnostic language, and are executed using migration tools like Liquibase, Flyway, or built-in ORM features such as Django or Rails migrations.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "What are Database Migrations?",
+        "url": "https://www.prisma.io/dataguide/types/relational/what-are-database-migrations",
+        "type": "article"
+      },
+      {
+        "title": "Database Migrations for Beginners",
+        "url": "https://www.youtube.com/watch?v=dJDBP7pPA-o",
+        "type": "video"
+      }
+    ]
  }
 }
--- a/public/roadmap-content/computer-science.json
+++ b/public/roadmap-content/computer-science.json
@@ -372,16 +372,6 @@
        "url": "https://www.coursera.org/lecture/data-structures/doubly-linked-lists-jpGKD",
        "type": "course"
      },
-      {
-        "title": "CS 61B Lecture 7: Linked Lists I",
-        "url": "https://archive.org/details/ucberkeley_webcast_htzJdKoEmO0",
-        "type": "article"
-      },
-      {
-        "title": "CS 61B Lecture 7: Linked Lists II",
-        "url": "https://archive.org/details/ucberkeley_webcast_-c4I3gFYe3w",
-        "type": "article"
-      },
      {
        "title": "Linked List Data Structure | Illustrated Data Structures",
        "url": "https://www.youtube.com/watch?v=odW9FU8jPRQ",
@@ -392,6 +382,16 @@
        "url": "https://www.youtube.com/watch?v=F8AbOfQwl1c",
        "type": "video"
      },
+      {
+        "title": "CS 61B Lecture 7: Linked Lists I",
+        "url": "https://archive.org/details/ucberkeley_webcast_htzJdKoEmO0",
+        "type": "video"
+      },
+      {
+        "title": "CS 61B Lecture 7: Linked Lists II",
+        "url": "https://archive.org/details/ucberkeley_webcast_-c4I3gFYe3w",
+        "type": "video"
+      },
      {
        "title": "Why you should avoid Linked Lists?",
        "url": "https://www.youtube.com/watch?v=YQs6IC-vgmo",
@@ -511,16 +511,16 @@
        "url": "https://www.coursera.org/lecture/data-structures/dynamic-arrays-EwbnV",
        "type": "course"
      },
-      {
-        "title": "UC Berkeley CS61B - Linear and Multi-Dim Arrays (Start watching from 15m 32s)",
-        "url": "https://archive.org/details/ucberkeley_webcast_Wp8oiO_CZZE",
-        "type": "article"
-      },
      {
        "title": "Array Data Structure | Illustrated Data Structures",
        "url": "https://www.youtube.com/watch?v=QJNwK2uJyGs",
        "type": "video"
      },
+      {
+        "title": "UC Berkeley CS61B - Linear and Multi-Dim Arrays (Start watching from 15m 32s)",
+        "url": "https://archive.org/details/ucberkeley_webcast_Wp8oiO_CZZE",
+        "type": "video"
+      },
      {
        "title": "Dynamic and Static Arrays",
        "url": "https://www.youtube.com/watch?v=PEnFFiQe1pM&list=PLDV1Zeh2NRsB6SWUrDFW2RmDotAfPbeHu&index=6",
@@ -3786,7 +3786,7 @@
  },
  "7r7o8pYhFHVAJIv0wNT6X": {
    "title": "Hashing / Encryption / Encoding",
-    "description": "Hashing is a one-way function that takes an input and produces a fixed-length output. The output is called a hash. The hash is a unique representation of the input. The hash is deterministic, meaning that the same input will always produce the same hash. The hash is irreversible, meaning that it is impossible to go from the hash back to the original input. The hash is collision-resistant, meaning that it is impossible to find two different inputs that produce the same hash.\n\nEncryption is a two-way function that takes an input and produces an output. The output is called ciphertext. The ciphertext is a unique representation of the input. The ciphertext is deterministic, meaning that the same input will always produce the same ciphertext. The ciphertext is reversible, meaning that it is possible to go from the ciphertext back to the original input. The ciphertext is collision-resistant, meaning that it is impossible to find two different inputs that produce the same ciphertext.\n\nEncoding is a two-way function that takes an input and produces an output. The output is called encoded text. The encoded text is a unique representation of the input. The encoded text is deterministic, meaning that the same input will always produce the same encoded text. The encoded text is reversible, meaning that it is possible to go from the encoded text back to the original input. The encoded text is not collision-resistant, meaning that it is possible to find two different inputs that produce the same encoded text.\n\nVisit the following resources to learn more:",
+    "description": "Hashing is a one-way function that takes an input and produces a fixed-length output. The output is called a hash. The hash is a unique representation of the input. The hash is deterministic, meaning that the same input will always produce the same hash. The hash is irreversible, meaning that it is impossible to go from the hash back to the original input. The hash is not collision-resistant, meaning that it is possible to find two different inputs that produce the same hash.\n\nEncryption is a two-way function that takes an input and produces an output. The output is called ciphertext. The ciphertext is a unique representation of the input. The ciphertext is deterministic, meaning that the same input will always produce the same ciphertext. The ciphertext is reversible, meaning that it is possible to go from the ciphertext back to the original input. The ciphertext is collision-resistant, meaning that it is impossible to find two different inputs that produce the same ciphertext.\n\nEncoding is a two-way function that takes an input and produces an output. The output is called encoded text. The encoded text is a unique representation of the input. The encoded text is deterministic, meaning that the same input will always produce the same encoded text. The encoded text is reversible, meaning that it is possible to go from the encoded text back to the original input. The encoded text is collision-resistant, meaning that it is impossible to find two different inputs that produce the same encoded text.\n\nVisit the following resources to learn more:",
    "links": [
      {
        "title": "Explore top posts about Encryption",
--- a/public/roadmap-content/cyber-security.json
+++ b/public/roadmap-content/cyber-security.json
@@ -766,7 +766,7 @@
  },
  "dJ0NUsODFhk52W2zZxoPh": {
    "title": "SSL and TLS Basics",
-    "description": "Single Sign-On (SSO) is an authentication method that allows users to access multiple applications or systems with one set of login credentials. It enables users to log in once and gain access to various connected systems without re-entering credentials. SSO enhances user experience by reducing password fatigue, streamlines access management for IT departments, and can improve security by centralizing authentication controls. It typically uses protocols like SAML, OAuth, or OpenID Connect to securely share authentication information across different domains. While SSO offers convenience and can strengthen security when implemented correctly, it also presents a single point of failure if compromised, making robust security measures for the SSO system critical.\n\nLearn more from the following resources:",
+    "description": "Secure Sockets Layer (SSL) and Transport Layer Security (TLS) are cryptographic protocols used to provide security in internet communications. These protocols encrypt the data that is transmitted over the web, so anyone who tries to intercept packets will not be able to interpret the data. One difference that is important to know is that SSL is now deprecated due to security flaws, and most modern web browsers no longer support it. But TLS is still secure and widely supported, so preferably use TLS.\n\nLearn more from the following resources:",
    "links": [
      {
        "title": "What’s the Difference Between SSL and TLS?",
@@ -3223,7 +3223,7 @@
  },
  "6ILPXeUDDmmYRiA_gNTSr": {
    "title": "SSL vs TLS",
-    "description": "Single Sign-On (SSO) is an authentication method that allows users to access multiple applications or systems with one set of login credentials. It enables users to log in once and gain access to various connected systems without re-entering credentials. SSO enhances user experience by reducing password fatigue, streamlines access management for IT departments, and can improve security by centralizing authentication controls. It typically uses protocols like SAML, OAuth, or OpenID Connect to securely share authentication information across different domains. While SSO offers convenience and can strengthen security when implemented correctly, it also presents a single point of failure if compromised, making robust security measures for the SSO system critical.\n\nLearn more from the following resources:",
+    "description": "**SSL (Secure Sockets Layer)** is a cryptographic protocol used to secure communications by encrypting data transmitted between clients and servers. SSL establishes a secure connection through a process known as the handshake, during which the client and server agree on cryptographic algorithms, exchange keys, and authenticate the server with a digital certificate. SSL’s security is considered weaker compared to its successor, TLS, due to vulnerabilities in its older encryption methods and lack of modern cryptographic techniques.\n\n**TLS (Transport Layer Security)** improves upon SSL by using stronger encryption algorithms, more secure key exchange mechanisms, and enhanced certificate validation. Like SSL, TLS begins with a handshake where the client and server agree on a protocol version and cipher suite, exchange keys, and verify certificates. However, TLS incorporates additional features like Perfect Forward Secrecy (PFS) and more secure hashing algorithms, making it significantly more secure than SSL for modern communications.\n\nLearn more from the following resources:",
    "links": [
      {
        "title": "What’s the Difference Between SSL and TLS?",
--- a/public/roadmap-content/devops.json
+++ b/public/roadmap-content/devops.json
@@ -117,6 +117,11 @@
    "title": "Rust",
    "description": "Rust is a systems programming language that focuses on safety, concurrency, and performance. Developed by Mozilla Research, Rust combines low-level control over system resources with high-level abstractions, preventing common programming errors like null or dangling pointer references at compile-time. It features a borrow checker for managing memory and preventing data races, making it ideal for building reliable and efficient software. Rust's zero-cost abstractions, pattern matching, and trait-based generics offer powerful tools for expressing complex ideas clearly. While primarily used for systems programming, web assembly, and game development, Rust's growing ecosystem supports various domains. Its emphasis on memory safety without sacrificing performance makes it increasingly popular for developing secure, high-performance applications in fields ranging from operating systems to web services.\n\nVisit the following resources to learn more:",
    "links": [
+      {
+        "title": "Rust by Practice - Interactive Rust Course",
+        "url": "https://practice.course.rs/",
+        "type": "course"
+      },
      {
        "title": "The Rust Programming Language - online book",
        "url": "https://doc.rust-lang.org/book/",
@@ -189,9 +194,14 @@
    "title": "Operating System",
    "description": "Operating systems (OS) are fundamental software that manage computer hardware and software resources, providing common services for computer programs. They act as an intermediary between applications and hardware, handling tasks like memory management, process scheduling, file system management, and device control. Common desktop operating systems include Microsoft Windows, macOS, and various Linux distributions. Mobile devices typically run iOS or Android. Server environments often use Linux distributions like Ubuntu Server, Red Hat Enterprise Linux, or Windows Server. Each OS type offers distinct features, user interfaces, and compatibility with different software and hardware. Operating systems play a crucial role in system security, performance optimization, and providing a consistent user experience across diverse computing devices and environments.\n\nVisit the following resources to learn more:",
    "links": [
+      {
+        "title": "Operating Systems - Wiki",
+        "url": "https://en.wikipedia.org/wiki/Operating_system",
+        "type": "article"
+      },
      {
        "title": "All you need to know about OS.",
-        "url": "https://www.javatpoint.com/os-tutorial",
+        "url": "https://www.javatpoint.com/operating-system",
        "type": "article"
      },
      {
@@ -205,7 +215,7 @@
        "type": "video"
      },
      {
-        "title": "Operating Systems!",
+        "title": "Operating Systems",
        "url": "https://www.youtube.com/watch?v=vBURTt97EkA&list=PLBlnK6fEyqRiVhbXDGLXDk_OQAeuVcp2O",
        "type": "video"
      }
@@ -636,6 +646,11 @@
    "title": "Git",
    "description": "Git is a distributed version control system designed to track changes in source code during software development. It allows multiple developers to work on the same project simultaneously, maintaining a complete history of modifications. Git features local repositories on each developer's machine, enabling offline work and fast operations. It supports non-linear development through branching and merging, facilitating parallel work streams. Git's distributed nature enhances collaboration, backup, and experimentation. Key concepts include commits, branches, merges, and remote repositories. With its speed, flexibility, and robust branching and merging capabilities, Git has become the standard for version control in modern software development, powering platforms like GitHub and GitLab.\n\nVisit the following resources to learn more:",
    "links": [
+      {
+        "title": "Git by Example - Learn Version Control with Bite-sized Lessons",
+        "url": "https://antonz.org/git-by-example/",
+        "type": "course"
+      },
      {
        "title": "Learn Git & GitHub",
        "url": "https://roadmap.sh/git-github",
@@ -812,6 +827,11 @@
        "url": "https://www.cisco.com/c/en_in/products/security/firewalls/what-is-a-firewall.html",
        "type": "article"
      },
+      {
+        "title": "Uncomplicated Firewall (UFW)",
+        "url": "https://dev.to/coder7475/uncomplicated-firewall-ufw-1638",
+        "type": "article"
+      },
      {
        "title": "Why do we need Firewalls?",
        "url": "https://www.tutorialspoint.com/what-is-a-firewall-and-why-do-you-need-one",
@@ -979,6 +999,11 @@
        "url": "https://www.cloudflare.com/en-gb/learning/performance/what-is-load-balancing/",
        "type": "article"
      },
+      {
+        "title": "NGINX Reverse Proxy and Load Balancing",
+        "url": "https://dzone.com/articles/nginx-reverse-proxy-and-load-balancing",
+        "type": "article"
+      },
      {
        "title": "What is a Load Balancer?",
        "url": "https://www.youtube.com/watch?v=sCR3SAVdyCc",
@@ -1000,6 +1025,11 @@
        "url": "https://www.nginx.com/resources/glossary/reverse-proxy-server/",
        "type": "article"
      },
+      {
+        "title": "Understanding NGINX as a Reverse Proxy",
+        "url": "https://medium.com/globant/understanding-nginx-as-a-reverse-proxy-564f76e856b2",
+        "type": "article"
+      },
      {
        "title": "Proxy vs Reverse Proxy (Real-world Examples)",
        "url": "https://www.youtube.com/watch?v=4NB0NDtOwIQ",
@@ -1827,21 +1857,21 @@
  },
  "1oYvpFG8LKT1JD6a_9J0m": {
    "title": "Provisioning",
-    "description": "Prometheus is an open-source systems monitoring and alerting toolkit designed for reliability and scalability. It features a multi-dimensional data model, a flexible query language (PromQL), and an efficient time series database. Prometheus collects metrics from configured targets at given intervals, evaluates rule expressions, displays results, and can trigger alerts when specified conditions are observed. It operates on a pull model, scraping metrics from HTTP endpoints, and supports service discovery for dynamic environments. Prometheus is particularly well-suited for monitoring microservices and containerized environments, integrating seamlessly with systems like Kubernetes. Its ecosystem includes various exporters for third-party systems and a built-in alert manager. Widely adopted in cloud-native architectures, Prometheus is a core component of modern observability stacks, often used alongside tools like Grafana for visualization.\n\nVisit the following resources to learn more:",
+    "description": "Provisioning refers to the process of setting up and configuring the necessary IT infrastructure to support an application or service. This includes allocating and preparing resources such as servers, storage, networking, and software environments. Provisioning can be done manually, but in modern DevOps practices, it's typically automated using tools like Terraform, Pulumi, or CloudFormation. These tools allow for infrastructure-as-code, where the entire provisioning process is defined in version-controlled scripts or templates. This approach enables consistent, repeatable deployments across different environments, reduces human error, and facilitates rapid scaling and disaster recovery.\n\nLearn more from the following resources:",
    "links": [
      {
-        "title": "Prometheus Website",
-        "url": "https://prometheus.io/",
+        "title": "What is provisioning? - RedHat",
+        "url": "https://www.redhat.com/en/topics/automation/what-is-provisioning",
        "type": "article"
      },
      {
-        "title": "Explore top posts about Prometheus",
-        "url": "https://app.daily.dev/tags/prometheus?ref=roadmapsh",
+        "title": "What is provisioning? - IBM",
+        "url": "https://www.ibm.com/topics/provisioning",
        "type": "article"
      },
      {
-        "title": "Introduction to the Prometheus Monitoring System | Key Concepts and Features",
-        "url": "https://www.youtube.com/watch?v=STVMGrYIlfg",
+        "title": "Open Answers: What is provisioning?",
+        "url": "https://www.youtube.com/watch?v=hWvDlmhASpk",
        "type": "video"
      }
    ]
--- a/public/roadmap-content/devrel.json
+++ b/public/roadmap-content/devrel.json
@@ -232,8 +232,24 @@
  },
  "X0xUzEP0S6SyspvqyoDDk": {
    "title": "Technical Documentation",
-    "description": "",
-    "links": []
+    "description": "Technical documentation refers to the process of creating and maintaining written descriptions of software, hardware, and other technical products or systems. It involves communicating complex information in a clear, concise, and organized manner to help users understand, operate, and maintain the product or system. Effective technical documentation can take many forms, including user manuals, guides, tutorials, release notes, and API documentation, and is typically created by technical writers, developers, and subject matter experts. The goal of technical documentation is to provide accurate, up-to-date, and easily accessible information that enables users to get the most out of a product or system, while also reducing support queries and improving overall user experience.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Technical Writer Roadmap",
+        "url": "https://roadmap.sh/technical-writer",
+        "type": "article"
+      },
+      {
+        "title": "Technical Writing - MDN Docs",
+        "url": "https://developer.mozilla.org/en-US/blog/technical-writing/",
+        "type": "article"
+      },
+      {
+        "title": "Technical Documentation - Wikipedia",
+        "url": "https://en.wikipedia.org/wiki/Technical_documentation",
+        "type": "article"
+      }
+    ]
  },
  "urbtoZtuJryK-6TJ3lmRN": {
    "title": "Social Media",
@@ -353,8 +369,24 @@
  },
  "aSYXa25_0O2qQl1O-N3xl": {
    "title": "Basic Programming Skills",
-    "description": "",
-    "links": []
+    "description": "Basic programming skills are essential for Developer Relations professionals to effectively communicate with developers, understand their needs, and provide technical support. These skills include proficiency in at least one programming language, understanding of data structures and algorithms, and familiarity with development tools and technologies. Having basic programming skills enables Developer Relations professionals to create educational content, provide technical guidance, and participate in code reviews.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "TheNewStack.io - Devrel",
+        "url": "https://thenewstack.io/devrel-for-beginners-how-to-get-started/",
+        "type": "article"
+      },
+      {
+        "title": "Getting Started With Devrel- Dev.to",
+        "url": "https://dev.to/rejoice/getting-started-with-devrel-22n3",
+        "type": "article"
+      },
+      {
+        "title": "How to become a DevRel",
+        "url": "https://www.pluralsight.com/resources/blog/tech-operations/developer-relations-getting-a-devrel-job",
+        "type": "article"
+      }
+    ]
  },
  "KdFYmj36M2jrGfsYkukpo": {
    "title": "IDEs",
@@ -379,22 +411,32 @@
  },
  "j5nNSYI8s-cH8EA6G1EWY": {
    "title": "VS Code",
-    "description": "Visual Studio Code (VSCode) was first announced by Microsoft in 2015 and quickly became one of the most popular and widely used Integrated Development Environments (IDEs). Built on [Electron](https://www.electronjs.org/), a framework that allows web technologies like JavaScript, HTML, and CSS to create desktop applications, VSCode offers a lightweight and highly extensible platform for developers. VSCode focuses on being a streamlined code editor with the ability to install extensions that add features such as debugging, version control, and language-specific tooling. Microsoft's vision was to create a flexible environment that could cater to all types of developers, from beginners to seasoned professionals.\n\nLearn more from the following resources:",
+    "description": "Visual Studio Code (VSCode) was first announced by Microsoft in 2015 and quickly became one of the most popular and widely used Integrated Development Environments (IDEs). Built on Electron, a framework that allows web technologies like JavaScript, HTML, and CSS to create desktop applications, VSCode offers a lightweight and highly extensible platform for developers. VSCode focuses on being a streamlined code editor with the ability to install extensions that add features such as debugging, version control, and language-specific tooling. Microsoft's vision was to create a flexible environment that could cater to all types of developers, from beginners to seasoned professionals.\n\nLearn more from the following resources:",
    "links": [
-      {
-        "title": "video@FreeCodeCamp Crash Course",
-        "url": "https://www.youtube.com/watch?v=WPqXP_kLzpo",
-        "type": "course"
-      },
-      {
-        "title": "video@VS Code basics",
-        "url": "https://www.youtube.com/watch?v=B-s71n0dHUk",
-        "type": "article"
-      },
      {
        "title": "Visual Studio Code",
        "url": "https://code.visualstudio.com/",
        "type": "article"
+      },
+      {
+        "title": "Docs - Visual Studio Code",
+        "url": "https://code.visualstudio.com/docs",
+        "type": "article"
+      },
+      {
+        "title": "FreeCodeCamp Crash Course",
+        "url": "https://www.youtube.com/watch?v=WPqXP_kLzpo",
+        "type": "video"
+      },
+      {
+        "title": "VSCode Basics",
+        "url": "https://www.youtube.com/watch?v=B-s71n0dHUk",
+        "type": "video"
+      },
+      {
+        "title": "VSCode in 100 Seconds",
+        "url": "https://www.youtube.com/watch?v=KMxo3T_MTvY",
+        "type": "video"
      }
    ]
  },
--- a/public/roadmap-content/frontend.json
+++ b/public/roadmap-content/frontend.json
--- a/public/roadmap-content/full-stack.json
+++ b/public/roadmap-content/full-stack.json
@@ -262,12 +262,12 @@
      },
      {
        "title": "React Website",
-        "url": "https://reactjs.org/",
+        "url": "https://react.dev/",
        "type": "article"
      },
      {
        "title": "Official Getting Started",
-        "url": "https://reactjs.org/tutorial/tutorial.html",
+        "url": "https://react.dev/learn/tutorial-tic-tac-toe",
        "type": "article"
      },
      {
--- a/public/roadmap-content/git-github.json
+++ b/public/roadmap-content/git-github.json
@@ -267,6 +267,11 @@
        "url": "https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging",
        "type": "article"
      },
+      {
+        "title": "Learn Git Branching",
+        "url": "https://learngitbranching.js.org/",
+        "type": "article"
+      },
      {
        "title": "Git Branches Tutorial",
        "url": "https://www.youtube.com/watch?v=e2IbNHi4uCI",
@@ -295,7 +300,7 @@
    "description": "Renaming a branch in Git means changing the name of a branch to something different while preserving its history and the commits it contains. The branch itself remains the same in terms of the code and history it tracks, but the reference (the name by which you refer to it) is updated\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Renaming a branch - GitHub Docs",
+        "title": "Renaming a Branch - GitHub Docs",
        "url": "https://docs.github.com/github/administering-a-repository/renaming-a-branch",
        "type": "article"
      },
@@ -361,15 +366,26 @@
  },
  "NeSvgS2yA5x8qbcJHrV__": {
    "title": "GitHub Essentials",
-    "description": "GitHub Essentials refers to the core features and functionalities that form the foundation of GitHub's version control and collaboration platform. These essentials include repositories for storing and managing code, branches for parallel development, pull requests for code review and merging, issues for tracking tasks and bugs, and collaborative tools like project boards and wikis. Understanding and mastering these fundamental components allows developers to effectively manage their projects, collaborate with team members, and contribute to open-source initiatives, making GitHub an indispensable tool in modern software development workflows.",
-    "links": []
+    "description": "GitHub Essentials refers to the core features and functionalities that form the foundation of GitHub's version control and collaboration platform. These essentials include repositories for storing and managing code, branches for parallel development, pull requests for code review and merging, issues for tracking tasks and bugs, and collaborative tools like project boards and wikis. Understanding and mastering these fundamental components allows developers to effectively manage their projects, collaborate with team members, and contribute to open-source initiatives, making GitHub an indispensable tool in modern software development workflows.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Github Essentials - Microsoft",
+        "url": "https://learn.microsoft.com/en-us/contribute/content/git-github-fundamentals",
+        "type": "article"
+      },
+      {
+        "title": "Hello World",
+        "url": "https://docs.github.com/en/get-started/start-your-journey/hello-world",
+        "type": "article"
+      }
+    ]
  },
  "i7fIIHcBEk473te8bniJ5": {
    "title": "Creating Account",
    "description": "To get started with GitHub, you'll need to create a free personal account on [GitHub.com](http://GitHub.com) and verify your email address. Every person who uses [GitHub.com](http://GitHub.com) signs in to a personal account. Your personal account is your identity on [GitHub.com](http://GitHub.com) and has a username and profile.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Creating an account on GitHub",
+        "title": "Creating an Account on GitHub",
        "url": "https://docs.github.com/en/get-started/start-your-journey/creating-an-account-on-github",
        "type": "article"
      }
@@ -423,7 +439,7 @@
    "description": "A GitHub Profile README is a special repository that allows users to showcase their skills, projects, and personality directly on their GitHub profile. To create one, you need to make a new repository with the same name as your GitHub username. This repository should contain a [README.md](http://README.md) file, which GitHub will automatically display on your profile page. The README can be customized with Markdown formatting, allowing you to add text, images, links, and even dynamic content like GitHub stats or recent blog posts. This feature provides a unique opportunity to make your GitHub profile more engaging and informative for visitors, effectively serving as a personalized landing page for your GitHub presence.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Managing your profile README",
+        "title": "Managing your Profile README",
        "url": "https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme",
        "type": "article"
      },
@@ -450,7 +466,7 @@
    "description": "In Git, a remote is a reference to a repository that exists on another server or system. Remotes allow you to access and interact with a copy of your repository that is stored elsewhere, making it possible to collaborate with others, share your work, and maintain multiple copies of your repository for backup and disaster recovery purposes. When you add a remote to your local repository, Git creates a reference to the remote repository, enabling you to push changes from your local repository to the remote one, pull changes from the remote to your local one, or fetch changes from the remote without updating your local copy. This enables distributed development and helps maintain a centralized version of your project's history, making it easier to track changes, manage conflicts, and ensure that everyone has access to the most up-to-date code.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "About remote repositories",
+        "title": "About Remote Repositories",
        "url": "https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories",
        "type": "article"
      },
@@ -487,7 +503,7 @@
        "type": "article"
      },
      {
-        "title": "GIT Push and Pull Tutorial",
+        "title": "Git Push and Pull Tutorial",
        "url": "https://www.datacamp.com/tutorial/git-push-pull",
        "type": "article"
      }
@@ -582,22 +598,22 @@
    "description": "Cloning a repository in Git and GitHub involves creating a local copy of a remote repository on your computer. This allows you to work on the project locally, commit changes, and later push those changes back to the remote repository.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Git clone",
+        "title": "git clone",
        "url": "https://git-scm.com/docs/git-clone/en",
        "type": "article"
      },
      {
-        "title": "Cloning a repository",
+        "title": "Cloning a Repository",
        "url": "https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository",
        "type": "article"
      },
      {
-        "title": "Clone a git respository",
+        "title": "Clone a Git Repository",
        "url": "https://www.atlassian.com/git/tutorials/setting-up-a-repository/git-clone",
        "type": "article"
      },
      {
-        "title": "Cloning remote respository into local machine",
+        "title": "Cloning Remote Repository into local machine",
        "url": "https://youtu.be/xeQih8LVtZM?si=djlyTDpLNS0oyqQH",
        "type": "video"
      }
@@ -700,8 +716,14 @@
  },
  "oWMaOWU06juoIuzXNe-wt": {
    "title": "Mentions",
-    "description": "Mentions on GitHub allow you to notify specific users or teams about comments, issues, pull requests, or other activities. This feature improves collaboration by encouraging participation and discussion among team members, increasing visibility of important topics, and streamlining communication within your repository. To use mentions, simply type `@username` or `@teamname` in a comment, and GitHub will auto-complete the mention as you type, automatically linking their username to the comment and notifying them about the discussion.",
-    "links": []
+    "description": "Mentions on GitHub allow you to notify specific users or teams about comments, issues, pull requests, or other activities. This feature improves collaboration by encouraging participation and discussion among team members, increasing visibility of important topics, and streamlining communication within your repository. To use mentions, simply type `@username` or `@teamname` in a comment, and GitHub will auto-complete the mention as you type, automatically linking their username to the comment and notifying them about the discussion.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Mention Somebody",
+        "url": "https://github.blog/news-insights/mention-somebody-they-re-notified/",
+        "type": "article"
+      }
+    ]
  },
  "XstmIysIi_lWo6RzszLBt": {
    "title": "Reactions",
@@ -716,8 +738,19 @@
  },
  "0rHDUbAdXqH9zQW2VfJ8v": {
    "title": "Merge Strategies",
-    "description": "When combining changes from one branch into another, Git provides various merge strategies to choose from. These methods allow for flexibility and customization in integrating code updates into your main branch. The available options include:\n\n*   Fast Forward (FF)\n*   Non-Fast Forward\n*   Rebase\n*   Squash\n*   Cherry Picking",
-    "links": []
+    "description": "When combining changes from one branch into another, Git provides various merge strategies to choose from. These methods allow for flexibility and customization in integrating code updates into your main branch. The available options include:\n\n*   Fast Forward (FF)\n*   Non-Fast Forward\n*   Rebase\n*   Squash\n*   Cherry Picking\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Git Merge Strategies",
+        "url": "https://git-scm.com/docs/merge-strategies",
+        "type": "article"
+      },
+      {
+        "title": "Git Merge Options",
+        "url": "https://www.atlassian.com/git/tutorials/using-branches/merge-strategy",
+        "type": "article"
+      }
+    ]
  },
  "agtPWS8j6i6wQPk10cy8E": {
    "title": "Fast-Forward vs Non-FF",
@@ -808,17 +841,17 @@
    "description": "Cherry-picking in Git allows you to apply a specific commit from one branch to another, without merging the entire branch. This is useful when you want to bring in a specific feature or fix from one branch to another without incorporating all the changes from the source branch.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "git-cherry-pick-docs",
+        "title": "git-cherry-pick docs",
        "url": "https://git-scm.com/docs/git-cherry-pick",
        "type": "article"
      },
      {
-        "title": "Git cherry pick",
+        "title": "Git Cherry Pick",
        "url": "https://www.atlassian.com/git/tutorials/cherry-pick",
        "type": "article"
      },
      {
-        "title": "Git-CHERRY-PICK-Tutorial",
+        "title": "Git Cherry Pick - Tutorial",
        "url": "https://youtu.be/i657Bg_HAWI?si=3jjn2X8Hi1na--F4",
        "type": "video"
      }
@@ -876,7 +909,7 @@
    "description": "Pull Request (PR) guidelines are essential for maintaining a smooth and efficient code review process in collaborative development environments. These guidelines typically outline best practices for creating, formatting, and submitting PRs, ensuring that changes are well-documented, easy to review, and align with the project's standards. They may cover aspects such as PR size, commit message formatting, documentation requirements, and testing expectations. By establishing clear PR guidelines, teams can streamline their workflow, improve code quality, and facilitate effective communication among contributors.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Best practices for pull requests",
+        "title": "Best Practices for Pull Requests",
        "url": "https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/getting-started/best-practices-for-pull-requests",
        "type": "article"
      },
@@ -908,7 +941,7 @@
    "description": "Contribution guidelines are essential for collaborative projects on GitHub as they help streamline collaboration, set expectations for contributions, and maintain the project's quality and consistency.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Setting guidelines for respository contributors",
+        "title": "Setting Guidelines for Repository Contributors",
        "url": "https://docs.github.com/articles/setting-guidelines-for-repository-contributors",
        "type": "article"
      },
@@ -998,7 +1031,7 @@
        "type": "article"
      },
      {
-        "title": "Git best practice tip: clean commit history",
+        "title": "Git Best Practice Tip: Clean Commit History",
        "url": "https://youtu.be/bZpiVijzd2g?si=8lJTlR3LfY9ZUd77",
        "type": "video"
      }
@@ -1006,8 +1039,19 @@
  },
  "yMx3LdadPz4g25CL3N8da": {
    "title": "Working in a Team",
-    "description": "Working in a team on GitHub involves collaborative development using Git's distributed version control system. Team members can work on separate branches, create pull requests for code reviews, and merge changes into the main codebase. GitHub's features like issues, projects, and discussions facilitate communication and project management. Effective teamwork on GitHub requires clear communication, adherence to agreed-upon workflows, and proper use of Git commands to manage code changes and resolve conflicts. This collaborative approach enables teams to work efficiently on complex projects, maintain code quality, and track progress effectively.\n\nGitHub also offers an organization and team management interface, allowing teams to manage projects, members, and collaboration settings.",
-    "links": []
+    "description": "Working in a team on GitHub involves collaborative development using Git's distributed version control system. Team members can work on separate branches, create pull requests for code reviews, and merge changes into the main codebase. GitHub's features like issues, projects, and discussions facilitate communication and project management. Effective teamwork on GitHub requires clear communication, adherence to agreed-upon workflows, and proper use of Git commands to manage code changes and resolve conflicts. This collaborative approach enables teams to work efficiently on complex projects, maintain code quality, and track progress effectively.\n\nGitHub also offers an organization and team management interface, allowing teams to manage projects, members, and collaboration settings.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Getting Started with Teams",
+        "url": "https://docs.github.com/en/get-started/onboarding/getting-started-with-github-team",
+        "type": "article"
+      },
+      {
+        "title": "Github Team Docs",
+        "url": "https://docs.github.com/organizations/organizing-members-into-teams/about-teams",
+        "type": "article"
+      }
+    ]
  },
  "RMrxQLhrINO5g4Mhxh5qS": {
    "title": "GitHub Organizations",
@@ -1046,12 +1090,12 @@
    "description": "GitHub Organizations allow you to create teams within your organization, which helps in organizing members based on their roles and responsibilities.\n\n*   Grouping: Team members can be grouped together according to the company or group's structure.\n*   Access permissions: Access permissions can be cascaded from one team member to another.\n*   Mentions: Team mentions allow for easy referencing of specific teams in repository discussions.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Organizing members into teams",
+        "title": "Organizing Members into Teams",
        "url": "https://docs.github.com/en/organizations/organizing-members-into-teams",
        "type": "article"
      },
      {
-        "title": "Best practices for organizations and teams using GitHub Enterprise Cloud",
+        "title": "Best Practices for Organizations and Teams using GitHub Enterprise Cloud",
        "url": "https://github.blog/enterprise-software/devops/best-practices-for-organizations-and-teams-using-github-enterprise-cloud/",
        "type": "article"
      }
@@ -1107,10 +1151,10 @@
  },
  "sxvT2hGko2PDRBoBrCGWD": {
    "title": "Roadmaps",
-    "description": "GitHub roadmaps are a feature that helps you visualize and organize plans for your projects, allowing you to create a high-level view of milestones and goals, and collaborate on planning and tracking progress with team members.\n\nVisit the following resources to learn more:",
+    "description": "GitHub Roadmaps are a feature that helps you visualize and organize plans for your projects, allowing you to create a high-level view of milestones and goals, and collaborate on planning and tracking progress with team members.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Customizing the roadmap layout",
+        "title": "Customizing the Roadmap Layout",
        "url": "https://docs.github.com/en/issues/planning-and-tracking-with-projects/customizing-views-in-your-project/customizing-the-roadmap-layout",
        "type": "article"
      },
@@ -1142,7 +1186,7 @@
    "description": "GitHub Discussions is a collaborative communication feature within GitHub repositories that provides a dedicated space for community conversations, questions, and knowledge sharing. It allows team members, contributors, and users to engage in threaded discussions, share ideas, ask for help, and make announcements outside of specific code changes or issues. This feature enhances project collaboration by centralizing important conversations, reducing noise in the issue tracker, and fostering a sense of community around open-source projects or team initiatives.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "official GitHub Discussions Docs",
+        "title": "GitHub Discussions Docs",
        "url": "https://docs.github.com/en/discussions",
        "type": "article"
      },
@@ -1230,7 +1274,7 @@
  },
  "qFEonbCMLri8iA0yONwuf": {
    "title": "git log options",
-    "description": "`git log` is a command in Git that shows the commit history of your repository. It provides a detailed view of all commits, including their hashes, authors, dates, and messages.\n\nHere are some common git log options:\n\n*   `-2`: Only show the last two commits.\n*   `--all`: Show all branches in the repository.\n*   `--graph`: Display the commit history as a graph.\n*   `--pretty`: Enable clean colorized output.\n*   `--no-color`: Disable colorized output.\n*   `--stat`: Show a statistical summary of changes.\n*   `**-S`: Only show commits with modified files.\n\nYou can combine these options to tailor your log output to suit your needs.\n\nFor example, `git log -2 --graph` will display the last two commits in graph form.\n\nVisit the following resources to learn more:",
+    "description": "`git log` is a command in Git that shows the commit history of your repository. It provides a detailed view of all commits, including their hashes, authors, dates, and messages.\n\nHere are some common git log options:\n\n*   `-2`: Only show the last two commits.\n*   `-- <file-name>`: Show the commits that modified a specific file.\n*   `--all`: Show all branches in the repository.\n*   `--graph`: Display the commit history as a graph.\n*   `--pretty`: Enable clean colorized output.\n*   `--no-color`: Disable colorized output.\n*   `--stat`: Show a statistical summary of changes.\n*   `**-S`: Only show commits with modified files.\n\nYou can combine these options to tailor your log output to suit your needs.\n\nFor example, `git log -2 --graph` will display the last two commits in graph form.\n\nVisit the following resources to learn more:",
    "links": [
      {
        "title": "Git Log",
@@ -1246,8 +1290,24 @@
  },
  "0Yi4cryT2v2SGBjouOas3": {
    "title": "Undoing Changes",
-    "description": "If mistakes or unwanted changes have been committed to your Git repository, there are ways to correct them. Two common methods for reverting changes include:\n\n*   Git Reset: Resets the branch to a previous commit.\n*   Git Revert: Creates a new commit that reverts specified changes.",
-    "links": []
+    "description": "If mistakes or unwanted changes have been committed to your Git repository, there are ways to correct them. Two common methods for reverting changes include:\n\n*   Git Reset: Resets the branch to a previous commit.\n*   Git Revert: Creates a new commit that reverts specified changes.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Undoing Changes",
+        "url": "https://git-scm.com/book/en/v2/Git-Tools-Reset-Demystified",
+        "type": "article"
+      },
+      {
+        "title": "Undo Anything in Git",
+        "url": "https://github.blog/open-source/git/how-to-undo-almost-anything-with-git/",
+        "type": "article"
+      },
+      {
+        "title": "Undoing Changes in Git",
+        "url": "https://www.atlassian.com/git/tutorials/undoing-changes",
+        "type": "article"
+      }
+    ]
  },
  "dLr55Om7IOvI53c1DgTKc": {
    "title": "git revert",
@@ -1270,7 +1330,7 @@
    "description": "Git reset is a command that allows you to \"undo\" or reset your current branch to a previous state by moving its HEAD pointer, effectively discarding changes made since then. When using git reset, it's essential to specify one of the three modes: soft, hard, or mixed. The mode you choose will determine how Git interacts with files in your working directory and staging area.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Git reset",
+        "title": "git reset",
        "url": "https://www.atlassian.com/git/tutorials/undoing-changes/git-reset",
        "type": "article"
      },
@@ -1316,8 +1376,19 @@
  },
  "-0zQvCHG8jS_ghSjmTeIx": {
    "title": "Viewing Diffs",
-    "description": "Viewing diffs in Git is crucial for understanding the changes made to your code. This is especially important when collaborating with others or reviewing your own work over time. Diffs show you exactly what lines have been added, modified, or removed between different versions of your files. This feature helps in code review processes, troubleshooting issues, and maintaining a clear history of your project's evolution. Git provides various commands and tools to view these differences, making it easier to track and manage changes effectively.",
-    "links": []
+    "description": "Viewing diffs in Git is crucial for understanding the changes made to your code. This is especially important when collaborating with others or reviewing your own work over time. Diffs show you exactly what lines have been added, modified, or removed between different versions of your files. This feature helps in code review processes, troubleshooting issues, and maintaining a clear history of your project's evolution. Git provides various commands and tools to view these differences, making it easier to track and manage changes effectively.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Git Diff Documentation",
+        "url": "https://git-scm.com/docs/git-diff",
+        "type": "article"
+      },
+      {
+        "title": "Git Diff",
+        "url": "https://www.atlassian.com/git/tutorials/saving-changes/git-diff",
+        "type": "article"
+      }
+    ]
  },
  "Rwpeltygwzcf6hnuZNURE": {
    "title": "Between Commits",
@@ -1385,8 +1456,19 @@
  },
  "sOoC-XxEoIvwKct00oKlX": {
    "title": "Rewriting History",
-    "description": "In certain situations, you might need to modify or remove commits from your Git repository's history. This can be achieved using various methods:\n\n*   `git commit --amend`: Allows you to edit the most recent commit.\n*   `git rebase`: Replaces one branch with another, preserving the commit history.\n*   `git filter-branch`: Removes specific commits from a branch without altering the original branch.\n*   `git push --force`: Updates the remote repository while respecting existing pull requests.\n\nRewriting history in Git is typically necessary when:\n\n*   Fixing mistakes: Correcting errors or typos in commit messages.\n*   Removing sensitive data: Deleting confidential information from commits, like API keys or database credentials.\n*   Simplifying complex histories: Reorganizing branches to improve clarity and reduce complexity.",
-    "links": []
+    "description": "In certain situations, you might need to modify or remove commits from your Git repository's history. This can be achieved using various methods:\n\n*   `git commit --amend`: Allows you to edit the most recent commit.\n*   `git rebase`: Replaces one branch with another, preserving the commit history.\n*   `git filter-branch`: Removes specific commits from a branch without altering the original branch.\n*   `git push --force`: Updates the remote repository while respecting existing pull requests.\n\nRewriting history in Git is typically necessary when:\n\n*   Fixing mistakes: Correcting errors or typos in commit messages.\n*   Removing sensitive data: Deleting confidential information from commits, like API keys or database credentials.\n*   Simplifying complex histories: Reorganizing branches to improve clarity and reduce complexity.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Git Tools - Rewriting History",
+        "url": "https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History",
+        "type": "article"
+      },
+      {
+        "title": "Methods of Rewriting History in Git",
+        "url": "https://www.atlassian.com/git/tutorials/rewriting-history",
+        "type": "article"
+      }
+    ]
  },
  "NjPnEXLf1Lt9qzgxccogv": {
    "title": "git commit --amend",
@@ -1419,7 +1501,7 @@
        "type": "article"
      },
      {
-        "title": "git rebase ",
+        "title": "git rebase",
        "url": "https://www.atlassian.com/git/tutorials/rewriting-history/git-rebase",
        "type": "article"
      },
@@ -1687,8 +1769,19 @@
  },
  "fjAFNjNNbPOzme9Uk_fDV": {
    "title": "Submodules",
-    "description": "In Git, submodules allow you to include another repository within a project. This feature enables the management of external dependencies as part of the main project.\n\n*   Including external repositories: Submodules can be used to include other Git repositories within your project.\n*   Managing dependencies: They provide a way to manage and track changes in external dependencies.",
-    "links": []
+    "description": "In Git, submodules allow you to include another repository within a project. This feature enables the management of external dependencies as part of the main project.\n\n*   Including external repositories: Submodules can be used to include other Git repositories within your project.\n*   Managing dependencies: They provide a way to manage and track changes in external dependencies.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Git Submodules",
+        "url": "https://git-scm.com/book/en/v2/Git-Tools-Submodules",
+        "type": "article"
+      },
+      {
+        "title": "Git Submodules Tutorial",
+        "url": "https://www.atlassian.com/git/tutorials/git-submodule",
+        "type": "article"
+      }
+    ]
  },
  "x4bnsPVTiX2xOCSyrgWpF": {
    "title": "Adding / Updating",
@@ -1708,7 +1801,7 @@
  },
  "d0-u_-_vtPK8tnUpnj_NB": {
    "title": "What and Why use?",
-    "description": "Git submodules are a feature that allows you to include one Git repository within another. They are useful for managing external dependencies or shared components across projects.\n\nKey points:\n\n1.  Separate repositories with independent histories\n2.  Parent repository tracks specific submodule commits\n3.  Enables code reuse and modular project structure\n4.  Helps manage dependencies and keep main repository focused\n5.  Facilitates collaboration on complex projects\n\nBenefits:\n\n*   Including third-party libraries\n*   Sharing common code\n*   Managing multi-component projects\n*   Keeping main repository lightweight\n\nNote: While powerful, submodules can add complexity to your workflow, so careful consideration is needed before implementation.\n\nLearn more from the following resources:",
+    "description": "Git submodules are a feature that allows you to include one Git repository within another. They are useful for managing external dependencies or shared components across projects.\n\nKey points\n----------\n\n1.  Separate repositories with independent histories\n2.  Parent repository tracks specific submodule commits\n3.  Enables code reuse and modular project structure\n4.  Helps manage dependencies and keep main repository focused\n5.  Facilitates collaboration on complex projects\n\nBenefits\n--------\n\n*   Including third-party libraries\n*   Sharing common code\n*   Managing multi-component projects\n*   Keeping main repository lightweight\n\nNote: While powerful, submodules can add complexity to your workflow, so careful consideration is needed before implementation.\n\nLearn more from the following resources:",
    "links": [
      {
        "title": "Git Submodules: Core Concept, Workflows, and Tips",
@@ -1727,7 +1820,7 @@
    "description": "GitHub CLI is a command-line interface tool that brings GitHub functionality to your terminal. It allows developers to interact with GitHub directly from the command line, enabling them to manage repositories, create issues, pull requests, and perform various GitHub operations without leaving their terminal environment. This powerful tool streamlines workflows, enhances productivity, and provides a seamless integration between local development and GitHub's collaborative features, making it easier for developers to incorporate GitHub into their daily coding routines.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "official GitHub CLI Docs",
+        "title": "GitHub CLI Docs",
        "url": "https://cli.github.com/",
        "type": "article"
      },
@@ -1753,7 +1846,7 @@
        "type": "article"
      },
      {
-        "title": "GitHub CLI quickstart",
+        "title": "GitHub CLI Quickstart",
        "url": "https://docs.github.com/en/github-cli/github-cli/quickstart",
        "type": "article"
      }
@@ -1825,6 +1918,16 @@
        "title": "YouTube: GitHub Actions Playlist",
        "url": "https://www.youtube.com/watch?v=-hVG9z0fCac&list=PLArH6NjfKsUhvGHrpag7SuPumMzQRhUKY&pp=iAQB",
        "type": "course"
+      },
+      {
+        "title": "Github Actions",
+        "url": "https://docs.github.com/en/actions",
+        "type": "article"
+      },
+      {
+        "title": "What are Github Actions",
+        "url": "https://www.youtube.com/watch?v=URmeTqglS58",
+        "type": "video"
      }
    ]
  },
@@ -1832,6 +1935,16 @@
    "title": "YAML Syntax",
    "description": "YAML (YAML Ain't Markup Language) is a human-readable data serialization standard for all programming languages. It is designed to be easily readable by humans while also being machine-parsable. Key features of YAML include:\n\n1.  Simplicity: YAML uses a minimalist syntax with significant whitespace and indentation.\n    \n2.  Versatility: It can represent various data types, including scalars, lists, and associative arrays.\n    \n3.  Readability: Its clear, concise format makes it easy for both humans and machines to understand.\n    \n4.  Language-independent: YAML can be used with any programming language that has a YAML parser.\n    \n\nYAML is commonly used for:\n\n*   Configuration files: Many applications and tools use YAML for their configuration settings.\n*   Data exchange: It serves as a lightweight alternative to XML or JSON for data transfer between systems.\n*   Data storage: YAML can be used to store structured data in a human-readable format.\n*   DevOps and CI/CD: It's widely used in tools like Docker, Kubernetes, and various CI/CD platforms for defining workflows and configurations.\n\nUnderstanding YAML syntax is crucial for working with modern development tools, especially in the realms of DevOps, cloud computing, and containerization.\n\nLearn more from the following resources:",
    "links": [
+      {
+        "title": "YAML",
+        "url": "https://yaml.org/",
+        "type": "article"
+      },
+      {
+        "title": "YAML Cheatsheet",
+        "url": "https://cheatsheets.zip/yaml",
+        "type": "article"
+      },
      {
        "title": "What is YAML?",
        "url": "https://circleci.com/blog/what-is-yaml-a-beginner-s-guide/",
@@ -1980,7 +2093,7 @@
  },
  "PUnYNBrAZWoZiopjtNgnA": {
    "title": "Usecases",
-    "description": "GitHub Actions offer a wide range of automation possibilities for your development workflow. Here are some common use cases:\n\n1.  Continuous Integration (CI): Automatically build and test your code on every push or pull request.\n2.  Continuous Deployment (CD): Automatically deploy your application to various environments after successful builds.\n3.  Code Quality Checks: Run linters, formatters, and other code quality tools automatically.\n4.  Dependency Updates: Automatically create pull requests for outdated dependencies.\n5.  Issue and PR Management: Automatically label, assign, or close issues and pull requests based on certain conditions.\n6.  Scheduled Tasks: Run periodic maintenance tasks, backups, or data processing jobs.\n7.  Security Scanning: Perform automated security checks on your codebase and dependencies.\n8.  Documentation Generation: Automatically generate and publish documentation for your project.\n9.  Cross-platform Testing: Test your code on multiple operating systems and environments simultaneously.\n10.  Release Management: Automate the creation of release notes and asset uploads for new versions.\n\nThese use cases demonstrate how GitHub Actions can streamline your development process, improve code quality, and increase productivity.\n\nLearn more from the following resources:",
+    "description": "GitHub Actions offer a wide range of automation possibilities for your development workflow. Here are some common use cases:\n\n1.  Continuous Integration (CI): Automatically build and test your code on every push or pull request.\n2.  Continuous Deployment (CD): Automatically deploy your application to various environments after successful builds.\n3.  Code Quality Checks: Run linters, formatters, and other code quality tools automatically.\n4.  Dependency Updates: Automatically create pull requests for outdated dependencies.\n5.  Issue and PR Management: Automatically label, assign, or close issues and pull requests based on certain conditions.\n6.  Scheduled Tasks: Run periodic maintenance tasks, backups, or data processing jobs.\n7.  Security Scanning: Perform automated security checks on your codebase and dependencies.\n8.  Documentation Generation: Automatically generate and publish documentation for your project.\n9.  Cross-platform Testing: Test your code on multiple operating systems and environments simultaneously.\n10.  Release Management: Automate the creation of release notes and asset uploads for new versions.\n\nLearn more from the following resources:",
    "links": [
      {
        "title": "GitHub Actions Documentation",
@@ -2147,12 +2260,12 @@
    "description": "The GitHub API is a powerful tool that allows developers to interact with the GitHub platform programmatically. It provides access to various GitHub features, such as user data, repository information, and commit history, through both REST and GraphQL interfaces. The API supports authentication, implements rate limiting, and offers webhooks for real-time notifications, enabling developers to automate tasks, create custom integrations, and build applications that leverage GitHub's functionality.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "official API Docs",
+        "title": "Github API Docs",
        "url": "https://docs.github.com/en/rest?apiVersion=2022-11-28",
        "type": "article"
      },
      {
-        "title": "Getting started",
+        "title": "Getting Started",
        "url": "https://docs.github.com/en/rest/using-the-rest-api/getting-started-with-the-rest-api?apiVersion=2022-11-28",
        "type": "article"
      }
@@ -2280,7 +2393,7 @@
        "type": "article"
      },
      {
-        "title": "Ceating a GitHub Pages site",
+        "title": "Creating a GitHub Pages site",
        "url": "https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site",
        "type": "article"
      },
@@ -2296,12 +2409,12 @@
    "description": "A GitHub Gist is a small code or text snippet that can be shared with others. It is a simple way to share code, configuration files, or other snippets of text without creating a full-fledged repository. Gists are useful for sharing examples, demos, or tutorials, and they can also serve as a starting point for larger projects. Each gist has a unique URL that can be shared with others, allowing them to view and edit the content. Gists support various file types, including code files, text files, and even images. They also provide features like syntax highlighting, line numbers, and commit history.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Creating gists",
+        "title": "Creating Gists",
        "url": "https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists",
        "type": "article"
      },
      {
-        "title": "REST API endpoints for gists",
+        "title": "REST API endpoints for Gists",
        "url": "https://docs.github.com/en/rest/gists/gists?apiVersion=2022-11-28",
        "type": "article"
      }
@@ -2344,7 +2457,7 @@
    "description": "On GitHub Pages, users can customize their site's URL by connecting a custom domain to their repository. This feature allows users to use their own domain name instead of the default [GitHub.io](http://GitHub.io) subdomain, giving their site a more professional and personalized look.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Configuring a custom domain for your GitHub Pages site",
+        "title": "Configuring a Custom Domain for Your GitHub Pages Site",
        "url": "https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site",
        "type": "article"
      },
@@ -2467,7 +2580,7 @@
        "type": "article"
      },
      {
-        "title": "Dependabot quickstart guide",
+        "title": "Dependabot Quick-start Guide",
        "url": "https://docs.github.com/en/code-security/getting-started/dependabot-quickstart-guide",
        "type": "article"
      },
--- a/public/roadmap-content/ios.json
+++ b/public/roadmap-content/ios.json
@@ -112,8 +112,29 @@
  },
  "IduGSdUa2Fi7VFMLKgmsS": {
    "title": "iOS Architecture",
-    "description": "",
-    "links": []
+    "description": "iOS architecture refers to the design principles and patterns used to build iOS applications. It focuses on how to structure code, manage data, and ensure a smooth user experience. These architectural patterns help developers create maintainable, scalable, and testable applications while following best practices specific to iOS development. Use cases of these architectures may vary according to the requirements of the application. For example, MVC is used for simple apps, while MVVM is considered when the app is large and complex.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Model-View-Controller Pattern in swift (MVC) for Beginners",
+        "url": "https://ahmedaminhassanismail.medium.com/model-view-controller-pattern-in-swift-mvc-for-beginners-35db8d479832",
+        "type": "article"
+      },
+      {
+        "title": "MVVM in iOS Swift",
+        "url": "https://medium.com/@zebayasmeen76/mvvm-in-ios-swift-6afb150458fd",
+        "type": "article"
+      },
+      {
+        "title": "MVC Design Pattern Explained with Example",
+        "url": "https://youtu.be/sbYaWJEAYIY?t=2",
+        "type": "video"
+      },
+      {
+        "title": "MVVM Design Pattern Explained with Example",
+        "url": "https://www.youtube.com/watch?v=sLHVxnRS75w",
+        "type": "video"
+      }
+    ]
  },
  "IdGdLNgJI3WmONEFsMq-d": {
    "title": "Core OS",
--- a/public/roadmap-content/mlops.json
+++ b/public/roadmap-content/mlops.json
@@ -1,13 +1,18 @@
 {
  "_7uvOebQUI4xaSwtMjpEd": {
    "title": "Programming Fundamentals",
-    "description": "Programming is the key requirement for MLOps. You need to be proficient in atleast one programming language. Python is the most popular language for MLOps.",
+    "description": "ML programming fundamentals encompass the essential skills and concepts needed to develop machine learning models effectively. Key aspects include understanding data structures and algorithms, as well as proficiency in programming languages commonly used in ML, such as Python and R. Familiarity with libraries and frameworks like TensorFlow, PyTorch, and scikit-learn is crucial for implementing machine learning algorithms and building models. Additionally, concepts such as data preprocessing, feature engineering, model evaluation, and hyperparameter tuning are vital for optimizing performance. A solid grasp of statistics and linear algebra is also important, as these mathematical foundations underpin many ML techniques, enabling practitioners to analyze data and interpret model results accurately.",
    "links": []
  },
  "Vh81GnOUOZvDOlOyI5PwT": {
    "title": "Python",
-    "description": "Python is an interpreted high-level general-purpose programming language. Its design philosophy emphasizes code readability with its significant use of indentation. Its language constructs as well as its object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects. Python is dynamically-typed and garbage-collected. It supports multiple programming paradigms, including structured (particularly, procedural), object-oriented and functional programming. Python is often described as a \"batteries included\" language due to its comprehensive standard library.\n\nTo start learning Python, here are some useful resources:\n\nRemember, practice is key, and the more you work with Python, the more you'll appreciate its utility in the world of cyber security.",
+    "description": "Python is an interpreted high-level general-purpose programming language. Its design philosophy emphasizes code readability with its significant use of indentation. Its language constructs as well as its object-oriented approach aim to help programmers write clear, logical code for small and large-scale projects. Python is dynamically-typed and garbage-collected. It supports multiple programming paradigms, including structured (particularly, procedural), object-oriented and functional programming. Python is often described as a \"batteries included\" language due to its comprehensive standard library.\n\nLearn more from the following resources:",
    "links": [
+      {
+        "title": "Python Roadmap",
+        "url": "https://roadmap.sh/python",
+        "type": "article"
+      },
      {
        "title": "Python.org",
        "url": "https://www.python.org/",
@@ -32,7 +37,7 @@
  },
  "vdVq3RQvQF3mF8PQc6DMg": {
    "title": "Go",
-    "description": "Go is an open source programming language supported by Google. Go can be used to write cloud services, CLI tools, used for API development, and much more.\n\nVisit the following resources to learn more:",
+    "description": "Go, also known as Golang, is an open-source programming language developed by Google that emphasizes simplicity, efficiency, and strong concurrency support. Designed for modern software development, Go features a clean syntax, garbage collection, and built-in support for concurrent programming through goroutines and channels, making it well-suited for building scalable, high-performance applications, especially in cloud computing and microservices architectures. Go's robust standard library and tooling ecosystem, including a powerful package manager and testing framework, further streamline development processes, promoting rapid application development and deployment. Visit the following resources to learn more:",
    "links": [
      {
        "title": "Visit Dedicated Go Roadmap",
@@ -49,16 +54,6 @@
        "url": "https://go.dev/doc/",
        "type": "article"
      },
-      {
-        "title": "Go by Example - annotated example programs",
-        "url": "https://gobyexample.com/",
-        "type": "article"
-      },
-      {
-        "title": "W3Schools Go Tutorial ",
-        "url": "https://www.w3schools.com/go/",
-        "type": "article"
-      },
      {
        "title": "Making a RESTful JSON API in Go",
        "url": "https://thenewstack.io/make-a-restful-json-api-go/",
@@ -75,16 +70,27 @@
        "type": "article"
      },
      {
-        "title": "Go Class by Matt",
-        "url": "https://www.youtube.com/playlist?list=PLoILbKo9rG3skRCj37Kn5Zj803hhiuRK6",
+        "title": "Go Programming Course",
+        "url": "https://www.youtube.com/watch?v=un6ZyFkqFKo",
        "type": "video"
      }
    ]
  },
  "mMzqJF2KQ49TDEk5F3VAI": {
    "title": "Bash",
-    "description": "Understanding bash is essential for MLOps tasks.\n\n*   **Book Suggestion:** _The Linux Command Line, 2nd Edition_ by William E. Shotts",
-    "links": []
+    "description": "Bash (Bourne Again Shell) is a Unix shell and command language used for interacting with the operating system through a terminal. It allows users to execute commands, automate tasks via scripting, and manage system operations. As the default shell for many Linux distributions, it supports command-line utilities, file manipulation, process control, and text processing. Bash scripts can include loops, conditionals, and functions, making it a powerful tool for system administration, automation, and task scheduling.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "bash-guide",
+        "url": "https://github.com/Idnan/bash-guide",
+        "type": "opensource"
+      },
+      {
+        "title": "Bash Scripting Course",
+        "url": "https://www.youtube.com/watch?v=tK9Oc6AEnR4",
+        "type": "video"
+      }
+    ]
  },
  "oUhlUoWQQ1txx_sepD5ev": {
    "title": "Version Control Systems",
@@ -104,8 +110,13 @@
  },
  "06T5CbZAGJU6fJhCmqCC8": {
    "title": "Git",
-    "description": "[Git](https://git-scm.com/) is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.\n\nVisit the following resources to learn more:",
+    "description": "Git is a distributed version control system used to track changes in source code during software development. It enables multiple developers to collaborate on a project by managing versions of code, allowing for branching, merging, and tracking of revisions. Git ensures that changes are recorded with a complete history, enabling rollback to previous versions if necessary. It supports distributed workflows, meaning each developer has a complete local copy of the project’s history, facilitating seamless collaboration, conflict resolution, and efficient management of code across different teams or environments.\n\nVisit the following resources to learn more:",
    "links": [
+      {
+        "title": "Learn Git & GitHub",
+        "url": "https://roadmap.sh/git-github",
+        "type": "article"
+      },
      {
        "title": "Learn Git with Tutorials, News and Tips - Atlassian",
        "url": "https://www.atlassian.com/git",
@@ -130,28 +141,23 @@
  },
  "7t7jSb3YgyWlhgCe8Se1I": {
    "title": "GitHub",
-    "description": "GitHub is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.\n\nVisit the following resources to learn more:",
+    "description": "GitHub is a web-based platform built on top of Git that provides version control, collaboration tools, and project management features for software development. It enables developers to host Git repositories, collaborate on code through pull requests, and review and track changes. GitHub also offers additional features like issue tracking, continuous integration, automated workflows, and documentation hosting. With its social coding environment, GitHub fosters open-source contributions and team collaboration, making it a central hub for many software development projects.\n\nVisit the following resources to learn more:",
    "links": [
+      {
+        "title": "Learn Git & GitHub",
+        "url": "https://roadmap.sh/git-github",
+        "type": "article"
+      },
      {
        "title": "GitHub Website",
        "url": "https://github.com",
-        "type": "opensource"
+        "type": "article"
      },
      {
        "title": "GitHub Documentation",
        "url": "https://docs.github.com/en/get-started/quickstart",
        "type": "article"
      },
-      {
-        "title": "How to Use Git in a Professional Dev Team",
-        "url": "https://ooloo.io/project/github-flow",
-        "type": "article"
-      },
-      {
-        "title": "Learn Git Branching",
-        "url": "https://learngitbranching.js.org/?locale=en_us",
-        "type": "article"
-      },
      {
        "title": "Explore top posts about GitHub",
        "url": "https://app.daily.dev/tags/github?ref=roadmapsh",
@@ -161,28 +167,24 @@
        "title": "What is GitHub?",
        "url": "https://www.youtube.com/watch?v=w3jLJU7DT5E",
        "type": "video"
-      },
-      {
-        "title": "Git vs. GitHub: Whats the difference?",
-        "url": "https://www.youtube.com/watch?v=wpISo9TNjfU",
-        "type": "video"
-      },
-      {
-        "title": "Git and GitHub for Beginners",
-        "url": "https://www.youtube.com/watch?v=RGOj5yH7evk",
-        "type": "video"
-      },
-      {
-        "title": "Git and GitHub - CS50 Beyond 2019",
-        "url": "https://www.youtube.com/watch?v=eulnSXkhE7I",
-        "type": "video"
      }
    ]
  },
  "00GZcwe25QYi7rDzaOoMt": {
    "title": "Cloud Computing",
-    "description": "**Cloud Computing** refers to the delivery of computing services over the internet rather than using local servers or personal devices. These services include servers, storage, databases, networking, software, analytics, and intelligence. Cloud Computing enables faster innovation, flexible resources, and economies of scale. There are various types of cloud computing such as public clouds, private clouds, and hybrids clouds. Furthermore, it's divided into different services like Infrastructure as a Service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS). These services differ mainly in the level of control an organization has over their data and infrastructures.",
-    "links": []
+    "description": "**Cloud Computing** refers to the delivery of computing services over the internet rather than using local servers or personal devices. These services include servers, storage, databases, networking, software, analytics, and intelligence. Cloud Computing enables faster innovation, flexible resources, and economies of scale. There are various types of cloud computing such as public clouds, private clouds, and hybrids clouds. Furthermore, it's divided into different services like Infrastructure as a Service (IaaS), Platform as a Service (PaaS), and Software as a Service (SaaS). These services differ mainly in the level of control an organization has over their data and infrastructures.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "What is cloud computing?",
+        "url": "https://azure.microsoft.com/en-gb/resources/cloud-computing-dictionary/what-is-cloud-computing",
+        "type": "article"
+      },
+      {
+        "title": "What is Cloud Computing? | Amazon Web Services",
+        "url": "https://www.youtube.com/watch?v=mxT233EdY5c",
+        "type": "video"
+      }
+    ]
  },
  "u3E7FGW4Iwdsu61KYFxCX": {
    "title": "AWS / Azure / GCP",
@@ -212,12 +214,28 @@
  },
  "kbfucfIO5KCsuv3jKbHTa": {
    "title": "Cloud-native ML Services",
-    "description": "Most of the cloud providers offer managed services for machine learning. These services are designed to help data scientists and machine learning engineers to build, train, and deploy machine learning models at scale. These services are designed to be cloud-native, meaning they are designed to work with other cloud services and are optimized for the cloud environment.\n\nHere are the services offered by the major cloud providers:\n\n*   **Amazon Web Services (AWS)**: SageMaker\n*   **Google Cloud Platform (GCP)**: AI Platform\n*   **Microsoft Azure**: Azure Machine Learning",
-    "links": []
+    "description": "Most of the cloud providers offer managed services for machine learning. These services are designed to help data scientists and machine learning engineers to build, train, and deploy machine learning models at scale. These services are designed to be cloud-native, meaning they are designed to work with other cloud services and are optimized for the cloud environment.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "AWS Sage Maker",
+        "url": "https://aws.amazon.com/sagemaker/",
+        "type": "article"
+      },
+      {
+        "title": "Azure ML",
+        "url": "https://azure.microsoft.com/en-gb/products/machine-learning",
+        "type": "article"
+      },
+      {
+        "title": "What is Cloud Native?",
+        "url": "https://www.youtube.com/watch?v=fp9_ubiKqFU",
+        "type": "video"
+      }
+    ]
  },
  "tKeejLv8Q7QX40UtOjpav": {
    "title": "Containerization",
-    "description": "Containers are a construct in which [cgroups](https://en.wikipedia.org/wiki/Cgroups), [namespaces](https://en.wikipedia.org/wiki/Linux_namespaces), and [chroot](https://en.wikipedia.org/wiki/Chroot) are used to fully encapsulate and isolate a process. This encapsulated process, called a container image, shares the kernel of the host with other containers, allowing containers to be significantly smaller and faster than virtual machines.\n\nThese images are designed for portability, allowing for full local testing of a static image, and easy deployment to a container management platform.\n\nVisit the following resources to learn more:",
+    "description": "Containers are a construct in which cgroups, namespaces, and chroot are used to fully encapsulate and isolate a process. This encapsulated process, called a container image, shares the kernel of the host with other containers, allowing containers to be significantly smaller and faster than virtual machines.\n\nThese images are designed for portability, allowing for full local testing of a static image, and easy deployment to a container management platform.\n\nVisit the following resources to learn more:",
    "links": [
      {
        "title": "What are Containers?",
@@ -274,8 +292,13 @@
  },
  "XQoK9l-xtN2J8ZV8dw53X": {
    "title": "Kubernetes",
-    "description": "Kubernetes is an [open source](https://github.com/kubernetes/kubernetes) container management platform, and the dominant product in this space. Using Kubernetes, teams can deploy images across multiple underlying hosts, defining their desired availability, deployment logic, and scaling logic in YAML. Kubernetes evolved from Borg, an internal Google platform used to provision and allocate compute resources (similar to the Autopilot and Aquaman systems of Microsoft Azure).\n\nThe popularity of Kubernetes has made it an increasingly important skill for the DevOps Engineer and has triggered the creation of Platform teams across the industry. These Platform engineering teams often exist with the sole purpose of making Kubernetes approachable and usable for their product development colleagues.\n\nVisit the following resources to learn more:",
+    "description": "Kubernetes is an open source container management platform, and the dominant product in this space. Using Kubernetes, teams can deploy images across multiple underlying hosts, defining their desired availability, deployment logic, and scaling logic in YAML. Kubernetes evolved from Borg, an internal Google platform used to provision and allocate compute resources (similar to the Autopilot and Aquaman systems of Microsoft Azure). The popularity of Kubernetes has made it an increasingly important skill for the DevOps Engineer and has triggered the creation of Platform teams across the industry. These Platform engineering teams often exist with the sole purpose of making Kubernetes approachable and usable for their product development colleagues.\n\nVisit the following resources to learn more:",
    "links": [
+      {
+        "title": "Kubernetes Roadmap",
+        "url": "https://roadmap.sh/kubernetes",
+        "type": "article"
+      },
      {
        "title": "Kubernetes Website",
        "url": "https://kubernetes.io/",
@@ -286,11 +309,6 @@
        "url": "https://kubernetes.io/docs/home/",
        "type": "article"
      },
-      {
-        "title": "Primer: How Kubernetes Came to Be, What It Is, and Why You Should Care",
-        "url": "https://thenewstack.io/primer-how-kubernetes-came-to-be-what-it-is-and-why-you-should-care/",
-        "type": "article"
-      },
      {
        "title": "Kubernetes: An Overview",
        "url": "https://thenewstack.io/kubernetes-an-overview/",
@@ -310,28 +328,93 @@
  },
  "ulka7VEVjz6ls5SnI6a6z": {
    "title": "Machine Learning Fundamentals",
-    "description": "An MLOps engineer should have a basic understanding of machine learning models.\n\n*   **Courses:** [MLCourse.ai](https://mlcourse.ai/), [Fast.ai](https://course.fast.ai)\n*   **Book Suggestion:** _Applied Machine Learning and AI for Engineers_ by Jeff Prosise",
-    "links": []
+    "description": "Machine learning fundamentals encompass the key concepts and techniques that enable systems to learn from data and make predictions or decisions without being explicitly programmed. At its core, machine learning involves algorithms that can identify patterns in data and improve over time with experience. Key areas include supervised learning (where models are trained on labeled data), unsupervised learning (where models identify patterns in unlabeled data), and reinforcement learning (where agents learn to make decisions based on feedback from their actions). Essential components also include data preprocessing, feature selection, model training, evaluation metrics, and the importance of avoiding overfitting. Understanding these fundamentals is crucial for developing effective machine learning applications across various domains. Learn more from the following resources:",
+    "links": [
+      {
+        "title": "Fundamentals of Machine Learning - Microsoft",
+        "url": "https://learn.microsoft.com/en-us/training/modules/fundamentals-machine-learning/",
+        "type": "course"
+      },
+      {
+        "title": "MLCourse.ai",
+        "url": "https://mlcourse.ai/",
+        "type": "course"
+      },
+      {
+        "title": "Fast.ai",
+        "url": "https://course.fast.ai",
+        "type": "course"
+      }
+    ]
  },
  "VykbCu7LWIx8fQpqKzoA7": {
    "title": "Data Engineering Fundamentals",
-    "description": "Data Engineering is essentially dealing with the collection, validation, storage, transformation, and processing of data. The objective is to provide reliable, efficient, and scalable data pipelines and infrastructure that allow data scientists to convert data into actionable insights. It involves steps like data ingestion, data storage, data processing, and data provisioning. Important concepts include designing, building, and maintaining data architecture, databases, processing systems, and large-scale processing systems. It is crucial to have extensive technical knowledge in various tools and programming languages like SQL, Python, Hadoop, and more.",
-    "links": []
+    "description": "Data Engineering is essentially dealing with the collection, validation, storage, transformation, and processing of data. The objective is to provide reliable, efficient, and scalable data pipelines and infrastructure that allow data scientists to convert data into actionable insights. It involves steps like data ingestion, data storage, data processing, and data provisioning. Important concepts include designing, building, and maintaining data architecture, databases, processing systems, and large-scale processing systems. It is crucial to have extensive technical knowledge in various tools and programming languages like SQL, Python, Hadoop, and more.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Data Engineering 101",
+        "url": "https://www.redpanda.com/guides/fundamentals-of-data-engineering",
+        "type": "article"
+      },
+      {
+        "title": "Fundamentals of Data Engineering",
+        "url": "https://www.youtube.com/watch?v=mPSzL8Lurs0",
+        "type": "video"
+      }
+    ]
  },
  "cOg3ejZRYE-u-M0c89IjM": {
    "title": "Data Pipelines",
-    "description": "Data pipelines refer to a set of processes that involve moving data from one system to another, for purposes such as data integration, data migration, data transformation, or data synchronization. These processes can involve a variety of data sources and destinations, and may often require data to be cleaned, enriched, or otherwise transformed along the way. It's a key concept in data engineering to ensure that data is appropriately processed from its source to the location where it will be used, typically a data warehouse, data mart, or a data lake. As such, data pipelines play a crucial part in building an effective and efficient data analytics setup, enabling the flow of data to be processed for insights.\n\nIt is important to understand the difference between ELT and ETL pipelines. ELT stands for Extract, Load, Transform, and refers to a process where data is first extracted from source systems, then loaded into a target system, and finally transformed within the target system. ETL, on the other hand, stands for Extract, Transform, Load, and refers to a process where data is first extracted from source systems, then transformed, and finally loaded into a target system. The choice between ELT and ETL pipelines depends on the specific requirements of the data processing tasks at hand, and the capabilities of the systems involved.",
-    "links": []
+    "description": "Data pipelines are a series of automated processes that transport and transform data from various sources to a destination for analysis or storage. They typically involve steps like data extraction, cleaning, transformation, and loading (ETL) into databases, data lakes, or warehouses. Pipelines can handle batch or real-time data, ensuring that large-scale datasets are processed efficiently and consistently. They play a crucial role in ensuring data integrity and enabling businesses to derive insights from raw data for reporting, analytics, or machine learning.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "What is a data pipeline?",
+        "url": "https://www.ibm.com/topics/data-pipeline",
+        "type": "article"
+      },
+      {
+        "title": "What are data pipelines?",
+        "url": "https://www.youtube.com/watch?v=oKixNpz6jNo",
+        "type": "video"
+      }
+    ]
  },
  "wOogVDV4FIDLXVPwFqJ8C": {
    "title": "Data Lakes & Warehouses",
-    "description": "\"**Data Lakes** are large-scale data repository systems that store raw, untransformed data, in various formats, from multiple sources. They're often used for big data and real-time analytics requirements. Data lakes preserve the original data format and schema which can be modified as necessary. On the other hand, **Data Warehouses** are data storage systems which are designed for analyzing, reporting and integrating with transactional systems. The data in a warehouse is clean, consistent, and often transformed to meet wide-range of business requirements. Hence, data warehouses provide structured data but require more processing and management compared to data lakes.\"",
-    "links": []
+    "description": "\"**Data Lakes** are large-scale data repository systems that store raw, untransformed data, in various formats, from multiple sources. They're often used for big data and real-time analytics requirements. Data lakes preserve the original data format and schema which can be modified as necessary. On the other hand, **Data Warehouses** are data storage systems which are designed for analyzing, reporting and integrating with transactional systems. The data in a warehouse is clean, consistent, and often transformed to meet wide-range of business requirements. Hence, data warehouses provide structured data but require more processing and management compared to data lakes.\"\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Data lake definition",
+        "url": "https://azure.microsoft.com/en-gb/resources/cloud-computing-dictionary/what-is-a-data-lake",
+        "type": "article"
+      },
+      {
+        "title": "What is a data lake?",
+        "url": "https://www.youtube.com/watch?v=LxcH6z8TFpI",
+        "type": "video"
+      },
+      {
+        "title": "@hat is a data warehouse?",
+        "url": "https://www.youtube.com/watch?v=k4tK2ttdSDg",
+        "type": "video"
+      }
+    ]
  },
  "Berd78HvnulNEGOsHCf8n": {
    "title": "Data Ingestion Architecture",
-    "description": "Data ingestion is the process of collecting, transferring, and loading data from various sources to a destination where it can be stored and analyzed. There are several data ingestion architectures that can be used to collect data from different sources and load it into a data warehouse, data lake, or other storage systems. These architectures can be broadly classified into two categories: batch processing and real-time processing. How you choose to ingest data will depend on the volume, velocity, and variety of data you are working with, as well as the latency requirements of your use case.\n\nLambda and Kappa architectures are two popular data ingestion architectures that combine batch and real-time processing to handle large volumes of data efficiently.",
-    "links": []
+    "description": "Data ingestion is the process of collecting, transferring, and loading data from various sources to a destination where it can be stored and analyzed. There are several data ingestion architectures that can be used to collect data from different sources and load it into a data warehouse, data lake, or other storage systems. These architectures can be broadly classified into two categories: batch processing and real-time processing. How you choose to ingest data will depend on the volume, velocity, and variety of data you are working with, as well as the latency requirements of your use case.\n\nLambda and Kappa architectures are two popular data ingestion architectures that combine batch and real-time processing to handle large volumes of data efficiently.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Data Ingestion Patterns",
+        "url": "https://docs.aws.amazon.com/whitepapers/latest/aws-cloud-data-ingestion-patterns-practices/data-ingestion-patterns.html",
+        "type": "article"
+      },
+      {
+        "title": "What is a data pipeline?",
+        "url": "https://www.youtube.com/watch?v=kGT4PcTEPP8",
+        "type": "video"
+      }
+    ]
  },
  "pVSlVHXIap0unFxLGM-lQ": {
    "title": "Airflow",
@@ -414,7 +497,7 @@
  },
  "iTsEHVCo6KGq7H2HMgy5S": {
    "title": "MLOps Principles",
-    "description": "Awareness of MLOps principles and maturity factors is required.\n\n*   **Books:**\n    *   _Designing Machine Learning Systems_ by Chip Huyen\n    *   _Introducing MLOps_ by Mark Treveil and Dataiku\n*   **Assessment:** [MLOps maturity assessment](https://marvelousmlops.substack.com/p/mlops-maturity-assessment)\n*   **Great resource on MLOps:** [ml-ops.org](https://ml-ops.org)",
+    "description": "MLOps (Machine Learning Operations) principles focus on streamlining the deployment, monitoring, and management of machine learning models in production environments. Key principles include:\n\n1.  **Collaboration**: Foster collaboration between data scientists, developers, and operations teams to ensure alignment on model goals, performance, and lifecycle management.\n    \n2.  **Automation**: Automate workflows for model training, testing, deployment, and monitoring to enhance efficiency, reduce errors, and speed up the development lifecycle.\n    \n3.  **Version Control**: Implement version control for both code and data to track changes, reproduce experiments, and maintain model lineage.\n    \n4.  **Continuous Integration and Deployment (CI/CD)**: Establish CI/CD pipelines tailored for machine learning to facilitate rapid model iteration and deployment.\n    \n5.  **Monitoring and Governance**: Continuously monitor model performance and data drift in production to ensure models remain effective and compliant with regulatory requirements.\n    \n6.  **Scalability**: Design systems that can scale to handle varying workloads and accommodate changes in data volume and complexity.\n    \n7.  **Reproducibility**: Ensure that experiments can be reliably reproduced by standardizing environments and workflows, making it easier to validate and iterate on models.\n    \n\nThese principles help organizations efficiently manage the lifecycle of machine learning models, from development to deployment and beyond.",
    "links": []
  },
  "l1xasxQy2vAY34NWaqKEe": {
@@ -445,23 +528,62 @@
  },
  "a6vawajw7BpL6plH_nuAz": {
    "title": "CI/CD",
-    "description": "Critical for traceable and reproducible ML model deployments.\n\n*   **Books:**\n    *   _Learning GitHub Actions_ by Brent Laster\n    *   _Learning Git_ by Anna Skoulikari\n*   **Tutorials & Courses:** [Git & GitHub for beginners](https://www.youtube.com/watch?v=RGOj5yH7evk), [Python to Production guide](https://www.udemy.com/course/setting-up-the-linux-terminal-for-software-development/), [Version Control Missing Semester](https://missing.csail.mit.edu/2020/version-control/), [https://learngitbranching.js.org/](https://learngitbranching.js.org/)\n*   **Tool:** [Pre-commit hooks](https://marvelousmlops.substack.com/p/welcome-to-pre-commit-heaven)",
-    "links": []
+    "description": "CI/CD (Continuous Integration and Continuous Deployment/Delivery) is a software development practice that automates the process of integrating code changes, running tests, and deploying updates. Continuous Integration focuses on regularly merging code changes into a shared repository, followed by automated testing to ensure code quality. Continuous Deployment extends this by automatically releasing every validated change to production, while Continuous Delivery ensures code is always in a deployable state, but requires manual approval for production releases. CI/CD pipelines improve code reliability, reduce integration risks, and speed up the development lifecycle.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "What is CI/CD?",
+        "url": "https://www.redhat.com/en/topics/devops/what-is-ci-cd",
+        "type": "article"
+      },
+      {
+        "title": "CI/CD In 5 Minutes",
+        "url": "https://www.youtube.com/watch?v=42UP1fxi2SY",
+        "type": "video"
+      }
+    ]
  },
  "fes7M--Y8i08_zeP98tVV": {
    "title": "Orchestration",
-    "description": "Systems like Airflow and Mage are important in ML engineering.\n\n*   **Course:** [Introduction to Airflow in Python](https://app.datacamp.com/learn/courses/introduction-to-airflow-in-python)\n*   **Note:** Airflow is also featured in the _ML Engineering with Python_ book and [_The Full Stack 7-Steps MLOps Framework_](https://www.pauliusztin.me/courses/the-full-stack-7-steps-mlops-framework).",
-    "links": []
+    "description": "ML orchestration refers to the process of managing and coordinating the various tasks and workflows involved in the machine learning lifecycle, from data preparation and model training to deployment and monitoring. It involves integrating multiple tools and platforms to streamline operations, automate repetitive tasks, and ensure seamless collaboration among data scientists, engineers, and operations teams. By using orchestration frameworks, organizations can enhance reproducibility, scalability, and efficiency, enabling them to manage complex machine learning pipelines and improve the overall quality of models in production. This ensures that models are consistently updated and maintained, facilitating rapid iteration and adaptation to changing data and business needs.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "ML Observability: what, why, how",
+        "url": "https://ubuntu.com/blog/ml-observability",
+        "type": "article"
+      }
+    ]
  },
  "fGGWKmAJ50Ke6wWJBEgby": {
    "title": "Experiment Tracking & Model Registry",
-    "description": "**Experiment Tracking** is an essential part of MLOps, providing a system to monitor and record the different experiments conducted during the machine learning model development process. This involves capturing, organizing and visualizing the metadata associated with each experiment, such as hyperparameters used, models produced, metrics like accuracy or loss, and other information about the computational environment. This tracking allows for reproducibility of experiments, comparison across different experiment runs, and helps in identifying the best models.\n\nLogging metadata, parameters, and artifacts of training runs.\n\n*   **Tool:** MLflow\n*   **Courses:** [MLflow Udemy course](https://www.udemy.com/course/mlflow-course/), [End-to-end machine learning (MLflow piece)](https://www.udemy.com/course/sustainable-and-scalable-machine-learning-project-development/)",
-    "links": []
+    "description": "**Experiment Tracking** is an essential part of MLOps, providing a system to monitor and record the different experiments conducted during the machine learning model development process. This involves capturing, organizing and visualizing the metadata associated with each experiment, such as hyperparameters used, models produced, metrics like accuracy or loss, and other information about the computational environment. This tracking allows for reproducibility of experiments, comparison across different experiment runs, and helps in identifying the best models.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Experiment Tracking",
+        "url": "https://madewithml.com/courses/mlops/experiment-tracking/#dashboard",
+        "type": "article"
+      },
+      {
+        "title": "ML Flow Model Registry",
+        "url": "https://mlflow.org/docs/latest/model-registry.html",
+        "type": "article"
+      }
+    ]
  },
  "6XgP_2NLuiw654zvTyueT": {
    "title": "Data Lineage & Feature Stores",
-    "description": "**Data Lineage** refers to the life-cycle of data, including its origins, movements, characteristics and quality. It's a critical component in MLOps for tracking the journey of data through every process in a pipeline, from raw input to model output. Data lineage helps in maintaining transparency, ensuring compliance, and facilitating data debugging or tracing data related bugs. It provides a clear representation of data sources, transformations, and dependencies thereby aiding in audits, governance, or reproduction of machine learning models.\n\nFeature stores are a crucial component of MLOps infrastructure.\n\n*   **Tutorial:** Creating a feature store with Feast [Part 1](https://kedion.medium.com/creating-a-feature-store-with-feast-part-1-37c380223e2f) [Part 2](https://kedion.medium.com/feature-storage-for-ml-with-feast-part-2-34df1971a8d3) [Part 3](https://kedion.medium.com/feature-storage-for-ml-with-feast-a061899fc4a2)\n*   **Tool:** DVC for data tracking\n*   **Course:** [End-to-end machine learning (DVC piece)](https://www.udemy.com/course/sustainable-and-scalable-machine-learning-project-development/)",
-    "links": []
+    "description": "**Data Lineage** refers to the life-cycle of data, including its origins, movements, characteristics and quality. It's a critical component in MLOps for tracking the journey of data through every process in a pipeline, from raw input to model output. Data lineage helps in maintaining transparency, ensuring compliance, and facilitating data debugging or tracing data related bugs. It provides a clear representation of data sources, transformations, and dependencies thereby aiding in audits, governance, or reproduction of machine learning models.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "What is Data Lineage?",
+        "url": "https://www.ibm.com/topics/data-lineage",
+        "type": "article"
+      },
+      {
+        "title": "What is a feature store",
+        "url": "https://www.snowflake.com/guides/what-feature-store-machine-learning/",
+        "type": "article"
+      }
+    ]
  },
  "zsW1NRb0dMgS-KzWsI0QU": {
    "title": "Model Training & Serving",
@@ -470,33 +592,39 @@
  },
  "r4fbUwD83uYumEO1X8f09": {
    "title": "Monitoring & Observability",
-    "description": "**Monitoring** in MLOps primarily involves tracking the performance of machine learning (ML) models in production to ensure that they continually deliver accurate and reliable results. Such monitoring is necessary because the real-world data that these models handle may change over time, a scenario known as data drift. These changes can adversely affect model performance. Monitoring helps to detect any anomalies in the model’s behaviour or performance and such alerts can trigger the retraining of models with new data. From a broader perspective, monitoring also involves tracking resources and workflows to detect and rectify any operational issues in the MLOps pipeline.",
+    "description": "**Monitoring** in MLOps primarily involves tracking the performance of machine learning (ML) models in production to ensure that they continually deliver accurate and reliable results. Such monitoring is necessary because the real-world data that these models handle may change over time, a scenario known as data drift. These changes can adversely affect model performance. Monitoring helps to detect any anomalies in the model’s behaviour or performance and such alerts can trigger the retraining of models with new data. From a broader perspective, monitoring also involves tracking resources and workflows to detect and rectify any operational issues in the MLOps pipeline.\n\nLearn more from the following resources:",
    "links": [
      {
-        "title": "ML Monitoring vs Observability article",
-        "url": "https://marvelousmlops.substack.com/p/ml-monitoring-vs-ml-observability",
+        "title": "ML Monitoring vs ML Observability",
+        "url": "https://medium.com/marvelous-mlops/ml-monitoring-vs-ml-observability-understanding-the-differences-fff574a8974f",
        "type": "article"
      },
      {
-        "title": "Machine learning monitoring concepts",
-        "url": "https://app.datacamp.com/learn/courses/machine-learning-monitoring-concepts",
-        "type": "article"
-      },
-      {
-        "title": "Monitoring ML in Python",
-        "url": "https://app.datacamp.com/learn/courses/monitoring-machine-learning-in-python",
-        "type": "article"
-      },
-      {
-        "title": "Prometheus, Grafana",
-        "url": "https://www.udemy.com/course/mastering-prometheus-and-grafana/",
-        "type": "article"
+        "title": "ML Observability vs ML Monitoring: What's the difference?",
+        "url": "https://www.youtube.com/watch?v=k1Reed3QIYE",
+        "type": "video"
      }
    ]
  },
  "sf67bSL7HAx6iN7S6MYKs": {
    "title": "Infrastructure as Code",
-    "description": "Essential for a reproducible MLOps framework.\n\n*   **Course:** [Terraform course for beginners](https://www.youtube.com/watch?v=SLB_c_ayRMo)\n*   **Video:** [8 Terraform best practices by Techworld by Nana](https://www.youtube.com/watch?v=gxPykhPxRW0)\n*   **Book Suggestion:** _Terraform: Up and Running, 3rd Edition_ by Yevgeniy Brikman",
-    "links": []
+    "description": "Infrastructure as Code (IaC) is a modern approach to managing and provisioning IT infrastructure through machine-readable configuration files, rather than manual processes. It enables developers and operations teams to define and manage infrastructure resources—such as servers, networks, and databases—using code, which can be versioned, tested, and deployed like application code. IaC tools, like Terraform and AWS CloudFormation, allow for automated, repeatable deployments, reducing human error and increasing consistency across environments. This practice facilitates agile development, enhances collaboration between teams, and supports scalable and efficient infrastructure management.",
+    "links": [
+      {
+        "title": "What is Infrastructure as Code?",
+        "url": "https://www.redhat.com/en/topics/automation/what-is-infrastructure-as-code-iac",
+        "type": "article"
+      },
+      {
+        "title": "Terraform course for beginners",
+        "url": "https://www.youtube.com/watch?v=SLB_c_ayRMo",
+        "type": "video"
+      },
+      {
+        "title": "8 Terraform best practices",
+        "url": "https://www.youtube.com/watch?v=gxPykhPxRW0",
+        "type": "video"
+      }
+    ]
  }
 }
--- a/public/roadmap-content/nodejs.json
+++ b/public/roadmap-content/nodejs.json
@@ -1244,8 +1244,8 @@
        "type": "article"
      },
      {
-        "title": "Explore top posts about JavaScript",
-        "url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
+        "title": "Explore top posts about NestJS",
+        "url": "https://app.daily.dev/tags/nestjs?ref=roadmapsh",
        "type": "article"
      },
      {
--- a/public/roadmap-content/python.json
+++ b/public/roadmap-content/python.json
@@ -58,6 +58,11 @@
        "title": "Python for Beginners: Data Types",
        "url": "https://thenewstack.io/python-for-beginners-data-types/",
        "type": "article"
+      },
+      {
+        "title": "Python Variables and Data Types",
+        "url": "https://www.youtube.com/playlist?list=PLBlnK6fEyqRhN-sfWgCU1z_Qhakc1AGOn",
+        "type": "video"
      }
    ]
  },
@@ -237,6 +242,11 @@
        "title": "Python \"for\" Loops (Definite Iteration)",
        "url": "https://realpython.com/python-for-loop/#the-guts-of-the-python-for-loop",
        "type": "article"
+      },
+      {
+        "title": "Python For Loops",
+        "url": "https://www.youtube.com/watch?v=KWgYha0clzw",
+        "type": "video"
      }
    ]
  },
@@ -618,6 +628,11 @@
        "title": "OOP in Python One Shot",
        "url": "https://www.youtube.com/watch?v=Ej_02ICOIgs",
        "type": "video"
+      },
+      {
+        "title": "Python OOP Tutorial",
+        "url": "https://www.youtube.com/watch?v=IbMDCwVm63M",
+        "type": "video"
      }
    ]
  },
@@ -1119,16 +1134,10 @@
      }
    ]
  },
-  "_IXXTSwQOgYzYIUuKVWNE": {
+  "virtualenv@_IXXTSwQOgYzYIUuKVWNE.md": {
    "title": "virtualenv",
-    "description": "`virtualenv` is a tool to create isolated Python environments. It creates a folder which contains all the necessary executables to use the packages that a Python project would need.\n\nLearn more about `virtualenv` by visiting the following resources:",
-    "links": [
-      {
-        "title": "Virtual Environments",
-        "url": "https://virtualenv.pypa.io/en/latest/",
-        "type": "article"
-      }
-    ]
+    "description": "",
+    "links": []
  },
  "N5VaKMbgQ0V_BC5tadV65": {
    "title": "pyenv",
--- a/public/roadmap-content/react.json
+++ b/public/roadmap-content/react.json
@@ -222,14 +222,19 @@
    "description": "React follows a declarative approach to rendering components, which means that developers specify what a component should look like, and React takes care of rendering the component to the screen. This is in contrast to an imperative approach, where developers would write code to manually manipulate the DOM (Document Object Model) to update the UI.\n\nThe virtual DOM (VDOM) is an important aspect of how React works. It is a lightweight in-memory representation of the DOM (Document Object Model), and it is used to optimize the rendering of components in a React application.\n\n*   Components are written as JavaScript classes or functions that define a render method. The render method returns a description of what the component should look like, using JSX syntax.\n*   When a component is rendered, React creates a virtual DOM (VDOM) representation of the component. The VDOM is a lightweight in-memory representation of the DOM, and it is used to optimize the rendering of components.\n*   React compares the VDOM representation of the component with the previous VDOM representation (if it exists). If there are differences between the two VDOMs, React calculates the minimum number of DOM updates needed to bring the actual DOM into line with the new VDOM.\n*   React updates the actual DOM with the minimum number of DOM updates needed to reflect the changes in the VDOM.\n\nThis process is known as reconciliation, and it is an important aspect of how React works. By using a declarative approach and a VDOM, React is able to optimize the rendering of components and improve the performance of web applications.\n\nVisit the following resources to learn more:",
    "links": [
      {
-        "title": "Rendering - Official Docs",
-        "url": "https://legacy.reactjs.org/docs/rendering-elements.html",
+        "title": "Render and Commit - Official Docs",
+        "url": "https://react.dev/learn/render-and-commit",
        "type": "article"
      },
      {
        "title": "Rendering in React - ui.dev",
        "url": "https://ui.dev/why-react-renders",
        "type": "article"
+      },
+      {
+        "title": "Fix the slow render before you fix the re-render",
+        "url": "https://kentcdodds.com/blog/fix-the-slow-render-before-you-fix-the-re-render",
+        "type": "article"
      }
    ]
  },
@@ -653,7 +658,7 @@
    "links": [
      {
        "title": "React Documentation on useCallback",
-        "url": "https://reactjs.org/docs/hooks-reference.html#usecallback",
+        "url": "https://react.dev/reference/react/useCallback",
        "type": "article"
      },
      {
--- a/public/roadmap-content/redis.json
+++ b/public/roadmap-content/redis.json
@@ -1,18 +1,41 @@
 {
  "-3pADOHMDQ0H6ZKNjURyn": {
    "title": "What is Redis?",
-    "description": "",
-    "links": []
+    "description": "Redis is an open-source, in-memory data structure store, primarily used as a database, cache, and message broker. It supports various data structures like strings, hashes, lists, sets, and sorted sets, making it highly versatile. Redis operates with extremely low latency due to its in-memory nature, enabling fast access to data. It is often used in real-time applications such as session management, leaderboards, or caching mechanisms, where quick data retrieval is critical. Additionally, Redis supports data persistence by periodically writing the dataset to disk, balancing memory speed with data reliability.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is redis?",
+        "url": "https://redis.io/docs/latest/get-started/",
+        "type": "article"
+      }
+    ]
  },
  "M-EXrTDeAEMz_IkEi-ab4": {
    "title": "In-memory Data Structure Store",
-    "description": "",
-    "links": []
+    "description": "An in-memory database is a purpose-built database that relies primarily on internal memory for data storage. It enables minimal response times by eliminating the need to access standard disk drives (SSDs). In-memory databases are ideal for applications that require microsecond response times or have large spikes in traffic, such as gaming leaderboards, session stores, and real-time data analytics. The terms main memory database (MMDB), in-memory database system (IMDS), and real-time database system (RTDB) also refer to in-memory databases.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Amazon MemoryDB",
+        "url": "https://aws.amazon.com/memorydb/",
+        "type": "article"
+      }
+    ]
  },
  "l2aXyO3STnhbFjvUXPpm2": {
    "title": "Key-value Database",
-    "description": "",
-    "links": []
+    "description": "Key-value Database is a non-relational (NoSQL) database that stores data as a collection of key-value pairs. In this model, each piece of data is associated with a unique identifier (key) that is used to retrieve the corresponding value. This simple structure allows for high performance and scalability, making key-value databases ideal for certain use cases.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is a Key-Value Database?",
+        "url": "https://redis.io/nosql/key-value-databases/",
+        "type": "article"
+      },
+      {
+        "title": "Key Value Store - System Design Interview Basics",
+        "url": "https://www.youtube.com/watch?v=ozJHmm05EXM",
+        "type": "video"
+      }
+    ]
  },
  "eHuBz_zSZK3rubn7nkd7g": {
    "title": "Cache",
@@ -101,8 +124,24 @@
  },
  "NhcZM4nUQoSBBf_1qXi6l": {
    "title": "Basic Commands / SET, GET",
-    "description": "",
-    "links": []
+    "description": "In Redis, the SET and GET commands are fundamental operations used to store and retrieve key-value pairs. Redis is an in-memory key-value store, and these commands form the basis for working with data in Redis.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "SET Docs",
+        "url": "https://redis.io/docs/latest/commands/set/",
+        "type": "article"
+      },
+      {
+        "title": "GET Docs",
+        "url": "https://redis.io/docs/latest/commands/get/",
+        "type": "article"
+      },
+      {
+        "title": "Redis command cheat sheet",
+        "url": "https://redis.io/learn/howtos/quick-start/cheat-sheet",
+        "type": "article"
+      }
+    ]
  },
  "DOdNkTY1yIMipWA2CD9xH": {
    "title": "Settings and Getting Keys",
@@ -141,8 +180,19 @@
  },
  "cPWd53BO6tm-uy4gqLdtZ": {
    "title": "APPEND",
-    "description": "",
-    "links": []
+    "description": "Redis APPEND command is used to add some value in a key. If the key already exists and is a string, this command appends the value at the end of the string. If key does not exist it is created and set as an empty string,\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "APPEND Docs",
+        "url": "https://redis.io/docs/latest/commands/append/",
+        "type": "article"
+      },
+      {
+        "title": "Redis - String Append Command",
+        "url": "https://www.tutorialspoint.com/redis/strings_append.htm",
+        "type": "article"
+      }
+    ]
  },
  "eJQW986HM4Wf1o1i2FnXs": {
    "title": "STRLEN",
@@ -396,7 +446,7 @@
  },
  "jrgaoDnt_RxTu79hk4hCD": {
    "title": "Atomicity in Redis",
-    "description": "",
+    "description": "Atomicity in Redis refers to the property that ensures a set of operations is executed as a single, indivisible unit. This means that either all the operations are executed successfully or none of them are. Atomicity is crucial in Redis to maintain consistency, especially when multiple operations need to be performed together.\n\nLearn more from the following resources:\n\n*   [@official@Atomicity with Lua](https://redis.io/learn/develop/java/spring/rate-limiting/fixed-window/reactive-lua) -[@article@Atomicity in Redis operations](https://lucaspin.medium.com/atomicity-in-redis-operations-a1d7bc9f4a90)",
    "links": []
  },
  "LHlwjN3WHYUBUafzzwsWQ": {
@@ -406,13 +456,30 @@
  },
  "7JzeyTrkZ_1_yxMVrqvZU": {
    "title": "Batch Operations",
-    "description": "",
-    "links": []
+    "description": "Batch operations in Redis allow you to execute multiple commands efficiently in a single network round-trip. While Redis does not have true batching like some databases (where a set of operations are sent together and processed atomically), it provides ways to send multiple commands together to reduce the overhead of individual network requests. These include Pipelining, Transactions (MULTI/EXEC), and Lua Scripting.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Using pipelining to batch issue commands",
+        "url": "https://www.alibabacloud.com/help/en/redis/use-cases/use-pipelining-to-batch-issue-commands#:~:text=You%20can%20use%20the%20Redis,network%20latency%20and%20improving%20performance.",
+        "type": "article"
+      }
+    ]
  },
  "0Q3AkE8leWAyYsww3-BHX": {
    "title": "Bitmaps",
-    "description": "",
-    "links": []
+    "description": "In Redis, Bitmaps are a data structure that allows you to manipulate individual bits within a string value. While Redis doesn't have a native \"bitmap\" data type, it uses strings to represent bitmaps. The power of bitmaps comes from their ability to perform operations on binary data at the bit level, making them extremely memory-efficient for certain types of applications, like tracking the presence/absence of elements (such as daily active users, features, etc.).\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Redis Bitmap docs",
+        "url": "https://redis.io/docs/latest/develop/data-types/bitmaps/",
+        "type": "article"
+      },
+      {
+        "title": "Redis bitmap explained",
+        "url": "https://youtu.be/oj8LdJQjhJo?si=jem54LfPbZtrpnEP",
+        "type": "video"
+      }
+    ]
  },
  "B-YUFhPQNdr1KZNupmR5N": {
    "title": "SETBIT",
@@ -426,8 +493,19 @@
  },
  "jpcyXSSib7q4WBPmpgnXA": {
    "title": "BITCOUNT",
-    "description": "",
-    "links": []
+    "description": "The BITCOUNT command in Redis is used to count the number of bits set to 1 (i.e., the number of binary 1s) in the value stored at a specific key. Since Redis allows string values to be stored as binary data, the BITCOUNT command becomes useful for operations involving bits, like efficiently tracking and counting bits in binary-encoded data.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "BITCOUNT - Docs",
+        "url": "https://redis.io/docs/latest/commands/bitcount/",
+        "type": "article"
+      },
+      {
+        "title": "BITCOUNT",
+        "url": "https://upstash.com/docs/redis/sdks/ts/commands/bitmap/bitcount",
+        "type": "article"
+      }
+    ]
  },
  "tkrxArg_oYH0aQfM8NkD2": {
    "title": "BITOP",
@@ -631,8 +709,19 @@
  },
  "ibaZ34-laQtUyxAsERi7o": {
    "title": "AOF rewrite & compaction",
-    "description": "",
-    "links": []
+    "description": "Persistence refers to the writing of data to durable storage, such as a solid-state disk (SSD). Redis provides a range of persistence options of which AOF (Append Only File) is one of the options. AOF persistence logs every write operation received by the server. These operations can then be replayed again at server startup, reconstructing the original dataset.The rewrite will create a small optimized version of the current Append Only File.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Persistence in redis",
+        "url": "https://redis.io/docs/latest/operate/oss_and_stack/management/persistence/",
+        "type": "article"
+      },
+      {
+        "title": "Enabling redis persistence",
+        "url": "https://youtu.be/qBKnUeR0p10?si=TPvcFtpFMcTZB-Be",
+        "type": "video"
+      }
+    ]
  },
  "9ToKTUqbi-NV5Wcwb21PT": {
    "title": "Truncation / Corruption",
@@ -681,8 +770,14 @@
  },
  "Qy42paiTUsO8HIwbWTMui": {
    "title": "Authentication",
-    "description": "",
-    "links": []
+    "description": "Authentication in Redis is a security feature used to restrict access to the server by requiring clients to authenticate themselves with a password before performing any commands. This helps prevent unauthorized users from connecting to your Redis instance and performing operations.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "AUTH",
+        "url": "https://redis.io/docs/latest/commands/auth/",
+        "type": "article"
+      }
+    ]
  },
  "wsuKH7YwGDV6GYQbdhA4o": {
    "title": "Network Security",
@@ -771,8 +866,19 @@
  },
  "wXRDsNGFckXV_CSiit5sN": {
    "title": "Backup and Recovery",
-    "description": "",
-    "links": []
+    "description": "Backing up and recovering Redis data is crucial for ensuring data persistence and reliability. Redis, by default, stores its data in memory for fast access, but it provides mechanisms to persist data to disk to allow for recovery in case of failure or system restarts. The primary methods for backup and recovery in Redis are RDB snapshots and AOF (Append-Only File). These methods can be used individually or in combination, depending on the specific use case.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Backup and recovery",
+        "url": "https://redis.io/redis-enterprise/technology/backup-disaster-recovery/",
+        "type": "article"
+      },
+      {
+        "title": "Backup & Restore Redis Cluster with Stash",
+        "url": "https://youtu.be/Py_Ivv-2dcQ?si=z8gAAmhlpUBce4jY",
+        "type": "video"
+      }
+    ]
  },
  "Cb-KazR4PuR86VX5oT0zi": {
    "title": "Upgrading Redis",
@@ -791,8 +897,19 @@
  },
  "cybF72wlJyJbHLUjitLvn": {
    "title": "Active-Active geo Distribution",
-    "description": "",
-    "links": []
+    "description": "An Active-Active architecture is a data resiliency architecture that distributes the database information over multiple data centers via independent and geographically distributed clusters and nodes. It is a network of separate processing nodes, each having access to a common replicated database such that all nodes can participate in a common application ensuring local low latency with each region being able to run in isolation.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Active-Active geo-distribution",
+        "url": "https://redis.io/active-active/",
+        "type": "article"
+      },
+      {
+        "title": "What is active active geo-distribution",
+        "url": "https://youtu.be/x5iHPPZIlQg?si=ZZCwU-tDCIVDboXc",
+        "type": "video"
+      }
+    ]
  },
  "sWOFnbh2EyaHRzquz1UeF": {
    "title": "Redis on Flash",
--- a/public/roadmap-content/software-architect.json
+++ b/public/roadmap-content/software-architect.json
@@ -10,7 +10,7 @@
    "links": [
      {
        "title": "What is Software Architecture in Software Engineering?",
-        "url": "https://webcache.googleusercontent.com/search?q=cache:ya4xvYaEckQJ:https://www.future-processing.com/blog/what-is-software-architecture-in-software-engineering/&cd=1&hl=es-419&ct=clnk&gl=ar",
+        "url": "https://www.future-processing.com/blog/what-is-software-architecture-in-software-engineering/",
        "type": "article"
      },
      {
@@ -1182,17 +1182,12 @@
      },
      {
        "title": "React Website",
-        "url": "https://reactjs.org/",
+        "url": "https://react.dev/",
        "type": "article"
      },
      {
        "title": "Official Getting Started",
-        "url": "https://reactjs.org/tutorial/tutorial.html",
-        "type": "article"
-      },
-      {
-        "title": "Beta React Docs",
-        "url": "https://reactjs.org/",
+        "url": "https://react.dev/learn/tutorial-tic-tac-toe",
        "type": "article"
      },
      {
@@ -1402,8 +1397,19 @@
  },
  "Rq1Wi-cHjS54SYo-Btp-e": {
    "title": "ITIL",
-    "description": "",
-    "links": []
+    "description": "**ITIL (Information Technology Infrastructure Library)** is a set of best practices for IT service management, designed to align IT services with business needs. Its primary focus is the efficient and effective delivery of value through managing the IT service lifecycle, which includes five phases: `Strategy`, `Design`, `Transition`, `Operation`, and `Continual Service Improvement`. ITIL includes key processes such as incident management, problem management, change management, configuration management, and service level agreements (SLAs). These practices aim to optimize performance, service quality, and customer satisfaction. Adopting ITIL helps organizations improve operational efficiency, reduce risks, and maintain clear control over IT services over time.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Documentation",
+        "url": "https://www.axelos.com/certifications/itil-service-management/itil-4-foundation",
+        "type": "article"
+      },
+      {
+        "title": "What is ITIL?",
+        "url": "https://www.youtube.com/watch?v=wgnpfMK8vDk",
+        "type": "video"
+      }
+    ]
  },
  "SJ5lrlvyXgtAwOx4wvT2W": {
    "title": "Prince2",
--- a/public/roadmap-content/typescript.json
+++ b/public/roadmap-content/typescript.json
@@ -401,7 +401,7 @@
  },
  "HD1UGOidp7JGKdW6CEdQ_": {
    "title": "satisfies keyword",
-    "description": "TypeScript developers are often faced with a dilemma: we want to ensure that some expression matches some type, but also want to keep the most specific type of that expression for inference purposes.\n\nFor example:\n\n    // Each property can be a string or an RGB tuple.\n    const palette = {\n      red: [255, 0, 0],\n      green: '#00ff00',\n      bleu: [0, 0, 255],\n      //  ^^^^ sacrebleu - we've made a typo!\n    };\n    \n    // We want to be able to use array methods on 'red'...\n    const redComponent = palette.red.at(0);\n    \n    // or string methods on 'green'...\n    const greenNormalized = palette.green.toUpperCase();\n    \n\nNotice that we’ve written `bleu`, whereas we probably should have written `blue`. We could try to catch that `bleu` typo by using a type annotation on palette, but we’d lose the information about each property.\n\n    type Colors = 'red' | 'green' | 'blue';\n    type RGB = [red: number, green: number, blue: number];\n    \n    const palette: Record<Colors, string | RGB> = {\n      red: [255, 0, 0],\n      green: '#00ff00',\n      bleu: [0, 0, 255],\n      //  ~~~~ The typo is now correctly detected\n    };\n    // But we now have an undesirable error here - 'palette.red' \"could\" be a string.\n    const redComponent = palette.red.at(0);\n    \n\nThe `satisfies` operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression. As an example, we could use `satisfies` to validate that all the properties of palette are compatible with `string | number[]`:\n\n    type Colors = 'red' | 'green' | 'blue';\n    type RGB = [red: number, green: number, blue: number];\n    \n    const palette = {\n      red: [255, 0, 0],\n      green: '#00ff00',\n      bleu: [0, 0, 255],\n      //  ~~~~ The typo is now caught!\n    } satisfies Record<Colors, string | RGB>;\n    \n    // Both of these methods are still accessible!\n    const redComponent = palette.red.at(0);\n    const greenNormalized = palette.green.toUpperCase();\n    \n\nLearn more from the following resources:",
+    "description": "The `satisfies` operator lets us validate that the type of an expression matches some type, without changing the resulting type of that expression.\n\nLearn more from the following resources:",
    "links": [
      {
        "title": "satisfies Keyword",
--- a/public/roadmaps/ai-engineer.png
+++ b/public/roadmaps/ai-engineer.png
--- a/scripts/compress-images.ts
+++ b/scripts/compress-images.ts
@@ -90,9 +90,6 @@ const COMPRESS_CONFIG = {
      case '.avif':
        imageBuffer = await sharp(image).avif(COMPRESS_CONFIG.avif).toBuffer();
        break;
-      case '.gif':
-        imageBuffer = await sharp(image).gif(COMPRESS_CONFIG.gif).toBuffer();
-        break;
      case '.heif':
        imageBuffer = await sharp(image).heif().toBuffer();
        break;
@@ -111,6 +108,8 @@ const COMPRESS_CONFIG = {
      case '.webp':
        imageBuffer = await sharp(image).webp(COMPRESS_CONFIG.webp).toBuffer();
        break;
+      case '.gif':
+        continue;
    }

    if (!imageBuffer) {
--- a/src/api/leaderboard.ts
+++ b/src/api/leaderboard.ts
@@ -1,7 +1,7 @@
 import { type APIContext } from 'astro';
 import { api } from './api.ts';

-export type LeadeboardUserDetails = {
+export type LeaderboardUserDetails = {
  id: string;
  name: string;
  avatar?: string;
@@ -10,12 +10,19 @@ export type LeadeboardUserDetails = {

 export type ListLeaderboardStatsResponse = {
  streaks: {
-    active: LeadeboardUserDetails[];
-    lifetime: LeadeboardUserDetails[];
+    active: LeaderboardUserDetails[];
+    lifetime: LeaderboardUserDetails[];
  };
  projectSubmissions: {
-    currentMonth: LeadeboardUserDetails[];
-    lifetime: LeadeboardUserDetails[];
+    currentMonth: LeaderboardUserDetails[];
+    lifetime: LeaderboardUserDetails[];
+  };
+  githubContributors: {
+    currentMonth: LeaderboardUserDetails[];
+  };
+  referrals: {
+    currentMonth: LeaderboardUserDetails[];
+    lifetime: LeaderboardUserDetails[];
  };
 };

--- a/src/components/AccountStreak/AccountStreak.tsx
+++ b/src/components/AccountStreak/AccountStreak.tsx
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { isLoggedIn } from '../../lib/jwt';
 import { httpGet } from '../../lib/http';
 import { useToast } from '../../hooks/use-toast';
-import { Flame, X, Zap, ZapOff } from 'lucide-react';
+import { Zap, ZapOff } from 'lucide-react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { StreakDay } from './StreakDay';
 import {
@@ -11,15 +11,8 @@ import {
 } from '../../stores/page.ts';
 import { useStore } from '@nanostores/react';
 import { cn } from '../../lib/classname.ts';
-import { $accountStreak } from '../../stores/streak.ts';
-
-type StreakResponse = {
-  count: number;
-  longestCount: number;
-  previousCount?: number | null;
-  firstVisitAt: Date;
-  lastVisitAt: Date;
-};
+import { $accountStreak, type StreakResponse } from '../../stores/streak.ts';
+import { InviteFriends } from './InviteFriends.tsx';

 type AccountStreakProps = {};

@@ -111,7 +104,7 @@ export function AccountStreak(props: AccountStreakProps) {
          ref={dropdownRef}
          className="absolute right-0 top-full z-50 w-[335px] translate-y-1 rounded-lg bg-slate-800 shadow-xl"
        >
-          <div className="py-3 pl-4 pr-5">
+          <div className="py-5 pl-4 pr-5">
            <div className="flex items-center justify-between gap-2 text-sm text-slate-500">
              <p>
                Current Streak
@@ -127,7 +120,7 @@ export function AccountStreak(props: AccountStreakProps) {
              </p>
            </div>

-            <div className="mb-5 mt-8">
+            <div className="mb-6 mt-9">
              <div className="grid grid-cols-10 gap-1">
                {Array.from({ length: totalCircles }).map((_, index) => {
                  let dayCount,
@@ -181,14 +174,13 @@ export function AccountStreak(props: AccountStreakProps) {
              </div>
            </div>

-            <p className="-mt-[0px] mb-[1.75px] text-center text-xs tracking-wide text-slate-600">
+            <p className="-mt-[0px] mb-[1.5px] text-center text-xs tracking-wide text-slate-500">
              Visit every day to keep your streak going!
            </p>
-            <p className='text-xs mt-1.5 text-center'>
-              <a href="/leaderboard" className="text-purple-400 hover:underline underline-offset-2">
-                See how you compare to others
-              </a>
-            </p>
+
+            <InviteFriends
+              refByUserCount={accountStreak?.refByUserCount || 0}
+            />
          </div>
        </div>
      )}
--- a/src/components/AccountStreak/InviteFriends.tsx
+++ b/src/components/AccountStreak/InviteFriends.tsx
@@ -0,0 +1,88 @@
+import { Copy, Heart } from 'lucide-react';
+import { useAuth } from '../../hooks/use-auth';
+import { useCopyText } from '../../hooks/use-copy-text';
+import { cn } from '../../lib/classname';
+import { CheckIcon } from '../ReactIcons/CheckIcon';
+import { TrophyEmoji } from '../ReactIcons/TrophyEmoji.tsx';
+
+type InviteFriendsProps = {
+  refByUserCount: number;
+};
+
+export function InviteFriends(props: InviteFriendsProps) {
+  const { refByUserCount } = props;
+
+  const user = useAuth();
+  const { copyText, isCopied } = useCopyText();
+
+  const referralLink = new URL(
+    `/signup?rc=${user?.id}`,
+    import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh',
+  ).toString();
+
+  return (
+    <div className="-mx-4 mt-6 flex flex-col border-t border-dashed border-t-slate-600 px-4 pt-5 text-center text-sm">
+      <p className="text-slate-500">Invite people to join roadmap.sh</p>
+
+      <div className="flex flex-col items-center rounded-lg bg-slate-900/40 pb-4 pt-5 my-4">
+        <p className="text-xs text-slate-500">
+          {refByUserCount === 0 && <>You haven't invited anyone yet.</>}
+          {refByUserCount > 0 && refByUserCount < 10 && (
+            <>{refByUserCount} of 10 users joined</>
+          )}
+        </p>
+
+        {refByUserCount >= 10 && <>🎉 You've invited {refByUserCount} users</>}
+
+        <div className="my-3 flex flex-row items-center justify-center gap-1">
+          {Array.from({ length: 10 }).map((_, index) => (
+            <Heart
+              key={index}
+              className={cn(
+                'size-[23px] fill-current',
+                index < refByUserCount ? 'text-yellow-300' : 'text-slate-700',
+              )}
+            />
+          ))}
+        </div>
+        <p className={'mb-3 text-xs text-slate-500'}>
+          Share the link below with anyone you think would benefit from using
+          roadmap.sh
+        </p>
+        <p className="text-slate-500">
+          <button
+            onClick={() => {
+              copyText(referralLink);
+            }}
+            className={cn(
+              'rounded-md hover:bg-slate-500/80 hover:text-slate-100 px-3 py-1 text-xs text-slate-300 bg-slate-600',
+              {
+                'bg-green-500 text-black hover:text-black hover:bg-green-500': isCopied,
+              },
+            )}
+          >
+            {!isCopied ? 'Copy Invite Link' : 'Invite Link Copied'}{' '}
+            {!isCopied && (
+              <Copy
+                className="relative -top-[1.25px] ml-1.5 inline-block size-3"
+                strokeWidth={3}
+              />
+            )}
+            {isCopied && (
+              <CheckIcon additionalClasses="relative ml-1.5 -top-[1.25px] inline-block size-3" />
+            )}
+          </button>
+        </p>
+      </div>
+
+      <p className="text-center text-xs">
+        <a
+          href="/leaderboard"
+          className="text-purple-400 underline-offset-2 hover:underline"
+        >
+          See how you rank on the leaderboard
+        </a>
+      </p>
+    </div>
+  );
+}
--- a/src/components/AuthenticationFlow/EmailSignupForm.tsx
+++ b/src/components/AuthenticationFlow/EmailSignupForm.tsx
@@ -1,5 +1,7 @@
-import { type FormEvent, useState } from 'react';
+import { type FormEvent, useEffect, useState } from 'react';
 import { httpPost } from '../../lib/http';
+import { deleteUrlParam, getUrlParams } from '../../lib/browser';
+import { isLoggedIn, setAIReferralCode } from '../../lib/jwt';

 type EmailSignupFormProps = {
  isDisabled?: boolean;
@@ -9,6 +11,9 @@ type EmailSignupFormProps = {
 export function EmailSignupForm(props: EmailSignupFormProps) {
  const { isDisabled, setIsDisabled } = props;

+  const { rc: referralCode } = getUrlParams() as {
+    rc?: string;
+  };
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
@@ -47,6 +52,16 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
    )}`;
  };

+  useEffect(() => {
+    if (!referralCode || isLoggedIn()) {
+      deleteUrlParam('rc');
+      return;
+    }
+
+    setAIReferralCode(referralCode);
+    deleteUrlParam('rc');
+  }, []);
+
  return (
    <form className="flex w-full flex-col gap-2" onSubmit={onSubmit}>
      <label htmlFor="name" className="sr-only">
@@ -72,7 +87,7 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
        type="email"
        autoComplete="email"
        required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2  outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
        placeholder="Email Address"
        value={email}
        onInput={(e) => setEmail(String((e.target as any).value))}
--- a/src/components/Changelog/ChangelogItem.astro
+++ b/src/components/Changelog/ChangelogItem.astro
@@ -1,7 +1,7 @@
 ---
-import type { ChangelogFileType } from '../../lib/changelog';
 import { DateTime } from 'luxon';
-import MarkdownFile from '../MarkdownFile.astro';
+import type { ChangelogFileType } from '../../lib/changelog';
+import ChangelogImages from '../ChangelogImages';

 interface Props {
  changelog: ChangelogFileType;
@@ -15,21 +15,29 @@ const formattedDate = DateTime.fromISO(frontmatter.date).toFormat(
 );
 ---

-<div class='relative'>
-  <span class='h-2 w-2 flex-shrink-0 rounded-full bg-gray-300 absolute top-2 -left-6'></span>
+<div class='relative mb-6' id={changelog.id}>
+  <span
+    class='absolute -left-6 top-2 h-2 w-2 flex-shrink-0 rounded-full bg-gray-300'
+  ></span>

-  <div class='mb-3 flex items-center gap-2'>
+  <div class='mb-3 flex flex-col sm:flex-row items-start sm:items-center gap-0.5 sm:gap-2'>
    <span class='flex-shrink-0 text-xs tracking-wide text-gray-400'>
      {formattedDate}
    </span>
-    <span class='truncate text-base font-medium'>
+    <span class='truncate text-base font-medium text-balance'>
      {changelog.frontmatter.title}
    </span>
  </div>

  <div class='rounded-xl border bg-white p-6'>
+    {frontmatter.images && (
+      <div class='mb-5 hidden sm:block -mx-6'>
+        <ChangelogImages images={frontmatter.images} client:load />
+      </div>
+    )}
+
    <div
-      class='prose prose-h2:text-lg prose-h2:font-medium prose-h2:mt-3 prose-sm prose-p:mb-0 prose-blockquote:font-normal prose-blockquote:text-gray-500 prose-ul:my-0 prose-img:mt-0 prose-img:rounded-lg [&>blockquote>p]:mt-0 prose-ul:bg-gray-100 prose-ul:rounded-lg prose-ul:px-4 prose-ul:py-4 prose-ul:pl-7 [&>ul>li]:my-0 [&>ul>li]:mb-1 [&>ul]:mt-3'
+      class='prose prose-sm prose-h2:mt-3 prose-h2:text-lg prose-h2:font-medium prose-p:mb-0 prose-blockquote:font-normal prose-blockquote:text-gray-500 prose-ul:my-0 prose-ul:rounded-lg prose-ul:bg-gray-100 prose-ul:px-4 prose-ul:py-4 prose-ul:pl-7 prose-img:mt-0 prose-img:rounded-lg [&>blockquote>p]:mt-0 [&>ul>li]:my-0 [&>ul>li]:mb-1 [&>ul]:mt-3'
    >
      <changelog.Content />
    </div>
--- a/src/components/Changelog/ChangelogLaunch.astro
+++ b/src/components/Changelog/ChangelogLaunch.astro
@@ -0,0 +1,33 @@
+---
+import { DateTime } from 'luxon';
+
+const formattedDate = DateTime.fromISO('2024-09-13').toFormat('dd LLL, yyyy');
+---
+
+<div class='relative mb-6'>
+  <span
+    class='absolute -left-6 top-2 h-2 w-2 flex-shrink-0 rounded-full bg-gray-300'
+  ></span>
+
+  <div
+    class='mb-3 flex flex-col items-start gap-0.5 sm:flex-row sm:items-center sm:gap-2'
+  >
+    <span class='flex-shrink-0 text-xs tracking-wide text-gray-400'>
+      {formattedDate}
+    </span>
+    <span class='truncate text-balance text-base font-medium'>
+      Changelog page is launched
+    </span>
+  </div>
+
+  <div
+    class='flex flex-col items-center justify-center gap-2 sm:gap-2 rounded-xl border bg-white px-8 py-12 text-center'
+  >
+    <img src='/images/gifs/rocket.gif' class='w-[70px] mb-4' />
+    <h2 class='text-balance text-xl font-medium'>Changelog page is launched</h2>
+    <p class='font-normal text-balance text-gray-400 text-sm sm:text-base'>
+      We will be sharing a selected list of updates, improvements, and fixes made to
+      the website. Stay tuned!
+    </p>
+  </div>
+</div>
--- a/src/components/ChangelogBanner.astro
+++ b/src/components/ChangelogBanner.astro
@@ -0,0 +1,64 @@
+---
+import { getAllChangelogs } from '../lib/changelog';
+import { DateTime } from 'luxon';
+
+const allChangelogs = await getAllChangelogs();
+const top10Changelogs = allChangelogs.slice(0, 10);
+---
+
+<div class='border-t bg-white py-6 text-left sm:py-16 sm:text-center'>
+  <div class='container !max-w-[650px]'>
+    <p class='text-2xl font-bold sm:text-5xl'>
+      <img
+        src='/images/gifs/rocket.gif'
+        alt='Rocket'
+        class='mr-2 hidden sm:inline h-12 w-12'
+      />
+      Actively Maintained
+    </p>
+    <p class='mt-1 mb-2 sm:my-2 text-sm leading-relaxed text-gray-600 sm:my-5 sm:text-lg'>
+      We are always improving our content, adding new resources and adding
+      features to enhance your learning experience.
+    </p>
+
+    <div class='relative mt-2 sm:mt-8 text-left'>
+      <div
+        class='absolute inset-y-0 left-[120px] hidden w-px -translate-x-[0.5px] translate-x-[5.75px] bg-gray-300 sm:block'
+      >
+      </div>
+      <ul class='relative flex flex-col gap-4 py-4'>
+        {
+          top10Changelogs.map((changelog) => {
+            const formattedDate = DateTime.fromISO(
+              changelog.frontmatter.date,
+            ).toFormat('dd LLL, yyyy');
+            return (
+              <li class='relative'>
+                <a
+                  href={`/changelog#${changelog.id}`}
+                  class='flex flex-col sm:flex-row items-start sm:items-center'
+                >
+                  <span class='sm:w-[120px] flex-shrink-0 pr-0 sm:pr-4 text-right text-sm tracking-wide text-gray-400'>
+                    {formattedDate}
+                  </span>
+                  <span class='h-3 w-3 flex-shrink-0 rounded-full bg-gray-300 hidden sm:block' />
+                  <span class='text-balance sm:pl-8 text-base font-medium text-gray-900'>
+                    {changelog.frontmatter.title}
+                  </span>
+                </a>
+              </li>
+            );
+          })
+        }
+      </ul>
+    </div>
+    <div class='mt-2 sm:mt-8 text-left sm:text-center'>
+      <a
+        href='/changelog'
+        class='inline-block text-sm sm:text-base rounded-lg sm:rounded-full bg-gray-800 px-4 sm:px-6 py-2 text-white transition-colors hover:bg-gray-700'
+      >
+        View Full Changelog
+      </a>
+    </div>
+  </div>
+</div>
--- a/src/components/ChangelogImages.tsx
+++ b/src/components/ChangelogImages.tsx
@@ -0,0 +1,108 @@
+import { ChevronLeft, ChevronRight, MoveRight } from 'lucide-react';
+import React, { useState, useEffect, useCallback } from 'react';
+
+interface ChangelogImagesProps {
+  images: { [key: string]: string };
+}
+
+const ChangelogImages: React.FC<ChangelogImagesProps> = ({ images }) => {
+  const [enlargedImage, setEnlargedImage] = useState<string | null>(null);
+  const imageArray = Object.entries(images);
+
+  const handleImageClick = (src: string) => {
+    setEnlargedImage(src);
+  };
+
+  const handleCloseEnlarged = () => {
+    setEnlargedImage(null);
+  };
+
+  const handleNavigation = useCallback(
+    (direction: 'prev' | 'next') => {
+      if (!enlargedImage) return;
+      const currentIndex = imageArray.findIndex(
+        ([_, src]) => src === enlargedImage,
+      );
+      let newIndex;
+      if (direction === 'prev') {
+        newIndex = currentIndex > 0 ? currentIndex - 1 : imageArray.length - 1;
+      } else {
+        newIndex = currentIndex < imageArray.length - 1 ? currentIndex + 1 : 0;
+      }
+      setEnlargedImage(imageArray[newIndex][1]);
+    },
+    [enlargedImage, imageArray],
+  );
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        handleCloseEnlarged();
+      } else if (event.key === 'ArrowLeft') {
+        handleNavigation('prev');
+      } else if (event.key === 'ArrowRight') {
+        handleNavigation('next');
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [handleNavigation]);
+
+  return (
+    <>
+      <div className="flex gap-3 px-6 pb-1">
+        {imageArray.map(([title, src]) => (
+          <div
+            key={title}
+            className="group relative cursor-pointer overflow-hidden rounded-lg transition hover:scale-105"
+            onClick={() => handleImageClick(src)}
+          >
+            <img
+              src={src}
+              alt={title}
+              className="h-[120px] w-full object-cover object-left-top"
+            />
+            <span className="absolute group-hover:opacity-0 inset-0 bg-gradient-to-b from-transparent to-black/40" />
+
+            <div className="absolute font-medium inset-x-0 top-full group-hover:inset-y-0 flex items-center justify-center px-2 text-center text-xs bg-black/50 text-white py-0.5 opacity-0 group-hover:opacity-100 cursor-pointer">
+              <span className='bg-black py-0.5 rounded px-1'>{title}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+      {enlargedImage && (
+        <div
+          className="fixed inset-0 z-[999] flex items-center justify-center bg-black bg-opacity-75"
+          onClick={handleCloseEnlarged}
+        >
+          <img
+            src={enlargedImage}
+            alt="Enlarged view"
+            className="max-h-[90%] max-w-[90%] rounded-xl object-contain"
+          />
+          <button
+            className="absolute left-4 top-1/2 -translate-y-1/2 transform rounded-full bg-white hover:bg-opacity-100 bg-opacity-50 p-2"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleNavigation('prev');
+            }}
+          >
+            <ChevronLeft size={24} />
+          </button>
+          <button
+            className="absolute right-4 top-1/2 -translate-y-1/2 transform rounded-full bg-white hover:bg-opacity-100 bg-opacity-50 p-2"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleNavigation('next');
+            }}
+          >
+            <ChevronRight size={24} />
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ChangelogImages;
--- a/src/components/Dashboard/RecommendedRoadmaps.tsx
+++ b/src/components/Dashboard/RecommendedRoadmaps.tsx
@@ -19,9 +19,8 @@ export function RecommendedRoadmaps(props: RecommendedRoadmapsProps) {

        <a
          href="/roadmaps"
-          className="flex items-center gap-1 rounded-full bg-gray-500 px-2 py-0.5 text-xs font-medium text-white transition-colors hover:bg-black"
+          className="rounded-full bg-gray-200 px-2.5 py-0.5 text-xs font-medium text-gray-700 hover:bg-gray-300 hover:text-black"
        >
-          <ArrowUpRight size={12} strokeWidth={2.5} />
          All Roadmaps
        </a>
      </div>
--- a/src/components/Leaderboard/LeaderboardPage.tsx
+++ b/src/components/Leaderboard/LeaderboardPage.tsx
@@ -1,11 +1,10 @@
-import { useState, type ReactNode } from 'react';
+import { type ReactNode, useState } from 'react';
 import type {
-  LeadeboardUserDetails,
+  LeaderboardUserDetails,
  ListLeaderboardStatsResponse,
 } from '../../api/leaderboard';
 import { cn } from '../../lib/classname';
-import { FolderKanban, Zap, Trophy } from 'lucide-react';
-import { RankBadgeIcon } from '../ReactIcons/RankBadgeIcon';
+import { FolderKanban, GitPullRequest, Users, Users2, Zap } from 'lucide-react';
 import { TrophyEmoji } from '../ReactIcons/TrophyEmoji';
 import { SecondPlaceMedalEmoji } from '../ReactIcons/SecondPlaceMedalEmoji';
 import { ThirdPlaceMedalEmoji } from '../ReactIcons/ThirdPlaceMedalEmoji';
@@ -18,53 +17,77 @@ export function LeaderboardPage(props: LeaderboardPageProps) {
  const { stats } = props;

  return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="container py-10">
-        <div className="mb-8 text-center">
-          <div className="mb-2 flex items-center justify-center gap-3">
-            <Trophy className="size-8 text-yellow-500" />
-            <h2 className="text-2xl font-bold sm:text-3xl">Leaderboard</h2>
-          </div>
-          <p className="mx-auto max-w-2xl text-balance text-sm text-gray-500 sm:text-base">
-            Top users based on their activity on roadmap.sh
-          </p>
+    <div className="min-h-screen bg-gray-100">
+      <div className="container pb-5 sm:pb-8">
+        <h1 className="my-5 flex items-center text-lg font-medium text-black sm:mb-4 sm:mt-8">
+          <Users2 className="mr-2 size-5 text-black" />
+          Leaderboard
+        </h1>

-          <div className="mt-8 grid gap-2 md:grid-cols-2">
-            <LeaderboardLane
-              title="Longest Visit Streak"
-              tabs={[
-                {
-                  title: 'Active',
-                  users: stats.streaks?.active || [],
-                  emptyIcon: <Zap className="size-16 text-gray-300" />,
-                  emptyText: 'No users with streaks yet',
-                },
-                {
-                  title: 'Lifetime',
-                  users: stats.streaks?.lifetime || [],
-                  emptyIcon: <Zap className="size-16 text-gray-300" />,
-                  emptyText: 'No users with streaks yet',
-                },
-              ]}
-            />
-            <LeaderboardLane
-              title="Projects Completed"
-              tabs={[
-                {
-                  title: 'This Month',
-                  users: stats.projectSubmissions.currentMonth,
-                  emptyIcon: <FolderKanban className="size-16 text-gray-300" />,
-                  emptyText: 'No projects submitted this month',
-                },
-                {
-                  title: 'Lifetime',
-                  users: stats.projectSubmissions.lifetime,
-                  emptyIcon: <FolderKanban className="size-16 text-gray-300" />,
-                  emptyText: 'No projects submitted yet',
-                },
-              ]}
-            />
-          </div>
+        <div className="grid gap-2 sm:gap-3 md:grid-cols-2">
+          <LeaderboardLane
+            title="Longest Visit Streak"
+            tabs={[
+              {
+                title: 'Active',
+                users: stats.streaks?.active || [],
+                emptyIcon: <Zap className="size-16 text-gray-300" />,
+                emptyText: 'No users with streaks yet',
+              },
+              {
+                title: 'Lifetime',
+                users: stats.streaks?.lifetime || [],
+                emptyIcon: <Zap className="size-16 text-gray-300" />,
+                emptyText: 'No users with streaks yet',
+              },
+            ]}
+          />
+          <LeaderboardLane
+            title="Projects Completed"
+            tabs={[
+              {
+                title: 'This Month',
+                users: stats.projectSubmissions.currentMonth,
+                emptyIcon: <FolderKanban className="size-16 text-gray-300" />,
+                emptyText: 'No projects submitted this month',
+              },
+              {
+                title: 'Lifetime',
+                users: stats.projectSubmissions.lifetime,
+                emptyIcon: <FolderKanban className="size-16 text-gray-300" />,
+                emptyText: 'No projects submitted yet',
+              },
+            ]}
+          />
+          <LeaderboardLane
+            title="Most Referrals"
+            tabs={[
+              {
+                title: 'This Month',
+                users: stats.referrals.currentMonth,
+                emptyIcon: <Users className="size-16 text-gray-300" />,
+                emptyText: 'No referrals this month',
+              },
+              {
+                title: 'Lifetime',
+                users: stats.referrals.lifetime,
+                emptyIcon: <Users className="size-16 text-gray-300" />,
+                emptyText: 'No referrals yet',
+              },
+            ]}
+          />
+          <LeaderboardLane
+            title="Top Contributors"
+            subtitle="Past 2 weeks"
+            tabs={[
+              {
+                title: 'This Month',
+                users: stats.githubContributors.currentMonth,
+                emptyIcon: <GitPullRequest className="size-16 text-gray-300" />,
+                emptyText: 'No contributors this month',
+              },
+            ]}
+          />
        </div>
      </div>
    </div>
@@ -73,27 +96,35 @@ export function LeaderboardPage(props: LeaderboardPageProps) {

 type LeaderboardLaneProps = {
  title: string;
+  subtitle?: string;
  tabs: {
    title: string;
-    users: LeadeboardUserDetails[];
+    users: LeaderboardUserDetails[];
    emptyIcon?: ReactNode;
    emptyText?: string;
  }[];
 };

 function LeaderboardLane(props: LeaderboardLaneProps) {
-  const { title, tabs } = props;
+  const { title, subtitle, tabs } = props;

  const [activeTab, setActiveTab] = useState(tabs[0]);
  const { users: usersToShow, emptyIcon, emptyText } = activeTab;

  return (
-    <div className="overflow-hidden rounded-md border bg-white shadow-sm">
-      <div className="flex items-center justify-between gap-2 bg-gray-100 px-3 py-3 mb-3">
-        <h3 className="text-base font-medium">{title}</h3>
+    <div className="flex min-h-[450px] flex-col overflow-hidden rounded-xl border bg-white shadow-sm">
+      <div className="mb-3 flex items-center justify-between gap-2 px-3 py-3">
+        <h3 className="text-sm font-medium">
+          {title}{' '}
+          {subtitle && (
+            <span className="ml-1 text-sm font-normal text-gray-400">
+              {subtitle}
+            </span>
+          )}
+        </h3>

        {tabs.length > 1 && (
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1">
            {tabs.map((tab) => {
              const isActive = tab === activeTab;

@@ -102,10 +133,10 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
                  key={tab.title}
                  onClick={() => setActiveTab(tab)}
                  className={cn(
-                    'text-sm font-medium underline-offset-2 transition-colors',
+                    'text-xs transition-colors py-0.5 px-2 rounded-full',
                    {
-                      'text-black underline': isActive,
-                      'text-gray-400 hover:text-gray-600': !isActive,
+                      'text-white bg-black': isActive,
+                      'hover:bg-gray-200': !isActive,
                    },
                  )}
                >
@@ -118,7 +149,7 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
      </div>

      {usersToShow.length === 0 && emptyText && (
-        <div className="flex flex-col items-center justify-center p-8">
+        <div className="flex flex-grow flex-col items-center justify-center p-8">
          {emptyIcon}
          <p className="mt-4 text-sm text-gray-500">{emptyText}</p>
        </div>
@@ -128,19 +159,23 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
        <ul className="divide-y divide-gray-100 pb-4">
          {usersToShow.map((user, counter) => {
            const avatar = user?.avatar
-              ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${user.avatar}`
+              ? user?.avatar?.startsWith('http')
+                ? user?.avatar
+                : `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${user.avatar}`
              : '/images/default-avatar.png';
+
            const rank = counter + 1;
+            const isGitHubUser = avatar?.indexOf('github') > -1;

            return (
              <li
                key={user.id}
-                className="flex items-center justify-between gap-1 pl-2 pr-5 py-2.5 hover:bg-gray-50"
+                className="flex items-center justify-between gap-1 py-2.5 pl-2 pr-5"
              >
                <div className="flex min-w-0 items-center gap-2">
                  <span
                    className={cn(
-                      'relative text-xs mr-1 flex size-6 shrink-0 items-center justify-center rounded-full tabular-nums',
+                      'relative mr-1 flex size-6 shrink-0 items-center justify-center rounded-full text-xs tabular-nums',
                      {
                        'text-black': rank <= 3,
                        'text-gray-400': rank > 3,
@@ -153,9 +188,19 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
                  <img
                    src={avatar}
                    alt={user.name}
-                    className="size-7 shrink-0 rounded-full"
+                    className="mr-1 size-7 shrink-0 rounded-full"
                  />
-                  <span className="truncate">{user.name}</span>
+                  {isGitHubUser ? (
+                    <a
+                      href={`https://github.com/kamranahmedse/developer-roadmap/pulls?q=is%3Apr+is%3Aclosed+author%3A${user.name}`}
+                      target="_blank"
+                      className="truncate font-medium underline underline-offset-2"
+                    >
+                      {user.name}
+                    </a>
+                  ) : (
+                    <span className="truncate">{user.name}</span>
+                  )}
                  {rank === 1 ? (
                    <TrophyEmoji className="size-5" />
                  ) : rank === 2 ? (
--- a/src/components/PageSponsor.tsx
+++ b/src/components/PageSponsor.tsx
@@ -156,7 +156,7 @@ export function PageSponsor(props: PageSponsorProps) {
      <span>
        <img
          src={imageUrl}
-          className="block h-[106px] object-cover sm:h-[169px] sm:w-[118.18px]"
+          className="block h-[106px] object-cover sm:h-[153px] sm:w-[118.18px]"
          alt="Sponsor Banner"
        />
      </span>
--- a/src/components/Projects/ProjectCard.tsx
+++ b/src/components/Projects/ProjectCard.tsx
@@ -5,10 +5,13 @@ import type {
 } from '../../lib/project.ts';
 import { Users } from 'lucide-react';
 import { formatCommaNumber } from '../../lib/number.ts';
+import { cn } from '../../lib/classname.ts';
+import { isLoggedIn } from '../../lib/jwt.ts';

 type ProjectCardProps = {
  project: ProjectFileType;
  userCount?: number;
+  status?: 'completed' | 'started' | 'none';
 };

 const badgeVariants: Record<ProjectDifficultyType, string> = {
@@ -18,10 +21,12 @@ const badgeVariants: Record<ProjectDifficultyType, string> = {
 };

 export function ProjectCard(props: ProjectCardProps) {
-  const { project, userCount = 0 } = props;
-
+  const { project, userCount = 0, status } = props;
  const { frontmatter, id } = project;

+  const isLoadingStatus = status === undefined;
+  const userStartedCount = status !== 'none' && userCount === 0 ? userCount + 1 : userCount;
+
  return (
    <a
      href={`/projects/${id}`}
@@ -34,16 +39,45 @@ export function ProjectCard(props: ProjectCardProps) {
        />
        <Badge variant={'grey'} text={frontmatter.nature} />
      </span>
-      <span className="my-3 flex flex-col">
+      <span className="my-3 flex min-h-[100px] flex-col">
        <span className="mb-1 font-medium">{frontmatter.title}</span>
        <span className="text-sm text-gray-500">{frontmatter.description}</span>
      </span>
-      <span className="flex items-center gap-2 text-xs text-gray-400">
-        <Users className="inline-block size-3.5" />
-        {userCount > 0 ? (
-          <>{formatCommaNumber(userCount)} Started</>
+      <span className="flex min-h-[22px] items-center justify-between gap-2 text-xs text-gray-400">
+        {isLoadingStatus ? (
+          <>
+            <span className="h-5 w-24 animate-pulse rounded bg-gray-200" />{' '}
+            <span className="h-5 w-20 animate-pulse rounded bg-gray-200" />{' '}
+          </>
        ) : (
-          <>Be the first to solve!</>
+          <>
+            <span className="flex items-center gap-1.5">
+              <Users className="size-3.5" />
+              {userStartedCount > 0 ? (
+                <>{formatCommaNumber(userStartedCount)} Started</>
+              ) : (
+                <>Be the first to solve!</>
+              )}
+            </span>
+
+            {status !== 'none' && (
+              <span
+                className={cn(
+                  'flex items-center gap-1.5 rounded-full border border-current px-2 py-0.5 capitalize',
+                  status === 'completed' && 'text-green-500',
+                  status === 'started' && 'text-yellow-500',
+                )}
+              >
+                <span
+                  className={cn('inline-block h-2 w-2 rounded-full', {
+                    'bg-green-500': status === 'completed',
+                    'bg-yellow-500': status === 'started',
+                  })}
+                />
+                {status}
+              </span>
+            )}
+          </>
        )}
      </span>
    </a>
--- a/src/components/Projects/ProjectsList.tsx
+++ b/src/components/Projects/ProjectsList.tsx
@@ -1,7 +1,7 @@
 import { ProjectCard } from './ProjectCard.tsx';
 import { HeartHandshake, Trash2 } from 'lucide-react';
 import { cn } from '../../lib/classname.ts';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import {
  projectDifficulties,
  type ProjectDifficultyType,
@@ -12,6 +12,8 @@ import {
  getUrlParams,
  setUrlParams,
 } from '../../lib/browser.ts';
+import { httpPost } from '../../lib/http.ts';
+import { isLoggedIn } from '../../lib/jwt.ts';

 type DifficultyButtonProps = {
  difficulty: ProjectDifficultyType;
@@ -38,6 +40,11 @@ function DifficultyButton(props: DifficultyButtonProps) {
  );
 }

+export type ListProjectStatusesResponse = Record<
+  string,
+  'completed' | 'started'
+>;
+
 type ProjectsListProps = {
  projects: ProjectFileType[];
  userCounts: Record<string, number>;
@@ -50,6 +57,30 @@ export function ProjectsList(props: ProjectsListProps) {
  const [difficulty, setDifficulty] = useState<
    ProjectDifficultyType | undefined
  >(urlDifficulty);
+  const [projectStatuses, setProjectStatuses] =
+    useState<ListProjectStatusesResponse>();
+
+  const loadProjectStatuses = async () => {
+    if (!isLoggedIn()) {
+      setProjectStatuses({});
+      return;
+    }
+
+    const projectIds = projects.map((project) => project.id);
+    const { response, error } = await httpPost(
+      `${import.meta.env.PUBLIC_API_URL}/v1-list-project-statuses`,
+      {
+        projectIds,
+      },
+    );
+
+    if (error || !response) {
+      console.error(error);
+      return;
+    }
+
+    setProjectStatuses(response);
+  };

  const projectsByDifficulty: Map<ProjectDifficultyType, ProjectFileType[]> =
    useMemo(() => {
@@ -72,12 +103,17 @@ export function ProjectsList(props: ProjectsListProps) {
    ? projectsByDifficulty.get(difficulty) || []
    : projects;

+  useEffect(() => {
+    loadProjectStatuses().finally();
+  }, []);
+
  return (
    <div className="flex flex-col">
      <div className="my-2.5 flex items-center justify-between">
        <div className="flex flex-wrap gap-1">
          {projectDifficulties.map((projectDifficulty) => (
            <DifficultyButton
+              key={projectDifficulty}
              onClick={() => {
                setDifficulty(projectDifficulty);
                setUrlParams({ difficulty: projectDifficulty });
@@ -130,7 +166,18 @@ export function ProjectsList(props: ProjectsListProps) {
          })
          .map((matchingProject) => {
            const count = userCounts[matchingProject?.id] || 0;
-            return <ProjectCard project={matchingProject} userCount={count} />;
+            return (
+              <ProjectCard
+                key={matchingProject.id}
+                project={matchingProject}
+                userCount={count}
+                status={
+                  projectStatuses
+                    ? (projectStatuses?.[matchingProject.id] || 'none')
+                    : undefined
+                }
+              />
+            );
          })}
      </div>
    </div>
--- a/src/components/Projects/ProjectsPage.tsx
+++ b/src/components/Projects/ProjectsPage.tsx
@@ -190,6 +190,7 @@ export function ProjectsPage(props: ProjectsPageProps) {
                key={project.id}
                project={project}
                userCount={userCounts[project.id] || 0}
+                status={'none'}
              />
            ))}
          </div>
--- a/src/components/Roadmaps/RoadmapsPage.tsx
+++ b/src/components/Roadmaps/RoadmapsPage.tsx
@@ -357,6 +357,11 @@ const groups: GroupType[] = [
        link: '/ai-data-scientist',
        type: 'role',
      },
+      {
+        title: 'AI Engineer',
+        link: '/ai-engineer',
+        type: 'role',
+      },
      {
        title: 'Data Analyst',
        link: '/data-analyst',
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -175,7 +175,6 @@ export function TopicDetail(props: TopicDetailProps) {
    setError('');
    setIsLoading(true);
    setIsActive(true);
-    sponsorHidden.set(true);

    setTopicId(topicId);
    setResourceType(resourceType);
@@ -336,6 +335,10 @@ export function TopicDetail(props: TopicDetailProps) {
    return resource.topicIds.includes(normalizedTopicId);
  });

+  const hasPaidScrimbaLinks = paidResourcesForTopic.some(
+    (resource) => resource?.url?.toLowerCase().indexOf('scrimba') !== -1,
+  );
+
  return (
    <div className={'relative z-[90]'}>
      <div
@@ -486,6 +489,19 @@ export function TopicDetail(props: TopicDetailProps) {
                    })}
                  </ul>

+                  {hasPaidScrimbaLinks && (
+                    <div className="relative -mb-1 ml-3 mt-4 rounded-md border border-yellow-300 bg-yellow-100 px-2.5 py-2 text-sm text-yellow-800">
+                      <div className="flex items-center gap-2">
+                        <Coins className="h-4 w-4 text-yellow-700" />
+                        <span>
+                          Scrimba is offering{' '}
+                          <span className={'font-semibold'}>20% off</span> on
+                          all courses for roadmap.sh users.
+                        </span>
+                      </div>
+                    </div>
+                  )}
+
                  {showPaidResourceDisclaimer && (
                    <PaidResourceDisclaimer
                      onClose={() => {
--- a/src/data/changelogs/ai-engineer-roadmap.md
+++ b/src/data/changelogs/ai-engineer-roadmap.md
@@ -0,0 +1,25 @@
+---
+title: 'AI Engineer Roadmap, Leaderboards, Editor AI, and more'
+description: 'New AI Engineer Roadmap, New Leaderboards, AI Integration in Editor, and more'
+images:
+  "AI Engineer Roadmap": "https://assets.roadmap.sh/guest/ai-engineer-roadmap.png"
+  "Refer Others": "https://assets.roadmap.sh/guest/invite-users.png"
+  "Editor AI Integration": "https://assets.roadmap.sh/guest/editor-ai-integration.png"
+  "Project Status": "https://assets.roadmap.sh/guest/project-status.png"
+  "Leaderboards": "https://assets.roadmap.sh/guest/new-leaderboards.png"
+seo:
+  title: 'AI Engineer Roadmap, Leaderboards, Editor AI, and more'
+  description: ''
+date: 2024-10-04
+---
+
+We have a new AI Engineer roadmap, Contributor leaderboards, AI integration in the editor, and more.
+
+- [AI Engineer Roadmap](https://roadmap.sh/ai-engineer) is now live
+- You can now refer others to join roadmap.sh
+- AI integration [in the editor](https://draw.roadmap.sh) to help you create and edit roadmaps faster
+- New [Leaderboards](/leaderboard) for contributors and people who refer others
+- [Projects pages](/frontend/projects) now show the status of each project
+- Bug fixes and performance improvements
+
+ML Engineer roadmap and team dashboards are coming up next. Stay tuned!
--- a/src/data/changelogs/leaderboard-page.md
+++ b/src/data/changelogs/leaderboard-page.md
@@ -1,13 +1,17 @@
 ---
 title: 'New Dashboard, Leaderboards and Projects'
 description: 'New leaderboard page showing the most active users'
+images:
+  "Personal Dashboard": "https://assets.roadmap.sh/guest/personal-dashboard.png"
+  "Projects Page": "https://assets.roadmap.sh/guest/projects-page.png"
+  "Leaderboard": "https://assets.roadmap.sh/guest/leaderboard.png"
 seo:
  title: 'Leaderboard Page - roadmap.sh'
  description: ''
-date: 2024-09-13
+date: 2024-09-17
 ---

-TL;DR: new dashboard, leaderboard page and projects page.
+Focus for this week was improving the user experience and adding new features to the platform. Here are the highlights:

 - New dashboard for logged-in users
 - New leaderboard page
@@ -16,9 +20,7 @@ TL;DR: new dashboard, leaderboard page and projects page.
 - Frontend and backend content improvements
 - Bug fixes

-![Leaderboard Page](https://assets.roadmap.sh/guest/personal-dashboard.png)
-
-We just launched a dedicated dashboard for logged-in users to showing progress, projects, bookmarks and more. You can still access the old homepage by visiting [this page](https://roadmap.sh/home).
+[Dashboard](/) would allow logged-in users to keep track of their bookmarks, learning progress, project and more. You can still visit the [old homepage](https://roadmap.sh/home) once you login.

 We also launched a new [leaderboard page](/leaderboard) showing the most active users, users who completed most projects and more.

--- a/src/data/changelogs/new-dashboard-page.md
+++ b/src/data/changelogs/new-dashboard-page.md
@@ -1,12 +0,0 @@
---
-title: 'New Dashboard Page'
-description: 'We have added a new dashboard page to help you track your progress'
-seo:
-  title: 'New Dashboard Page - roadmap.sh'
-  description: 'We have added a new dashboard page to help you track your progress'
-date: 2024-09-12
---
-
-We have revamped the dashboard page for logged-in users. The new dashboard page will help you track your progress and see your overall progress in a single view. We have also added a new progress bar to help you visualize your progress.
-
-If you want to access the guest homepage, you check check it out [here](/home).
--- a/src/data/changelogs/redis-roadmap.md
+++ b/src/data/changelogs/redis-roadmap.md
@@ -0,0 +1,25 @@
+---
+title: 'Redis Roadmap, Dashboard Changes, Bookmarks'
+description: 'New leaderboard page showing the most active users'
+images:
+  "Redis Roadmap": "https://assets.roadmap.sh/guest/redis-roadmap.png"
+  "Bookmarks": "https://assets.roadmap.sh/guest/bookmark-roadmaps.png"
+  "Dashboard": "https://assets.roadmap.sh/guest/dashboard-profile.png"
+  "Cyber Security Content": "https://assets.roadmap.sh/guest/cyber-security-content.png"
+seo:
+  title: 'Redis Roadmap, Dashboard, Bookmarks - roadmap.sh'
+  description: ''
+date: 2024-09-23
+---
+
+We have a new roadmap, some improvements to dashboard, bookmarks and more.
+
+- [Redis roadmap](https://roadmap.sh/redis) is now live
+- Progress and Bookmarks on dashboard are merged into a single section which makes it easy if you have a lot of bookmarks.
+- Profile section on [dashboard](/) makes it easy to create profile
+- Roadmaps can now be [bookmarked from any page](/roadmaps) that shows roadmaps.
+- User profile now shows the projects you are working on.
+- [Cyber Security roadmap](/cyber-security) is now filled with new content and resources.
+- Buf fixes and improvements to some team features.
+
+Next up, we are working on a new AI Engineer roadmap and teams dashboards.
--- a/src/data/guides/backend-frameworks.md
+++ b/src/data/guides/backend-frameworks.md
@@ -0,0 +1,441 @@
+---
+title: 'Top 7 Backend Frameworks to Use in 2024: Pro Advice'
+description: 'Get expert advice on backend frameworks for 2024. Learn about the top 7 frameworks that can elevate your development process.'
+authorId: fernando
+excludedBySlug: '/backend/frameworks'
+seo:
+  title: 'Top 7 Backend Frameworks to Use in 2024: Pro Advice'
+  description: 'Get expert advice on backend frameworks for 2024. Learn about the top 7 frameworks that can elevate your development process.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/top-backend-frameworks-jfpux.jpg'
+isNew: true
+type: 'textual'
+date: 2024-09-27
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![Best backend frameworks](https://assets.roadmap.sh/guest/top-backend-frameworks-jfpux.jpg)
+
+Choosing the right backend framework in 2024 can be crucial when you’re building web applications. While the programming language you pick is important, the backend framework you go with will help define how scalable, secure, and maintainable your application is. It’s the foundation that supports all the features your users interact with on the frontend and keeps everything running smoothly behind the scenes.
+
+So, it’s a decision you want to get right.
+
+In 2024, [backend development](https://roadmap.sh/backend) is more complex and interconnected than ever. Developers are working with APIs, microservices, cloud-native architectures, and ensuring high availability while keeping security at the forefront. It’s an era where the demand for real-time data, seamless integrations, and efficient performance is higher than ever.
+
+Whether you're building an enterprise-level application or a small startup, the right backend framework can save you time and headaches down the road.
+
+Let’s take a look at the following top backend development frameworks at the top of all lists for 2024:
+
+* NextJS
+* Fastify
+* SvelteKit
+* Ruby on Rails
+* Laravel
+* Phoenix
+* Actix
+
+## Criteria for Evaluating The Top Backend Frameworks
+
+How can you determine what “best backend framework” means for you? To answer that question, I’ll define a set of key factors to consider. Let’s break down the most important criteria that will help you make the best choice for your project:
+
+**Performance**:
+
+* A high-performing backend framework processes server-side tasks (e.g., database queries, user sessions, real-time data) quickly and efficiently.
+* Faster processing improves user experience, especially in 2024 when speed is critical.
+
+**Scalability**:
+
+* The framework should handle increased traffic, larger datasets, and feature expansion without issues.
+* It should smoothly scale for both small and large user bases.
+
+**Flexibility**:
+
+* A flexible framework adapts to new business or technical requirements.
+* It should support various project types without locking you into a specific structure.
+
+**Community and Ecosystem**:
+
+* A strong community provides support through tutorials, forums, and third-party tools.
+* A good ecosystem includes useful plugins and integrations for popular services or databases.
+
+**Learning Curve**:
+
+* An easy-to-learn framework boosts productivity and helps you get up to speed quickly.
+* A framework should balance ease of learning with powerful functionality.
+
+**Security**:
+
+* A reliable framework includes built-in security features to protect user data and prevent vulnerabilities.
+* It should help you comply with regulations and address security concerns from the start.
+
+**Future-Proofing**:
+
+* Choose a framework with a history of updates, a clear development roadmap, and a growing community.
+* A future-proof framework ensures long-term support and relevance.
+
+### My go-to backend framework
+
+My favorite backend framework is Next.js because it has the highest scores from the group.
+
+That said, I’ve applied the above criteria to the best backend development frameworks I’m covering below in this guide. This table gives you a snapshot view of how they all compare according to my ratings, and I’ll explain the details further below.
+
+![backend frameworks](https://assets.roadmap.sh/guest/backend-framework-table-nl1iw.png)
+
+Of course, Next.js is the best one for me, and that works for me alone. You have to consider your own projects and your own context to understand what the best choice for you would be.
+
+Let’s get into the selection and what their strengths and weaknesses are to help you select the right one for you.
+
+## Top 7 Backend Frameworks in 2024
+
+### Next.js
+
+![NextJS](https://assets.roadmap.sh/guest/logo-nextjs-mbn1n.png)
+
+Next.js is a full-stack React framework and one of the most popular backend frameworks in the JavaScript community. Over the years, it has evolved into a robust web development solution that supports static site generation (SSG), server-side rendering (SSR), and even edge computing. Backed by Vercel, it’s now one of the go-to frameworks for modern web development.
+
+#### 1\. Performance
+
+Next.js has a wonderful performance thanks to its ability to optimize for both static and dynamic generation. With server-side rendering and support for edge computing, it's built to handle high-performance requirements. Additionally, automatic code splitting ensures only the necessary parts of the app are loaded, reducing load times.
+
+⭐ **Rating: 5/5**
+
+#### 2\. Scalability
+
+Next.js is designed to scale easily, from small static websites to large-scale dynamic applications. Its ability to turn backend routes into serverless functions puts it at an unfair advantage over other frameworks. Paired with Vercel’s deployment platform, scaling becomes almost effortless.
+
+⭐ **Rating: 5/5**
+
+#### 3\. Flexibility
+
+Next.js is one of the most flexible frameworks out there. It supports a wide range of use cases, from simple static websites to highly complex full-stack applications. With its API routes feature, developers can create powerful backends, making Next.js suitable for both frontend and backend development in a single framework.
+
+⭐ **Rating: 5/5**
+
+#### 4\. Community and Ecosystem
+
+The Next.js community (just like the JavaScript community in general)  is large and quite active, with an ever-growing number of plugins, integrations, and third-party tools. The framework has solid documentation and an active ecosystem, thanks to its close ties to both the React community and Vercel’s developer support.
+
+⭐ **Rating: 5/5**
+
+#### 5\. Learning Curve
+
+For developers already familiar with React, Next.js provides a relatively smooth learning curve. However, for those new to SSR, SSG or even RSC (React Server Components), there’s a bit of a learning curve as you adapt to these concepts (after all, you’re learning React and backend development at the same time). That said, the framework's excellent documentation and active community make it easier to grasp.
+
+⭐ **Rating: 4/5**
+
+#### 6\. Security
+
+Next.js doesn’t inherently have a wide array of built-in security tools, but it follows secure default practices and can be paired with Vercel’s security optimizations for additional protection. Out of the box, Next.js ensures some level of security against common web threats but will need further configuration depending on the app's complexity.
+
+⭐ **Rating: 3.5/5**
+
+#### 7\. Future-Proofing
+
+Backed by Vercel, Next.js has a bright future. Vercel consistently pushes updates, introduces new features, and improves the overall developer experience. Given its adoption and strong support, Next.js is very future-proof, with no signs of slowing down.
+
+⭐ **Rating: 5/5**
+
+### Fastify
+
+![Fastify](https://assets.roadmap.sh/guest/logo-fastify-3bw4o.png)
+
+Fastify is a lightweight and fast backend framework for Node.js, often seen as a high-performance alternative to Express.js. It was created with a strong focus on speed, low overhead, and developer-friendly tooling, making it a popular choice for developers building APIs and microservices. Fastify offers a flexible plugin architecture and features like schema-based validation and HTTP/2 support, setting it apart in the Node.js ecosystem.
+
+#### 1\. Performance
+
+Fastify shines when it comes to performance. It’s optimized for handling large amounts of requests with low latency, making it one of the fastest Node.js frameworks available.
+
+⭐ **Rating: 5/5**
+
+#### 2\. Scalability
+
+With a strong focus on scalability, Fastify is ideal for handling large applications and high-traffic scenarios. Its lightweight nature ensures that you can build scalable services with minimal resource consumption.
+
+⭐ **Rating: 5/5**
+
+#### 3\. Flexibility
+
+Fastify’s [plugin architecture](https://fastify.dev/docs/latest/Reference/Plugins/) is one of its key strengths. This allows developers to easily extend the framework’s capabilities and tailor it to specific use cases, whether you’re building APIs, microservices, or even server-rendered applications.
+
+⭐ **Rating: 5/5**
+
+#### 4\. Community and Ecosystem
+
+While Fastify’s community is not as large as Express.js or Next.js, it is steadily growing. The ecosystem of plugins and tools continues to expand, making it easier to find the right tools and libraries to fit your needs. However, its smaller ecosystem means fewer third-party tools compared to some of the more established frameworks.
+
+⭐ **Rating: 3/5**
+
+#### 5\. Learning Curve
+
+If you’re coming from Express.js or another Node.js framework, Fastify’s learning curve is minimal. Its API is designed to be familiar and easy to adopt for Node.js developers. While there are some differences in how Fastify handles things like schema validation and plugins, it’s a relatively smooth transition for most developers.
+
+⭐ **Rating: 4/5**
+
+#### 6\. Security
+
+Fastify incorporates built-in security features such as schema-based validation, which helps prevent vulnerabilities like injection attacks. The framework also supports HTTP/2 out of the box, which provides enhanced security and performance.
+
+⭐ **Rating: 4/5**
+
+#### 7\. Future-Proofing
+
+Fastify has a strong development roadmap and is [consistently updated](https://github.com/fastify/fastify) with performance improvements and new features. The backing from a growing community and its continued adoption by large-scale applications make Fastify a solid bet for long-term use.
+
+⭐ **Rating: 5/5**
+
+### SvelteKit
+
+![SvelteKit](https://assets.roadmap.sh/guest/logo-sveltekit-9ntqz.png)
+
+SvelteKit is a full-stack framework built on top of Svelte, a front-end compiler that moves much of the heavy lifting to compile time rather than runtime. SvelteKit was designed to simplify building modern web applications by providing server-side rendering (SSR), static site generation (SSG), and support for client-side routing—all in a performance-optimized package. In other words, it’s an alternative to Next.js.
+
+#### 1\. Performance
+
+SvelteKit leverages Svelte compile-time optimizations, resulting in fast runtime performance. Unlike frameworks that rely heavily on virtual DOM diffing, Svelte compiles components to efficient JavaScript code, which means fewer resources are used during rendering.
+
+⭐ **Rating: 5/5**
+
+#### 2\. Scalability
+
+While SvelteKit is excellent for small to medium-sized applications, its scalability for enterprise-level applications is still being tested by the developer community. It is possible to scale SvelteKit for larger applications, especially with the right infrastructure and server setup, but it may not yet have the same level of proven scalability as more mature frameworks like Next.js or Fastify.
+
+⭐ **Rating: 4/5**
+
+#### 3\. Flexibility
+
+As with most web frameworks, SvelteKit is highly flexible, allowing developers to build everything from static sites to full-stack robust web applications. It provides SSR out of the box, making it easy to handle front-end and back-end logic in a single codebase. Additionally, it supports various deployment environments like serverless functions or traditional servers.
+
+⭐ **Rating: 5/5**
+
+#### 4\. Community and Ecosystem
+
+The SvelteKit community is growing rapidly, and more tools, plugins, and resources are being developed to support it. While the ecosystem isn’t as mature as frameworks like React or Vue, the rate of adoption is promising. The official documentation is well-written, and there’s a growing number of third-party tools, libraries, and guides available for developers to tap into.
+
+⭐ **Rating: 3.5/5**
+
+#### 5\. Learning Curve
+
+For developers familiar with Svelte, the transition to SvelteKit is smooth and intuitive. However, if you're new to Svelte, there is a moderate learning curve, particularly in understanding Svelte’s reactivity model and SvelteKit's routing and SSR features. Still, the simplicity of Svelte as a framework helps ease the learning process compared to more complex frameworks like React or Angular.
+
+⭐ **Rating: 4/5**
+
+#### 6\. Security
+
+SvelteKit’s security features are still evolving, with basic protections in place but requiring developers to implement best practices to build really secure web applications. There are no significant built-in security tools like in some larger frameworks, so developers need to be cautious and handle aspects like input validation, cross-site scripting (XSS) protection, and CSRF manually.
+
+⭐ **Rating: 3/5**
+
+#### 7\. Future-Proofing
+
+Svelte’s increasing popularity and SvelteKit’s rapid development signal a bright future for the framework. The growing adoption of Svelte, backed by its simplicity and performance, ensures that SvelteKit will continue to be developed and improved in the coming years.
+
+⭐ **Rating: 5/5**
+
+### Ruby on Rails
+
+![Ruby on Rails](https://assets.roadmap.sh/guest/logo-rails-eg1x0.png)
+
+Ruby on Rails (Rails) is a full-stack web development framework written in Ruby, created by David Heinemeier Hansson in 2004\. Rails revolutionized web development by promoting "convention over configuration" and allowing developers to rapidly build web applications with fewer lines of code. It
+
+#### 1\. Performance
+
+Rails performs exceptionally well for typical CRUD (Create, Read, Update, Delete) applications, where database operations are straightforward and heavily optimized within the framework. However, as applications grow in complexity or require real-time features, Rails’ performance can become a challenge.
+
+⭐ **Rating: 3.5/5**
+
+#### 2\. Scalability
+
+Rails is often critiqued for its scalability limitations, but it can scale when combined with proper architecture and best practices. Techniques like database sharding, horizontal scaling, and using background jobs for heavy-lifting tasks can help. Still, it’s not the first choice for developers who anticipate massive scale, as it requires careful planning and optimization to avoid performance bottlenecks.
+
+⭐ **Rating: 3.5/5**
+
+#### 3\. Flexibility
+
+Rails is a great framework for rapid development, especially for standard web applications, such as e-commerce platforms, blogs, or SaaS products. However, it’s less flexible when it comes to non-standard architectures or unique application needs. It’s designed with conventions in mind, so while those conventions help you move fast, they can become restrictive in more unconventional use cases.
+
+⭐ **Rating: 3.5/5**
+
+#### 4\. Community and Ecosystem
+
+Next to JavaScript with NPM, Rails has one of the most mature ecosystems in web development, with a huge repository of gems (libraries) that can help speed up development. From user authentication systems to payment gateways, there’s a gem for almost everything, saving developers from reinventing the wheel. The community is also very active, and there are many resources, tutorials, and tools to support developers at every level.
+
+⭐ **Rating: 5/5**
+
+#### 5\. Learning Curve
+
+Rails is known for its easy learning curve, especially for those new to web development. The framework’s focus on convention over configuration means that beginners don’t need to make many decisions and can get a functional app up and running quickly. On top of that, Ruby’s readable syntax also makes it approachable for new devs.
+
+However, as the application grows, mastering the framework’s more advanced concepts and learning how to break through those pre-defined conventions can become a bit of a problem.
+
+⭐ **Rating: 4/5**
+
+#### 6\. Security
+
+Rails comes with a solid set of built-in security features, including protections against SQL injection, XSS (cross-site scripting), and CSRF (cross-site request forgery). By following Rails' conventions, developers can implement secure practices without much additional work. However, as with any framework, you still need to stay updated on security vulnerabilities and ensure proper coding practices are followed.
+
+⭐ **Rating: 4.5/5**
+
+#### 7\. Future-Proofing
+
+While Rails is still highly relevant and widely used, its growth has slowed down from its initial hype during 2010, and it’s no longer the hot, new framework. That said, it remains a solid choice for many businesses, especially those building content-heavy or e-commerce applications. With an established user base and regular updates, Rails is not going anywhere, but its popularity may continue to wane as newer frameworks gain traction.
+
+⭐ **Rating: 4/5**
+
+### Laravel
+
+![Laravel](https://assets.roadmap.sh/guest/logo-laravel-iteyj.png)
+
+Laravel is a PHP backend framework that was introduced in 2011 by Taylor Otwell. It has since become one of the most popular frameworks in the PHP ecosystem, known for its elegant syntax, ease of use, and focus on developer experience (known to some as the RoR of PHP). Laravel offers a range of built-in tools and features like routing, authentication, and database management, making it ideal for building full-featured web applications quickly.
+
+#### 1\. Performance
+
+Laravel performs well for most typical web applications, especially CRUD operations. However, for larger, more complex applications, performance can be a concern. Using tools like caching, query optimization, and Laravel’s built-in optimization features (such as queue handling and task scheduling) can help boost performance, but some extra work may be required for high-load environments.
+
+⭐ **Rating: 4/5**
+
+#### 2\. Scalability
+
+Laravel can scale, but like Rails, it requires careful attention to architecture and infrastructure. By using horizontal scaling techniques, microservices, and services like AWS or Laravel’s Vapor platform, you can build scalable applications. However, Laravel is often seen as better suited for small to medium applications without heavy scaling needs right out of the box.
+
+⭐ **Rating: 3.5/5**
+
+#### 3\. Flexibility
+
+Laravel is highly flexible, allowing you to build a wide variety of web applications. With built-in features for routing, ORM, middleware, and templating, you can quickly build anything from small websites to enterprise applications.
+
+⭐ **Rating: 5/5**
+
+#### 4\. Community and Ecosystem
+
+Contrary to popular belief (mainly due to a lack of hype around the technology), Laravel has a large, active community and a vast ecosystem of packages and third-party tools. With Laracasts, a popular video tutorial platform, and Laravel.io the community portal for Laravel developers, there are many ways to reach out and learn from others.
+
+⭐ **Rating: 5/5**
+
+#### 5\. Learning Curve
+
+Laravel has a relatively gentle learning curve, especially for developers familiar with PHP. Its focus on simplicity, readable syntax, and built-in features make it easy to pick up for beginners. However, mastering the full list of Laravel’s capabilities and best practices can take some time for more complex projects.
+
+⭐ **Rating: 4.5/5**
+
+#### 6\. Security
+
+Just like others, Laravel comes with built-in security features, such as protection against common vulnerabilities like SQL injection, cross-site scripting (XSS), and cross-site request forgery (CSRF). The framework adheres to best security practices, making it easier for developers to build secure applications without much extra effort.
+
+⭐ **Rating: 4.5/5**
+
+#### 7\. Future-proofing
+
+Laravel is still highly relevant and continues to grow in popularity (having [recently secured a very substantial](https://laravel-news.com/laravel-raises-57-million-series-a) amount of money). It has a regular release schedule and a strong commitment to maintaining backward compatibility. With its consistent updates, active community, and growing ecosystem, Laravel is a solid choice for long-term projects.
+
+⭐ **Rating: 4.5/5**
+
+### Phoenix
+
+![Phoenix](https://assets.roadmap.sh/guest/phoenix-logo-5g60a.png)
+
+#### **Overview and History**
+
+Phoenix is a backend framework written in Elixir, designed to create high-performance, scalable web applications. It leverages Elixir's concurrency and fault-tolerant nature (inherited from the Erlang ecosystem) to build real-time, distributed systems.
+
+#### 1\. Performance
+
+Phoenix is known for its outstanding performance, particularly in handling large numbers of simultaneous connections. Thanks to Elixir’s concurrency model and lightweight processes, Phoenix can serve thousands of requests with minimal resource consumption. Real-time applications benefit especially from Phoenix’s built-in WebSockets and its LiveView feature for updating UIs in real-time without the need for JavaScript-heavy frameworks.
+
+⭐ **Rating: 5/5**
+
+#### 2\. Scalability
+
+Scalability is one of Phoenix’s biggest features. Because it runs on the Erlang VM, which was designed for distributed, fault-tolerant systems, Phoenix can scale horizontally and vertically with ease.
+
+⭐ **Rating: 5/5**
+
+#### 3\. Flexibility
+
+Phoenix is highly flexible, supporting everything from traditional web applications to real-time applications like chat apps and live updates. Its integration with Elixir’s functional programming paradigm and the BEAM virtual machine allows developers to build fault-tolerant, systems. The flexibility extends to how you can structure applications, scale components, and handle real-time events seamlessly.
+
+⭐ **Rating: 5/5**
+
+#### 4\. Community and Ecosystem
+
+Phoenix has a growing and passionate community, but it’s still smaller compared to more established frameworks like Rails or Laravel. However, it benefits from Elixir’s ecosystem, including libraries for testing, real-time applications, and database management. The community is supportive, and the framework’s documentation is detailed and developer-friendly, making it easy to get started.
+
+⭐ **Rating: 2.5/5**
+
+#### 5\. Learning Curve
+
+Phoenix, being built on Elixir, has a steeper learning curve than frameworks based on more common languages like JavaScript or PHP. Elixir’s functional programming model, while powerful, can be challenging for developers unfamiliar with the paradigm.
+
+⭐ **Rating: 3.5/5**
+
+#### 6\. Security
+
+As with most of the popular backend frameworks, Phoenix comes with strong built-in security features, including protections against common vulnerabilities like XSS, SQL injection, and CSRF. Additionally, because Elixir processes are isolated, Phoenix applications are resilient to many types of attacks. While some manual work is still required to ensure security, Phoenix adheres to best practices and provides tools to help developers write secure code.
+
+⭐ **Rating: 4.5/5**
+
+#### 7\. Future-Proofing
+
+Phoenix has a bright future thanks to its solid foundation in the Erlang/Elixir ecosystem, which is known for long-term reliability and support. While the framework might be technologically sound and future-proof, the key to having Elixir in the future will depend on the growth of its popularity. If Elixir’s community keeps growing, we’ll be able to enjoy the framework for a long time.
+
+⭐ **Rating: 5/5**
+
+### Actix
+
+![Actix](https://assets.roadmap.sh/guest/logo-actix-rust-31pi3.png)
+
+Actix is a powerful, high-performance web framework written in Rust. It’s based on the actor model, which is ideal for building concurrent, distributed systems. Actix is known for its incredible performance and memory safety, thanks to Rust’s strict compile-time guarantees.
+
+#### 1\. Performance
+
+Actix is one of the fastest web frameworks available, thanks to Rust’s system-level performance and Actix’s use of asynchronous programming. As it happens with JavaScript-based frameworks, it can handle a large number of requests with minimal overhead, making it ideal for high-performance, real-time applications.
+
+⭐ **Rating: 5/5**
+
+#### 2\. Scalability
+
+The actor model makes Actix the best at handling concurrent tasks and scaling across multiple threads or servers. Rust’s memory safety model and Actix’s architecture make it highly efficient in resource usage, meaning applications can scale well without excessive overhead.
+
+⭐ **Rating: 5/5**
+
+#### 3\. Flexibility
+
+Actix is flexible but requires a deeper understanding of Rust’s ownership and concurrency model to fully take advantage of it. It’s great for building both small, fast APIs and large, service architectures. While Actix is powerful, it’s less forgiving compared to other popular backend frameworks like Node.js or Python’s Flask, where rapid prototyping is easier.
+
+⭐ **Rating: 3/5**
+
+#### 4\. Community and Ecosystem
+
+Rust’s ecosystem, while growing, is still smaller compared to more established languages like JavaScript or Python. However, the Rust community is highly engaged, and support is steadily improving.
+
+⭐ **Rating: 3.5/5**
+
+#### 5\. Learning Curve
+
+Actix inherits Rust’s learning curve, which can be steep for developers new to systems programming or Rust’s strict memory management rules. However, for developers already familiar with Rust, Actix can be a great gateway into web development.
+
+⭐ **Rating: 2/5**
+
+#### 6\. Security
+
+Rust is known for its memory safety and security guarantees, and Actix benefits from these inherent strengths. Rust’s compile-time checks prevent common security vulnerabilities like null pointer dereferencing, buffer overflows, and data races. While these features tackle one side of the security ecosystem, more relevant ones like web-related vulnerabilities are not tackled by the framework.
+
+⭐ **Rating: 2.5/5**
+
+#### **7\. Future-Proofing**
+
+Rust’s growing popularity and adoption, especially in performance-critical areas, ensure that Actix has a strong future. While Actix’s ecosystem is still developing, the framework is regularly maintained and benefits from Rust’s long-term stability.
+
+⭐ **Rating: 4.5/5**
+
+## Conclusion
+
+Choosing the right backend framework is a critical decision that can shape the future of your project. In 2024, developers have more powerful options than ever, from popular backend frameworks like Ruby on Rails, Laravel or Next.js to high-performance focused, like Fastify, SvelteKit, Phoenix, and Actix. Each framework has its own strengths, making it essential to consider factors such as performance, scalability, flexibility, and the learning curve to ensure you pick the right tool for the job.
+
+Ultimately, there’s no proverbial silver bullet that solves all your problems. Your choice will depend on your project’s needs, your team's expertise, and the long-term goals of your application.
+
+So take your time, weigh the pros and cons, and pick the framework that aligns best with your vision for the future.
--- a/src/data/guides/devops-principles.md
+++ b/src/data/guides/devops-principles.md
@@ -0,0 +1,186 @@
+---
+title: '11 DevOps Principles and Practices to Master: Pro Advice'
+description: 'Elevate your game by understanding this set of key DevOps principles and practices. Gain pro insights for a more efficient, collaborative workflow!'
+authorId: fernando
+excludedBySlug: '/devops/principles'
+seo:
+  title: '11 DevOps Principles and Practices to Master: Pro Advice'
+  description: 'Elevate your game by understanding this set of key DevOps principles and practices. Gain pro insights for a more efficient, collaborative workflow!'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/devops-engineer-skills-tlace.jpg'
+isNew: true
+type: 'textual'
+date: 2024-09-24
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![DevOps Principles and Practices](https://assets.roadmap.sh/guest/devops-principles-pfswx.jpg)
+
+If you truly want to understand what makes DevOps so effective, it’s essential to know and master its core principles.
+
+DevOps is more than just a collaboration between development and operations teams; it's built on fundamental principles that simplify software delivery.
+
+In this guide, I’m going to dive deep into the core principles and practices that make the DevOps practice “tick.”	If you’re a DevOps engineer or you want to become one, these are the DevOps principles you should master.
+
+I’ll explain the following principles in detail:
+
+1. Understanding the culture you want to join
+2. CI/CD
+3. Knowing how to use infrastructure as code tools.
+4. Understanding containerization.
+5. Monitoring & observability.
+6. Security
+7. Reducing the toil and technical debt.
+8. Adopting GitOps.
+9. Understanding that you’ll be learning & improving constantly.
+10. Understanding basic programming concepts.
+11. Embracing automation.
+
+## 1\. Understanding DevOps Culture
+
+[DevOps](https://roadmap.sh/devops) culture is the foundation for all DevOps principles. At its core, it's about fostering a collaborative environment where development and operations teams work together seamlessly. In traditional software development, developers focus on writing code while the operations team is tasked with deploying and maintaining it. This division often leads to misunderstandings and delays.
+
+Instead of operating in silos, these teams, when they follow the DevOps culture, end up sharing a common goal: delivering high-quality software efficiently. This cultural shift reduces the "us versus them" mentality that many organizations suffer, fostering cooperation instead of blame.
+
+DevOps culture encourages development and operations to collaborate throughout the software development lifecycle (SDLC). By aligning their goals and encouraging open communication, both teams can work together to improve the process of development, ultimately resulting in faster and more reliable software delivery.
+
+Key components of this culture include shared responsibility, transparency, and a commitment to continuous improvement.
+
+## 2\. Continuous Integration and Continuous Deployment (CI/CD)
+
+![Continuous Integration and Continuous Deployment](https://assets.roadmap.sh/guest/continous-development-vs-continuous-integration-l2fak.png)
+
+Continuous Integration (CI) and Continuous Deployment (CD) are central to DevOps principles. CI is the practice of frequently integrating code changes into a shared repository, ensuring that new code is automatically tested and validated. This practice helps catch bugs early, reducing the risk of introducing issues into the main codebase. CI allows devs and ops teams to work more efficiently, improving the overall quality of the software.
+
+Continuous Deployment, on the other hand, takes things a step further by automatically deploying code changes to production once they pass the CI tests. This ensures that new features and bug fixes are delivered to users as quickly as possible. Together, CI and CD form a pipeline that streamlines the software development lifecycle, from code commit to production deployment in seconds (or in some cases, minutes).
+
+Implementing CI/CD involves using various tools and practices. Jenkins, GitLab CI, CircleCI, and Travis CI are popular options for setting up CI pipelines, while tools like Spinnaker and Argo CD help with CD.
+
+## 3\. Infrastructure as Code (IaC)
+
+![Infrastructure as Code](https://assets.roadmap.sh/guest/infrastructure-as-code-w965a.png)
+
+Infrastructure as Code (IaC) is a game-changer in the DevOps world. Traditionally, provisioning infrastructure involved manual setup and configuration, which was time-consuming and, of course, prone to human error. IaC changes the game by treating infrastructure the same way we treat application code: as a set of scripts or configurations that can be version-controlled, tested, and automated.
+
+Through IaC, DevOps teams can ensure consistency and repeatability across different environments. It eliminates the "works on my machine" problem by providing a standardized environment for software to run on, whether it's on a developer's local machine, in a staging environment, or in production.
+
+Over the years, IaC tools have evolved quite a lot. At the start of it all, players like Chef and Puppet introduced the concept of configuration management, allowing you to define the desired state of your systems. Ansible took that one step further with its agentless architecture, making it easier to manage infrastructure at scale. Terraform took IaC to the next level by providing a tool-agnostic way to provision resources across multiple cloud providers, making it a favorite among DevOps engineers.
+
+## 4\. Containerization
+
+![Containerization](https://assets.roadmap.sh/guest/containers-docker-g491z.png)
+
+Containerization is a core practice and one of the main devops principles to constantly apply. Containers provide a lightweight, portable way to package software along with its dependencies, ensuring that it runs consistently across different environments. Containers share the host system's kernel, making them more efficient and faster to start up than virtual machines.
+
+These “containers” have been playing a key role in solving one of the age-old problems in software development: environment inconsistencies. By encapsulating an application and its dependencies into a container, you can ensure that it runs the same way on a developer's laptop as it does in production. This consistency simplifies the development process and reduces the risk of environment-related problems.
+
+In this space, Docker is the most popular tool for creating and managing containers (although not the only one), offering a simple way to build, package, and distribute containerized applications. Kubernetes takes containerization to the next level by providing a platform for orchestrating containers at scale. With Kubernetes, you can automate the deployment, scaling, and management of containerized applications, making it easier to manage complex, multi-container applications.
+
+While there is no excuse to not use DevOps at this stage in any software project, some of the biggest benefits of using containers in the DevOps lifecycle are: consistency, scalability, and portability.
+
+In other words, they make it easier to move applications between different environments. They also enable more efficient use of resources, as multiple containers can run on the same host without the overhead of a full virtual machine.
+
+## 5\. Monitoring and Observability
+
+![Monitoring and Observability](https://assets.roadmap.sh/guest/monitoring-servers-14k80.png)
+
+Monitoring and observability are essential components of the DevOps practice and key principles for any DevOps team. While monitoring focuses on tracking the health and performance of your systems, observability goes a step further by providing insights into the internal state of your applications based on the data they produce. Together, they enable DevOps teams to detect and troubleshoot issues quickly, ensuring that applications run smoothly.
+
+Continuous monitoring involves constantly tracking key metrics such as CPU usage, memory consumption, response times, and error rates. Tools like Prometheus, Grafana, and the ELK Stack (Elastic, Logstash, Kibana) are popular choices for collecting and visualizing this data. All public cloud providers also have their own solutions, in some cases even based on the open-source versions mentioned before.
+
+Whatever the tool of your choice is, they all provide real-time insights into the performance of your applications and infrastructure, helping you identify potential issues before they impact users.
+
+Now the practice of observability extends beyond monitoring by providing a deeper understanding of how your systems are behaving. It involves collecting and analyzing logs, metrics and traces to gain insights into the root cause of issues. OpenTelemetry, for instance, is an emerging standard for collecting telemetry data, offering a unified way to instrument, collect, and export data for analysis. This standardization makes it easier to integrate observability into your DevOps practices, regardless of the tools you're using.
+
+## 6\. Security in DevOps
+
+![Security in DevOps](https://assets.roadmap.sh/guest/secured-servers-amsed.png)
+
+Security is a critical aspect of the DevOps lifecycle, and it's something that needs to be integrated from the very beginning of any project expected to see the light of production at one point.
+
+DevSecOps is the practice of embedding security into the DevOps pipeline, ensuring that security measures are applied consistently throughout the software development lifecycle (reviewing code for vulnerabilities, checking IaC scripts, etc). Through this practice, DevOps helps catch vulnerabilities early and greatly reduce the risk of security breaches in production.
+
+Sadly, in many companies and teams that follow more traditional practices, security tends to be an afterthought, gaining importance only after the code is written and deployed. This approach can lead to costly and time-consuming fixes. DevSecOps, on the other hand, integrates security into every stage of the development and operations process, from code development to deployment. In the end, this helps security teams to automate security testing, identify vulnerabilities early, and enforce security policies consistently. All without having to read a single line of code themselves.
+
+In this space, tools like Snyk, Aqua Security, and HashiCorp Vault are king and they can help you integrate security into your DevOps workflows.
+
+## 7\. Reducing Toil and Technical Debt
+
+Toil and technical debt are two of the biggest productivity killers in software development. Toil refers to the repetitive, manual tasks that don't add direct value to the product, while technical debt is the accumulation of shortcuts and workarounds that make the codebase harder to maintain over time. Both can slow down your development workflow and make it more challenging to deliver new features.
+
+And because of that, one of the big and important DevOps principles is to aim to reduce both. Yes, DevOps teams can also help reduce technical debt.
+
+Reducing toil involves automating repetitive tasks to free up time for more valuable work. Tools like Ansible, Chef, and Puppet can help automate infrastructure management, while CI/CD pipelines can automate the build, test, and deployment processes. In the end, less manual work translates to reducing the chances of errors and giving team members the chance to focus on more interesting and strategic tasks.
+
+Technical debt, on the other hand, requires a proactive approach to address. It's about finding the right balance between delivering new features and maintaining the quality of the codebase. Regularly refactoring code, improving documentation, and addressing known issues can help keep technical debt in check. Of course, this also needs to be balanced with their ability to deliver new features and move the product forward.
+
+## 8\. GitOps: The Future of Deployment
+
+![GitOps](https://assets.roadmap.sh/guest/git-ops-tmggz.png)
+
+GitOps is a new practice that takes the principles of Git and applies them to operations. It's about using Git as the single source of truth for your infrastructure and application configurations. By storing everything in Git, you can use version control to manage changes, track history, and facilitate collaboration among development and operations teams.
+
+You essentially version your entire infrastructure with the same tools you version your code.
+
+In other words, all changes to the infrastructure and applications are made through pull requests to the Git repository. Once a change is merged, an automated process applies the change to the target environment. This approach provides a consistent, auditable, and repeatable way to manage deployments, making it easier to maintain the desired state of your systems.
+
+Through GitOps, teams can manage deployments and gain the following benefits: improved visibility, version control, and traceability.
+
+This methodology aligns well with the DevOps principles of automation, consistency, and collaboration, making it easier to manage complex deployments at scale.
+
+Key tools for implementing GitOps include Argo CD and Flux. These tools help you automate the deployment process by monitoring the Git repository for changes and applying them to the cluster.
+
+## 9\. Continuous Learning and Improvement
+
+![Continious Learning and Improvement](https://assets.roadmap.sh/guest/learn-improve-4fzcr.png)
+
+In general the world of tech is constantly evolving and changing and continuous learning and improvement are essential practices for staying ahead and relevant.
+
+That said, in the DevOps landscape change is also a constant, with new tools, practices, and technologies emerging all the time. If you think about it, before 2006 we didn’t even have containers.
+
+So to keep up, DevOps engineers and teams need to be committed to learning and improving continuously.
+
+Encouraging a culture of continuous learning within your team can help keep everyone up-to-date with the latest DevOps trends and tools. This can include participating in conferences, attending workshops, and enrolling in online courses. Reading books like "The Phoenix Project," "The Unicorn Project," and "The DevOps Handbook" can provide valuable insights and inspiration.
+
+If you’re not into books, then websites like [12factor.net](http://12factor.net), [OpenGitOps.dev](http://OpenGitOps.dev), and [CNCF.](http://CNCF.)io are also great resources for staying current with industry best practices.
+
+Continuous improvement goes hand-in-hand with continuous learning. It's about regularly reviewing and refining your processes, identifying areas for improvement after failing and experimenting with new approaches. This iterative approach helps you optimize the development process, improve collaboration between devs and operations, and deliver better software.
+
+## 10\. Understanding Programming Concepts
+
+![Understanding Programming Concepts](https://assets.roadmap.sh/guest/code-sample-fjblw.png)
+
+While not every DevOps engineer needs to be a full-fledged developer, having a solid understanding of programming concepts is key to success in the professional world.
+
+A good grasp of programming helps bridge the gap between development and operations, making it easier to collaborate and understand each other's needs. Which, if you think about it, is literally the core principle of the DevOps practice.
+
+Understanding programming translates to being able to write scripts in languages like Bash, Python, or PowerShell to automate tasks, manage infrastructure, and interact with APIs. This can range from simple tasks like automating server setup to more complex operations like orchestrating CI/CD pipelines.
+
+Understanding programming concepts also enables you to better manage the software development lifecycle. It helps you understand how code changes affect system performance, security, and stability. This insight allows you to make more informed decisions when designing and implementing infrastructure and deployment processes.
+
+## 11\. Automation in DevOps
+
+Automation is at the heart of DevOps principles. It's about automating repetitive and manual tasks to accelerate processes, reduce errors, and free up time for more strategic work. We partially covered this concept before as part of the toil reduction principle.
+
+However, it’s important to explain that automation not only involves code builds and tests, it also includes infrastructure provisioning and application deployment. In other words,  automation plays a key role in every stage of the DevOps lifecycle.
+
+The whole point of automation is to accelerate processes. It enables faster, more consistent, and more reliable software delivery. By automating tasks like code integration, testing, and deployment, you can reduce the time it takes to get new features into production and minimize the risk of human error.
+
+There are many areas in the DevOps lifecycle where automation can be applied, in fact, the challenge would be to find areas where it wouldn’t make sense to apply it. These include CI/CD pipelines, infrastructure provisioning, configuration management, monitoring, and security testing. In this area, some of the most popular DevOps tools are Jenkins, Ansible, Terraform, and Selenium. They all provide the building blocks for automating these tasks, allowing you to create a seamless and efficient development workflow that everyone enjoys.
+
+If you’re looking to start implementing automation in your DevOps workflow, consider starting small and gradually expanding automation efforts, using version control for automation scripts (Git is a great option), and continuously monitoring and refining automated processes.
+
+It's important to find a balance between automation and human intervention, ensuring that automation enhances the development workflow without introducing unnecessary complexity.
+
+## Conclusion
+
+And there you have it—the core principles and practices of DevOps in a nutshell. By mastering them, you'll be well on your way to becoming a great [DevOps engineer](https://roadmap.sh/devops/devops-engineer).
+
+Whether you're just starting out or looking to level up your DevOps game, there's always something new to learn and explore. So keep experimenting, keep learning, and most importantly, keep having fun\!
+
+After all, DevOps isn't just about making systems run smoothly—it's about building a culture that encourages innovation, collaboration, and growth. As you dive deeper into the DevOps practice, you'll not only become more skilled but also contribute to creating better software and more agile teams.
--- a/src/data/guides/frontend-frameworks.md
+++ b/src/data/guides/frontend-frameworks.md
@@ -0,0 +1,376 @@
+---
+title: 'Top 7 Frontend Frameworks to Use in 2024: Pro Advice'
+description: 'Get expert advice on frontend frameworks for 2024. Elevate your web development process with these top picks.'
+authorId: fernando
+excludedBySlug: '/frontend/frameworks'
+seo:
+  title: 'Top 7 Frontend Frameworks to Use in 2024: Pro Advice'
+  description: 'Get expert advice on frontend frameworks for 2024. Elevate your web development process with these top picks.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/top-frontend-frameworks-wmqwc.jpg'
+isNew: true
+type: 'textual'
+date: 2024-09-26
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![Best frontend frameworks](https://assets.roadmap.sh/guest/top-frontend-frameworks-wmqwc.jpg)
+
+With the growing complexity of web applications, selecting the right frontend framework is more important than ever. Your choice will impact performance, scalability, and development speed. Not to mention the future-proofing of your application.
+
+In 2024, web development is increasingly about building fast, scalable, and highly interactive user interfaces. Frontend frameworks now need to support real-time interactions, handle large-scale data, and provide excellent developer experiences by simplifying the web development process.
+
+Picking the right frontend framework isn't just about what's popular—it's about finding the tool that fits your project’s needs, whether you’re building a small static site or a large, complex application.
+
+The top frontend frameworks for web development that I’ll cover as part of this article are:
+
+* React
+* VueJS
+* Angular
+* Svelte
+* Solid.js
+* Qwik
+* Astro
+
+## Criteria for Evaluating Frontend Frameworks
+
+Finding what the “best frontend framework” looks like is not easy. In fact, it’s impossible without the particular characteristics of your project, your team, and all other surrounding details. They will all inform your final decision.
+
+To help in that process, I’ve defined our own set of key indicators that will give you an idea of how we’re measuring the value of each of the leading [frontend development](https://roadmap.sh/frontend) frameworks covered in this article.
+
+1. **Performance:** How well does the frontend framework handle real-world scenarios, including page load times, rendering speed, and efficient resource use?
+2. **Popularity and Community Support:** Is there a large community around the framework? How easy is it to find tutorials, forums, and third-party tools?
+3. **Learning Curve:** Is the framework easy to learn for new developers, or does it require mastering complex patterns and paradigms?
+4. **Ecosystem and Extensibility:** Does the framework offer a robust ecosystem of libraries, plugins, and tooling to extend its functionality?
+5. **Scalability and Flexibility:** Can the framework handle both small and large projects? Is it flexible enough to support different project types, from single-page applications (SPAs) to complex enterprise solutions?
+6. **Future-Proofing:** Is the framework actively maintained and evolving? Will it remain relevant in the next few years, based on trends and support?
+
+### My go-to frontend framework of choice
+
+My go-to framework is React because it has the highest ecosystem score and is one of the most future-proofed ones.
+
+I’ve applied the above criteria to the best frontend development frameworks I’m covering below in this guide. This table gives you a snapshot view of how they all compare according to my ratings, and I’ll explain the details further below.
+
+![table of frameworks](https://assets.roadmap.sh/guest/table-of-frameworks-yu22p.png)
+
+Of course, the choice of React is mine, and mine alone. You have to consider your own projects and your own context to understand what the best choice for you would be.
+
+Let’s get into the selection and what their strengths and weaknesses are to help you select the right one for you.
+
+## Top 7 Frontend Development Frameworks in 2024
+
+### React
+
+![React](https://assets.roadmap.sh/guest/react-logo-d5ice.png)
+
+React was created by Facebook in 2013 and has since become one of the most popular frontend frameworks (though technically a library). Initially developed to solve the challenges of building dynamic and complex user interfaces for Facebook’s apps, React introduced the revolutionary concept of the virtual DOM (Document Object Model), which allowed developers to efficiently update only the parts of the UI that changed instead of re-rendering the entire page.
+
+#### Performance
+
+React uses a virtual DOM (the Virtual Document Object Model) to optimize performance by minimizing the number of direct manipulations to the actual DOM. This allows React to efficiently update only the components that need to change, rather than re-rendering the entire page. While React is fast, performance can be impacted in large applications if not managed carefully, especially with unnecessary re-renders or poorly optimized state management (two concepts that have created a lot of literature around them, and yet, most developers still get wrong).
+
+**⭐ Rating: 4/5**
+
+#### Popularity and Community Support
+
+React is one of the most popular frontend frameworks worldwide, with widespread adoption in both small and large-scale applications. Its massive community means there's a wealth of tutorials, libraries, and third-party tools available. With strong backing from Meta and continuous contributions from developers globally, React has one of the richest ecosystems and the largest support networks.
+
+⭐ **Rating: 5/5**
+
+#### Learning Curve
+
+React has a moderate learning curve. It’s relatively easy to get started with, especially if you’re familiar with JavaScript, but understanding concepts like JSX and hooks can take some time (especially if you throw in the relatively new server components). Once you grasp the basics, React becomes easier to work with, but mastering advanced patterns and state management solutions can add complexity.
+
+⭐ **Rating: 3.5/5**
+
+#### Ecosystem and Extensibility
+
+React has one of the most mature and extensive ecosystems in the frontend space. With a vast selection of libraries, tools, and plugins, React can be extended to meet virtually any development need. Key libraries like React Router (for routing) and Redux (for state management) are widely adopted, and there are countless third-party components available. React's ecosystem is one of its greatest strengths, offering flexibility and extensibility for all kinds of projects.
+
+⭐ **Rating: 5/5**
+
+#### Scalability and Flexibility
+
+React is highly flexible and can scale to meet the needs of both small and large applications. Its component-based architecture allows for modular development, making it easy to manage complex UIs. React is adaptable to various types of projects, from simple SPAs to large, enterprise-level applications. However, managing state in larger applications can become challenging, often requiring the use of external tools like Redux or Context API for better scalability.
+
+**⭐ Rating: 4.5/5**
+
+#### Future-Proofing
+
+React remains one of the most future-proof frameworks, with continuous updates and strong backing from Meta (Facebook). Its widespread adoption ensures that it will be well-supported for years to come. The ecosystem is mature, but React is constantly evolving with features like concurrent rendering and server-side components. The size of the community and corporate support make React a safe bet for long-term projects.
+
+⭐ **Rating: 5/5**
+
+### Vue.js
+
+### ![vuejs](https://assets.roadmap.sh/guest/vuejs-logo-b8w07.png)
+
+Vue.js was developed in 2014 by Evan You, who had previously worked on AngularJS at Google. His goal was to create a framework that combined the best parts of Angular’s templating system with the simplicity and flexibility of modern JavaScript libraries like React. Vue is known for its progressive nature, which means developers can incrementally adopt its features without having to completely rewrite an existing project.
+
+#### Performance
+
+Vue’s reactivity system provides a highly efficient way to track changes to data and update the DOM only when necessary. Its virtual DOM implementation is lightweight and fast, making Vue a strong performer for both small and large applications. Vue 3’s Composition API has further optimized performance by enabling more granular control over component updates.
+
+⭐ **Rating: 4.5/5**
+
+#### Popularity and Community Support:
+
+Vue.js has grown significantly in popularity, especially in regions like China and Europe, and is widely adopted by startups and smaller companies. Although it doesn't have the corporate backing of React or Angular, its community is passionate, and the framework enjoys strong support from individual contributors. Vue’s ecosystem is robust, with many official libraries and third-party plugins, making it a favorite among developers looking for a balance of simplicity and power.
+
+⭐ **Rating: 4.5/5**
+
+#### Learning Curve
+
+Vue’s syntax is clean and straightforward, with a structure that is easy to understand even for those new to frontend frameworks. Features like two-way data binding and directives are intuitive, making Vue much easier to pick up compared to React or Angular.
+
+⭐ **Rating: 4.5/5**
+
+#### Ecosystem and Extensibility
+
+Vue has a rich and growing ecosystem, with many official libraries like Vue Router, Vuex (for state management), and Vue CLI (for project setup). Additionally, its ecosystem includes many high-quality third-party plugins that make it easy to extend Vue applications. While not as large as React’s, Vue’s ecosystem is well-curated and highly effective, making it both powerful and developer-friendly.
+
+⭐ **Rating: 4.5/5**
+
+#### Scalability and Flexibility
+
+Vue is extremely flexible and scalable. It is designed to be incrementally adoptable, which means you can use it in small parts of a project or as the foundation for a large-scale application. Vue’s core libraries, along with tools like Vuex, make it highly scalable.
+
+⭐ **Rating: 4.5/5**
+
+#### Future-Proofing
+
+Vue is actively maintained and supported by a strong open-source community. Its development pace is steady. While it doesn’t have the same level of corporate backing as React or Angular, its growing popularity and enthusiastic community ensure its longevity. Vue is a solid choice for long-lasting projects.
+
+⭐ **Rating: 4.5/5**
+
+### Angular
+
+![Angular](https://assets.roadmap.sh/guest/angular-logo-tr4wg.png)
+
+Angular was first introduced by Google in 2010 as AngularJS, a framework that revolutionized web development by introducing two-way data binding and dependency injection. However, AngularJS eventually became difficult to maintain as applications grew more complex, leading Google to rewrite the framework from the ground up in 2016 with the release of Angular 2 (commonly referred to simply as "Angular").
+
+#### Performance
+
+Angular offers solid performance, especially in large enterprise applications. It uses a change detection mechanism combined with the Ahead-of-Time (AOT) compiler to optimize performance by compiling templates into JavaScript code before the browser runs them. The built-in optimizations are robust, but Angular’s size and complexity can lead to performance overhead if not managed correctly.
+
+⭐ **Rating: 4/5**
+
+#### Popularity and Community Support
+
+Angular is backed by Google and is a popular choice for enterprise-level applications, especially in larger organizations. Its community is active, and Google’s long-term support ensures regular updates and improvements. Angular has a strong presence in corporate environments, and its ecosystem includes official tooling and libraries. However, it is less commonly used by smaller teams and individual developers compared to React and Vue.
+
+⭐ **Rating: 4.5/5**
+
+#### Learning Curve
+
+Angular has a steep learning curve due to its complexity and reliance on TypeScript. New web developers may find it challenging to grasp Angular’s concepts, such as dependency injection, decorators, and modules. The comprehensive nature of Angular also means there’s a lot to learn before you can be fully productive, but for experienced developers working on large-scale applications, the structure and tooling can be highly beneficial.
+
+⭐ **Rating: 3/5**
+
+#### Ecosystem and Extensibility
+
+Angular’s ecosystem is comprehensive and fully integrated, offering everything developers need right out of the box. Angular includes official libraries for routing, HTTP client, forms, and more, all provided and maintained by Google. The Angular CLI is a robust tool for managing projects. However, Angular's strict architecture means less flexibility when integrating with external libraries compared to React or Vue, though the ecosystem is extensive.
+
+⭐ **Rating: 4.5/5**
+
+#### Scalability and Flexibility
+
+Angular is built with scalability in mind, making it ideal for large, complex applications. Its strict structure and reliance on TypeScript make it a great fit for projects that require clear architecture and maintainability over time. Angular’s modularity and out-of-the-box features like dependency injection and lazy loading enable it to handle enterprise-level web applications with multiple teams. However, its strictness can reduce flexibility for smaller, less complex projects.
+
+⭐ **Rating: 5/5**
+
+#### Future-Proofing
+
+Angular has a clear roadmap and long-term support, making it one of the most future-proof frameworks, especially for enterprise applications. Google’s regular updates ensure that Angular remains competitive in the evolving frontend ecosystem. Its TypeScript foundation, strong architecture, and large-scale adoption make it a reliable option for projects with long lifecycles.
+
+⭐ **Rating: 5/5**
+
+### Svelte
+
+![Svelte](https://assets.roadmap.sh/guest/svelte-logo-mln7r.png)
+
+Svelte is a relatively new entrant in the frontend landscape, created by Rich Harris in 2016\. Unlike traditional frameworks like React and Vue, which do much of their work in the browser, Svelte takes a different approach. It shifts most of the work to compile time, meaning that the framework compiles the application code into optimized vanilla JavaScript during the build process, resulting in highly efficient and fast-running code.
+
+#### Performance
+
+Svelte takes a unique approach to performance by compiling components into highly optimized vanilla JavaScript at build time, removing the need for a virtual DOM entirely. This leads to very fast runtime performance and smaller bundle sizes, as only the necessary code is shipped to the browser. Svelte excels in small, fast-loading applications, making it one of the fastest frontend frameworks available.
+
+⭐ **Rating: 5/5**
+
+#### Popularity and Community Support
+
+Svelte has seen rapid growth in popularity (partially due to its novel approach). While its community is smaller compared to React, Vue, or Angular, it’s highly engaged and growing steadily. Svelte has fewer third-party libraries and tools, but the community is working hard to expand its ecosystem. It's particularly popular for smaller projects and developers who want a minimalistic framework.
+
+⭐ **Rating: 4/5**
+
+#### Learning Curve
+
+Svelte is relatively easy to learn, especially for web developers familiar with modern JavaScript. Its component-based structure is intuitive, and there’s no need to learn a virtual DOM or complex state management patterns. The absence of a virtual DOM and the simplicity of Svelte’s syntax make it one of the easiest frontend frameworks to pick up.
+
+⭐ **Rating: 4.5/5**
+
+#### Ecosystem and Extensibility
+
+Svelte’s ecosystem is still maturing compared to more established frameworks. While it lacks the extensive third-party library support of React or Vue, Svelte’s core tools like SvelteKit (for building full-stack applications) provide much of what is needed for most use cases. That said, the growing community is actively contributing to expanding the ecosystem and its extensive documentation.
+
+⭐ **Rating: 3.5/5**
+
+#### Scalability and Flexibility
+
+Svelte is highly flexible and performs well in small to medium-sized projects. It’s great at creating fast, lightweight applications with minimal boilerplate. While Svelte’s compile-time approach leads to excellent performance, the truth is Svelte is still too new and untested, so its scalability for very large projects or teams is still to be determined.
+
+⭐ **Rating: 4/5**
+
+#### Future-Proofing
+
+Svelte is gaining momentum as a modern, high-performance framework, and its unique approach has attracted a lot of attention. While the community is still smaller than that of React or Vue, it is growing rapidly, and the introduction of tools like SvelteKit further enhances its long-term viability. Svelte’s focus on simplicity and performance means it has the potential to become a significant player, but it's still early in terms of large-scale enterprise adoption.
+
+⭐ **Rating: 4/5**
+
+### Solid.js
+
+![Solidjs](https://assets.roadmap.sh/guest/solid-logo-4sh7s.png)
+
+Solid.js is a more recent addition to the frontend ecosystem, developed by Ryan Carniato in 2018\. Inspired by React’s declarative style, Solid.js seeks to offer similar features but with even better performance by using a fine-grained reactivity system. Unlike React, which uses a virtual DOM, Solid compiles its reactive components down to fine-grained, efficient updates, reducing overhead and increasing speed.
+
+#### Performance
+
+Solid.js is designed for performance, using a fine-grained reactivity system to ensure that only the necessary parts of the DOM are updated. This eliminates the need for a virtual DOM, resulting in highly efficient rendering and state updates. Solid’s performance is often considered one of the best in the frontend space, especially for applications with complex state management.
+
+⭐ **Rating: 5/5**
+
+#### Popularity and Community Support
+
+Solid.js is still a relatively new player in the frontend space, but it is gaining traction due to its high performance and fine-grained reactivity model. The community is smaller compared to other frameworks but highly enthusiastic, and interest in Solid.js is growing quickly. While it has fewer resources and libraries available compared to larger frameworks, it is gradually building a strong support network.
+
+⭐ **Rating: 3.5/5**
+
+#### Learning Curve
+
+Solid.js has a learning curve similar to React, particularly because of its JSX-like syntax. However, its fine-grained reactivity system introduces new concepts that might take some time to fully understand, especially for those new to reactive programming. While its reactivity model offers powerful performance benefits, frontend developers need to adjust to this different approach, making it slightly more challenging than React for beginners.
+
+⭐ **Rating: 3.5/5**
+
+#### Ecosystem and Extensibility
+
+Solid.js has a smaller but rapidly growing ecosystem. While it supports libraries like Solid Router for routing and integrates well with existing JavaScript tools, the number of available third-party extensions is still limited compared to React or Vue. Solid is seeing increasing contributions from the community, and as it grows in popularity, its ecosystem is expected to expand.
+
+⭐ **Rating: 3.5/5**
+
+#### Scalability and Flexibility
+
+Solid.js, with its fine-grained reactivity, is extremely flexible and scales well for complex applications. Its unique reactivity model enables it to handle large, state-heavy applications with minimal overhead. While Solid is still proving itself in larger, enterprise-level environments, its design offers promising scalability. However, due to its newness, large-scale implementations are less common compared to more established frameworks like React or Angular.
+
+⭐ **Rating: 4/5**
+
+#### Future-Proofing
+
+Solid.js, although newer, is quickly gaining traction due to its performance benefits and innovative reactivity model. Its small but dedicated community is growing, and the framework's architecture is built with modern web needs in mind. While it’s not yet widely adopted in enterprise environments, its potential for long-term use is promising, especially as more developers discover its benefits. However, its ecosystem is still developing.
+
+⭐ **Rating: 4/5**
+
+### Qwik
+
+![Qwik](https://assets.roadmap.sh/guest/qwik-logo-3dfy8.png)
+
+Qwik, created by Misko Hevery (the creator of Angular), is an innovative frontend framework that aims to solve the problem of slow page load times by introducing a new architecture called "resumability." Introduced in 2021 (making it the youngest frontend framework on this list), Qwik is designed to instantly load websites by only downloading and executing the minimal amount of code required to render the page, deferring the loading of other parts of the application until they are needed.
+
+#### Performance
+
+Qwik’s performance is built around its innovative resumable architecture, which optimizes for instant loading. It loads only the minimal amount of JavaScript needed to render the page, and additional code is loaded asynchronously as needed. This makes Qwik ideal for performance-critical applications, especially on slower devices and networks.
+
+⭐ **Rating: 5/5**
+
+#### Popularity and Community Support
+
+Qwik is an emerging framework with an innovative approach to performance. Its community is still in its early stages, but there is increasing interest due to its "resumable" architecture. Although the ecosystem is small, the framework’s unique features have caught the attention of developers looking to push the boundaries of frontend performance. As of 2024, Qwik's community is expanding, though still much smaller than React or Vue.
+
+⭐ **Rating: 3.5/5**
+
+#### Learning Curve
+
+Qwik has a moderate learning curve, largely due to its new "resumable" approach to web development. Developers who are used to traditional frontend frameworks may find Qwik’s architecture and its emphasis on lazy loading and instant loading a bit unfamiliar. While the concepts are powerful, it can take time to fully grasp how to take advantage of Qwik’s unique features.
+
+⭐ **Rating: 3.5/5**
+
+#### Ecosystem and Extensibility
+
+Qwik’s ecosystem is still in its early stages, but it is designed to be compatible with existing tools and libraries. The framework’s emphasis on performance over complexity means that while it lacks a large number of third-party plugins, it is designed to work alongside existing technologies.
+
+⭐ **Rating: 3/5**
+
+#### Scalability and Flexibility
+
+Qwik’s architecture is designed to handle scalability from the ground up. Its "resumable" approach allows applications to scale by loading only the necessary parts of the app on demand, making it particularly well-suited for performance-critical, large-scale projects. Although Qwik is still emerging, its emphasis on scalability and performance ensures it can grow with the demands of large, complex applications, at least on paper. Much like with Svelte, Qwik needs a lot more testing before we can draw a final verdict on its scalability.
+
+⭐ **Rating: 4.5/5**
+
+#### Future-Proofing
+
+Qwik is an exciting new frontend framework that introduces a novel approach with its resumable architecture, positioning it well for future needs around performance and scalability. Though still emerging, Qwik’s design aligns with modern web development process demands, particularly for fast-loading, performance-critical applications. If the community and ecosystem continue to grow, Qwik has strong future-proofing potential, especially for performance-sensitive projects.
+
+⭐ **Rating: 4/5**
+
+###
+
+### Astro
+
+![Astro](https://assets.roadmap.sh/guest/astro-logo-7rzp9.png)
+
+Astro was created by the team at Snowpack in 2021 and is a frontend framework focused on static site generation with minimal JavaScript. Astro takes a unique approach by allowing developers to build components using popular frameworks like React, Vue, and Svelte, but it only ships the HTML to the browser, greatly reducing the amount of JavaScript that needs to be processed by the client.
+
+#### Performance
+
+Astro is optimized for static site generation, shipping little to no JavaScript to the browser by default. This approach leads to very fast page load times, especially for content-heavy sites. While Astro does allow for interactive components, its performance is generally excellent due to the minimal JavaScript footprint on the client side.
+
+⭐ **Rating: 5/5**
+
+#### Popularity and Community Support
+
+Astro is rapidly gaining popularity, especially in the static site generation space. Its framework-agnostic approach and performance optimizations have led to a growing community. While smaller than React or Vue, Astro’s community is highly active, with increasing adoption for content-heavy websites and static site generation. The ecosystem is expanding quickly with new integrations and plugins.
+
+⭐ **Rating: 4/5**
+
+#### Learning Curve
+
+Astro is known for being easy to pick up, especially for developers already familiar with other frontend frameworks like React, Vue, or Svelte. Its framework-agnostic approach allows developers to use familiar components and libraries while taking advantage of Astro’s static site generation features. Astro’s simplicity makes it an accessible choice for beginners and experienced developers alike.
+
+⭐ **Rating: 5/5**
+
+#### Ecosystem and Extensibility
+
+Astro’s ecosystem is rapidly growing, with support for integrations with popular frameworks like React, Vue, and Svelte. Astro’s framework-agnostic approach allows developers to combine reusable components from different ecosystems in a single project. Its extensibility is also enhanced by its plugin system, which allows web developers to customize their creations even further.
+
+⭐ **Rating: 4/5**
+
+#### Scalability and Flexibility
+
+Astro is highly flexible for static sites and excels in building fast, scalable content-heavy websites. Its architecture allows for scaling static sites with minimal client-side JavaScript, making it an excellent choice for projects like blogs, documentation sites, or e-commerce platforms. However, Astro is not designed for large-scale, dynamic web applications like React or Angular, limiting its scalability in highly interactive or complex projects.
+
+⭐ **Rating: 3.5/5**
+
+#### Future-Proofing
+
+Astro is rapidly growing in popularity, especially for static site generation, and its framework-agnostic approach ensures that it can work with future tools and technologies. As the need for fast, content-heavy websites continues to grow, Astro is well-positioned to meet that demand. Its unique architecture and growing ecosystem suggest it will remain relevant, especially for static sites, but its future-proofing for dynamic applications is less certain compared to other frontend frameworks.
+
+⭐ **Rating: 4/5**
+
+## Conclusion
+
+The space of frontend development continues to evolve with an impressive list of frameworks to choose from. Whether you're aiming for performance, scalability, ease of use, or future-proofing, each frontend framework brings something unique to the table.
+
+* **React** remains a reliable choice for large-scale applications.
+* **Vue.js** offers a perfect balance of simplicity and scalability.
+* **Angular** is the go-to for enterprise-level projects.
+* **Svelte** and **Solid.js** are great options for developers who prioritize performance and simplicity.
+* **Qwik** is an exciting new contender focused on instant loading and performance.
+* **Astro** shines in static site generation, combining a modern approach with the ability to integrate multiple frameworks for highly flexible, content-heavy sites.
+
+In the end, the choice comes down to your specific project needs. Whatever you’re building, there's a framework here that can help you succeed.
+
+The future of frontend development is exciting, and these frontend frameworks ensure you're equipped for whatever challenges lie ahead.
--- a/src/data/roadmaps/ai-data-scientist/ai-data-scientist.md
+++ b/src/data/roadmaps/ai-data-scientist/ai-data-scientist.md
@@ -1,7 +1,7 @@
 ---
 jsonUrl: '/jsons/roadmaps/ai-data-scientist.json'
 pdfUrl: '/pdfs/roadmaps/ai-data-scientist.pdf'
-order: 4
+order: 5
 renderer: 'editor'
 briefTitle: 'AI and Data Scientist'
 briefDescription: 'Step by step guide to becoming an AI and Data Scientist in 2024'
--- a/src/data/roadmaps/ai-engineer/ai-engineer.json
+++ b/src/data/roadmaps/ai-engineer/ai-engineer.json
--- a/src/data/roadmaps/ai-engineer/ai-engineer.md
+++ b/src/data/roadmaps/ai-engineer/ai-engineer.md
@@ -0,0 +1,50 @@
+---
+jsonUrl: '/jsons/roadmaps/ai-engineer.json'
+pdfUrl: '/pdfs/roadmaps/ai-engineer.pdf'
+order: 4
+renderer: 'editor'
+briefTitle: 'AI Engineer'
+briefDescription: 'Step by step guide to becoming an AI Engineer in 2024'
+title: 'AI Engineer Roadmap'
+description: 'Step by step guide to becoming an AI Engineer in 2024'
+hasTopics: true
+isNew: true
+dimensions:
+  width: 968
+  height: 3200
+question:
+  title: 'What is an AI Engineer?'
+  description: |
+    An AI Engineer uses pre-trained models and existing AI tools to improve user experiences. They focus on applying AI in practical ways, without building models from scratch. This is different from AI Researchers and ML Engineers, who focus more on creating new models or developing AI theory.
+schema:
+  headline: 'AI Engineer Roadmap'
+  description: 'Learn how to become an AI Engineer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
+  imageUrl: 'https://roadmap.sh/roadmaps/ai-engineer.png'
+  datePublished: '2024-10-03'
+  dateModified: '2024-10-03'
+seo:
+  title: 'AI Engineer Roadmap'
+  description: 'Learn to become an AI Engineer using this roadmap. Community driven, articles, resources, guides, interview questions, quizzes for modern backend development.'
+  keywords:
+    - 'ai engineer roadmap 2024'
+    - 'guide to becoming an ai engineer'
+    - 'ai engineer roadmap'
+    - 'ai engineer skills'
+    - 'become an ai engineer'
+    - 'ai engineer career path'
+    - 'skills for ai engineer'
+    - 'ai engineer quiz'
+    - 'ai engineer interview questions'
+relatedRoadmaps:
+  - 'ai-data-scientist'
+  - 'prompt-engineering'
+  - 'data-analyst'
+  - 'python'
+sitemap:
+  priority: 1
+  changefreq: 'monthly'
+tags:
+  - 'roadmap'
+  - 'main-sitemap'
+  - 'role-roadmap'
+---
--- a/src/data/roadmaps/ai-engineer/content/adding-end-user-ids-in-prompts@4Q5x2VCXedAWISBXUIyin.md
+++ b/src/data/roadmaps/ai-engineer/content/adding-end-user-ids-in-prompts@4Q5x2VCXedAWISBXUIyin.md
@@ -0,0 +1 @@
+# Adding end-user IDs in prompts
--- a/src/data/roadmaps/ai-engineer/content/agents-usecases@778HsQzTuJ_3c9OSn5DmH.md
+++ b/src/data/roadmaps/ai-engineer/content/agents-usecases@778HsQzTuJ_3c9OSn5DmH.md
@@ -0,0 +1 @@
+# Agents Usecases
--- a/src/data/roadmaps/ai-engineer/content/ai-agents@9XCxilAQ7FRet7lHQr1gE.md
+++ b/src/data/roadmaps/ai-engineer/content/ai-agents@9XCxilAQ7FRet7lHQr1gE.md
@@ -0,0 +1 @@
+# AI Agents
--- a/src/data/roadmaps/ai-engineer/content/ai-agents@AeHkNU-uJ_gBdo5-xdpEu.md
+++ b/src/data/roadmaps/ai-engineer/content/ai-agents@AeHkNU-uJ_gBdo5-xdpEu.md
@@ -0,0 +1 @@
+# AI Agents
--- a/src/data/roadmaps/ai-engineer/content/ai-code-editors@XcKeQfpTA5ITgdX51I4y-.md
+++ b/src/data/roadmaps/ai-engineer/content/ai-code-editors@XcKeQfpTA5ITgdX51I4y-.md
@@ -0,0 +1 @@
+# AI Code Editors
--- a/src/data/roadmaps/ai-engineer/content/ai-engineer-vs-ml-engineer@jSZ1LhPdhlkW-9QJhIvFs.md
+++ b/src/data/roadmaps/ai-engineer/content/ai-engineer-vs-ml-engineer@jSZ1LhPdhlkW-9QJhIvFs.md
@@ -0,0 +1 @@
+# AI Engineer vs ML Engineer
--- a/src/data/roadmaps/ai-engineer/content/ai-safety-and-ethics@8ndKHDJgL_gYwaXC7XMer.md
+++ b/src/data/roadmaps/ai-engineer/content/ai-safety-and-ethics@8ndKHDJgL_gYwaXC7XMer.md
@@ -0,0 +1 @@
+# AI Safety and Ethics
--- a/src/data/roadmaps/ai-engineer/content/ai-vs-agi@5QdihE1lLpMc3DFrGy46M.md
+++ b/src/data/roadmaps/ai-engineer/content/ai-vs-agi@5QdihE1lLpMc3DFrGy46M.md
@@ -0,0 +1 @@
+# AI vs AGI
--- a/src/data/roadmaps/ai-engineer/content/anomaly-detection@AglWJ7gb9rTT2rMkstxtk.md
+++ b/src/data/roadmaps/ai-engineer/content/anomaly-detection@AglWJ7gb9rTT2rMkstxtk.md
@@ -0,0 +1 @@
+# Anomaly Detection
--- a/src/data/roadmaps/ai-engineer/content/anthropics-claude@hy6EyKiNxk1x84J63dhez.md
+++ b/src/data/roadmaps/ai-engineer/content/anthropics-claude@hy6EyKiNxk1x84J63dhez.md
@@ -0,0 +1 @@
+# Anthropic's Claude
--- a/src/data/roadmaps/ai-engineer/content/audio-processing@mxQYB820447DC6kogyZIL.md
+++ b/src/data/roadmaps/ai-engineer/content/audio-processing@mxQYB820447DC6kogyZIL.md
@@ -0,0 +1 @@
+# Audio Processing
--- a/src/data/roadmaps/ai-engineer/content/aws-sagemaker@OkYO-aSPiuVYuLXHswBCn.md
+++ b/src/data/roadmaps/ai-engineer/content/aws-sagemaker@OkYO-aSPiuVYuLXHswBCn.md
@@ -0,0 +1 @@
+# AWS Sagemaker
--- a/src/data/roadmaps/ai-engineer/content/azure-ai@3PQVZbcr4neNMRr6CuNzS.md
+++ b/src/data/roadmaps/ai-engineer/content/azure-ai@3PQVZbcr4neNMRr6CuNzS.md
@@ -0,0 +1 @@
+# Azure AI
--- a/src/data/roadmaps/ai-engineer/content/benefits-of-pre-trained-models@1Ga6DbOPc6Crz7ilsZMYy.md
+++ b/src/data/roadmaps/ai-engineer/content/benefits-of-pre-trained-models@1Ga6DbOPc6Crz7ilsZMYy.md
@@ -0,0 +1 @@
+# Benefits of Pre-trained Models
--- a/src/data/roadmaps/ai-engineer/content/bias-and-fareness@lhIU0ulpvDAn1Xc3ooYz_.md
+++ b/src/data/roadmaps/ai-engineer/content/bias-and-fareness@lhIU0ulpvDAn1Xc3ooYz_.md
@@ -0,0 +1 @@
+# Bias and Fareness
--- a/src/data/roadmaps/ai-engineer/content/capabilities--context-length@vvpYkmycH0_W030E-L12f.md
+++ b/src/data/roadmaps/ai-engineer/content/capabilities--context-length@vvpYkmycH0_W030E-L12f.md
@@ -0,0 +1 @@
+# Capabilities / Context Length
--- a/src/data/roadmaps/ai-engineer/content/chat-completions-api@_bPTciEA1GT1JwfXim19z.md
+++ b/src/data/roadmaps/ai-engineer/content/chat-completions-api@_bPTciEA1GT1JwfXim19z.md
@@ -0,0 +1 @@
+# Chat Completions API
--- a/src/data/roadmaps/ai-engineer/content/chroma@dSd2C9lNl-ymmCRT9_ZC3.md
+++ b/src/data/roadmaps/ai-engineer/content/chroma@dSd2C9lNl-ymmCRT9_ZC3.md
@@ -0,0 +1 @@
+# Chroma
--- a/src/data/roadmaps/ai-engineer/content/chunking@mX987wiZF7p3V_gExrPeX.md
+++ b/src/data/roadmaps/ai-engineer/content/chunking@mX987wiZF7p3V_gExrPeX.md
@@ -0,0 +1 @@
+# Chunking
--- a/src/data/roadmaps/ai-engineer/content/code-completion-tools@TifVhqFm1zXNssA8QR3SM.md
+++ b/src/data/roadmaps/ai-engineer/content/code-completion-tools@TifVhqFm1zXNssA8QR3SM.md
@@ -0,0 +1 @@
+# Code Completion Tools
--- a/src/data/roadmaps/ai-engineer/content/cohere@a7qsvoauFe5u953I699ps.md
+++ b/src/data/roadmaps/ai-engineer/content/cohere@a7qsvoauFe5u953I699ps.md
@@ -0,0 +1 @@
+# Cohere
--- a/src/data/roadmaps/ai-engineer/content/conducting-adversarial-testing@Pt-AJmSJrOxKvolb5_HEv.md
+++ b/src/data/roadmaps/ai-engineer/content/conducting-adversarial-testing@Pt-AJmSJrOxKvolb5_HEv.md
@@ -0,0 +1 @@
+# Conducting adversarial testing
--- a/src/data/roadmaps/ai-engineer/content/constraining-outputs-and-inputs@ONLDyczNacGVZGojYyJrU.md
+++ b/src/data/roadmaps/ai-engineer/content/constraining-outputs-and-inputs@ONLDyczNacGVZGojYyJrU.md
@@ -0,0 +1 @@
+# Constraining outputs and inputs
--- a/src/data/roadmaps/ai-engineer/content/cut-off-dates--knowledge@LbB2PeytxRSuU07Bk0KlJ.md
+++ b/src/data/roadmaps/ai-engineer/content/cut-off-dates--knowledge@LbB2PeytxRSuU07Bk0KlJ.md
@@ -0,0 +1 @@
+# Cut-off Dates / Knowledge
--- a/src/data/roadmaps/ai-engineer/content/dall-e-api@LKFwwjtcawJ4Z12X102Cb.md
+++ b/src/data/roadmaps/ai-engineer/content/dall-e-api@LKFwwjtcawJ4Z12X102Cb.md
@@ -0,0 +1 @@
+# DALL-E API
--- a/src/data/roadmaps/ai-engineer/content/data-classification@06Xta-OqSci05nV2QMFdF.md
+++ b/src/data/roadmaps/ai-engineer/content/data-classification@06Xta-OqSci05nV2QMFdF.md
@@ -0,0 +1 @@
+# Data Classification
--- a/src/data/roadmaps/ai-engineer/content/development-tools@NYge7PNtfI-y6QWefXJ4d.md
+++ b/src/data/roadmaps/ai-engineer/content/development-tools@NYge7PNtfI-y6QWefXJ4d.md
@@ -0,0 +1 @@
+# Development Tools
--- a/src/data/roadmaps/ai-engineer/content/embedding@grTcbzT7jKk_sIUwOTZTD.md
+++ b/src/data/roadmaps/ai-engineer/content/embedding@grTcbzT7jKk_sIUwOTZTD.md
@@ -0,0 +1 @@
+# Embedding
--- a/src/data/roadmaps/ai-engineer/content/embeddings@XyEp6jnBSpCxMGwALnYfT.md
+++ b/src/data/roadmaps/ai-engineer/content/embeddings@XyEp6jnBSpCxMGwALnYfT.md
@@ -0,0 +1 @@
+# Embeddings
--- a/src/data/roadmaps/ai-engineer/content/faiss@JurLbOO1Z8r6C3yUqRNwf.md
+++ b/src/data/roadmaps/ai-engineer/content/faiss@JurLbOO1Z8r6C3yUqRNwf.md
@@ -0,0 +1 @@
+# FAISS
--- a/src/data/roadmaps/ai-engineer/content/fine-tuning@15XOFdVp0IC-kLYPXUJWh.md
+++ b/src/data/roadmaps/ai-engineer/content/fine-tuning@15XOFdVp0IC-kLYPXUJWh.md
@@ -0,0 +1 @@
+# Fine-tuning
--- a/src/data/roadmaps/ai-engineer/content/generation@2jJnS9vRYhaS69d6OxrMh.md
+++ b/src/data/roadmaps/ai-engineer/content/generation@2jJnS9vRYhaS69d6OxrMh.md
@@ -0,0 +1 @@
+# Generation
--- a/src/data/roadmaps/ai-engineer/content/googles-gemini@oe8E6ZIQWuYvHVbYJHUc1.md
+++ b/src/data/roadmaps/ai-engineer/content/googles-gemini@oe8E6ZIQWuYvHVbYJHUc1.md
@@ -0,0 +1 @@
+# Google's Gemini
--- a/src/data/roadmaps/ai-engineer/content/hugging-face-hub@YLOdOvLXa5Fa7_mmuvKEi.md
+++ b/src/data/roadmaps/ai-engineer/content/hugging-face-hub@YLOdOvLXa5Fa7_mmuvKEi.md
@@ -0,0 +1 @@
+# Hugging Face Hub
--- a/src/data/roadmaps/ai-engineer/content/hugging-face-models@8XjkRqHOdyH-DbXHYiBEt.md
+++ b/src/data/roadmaps/ai-engineer/content/hugging-face-models@8XjkRqHOdyH-DbXHYiBEt.md
@@ -0,0 +1 @@
+# Hugging Face Models
--- a/src/data/roadmaps/ai-engineer/content/hugging-face-models@EIDbwbdolR_qsNKVDla6V.md
+++ b/src/data/roadmaps/ai-engineer/content/hugging-face-models@EIDbwbdolR_qsNKVDla6V.md
@@ -0,0 +1 @@
+# Hugging Face Models
--- a/src/data/roadmaps/ai-engineer/content/hugging-face-tasks@YKIPOiSj_FNtg0h8uaSMq.md
+++ b/src/data/roadmaps/ai-engineer/content/hugging-face-tasks@YKIPOiSj_FNtg0h8uaSMq.md
@@ -0,0 +1 @@
+# Hugging Face Tasks
--- a/src/data/roadmaps/ai-engineer/content/hugging-face@v99C5Bml2a6148LCJ9gy9.md
+++ b/src/data/roadmaps/ai-engineer/content/hugging-face@v99C5Bml2a6148LCJ9gy9.md
@@ -0,0 +1 @@
+# Hugging Face
--- a/src/data/roadmaps/ai-engineer/content/image-generation@49BWxYVFpIgZCCqsikH7l.md
+++ b/src/data/roadmaps/ai-engineer/content/image-generation@49BWxYVFpIgZCCqsikH7l.md
@@ -0,0 +1 @@
+# Image Generation
--- a/src/data/roadmaps/ai-engineer/content/image-understanding@fzVq4hGoa2gdbIzoyY1Zp.md
+++ b/src/data/roadmaps/ai-engineer/content/image-understanding@fzVq4hGoa2gdbIzoyY1Zp.md
@@ -0,0 +1 @@
+# Image Understanding
--- a/src/data/roadmaps/ai-engineer/content/impact-on-product-development@qJVgKe9uBvXc-YPfvX_Y7.md
+++ b/src/data/roadmaps/ai-engineer/content/impact-on-product-development@qJVgKe9uBvXc-YPfvX_Y7.md
@@ -0,0 +1 @@
+# Impact on Product Development
--- a/src/data/roadmaps/ai-engineer/content/indexing-embeddings@5TQnO9B4_LTHwqjI7iHB1.md
+++ b/src/data/roadmaps/ai-engineer/content/indexing-embeddings@5TQnO9B4_LTHwqjI7iHB1.md
@@ -0,0 +1 @@
+# Indexing Embeddings
--- a/src/data/roadmaps/ai-engineer/content/inference-sdk@3kRTzlLNBnXdTsAEXVu_M.md
+++ b/src/data/roadmaps/ai-engineer/content/inference-sdk@3kRTzlLNBnXdTsAEXVu_M.md
@@ -0,0 +1 @@
+# Inference SDK
--- a/src/data/roadmaps/ai-engineer/content/inference@KWjD4xEPhOOYS51dvRLd2.md
+++ b/src/data/roadmaps/ai-engineer/content/inference@KWjD4xEPhOOYS51dvRLd2.md
@@ -0,0 +1 @@
+# Inference
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Arik Chakma	2683ed5076	fix: bcrypt open source link	2024-10-05 10:53:14 +06:00
github-actions[bot]	f876ba8df5	chore: update roadmap content json (#7339 ) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>	2024-10-05 09:52:41 +06:00
Jean-François Greffier	c26fb97bc7	Use react.dev for links (#7332 ) * Update useCallback with new React website * Update links with new React website	2024-10-04 18:41:47 +01:00
Koki Kazaore	3b1cc91405	update index.md of 101-ec2 dir (#7329 )	2024-10-04 14:31:53 +01:00
Kamran Ahmed	5a49ad45be	Remove best practices	2024-10-04 11:59:48 +01:00
Kamran Ahmed	be221a2b14	Remove content from AI engineer roadmap	2024-10-04 11:31:36 +01:00
Satyam Vyas	6461ccaf59	Fix: Added content for Prompt Engineering: Prompt Hacking (#7318 ) * fix: added content for Prompt Hacking * fix: formatted the roadmap content according to the guidelines	2024-10-04 09:25:28 +01:00
Robiul Hossain	aa76db78da	Devops roadmap: add resources links (#7317 ) * feat: add a article for nginx as reverse proxy in devops roadmap * feat: add nginx as load balancer article in devops roadmap * feat: add a ufw filewall blog for fiirewall resources in devops roadmap	2024-10-04 09:18:37 +01:00
github-actions[bot]	c40cda13d8	chore: update roadmap content json (#7322 ) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>	2024-10-04 07:55:48 +06:00
Kamran Ahmed	487145b9a4	UI redesign for invite page	2024-10-03 23:33:27 +01:00
Arik Chakma	cc817b060c	feat: add referral user count (#7233 ) * feat: add referral user count * feat: add referrals leaderboard * fix: update UI * Update referral design * Update invite friends UI * Add leaderboard page * Update leaderboard page --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>	2024-10-03 23:07:21 +01:00
Kamran Ahmed	06c242cf32	Add AI engineer roadmap content	2024-10-03 15:28:33 +01:00
Kamran Ahmed	5b09e61b86	Add content to AI Engineer roadmap	2024-10-03 15:28:33 +01:00
Kamran Ahmed	a3fedad816	Add content to AI Engineer roadmap	2024-10-03 15:28:33 +01:00
Kamran Ahmed	338f6c5d4a	Add AI Engineer roadmap content	2024-10-03 15:28:33 +01:00
Robiul Hossain	9d6d77f93e	feat: remove the packag-lock.json file from commit (#7301 )	2024-10-03 15:27:42 +01:00
mitch edwards // valhalla_dev	f4c717b958	Addition of the poem library to web-development as well as the file-parsing topic (#7291 ) Copy and links added to a few Rust topics. --------- Co-authored-by: dsh <daniel.s.holdsworth@gmail.com>	2024-10-03 15:25:37 +01:00
Berkcan Gümüşışık	65fe7aeb71	Python resources added. (#7293 )	2024-10-03 15:23:45 +01:00
Aryan Chaurasia	1d0e65c2c8	Added content for KV database (#7295 ) * Update key-value-database@l2aXyO3STnhbFjvUXPpm2.md Added content for KV database * Update src/data/roadmaps/redis/content/key-value-database@l2aXyO3STnhbFjvUXPpm2.md --------- Co-authored-by: dsh <daniel.s.holdsworth@gmail.com>	2024-10-03 15:20:48 +01:00
Vedansh	421133ecc2	Improved Frontend Roadmap (#7298 ) * Phase - 1 * Phase - 2 * Phase - 3 * Phase - 4 * Phase - 5 * Phase - 6 * Phase - 7 * Apply suggestions from code review --------- Co-authored-by: dsh <daniel.s.holdsworth@gmail.com>	2024-10-03 15:16:07 +01:00
joel1st	346c630019	Update hashing--encryption--encoding@7r7o8pYhFHVAJIv0wNT6X.md (#7315 ) Collisions are possible with hashes & lossless (which would be the case with text) encoding/decoding does not have issues with collisions.	2024-10-03 14:54:44 +01:00
Kamran Ahmed	3b929e45d2	Add AI Engineer roadmap PDF	2024-10-03 12:27:31 +01:00
Satyam Vyas	2bef597ced	Improved Content in Prompt Hacking (#7308 ) * Update index.md * Update src/data/roadmaps/prompt-engineering/content/107-prompt-hacking/index.md --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>	2024-10-03 08:48:08 +01:00
Vedansh	1219b9e905	fix: devops os broken link (#7306 )	2024-10-03 08:35:01 +06:00
Hashir V	87ef708da3	Add content for axum (#7299 ) * Update 104-axum.md * Update src/data/roadmaps/rust/content/108-web-development/104-axum.md --------- Co-authored-by: dsh <daniel.s.holdsworth@gmail.com>	2024-10-02 15:17:22 +01:00
github-actions[bot]	0643e86514	chore: update roadmap content json (#7292 ) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>	2024-10-02 09:41:10 +06:00
Kamran Ahmed	814b819195	Leaderboard page UI	2024-10-01 21:37:32 +01:00
Kamran Ahmed	9f2efc5872	UI for leaderboard	2024-10-01 19:31:04 +01:00
Arik Chakma	55f0eff569	feat: add github contributors leaderboard (#7277 ) * feat: add github contributors leaderboard * Improve UI for leaderboard --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>	2024-10-01 18:55:13 +01:00
Vedansh	47936801fd	Improve backend roadmap resources (#7257 ) * Phase - A to F * Phase - G to M * Phase - N to S * Phase - S to Z * Update src/data/roadmaps/backend/content/bcrypt@dlG1bVkDmjI3PEGpkm1xH.md Co-authored-by: dsh <daniel.s.holdsworth@gmail.com> * Update src/data/roadmaps/backend/content/caddy@Op-PSPNoyj6Ss9CS09AXh.md Co-authored-by: dsh <daniel.s.holdsworth@gmail.com> * Update src/data/roadmaps/backend/content/loadshifting@HoQdX7a4SnkFRU4RPQ-D5.md Co-authored-by: dsh <daniel.s.holdsworth@gmail.com> * Update src/data/roadmaps/backend/content/ms-sql@dEsTje8kfHwWjCI3zcgLC.md Co-authored-by: dsh <daniel.s.holdsworth@gmail.com> * Update src/data/roadmaps/backend/content/open-api-specs@9cD5ag1L0GqHx4_zxc5JX.md Co-authored-by: dsh <daniel.s.holdsworth@gmail.com> * Update twelve-factor-apps@8DmabQJXlrT__COZrDVTV.md Co-authored-by: dsh <daniel.s.holdsworth@gmail.com> --------- Co-authored-by: dsh <daniel.s.holdsworth@gmail.com>	2024-10-01 15:54:15 +01:00
Kamran Ahmed	6b118d14d3	Add project status	2024-10-01 15:53:22 +01:00
Kamran Ahmed	efbd1d7f04	Project card loading status	2024-10-01 14:45:05 +01:00
psaradhi	f036a11784	Update the satisfies content to be minimal (#7211 ) * changed example to use toUpperCase() instead of .at(0) because .at(0) does not cause any errors since it is available in string and array * Update satisfies-keyword@HD1UGOidp7JGKdW6CEdQ_.md --------- Co-authored-by: pardha <pardha@Vs-MacBook-Pro.local> Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>	2024-10-01 14:36:33 +01:00
Vedansh	3d7bdc55bd	Improve android roadmap content (#7236 ) * Phase - 1. * Phase - 2 (B) * Phase - 3 (C) * Phase - 4 (D) * Phase - 5 (E,F) * Phase - 6 (G) * Phase - 7 (I) * Phase - 8 (J&K) * Phase - 9 (L) * Phase - 10 (M,N) * Phase - 11 (O,P,R,S) * Phase - 12 (T,U,V,W) * Update animations@Xn1VQ-xOT67ZfJJTM4r1p.md * Update src/data/roadmaps/android/content/apollo-android@ww0fTbdXwVr-QIOClU7ng.md Co-authored-by: dsh <daniel.s.holdsworth@gmail.com> * Update basics-of-kotlin@jl1FsQ5-WGKeFyaILNt_p.md * Update src/data/roadmaps/android/content/chucker@7RKN1FNtRE_BE6QeAQrKb.md Co-authored-by: dsh <daniel.s.holdsworth@gmail.com> * Update buttons@WhfzFOUpm0DFEj7Oeq21R.md * Update src/data/roadmaps/android/content/rxkotlin@4h37WBpYxRRyw9oH8ge7o.md Co-authored-by: dsh <daniel.s.holdsworth@gmail.com> --------- Co-authored-by: dsh <daniel.s.holdsworth@gmail.com> Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>	2024-10-01 14:31:51 +01:00
github-actions[bot]	b658591c45	chore: update roadmap content json (#7283 ) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>	2024-10-01 14:28:43 +01:00
Arik Chakma	52c1b20f56	feat: add project status (#7252 ) * feat: add project status * Update project card and fix warnings * Add loading indicator to project card --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>	2024-10-01 14:27:39 +01:00
Kamran Ahmed	e3ca03e531	Opening topic should not hide sponsor	2024-10-01 11:48:52 +01:00
Francesco Mannino	2378cd4bb9	[typo]: Update 102-insertion-sort.md (#7281 )	2024-10-01 09:54:22 +01:00
Eduard Brahas	d673a06472	Update what-is-software-architecture@EGG99VA-PEdWdVxNDLtG_.md (#7280 )	2024-10-01 09:48:50 +01:00
Sandeep Sahani	122bbe6b27	Update ios-architecture@IduGSdUa2Fi7VFMLKgmsS.md (#7279 ) * Update ios-architecture@IduGSdUa2Fi7VFMLKgmsS.md Added description for iOS Architecture, ensuring contribution rules. * Update src/data/roadmaps/ios/content/ios-architecture@IduGSdUa2Fi7VFMLKgmsS.md --------- Co-authored-by: dsh <daniel.s.holdsworth@gmail.com>	2024-10-01 09:46:36 +01:00
Danrley Senegalha Pires	d2a36a9d4c	fix: change tag from article to video (#7285 )	2024-10-01 09:44:59 +01:00
Danrley Senegalha Pires	04151f9693	fix: change tag from article to video (#7284 )	2024-10-01 09:44:43 +01:00
Ahmad Asaad	264afe4e03	Add a link to "Learn Git Branching" tutorial to "Branching Basics" topic in "Git & Github" roadmap & rename file in "Backend" roadmap content. (#7250 ) Added "Learn Git Branching" tutorial link.	2024-09-30 11:44:42 +01:00
github-actions[bot]	678388d401	chore: update roadmap content json (#7271 ) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>	2024-09-30 16:42:54 +06:00
cromulent0101	8ce7aa7bcb	Update SSL/TLS pages with correct topic content (#7272 ) * Update SSL TLS pages with correct topic * Update TLS pages with correct non-SSO content * Update SSL and TLS pages withcorrect content	2024-09-30 11:42:29 +01:00
Aryan Chaurasia	447437bfc9	Update in-memory-data-structure-store@M-EXrTDeAEMz_IkEi-ab4.md (#7270 ) * Update in-memory-data-structure-store@M-EXrTDeAEMz_IkEi-ab4.md added content * Update src/data/roadmaps/redis/content/in-memory-data-structure-store@M-EXrTDeAEMz_IkEi-ab4.md --------- Co-authored-by: dsh <daniel.s.holdsworth@gmail.com>	2024-09-30 11:41:30 +01:00
Brian Rodriguez	72a04b9b9f	fix: update android roadmap content	2024-09-30 02:22:40 +06:00
github-actions[bot]	15d19eeb6c	chore: update roadmap content json (#7253 ) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>	2024-09-28 17:55:18 +06:00
Kamran Ahmed	9aae8b5eb7	Add scrimba banner	2024-09-27 15:39:11 +01:00
dsh	0ebf479d9b	Add backend frameworks guide (#7245 ) * completed backend frameworks guide and updated faqs * update og image	2024-09-27 15:19:32 +01:00
dsh	1035ea8041	Add frontend framework guide (#7240 ) * add frontend framework guide * added new faq to link to article	2024-09-27 15:18:51 +01:00
dsh	f3c9de8f78	Add DevOps principles guide (#7219 ) * add devops principles guide * update devops question copy	2024-09-27 15:17:49 +01:00
dsh	a5f043b4e9	Update mlops content (#7210 )	2024-09-27 15:17:10 +01:00
dsh	1090545b82	Add migrations to db section (#7175 )	2024-09-27 15:15:31 +01:00
dsh	f2bc4548ba	Cleanup frontend roadmap links (#7026 ) * cleaning up FE links * astro topics * 52 topics completed * finish updating fe content * correct angular site link * webpack topic --------- Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>	2024-09-27 15:15:14 +01:00
dsh	8e9d1df3d2	Add hacktoberfest contribution docs (#7217 ) * initial hacktoberfest contribution points * added note	2024-09-27 15:14:47 +01:00
Mark	67475b1b6d	Fix article link for Knexjs should be official (#7247 )	2024-09-27 15:06:32 +01:00
dsh	88b830c862	added provisioning content and links (#7246 )	2024-09-27 11:23:55 +01:00
Brian Rodriguez	b29d8150c7	[Add] Android docs: SharedPreferences & JUnit (#7243 )	2024-09-27 10:05:32 +01:00
github-actions[bot]	c0b1337755	chore: update roadmap content json (#7241 ) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>	2024-09-27 06:19:27 +06:00
Mark	4df1814769	Fix link in Nodejs roadmap - NestJS section (#7239 )	2024-09-26 13:27:42 +01:00
github-actions[bot]	35d38f654f	chore: update roadmap content json (#7234 ) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>	2024-09-26 18:14:56 +06:00
Abbas Pourfallah	f20334b0de	Add description of what is redis (#7227 ) * Add description of what is redis --------- Co-authored-by: Arik Chakma <arikchangma@gmail.com>	2024-09-25 15:07:38 +01:00
github-actions[bot]	1c0a8d1f47	chore: update roadmap content json (#7223 ) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>	2024-09-25 17:55:20 +06:00
Brian Rodriguez	4df1ef730c	[Add] Android docs: Datastore & Room (#7224 )	2024-09-25 11:02:58 +01:00
Stefan Cristian	f177d57b2d	fix: remove invalid URL (#7222 ) Invalid URL: https://flutterbyexample.com/lesson/about-dart	2024-09-25 06:05:17 +06:00
github-actions[bot]	216d389cd4	chore: update roadmap content json (#7214 ) Co-authored-by: kamranahmedse <4921183+kamranahmedse@users.noreply.github.com>	2024-09-25 06:03:55 +06:00
Vedansh	b265da3b37	Improved Git-Github Roadmap (#7218 ) Cleaned spelling and grammatical issues in topics. Added new, official links to docs etc. --------- Co-authored-by: dsh <daniel.s.holdsworth@gmail.com>	2024-09-24 14:52:35 +01:00
Kamran Ahmed	3786c91d71	Ignore compressing .gif	2024-09-23 22:41:55 +01:00
Kamran Ahmed	86c65e6d72	Fix image clipping	2024-09-23 22:37:56 +01:00
Kamran Ahmed	13290595b2	Update changelob banner	2024-09-23 22:34:59 +01:00
Kamran Ahmed	82359f89a0	Update account streak UI and changelog banner design	2024-09-23 19:10:21 +01:00
Kamran Ahmed	e3e972a360	Add changelog banner	2024-09-23 19:00:03 +01:00
Kamran Ahmed	72f8da6805	Update redis roadmap changelog	2024-09-23 18:19:09 +01:00
Kamran Ahmed	daa5a430bd	Update banner	2024-09-23 18:12:14 +01:00
Kamran Ahmed	5c96a57f85	Change color for recommended roadmaps	2024-09-23 16:31:08 +01:00
Kamran Ahmed	59e359f303	Add changelog page	2024-09-23 16:17:49 +01:00
Kamran Ahmed	61816ab1e3	Changelog page design	2024-09-23 15:54:06 +01:00
Kamran Ahmed	53e87095ef	Update changelog page	2024-09-23 15:19:10 +01:00