fix: format user count

* feat: add project user count

* feat: add user count

* fix: user count

.github/workflows/label-issue.yml

@@ -20,7 +20,7 @@ jobs:
             if (issue.labels.some(label => label.name === 'topic-change')) {
               if (roadmapUrl) {
                 const roadmapSlug = new URL(roadmapUrl[0]).pathname.replace(/\//, '');
-                github.issues.addLabels({
+                github.rest.issues.addLabels({
                   owner: context.repo.owner,
                   repo: context.repo.repo,
                   issue_number: issue.number,
@@ -30,7 +30,7 @@ jobs:
             
               // Close the issue if it has no roadmap URL
               if (!roadmapUrl) {
-                github.issues.update({
+                github.rest.issues.update({
                   owner: context.repo.owner,
                   repo: context.repo.repo,
                   issue_number: issue.number,

public/roadmap-content/angular.json

@@ -1217,8 +1217,34 @@
   },
   "XC_K1Wahl2ySqOXoym4YU": {
     "title": "Typed Forms",
-    "description": "",
-    "links": []
+    "description": "Since Angular 14, reactive forms are strictly typed by default. You don't have to define extra custom types or add a ton of type annotations to your form declarations to benefit from this extra type safety, as Angular will infer types from the default value of a form control. Non-typed forms are still supported. To use them, you must import the `Untyped` symbols from `@angular/forms`.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Angular Official Docs - @let",
+        "url": "https://angular.dev/api/core/@let",
+        "type": "article"
+      },
+      {
+        "title": "Angular Strictly Typed Forms (Complete Guide)",
+        "url": "https://blog.angular-university.io/angular-typed-forms/",
+        "type": "article"
+      },
+      {
+        "title": "Getting started with typed reactive forms in Angular",
+        "url": "https://www.youtube.com/watch?v=mT3UR0TdDnU",
+        "type": "video"
+      },
+      {
+        "title": "Angular TYPED Forms: Are You Using Them Correctly?",
+        "url": "https://www.youtube.com/watch?v=it2BZoIvBPc",
+        "type": "video"
+      },
+      {
+        "title": "Knowing this makes Angular typed forms WAY less awkward",
+        "url": "https://www.youtube.com/watch?v=xpRlijg6spo",
+        "type": "video"
+      }
+    ]
   },
   "uDx4lPavwsJFBMzdQ70CS": {
     "title": "Template-driven Forms",
@@ -1492,8 +1518,13 @@
   },
   "kdMJHljMzGA3oRlh8Zvos": {
     "title": "Transformation",
-    "description": "In RxJS, \"transformation\" refers to the process of modifying or manipulating the data emitted by an Observable. There are a variety of methods available in RxJS that can be used to transform the data emitted by an Observable, including:\n\n*   map: applies a function to each item emitted by the Observable and emits the resulting value\n*   mergeMap: applies a function to each item emitted by the Observable, and then merges the resulting Observables into a single Observable\n*   switchMap: applies a function to each item emitted by the Observable, and then switches to the latest resulting Observable\n*   concatMap: applies a function to each item emitted by the Observable, and then concatenates the resulting Observables into a single Observable\n*   exhaustMap: applies a function to each item emitted by the Observable, but ignores subsequent emissions until the current Observable completes\n\nThese are just a few examples of the many methods available in RxJS for transforming the data emitted by an Observable. Each method has its own specific use case, and the best method to use will depend on the requirements of your application.\n\nHere are the official documentation links for the RxJS transformation methods:\n\nYou can find more information and examples on these methods in the official RxJS documentation. Additionally, you can find more operators on [https://rxjs.dev/api/operators](https://rxjs.dev/api/operators) and you can also find more information on the library as a whole on [https://rxjs.dev/](https://rxjs.dev/)",
+    "description": "In RxJS, \"transformation\" refers to the process of modifying or manipulating the data emitted by an Observable. There are a variety of methods available in RxJS that can be used to transform the data emitted by an Observable, including:\n\n*   **map**: applies a function to each item emitted by the Observable and emits the resulting value\n*   **mergeMap**: applies a function to each item emitted by the Observable, and then merges the resulting Observables into a single Observable\n*   **switchMap**: applies a function to each item emitted by the Observable, and then switches to the latest resulting Observable\n*   **concatMap**: applies a function to each item emitted by the Observable, and then concatenates the resulting Observables into a single Observable\n*   **exhaustMap**: applies a function to each item emitted by the Observable, but ignores subsequent emissions until the current Observable completes\n\nThese are just a few examples of the many methods available in RxJS for transforming the data emitted by an Observable. Each method has its own specific use case, and the best method to use will depend on the requirements of your application.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "RxJs Docs - Operators",
+        "url": "https://rxjs.dev/api/operators",
+        "type": "article"
+      },
       {
         "title": "map",
         "url": "https://rxjs.dev/api/operators/map",
@@ -1814,8 +1845,29 @@
   },
   "EbJib-XfZFF9bpCtL3aBs": {
     "title": "Developer Tools",
-    "description": "",
-    "links": []
+    "description": "Angular offers a suite of powerful developer tools designed to streamline and enhance the development process. These include the Angular CLI for efficient project setup and management, the Angular DevTools extension for advanced debugging and profiling, and the Angular Language Service for improved code editing and completion. Leveraging these tools will significantly improve your ability to write high-quality Angular code.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "VS Code NG Language Service",
+        "url": "https://github.com/angular/vscode-ng-language-service",
+        "type": "opensource"
+      },
+      {
+        "title": "Angular Official Docs - devtools",
+        "url": "https://angular.dev/tools/devtools",
+        "type": "article"
+      },
+      {
+        "title": "Angular Official Docs - CLI",
+        "url": "https://angular.dev/tools/cli",
+        "type": "article"
+      },
+      {
+        "title": "Language Service Docs",
+        "url": "https://angular.dev/tools/language-service",
+        "type": "article"
+      }
+    ]
   },
   "4YSk6I63Ew--zoXC3xmrC": {
     "title": "Angular CLI",
@@ -2075,8 +2127,19 @@
   },
   "YHV5oFwLwphXf1wJTDZuG": {
     "title": "Using Libraries",
-    "description": "",
-    "links": []
+    "description": "Libraries are published as `npm packages`, usually together with schematics that integrate them with the Angular CLI. To integrate reusable library code into an application, you need to install the package and import the provided functionality in the location you use it. For most published Angular libraries, use the `ng add <lib_name>` Angular CLI command. A published library typically provides a `README` file or other documentation on how to add that library to your application. A library is able to be updated by the publisher, and also has individual dependencies which need to be kept current. To check for updates to your installed libraries, use the `ng update` Angular CLI command.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Angular Official Docs - Using Libraries",
+        "url": "https://angular.dev/tools/libraries/using-libraries",
+        "type": "article"
+      },
+      {
+        "title": "npm",
+        "url": "https://www.npmjs.com/",
+        "type": "article"
+      }
+    ]
   },
   "A1mYMg7cbcj6p_VkDf-Tz": {
     "title": "Creating Libraries",
@@ -2570,8 +2633,34 @@
   },
   "lLa-OnHV6GzkNFZu29BIT": {
     "title": "Testing",
-    "description": "In any software development process, Testing the application plays a vital role. If Bugs and crashes are not figured out and solved they can defame the development company as well as hurt the clients too. But, Angular’s architecture comes with built-in testability features. As soon as you create a new project with Angular CLI, two essential testing tools are installed.They are: Jasmine and Karma. Jasmine is the testing library which structures individual tests into specifications (“specs”) and suites. And Karma is the test runner, which enables the different browsers to run the tests mentioned by Jasmine and the browsers will finally report the test results back.",
-    "links": []
+    "description": "In any software development process, testing the application plays a vital role. If bugs and crashes are not figured out and solved they can defame the development company as well as hurt the clients too. But, Angular’s architecture comes with built-in testability features. As soon as you create a new project with Angular CLI, two essential testing tools are installed. They are: Jasmine and Karma. Jasmine is the testing library which structures individual tests into specifications (“specs”) and suites. And Karma is the test runner, which enables the different browsers to run the tests mentioned by Jasmine and the browsers will finally report the test results back.\n\nYou can also unit test an Angular application with other testing libraries and test runners. Each library and runner has its own distinctive installation procedures, configuration, and syntax.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Angular Official Docs - Testing",
+        "url": "https://angular.dev/guide/testing",
+        "type": "article"
+      },
+      {
+        "title": "Jasmine Official Docs",
+        "url": "https://jasmine.github.io/",
+        "type": "article"
+      },
+      {
+        "title": "Karma Official Docs",
+        "url": "https://karma-runner.github.io/latest/index.html",
+        "type": "article"
+      },
+      {
+        "title": "Testing Angular - A Guide to Robust Angular Applications",
+        "url": "https://testing-angular.com/",
+        "type": "article"
+      },
+      {
+        "title": "Introduction | Angular Unit Testing Made Easy: A Comprehensive Introduction",
+        "url": "https://www.youtube.com/watch?v=emnwsVy8wRs",
+        "type": "video"
+      }
+    ]
   },
   "HU1eTYB321C93qh_U7ioF": {
     "title": "Testing Services",
@@ -2790,18 +2879,71 @@
   },
   "W8OwpEw00xn0GxidlJjdc": {
     "title": "Localize Package",
-    "description": "",
-    "links": []
+    "description": "To take advantage of the localization features of Angular, use the Angular CLI to add the `@angular/localize` package to your project. If `@angular/localize` is not installed and you try to build a localized version of your project (for example, while using the i18n attributes in templates), the Angular CLI will generate an error, which would contain the steps that you can take to enable i18n for your project.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Angular Official Docs - Add the localize package",
+        "url": "https://angular.dev/guide/i18n/add-package",
+        "type": "article"
+      },
+      {
+        "title": "Learn to Internationalize Your Angular Apps with @angular/localize",
+        "url": "https://www.youtube.com/watch?v=5h7HPY1OMfU",
+        "type": "video"
+      },
+      {
+        "title": "Multi-Language Support in Angular: A Guide to Localization and Internationalization",
+        "url": "https://www.youtube.com/watch?v=ouI21AyJ9tE",
+        "type": "video"
+      }
+    ]
   },
   "dVKl3Z2Rnf6IB064v19Mi": {
     "title": "Locales by ID",
-    "description": "",
-    "links": []
+    "description": "Angular uses the Unicode locale identifier (Unicode locale ID) to find the correct locale data for internationalization of text strings. A locale ID specifies the language, country, and an optional code for further variants or subdivisions. A locale ID consists of the language identifier, a hyphen (-) character, and the locale extension. By default, Angular uses `en-US` as the source locale of your project.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Angular locales",
+        "url": "https://github.com/angular/angular/tree/main/packages/common/locales",
+        "type": "opensource"
+      },
+      {
+        "title": "Angular Official Docs - Refer to locales by ID",
+        "url": "https://angular.dev/guide/i18n/locale-id",
+        "type": "article"
+      },
+      {
+        "title": "Codes arranged alphabetically by alpha-3/ISO 639-2 Code",
+        "url": "https://www.loc.gov/standards/iso639-2/php/code_list.php",
+        "type": "article"
+      },
+      {
+        "title": "Unicode CLDR Specifications",
+        "url": "https://cldr.unicode.org/index/cldr-spec",
+        "type": "article"
+      }
+    ]
   },
   "jL5amGV1BAX_V5cyTIH7d": {
     "title": "Translation Files",
-    "description": "",
-    "links": []
+    "description": "After you prepare a component for translation, use the `extract-i18n` Angular CLI command to extract the marked text in the component into a source language file. The marked text includes text marked with `i18n`, attributes marked with `i18n`\\-attribute, and text tagged with `$localize`. The `extract-i18n` command creates a source language file named `messages.xlf` in the root directory of your project. If you have multiple language files, add the locale to the file name, like `messages.{locale}.xlf`.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Angular Official Docs - Translation Files",
+        "url": "https://angular.dev/guide/i18n/translation-files",
+        "type": "article"
+      },
+      {
+        "title": "Angular Official Docs - Extract i18n",
+        "url": "https://angular.dev/cli/extract-i18n",
+        "type": "article"
+      },
+      {
+        "title": "Angular i18n: internationalization & localization with examples",
+        "url": "https://lokalise.com/blog/angular-i18n/",
+        "type": "article"
+      }
+    ]
   },
   "9ISvaaJ815_cr_KW9vQhT": {
     "title": "Multiple Locales",

public/roadmap-content/computer-science.json

@@ -3954,7 +3954,7 @@
     ]
   },
   "ETEUA7jaEGyOEX8tAVNWs": {
-    "title": "Porcesses and Threads",
+    "title": "Processes and Threads",
     "description": "Processes and threads are the basic building blocks of a computer program. They are the smallest units of execution in a program. A process is an instance of a program that is being executed. A thread is a sequence of instructions within a process that can be executed independently of other code.\n\nVisit the following resources to learn more:",
     "links": [
       {

public/roadmap-content/data-analyst.json

@@ -11,8 +11,29 @@
   },
   "Lsapbmg-eMIYJAHpV97nO": {
     "title": "Types of Data Analytics",
-    "description": "Data Analytics has proven to be a critical part of decision-making in modern business ventures. It is responsible for discovering, interpreting, and transforming data into valuable information. Different types of data analytics look at past, present, or predictive views of business operations.\n\nData Analysts, as ambassadors of this domain, employ these types, which are namely Descriptive Analytics, Diagnostic Analytics, Predictive Analytics and Prescriptive Analytics, to answer various questions — What happened? Why did it happen? What could happen? And what should we do next? Understanding these types gives data analysts the power to transform raw datasets into strategic insights.",
-    "links": []
+    "description": "Data Analytics has proven to be a critical part of decision-making in modern business ventures. It is responsible for discovering, interpreting, and transforming data into valuable information. Different types of data analytics look at past, present, or predictive views of business operations.\n\nData Analysts, as ambassadors of this domain, employ these types, to answer various questions:\n\n*   Descriptive Analytics _(what happened in the past?)_\n*   Diagnostic Analytics _(why did it happened in the past?)_\n*   Predictive Analytics _(what will happen in the future?)_\n*   Prescriptive Analytics _(how can we make it happen?)_\n\nUnderstanding these types gives data analysts the power to transform raw datasets into strategic insights.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Data Analytics and its type",
+        "url": "https://www.geeksforgeeks.org/data-analytics-and-its-type/",
+        "type": "article"
+      },
+      {
+        "title": "The 4 Types of Data Analysis: Ultimate Guide",
+        "url": "https://careerfoundry.com/en/blog/data-analytics/different-types-of-data-analysis/",
+        "type": "article"
+      },
+      {
+        "title": "Descriptive vs Diagnostic vs Predictive vs Prescriptive Analytics: What's the Difference?",
+        "url": "https://www.youtube.com/watch?v=QoEpC7jUb9k",
+        "type": "video"
+      },
+      {
+        "title": "Types of Data Analytics",
+        "url": "https://www.youtube.com/watch?v=lsZnSgxMwBA",
+        "type": "video"
+      }
+    ]
   },
   "hWDh0ooidbqZb000ENVok": {
     "title": "Descriptive Analytics",

public/roadmap-content/javascript.json

@@ -1831,11 +1831,16 @@
   },
   "dbercnxXVTJXMpYSDNGb2": {
     "title": "bind",
-    "description": "The `bind()` method creates a new function with a given `this` value and arguments provided as an array. The original function is not called immediately but can be called later with the `new` keyword or as a normal function call.\n\nVisit the following resources to learn more:",
+    "description": "The `bind()` method in JavaScript allows you to create a new function with a specific context and optionally preset arguments. Unlike `call()` or `apply()`, `bind()` does not immediately invoke the function. Instead, it returns a new function that can be called later, either as a regular function or with additional arguments. This is particularly useful when you want to ensure that a function retains a specific context, regardless of how or when it's invoked.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Understanding Explicit Binding in JavaScript: Call, Bind, and Apply Methods",
-        "url": "https://medium.com/@amitsharma_24072/understanding-explicit-binding-in-javascript-call-bind-and-apply-methods-7b6ed0107628",
+        "title": "bind()",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind",
+        "type": "article"
+      },
+      {
+        "title": "Function binding",
+        "url": "https://javascript.info/bind",
         "type": "article"
       },
       {

public/roadmap-content/postgresql-dba.json

@@ -98,11 +98,6 @@
     "title": "Data Types",
     "description": "PostgreSQL offers a rich and diverse set of data types, catering to a wide range of applications and ensuring data integrity and performance. These include standard numeric types such as integers, floating-point numbers, and serial types for auto-incrementing fields. Character types like VARCHAR and TEXT handle varying lengths of text, while DATE, TIME, and TIMESTAMP support a variety of temporal data requirements. PostgreSQL also supports a comprehensive set of Boolean, enumerated (ENUM), and composite types, enabling more complex data structures. Additionally, it excels with its support for JSON and JSONB data types, allowing for efficient storage and querying of semi-structured data. The inclusion of array types, geometric data types, and the PostGIS extension for geographic data further extends PostgreSQL's versatility, making it a powerful tool for a broad spectrum of data management needs.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "",
-        "url": "https://www.instaclustr.com/blog/postgresql-data-types-mappings-to-sql-jdbc-and-java-data-types/",
-        "type": "article"
-      },
       {
         "title": "Data Types",
         "url": "https://www.postgresql.org/docs/current/datatype.html",
@@ -112,6 +107,11 @@
         "title": "An introduction to PostgreSQL data types",
         "url": "https://www.prisma.io/dataguide/postgresql/introduction-to-data-types",
         "type": "article"
+      },
+      {
+        "title": "PostgreSQL® Data Types: Mappings to SQL, JDBC, and Java Data Types",
+        "url": "https://www.instaclustr.com/blog/postgresql-data-types-mappings-to-sql-jdbc-and-java-data-types/",
+        "type": "article"
       }
     ]
   },

public/roadmap-content/python.json

@@ -227,6 +227,16 @@
         "title": "Loops in Python",
         "url": "https://www.geeksforgeeks.org/loops-in-python/",
         "type": "article"
+      },
+      {
+        "title": "Python \"while\" Loops (Indefinite Iteration)",
+        "url": "https://realpython.com/python-while-loop/",
+        "type": "article"
+      },
+      {
+        "title": "Python \"for\" Loops (Definite Iteration)",
+        "url": "https://realpython.com/python-for-loop/#the-guts-of-the-python-for-loop",
+        "type": "article"
       }
     ]
   },

public/roadmap-content/react.json

@@ -586,7 +586,7 @@
   },
   "w3bNp7OkehI1gjx8NzlC8": {
     "title": "useMemo",
-    "description": "`useMemo` is a React hook that memorizes the result of a function. It is used to optimize performance by caching the result of a function and returning the cached result when the inputs to the function have not changed.\n\nLearn more from the following resources:",
+    "description": "`useMemo` is a React hook that memoizes the result of a function. It is used to optimize performance by caching the result of a function and returning the cached result when the inputs to the function have not changed.\n\nLearn more from the following resources:",
     "links": [
       {
         "title": "useMemo Docs",

public/roadmap-content/terraform.json

@@ -352,7 +352,7 @@
     "description": "The lifecycle meta-argument in Terraform customizes the behavior of resources during creation, update, and deletion. It includes settings such as create\\_before\\_destroy, which ensures a new resource is created before the old one is destroyed, preventing downtime. prevent\\_destroy protects resources from accidental deletion, and ignore\\_changes specifies attributes to ignore during updates, allowing external modifications without triggering Terraform changes. These options provide fine-grained control over resource management, ensuring that the desired state of infrastructure is maintained with minimal disruption and precise handling of resource lifecycles.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Terraform Docs - for_each",
+        "title": "Terraform Docs - lifecycle",
         "url": "https://developer.hashicorp.com/terraform/language/meta-arguments/lifecycle",
         "type": "article"
       },

src/api/project.ts

@@ -0,0 +1,15 @@
+import { type APIContext } from 'astro';
+import { api } from './api.ts';
+
+export function projectApi(context: APIContext) {
+  return {
+    listProjectsUserCount: async function (projectIds: string[]) {
+      return api(context).post<Record<string, number>>(
+        `${import.meta.env.PUBLIC_API_URL}/v1-list-projects-user-count`,
+        {
+          projectIds,
+        },
+      );
+    },
+  };
+}

src/components/Projects/ProjectCard.tsx

@@ -3,9 +3,12 @@ import type {
   ProjectDifficultyType,
   ProjectFileType,
 } from '../../lib/project.ts';
+import { Users } from 'lucide-react';
+import { formatCommaNumber } from '../../lib/number.ts';
 
 type ProjectCardProps = {
   project: ProjectFileType;
+  userCount?: number;
 };
 
 const badgeVariants: Record<ProjectDifficultyType, string> = {
@@ -15,7 +18,7 @@ const badgeVariants: Record<ProjectDifficultyType, string> = {
 };
 
 export function ProjectCard(props: ProjectCardProps) {
-  const { project } = props;
+  const { project, userCount = 0 } = props;
 
   const { frontmatter, id } = project;
 
@@ -31,8 +34,18 @@ export function ProjectCard(props: ProjectCardProps) {
         />
         <Badge variant={'grey'} text={frontmatter.nature} />
       </span>
-      <span className="mb-1 mt-2.5 font-medium">{frontmatter.title}</span>
-      <span className="text-sm text-gray-500">{frontmatter.description}</span>
+      <span className="my-3 flex 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</>
+        ) : (
+          <>Be the first to solve!</>
+        )}
+      </span>
     </a>
   );
 }

src/components/Projects/ProjectsList.tsx

@@ -40,10 +40,11 @@ function DifficultyButton(props: DifficultyButtonProps) {
 
 type ProjectsListProps = {
   projects: ProjectFileType[];
+  userCounts: Record<string, number>;
 };
 
 export function ProjectsList(props: ProjectsListProps) {
-  const { projects } = props;
+  const { projects, userCounts } = props;
 
   const { difficulty: urlDifficulty } = getUrlParams();
   const [difficulty, setDifficulty] = useState<
@@ -127,9 +128,10 @@ export function ProjectsList(props: ProjectsListProps) {
           .sort((a, b) => {
             return a.frontmatter.sort - b.frontmatter.sort;
           })
-          .map((matchingProject) => (
-            <ProjectCard project={matchingProject} />
-          ))}
+          .map((matchingProject) => {
+            const count = userCounts[matchingProject?.id] || 0;
+            return <ProjectCard project={matchingProject} userCount={count} />;
+          })}
       </div>
     </div>
   );

src/data/projects/accordion.md

@@ -0,0 +1,30 @@
+---
+title: 'Accordion'  
+description: 'Create an accordion component using HTML, CSS, and JavaScript.'  
+isNew: false  
+sort: 18
+difficulty: 'beginner'  
+nature: 'JavaScript'  
+skills:  
+  - 'HTML'  
+  - 'CSS'  
+  - 'JavaScript'  
+  - 'DOM Manipulation'  
+seo:  
+  title: 'Build an Accordion Component with JavaScript'  
+  description: 'Learn how to create a responsive accordion component that allows users to toggle between different sections of content.'  
+  keywords:  
+    - 'accordion'
+    - 'javascript accordion'
+    - 'html and css'  
+roadmapIds:  
+  - 'frontend'
+---
+
+You are required to create an accordion component that displays a list of questions or headings. When a user clicks on a question, its corresponding answer or content section will expand while collapsing any previously opened section. This allows only one section to be open at a time, keeping the UI clean and organized.
+
+Given below is the mockup showing the accordion in its default and expanded states:
+
+[![Accordion](https://assets.roadmap.sh/guest/accordion-rbvpo.png)](https://assets.roadmap.sh/guest/accordion-rbvpo.png)
+
+This project will help you practice DOM manipulation, event handling, and implementing responsive design patterns using JavaScript.

src/data/projects/basic-github-actions.md

@@ -0,0 +1,36 @@
+---
+title: 'Github Actions Workflow'
+description: 'Write  GitHub Actions workflow to deploy a simple GitHub Pages site.'
+isNew: true
+sort: 3
+difficulty: 'beginner'
+nature: 'CI/CD'
+skills:
+  - 'devops'
+  - 'github actions'
+  - 'ci/cd'
+seo:
+  title: 'Github Actions Workflow'
+  description: 'Write GitHub Actions workflow to deploy a simple GitHub Pages site.'
+  keywords:
+    - 'basic ci/cd'
+    - 'devops'
+    - 'devops projects'
+roadmapIds:
+  - 'git-github'
+  - 'devops'
+---
+
+In this project, you will write a basic HTML file and setup a GitHub Actions workflow to test, build & deploy it to GitHub Pages.
+
+## Requirements
+
+- Create a simple HTML file (the content is up to you)
+- Create a GitHub Actions workflow that will test, build & deploy the website to [GitHub Pages](https://pages.github.com/).
+- Failures in the workflow should be clearly indicated and failures will halt the workflow
+- The workflow should be in the `.github/workflows` directory
+- The workflow file should be named `main.yml`
+
+<hr />
+
+If you are looking to build a more advanced version of this project, you can either create a more advanced Astro website or you can build a more advanced GitHub Actions workflow.

src/data/projects/basic-iac-with-terraform.md

@@ -0,0 +1,42 @@
+---
+title: 'Basic Infrastructure as Code with Terraform'
+description: 'Provision a simple cloud infrastructure using Terraform'
+isNew: false
+sort: 4
+difficulty: 'beginner'
+nature: 'CLI'
+skills:
+ - 'terraform'
+ - 'devops'
+ - 'iac'
+ - 'cloud'
+seo:
+  title: 'Basic Infrastructure as Code with Terraform'
+  description: 'Learn to provision cloud resources using Terraform'
+  keywords:
+   - 'terraform'
+   - 'infrastructure as code'
+   - 'cloud provisioning'
+   - 'devops'
+roadmapIds:
+ - 'devops'
+ - 'terraform'
+ - 'aws'
+---
+
+In this project, you will use Terraform to provision a virtual machine in AWS.
+
+## Requirements
+
+- Install Terraform on your local machine.
+- Set up an account with a AWS and obtain necessary credentials.
+- Create a `main.tf` file in the root directory of your project.
+- Write Terraform configuration to provision a basic resource (e.g., an EC2 instance on AWS or a VM on Azure).
+- Use Terraform commands to initialize, plan, apply, and destroy your infrastructure.
+- The provisioned resource should be accessible and verifiable in your cloud provider's console.
+
+You can learn more about Terraform basics [here](https://learn.hashicorp.com/terraform).
+
+<hr />
+
+For a more advanced version of this project, consider adding multiple resources, using variables and outputs, or implementing a modular structure for your Terraform configuration.

src/data/projects/cookie-consent.md

@@ -0,0 +1,32 @@
+---
+title: 'Cookie Consent'  
+description: 'Create a simple cookie consent banner using JavaScript.'  
+isNew: false  
+sort: 12  
+difficulty: 'beginner'  
+nature: 'JavaScript'  
+skills:  
+  - 'HTML'  
+  - 'CSS'  
+  - 'JavaScript'  
+  - 'DOM Manipulation'  
+seo:  
+  title: 'Create a Cookie Consent Popup Using HTML, CSS, and JavaScript'  
+  description: 'Learn how to build a cookie consent popup with basic JavaScript for managing user consent.'  
+  keywords:  
+    - 'cookie consent'
+    - 'javascript popup'
+    - 'html and css'
+    - 'javascript project'  
+roadmapIds:  
+  - 'frontend'  
+
+---
+
+This project is designed to introduce you to basic DOM manipulation and event handling in JavaScript.
+
+Many websites display a cookie consent popup to inform users about the use of cookies and to obtain their consent. In this project, you will create a simple cookie consent popup that appears when the user visits the page. The popup will include a message and a button to accept the consent. Once accepted, the popup will disappear. Given below is an example of how the popup might look:
+
+[![Cookie Consent Popup](https://assets.roadmap.sh/guest/cookie-consent-banner-07etz.png)](https://assets.roadmap.sh/guest/cookie-consent-banner-07etz.png)
+
+Bonus points if you persist the user's consent using cookies or local storage and prevent the popup from appearing on subsequent visits.

src/data/projects/custom-dropdown.md

@@ -0,0 +1,30 @@
+---
+title: 'Custom Dropdown'  
+description: 'Create a custom dropdown using HTML, CSS, and JavaScript.'  
+isNew: false  
+sort: 19
+difficulty: 'intermediate'  
+nature: 'JavaScript'  
+skills:  
+  - 'HTML'  
+  - 'CSS'  
+  - 'JavaScript'  
+  - 'DOM Manipulation'  
+seo:  
+  title: 'Build a Custom Dropdown Menu with JavaScript'  
+  description: 'Learn how to create a fully customizable dropdown menu that allows users to select an item and see the selection reflected in the dropdown.'  
+  keywords:  
+    - 'custom dropdown'
+    - 'javascript dropdown'
+    - 'html and css'  
+roadmapIds:  
+  - 'frontend'
+---
+
+You will create a custom dropdown menu that lets users select an item from a list. The dropdown should have a default state showing a placeholder text, an open state revealing all options, and a selected state where the chosen item is displayed. When an item is selected, the dropdown closes, and the selected item is highlighted.
+
+Given below is the mockup showing the dropdown in its default, open, and selected states:
+
+[![Custom Dropdown](https://assets.roadmap.sh/guest/dropdown-1f4b3.png)](https://assets.roadmap.sh/guest/dropdown-1f4b3.png)
+
+This project will help you practice DOM manipulation, event handling, and creating responsive and interactive elements with JavaScript.

src/data/projects/docker-webserver.md

@@ -0,0 +1,39 @@
+---
+title: 'Docker Web Server'
+description: 'Create a Web Server using Docker & NGINX'
+isNew: false
+sort: 3
+difficulty: 'beginner'
+nature: 'CLI'
+skills:
+  - 'docker'
+  - 'devops'
+  - 'nginx'
+  - 'web'
+seo:
+  title: 'Docker Web Server'
+  description: 'Create a Web Server using Docker & NGINX'
+  keywords:
+    - 'docker web server'
+    - 'docker'
+    - 'system administration'
+    - 'web server'
+roadmapIds:
+  - 'devops'
+  - 'docker'
+---
+
+In this project, you will create an NGINX web server that will serve a simple HTML page using Docker.
+
+## Requirements
+
+- The Dockerfile should be named `Dockerfile`.
+- The Dockerfile should be in the root directory of the project.
+- The build process will add a local HTML file to the container, which will be accessible to NGINX.
+- The simple HTML page will be accessible to you from `localhost:8080`
+
+You can learn more about writing a Dockerfile [here](https://docs.docker.com/engine/reference/builder/).
+
+<hr />
+
+If you are looking to build a more advanced version of this project, you can consider using the `alpine:latest` image and setting up NGINX yourself rather than using the official NGINX image.

src/data/projects/github-random-repo.md

@@ -0,0 +1,39 @@
+---
+title: 'GitHub Random Repository'  
+description: 'Create a GitHub random repository finder using GitHub API.'  
+isNew: false  
+sort: 25  
+difficulty: 'intermediate'  
+nature: 'API Integration'  
+skills:  
+  - 'HTML'  
+  - 'CSS'  
+  - 'JavaScript'  
+  - 'API Integration'  
+  - 'DOM Manipulation'  
+seo:  
+  title: 'Build a GitHub Repository Finder with JavaScript and GitHub API'  
+  description: 'Learn how to create a dynamic application that fetches random GitHub repositories based on a chosen language and displays key information like stars, forks, and issues.'  
+  keywords:  
+    - 'github api'
+    - 'repository finder'
+    - 'javascript project'  
+roadmapIds:  
+  - 'frontend'  
+
+---
+
+This project is designed to introduce you to working with external APIs, handling asynchronous requests, and managing different UI states with JavaScript.
+
+You will create a GitHub repository finder that allows users to select a programming language from a dropdown menu. The app will then use the GitHub Repository Search API to fetch and display a random repository that matches the selected language. The displayed information should include the repository name, description, number of stars, forks, and open issues. Users can fetch another random repository with a button click.
+
+[![GitHub Random Repository](https://assets.roadmap.sh/guest/github-repo-finder-n2qz4.png)](https://assets.roadmap.sh/guest/github-repo-finder-n2qz4.png)
+
+The application should handle loading, empty, and error states effectively. After successfully fetching a repository, a "Refresh" button should appear to allow users to get another random repository.
+
+Here are the links to the resources you will need for this project:
+
+- [GitHub Repository Search API](https://docs.github.com/en/rest/reference/search#search-repositories)
+- [Programming Language Data](https://raw.githubusercontent.com/kamranahmedse/githunt/master/src/components/filters/language-filter/languages.json)
+
+This project will help you practice API integration, managing asynchronous data, and enhancing user experience with responsive UI states.

src/data/projects/local-monitoring-stack.md

@@ -0,0 +1,57 @@
+---
+title: 'Local Monitoring System with Docker'
+description: 'Set up a local monitoring system using Docker with Grafana and Prometheus'
+isNew: false
+sort: 1
+difficulty: 'intermediate'
+nature: 'CLI'
+skills:
+ - 'docker'
+ - 'devops'
+ - 'monitoring'
+ - 'grafana'
+ - 'prometheus'
+seo:
+  title: 'Local Monitoring System with Docker, Grafana, and Prometheus'
+  description: 'Learn to set up a local monitoring system using Docker with Grafana and Prometheus'
+  keywords:
+   - 'docker'
+   - 'monitoring'
+   - 'grafana'
+   - 'prometheus'
+   - 'devops'
+roadmapIds:
+ - 'devops'
+ - 'docker'
+---
+
+In this project, you will set up a local monitoring system using Docker, Grafana, and Prometheus. This setup will allow you to collect metrics and visualize them in a dashboard.
+
+## Requirements
+
+- Docker and Docker Compose installed on your local machine.
+- Create a `docker-compose.yml` file in the root directory of your project.
+- Set up Prometheus as the metrics collection system.
+- Configure Grafana as the visualization tool.
+- Create a simple dashboard in Grafana to display system metrics.
+- Add a sample application to monitor, such as a simple web server.
+
+Your `docker-compose.yml` file should define services for:
+1. Prometheus
+2. Grafana
+3. A sample application to monitor
+
+## Steps
+
+1. Create the `docker-compose.yml` file with services for Prometheus and Grafana.
+2. Configure Prometheus to scrape metrics (you'll need a `prometheus.yml` configuration file).
+3. Set up Grafana to use Prometheus as a data source.
+4. Create a simple dashboard in Grafana to display metrics.
+5. Use `docker-compose up` to start your monitoring stack.
+6. Access Grafana through your web browser and verify that metrics are being collected and displayed.
+
+You can learn more about Prometheus [here](https://prometheus.io/docs/introduction/overview/) and Grafana [here](https://grafana.com/docs/grafana/latest/).
+
+<hr />
+
+For a more advanced version of this project, consider adding alerting rules in Prometheus, setting up additional exporters to collect more diverse metrics, or monitoring a multi-container application.

src/data/projects/reddit-client.md

@@ -0,0 +1,42 @@
+---
+title: 'Reddit Client'
+description: 'Create a Reddit client with customizable subreddit lanes.'
+isNew: false
+sort: 26
+difficulty: 'intermediate'
+nature: 'API Integration'
+skills:
+  - 'HTML'
+  - 'CSS'
+  - 'JavaScript'
+  - 'API Integration'
+  - 'DOM Manipulation'
+  - 'Asynchronous Programming'
+seo:
+  title: 'Build a Multi-Lane Reddit Client with JavaScript and Reddit API'
+  description: 'Learn how to create a dynamic browser-based Reddit client that allows users to add and view multiple subreddits in customizable lanes.'
+  keywords:
+    - 'reddit api'
+    - 'subreddit viewer'
+    - 'javascript project'
+    - 'multi-lane client'
+roadmapIds:
+  - 'frontend'
+
+---
+
+You are required to create a browser-based Reddit client that displays multiple subreddits in separate, customizable lanes. You'll work with the Reddit JSON feed to fetch posts from different subreddits and display them in a dynamic, responsive layout.
+
+The application will allow users to add new subreddit lanes by entering a subreddit name. It will verify the existence of the subreddit, fetch its posts, and display them in a new lane. Each lane will show the subreddit's posts, including titles, authors, and vote counts.
+
+[![Multi-Lane Reddit Client](https://assets.roadmap.sh/guest/reddit-client-o876k.png)](https://assets.roadmap.sh/guest/reddit-client-o876k.png)
+
+To fetch data from reddit, you can use the JSON feed available at the following URL. You can also use the Reddit API to fetch more details about the posts, such as comments, upvotes, and more.
+
+```plaintext
+https://www.reddit.com/r/{subreddit}.json
+```
+
+The application should handle loading states while fetching data, display error messages for invalid subreddits or API issues, and provide a smooth user experience when adding or removing lanes. You can use local storage to save the user's custom lanes and restore them when the application is reloaded.
+
+This project will help you practice API integration, state management, asynchronous programming, and creating a responsive, dynamic user interface. It's an excellent opportunity to enhance your skills in frontend development and working with real-time data.

src/data/projects/restricted-textarea.md

@@ -0,0 +1,29 @@
+---
+title: 'Restricted Textarea'  
+description: 'Create a textarea with live character count and a max character limit.'  
+isNew: false  
+sort: 15  
+difficulty: 'beginner'  
+nature: 'JavaScript'  
+skills:  
+  - 'HTML'
+  - 'CSS'
+  - 'JavaScript'
+  - 'DOM Manipulation'
+seo:
+  title: 'Build a Restricted Textarea with JavaScript'  
+  description: 'Learn how to create a textarea with live character count and a maximum limit, with visual feedback as the limit is reached.'  
+  keywords:
+    - 'character count'
+    - 'textarea limit'
+    - 'javascript input'
+    - 'html and css'
+roadmapIds:
+  - 'frontend'
+---
+
+You are required to create a textarea that tracks and displays the number of characters typed by the user, along with a maximum character limit. As the user types, the character count will update dynamically. Once the limit is reached, the textarea will prevent further input and the border will turn red to visually indicate the limit has been hit.
+
+[![Restricted Textarea](https://assets.roadmap.sh/guest/textarea-input-vdclr.png)](https://assets.roadmap.sh/guest/textarea-input-vdclr.png)
+
+This project will help you practice manipulating input elements with JavaScript, handling user input events, and providing real-time feedback to enhance user experience.

src/data/projects/simple-tabs.md

@@ -0,0 +1,32 @@
+---
+title: 'Tabs'  
+description: 'Create a simple tabs component using HTML, CSS, and JavaScript.'  
+isNew: false  
+sort: 10  
+difficulty: 'beginner'  
+nature: 'JavaScript'
+skills:  
+  - 'HTML'  
+  - 'CSS'  
+  - 'JavaScript'
+  - 'DOM Manipulation'
+seo:  
+  title: 'Create a Tabs Functionality Using HTML, CSS, and JavaScript'  
+  description: 'Learn how to build a tabs component with basic JavaScript for switching between content sections.'  
+  keywords:  
+    - 'javascript tabs'
+    - 'dynamic content'
+    - 'html and css'
+    - 'javascript project'  
+roadmapIds:  
+  - 'frontend'  
+
+---
+
+This project is designed to introduce you to basic DOM manipulation and event handling in JavaScript.
+
+You are required to create a simple tabs functionality using HTML, CSS, and basic JavaScript. The page will have four tabs, with the first tab being active by default. When the user clicks on another tab, the content of the current tab will be hidden, and the content of the selected tab will be displayed.
+
+[![Tabs Component Mockup](https://assets.roadmap.sh/guest/simple-tabs-8e6gy.png)](https://assets.roadmap.sh/guest/simple-tabs-8e6gy.png)
+
+This project will help you practice selecting elements with JavaScript, listen for click events, and manipulate the dom to show or hide relevant tab content.

src/data/projects/task-tracker-js.md

@@ -0,0 +1,34 @@
+---
+title: 'Task Tracker'
+description: 'Create a task tracker with a to-do list using JavaScript.'
+isNew: false
+sort: 22
+difficulty: 'intermediate'
+nature: 'JavaScript'
+skills:
+  - 'HTML'
+  - 'CSS'
+  - 'JavaScript'
+  - 'DOM Manipulation'
+seo:
+  title: 'Build a Task Tracker with JavaScript'
+  description: 'Learn how to create a dynamic task tracker that allows users to add, complete, and delete tasks with real-time updates.'
+  keywords:
+    - 'task tracker'
+    - 'to-do list'
+    - 'javascript project'
+roadmapIds:
+  - 'frontend'
+---
+
+You are required to create a task tracker that lets users add new tasks, mark them as complete, or delete them. Completed tasks will be moved to the end of the list and will have strikethrough, and users can unmark tasks to return them to the pending list.
+
+Here is the mockup of the task tracker:
+
+[![Task Tracker](https://assets.roadmap.sh/guest/task-tracker-2diba.png)](https://assets.roadmap.sh/guest/task-tracker-2diba.png)
+
+## Hint
+
+Store your tasks in an array of objects, where each object represents a task with properties like description and status (completed or not). Whenever a new task is added, updated, deleted, or marked as complete/uncomplete, update the tasks array. Write a function `renderTasks` which will remove all tasks from the DOM and re-render them based on the updated tasks array.
+
+This project will help you practice array manipulation, event handling, and dynamic DOM updates using JavaScript.

src/data/projects/temperature-converter.md

@@ -0,0 +1,33 @@
+---
+title: Temperature Converter
+description: Build a temperature converter that converts between different units.
+isNew: false
+sort: 27
+difficulty: intermediate
+nature: JavaScript
+skills:
+  - HTML
+  - CSS
+  - JavaScript
+  - DOM Manipulation
+seo:
+  - title: Build a Temperature Converter with JavaScript
+  - description: Learn how to create an interactive temperature converter that converts between Celsius, Fahrenheit, and Kelvin using JavaScript.
+  - keywords:
+    - 'temperature converter'
+    - 'javascript project'
+    - 'unit conversion'
+    - 'html and css'
+roadmapIds:  
+  - 'frontend'
+---
+
+This project is designed to help you practice DOM manipulation, form handling, and basic calculations in JavaScript.
+
+You will create a temperature converter that allows users to enter a temperature value, select the unit they want to convert from, and select the unit they want to convert to. The "Convert" button should only be enabled when all three fields are filled in. Once the user clicks "Convert," the tool will display the converted temperature below the form.
+
+Here is a mockup of what the temperature converter might look like:
+
+[![Temperature Converter](https://assets.roadmap.sh/guest/temperature-converter-8omel.png)](https://assets.roadmap.sh/guest/temperature-converter-8omel.png)
+
+This project will help you gain experience with handling user input, conditionally enabling form elements, and performing simple calculations using JavaScript.

src/data/roadmaps/android/content/relative@yE0qAQZiEC9R8WvCdskpr.md

@@ -0,0 +1,9 @@
+# RelativeLayout
+
+A **RelativeLayout** in Android is a type of ViewGroup that allows you to position child views relative to each other or relative to the parent layout. It's a flexible layout where you can arrange the child views in relation to one another based on certain rules, making it suitable for creating complex UI designs.
+
+**RelativeLayout** was commonly used in earlier Android development, but with the introduction of `ConstraintLayout`, it's less frequently used in modern apps. 
+
+Visit the following resources to learn more:
+
+- [@official@Android developers: Relative Layout](https://developer.android.com/develop/ui/views/layout/relative)

src/data/roadmaps/computer-science/computer-science.json

@@ -7157,7 +7157,7 @@
       },
       "selected": false,
       "data": {
-        "label": "Porcesses and Threads",
+        "label": "Processes and Threads",
         "style": {
           "fontSize": 17,
           "justifyContent": "flex-start",

src/data/roadmaps/cyber-security/content/dlp@iolsTC-63d_1wzKGul-cT.md

@@ -0,0 +1,7 @@
+# Data Loss Prevention (DLP)
+
+Data Loss Prevention (DLP) refers to a set of strategies, tools, and processes used by organizations to ensure that sensitive data is not lost, accessed, or misused by unauthorized users. DLP solutions monitor, detect, and block the movement of critical information outside an organization’s network, helping to prevent data breaches, leaks, and other security incidents.
+
+Visit the following resources to learn more:
+- [@article@What is data loss prevention (DLP)?](https://www.techtarget.com/whatis/definition/data-loss-prevention-DLP)
+- [@article@What is DLP (data loss prevention)?](https://www.cloudflare.com/es-es/learning/access-management/what-is-dlp/)

src/data/roadmaps/cyber-security/content/hips@l5EnhOCnkN-RKvgrS9ylH.md

@@ -0,0 +1,9 @@
+# Host Intrusion Prevention System (HIPS)
+
+A Host Intrusion Prevention System (HIPS) is a security solution designed to monitor and protect individual host devices, such as servers, workstations, or laptops, from malicious activities and security threats. HIPS actively monitors system activities and can detect, prevent, and respond to unauthorized or anomalous behavior by employing a combination of signature-based, behavior-based, and heuristic detection methods.
+
+HIPS operates at the host level, providing a last line of defense by securing the individual endpoints within a network. It is capable of preventing a wide range of attacks, including zero-day exploits, malware infections, unauthorized access attempts, and policy violations.
+
+Visit the following resources to learn more:
+- [@article@What is an Intrusion Prevention System?](https://www.paloaltonetworks.com/cyberpedia/what-is-an-intrusion-prevention-system-ips)
+- [@article@What is Host intrusion prevention system (HIPS)?](https://cyberpedia.reasonlabs.com/EN/host%20intrusion%20prevention%20system%20(hips).html)

src/data/roadmaps/cyber-security/content/memory-leak@nOND14t7ISgSH3zNpV3F8.md

@@ -0,0 +1,3 @@
+# Memory Leak
+
+A Memory Leak occurs when a computer program consumes memory but fails to release it back to the operating system after it is no longer needed. Over time, this can lead to reduced system performance, increased memory usage, and, in severe cases, the program or system may crash due to the exhaustion of available memory.

src/data/roadmaps/cyber-security/content/nids@LIPtxl_oKZRcbvXT4EdNf.md

@@ -0,0 +1,7 @@
+# Network Intrusion Detection System (NIDS)
+
+A Network Intrusion Detection System (NIDS) is a security solution designed to monitor and analyze network traffic for signs of suspicious activity or potential threats. NIDS operates by inspecting the data packets that flow through a network, looking for patterns that match known attack signatures or anomalies that could indicate malicious behavior. Unlike a Host Intrusion Detection System (HIDS), which focuses on individual host devices, NIDS provides a broader view by monitoring network traffic across multiple systems and devices.
+
+Visit the following resources to learn more:
+- [@article@What is an Intrusion Detection System?](https://www.paloaltonetworks.com/cyberpedia/what-is-an-intrusion-detection-system-ids)
+- [@article@What is a Network Intrusion Detection system (NIDS)?](https://bunny.net/academy/security/what-is-network-intrusion-detection-nids/)

src/data/roadmaps/cyber-security/content/pass-the-hash@sMuKqf27y4iG0GrCdF5DN.md

@@ -0,0 +1,8 @@
+# Pass the Hash
+
+Pass the Hash (PtH) is a hacking technique that allows an attacker to authenticate to a remote server or service using the hashed value of a user's password, without needing to know the actual plaintext password. This method exploits weaknesses in the way some authentication protocols handle hashed credentials, particularly in Windows-based systems.
+
+Visit the following resources to learn more:
+
+- [@article@What is a pass-the-hash attack?](https://www.crowdstrike.com/cybersecurity-101/pass-the-hash/)
+- [@article@Pass the Hash Attack](https://www.netwrix.com/pass_the_hash_attack_explained.html)

src/data/roadmaps/flutter/content/100-dart-basics/101-variables.md

@@ -9,5 +9,4 @@ Variables in Flutter can store values of different data types, such as numbers,
 
 Visit the following resources to learn more:
 
-- [@article@Variables](https://dart.dev/guides/language/language-tour#variables)
-- [@article@Dart - Variables](https://howtoflutter.dev/dart/variables/)
+- [@official@Variables](https://dart.dev/guides/language/language-tour#variables)

src/data/roadmaps/frontend/content/pwas@PoM77O2OtxPELxfrW1wtl.md

@@ -6,5 +6,6 @@ Visit the following resources to learn more:
 
 - [@article@Learn PWA](https://web.dev/learn/pwa/)
 - [@article@MDN Web Docs: Progressive Web Apps ](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/)
+- [@article@Building a simple offline-capable Notepad app ](https://www.amitmerchant.com/Building-Simple-Offline-Notepad-Using-Service-Worker/)
 - [@video@Build a Progressive Web App](https://www.youtube.com/watch?v=sFsRylCQblw)
 - [@feed@Explore top posts about Web Development](https://app.daily.dev/tags/webdev?ref=roadmapsh)

src/data/roadmaps/javascript/content/string@1RcwBHU3jzx0YxxUGZic4.md

@@ -5,3 +5,4 @@ String is a primitive type that holds a sequence of characters. String in Javasc
 Visit the following resources to learn more:
 
 - [@article@String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
+- [@article@JavaScript Strings](https://javascript.info/string)

src/data/roadmaps/react/content/usememo@w3bNp7OkehI1gjx8NzlC8.md

@@ -1,6 +1,6 @@
 # useMemo
 
-`useMemo` is a React hook that memorizes the result of a function. It is used to optimize performance by caching the result of a function and returning the cached result when the inputs to the function have not changed.
+`useMemo` is a React hook that memoizes the result of a function. It is used to optimize performance by caching the result of a function and returning the cached result when the inputs to the function have not changed.
 
 Learn more from the following resources:
 

src/data/roadmaps/software-architect/content/scrum@PKqwKvoffm0unwcFwpojk.md

@@ -0,0 +1,19 @@
+# Scrum
+
+`Scrum` is a popular agile framework used for project management, particularly in software development. It emphasizes iterative development, collaboration, and flexibility to deliver high-quality products.
+
+Key elements of Scrum:
+
+- **Sprints**: Time-boxed iterations (usually 2-4 weeks) where teams work on specific goals.
+- **Product Backlog**: Prioritized list of features or requirements for the product.
+- **Sprint Backlog**: Selected items from the Product Backlog to be completed during a Sprint.
+- **Daily Scrum (Stand-up)**: Brief daily meeting where team members share progress, challenges, and plans for the day.
+- **Sprint Review**: Meeting at the end of a Sprint to demonstrate completed work and gather feedback.
+- **Sprint Retrospective**: Meeting to reflect on the Sprint, identify improvements, and adjust processes for the next Sprint.
+
+Visit the following resources to learn more:
+
+- [@article@What is scrum and how to get started](https://www.atlassian.com/agile/scrum.)
+- [@article@Scrum Methodology: The Complete Guide & Best Practices](https://thedigitalprojectmanager.com/projects/pm-methodology/scrum-methodology-complete-guide/)
+- [@article@Essential Topics for the Scrum Product Owner](https://www.scrum.org/resources/blog/essential-topics-scrum-product-owner)
+- [@article@Scrum • Topics - Thriving Technologist](https://thrivingtechnologist.com/topics/scrum/)

src/data/roadmaps/software-architect/content/tcpip-model@UCCT7-E_QUKPg3jAsjobx.md

@@ -0,0 +1,17 @@
+# TCP/IP Model
+
+The `TCP/IP model` defines how devices should transmit data between them and enables communication over networks and large distances. The model represents how data is exchanged and organized over networks. It is split into four layers, which set the standards for data exchange and represent how data is handled and packaged when being delivered between applications, devices, and servers.
+
+- **Network Access Layer**: The network access layer is a group of applications requiring network communications. This layer is responsible for generating the data and requesting connections.
+
+- **Internet Layer**: The internet layer is responsible for sending packets from a network and controlling their movement across a network to ensure they reach their destination. 
+
+- **Transport Layer**: The transport layer is responsible for providing a solid and reliable data connection between the original application or device and its intended destination. 
+
+- **Application Layer**: The application layer refers to programs that need TCP/IP to help them communicate with each other. 
+
+Visit the following resources to learn more:
+
+- [@article@What is Transmission Control Protocol TCP/IP? - Fortinet](https://www.fortinet.com/resources/cyberglossary/tcp-ip#:~:text=The%20TCP%2FIP%20model%20defines,exchanged%20and%20organized%20over%20networks.)
+- [@article@TCP/IP Model](https://www.geeksforgeeks.org/tcp-ip-model/)
+- [@article@What is TCP/IP and How Does it Work?](https://www.techtarget.com/searchnetworking/definition/TCP-IP)git reset

src/pages/[roadmapId]/projects.astro

@@ -1,25 +1,12 @@
 ---
-import { EditorRoadmap } from '../../components/EditorRoadmap/EditorRoadmap';
-import FAQs, { type FAQType } from '../../components/FAQs/FAQs.astro';
-import FrameRenderer from '../../components/FrameRenderer/FrameRenderer.astro';
-import RelatedRoadmaps from '../../components/RelatedRoadmaps.astro';
 import RoadmapHeader from '../../components/RoadmapHeader.astro';
-import { FolderKanbanIcon } from 'lucide-react';
 import { EmptyProjects } from '../../components/Projects/EmptyProjects';
 import { ProjectsList } from '../../components/Projects/ProjectsList';
-import ShareIcons from '../../components/ShareIcons/ShareIcons.astro';
-import { UserProgressModal } from '../../components/UserProgress/UserProgressModal';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import { getProjectsByRoadmapId } from '../../lib/project';
-import {
-  generateArticleSchema,
-  generateFAQSchema,
-} from '../../lib/jsonld-schema';
 import { getOpenGraphImageUrl } from '../../lib/open-graph';
 import { type RoadmapFrontmatter, getRoadmapIds } from '../../lib/roadmap';
-import RoadmapNote from '../../components/RoadmapNote.astro';
-import { RoadmapTitleQuestion } from '../../components/RoadmapTitleQuestion';
-import ResourceProgressStats from '../../components/ResourceProgressStats.astro';
+import { projectApi } from '../../api/project';
 
 export async function getStaticPaths() {
   const roadmapIds = await getRoadmapIds();
@@ -48,7 +35,7 @@ const ogImageUrl =
     resourceId: roadmapId,
   });
 
-const descriptionNoun = {
+const descriptionNoun: Record<string, string> = {
   'AI and Data Scientist': 'AI and Data Science',
   'Game Developer': 'Game Development',
   'Technical Writer': 'Technical Writing',
@@ -61,10 +48,15 @@ const description = `Project ideas to take you from beginner to advanced in ${de
 // `Seeking backend projects to enhance your skills? Explore our top 20 project ideas, from simple apps to complex systems. Start building today!`
 const seoTitle = `${roadmapData.briefTitle} Projects`;
 const nounTitle =
-  descriptionNoun[roadmapData.briefTitle] || roadmapData.briefTitle;
+  descriptionNoun[roadmapData?.briefTitle] || roadmapData.briefTitle;
 const seoDescription = `Seeking ${nounTitle.toLowerCase()} projects to enhance your skills? Explore our top 20 project ideas, from simple apps to complex systems. Start building today!`;
 
 const projects = await getProjectsByRoadmapId(roadmapId);
+const projectIds = projects.map((project) => project.id);
+
+const projectApiClient = projectApi(Astro);
+const { response: userCounts } =
+  await projectApiClient.listProjectsUserCount(projectIds);
 ---
 
 <BaseLayout
@@ -95,7 +87,15 @@ const projects = await getProjectsByRoadmapId(roadmapId);
 
     <div class='container'>
       {projects.length === 0 && <EmptyProjects client:load />}
-      {projects.length > 0 && <ProjectsList projects={projects} client:load />}
+      {
+        projects.length > 0 && (
+          <ProjectsList
+            projects={projects}
+            userCounts={userCounts || {}}
+            client:load
+          />
+        )
+      }
     </div>
   </div>
 </BaseLayout>