wip: add resource api

Add CLI skill to "github-user-activity" project

.astro/settings.json

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

.github/ISSUE_TEMPLATE/config.yml

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

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

@@ -9,14 +9,22 @@ jobs:
   upgrade-deps:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: 18
-      - uses: pnpm/action-setup@v2.2.2
-        with:
-          version: 7.13.4
-      - name: Upgrade dependencies
+          cache: 'pnpm'
+
+      - name: Install dependencies and generate content JSON
         run: |
           pnpm install
           npm run generate:roadmap-content-json

contributing.md

@@ -27,6 +27,24 @@ For the existing roadmaps, please follow the details listed for the nature of co
 
 If you have a project idea that you think we should add to the roadmap, feel free to open an issue with as much details about the project as possible and the roadmap you think it should be added to.
 
+The detailed format for issue should be as follows:
+
+```
+## What is this project about?
+
+(Add introduction to the project)
+
+## Skills this Project Covers
+
+(Comma separated list of skills e.g. Programming Knowledge, Database,)
+
+## Requirements
+
+( Detailed list of requirements, i.e. input, output, an hints to help build this etc)
+```
+
+Have a look at this project to get an idea of [what we are looking for](https://roadmap.sh/projects/github-user-activity).
+
 ## Adding Content
 
 Find [the content directory inside the relevant roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps). Please keep the following guidelines in mind when submitting content:

public/roadmap-content/android.json

@@ -215,13 +215,25 @@
   },
   "znvZp24L-PcQwkSObtixs": {
     "title": "TextView",
-    "description": "",
-    "links": []
+    "description": "TextView is a widget that is seen in every android application. This widget is used to display simple text within the android application.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Android developers: TextView",
+        "url": "https://developer.android.com/reference/android/widget/TextView",
+        "type": "article"
+      }
+    ]
   },
   "2iDJrxjXOt7o2fPp2HfRl": {
     "title": "Fragments",
-    "description": "",
-    "links": []
+    "description": "A `Fragment` represents a reusable portion of your app's UI. A fragment defines and manages its own layout, has its own lifecycle, and can handle its own input events. Fragments can't live on their own. They must be hosted by an activity or another fragment. The fragment’s view hierarchy becomes part of, or attaches to, the host’s view hierarchy.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Android Developers: Fragments",
+        "url": "https://developer.android.com/guide/fragments",
+        "type": "article"
+      }
+    ]
   },
   "boMz0HZlMAsLdCZlpUo-H": {
     "title": "EditText",
@@ -230,18 +242,36 @@
   },
   "Mtx0bY0drmaTw8sCM5YTl": {
     "title": "Dialogs",
-    "description": "",
-    "links": []
+    "description": "A `DialogFragment` is a special fragment subclass that is designed for creating and hosting dialogs. Although you don't need to host your **dialog** within a fragment, doing so lets the `FragmentManager` manage the state of the dialog and automatically restore the dialog when a configuration change occurs. Learn more from the following resources:",
+    "links": [
+      {
+        "title": "Android Developers: Dialogs",
+        "url": "https://developer.android.com/guide/fragments/dialogs",
+        "type": "article"
+      }
+    ]
   },
   "WhfzFOUpm0DFEj7Oeq21R": {
     "title": "Buttons",
-    "description": "",
-    "links": []
+    "description": "A `button` consists of text or an icon, or both, that communicates what action occurs when the user taps it.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Android Developers: Button",
+        "url": "https://developer.android.com/develop/ui/views/components/button",
+        "type": "article"
+      }
+    ]
   },
   "BVgO9n7tGlVdiS72-hFSd": {
     "title": "Toast",
-    "description": "",
-    "links": []
+    "description": "A `toast` provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Android developers: Toast",
+        "url": "https://developer.android.com/guide/topics/ui/notifiers/toasts",
+        "type": "article"
+      }
+    ]
   },
   "A4rtNULX_MoV93IH1Lgqw": {
     "title": "ImageView",
@@ -306,18 +336,40 @@
   },
   "pSU-NZtjBh-u0WKTYfjk_": {
     "title": "MVVM",
-    "description": "",
-    "links": []
+    "description": "The `Model-View-ViewModel` (MVVM) pattern is a software architectural pattern commonly used in UI development. It is designed to separate the concerns of an application, making the code more modular, testable, and maintainable.\n\nComponents:\n\n*   `Model`: Refers either to a domain model, which represents real state content (an object-oriented approach), or to the data access layer, which represents content.\n*   `View`: The view is the structure, layout, and appearance of what a user sees on the screen.\n*   `View model`: The view model is an abstraction of the view exposing public properties and commands. The view model has been described as a state of the data in the model.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Android Developers: View Model",
+        "url": "https://developer.android.com/topic/libraries/architecture/viewmodel",
+        "type": "article"
+      },
+      {
+        "title": "Wikipedia",
+        "url": "https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel",
+        "type": "article"
+      }
+    ]
   },
   "aF_xFIqTjQbENtC7pkXvJ": {
     "title": "MVP",
-    "description": "",
+    "description": "The MVP `Model View Presenter` pattern is a derivative of the well-known MVC `Model View Controller` pattern and is one of the most popular patterns for organizing the presentation layer in Android applications.\n\nMVP is divided into three components:\n\n*   `Model`: Responsible for managing the data input to the app. This can often be an Interactor or UseCase, handling the business logic and data operations.\n*   `View`: Takes care of updating the graphical part of the application. It acts as a passive view, only receiving data and requesting actions to be performed.\n*   `Presenter`: Handles all the logic related to the graphical interface that the View requests. It provides the View with the data it needs to display on the screen.\n\nThis structure helps to create a clear separation of concerns, making your codebase more modular and easier to maintain.",
     "links": []
   },
   "w1A6wPKSd3Yh2luuHV-aE": {
     "title": "MVC",
-    "description": "",
-    "links": []
+    "description": "MVC or `Model View Controller` is a software design pattern commonly used for developing user interfaces that divides the related program logic into three interconnected components.\n\nComponents:\n\n*   `Model`: The internal representations of information. This can often be an Interactor or UseCase\n*   `View`: The interface that presents information to and accepts it from the user\n*   `Controller`: The controller contains logic that updates the model and/or view in response to input from the users of the app.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "MVC",
+        "url": "https://developer.mozilla.org/en-US/docs/Glossary/MVC",
+        "type": "article"
+      },
+      {
+        "title": "Model–view–controller",
+        "url": "https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller",
+        "type": "article"
+      }
+    ]
   },
   "ZF5XgO7I_J9928bD3CVXo": {
     "title": "Repository Pattern",

public/roadmap-content/backend.json

@@ -339,11 +339,6 @@
         "title": "Explore top posts about Python",
         "url": "https://app.daily.dev/tags/python?ref=roadmapsh",
         "type": "article"
-      },
-      {
-        "title": "Python for Beginners - Learn Python in 1 Hour",
-        "url": "https://www.youtube.com/watch?v=kqtD5dpn9C8&ab_channel=ProgrammingwithMosh",
-        "type": "video"
       }
     ]
   },
@@ -1197,6 +1192,11 @@
         "title": "Explore top posts about GraphQL",
         "url": "https://app.daily.dev/tags/graphql?ref=roadmapsh",
         "type": "article"
+      },
+      {
+        "title": "Tutorial - GraphQL Explained in 100 Seconds",
+        "url": "https://www.youtube.com/watch?v=eIQh02xuVw4",
+        "type": "video"
       }
     ]
   },
@@ -1704,6 +1704,11 @@
         "title": "RabbitMQ Tutorial - Message Queues and Distributed Systems",
         "url": "https://www.youtube.com/watch?v=nFxjaVmFj5E",
         "type": "video"
+      },
+      {
+        "title": "RabbitMQ in 100 Seconds",
+        "url": "https://m.youtube.com/watch?v=NQ3fZtyXji0",
+        "type": "video"
       }
     ]
   },
@@ -2909,7 +2914,7 @@
   },
   "dwfEHInbX2eFiafM-nRMX": {
     "title": "DynamoDB",
-    "description": "",
+    "description": "DynamoDB is a fully managed NoSQL database service provided by AWS, designed for high-performance applications that require low-latency data access at any scale.\n\nIt supports key-value and document data models, allowing developers to store and retrieve any amount of data with predictable performance.\n\nDynamoDB is known for its seamless scalability, automatic data replication across multiple AWS regions, and built-in security features, making it ideal for use cases like real-time analytics, mobile apps, gaming, IoT, and more.\n\nKey features include flexible schema design, powerful query capabilities, and integration with other AWS services.",
     "links": []
   },
   "RyJFLLGieJ8Xjt-DlIayM": {
@@ -2966,8 +2971,14 @@
   },
   "WiAK70I0z-_bzbWNwiHUd": {
     "title": "TimeScale",
-    "description": "",
-    "links": []
+    "description": "TimescaleDB is an open-source time-series database built on top of PostgreSQL, designed for efficiently storing and querying time-series data.\n\nIt introduces the concept of hypertables, which automatically partition data by time and space, making it ideal for high-volume data scenarios like monitoring, IoT, and financial analytics.\n\nTimescaleDB combines the power of relational databases with the performance of a specialized time-series solution, offering advanced features like continuous aggregates, real-time analytics, and seamless integration with PostgreSQL's ecosystem.\n\nIt's a robust choice for developers looking to manage time-series data in scalable and efficient ways.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Tutorial - TimeScaleDB Explained in 100 Seconds",
+        "url": "https://www.youtube.com/watch?v=69Tzh_0lHJ8",
+        "type": "video"
+      }
+    ]
   },
   "gT6-z2vhdIQDzmR2K1g1U": {
     "title": "Cassandra",
@@ -2997,7 +3008,7 @@
   },
   "5xy66yQrz1P1w7n6PcAFq": {
     "title": "AWS Neptune",
-    "description": "",
+    "description": "AWS Neptune is a fully managed graph database service designed for applications that require highly connected data.\n\nIt supports two popular graph models: Property Graph and RDF (Resource Description Framework), allowing you to build applications that traverse billions of relationships with millisecond latency.\n\nNeptune is optimized for storing and querying graph data, making it ideal for use cases like social networks, recommendation engines, fraud detection, and knowledge graphs.\n\nIt offers high availability, automatic backups, and multi-AZ (Availability Zone) replication, ensuring data durability and fault tolerance.\n\nAdditionally, Neptune integrates seamlessly with other AWS services and supports open standards like Gremlin, SPARQL, and Apache TinkerPop, making it flexible and easy to integrate into existing applications.",
     "links": []
   },
   "Z01E67D6KjrShvQCHjGR7": {

public/roadmap-content/blockchain.json

@@ -499,7 +499,7 @@
     ]
   },
   "JLXIbP-y8C2YktIk3R12m": {
-    "title": "Ehereum",
+    "title": "Ethereum",
     "description": "Ethereum is a programmable blockchain platform with the capacity to support smart contracts, dapps (decentralized apps), and other DeFi projects. The Ethereum native token is the Ether (ETH), and it’s used to fuel operations on the blockchain.\n\nThe Ethereum platform launched in 2015, and it’s now the second largest form of crypto next to Bitcoin (BTC).\n\nVisit the following resources to learn more:",
     "links": [
       {
@@ -1233,7 +1233,7 @@
     ]
   },
   "tvk1Wh04BcFbAAwYWMx27": {
-    "title": "Centralized Storage",
+    "title": "Decentralized Storage",
     "description": "Decentralized storage is where data is stored on a decentralized network across multiple locations by users or groups who are incentivized to join, store, and keep data accessible. The servers used are hosted by people, rather than a single company. Anyone is free to join, they are kept honest due to smart contracts, and they are incentivized to participate via tokens.\n\nVisit the following resources to learn more:",
     "links": [
       {

public/roadmap-content/computer-science.json

@@ -1347,7 +1347,7 @@
       },
       {
         "title": "Breadth-first search in 4 minutes",
-        "url": "https://www.youtube.com/watch?v=hz5ytanv5qe",
+        "url": "https://www.youtube.com/watch?v=HZ5YTanv5QE",
         "type": "video"
       }
     ]
@@ -3177,7 +3177,7 @@
     ]
   },
   "YMO9oD_sbzyDZPNU2xZwe": {
-    "title": "Cloud Design Ptterns",
+    "title": "Cloud Design Patterns",
     "description": "These design patterns are useful for building reliable, scalable, secure applications in the cloud.\n\nThe link below has cloud design patterns where each pattern describes the problem that the pattern addresses, considerations for applying the pattern, and an example based on Microsoft Azure. Most patterns include code samples or snippets that show how to implement the pattern on Azure. However, most patterns are relevant to any distributed system, whether hosted on Azure or other cloud platforms.\n\nVisit the following resources to learn more:",
     "links": [
       {

public/roadmap-content/cyber-security.json

@@ -365,9 +365,9 @@
       }
     ]
   },
-  "BqvijNoRzSGYLCMP-6hhr": {
-    "title": "CISSP",
-    "description": "The Certified Information Systems Security Professional (CISSP) is a globally recognized certification offered by the International Information System Security Certification Consortium (ISC)². It is designed for experienced security professionals to validate their knowledge and expertise in the field of information security.\n\nWho Should Obtain the CISSP Certification?\n------------------------------------------\n\nThe CISSP certification is ideal for security consultants, managers, IT directors, security auditors, security analysts, and other professionals who are responsible for designing, implementing, and managing security for their organization. This certification is aimed at professionals with at least five years of full-time experience in two or more of the eight CISSP domains:\n\n*   Security and Risk Management\n*   Asset Security\n*   Security Architecture and Engineering\n*   Communication and Network Security\n*   Identity and Access Management (IAM)\n*   Security Assessment and Testing\n*   Security Operations\n*   Software Development Security\n\nCertification Process\n---------------------\n\nTo obtain the CISSP certification, candidates must meet the following requirements:\n\n*   **Experience:** Possess a minimum of five years of cumulative, paid, full-time work experience in two or more of the eight domains of the CISSP Common Body of Knowledge (CBK).\n    \n*   **Exam:** Pass the CISSP examination with a minimum scaled score of 700 out of 1000 points. The exam consists of 100 to 150 multiple-choice and advanced innovative questions that must be completed within three hours.\n    \n*   **Endorsement:** After passing the exam, candidates must submit an endorsement application to be reviewed and endorsed by an (ISC)² CISSP holder within nine months of passing the exam.\n    \n*   **Continuing Professional Education (CPE):** To maintain the CISSP certification, professionals must earn 120 CPE credits every three years, with a minimum of 40 credits earned each year, and pay an annual maintenance fee.\n    \n\nBenefits of CISSP Certification\n-------------------------------\n\nObtaining the CISSP certification comes with numerous benefits, such as:\n\n*   Enhanced credibility, as the CISSP is often considered the gold standard in information security certifications.\n*   Increased job opportunities, as many organizations and government agencies require or prefer CISSP-certified professionals.\n*   Improved knowledge and skills, as the certification covers a broad range of security topics and best practices.\n*   Higher salary potential, as CISSP-certified professionals often command higher salaries compared to their non-certified counterparts.\n*   Access to a network of other CISSP-certified professionals and resources, enabling continuous learning and professional development.",
+  "AAo7DXB7hyBzO6p05gx1i": {
+    "title": "CEH",
+    "description": "**Certified Ethical Hacker (CEH)** is an advanced certification focused on equipping cybersecurity professionals with the knowledge and skills required to defend against the continuously evolving landscape of cyber threats. This certification is facilitated by the EC-Council, an internationally recognized organization for information security certifications.\n\nObjectives\n----------\n\nThe CEH certification aims to provide professionals with the following skills:\n\n*   Understand the ethics and legal requirements of ethical hacking\n*   Identify and analyze common cyber threats, including malware, social engineering, and various network attacks\n*   Utilize the latest penetration testing tools and methodologies to uncover vulnerabilities in systems, networks, and applications\n*   Implement defensive countermeasures to protect against cyber attacks\n\nTarget Audience\n---------------\n\nThe CEH certification is ideal for:\n\n*   Cybersecurity professionals seeking to expand their skill set\n*   IT administrators responsible for securing their organization's systems and network\n*   Penetration testers looking to demonstrate their ethical hacking capabilities\n*   Security consultants who want a recognized certification in the IT security field\n\nExam Details\n------------\n\nTo become a Certified Ethical Hacker, you must pass the CEH exam, which consists of the following:\n\n*   Number of Questions: 125\n*   Exam Type: Multiple choice questions\n*   Duration: 4 hours\n*   Passing Score: 70%\n\nPreparation\n-----------\n\nTo prepare for the CEH exam, candidates can follow the EC-Council's official training course or opt for self-study. The recommended resources include:\n\n*   EC-Council's [_CEH v11: Certified Ethical Hacker_](https://www.eccouncil.org/programs/certified-ethical-hacker-ceh/) training course\n*   Official CEH study guide and practice exams\n*   CEH-related books, articles, and online resources\n\nRecertification\n---------------\n\nCEH holders need to earn 120 ECE (Education Credits) within three years of obtaining their certification to retain their credentials. These credits can be obtained through training, workshops, conferences, and other continuous learning opportunities in the field of information security.",
     "links": []
   },
   "lqFp4VLY_S-5tAbhNQTew": {
@@ -410,10 +410,36 @@
     "description": "CREST is a non-profit, accreditation and certification body that represents the technical information security industry. Established in 2008, its mission is to promote the development and professionalization of the cyber security sector. CREST provides certifications for individuals and accreditations for companies, helping customers find knowledgeable and experienced professionals in the field.\n\nCREST Examinations and Certifications\n-------------------------------------\n\nCREST offers various examinations and certifications, including:\n\n*   **CREST Practitioner Security Analyst (CPSA)**: This is an entry-level certification for individuals looking to demonstrate their knowledge and competence in vulnerability assessment and penetration testing. Passing the CPSA exam is a prerequisite for taking other CREST technical examinations.\n    \n*   **CREST Registered Penetration Tester (CRT)**: This certification is aimed at professionals with a solid understanding of infrastructure and web application penetration testing. CRT holders have demonstrated practical skills in identifying and exploiting vulnerabilities in a controlled environment.\n    \n*   **CREST Certified Infrastructure Tester (CCIT)** and **CREST Certified Web Application Tester (CCWAT)**: These advanced certifications require candidates to have a deep technical understanding and practical skills in infrastructure or web application testing, respectively. These certifications are intended for experienced professionals who can perform in-depth technical assessments and identify advanced security vulnerabilities.\n    \n*   **CREST Certified Simulated Attack Manager (CCSAM)** and **CREST Certified Simulated Attack Specialist (CCSAS)**: These certifications focus on the planning, scoping, and management of simulated attack engagements, or red teaming. They require candidates to have experience in both the technical and managerial aspects of coordinated cyber attacks.\n    \n\nBenefits of CREST Certifications\n--------------------------------\n\nObtaining CREST certifications provides several benefits, such as:\n\n*   Increased credibility and recognition within the cyber security industry\n*   Validation of your technical knowledge and expertise\n*   Access to resources and support through the CREST community\n*   Assurance for employers and clients that you're skilled and trustworthy\n\nIn the rapidly evolving field of cyber security, CREST certifications demonstrate a commitment to continuous learning, growth, and professionalism.",
     "links": []
   },
-  "AAo7DXB7hyBzO6p05gx1i": {
-    "title": "CEH",
-    "description": "**Certified Ethical Hacker (CEH)** is an advanced certification focused on equipping cybersecurity professionals with the knowledge and skills required to defend against the continuously evolving landscape of cyber threats. This certification is facilitated by the EC-Council, an internationally recognized organization for information security certifications.\n\nObjectives\n----------\n\nThe CEH certification aims to provide professionals with the following skills:\n\n*   Understand the ethics and legal requirements of ethical hacking\n*   Identify and analyze common cyber threats, including malware, social engineering, and various network attacks\n*   Utilize the latest penetration testing tools and methodologies to uncover vulnerabilities in systems, networks, and applications\n*   Implement defensive countermeasures to protect against cyber attacks\n\nTarget Audience\n---------------\n\nThe CEH certification is ideal for:\n\n*   Cybersecurity professionals seeking to expand their skill set\n*   IT administrators responsible for securing their organization's systems and network\n*   Penetration testers looking to demonstrate their ethical hacking capabilities\n*   Security consultants who want a recognized certification in the IT security field\n\nExam Details\n------------\n\nTo become a Certified Ethical Hacker, you must pass the CEH exam, which consists of the following:\n\n*   Number of Questions: 125\n*   Exam Type: Multiple choice questions\n*   Duration: 4 hours\n*   Passing Score: 70%\n\nPreparation\n-----------\n\nTo prepare for the CEH exam, candidates can follow the EC-Council's official training course or opt for self-study. The recommended resources include:\n\n*   EC-Council's [_CEH v11: Certified Ethical Hacker_](https://www.eccouncil.org/programs/certified-ethical-hacker-ceh/) training course\n*   Official CEH study guide and practice exams\n*   CEH-related books, articles, and online resources\n\nRecertification\n---------------\n\nCEH holders need to earn 120 ECE (Education Credits) within three years of obtaining their certification to retain their credentials. These credits can be obtained through training, workshops, conferences, and other continuous learning opportunities in the field of information security.",
-    "links": []
+  "BqvijNoRzSGYLCMP-6hhr": {
+    "title": "CISSP",
+    "description": "The Certified Information Systems Security Professional (CISSP) is a globally recognized certification offered by the International Information System Security Certification Consortium (ISC)². It is designed for experienced security professionals to validate their knowledge and expertise in the field of information security.\n\nWho Should Obtain the CISSP Certification?\n------------------------------------------\n\nThe CISSP certification is ideal for security consultants, managers, IT directors, security auditors, security analysts, and other professionals who are responsible for designing, implementing, and managing security for their organization. This certification is aimed at professionals with at least five years of full-time experience in two or more of the eight CISSP domains:\n\n*   Security and Risk Management\n*   Asset Security\n*   Security Architecture and Engineering\n*   Communication and Network Security\n*   Identity and Access Management (IAM)\n*   Security Assessment and Testing\n*   Security Operations\n*   Software Development Security\n\nCertification Process\n---------------------\n\nTo obtain the CISSP certification, candidates must meet the following requirements:\n\n*   **Experience:** Possess a minimum of five years of cumulative, paid, full-time work experience in two or more of the eight domains of the CISSP Common Body of Knowledge (CBK).\n    \n*   **Exam:** Pass the CISSP examination with a minimum scaled score of 700 out of 1000 points. The exam consists of 100 to 150 multiple-choice and advanced innovative questions that must be completed within three hours.\n    \n*   **Endorsement:** After passing the exam, candidates must submit an endorsement application to be reviewed and endorsed by an (ISC)² CISSP holder within nine months of passing the exam.\n    \n*   **Continuing Professional Education (CPE):** To maintain the CISSP certification, professionals must earn 120 CPE credits every three years, with a minimum of 40 credits earned each year, and pay an annual maintenance fee.\n    \n\nBenefits of CISSP Certification\n-------------------------------\n\nObtaining the CISSP certification comes with numerous benefits, such as:\n\n*   Enhanced credibility, as the CISSP is often considered the gold standard in information security certifications.\n*   Increased job opportunities, as many organizations and government agencies require or prefer CISSP-certified professionals.\n*   Improved knowledge and skills, as the certification covers a broad range of security topics and best practices.\n*   Higher salary potential, as CISSP-certified professionals often command higher salaries compared to their non-certified counterparts.\n*   Access to a network of other CISSP-certified professionals and resources, enabling continuous learning and professional development.\n\nLearn more from the following resources",
+    "links": [
+      {
+        "title": "ISC2 CISSP",
+        "url": "https://www.isc2.org/certifications/cissp",
+        "type": "article"
+      },
+      {
+        "title": "ISC2 CISSP - Official Study Guide",
+        "url": "https://www.wiley.com/en-us/ISC2+CISSP+Certified+Information+Systems+Security+Professional+Official+Study+Guide%2C+10th+Edition-p-9781394254699",
+        "type": "article"
+      },
+      {
+        "title": "Destcert - CISSP Free Resources",
+        "url": "https://destcert.com/resources/",
+        "type": "article"
+      },
+      {
+        "title": "CISSP Exam Cram 2024",
+        "url": "https://youtube.com/playlist?list=PL7XJSuT7Dq_XPK_qmYMqfiBjbtHJRWigD&si=_wSeCkvj-1rzv0ZF",
+        "type": "video"
+      },
+      {
+        "title": "CISSP Prep (Coffee Shots)",
+        "url": "https://youtube.com/playlist?list=PL0hT6hgexlYxKzBmiCD6SXW0qO5ucFO-J&si=9ICs373Vl1ce3s0H",
+        "type": "video"
+      }
+    ]
   },
   "UY6xdt_V3YMkZxZ1hZLvW": {
     "title": "Operating Systems",
@@ -438,10 +464,10 @@
   },
   "4frVcjYI1VlVU9hQgpwcT": {
     "title": "Linux",
-    "description": "Linux is an open-source operating system (OS) that is widely popular due to its flexibility, stability, and security features. As a Unix-based OS, Linux has a command-line interface, which allows users to perform various tasks through text commands. However, graphical user interfaces (GUIs) can also be installed for ease of use.\n\nKey Features\n------------\n\n*   **Open-source**: Anyone can view, modify, and distribute the Linux source code, promoting collaboration and continuous improvement within the OS community.\n*   **Modular design**: Linux can be customized for various computing environments, such as desktops, servers, and embedded systems.\n*   **Stability and performance**: Linux is well-known for its ability to handle heavy loads without crashing, making it an ideal choice for servers.\n*   **Strong Security**: Linux has robust security mechanisms, such as file permissions, a built-in firewall, and an extensive user privilege system.\n*   **Large Community**: Linux has a vast, active user community that offers a wealth of knowledge, user-contributed software, and support forums.\n\nPopular Linux Distributions\n---------------------------\n\nThere are numerous Linux distributions available, catering to specific user needs and preferences. Some popular distributions include:\n\n*   **Ubuntu**: A user-friendly distribution suitable for beginners, often used for desktop environments.\n*   **Fedora**: A cutting-edge distribution with frequent updates and innovative features, ideal for developers and advanced users.\n*   **Debian**: A very stable distribution that prioritizes free software and benefits from a large, active community.\n*   **Arch Linux**: A highly customizable distribution that allows users to build their system from the ground up, suited for experienced users.\n*   **CentOS**: A distribution focused on stability, security, and manageability, making it a popular choice for server environments.\n\nSecurity Best Practices for Linux\n---------------------------------\n\nWhile Linux is inherently secure, there are best practices to enhance your system's security further:\n\n*   Keep your system updated: Regularly update your kernel, OS packages, and installed software to ensure you have the latest security patches.\n*   Enable a firewall: Configure and enable a firewall, such as `iptables`, to control incoming and outgoing network traffic.\n*   Use strong passwords and user accounts: Create separate accounts with strong passwords for different users and grant them only the required privileges.\n*   Disable unused services: Unnecessary services can be potential security risks; ensure only required services are running on your system.\n*   Implement a Security-Enhanced Linux (SELinux) policy: SELinux provides a mandatory access control (MAC) system that restricts user and process access to system resources.\n\nBy understanding Linux's features and best practices, you can leverage its powerful capabilities and robust security features to enhance your computing environment's performance and safety.",
+    "description": "Linux is an open-source operating system (OS) that is widely popular due to its flexibility, stability, and security features. As a Unix-based OS, Linux has a command-line interface, which allows users to perform various tasks through text commands. However, graphical user interfaces (GUIs) can also be installed for ease of use.\n\nKey Features\n------------\n\n*   **Open-source**: Anyone can view, modify, and distribute the Linux source code, promoting collaboration and continuous improvement within the OS community.\n*   **Modular design**: Linux can be customized for various computing environments, such as desktops, servers, and embedded systems.\n*   **Stability and performance**: Linux is well-known for its ability to handle heavy loads without crashing, making it an ideal choice for servers.\n*   **Strong Security**: Linux has robust security mechanisms, such as file permissions, a built-in firewall, and an extensive user privilege system.\n*   **Large Community**: Linux has a vast, active user community that offers a wealth of knowledge, user-contributed software, and support forums.\n\nPopular Linux Distributions\n---------------------------\n\nThere are numerous Linux distributions available, catering to specific user needs and preferences. Some popular distributions include:\n\n*   **Ubuntu**: A user-friendly distribution suitable for beginners, often used for desktop environments.\n*   **Fedora**: A cutting-edge distribution with frequent updates and innovative features, ideal for developers and advanced users.\n*   **Debian**: A very stable distribution that prioritizes free software and benefits from a large, active community.\n*   **Arch Linux**: A highly customizable distribution that allows users to build their system from the ground up, suited for experienced users.\n*   **CentOS**: A distribution focused on stability, security, and manageability, making it a popular choice for server environments.\n\nSecurity Best Practices for Linux\n---------------------------------\n\nWhile Linux is inherently secure, there are best practices to enhance your system's security further:\n\n*   Keep your system updated: Regularly update your kernel, OS packages, and installed software to ensure you have the latest security patches.\n*   Enable a firewall: Configure and enable a firewall, such as `iptables`, to control incoming and outgoing network traffic.\n*   Use strong passwords and user accounts: Create separate accounts with strong passwords for different users and grant them only the required privileges.\n*   Disable unused services: Unnecessary services can be potential security risks; ensure only required services are running on your system.\n*   Implement a Security-Enhanced Linux (SELinux) policy: SELinux provides a mandatory access control (MAC) system that restricts user and process access to system resources.\n\nBy understanding Linux's features and best practices, you can leverage its powerful capabilities and robust security features to enhance your computing environment's performance and safety.\n\nRecommended resources include:",
     "links": [
       {
-        "title": "Linux from scratch- Cisco",
+        "title": "Linux from scratch - Cisco",
         "url": "https://www.netacad.com/courses/os-it/ndg-linux-unhatched",
         "type": "course"
       },
@@ -561,8 +587,14 @@
   },
   "dJ0NUsODFhk52W2zZxoPh": {
     "title": "SSL and TLS Basics",
-    "description": "Secure Sockets Layer (SSL) and Transport Layer Security (TLS) are cryptographic protocols designed to provide secure communication over a computer network. They play a vital role in protecting sensitive information transmitted online, such as login credentials, financial information, and private user data.\n\nSecure Sockets Layer (SSL)\n--------------------------\n\nSSL is the predecessor to TLS and was first introduced in the 1990s. It creates an encrypted connection between a client (typically a web browser) and a server to ensure that any data transmitted remains private and secure. SSL uses a combination of symmetric and asymmetric encryption methods, as well as digital certificates, to establish and maintain secure communication.\n\nTransport Layer Security (TLS)\n------------------------------\n\nTLS is an improved and more secure version of SSL, with TLS 1.0 being released as an upgrade to SSL 3.0. The current version, as of this guide, is TLS 1.3. TLS provides a more robust and flexible security framework, addressing many of the vulnerabilities present in SSL. While many people still refer to SSL when discussing secure web communication, it's important to note that SSL has been deprecated, and TLS is the best-practice standard for secure communication.\n\nKey Components\n--------------\n\n*   **Encryption**: SSL and TLS use powerful algorithms to protect data through encryption, ensuring it's unreadable by anyone without the proper decryption keys.\n*   **Authentication**: SSL/TLS digital certificates verify the identities of clients and servers, providing trust and authenticity.\n*   **Integrity**: These security protocols use message authentication codes to ensure that the data sent between clients and servers has not been tampered with during transmission.\n\nHandshake Process\n-----------------\n\nSSL and TLS follow a series of steps, known as the \"handshake process,\" to create a secure connection:\n\n*   **Client hello**: The client initiates the handshake process by sending a message with supported cryptographic algorithms, random numbers, and session information.\n*   **Server hello**: The server responds with its chosen cryptographic algorithms, random numbers, and its digital certificate. Optionally, the server can request the client's certificate for mutual authentication.\n*   **Client verification**: The client verifies the server's certificate and may send its own if requested. It then creates a pre-master secret, encrypts it with the server's public key, and sends it to the server.\n*   **Key generation and exchange**: Both the client and server generate the master secret and session keys using the pre-master secret and shared random numbers. These keys are used for encrypting and decrypting the data transmitted.\n*   **Secured connection**: Once the keys are exchanged, the client and server can now communicate securely using the established encryption and keys.\n\nSecure communication is critical for any organization handling sensitive data. SSL and TLS serve as the backbone for protecting data in transit and play a significant role in ensuring the confidentiality, integrity, and authenticity of online communications.",
-    "links": []
+    "description": "Secure Sockets Layer (SSL) and Transport Layer Security (TLS) are cryptographic protocols designed to provide secure communication over a computer network. They play a vital role in protecting sensitive information transmitted online, such as login credentials, financial information, and private user data.\n\nSecure Sockets Layer (SSL)\n--------------------------\n\nSSL is the predecessor to TLS and was first introduced in the 1990s. It creates an encrypted connection between a client (typically a web browser) and a server to ensure that any data transmitted remains private and secure. SSL uses a combination of symmetric and asymmetric encryption methods, as well as digital certificates, to establish and maintain secure communication.\n\nTransport Layer Security (TLS)\n------------------------------\n\nTLS is an improved and more secure version of SSL, with TLS 1.0 being released as an upgrade to SSL 3.0. The current version, as of this guide, is TLS 1.3. TLS provides a more robust and flexible security framework, addressing many of the vulnerabilities present in SSL. While many people still refer to SSL when discussing secure web communication, it's important to note that SSL has been deprecated, and TLS is the best-practice standard for secure communication.\n\nKey Components\n--------------\n\n*   **Encryption**: SSL and TLS use powerful algorithms to protect data through encryption, ensuring it's unreadable by anyone without the proper decryption keys.\n*   **Authentication**: SSL/TLS digital certificates verify the identities of clients and servers, providing trust and authenticity.\n*   **Integrity**: These security protocols use message authentication codes to ensure that the data sent between clients and servers has not been tampered with during transmission.\n\nHandshake Process\n-----------------\n\nSSL and TLS follow a series of steps, known as the \"handshake process,\" to create a secure connection:\n\n*   **Client hello**: The client initiates the handshake process by sending a message with supported cryptographic algorithms, random numbers, and session information.\n*   **Server hello**: The server responds with its chosen cryptographic algorithms, random numbers, and its digital certificate. Optionally, the server can request the client's certificate for mutual authentication.\n*   **Client verification**: The client verifies the server's certificate and may send its own if requested. It then creates a pre-master secret, encrypts it with the server's public key, and sends it to the server.\n*   **Key generation and exchange**: Both the client and server generate the master secret and session keys using the pre-master secret and shared random numbers. These keys are used for encrypting and decrypting the data transmitted.\n*   **Secured connection**: Once the keys are exchanged, the client and server can now communicate securely using the established encryption and keys.\n\nSecure communication is critical for any organization handling sensitive data. SSL and TLS serve as the backbone for protecting data in transit and play a significant role in ensuring the confidentiality, integrity, and authenticity of online communications.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "SSH vs TLS vs SSL",
+        "url": "https://www.youtube.com/watch?v=k3rFFLmQCuY",
+        "type": "video"
+      }
+    ]
   },
   "umbMBQ0yYmB5PgWfY6zfO": {
     "title": "Basics of NAS and SAN",
@@ -825,8 +857,14 @@
   },
   "LKK1A5-xawA7yCIAWHS8P": {
     "title": "SSL / TLS",
-    "description": "**Secure Socket Layer (SSL)** and **Transport Layer Security (TLS)** are cryptographic protocols designed to provide security and data integrity for communications over networks. These protocols are commonly used for securing web traffic and ensuring that sensitive information, such as credit card numbers and login credentials, are transmitted securely between clients (e.g., web browsers) and servers.\n\nSSL\n---\n\nSSL was developed by Netscape in the mid-1990s and has gone through several iterations. The last version, SSLv3, was released in 1996. SSL was deprecated in 2015 due to security concerns, and it is not recommended for use in modern applications.\n\nTLS\n---\n\nTLS is the successor to SSL and is continually evolving with new versions and updates. The most recent version, TLS 1.3, was released in 2018. TLS is widely used and considered the standard for securing web traffic.\n\nHow SSL/TLS Works\n-----------------\n\nSSL/TLS operates by encrypting the data transmitted between a client and a server, ensuring that the data cannot be easily intercepted or tampered with. The encryption is achieved using a combination of cryptographic algorithms, key exchanges, and digital certificates.\n\nHere are the key steps in setting up an SSL/TLS connection:\n\n*   **Handshake:** The client and server will engage in a process called a \"handshake\" to establish a secure connection. During this process, the client and server agree on which version of SSL/TLS to use, and choose the cipher suites and cryptographic algorithms they will use to secure the communication.\n    \n*   **Key Exchange:** The client and server will perform a key exchange, a process by which they generate and securely share encryption keys. These keys will be used to encrypt and decrypt the data being transmitted between them.\n    \n*   **Certificate Verification:** The server will provide a digital certificate, which contains its public key and information about the server. The client checks the validity of the certificate by confirming that it was issued by a trusted Certificate Authority (CA) and has not expired.\n    \n*   **Secure Communication:** Once the handshake, key exchange, and certificate verification are complete, the client and server can begin securely transmitting data using the encryption keys they have shared.\n    \n\nAdvantages of SSL/TLS\n---------------------\n\n*   **Secure communication:** SSL/TLS provides a secure, encrypted tunnel for data to be transmitted between clients and servers, protecting sensitive information from eavesdropping, interception, and tampering.\n    \n*   **Authentication:** SSL/TLS uses digital certificates to authenticate the server and sometimes the client. This helps to ensure that the parties involved in the communication are who they claim to be.\n    \n*   **Data integrity:** SSL/TLS includes mechanisms to confirm that the data received has not been tampered with during transmission, maintaining the integrity of the information being sent.",
-    "links": []
+    "description": "**Secure Socket Layer (SSL)** and **Transport Layer Security (TLS)** are cryptographic protocols designed to provide security and data integrity for communications over networks. These protocols are commonly used for securing web traffic and ensuring that sensitive information, such as credit card numbers and login credentials, are transmitted securely between clients (e.g., web browsers) and servers.\n\nSSL\n---\n\nSSL was developed by Netscape in the mid-1990s and has gone through several iterations. The last version, SSLv3, was released in 1996. SSL was deprecated in 2015 due to security concerns, and it is not recommended for use in modern applications.\n\nTLS\n---\n\nTLS is the successor to SSL and is continually evolving with new versions and updates. The most recent version, TLS 1.3, was released in 2018. TLS is widely used and considered the standard for securing web traffic.\n\nHow SSL/TLS Works\n-----------------\n\nSSL/TLS operates by encrypting the data transmitted between a client and a server, ensuring that the data cannot be easily intercepted or tampered with. The encryption is achieved using a combination of cryptographic algorithms, key exchanges, and digital certificates.\n\nHere are the key steps in setting up an SSL/TLS connection:\n\n*   **Handshake:** The client and server will engage in a process called a \"handshake\" to establish a secure connection. During this process, the client and server agree on which version of SSL/TLS to use, and choose the cipher suites and cryptographic algorithms they will use to secure the communication.\n    \n*   **Key Exchange:** The client and server will perform a key exchange, a process by which they generate and securely share encryption keys. These keys will be used to encrypt and decrypt the data being transmitted between them.\n    \n*   **Certificate Verification:** The server will provide a digital certificate, which contains its public key and information about the server. The client checks the validity of the certificate by confirming that it was issued by a trusted Certificate Authority (CA) and has not expired.\n    \n*   **Secure Communication:** Once the handshake, key exchange, and certificate verification are complete, the client and server can begin securely transmitting data using the encryption keys they have shared.\n    \n\nAdvantages of SSL/TLS\n---------------------\n\n*   **Secure communication:** SSL/TLS provides a secure, encrypted tunnel for data to be transmitted between clients and servers, protecting sensitive information from eavesdropping, interception, and tampering.\n    \n*   **Authentication:** SSL/TLS uses digital certificates to authenticate the server and sometimes the client. This helps to ensure that the parties involved in the communication are who they claim to be.\n    \n*   **Data integrity:** SSL/TLS includes mechanisms to confirm that the data received has not been tampered with during transmission, maintaining the integrity of the information being sent.\n    \n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "SSL, TLS, HTTPS Explained",
+        "url": "https://www.youtube.com/watch?v=j9QmMEWmcfo",
+        "type": "video"
+      }
+    ]
   },
   "AjywuCZdBi9atGUbetlUL": {
     "title": "VMWare",
@@ -1104,8 +1142,19 @@
   },
   "FJsEBOFexbDyAj86XWBCc": {
     "title": "Basics of IDS and IPS",
-    "description": "When it comes to cybersecurity, detecting and preventing intrusions is crucial for protecting valuable information systems and networks. In this section, we'll discuss the basics of Intrusion Detection Systems (IDS) and Intrusion Prevention Systems (IPS) to help you better understand their function and importance in your overall cybersecurity strategy.\n\nWhat is Intrusion Detection System (IDS)?\n-----------------------------------------\n\nAn Intrusion Detection System (IDS) is a critical security tool designed to monitor and analyze network traffic or host activities for any signs of malicious activity, policy violations, or unauthorized access attempts. Once a threat or anomaly is identified, the IDS raises an alert to the security administrator for further investigation and possible actions.\n\nThere are two types of IDS:\n\n*   **Network-Based Intrusion Detection System (NIDS)**: This type of IDS is deployed on network devices such as routers, switches, or firewalls to monitor and analyze the traffic between hosts within the network.\n    \n*   **Host-Based Intrusion Detection System (HIDS)**: This type of IDS is installed on individual hosts, such as servers or workstations, to monitor and analyze the activities on that specific host.\n    \n\nWhat is Intrusion Prevention System (IPS)?\n------------------------------------------\n\nAn Intrusion Prevention System (IPS) is an advanced security solution closely related to IDS. While an IDS mainly focuses on detecting and alerting about intrusions, an IPS takes it a step further and actively works to prevent the attacks. It monitors, analyzes, and takes pre-configured automatic actions based on suspicious activities, such as blocking malicious traffic, reseting connections, or dropping malicious packets.\n\nThere are two types of IPS:\n\n*   **Network-Based Intrusion Prevention System (NIPS)**: This type of IPS is deployed in-line with network devices and closely monitors network traffic, making it possible to take actions in real-time.\n    \n*   **Host-Based Intrusion Prevention System (HIPS)**: This type of IPS is installed on individual hosts and actively prevents attacks by controlling inputs and outputs on the host, restricting access to resources, and making use of application-level controls.\n    \n\nKey Takeaways\n-------------\n\n*   IDS and IPS are essential components of a robust cybersecurity strategy.\n*   IDS focuses on detecting and alerting about potential intrusions, while IPS takes it further by actively preventing and mitigating attacks.\n*   Network-based systems protect networks, while host-based systems protect individual hosts within a network.\n*   Regularly updating and configuring IDS/IPS is necessary to continually defend against evolving threats.\n\nBy understanding the basics of IDS and IPS, you can better evaluate your security needs and take the right steps to protect your network and hosts from potential intruders.",
-    "links": []
+    "description": "When it comes to cybersecurity, detecting and preventing intrusions is crucial for protecting valuable information systems and networks. In this section, we'll discuss the basics of Intrusion Detection Systems (IDS) and Intrusion Prevention Systems (IPS) to help you better understand their function and importance in your overall cybersecurity strategy.\n\nWhat is Intrusion Detection System (IDS)?\n-----------------------------------------\n\nAn Intrusion Detection System (IDS) is a critical security tool designed to monitor and analyze network traffic or host activities for any signs of malicious activity, policy violations, or unauthorized access attempts. Once a threat or anomaly is identified, the IDS raises an alert to the security administrator for further investigation and possible actions.\n\nThere are two types of IDS:\n\n*   **Network-Based Intrusion Detection System (NIDS)**: This type of IDS is deployed on network devices such as routers, switches, or firewalls to monitor and analyze the traffic between hosts within the network.\n    \n*   **Host-Based Intrusion Detection System (HIDS)**: This type of IDS is installed on individual hosts, such as servers or workstations, to monitor and analyze the activities on that specific host.\n    \n\nWhat is Intrusion Prevention System (IPS)?\n------------------------------------------\n\nAn Intrusion Prevention System (IPS) is an advanced security solution closely related to IDS. While an IDS mainly focuses on detecting and alerting about intrusions, an IPS takes it a step further and actively works to prevent the attacks. It monitors, analyzes, and takes pre-configured automatic actions based on suspicious activities, such as blocking malicious traffic, reseting connections, or dropping malicious packets.\n\nThere are two types of IPS:\n\n*   **Network-Based Intrusion Prevention System (NIPS)**: This type of IPS is deployed in-line with network devices and closely monitors network traffic, making it possible to take actions in real-time.\n    \n*   **Host-Based Intrusion Prevention System (HIPS)**: This type of IPS is installed on individual hosts and actively prevents attacks by controlling inputs and outputs on the host, restricting access to resources, and making use of application-level controls.\n    \n\nKey Takeaways\n-------------\n\n*   IDS and IPS are essential components of a robust cybersecurity strategy.\n*   IDS focuses on detecting and alerting about potential intrusions, while IPS takes it further by actively preventing and mitigating attacks.\n*   Network-based systems protect networks, while host-based systems protect individual hosts within a network.\n*   Regularly updating and configuring IDS/IPS is necessary to continually defend against evolving threats.\n\nBy understanding the basics of IDS and IPS, you can better evaluate your security needs and take the right steps to protect your network and hosts from potential intruders.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "What is an Intrusion Prevention System?",
+        "url": "https://www.paloaltonetworks.com/cyberpedia/what-is-an-intrusion-prevention-system-ips",
+        "type": "article"
+      },
+      {
+        "title": "Intrusion Prevention System (IPS)",
+        "url": "https://www.youtube.com/watch?v=7QuYupuic3Q",
+        "type": "video"
+      }
+    ]
   },
   "bj5YX8zhlam0yoNckL8e4": {
     "title": "Honeypots",
@@ -1425,8 +1474,14 @@
   },
   "w6wXkoLrv0_d-Ah0txUHd": {
     "title": "Kali Linux",
-    "description": "",
-    "links": []
+    "description": "Kali Linux is a specialized Linux distribution that is designed for penetration testing, security auditing, and related information security tasks. Originating from the Debian distribution, Kali Linux is equipped with a vast array of tools that are used for ethical hacking purposes. It is an open-source project that provides users with the means to test the security of systems and networks by simulating attacks in a controlled environment.\n\nTools\n-----\n\nWith over 600 pre-installed penetration-testing programs, Kali Linux offers tools for various security-related tasks, such as network analysis, vulnerability scanning, and forensic analysis. Its development is overseen by Offensive Security, a company known for their contributions to the field of information security. Kali Linux is highly customizable, allowing users to tailor the system to their specific needs, and supports a wide range of hardware platforms. It is a powerful resource for professionals in the cybersecurity field, as well as for those who are passionate about learning and practicing ethical hacking techniques.",
+    "links": [
+      {
+        "title": "Kali Linux",
+        "url": "https://www.kali.org/",
+        "type": "article"
+      }
+    ]
   },
   "10qbxX8DCrfyH7tgYexxQ": {
     "title": "LOLBAS",
@@ -1506,8 +1561,19 @@
   },
   "LEgJtu1GZKOtoAXyOGWLE": {
     "title": "Endpoint Security",
-    "description": "Endpoint security refers to the practice of protecting individual devices, or \"endpoints\", that connect to your organization's network from potential cyber threats. These devices include desktop computers, laptops, smartphones, tablets, and servers. With the increase in remote working and the widespread use of personal devices in the workplace, endpoint security has become a critical aspect of a strong cybersecurity strategy.\n\nWhy is Endpoint Security Important?\n-----------------------------------\n\nEndpoint devices serve as potential entry points for cybercriminals to access sensitive data and launch attacks against your organization's network. By securing these devices, you can prevent unauthorized access, reduce the risk of data breaches, and maintain the integrity of your network.\n\nKey Components of Endpoint Security\n-----------------------------------\n\nTo effectively secure your endpoints, consider implementing the following measures:\n\n*   **Antivirus and Malware Protection**: Make sure every endpoint device has up-to-date antivirus and anti-malware software installed. This will help to detect and remove malicious files, preventing them from causing harm to your network.\n    \n*   **Patch Management**: Stay up to date with the latest security patches for your operating systems and third-party applications. Regularly updating your software can help protect against vulnerabilities that cybercriminals may exploit.\n    \n*   **Device Management**: Implement a centralized device management solution that allows administrators to monitor, manage, and secure endpoints. This includes enforcing security policies, tracking device inventory, and remote wiping lost or stolen devices.\n    \n*   **Access Control**: Limit access to sensitive data by implementing a strict access control policy. Only grant necessary permissions to those who require it, and use authentication methods such as multi-factor authentication (MFA) to verify the identity of users.\n    \n*   **Encryption**: Encrypt sensitive data stored on endpoint devices to prevent unauthorized access to the data in case of device theft or loss.\n    \n*   **Firewall and Intrusion Prevention**: Deploy firewall and intrusion prevention systems to block external threats and alert administrators of potential attacks.\n    \n*   **User Training**: Educate users about the importance of endpoint security and the best practices for maintaining it. This includes topics like creating strong passwords, avoiding phishing scams, and following safe browsing practices.\n    \n\nBy taking a comprehensive approach to endpoint security, you can protect your organization's network and sensitive data from the growing threat of cyberattacks.",
-    "links": []
+    "description": "Endpoint security refers to the practice of protecting individual devices, or \"endpoints\", that connect to your organization's network from potential cyber threats. These devices include desktop computers, laptops, smartphones, tablets, and servers. With the increase in remote working and the widespread use of personal devices in the workplace, endpoint security has become a critical aspect of a strong cybersecurity strategy.\n\nWhy is Endpoint Security Important?\n-----------------------------------\n\nEndpoint devices serve as potential entry points for cybercriminals to access sensitive data and launch attacks against your organization's network. By securing these devices, you can prevent unauthorized access, reduce the risk of data breaches, and maintain the integrity of your network.\n\nKey Components of Endpoint Security\n-----------------------------------\n\nTo effectively secure your endpoints, consider implementing the following measures:\n\n*   **Antivirus and Malware Protection**: Make sure every endpoint device has up-to-date antivirus and anti-malware software installed. This will help to detect and remove malicious files, preventing them from causing harm to your network.\n    \n*   **Patch Management**: Stay up to date with the latest security patches for your operating systems and third-party applications. Regularly updating your software can help protect against vulnerabilities that cybercriminals may exploit.\n    \n*   **Device Management**: Implement a centralized device management solution that allows administrators to monitor, manage, and secure endpoints. This includes enforcing security policies, tracking device inventory, and remote wiping lost or stolen devices.\n    \n*   **Access Control**: Limit access to sensitive data by implementing a strict access control policy. Only grant necessary permissions to those who require it, and use authentication methods such as multi-factor authentication (MFA) to verify the identity of users.\n    \n*   **Encryption**: Encrypt sensitive data stored on endpoint devices to prevent unauthorized access to the data in case of device theft or loss.\n    \n*   **Firewall and Intrusion Prevention**: Deploy firewall and intrusion prevention systems to block external threats and alert administrators of potential attacks.\n    \n*   **User Training**: Educate users about the importance of endpoint security and the best practices for maintaining it. This includes topics like creating strong passwords, avoiding phishing scams, and following safe browsing practices.\n    \n\nBy taking a comprehensive approach to endpoint security, you can protect your organization's network and sensitive data from the growing threat of cyberattacks.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Manage endpoint security - Microsoft Learn",
+        "url": "https://learn.microsoft.com/en-us/training/paths/manage-endpoint-security/",
+        "type": "course"
+      },
+      {
+        "title": "Endpoint Security",
+        "url": "https://youtu.be/5d7PCDm_MXs?si=RX3sAdNPLG0tJOaR&t=11",
+        "type": "video"
+      }
+    ]
   },
   "9Z6HPHPj4escSVDWftFEx": {
     "title": "FTP vs SFTP",
@@ -1521,8 +1587,14 @@
   },
   "gNFVtBxSYP5Uw3o3tlJ0M": {
     "title": "IPSEC",
-    "description": "",
-    "links": []
+    "description": "IPSec, which stands for Internet Protocol Security, is a suite of protocols used to secure Internet communications by encrypting and authenticating IP packets. It is commonly utilized in Virtual Private Networks (VPNs) to ensure that data transmitted over public networks is not accessible to unauthorized individuals. IPSec operates by encrypting data at the source and decrypting it at the destination, maintaining the confidentiality and integrity of the data while in transit. Additionally, it provides authentication, ensuring that the data is being sent and received by the intended parties. This protocol suite is versatile as it can be used with both IPv4 and IPv6 networks, making it a fundamental component for secure online communication.",
+    "links": [
+      {
+        "title": "IP Sec VPN Fundamentals",
+        "url": "https://www.youtube.com/watch?v=15amNny_kKI",
+        "type": "video"
+      }
+    ]
   },
   "LLGXONul7JfZGUahnK0AZ": {
     "title": "DNSSEC",
@@ -1582,8 +1654,14 @@
   },
   "QvHWrmMzO8IvNQ234E_wf": {
     "title": "EDR",
-    "description": "",
-    "links": []
+    "description": "Endpoint Detection and Response (EDR) is a cybersecurity technology that provides continuous monitoring and response to threats at the endpoint level. It is designed to detect, investigate, and mitigate suspicious activities on endpoints such as laptops, desktops, and mobile devices. EDR solutions log and analyze behaviors on these devices to identify potential threats, such as malware or ransomware, that have bypassed traditional security measures like antivirus software. This technology equips security teams with the tools to quickly respond to and contain threats, minimizing the risk of a security breach spreading across the network. EDR systems are an essential component of modern cybersecurity strategies, offering advanced protection by utilizing real-time analytics, AI-driven automation, and comprehensive data recording.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "What is Endpoint Detection and Response (EDR)? - IBM",
+        "url": "https://www.youtube.com/watch?v=55GaIolVVqI",
+        "type": "video"
+      }
+    ]
   },
   "iolsTC-63d_1wzKGul-cT": {
     "title": "DLP",
@@ -1734,8 +1812,29 @@
   },
   "7obusm5UtHwWMcMMEB3lt": {
     "title": "Phishing",
-    "description": "",
-    "links": []
+    "description": "The technique where scammers pretend to be trusted organizations like your _bank_, _online retailers_ or a _government office_ in order to trick you into sharing your personal information like bank passcode, credit card number, Paypal password etc.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "How to Recognize and Avoid Phishing Scams",
+        "url": "https://consumer.ftc.gov/articles/how-recognize-and-avoid-phishing-scams",
+        "type": "article"
+      },
+      {
+        "title": "phishing - definition",
+        "url": "https://www.techtarget.com/searchsecurity/definition/phishing",
+        "type": "article"
+      },
+      {
+        "title": "Protect yourself from phishing",
+        "url": "https://support.microsoft.com/en-us/windows/protect-yourself-from-phishing-0c7ea947-ba98-3bd9-7184-430e1f860a44",
+        "type": "video"
+      },
+      {
+        "title": "Phishing attacks are SCARY easy to do!! (let me show you!)",
+        "url": "https://www.youtube.com/watch?v=u9dBGWVwMMA",
+        "type": "video"
+      }
+    ]
   },
   "M65fCl72qlF0VTbGNT6du": {
     "title": "Whishing",
@@ -1764,8 +1863,14 @@
   },
   "Iu0Qtk13RjrhHpSlm0uyh": {
     "title": "Dumpster Diving",
-    "description": "",
-    "links": []
+    "description": "Dumpster Diving in the context of cybersecurity refers to the practice of searching through discarded materials in trash or recycling bins to find confidential information. This technique may seem unsophisticated, but it can be extremely effective in obtaining valuable data such as passwords, account information, network diagrams, or any other sensitive information that has not been properly destroyed.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is Dumpster Diving",
+        "url": "https://powerdmarc.com/dumpster-diving-in-cybersecurity/",
+        "type": "article"
+      }
+    ]
   },
   "o-keJgF9hmifQ_hUD91iN": {
     "title": "Tailgating",
@@ -1784,23 +1889,47 @@
   },
   "UU_inxa8Y2lLP2BRhdLDT": {
     "title": "Reconnaissance",
-    "description": "",
-    "links": []
+    "description": "Reconnaissance is the first phase of a cyberattack, during which attackers gather as much information as possible about a target system, network, or organization. The goal of reconnaissance is to identify potential vulnerabilities, entry points, and other valuable details that can be exploited in subsequent attack phases.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is Cyber Reconnaissance",
+        "url": "https://www.sentinelone.com/cybersecurity-101/threat-intelligence/what-is-cyber-reconnaissance/",
+        "type": "article"
+      }
+    ]
   },
   "ZEgxmvjWPp5NofLFz_FTJ": {
     "title": "Impersonation",
-    "description": "",
-    "links": []
+    "description": "Impersonation in cybersecurity refers to an attack technique where a threat actor pretends to be a legitimate person or entity to deceive individuals, systems, or organizations. This tactic is commonly used in social engineering attacks to gain unauthorized access to sensitive information, resources, or systems.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is an Impersonation Attack?",
+        "url": "https://www.upguard.com/blog/impersonation-attack",
+        "type": "article"
+      }
+    ]
   },
   "dcvuKHq0nHgHLcLwtl4IJ": {
     "title": "Watering Hole Attack",
-    "description": "",
-    "links": []
+    "description": "Watering Hole Attack is a type of cyberattack where the attacker targets a specific group of users by compromising a website or online resource that they are known to frequently visit. The name \"watering hole\" comes from the idea of predators waiting by a water source to attack prey, similar to how attackers wait for their targets to visit a compromised site.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is a watering hole attack?",
+        "url": "https://www.techtarget.com/searchsecurity/definition/watering-hole-attack",
+        "type": "article"
+      }
+    ]
   },
   "cO70zHvHgBAH29khF-hBW": {
     "title": "Drive by Attack",
-    "description": "",
-    "links": []
+    "description": "Drive-by Attack is a type of cyberattack where malicious code is automatically downloaded and executed on a user's system simply by visiting a compromised or malicious website. The user does not need to click on anything or interact with the page; just loading the website is enough to trigger the attack.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is a Drive-By Attack?",
+        "url": "https://www.ericom.com/glossary/what-is-a-drive-by-attack/",
+        "type": "article"
+      }
+    ]
   },
   "0LeDwj_tMaXjQBBOUJ5CL": {
     "title": "Typo Squatting",
@@ -1829,8 +1958,14 @@
   },
   "O1fY2n40yjZtJUEeoItKr": {
     "title": "Evil Twin",
-    "description": "",
-    "links": []
+    "description": "An Evil Twin is a type of wireless network attack where an attacker sets up a rogue Wi-Fi access point that mimics a legitimate Wi-Fi network. The rogue access point has the same SSID (network name) as the legitimate network, making it difficult for users to distinguish between the two. The attacker's goal is to trick users into connecting to the rogue access point, allowing them to intercept sensitive information, inject malware, or launch other types of attacks.\n\nTypes of Evil Twin Attacks\n--------------------------\n\n*   **Captive Portal Attack:** The most common evil twin attack scenario is an attack using Captive Portals, this is a common scenario where an attacker creates a fake captive portal that mimics the legitimate network's login page. The goal is to trick users into entering their credentials, which the attacker can then use to gain access to the network.\n*   **Man-in-the-Middle (MitM) Attack:** In this scenario, the attacker intercepts communication between the user's device and the legitimate network. The attacker can then inject malware, steal sensitive information, or modify data in real-time.\n*   **SSL Stripping Attack:** The attacker downgrades the user's connection from HTTPS to HTTP, allowing them to intercept sensitive information, such as login credentials or credit card numbers.\n*   **Malware Injection:** The attacker injects malware into the user's device, which can then spread to other devices on the network.\n\nHow Evil Twin Attacks are Carried Out\n-------------------------------------\n\n*   **Rogue Access Point:** The attacker sets up a rogue access point with the same SSID as the legitimate network. This can be done using a laptop, a portable Wi-Fi router, or even a compromised device on the network.\n*   **Wi-Fi Scanning:** The attacker uses specialized software to scan for nearby Wi-Fi networks and identify potential targets.\n*   **Network Sniffing:** The attacker uses network sniffing tools to capture and analyze network traffic, allowing them to identify vulnerabilities and intercept sensitive information.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Common tool - airgeddon",
+        "url": "https://www.kali.org/tools/airgeddon/",
+        "type": "website"
+      }
+    ]
   },
   "urtsyYWViEzbqYLoNfQAh": {
     "title": "DNS Poisoning",
@@ -1869,8 +2004,14 @@
   },
   "P-Am25WJV8cFd_KsX7cdj": {
     "title": "SQL Injection",
-    "description": "",
-    "links": []
+    "description": "**SQL Injection** is a type of web application security vulnerability that allows an attacker to inject malicious SQL code into a web application's database, potentially leading to unauthorized data access, modification, or deletion.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "PortSwigger - SQL Injection",
+        "url": "https://portswigger.net/web-security/sql-injection",
+        "type": "article"
+      }
+    ]
   },
   "pK2iRArULlK-B3iSVo4-n": {
     "title": "CSRF",
@@ -2000,7 +2141,13 @@
   "9OastXVfiG1YRMm68ecnn": {
     "title": "Dropbox",
     "description": "Dropbox is a widely used cloud storage service that allows you to store, access, and share files, documents, and media with ease across various devices. Launched in 2007, Dropbox has become one of the most popular cloud storage solutions, catering to both individual users and businesses. The service is available on multiple platforms, including Windows, macOS, Linux, iOS, and Android.\n\nKey features\n------------\n\n*   **File synchronization**: Sync the same files across all your devices and have instant access to updated files from anywhere.\n*   **File sharing**: Easily share files or folders by sending a link or inviting other users to a shared folder.\n*   **Collaboration**: Dropbox allows real-time collaboration on documents with multiple users using integrations with other tools like Google Workspace and Microsoft Office 365.\n*   **Version history**: Retrieve previous versions of a file for up to 30 days, allowing you to recover deleted files or reverse changes.\n\nPlans and pricing\n-----------------\n\nDropbox offers various plans for individual users and businesses with different storage capacities and features:\n\n*   **Basic**: Free plan with 2 GB storage and core features like file synchronization and sharing.\n*   **Plus**: Priced at $9.99/month for 2 TB storage, additional features like Smart Sync, remote device wipe, and a longer (30-day) version history.\n*   **Professional**: Priced at $19.99/month for 3 TB storage and added features like advanced sharing controls and full-text search.\n*   **Business plans**: Starting from $12.50/user/month for a minimum of 3 users, with 5 TB storage per user, priority support, and additional file controls.\n\nSecurity and privacy\n--------------------\n\nDropbox takes security and privacy seriously, with features like:\n\n*   **Encryption**: Files are encrypted both when they are stored on Dropbox servers and during transmission (using SSL/TLS).\n*   **Two-factor authentication**: You can enable two-factor authentication (2FA) to add an extra layer of security to your account.\n*   **Selective sync**: Choose which files and folders to sync on each device, allowing you to keep sensitive data off certain computers or devices.\n*   **GDPR compliance**: Dropbox is compliant with the General Data Protection Regulation (GDPR), which ensures better data protection and privacy for users.\n\nDrawbacks\n---------\n\nThere are a few downsides to using Dropbox as your cloud storage solution:\n\n*   Limited storage on the free plan.\n*   The need for a third-party app to encrypt files before uploading to add an extra layer of security.\n*   Other alternatives offer additional features like built-in document editing.\n\nConclusion\n----------\n\nDropbox is a simple and user-friendly cloud storage service that offers seamless integration with various platforms and efficient file sharing options. While its free plan may be limited compared to other alternatives, the ease of use and robust feature set make it a popular choice for both personal and professional use.",
-    "links": []
+    "links": [
+      {
+        "title": "Dropbox",
+        "url": "https://www.dropbox.com/",
+        "type": "article"
+      }
+    ]
   },
   "4Man3Bd-ySLFlAdxbLOHw": {
     "title": "Box",

public/roadmap-content/data-analyst.json

@@ -235,8 +235,19 @@
   },
   "dke_pySrqYZZ7K3rprnIT": {
     "title": "REPLACE / SUBSTITUTE",
-    "description": "",
-    "links": []
+    "description": "In Microsoft Excel, the REPLACE and SUBSTITUTE functions are powerful tools used for modifying text data within cells. Both functions serve to alter text but are utilized in different scenarios based on the nature of the changes needed.\n\nThe SUBSTITUTE function is used to replace occurrences of a specified substring with a new substring. It allows for replacing text based on matching characters rather than position, making it ideal for altering specific instances of text within a string.\n\nThe REPLACE function is used to replace part of a text string with another text string, based on its position within the original text. It is particularly useful when you need to replace a specific segment of text with new text, starting at a designated position.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Replace Function",
+        "url": "https://support.microsoft.com/en-us/office/replace-function-6acf209b-01b7-4078-b4b8-e0a4ef67d181",
+        "type": "article"
+      },
+      {
+        "title": "Substitute Function",
+        "url": "https://support.microsoft.com/en-us/office/substitute-function-6434944e-a904-4336-a9b0-1e58df3bc332",
+        "type": "article"
+      }
+    ]
   },
   "YReKRRgE_2dWfGGdBQqbf": {
     "title": "UPPER / LOWER / PROPER",

public/roadmap-content/devops.json

@@ -547,6 +547,11 @@
         "url": "https://www.learnshell.org/en/Welcome",
         "type": "article"
       },
+      {
+        "title": "Bash Scripting Tutorial",
+        "url": "https://www.javatpoint.com/bash",
+        "type": "article"
+      },
       {
         "title": "Explore top posts about Bash",
         "url": "https://app.daily.dev/tags/bash?ref=roadmapsh",
@@ -572,7 +577,7 @@
   },
   "Jt8BmtLUH6fHT2pGKoJs3": {
     "title": "Vim / Nano /  Emacs",
-    "description": "Editors are tools that allow you to create or edit files on your file system.\n\nVim\n---\n\nVim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as \"vi\" with most UNIX systems and with Apple OS X.\n\nVim ships with `vimtutor` that is a tutor designed to describe enough of the Vim commands that you will be able to easily use Vim as an all-purpose editor.\n\nVisit the following resources to learn more:",
+    "description": "Editors are tools that allow you to create or edit files on your file system.\n\nVim\n---\n\nVim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as \"vi\" with most UNIX systems and with macOS X.\n\nVim ships with `vimtutor` that is a tutor designed to describe enough of the Vim commands that you will be able to easily use Vim as an all-purpose editor.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Vim",
@@ -3052,7 +3057,7 @@
       }
     ]
   },
-  "datadog@BHny2Emf96suhAlltiEro.md": {
+  "BHny2Emf96suhAlltiEro": {
     "title": "Datadog",
     "description": "",
     "links": []

public/roadmap-content/devrel.json

@@ -82,6 +82,11 @@
     "title": "Importance of DevRel",
     "description": "Developer Relations (DevRel) is crucial for fostering a vibrant and engaged developer community around a product or platform. It involves creating and maintaining strong relationships with developers through activities like community building, technical support, advocacy, and education. Effective DevRel ensures that developers have the resources and support they need to succeed, which in turn drives product adoption, innovation, and loyalty. By bridging the gap between a company's development teams and external developers, DevRel can also provide valuable feedback for product improvements and help in shaping the future direction of the product or platform.\n\nLearn more from the following resources:",
     "links": [
+      {
+        "title": "What is Developer Relations? The Ultimate Guide for DevTool GTM Teams",
+        "url": "https://www.doc-e.ai/post/what-is-developer-relations-the-ultimate-guide-for-devtool-gtm-teams",
+        "type": "article"
+      },
       {
         "title": "DevRel - Why is it important?",
         "url": "https://developers.onelogin.com/blog/devrel",
@@ -103,6 +108,11 @@
         "url": "https://appsembler.com/glossary/developer-advocacy/",
         "type": "article"
       },
+      {
+        "title": "The Developer Advocate Playbook: Your Go-To Guide to Turning Users into Champions 🚀",
+        "url": "https://www.doc-e.ai/post/the-developer-advocate-playbook-your-go-to-guide-to-turning-users-into-champions",
+        "type": "article"
+      },
       {
         "title": "Developer Relations: New Career Path for Developers",
         "url": "https://www.youtube.com/watch?v=iA2SQ4OL4GU",
@@ -312,8 +322,19 @@
   },
   "yJygbi8cnp3oz2EFl2MR0": {
     "title": "Community Engagement",
-    "description": "",
-    "links": []
+    "description": "Building a positive developer experience through community engagement is an ongoing process that requires dedication, empathy, and a genuine commitment to your users. By investing in a welcoming environment, facilitating knowledge sharing, and leveraging AI-powered tools like [Doc-E.ai](http://Doc-E.ai), you can create a thriving community that not only supports your product but also becomes a source of innovation, loyalty, and growth.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "The Ultimate Guide to Developer Engagement and Community Building: Unlocking the Power of Developer-Centric Growth",
+        "url": "https://www.doc-e.ai/post/the-ultimate-guide-to-developer-engagement-and-community-building-unlocking-the-power-of-developer-centric-growth",
+        "type": "article"
+      },
+      {
+        "title": "Fostering a Positive Developer Experience Through Community Engagement: A Blueprint for DevTool Success",
+        "url": "https://www.doc-e.ai/post/fostering-a-positive-developer-experience-through-community-engagement-a-blueprint-for-devtool-success",
+        "type": "article"
+      }
+    ]
   },
   "C2w8R4tNy2lOhhWU9l32s": {
     "title": "Event Participation",
@@ -412,8 +433,19 @@
   },
   "GvmXdWiwITgWzx_f5_ick": {
     "title": "Building a Community",
-    "description": "",
-    "links": []
+    "description": "Online developer communities have become the heart of successful DevTools (Developer Tools) go-to-market (GTM) strategies. They provide a platform for developers to connect, collaborate, learn, and share their expertise, ultimately fostering loyalty, driving product adoption, and fueling innovation.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Building and Nurturing Online Developer Communities: The Ultimate Guide",
+        "url": "https://www.doc-e.ai/post/building-and-nurturing-online-developer-communities-the-ultimate-guide",
+        "type": "article"
+      },
+      {
+        "title": "10 Proven Strategies for Building a Developer Community That Thrives: A Guide to Inclusion & Engagement",
+        "url": "https://dev.to/swati1267/10-proven-strategies-for-building-a-developer-community-that-thrives-a-guide-to-inclusion-engagement-21cm",
+        "type": "article"
+      }
+    ]
   },
   "UKi3waPx2pozvZf2aQ52s": {
     "title": "Identifying Audience",

public/roadmap-content/frontend.json

@@ -753,7 +753,7 @@
       },
       {
         "title": "A Simple Guide to JavaScript Fetch API",
-        "url": "https://www.javascripttutorial.net/javascript-fetch-api/",
+        "url": "https://www.javascripttutorial.net/web-apis/javascript-fetch-api/",
         "type": "article"
       },
       {
@@ -2305,7 +2305,7 @@
   },
   "KJRkrFZIihCUBrOf579EU": {
     "title": "react-router",
-    "description": "Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.\n\nVisit the following resources to learn more:",
+    "description": "There used to be Remix in this list but they announced to merge Remix into react-router after v7.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Official Website",
@@ -2736,11 +2736,6 @@
         "title": "Explore top posts about React",
         "url": "https://app.daily.dev/tags/react?ref=roadmapsh",
         "type": "article"
-      },
-      {
-        "title": "Build a React Native App by Mosh",
-        "url": "https://www.youtube.com/watch?v=0-S5a0eXPoc",
-        "type": "video"
       }
     ]
   },

public/roadmap-content/full-stack.json

@@ -856,7 +856,7 @@
   },
   "YVMyHFSCVF-GgXydq-SFJ": {
     "title": "Checkpoint — Infrastructure",
-    "description": "If you remember, earlier in the roadmap, you manually logged into the AWS console and had to setup the services. Now that you know terraform, go ahead and automate the process of creating the infrastructure for your application using terraform and with that your deployments will be fully automated i.e., you should have:\n\n*   Infrastructure setup using terraform\n*   Provisioning using Ansible\n*   CI/CD using GitHub Actions\n*   Monitoring using Monit\n\nAnd that is it! You have successfully completed the roadmap and are now a full-stack developer. Congratulations! 🎉\n\nWhat's next?\n------------\n\nGo ahead and build something cool! Share your learnings with the community and help others learn as well. If you have any questions, feel free to join our [discord server](https://discord.gg/cJpEt5Qbwa) and ask away!",
+    "description": "If you remember, earlier in the roadmap, you manually logged into the AWS console and had to setup the services. Now that you know terraform, go ahead and automate the process of creating the infrastructure for your application using terraform and with that your deployments will be fully automated i.e., you should have:\n\n*   Infrastructure setup using terraform\n*   Provisioning using Ansible\n*   CI/CD using GitHub Actions\n*   Monitoring using Monit\n\nAnd that is it! You have successfully completed the roadmap and are now a full-stack developer. Congratulations! 🎉\n\nWhat's next?\n------------\n\nGo ahead and build something cool! Share your learnings with the community and help others learn as well. If you have any questions, feel free to join our [discord server](https://roadmap.sh/discord) and ask away!",
     "links": []
   }
 }

public/roadmap-content/game-developer.json

@@ -312,12 +312,39 @@
   "7OffO2mBmfBKqPBTZ9ngI": {
     "title": "Godot",
     "description": "Godot is an open-source, multi-platform game engine that is known for being feature-rich and user-friendly. It is developed by hundreds of contributors from around the world and supports the creation of both 2D and 3D games. Godot uses its own scripting language, GDScript, which is similar to Python, but it also supports C# and visual scripting. It is equipped with a unique scene system and comes with a multitude of tools that can expedite the development process. Godot's design philosophy centers around flexibility, extensibility, and ease of use, providing a handy tool for both beginners and pros in game development.",
-    "links": []
+    "links": [
+      {
+        "title": "Godot in 100 Seconds",
+        "url": "https://m.youtube.com/watch?v=QKgTZWbwD1U",
+        "type": "video"
+      }
+    ]
   },
   "a6H-cZtp3A_fB8jnfMxBR": {
     "title": "Unreal Engine",
     "description": "The **Unreal Engine** is a powerful game development engine created by Epic Games. Used by game developers worldwide, it supports the creation of high-quality games across multiple platforms such as iOS, Android, Windows, Mac, Xbox, and PlayStation. Unreal Engine is renowned for its photo-realistic rendering, dynamic physics and effects, robust multiplayer framework, and its flexible scripting system called Blueprint. The engine is also fully equipped with dedicated tools and functionalities for animation, AI, lighting, cinematography, and post-processing effects. The most recent version, Unreal Engine 5, introduces real-time Global Illumination and makes film-quality real-time graphics achievable.",
-    "links": []
+    "links": [
+      {
+        "title": "Unreal Engine Documentation",
+        "url": "https://dev.epicgames.com/documentation/en-us/unreal-engine/unreal-engine-5-4-documentation",
+        "type": "article"
+      },
+      {
+        "title": "Unreal Engine YouTube Channel",
+        "url": "https://m.youtube.com/channel/UCBobmJyzsJ6Ll7UbfhI4iwQ",
+        "type": "article"
+      },
+      {
+        "title": "Unreal Source Discord",
+        "url": "https://discord.gg/unrealsource",
+        "type": "article"
+      },
+      {
+        "title": "Unreal in 100 Seconds",
+        "url": "https://www.youtube.com/watch?v=DXDe-2BC4cE",
+        "type": "video"
+      }
+    ]
   },
   "CeAUEN233L4IoFSZtIvvl": {
     "title": "Native",
@@ -327,7 +354,13 @@
   "rNeOti8DDyWTMP9FB9kJ_": {
     "title": "Unity 3D",
     "description": "**Unity 3D** is a versatile, cross-platform game engine that supports the development of both 2D and 3D games. This game engine allows users to create a wide variety of games including AR, VR, Mobile, Consoles, and Computers in C#. It provides a host of powerful features and tools, such as scripting, asset bundling, scene building, and simulation, to assist developers in creating interactive content. Unity 3D also boasts a large, active community that regularly contributes tutorials, scripts, assets, and more, making it a robust platform for all levels of game developers.",
-    "links": []
+    "links": [
+      {
+        "title": "Unity in 100 Seconds",
+        "url": "https://www.youtube.com/watch?v=iqlH4okiQqg",
+        "type": "video"
+      }
+    ]
   },
   "4YgbrXLXf5mfaL2tlYkzk": {
     "title": "Programming Languages",
@@ -347,7 +380,13 @@
   "AaRZiItRcn8fYb5R62vfT": {
     "title": "Assembly",
     "description": "**Assembly** is a low-level programming language, often used for direct hardware manipulation, real-time systems, and to write performance-critical code. It provides a strong correspondence between its instructions and the architecture's machine-code instructions, since it directly represents the specific commands of the computer's CPU structure. However, it's closer to machine language (binary code) than to human language, which makes it difficult to read and understand. The syntax varies greatly, which depends upon the CPU architecture for which it's designed, thus Assembly language written for one type of processor can't be used on another. Despite its complexity, time-intensive coding process and machine-specific nature, Assembly language is still utilized for speed optimization and hardware manipulation where high-level languages may not be sufficient.",
-    "links": []
+    "links": [
+      {
+        "title": "Code walkthrough of a game written in x64 assembly",
+        "url": "https://www.youtube.com/watch?v=WUoqlp30M78",
+        "type": "video"
+      }
+    ]
   },
   "ts9pWxUimvFqfNJYCmNNw": {
     "title": "Rust",
@@ -491,12 +530,12 @@
   },
   "aNhyXWW2b7yKTv8y14zk9": {
     "title": "Point",
-    "description": "",
+    "description": "Point lights are one of the most common types of lights used in computer graphics and games. They resemble real-world light bulbs, emitting light uniformly in all directions.\n\nThese lights are available out of the box in most game engines and offer a range of customizable parameters, such as intensity, falloff, color, and more.\n\nPoint lights are the most straightforward type of light, making them ideal for quickly and intuitively lighting up your scenes.",
     "links": []
   },
   "FetbhcK1RDt4izZ6NEUEP": {
     "title": "Spot",
-    "description": "",
+    "description": "Spotlights are a common type of light in computer graphics and games that mimic the behavior of real-world spotlights. They offer a range of parameters to adjust their behavior, such as radius, cone angle, falloff, and intensity.\n\nSpotlights are readily available out of the box in both Unreal and Unity game engines, making them an accessible and powerful tool for adding realistic and dynamic lighting to your scenes.",
     "links": []
   },
   "sC3omOmL2DOyTSvET5cDa": {
@@ -531,8 +570,14 @@
   },
   "UcLGWYu41Ok2NYdLNIY5C": {
     "title": "Frustum",
-    "description": "",
-    "links": []
+    "description": "Frustum culling is a standard practice in computer graphics, used in virtually all games to optimize performance by not rendering objects outside of your field of view. Think of your field of view as a frustum, a truncated pyramid shape. The farthest side is called the far clip plane, and the closest side is the near clip plane. Any object in the game that doesn't fall within this frustum is culled, meaning it’s not rendered, to improve performance. This feature comes built-in with Unreal Engine.\n\nYou can also adjust the near and far clip planes to fine-tune culling. For example, if an object is too close to the camera, it may disappear because it crosses the near clip plane threshold. Similarly, objects that are too far away might be culled by the far clip plane. In some cases, distant objects are LOD-ed (Level of Detail), an optimization technique that reduces the detail of the mesh the farther you are from it, and increases detail as you get closer.\n\nFrustum culling is a fundamental technique that is implemented in virtually all modern games to ensure efficient rendering and smooth gameplay.",
+    "links": [
+      {
+        "title": "Frustum Culling - Game Optimization 101 - Unreal Engine",
+        "url": "https://www.youtube.com/watch?v=Ql56s1erTMI",
+        "type": "video"
+      }
+    ]
   },
   "_1LkU258hzizSIgXipE0b": {
     "title": "Light",
@@ -572,7 +617,13 @@
   "ffa5-YxRhE3zhWg7KXQ4r": {
     "title": "OpenGL",
     "description": "Open GL, also known as Open Graphics Library, is a cross-language, cross-platform API designed to render 2D and 3D vector graphics. As a software interface for graphics hardware, Open GL provides programmers the ability to create complex graphics visuals in detail. It was first developed by Silicon Graphics Inc. in 1992 and quickly became a highly popular tool in the graphics rendering industry. Open GL is widely used in CAD, virtual reality, scientific visualization, information visualization, and flight simulation. It is also used in video games production where real-time rendering is a requirement. The API is designed to work with a broad range of hardware from different manufacturers. Being open-source, Open GL's code capabilities can be extended by anyone in the software community.",
-    "links": []
+    "links": [
+      {
+        "title": "OpenGL Tutorials",
+        "url": "https://youtube.com/playlist?list=PLPaoO-vpZnumdcb4tZc4x5Q-v7CkrQ6M-&si=Mr71bYJMgoDhN9h-",
+        "type": "video"
+      }
+    ]
   },
   "CeydBMwckqKll-2AgOlyd": {
     "title": "WebGL",
@@ -597,7 +648,13 @@
   "oEznLciLxZJaulMlBGgg4": {
     "title": "Metal",
     "description": "Metal is a low-level, high-performance, application programming interface (API) developed by Apple. It debuted in iOS 8 and is dedicated to graphics and data-parallel computations. Essentially, it's designed to exploit modern GPU architecture on Apple devices, optimizing performance and power efficiency. This API applies to various platforms, including iOS, macOS, and tvOS. In contrast to high-level APIs like OpenGL, Metal offers a much lower overhead, allowing more direct control over the GPU. For developers, it means that they can squeeze better performance out of the hardware compared to higher-level APIs. With Metal, developers have a much more detailed view and control on the GPU which results in better graphical output and smoother performance.",
-    "links": []
+    "links": [
+      {
+        "title": "Metal Documentation",
+        "url": "https://developer.apple.com/metal/",
+        "type": "article"
+      }
+    ]
   },
   "yPfhJSTFS7a72UcqF1ROK": {
     "title": "Vulkan",
@@ -707,7 +764,13 @@
   "rGEHTfdNeBAX3_XqC-vvI": {
     "title": "Reinforcements Learning",
     "description": "`Reinforcement Learning` is a type of Machine Learning which is geared towards making decisions. It involves an agent that learns to behave in an environment, by performing certain actions and observing the results or rewards/results it gets. The main principle of reinforcement learning is to reward good behavior and penalize bad behavior. The agent learns from the consequences of its actions, rather than from being taught explicitly. In the context of game development, reinforcement learning could be used to develop an AI (Artificial Intelligence) which can improve its performance in a game based on reward-driven behavior. The AI gradually learns the optimal strategy, known as policy, to achieve the best result.",
-    "links": []
+    "links": [
+      {
+        "title": "AI Learns to Walk (deep reinforcement learning)",
+        "url": "https://m.youtube.com/watch?v=L_4BPjLBF4E",
+        "type": "video"
+      }
+    ]
   },
   "9_OcZ9rzedDFfwEYxAghh": {
     "title": "Learning",

public/roadmap-content/ios.json

@@ -93,6 +93,11 @@
     "title": "Interoperability with Swift",
     "description": "Swift is designed to work seamlessly with Objective-C, allowing developers to integrate and use both languages within the same project. This interoperability enables:\n\n**Gradual Migration:** Developers can incrementally migrate their codebase from Objective-C to Swift without needing a complete rewrite.\n\n**Mixed-Language Projects:** Swift and Objective-C files can coexist, and developers can call Objective-C code from Swift and vice versa.\n\n**Access to Existing Libraries:** Swift code can leverage existing Objective-C libraries and frameworks, ensuring continued use of valuable resources and tools.\n\n**Bridging Header:** A bridging header file allows Swift to interface with Objective-C code, facilitating communication between the two languages.\n\n**Compatibility:** Swift supports dynamic libraries, ensuring compatibility with existing Objective-C runtime and APIs.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "Swift and Objective-C Interoperability",
+        "url": "https://developer.apple.com/videos/play/wwdc2015/401/",
+        "type": "article"
+      },
       {
         "title": "Explore top posts about Swift",
         "url": "https://app.daily.dev/tags/swift?ref=roadmapsh",
@@ -343,7 +348,7 @@
   },
   "tqbg8mBJfjuXacdMlIB_L": {
     "title": "Memory Management",
-    "description": "Memory management involves allocating memory for objects and freeing it after use. Manual Retain-Release (MRR) requires developers to explicitly manage memory using reference counting, provided by the Foundation class NSObject. Automatic Reference Counting (ARC) automates this process by inserting memory management method calls during compilation, though it still uses reference counting. In contrast, Garbage Collection (GC) automatically tracks object ownership and releases unreferenced objects, using a different mechanism than MRR and ARC, and is supported only in the Mac OS X runtime environment, not on iOS.\n\n> Beginning May 1, 2015, new Mac apps and app updates submitted to the Mac App Store may no longer use garbage collection, which was deprecated in OS X Mountain Lion. Instead, migrate your apps to Automatic Reference Counting, using the migration assistant in Xcode to help with this transition. Apps may continue to use retain/release for manual memory management. For more information, read the [Transitioning to ARC Release Notes](https://developer.apple.com/library/ios/releasenotes/ObjectiveC/RN-TransitioningToARC/Introduction/Introduction.html).\n\nVisit the following resources to learn more:",
+    "description": "Memory management involves allocating memory for objects and freeing it after use. Manual Retain-Release (MRR) requires developers to explicitly manage memory using reference counting, provided by the Foundation class NSObject. Automatic Reference Counting (ARC) automates this process by inserting memory management method calls during compilation, though it still uses reference counting. In contrast, Garbage Collection (GC) automatically tracks object ownership and releases unreferenced objects, using a different mechanism than MRR and ARC, and is supported only in the macOS X runtime environment, not on iOS.\n\n> Beginning May 1, 2015, new Mac apps and app updates submitted to the Mac App Store may no longer use garbage collection, which was deprecated in OS X Mountain Lion. Instead, migrate your apps to Automatic Reference Counting, using the migration assistant in Xcode to help with this transition. Apps may continue to use retain/release for manual memory management. For more information, read the [Transitioning to ARC Release Notes](https://developer.apple.com/library/ios/releasenotes/ObjectiveC/RN-TransitioningToARC/Introduction/Introduction.html).\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "WWDC2021: ARC in Swift: Basics and beyond",
@@ -426,8 +431,29 @@
   },
   "MrdIb9F-wSEbUz7KRnH3t": {
     "title": "Pick a Language",
-    "description": "",
-    "links": []
+    "description": "Apple used to use Objective C for the development of apps for iOS and macOS, but since 2014 [Swift](https://www.swift.org/documentation/) has become the primary language for app development. After more than 10 years of growing strong and mature, now it is worth starting your iOS Developer journey by learning the language.\n\nSwift is a multi-paradigm language that has object-oriented, functional, and protocol-oriented flavors to it. For someone with a coding background in C++ and Java, the strange concepts would be Optionals, Closures, and the very fact you can skip writing semicolons when you end your statements.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Swift Programming Tutorial | FULL COURSE | Absolute Beginner",
+        "url": "https://www.youtube.com/watch?v=CwA1VWP0Ldw",
+        "type": "course"
+      },
+      {
+        "title": "Swift Programming For Beginners - No Programming Experience",
+        "url": "https://www.udemy.com/course/swift-programming-for-beginners-no-experience/",
+        "type": "course"
+      },
+      {
+        "title": "Swift Programming Tutorial – Full Course for Beginners",
+        "url": "https://www.youtube.com/watch?v=8Xg7E9shq0U",
+        "type": "course"
+      },
+      {
+        "title": "Learn Swift Fast (2020) - Full Course For Beginners",
+        "url": "https://www.youtube.com/watch?v=FcsY1YPBwzQ",
+        "type": "course"
+      }
+    ]
   },
   "sGnDm2xuJxqfU3pwmlY7H": {
     "title": "Version Control",

public/roadmap-content/javascript.json

@@ -423,7 +423,7 @@
   },
   "1RcwBHU3jzx0YxxUGZic4": {
     "title": "string",
-    "description": "String is a primitive type that holds a sequence of characters. String in Javascript is written within a pair of single quotation marks '' or double quotation marks \"\". Both quotes can be used to contain a string but only if the starting quote is the same as the end quote.\n\nVisit the following resources to learn more:",
+    "description": "String is a primitive type that holds a sequence of characters. String in Javascript is written within a pair of single quotation marks `''` or double quotation marks `\"\"`. Both quotes can be used to contain a string but only if the starting quote is the same as the end quote.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "String",
@@ -450,13 +450,35 @@
   },
   "6lUF0neW1piiP1RsaVxEX": {
     "title": "bigint",
-    "description": "",
-    "links": []
+    "description": "BigInt is a built-in JavaScript object that allows you to work with integers of arbitrary size.\n\nUnlike the Number type, which can accurately represent integers only within the range of ±2^53 , BigInt can handle integers far beyond this limit. This makes it particularly useful for applications requiring high precision with very large numbers, such as cryptography or scientific computations.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "BigInt",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt",
+        "type": "article"
+      },
+      {
+        "title": "The Whys and Hows Of BigInt",
+        "url": "https://youtu.be/6I650PQfhMg?si=XyVGrmp4KWLRcHVj",
+        "type": "video"
+      }
+    ]
   },
   "b1HvkoWA2t4kt8mS6FySm": {
     "title": "boolean",
-    "description": "",
-    "links": []
+    "description": "In JavaScript, a `boolean` is a simple data type that can hold one of two values: `true` or `false`. These values are used to represent logical states and are essential in controlling the flow of a program.\n\nBooleans are commonly used in conditional statements (`if`, `else`, `while`, etc.) to determine whether a block of code should execute.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "JavaScript Boolean",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean",
+        "type": "article"
+      },
+      {
+        "title": "Booleans in JavaScript",
+        "url": "https://www.youtube.com/watch?v=B4ZCFdrBmbE",
+        "type": "video"
+      }
+    ]
   },
   "CxyNyFMuTLS3owtRMgClD": {
     "title": "null",
@@ -935,8 +957,14 @@
   },
   "ATma3bLKdmWY_WTsPIKxh": {
     "title": "Object.is",
-    "description": "",
-    "links": []
+    "description": "The [Object.is](http://Object.is)() static method determines whether two values are the same value.\n\n    console.log(Object.is('1', 1));\n    // Expected output: false\n    \n    console.log(Object.is(NaN, NaN));\n    // Expected output: true\n    \n    console.log(Object.is(-0, 0));\n    // Expected output: false\n    \n    const obj = {};\n    console.log(Object.is(obj, {}));\n    // Expected output: false\n    \n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Object.is() - MDN",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is",
+        "type": "article"
+      }
+    ]
   },
   "PLallt_T33W6bUEn0Hc3W": {
     "title": "isLooselyEqual",
@@ -1431,11 +1459,6 @@
         "title": "Explore top posts about JavaScript",
         "url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
         "type": "article"
-      },
-      {
-        "title": "JavaScript Functions - Programming with Mosh",
-        "url": "https://youtu.be/N8ap4k_1QEQ",
-        "type": "video"
       }
     ]
   },
@@ -1914,11 +1937,6 @@
     "title": "Callback Hell",
     "description": "The callback hell is when we try to write asynchronous JavaScript in a way where execution happens visually from top to bottom, creating a code that has a pyramid shape with many }) at the end.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "Callback Hell",
-        "url": "http://callbackhell.com/",
-        "type": "article"
-      },
       {
         "title": "Callbacks in Callbacks - Pyramid of Doom",
         "url": "https://javascript.info/callbacks#pyramid-of-doom",
@@ -2179,11 +2197,22 @@
   },
   "bhuGtcyqPFKu-900aESYz": {
     "title": "DOM APIs",
-    "description": "",
-    "links": []
+    "description": "With HTML DOM, JavaScript can access and change all the elements of an HTML document such as its attributes, CSS styles, remove elements, add and create new elements on the page. Web API means application programming inteface for the web. All browsers have a set og built-in Web APIs to support complex operations, and to help accessing data. Like Geolocation API, Web Storage, Web History and others.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "DOM- MDN Docs",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model",
+        "type": "article"
+      },
+      {
+        "title": "Web APIs- W3schools",
+        "url": "https://www.w3schools.com/js/js_api_intro.asp",
+        "type": "article"
+      }
+    ]
   },
   "KKyX8N4lTgN0w-Khm6Ztq": {
-    "title": "Gabage Collection",
+    "title": "Garbage Collection",
     "description": "Memory management in JavaScript is performed automatically and invisibly to us. We create primitives, objects, functions… All that takes memory. The main concept of memory management in JavaScript is reachability.\n\nVisit the following resources to learn more:",
     "links": [
       {

public/roadmap-content/nodejs.json

@@ -22,7 +22,7 @@
   },
   "Mp056kNnwsRWeEXuhGPy-": {
     "title": "What is Node.js?",
-    "description": "Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project! Node.js runs the V8 JavaScript engine, Google Chrome's core, outside the browser. This allows Node.js to be very performant. A Node.js app runs in a single process, without creating a new thread for every request. Node.js provides a set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and generally, libraries in Node.js are written using non-blocking paradigms, making blocking behavior the exception rather than the norm.\n\nVisit the following resources to learn more:",
+    "description": "Node.js is an open-source and cross-platform JavaScript runtime environment. It is a popular tool for almost any kind of project! Node.js runs the V8 JavaScript engine, Google Chrome's core, outside the browser. This allows Node.js to be very performant. A Node.js app runs in a single process, without creating a new thread for every request.\n\nNode.js provides a set of asynchronous I/O primitives in its standard library that prevent JavaScript code from blocking and generally, libraries in Node.js are written using non-blocking paradigms, making blocking behavior the exception rather than the norm.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Official Website",
@@ -30,13 +30,13 @@
         "type": "article"
       },
       {
-        "title": "Node.JS Introduction",
-        "url": "https://www.w3schools.com/nodejs/nodejs_intro.asp",
+        "title": "Node.js - Getting Started",
+        "url": "https://nodejs.org/en/learn/getting-started/introduction-to-nodejs",
         "type": "article"
       },
       {
-        "title": "Official Website",
-        "url": "https://nodejs.org/en/learn/getting-started/introduction-to-nodejs",
+        "title": "Node.js - Introduction",
+        "url": "https://www.w3schools.com/nodejs/nodejs_intro.asp",
         "type": "article"
       },
       {
@@ -84,7 +84,7 @@
   },
   "Vrcv5px-3fqmyJnQv3WBK": {
     "title": "History of Node.js",
-    "description": "Node.js was written initially by Ryan Dahl in 2009, about thirteen years after the introduction of the first server-side JavaScript environment, Netscape's LiveWire Pro Web. The initial release supported only Linux and Mac OS X. Its development and maintenance were led by Dahl and later sponsored by Joyent.\n\nVisit the following resources to learn more:",
+    "description": "Node.js was written initially by Ryan Dahl in 2009, about thirteen years after the introduction of the first server-side JavaScript environment, Netscape's LiveWire Pro Web. The initial release supported only Linux and macOS X. Its development and maintenance were led by Dahl and later sponsored by Joyent.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Rising Stack - History of Node.js on a Timeline",
@@ -319,8 +319,19 @@
   },
   "oYeux7PbveYaVwXRzAg5x": {
     "title": "Local Installation",
-    "description": "",
-    "links": []
+    "description": "Locally installed packages are available only to the project where the packages are installed, while the globally installed packages can be used any where without installing them into a project. Another use case of the global packages is when using CLI tools.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Downloading and installing packages locally",
+        "url": "https://docs.npmjs.com/downloading-and-installing-packages-locally",
+        "type": "article"
+      },
+      {
+        "title": "Downloading and installing packages globally",
+        "url": "https://docs.npmjs.com/downloading-and-installing-packages-globally",
+        "type": "article"
+      }
+    ]
   },
   "bYBz12FUiJ1qLgdQSGyGK": {
     "title": "Updating Packages",
@@ -388,8 +399,24 @@
   },
   "dOlzIXBfAPmbY542lNOe6": {
     "title": "Semantic Versioning",
-    "description": "",
-    "links": []
+    "description": "Semantic Versioning is a standard for versioning software that's widely adopted in the npm ecosystem. It provides a clear and consistent way to communicate changes in a software package to users.\n\nVersion Format\n--------------\n\nA semantic version number consists of three parts separated by dots:\n\n*   MAJOR: Incremented when there are incompatible API changes.\n*   MINOR: Incremented when new functionality is added in a backwards-compatible manner.\n*   PATCH: Incremented when bug fixes are made without affecting the API.\n\n### Example: 1.2.3\n\n*   1 is the major version.\n*   2 is the minor version.\n*   3 is the patch version.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Semver.org",
+        "url": "https://semver.org/",
+        "type": "article"
+      },
+      {
+        "title": "Medium - Understanding Semantic Versioning",
+        "url": "https://medium.com/codex/understanding-semantic-versioning-a-guide-for-developers-dad5f2b70583",
+        "type": "article"
+      },
+      {
+        "title": "Devopedia - Semver",
+        "url": "https://devopedia.org/semantic-versioning",
+        "type": "article"
+      }
+    ]
   },
   "t_kfKdNSKVBPYQ9zF9VqQ": {
     "title": "Error Handling",
@@ -514,9 +541,14 @@
     "description": "Node.js includes a command-line debugging utility. The Node.js debugger client is not a full-featured debugger, but simple stepping and inspection are possible. To use it, start Node.js with the inspect argument followed by the path to the script to debug.\n\nExample - `$ node inspect myscript.js`\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Official Website",
+        "title": "Official Docs",
         "url": "https://nodejs.org/api/debugger.html",
         "type": "article"
+      },
+      {
+        "title": "Freecodecamp.org - Debugging",
+        "url": "https://www.freecodecamp.org/news/how-to-debug-node-js-applications/",
+        "type": "article"
       }
     ]
   },
@@ -801,7 +833,7 @@
   },
   "b1r1X3XCoPSayQjDBcy54": {
     "title": "fs module",
-    "description": "File System or fs module is a built in module in Node that enables interacting with the file system using JavaScript. All file system operations have synchronous, callback, and promise-based forms, and are accessible using both CommonJS syntax and ES6 Modules.\n\nVisit the following resources to learn more:",
+    "description": "File System or `fs` module is a built in module in Node that enables interacting with the file system using JavaScript. All file system operations have synchronous, callback, and promise-based forms, and are accessible using both CommonJS syntax and ES6 Modules.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Official Documentation",
@@ -1142,7 +1174,7 @@
   },
   "1vq_KcYR_pkfp1MtXaL75": {
     "title": "Express.js",
-    "description": "Express is a node js web application framework that provides broad features for building web and mobile applications. It is used to build a single page, multipage, and hybrid web application.\n\nVisit the following resources to learn more:",
+    "description": "Express is a node js web application framework that provides broad features for building web and mobile applications. It is used to build a single page, multi-page, and hybrid web application.\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Express.js Official Website",
@@ -1244,12 +1276,12 @@
     "description": "You can make API calls using the `http` module in Node.js as well. Here are the two methods that you can use:\n\n*   `http.get()` - Make http GET requests.\n*   `http.request()` - Similar to `http.get()` but enables sending other types of http requests (GET requests inclusive).\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Node.js http.get() documentaion",
+        "title": "Node.js http.get() documentation",
         "url": "https://nodejs.org/docs/latest-v16.x/api/http.html#httpgeturl-options-callback",
         "type": "article"
       },
       {
-        "title": "Node http.request() documentaion",
+        "title": "Node http.request() documentation",
         "url": "https://nodejs.org/docs/latest-v16.x/api/http.html#httprequesturl-options-callback",
         "type": "article"
       },
@@ -1265,7 +1297,7 @@
     "description": "Axios is a promise-based HTTP Client for node.js and the browser. Used for making requests to web servers. On the server-side it uses the native node.js http module, while on the client (browser) it uses XMLHttpRequests.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Axios Official Documentations",
+        "title": "Axios Official Documentation",
         "url": "https://axios-http.com/docs/intro",
         "type": "article"
       },
@@ -1283,8 +1315,19 @@
   },
   "-_2letLUta5Ymc5eEOKhn": {
     "title": "ky",
-    "description": "",
-    "links": []
+    "description": "Ky is a tiny and elegant HTTP client based on the browser Fetch API. Ky targets modern browsers and Deno.For older browsers, you will need to transpile and use a fetch polyfill.For Node.js, check out Got.. 1 KB (minified & gzipped), one file, and no dependencies.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Ky Official Docs",
+        "url": "https://github.com/sindresorhus/ky",
+        "type": "opensource"
+      },
+      {
+        "title": "npmjs.org",
+        "url": "https://www.npmjs.com/package/ky/v/0.9.0",
+        "type": "article"
+      }
+    ]
   },
   "B_3rTGQxJneMREXoi2gQn": {
     "title": "fetch",
@@ -1382,8 +1425,24 @@
   },
   "812bVEzxwTsYzLG_PmLqN": {
     "title": "--watch",
-    "description": "",
-    "links": []
+    "description": "The `--watch` flag in Node.js is a powerful feature introduced in Node.js version 19 that enables automatic reloading of your Node.js application whenever changes are detected in the specified files.\n\nHow it works\n------------\n\n*   You run your Node.js script with the `--watch` flag: `$ node --watch your_script.js`\n*   Node.js starts watching the specified file (or directory) for changes.\n*   Whenever a change is detected, Node.js automatically restarts the script\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Official Docs",
+        "url": "https://nodejs.org/api/cli.html",
+        "type": "article"
+      },
+      {
+        "title": "Node.js API Docs",
+        "url": "https://nodejs.org/api/cli.html#--watch",
+        "type": "article"
+      },
+      {
+        "title": "Medium - Watch Mode",
+        "url": "https://medium.com/@khaled.smq/built-in-nodejs-watch-mode-52ffadaec8a8",
+        "type": "article"
+      }
+    ]
   },
   "2Ym2jMvov0lZ79aJFaw29": {
     "title": "nodemon",
@@ -1408,20 +1467,20 @@
   },
   "L-_N7OxxuHCXsdWYBgZGu": {
     "title": "ejs",
-    "description": "EJS is a templating language or engine that allows you to generate HTML markup with pure JavaScript. And this is what makes it perfect for Nodejs applications. In simple words, the EJS template engine helps to easily embed JavaScript into your HTML template.\n\nVisit the following resources to learn more:",
+    "description": "EJS is a template language or engine that allows you to generate HTML markup with pure JavaScript. And this is what makes it perfect for Nodejs applications. In simple words, the EJS template engine helps to easily embed JavaScript into your HTML template.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Ejs website",
+        "title": "EJS Website",
         "url": "https://ejs.co/",
         "type": "article"
       },
       {
-        "title": "Ejs Official Documentations",
+        "title": "EJS Official Documentation",
         "url": "https://ejs.co/#docs",
         "type": "article"
       },
       {
-        "title": "Ejs Official Package",
+        "title": "EJS Official Package",
         "url": "https://www.npmjs.com/package/ejs",
         "type": "article"
       },
@@ -1481,8 +1540,14 @@
   },
   "5l-lZ8gwVLqqAF_n99vIO": {
     "title": "Working with Databases",
-    "description": "A database is an organized collection of structured information, or data, typically stored electronically in a computer system. A database is usually controlled by a database management system (DBMS).",
-    "links": []
+    "description": "A database is an organized collection of structured information, or data, typically stored electronically in a computer system. A database is usually controlled by a database management system (DBMS).\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Wikipedia - What is Database?",
+        "url": "https://en.wikipedia.org/wiki/Database",
+        "type": "article"
+      }
+    ]
   },
   "NDf-o-WECK02mVnZ8IFxy": {
     "title": "Mongoose",
@@ -1549,8 +1614,29 @@
   },
   "JXQF9H4_N0rM7ZDKcCZNn": {
     "title": "Drizzle",
-    "description": "",
-    "links": []
+    "description": "Drizzle lets you build your project the way you want, without interfering with your project or structure. Using Drizzle you can define and manage database schemas in TypeScript, access your data in a SQL-like or relational way, and take advantage of opt-in tools to make your developer experience amazing.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Drizzle Website",
+        "url": "https://orm.drizzle.team/",
+        "type": "article"
+      },
+      {
+        "title": "Drizzle Documentation",
+        "url": "https://orm.drizzle.team/docs/overview",
+        "type": "article"
+      },
+      {
+        "title": "Drizzle Github",
+        "url": "https://github.com/drizzle-team/drizzle-orm",
+        "type": "article"
+      },
+      {
+        "title": "Getting Started with Drizzle",
+        "url": "https://dev.to/franciscomendes10866/getting-started-with-drizzle-orm-a-beginners-tutorial-4782",
+        "type": "article"
+      }
+    ]
   },
   "rk5FtAPDi1TpvWd0yBbtl": {
     "title": "TypeORM",
@@ -1634,17 +1720,55 @@
   "90NIFfbWjTbyKZKwyJlfI": {
     "title": "Testing",
     "description": "Software testing is the process of verifying that what we create is doing exactly what we expect it to do. The tests are created to prevent bugs and improve code quality.\n\nThe two most common testing approaches are unit testing and end-to-end testing. In the first, we examine small snippets of code, in the second, we test an entire user flow.\n\nVisit the following resources to learn more:",
-    "links": []
+    "links": [
+      {
+        "title": "Wikipedia - Software Testing",
+        "url": "https://en.wikipedia.org/wiki/Software_testing",
+        "type": "article"
+      },
+      {
+        "title": "Vitest",
+        "url": "https://vitest.dev/",
+        "type": "article"
+      },
+      {
+        "title": "Jest",
+        "url": "https://jest.io",
+        "type": "article"
+      }
+    ]
   },
   "qjToBaMenW3SDtEfoCbQ6": {
     "title": "Vitest",
-    "description": "",
-    "links": []
+    "description": "Vitest is a Vite-native unit testing framework that's Jest-compatible. Vitest is a powerful testing library built on top of Vite that is growing in popularity. You can use Vitest for a range of testing needs, such as unit, integration, end-to-end (E2E), snapshot, and performance testing of functions and components. ESM, TypeScript, JSX. Out-of-box ESM, TypeScript and JSX support powered by esbuild. Vitest is free and open source.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Official Website",
+        "url": "https://vitest.dev/",
+        "type": "article"
+      },
+      {
+        "title": "Vitest Documentation",
+        "url": "https://vitest.dev/guide/",
+        "type": "article"
+      }
+    ]
   },
   "oSLpy31XEcA2nRq9ks_LJ": {
     "title": "node:test",
-    "description": "",
-    "links": []
+    "description": "`node:test` is a built-in module in Node.js that provides a simple, asynchronous test runner. It's designed to make writing tests as straightforward as writing any other code.\n\nKey Features\n------------\n\n*   Simplicity: Easy to use and understand.\n*   Asynchronous Support: Handles asynchronous code gracefully.\n*   Subtests: Allows for organizing tests into hierarchical structures.\n*   Hooks: Provides beforeEach and afterEach hooks for setup and teardown.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Test Runner API Docs",
+        "url": "https://nodejs.org/api/test.html",
+        "type": "article"
+      },
+      {
+        "title": "Node.js Test Runner",
+        "url": "https://nodejs.org/en/learn/test-runner/using-test-runner",
+        "type": "article"
+      }
+    ]
   },
   "5xrbKv2stKPJRv7Vzf9nM": {
     "title": "Jest",
@@ -1669,8 +1793,24 @@
   },
   "Ix-g9pgJjEI04bSfROvlq": {
     "title": "Playwright",
-    "description": "",
-    "links": []
+    "description": "Playwright is an open-source automation library developed by Microsoft for testing and automating web applications. 1 It offers a unified API to control Chromium, Firefox, and WebKit browsers, making it a versatile choice for cross-browser testing.\n\nPlaywright provides a high-level API to interact with web pages. You can write scripts to simulate user actions, such as clicking buttons, filling forms, and navigating through different pages. Playwright handles the underlying browser interactions, making it easy to write and maintain tests.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Playwright Website",
+        "url": "https://playwright.dev/",
+        "type": "article"
+      },
+      {
+        "title": "Playwright Docs",
+        "url": "https://playwright.dev/docs/getting-started-vscode",
+        "type": "article"
+      },
+      {
+        "title": "Getting Started with Playwright",
+        "url": "https://learn.microsoft.com/en-us/shows/getting-started-with-end-to-end-testing-with-playwright/",
+        "type": "article"
+      }
+    ]
   },
   "3Fh3-V1kCZtlUTvEoloIO": {
     "title": "Cypress",
@@ -1856,7 +1996,18 @@
   "ZLNUuDKhJ03Kw7xMVc7IR": {
     "title": "Debugging",
     "description": "Debugging is a concept to identify and remove errors from software applications. Here, we will learn about the technique to debug a Node.js application.\n\nWhy not to use console.log() for debugging?\n-------------------------------------------\n\nUsing `console.log` to debug the code generally dives into an infinite loop of “stopping the app and adding a console.log, and start the app again” operations. Besides slowing down the development of the app, it also makes the writing dirty and creates unnecessary code. Finally, trying to log out variables alongside with the noise of other potential logging operations, may make the process of debugging difficult when attempting to find the values you are debugging.\n\nVisit the following resources to learn more:",
-    "links": []
+    "links": [
+      {
+        "title": "Wikipedia - What is Debugging?",
+        "url": "https://en.wikipedia.org/wiki/Debugging",
+        "type": "article"
+      },
+      {
+        "title": "Node.js - Getting Started",
+        "url": "https://nodejs.org/en/learn/getting-started/debugging",
+        "type": "article"
+      }
+    ]
   },
   "oU9I7KBZoTSXXFmYscEIq": {
     "title": "Memory Leaks",
@@ -1900,7 +2051,7 @@
     "description": "As much fun as it is to intercept your container requests with inspect and step through your code, you won’t have this option in production. This is why it makes a lot of sense to try and debug your application locally in the same way as you would in production.\n\nIn production, one of your tools would be to login to your remote server to view the console logs, just as you would on local. But this can be a tedious approach. Luckily, there are tools out there that perform what is called log aggregation, such as Stackify.\n\nThese tools send your logs from your running application into a single location. They often come with high-powered search and query utilities so that you can easily parse your logs and visualize them.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Debugging using APM ",
+        "title": "Debugging using APM",
         "url": "https://stackify.com/node-js-debugging-tips/",
         "type": "article"
       },

public/roadmap-content/postgresql-dba.json

@@ -2297,6 +2297,11 @@
         "title": "Awk command in Linux/Unix",
         "url": "https://www.digitalocean.com/community/tutorials/awk-command-linux-unix",
         "type": "article"
+      },
+      {
+        "title": "Tutorial - AWK in 300 Seconds",
+        "url": "https://www.youtube.com/watch?v=15DvGiWVNj0",
+        "type": "video"
       }
     ]
   },
@@ -2313,6 +2318,11 @@
         "title": "Use the Grep Command",
         "url": "https://docs.rackspace.com/docs/use-the-linux-grep-command",
         "type": "article"
+      },
+      {
+        "title": "Tutorial - grep: A Practical Guide",
+        "url": "https://www.youtube.com/watch?v=crFZOrqlqao",
+        "type": "video"
       }
     ]
   },

public/roadmap-content/python.json

@@ -58,11 +58,6 @@
         "title": "Python for Beginners: Data Types",
         "url": "https://thenewstack.io/python-for-beginners-data-types/",
         "type": "article"
-      },
-      {
-        "title": "Python Variables - Python Tutorial for Beginners with Examples | Mosh",
-        "url": "https://www.youtube.com/watch?v=cQT33yu9pY8",
-        "type": "video"
       }
     ]
   },
@@ -194,8 +189,24 @@
   },
   "soZFqivM3YBuljeX6PoaX": {
     "title": "Sets",
-    "description": "",
-    "links": []
+    "description": "Python Set is an unordered collection of data types that is iterable, mutable, and has no duplicate elements. The order of elements in a set is undefined though it may consist of various elements. The major advantage of using a set, as opposed to a list, is that it has a highly optimized method for checking whether a specific element is contained in the set.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "An W3Schools - Python Sets",
+        "url": "https://www.w3schools.com/python/python_sets.asp",
+        "type": "article"
+      },
+      {
+        "title": "An In-Depth Guide to Working with Python Sets",
+        "url": "https://learnpython.com/blog/python-sets/",
+        "type": "article"
+      },
+      {
+        "title": "Python Sets tutorial for Beginners",
+        "url": "https://www.youtube.com/watch?v=t9j8lCUGZXo",
+        "type": "video"
+      }
+    ]
   },
   "bc9CL_HMT-R6nXO1eR-gP": {
     "title": "Dictionaries",
@@ -792,8 +803,19 @@
   },
   "KAXF2kUAOvtBZhY8G9rkI": {
     "title": "Context Manager",
-    "description": "",
-    "links": []
+    "description": "Context managers are a contruct in Python that allows you to set up context for a block of code, and then automatically clean up or relase resources when the block is exited. It is most commonly used with the `with` statement.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Context managers in Python",
+        "url": "https://www.freecodecamp.org/news/context-managers-in-python/",
+        "type": "article"
+      },
+      {
+        "title": "Context managers",
+        "url": "https://book.pythontips.com/en/latest/context_managers.html",
+        "type": "article"
+      }
+    ]
   },
   "0-ShORjGnQlAdcwjtxdEB": {
     "title": "Learn a Framework",

public/roadmap-content/react.json

@@ -183,6 +183,11 @@
         "title": "Different techniques for conditional rendering in React",
         "url": "https://www.robinwieruch.de/conditional-rendering-react/",
         "type": "article"
+      },
+      {
+        "title": "Conditional rendering in React",
+        "url": "https://www.youtube.com/watch?v=4oCVDkb_EIs",
+        "type": "video"
       }
     ]
   },
@@ -428,6 +433,11 @@
         "title": "Explore top posts about React Hooks",
         "url": "https://app.daily.dev/tags/react-hooks?ref=roadmapsh",
         "type": "article"
+      },
+      {
+        "title": "Custom Hooks in React",
+        "url": "https://www.youtube.com/watch?v=I2Bgi0Qcdvc",
+        "type": "video"
       }
     ]
   },
@@ -783,19 +793,24 @@
     "description": "Context provides a way to pass data through the component tree without having to pass props down manually at every level.\n\nIn a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.\n\nVisit the following resources to learn more:",
     "links": [
       {
-        "title": "Basic useContext Guide",
-        "url": "https://www.w3schools.com/react/react_usecontext.asp",
+        "title": "Passing Data Deeply with Context",
+        "url": "https://react.dev/learn/passing-data-deeply-with-context",
         "type": "article"
       },
       {
-        "title": "Passing Data Deeply with Context",
-        "url": "https://react.dev/learn/passing-data-deeply-with-context",
+        "title": "Basic useContext Guide",
+        "url": "https://www.w3schools.com/react/react_usecontext.asp",
         "type": "article"
       },
       {
         "title": "State with useContext and useState/useReducer",
         "url": "https://www.robinwieruch.de/react-state-usereducer-usestate-usecontext/",
         "type": "article"
+      },
+      {
+        "title": "React Context API Crash Course",
+        "url": "https://www.youtube.com/watch?v=t9WmZFnE6Hg",
+        "type": "video"
       }
     ]
   },
@@ -921,7 +936,7 @@
   },
   "thfnymb_UIiKxakKfiua5": {
     "title": "Component / Libraries",
-    "description": "",
+    "description": "React component libraries are collections of pre-built, reusable components that can be used to speed up the development process. They can be styled using CSS in various ways, including traditional CSS files, CSS modules, and CSS-in-JS solutions like styled-components.",
     "links": []
   },
   "akVNUPOqaTXaSHoQFlkP_": {
@@ -1093,8 +1108,29 @@
   },
   "kiCTo0U6VgNON8rv_Ktlj": {
     "title": "Ark UI",
-    "description": "",
-    "links": []
+    "description": "It is a modern and versatile user interface framework designed to streamline the development of responsive and accessible web applications. It provides a `comprehensive set` of components and tools that simplify the process of building user interfaces, allowing developers to focus on functionality and design. With a strong emphasis on flexibility and ease of use, Ark UI enables rapid prototyping and `scalable solutions`, ensuring a consistent and polished user experience across various devices and platforms. Its modular architecture and extensive documentation make it an excellent choice for developers looking to enhance productivity and maintain high standards in their UI design.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Official Website",
+        "url": "https://ark-ui.com/",
+        "type": "article"
+      },
+      {
+        "title": "Official Website",
+        "url": "https://ark-ui.com/react/docs/overview/introduction",
+        "type": "article"
+      },
+      {
+        "title": "What is ARK UI?",
+        "url": "https://shaxadd.medium.com/enhance-your-user-interfaces-with-ark-ui-a-comprehensive-guide-7e87dd0a79cf",
+        "type": "article"
+      },
+      {
+        "title": "Hands On ARK UI",
+        "url": "https://www.youtube.com/watch?v=zjo-77I0unk",
+        "type": "video"
+      }
+    ]
   },
   "b4AP2OggxFAwsQtUwiUJJ": {
     "title": "API Calls",
@@ -1367,7 +1403,7 @@
   },
   "W-atg_Msa9uPLr6RXAKSb": {
     "title": "Frameworks",
-    "description": "Server-side rendering (SSR) is a technique for rendering a JavaScript application on the server, rather than in the browser. This can improve the performance and user experience of a web application, as the initial render of the application is done on the server and the content is sent to the browser as a fully-rendered HTML page.\n\nThere are several frameworks and libraries available for server-side rendering React applications, most common being:",
+    "description": "Server-side rendering (SSR) is a technique for rendering a JavaScript application on the server, rather than in the browser. This can improve the performance and user experience of a web application, as the initial render of the application is done on the server and the content is sent to the browser as a fully-rendered HTML page.\n\nThere are several frameworks and libraries available for server-side rendering React applications, most common being Next.js and Remix:\n\nVisit the following resources to learn more:",
     "links": [
       {
         "title": "Next.js",
@@ -1378,6 +1414,16 @@
         "title": "Remix",
         "url": "https://remix.run/",
         "type": "article"
+      },
+      {
+        "title": "Next.js 14 Full Course 2024",
+        "url": "https://www.youtube.com/watch?v=wm5gMKuwSYk",
+        "type": "video"
+      },
+      {
+        "title": "Remix Crash Course",
+        "url": "https://www.youtube.com/watch?v=RBYJTop1e-g",
+        "type": "video"
       }
     ]
   },
@@ -1419,8 +1465,24 @@
   },
   "_HoZkE7FH-v3wI_722ZTF": {
     "title": "Astro",
-    "description": "",
-    "links": []
+    "description": "Astro is the web framework for building content-driven websites like blogs, marketing, and e-commerce. Astro is best-known for pioneering a new frontend architecture to reduce JavaScript overhead and complexity compared to other frameworks. If you need a website that loads fast and has great SEO, then Astro is for you.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Astro Website",
+        "url": "https://astro.build/",
+        "type": "article"
+      },
+      {
+        "title": "Astro Crash Course in 60 Minutes",
+        "url": "https://www.youtube.com/watch?v=NniT0vKyn-E",
+        "type": "video"
+      },
+      {
+        "title": "How To: Add/Integrate React.js and TailwindCss into Astro framework",
+        "url": "https://www.youtube.com/watch?v=d6CsWTVa42o",
+        "type": "video"
+      }
+    ]
   },
   "-WjJBYCmRRj08n_9HxohY": {
     "title": "react-router",
@@ -1446,6 +1508,11 @@
         "title": "How to use Forms in React",
         "url": "https://www.robinwieruch.de/react-form/",
         "type": "article"
+      },
+      {
+        "title": "React Forms: the SIMPLEST way",
+        "url": "https://www.youtube.com/watch?v=CT-72lTXdPg",
+        "type": "video"
       }
     ]
   },
@@ -1485,9 +1552,14 @@
         "type": "article"
       },
       {
-        "title": "Getting Started",
-        "url": "https://formik.org/docs/overview",
-        "type": "article"
+        "title": "Formik - Building React Forms easier",
+        "url": "https://www.youtube.com/watch?v=khGypss-RJs",
+        "type": "video"
+      },
+      {
+        "title": "React Formik Tutorial with Yup (React Form Validation)",
+        "url": "https://www.youtube.com/watch?v=7Ophfq0lEAY",
+        "type": "video"
       }
     ]
   },
@@ -1530,8 +1602,24 @@
   },
   "bRpeoo9zXrnZ2IHSI7JX4": {
     "title": "Animation",
-    "description": "",
-    "links": []
+    "description": "Animation in React can be achieved using various methods, such as CSS transitions, keyframes, or libraries like `react-spring`, `framer-motion`, and `GSAP` (GreenSock Animation Platform). CSS transitions are ideal for simple animations, where you can toggle classes or manipulate inline styles to create smooth transitions. For more complex and interactive animations, libraries like `react-spring` provide a declarative approach, allowing you to create animations by defining spring physics or interpolating values. `framer-motion` offers a rich API to handle complex animations, gestures, and even layout transitions with ease. `GSAP` is another powerful library that excels at creating high-performance animations, offering fine-grained control over every aspect of the animation process. These tools integrate seamlessly with React's component-driven architecture, enabling you to create responsive and dynamic user interfaces.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Framer Motion Docs",
+        "url": "https://www.framer.com/motion/",
+        "type": "article"
+      },
+      {
+        "title": "GSAP Docs",
+        "url": "https://gsap.com/docs/v3/",
+        "type": "article"
+      },
+      {
+        "title": "React Spring Docs",
+        "url": "https://www.react-spring.dev/docs/getting-started",
+        "type": "article"
+      }
+    ]
   },
   "SUeXDkmOLipdRP4fSrZOH": {
     "title": "Server APIs",
@@ -1627,7 +1715,18 @@
   "txARr3lgTvy-vJCj5zAb1": {
     "title": "Mobile Applications",
     "description": "React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.",
-    "links": []
+    "links": [
+      {
+        "title": "React Native Official website",
+        "url": "https://reactnative.dev/",
+        "type": "article"
+      },
+      {
+        "title": "React Native Course for Beginners",
+        "url": "https://www.youtube.com/watch?v=ZBCUegTZF7M",
+        "type": "video"
+      }
+    ]
   },
   "NvXAq1vN2wpncdW-yTL4c": {
     "title": "React Native",

public/roadmap-content/server-side-game-developer.json

@@ -466,7 +466,7 @@
   },
   "HsBqd08Ro0VJnx0FlumMQ": {
     "title": "MySQL",
-    "description": "MySQL is an open-source relational database management system (RDBMS) that uses SQL (Structured Query Language) to interact with data. It is developed, marketed, and supported by MySQL AB, a Swedish company, and is written in C and C++. Since it's open-source, you can use MySQL completely free of charge. MySQL is primarily used for online transactions and for consolidating data. You can install it on various platforms like Linux, Windows, Mac OS and so on. With its comprehensive set of features like support for full-text search, cursors, triggers, stored procedures, it is powerful enough to manage even very large sets of data, making it suitable for a vast range of applications, whether they be web-based or embedded.",
+    "description": "MySQL is an open-source relational database management system (RDBMS) that uses SQL (Structured Query Language) to interact with data. It is developed, marketed, and supported by MySQL AB, a Swedish company, and is written in C and C++. Since it's open-source, you can use MySQL completely free of charge. MySQL is primarily used for online transactions and for consolidating data. You can install it on various platforms like Linux, Windows, macOS and so on. With its comprehensive set of features like support for full-text search, cursors, triggers, stored procedures, it is powerful enough to manage even very large sets of data, making it suitable for a vast range of applications, whether they be web-based or embedded.",
     "links": []
   },
   "dAiEwN7phwMyaitvM5kRl": {

public/roadmap-content/terraform.json

@@ -336,12 +336,12 @@
     "description": "The `provider` meta-argument in Terraform specifies which provider configuration to use for a resource, overriding the default provider selection based on the resource type name. This is useful in scenarios where multiple configurations of the same provider are required, such as managing resources across different regions or environments. By setting the `provider` argument, you can ensure that the resource uses the specified provider setup, identified by its alias, enhancing control and flexibility in multi-provider or multi-region deployments. This meta-argument is essential for precisely directing Terraform on how to interact with the underlying infrastructure provider.\n\nLearn more from the following resources:",
     "links": [
       {
-        "title": "Terraform Docs - for_each",
+        "title": "Terraform Docs - provider",
         "url": "https://developer.hashicorp.com/terraform/language/meta-arguments/resource-provider",
         "type": "article"
       },
       {
-        "title": "Terraform by Example - for_each",
+        "title": "Terraform by Example - provider",
         "url": "https://www.terraformbyexample.com/providers/",
         "type": "article"
       }

public/roadmap-content/vue.json

@@ -263,13 +263,25 @@
   },
   "xHj3W9Ig3MVuVlGyXchaP": {
     "title": "v-if",
-    "description": "",
-    "links": []
+    "description": "Conditionally render an element or a template fragment based on the truthy-ness of the expression value.\n\nWhen a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "v-if Documentation",
+        "url": "https://vuejs.org/api/built-in-directives.html#v-if",
+        "type": "article"
+      }
+    ]
   },
   "0CtAZQcFJexMiJfZ-mofv": {
     "title": "v-else",
-    "description": "",
-    "links": []
+    "description": "The `v-else` conditionally renders an element or a template fragment as a function in case the `v-if` does not fulfil the condition.\n\nVisit the following resources for more information:",
+    "links": [
+      {
+        "title": "v-else documentation",
+        "url": "https://vuejs.org/api/built-in-directives.html#v-else",
+        "type": "article"
+      }
+    ]
   },
   "a9caVhderJaVo0v14w8WB": {
     "title": "v-else-if",

scripts/generate-og-images.mjs

@@ -372,7 +372,7 @@ function getRoadmapDefaultTemplate({ title, description }) {
               </svg>
             </div>
             <div tw="text-[30px] flex leading-[30px]">
-              6th most starred GitHub project
+              7th most starred GitHub project
             </div>
           </div>
           <div tw="flex items-center mt-2.5">

src/components/FeatureAnnouncement.tsx

@@ -1,20 +1,85 @@
-type AIAnnouncementProps = {};
+import { useState } from 'react';
+import { Modal } from './Modal.tsx';
+import {PartyPopper, Play, PlayCircle} from 'lucide-react';
+import { isMobileScreen } from '../lib/is-mobile.ts';
 
-export function FeatureAnnouncement(props: AIAnnouncementProps) {
-  return (
-    <a
-      className="rounded-md border border-dashed border-purple-600 px-3 py-1.5 text-purple-400 transition-colors hover:border-purple-400 hover:text-purple-200"
-      href="/community"
+type FeatureAnnouncementProps = {};
+
+export function FeatureAnnouncement(props: FeatureAnnouncementProps) {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  const videoModal = (
+    <Modal
+      onClose={() => setIsPlaying(false)}
+      bodyClassName={'h-auto overflow-hidden'}
+      wrapperClassName={'md:max-w-3xl lg:max-w-4xl xl:max-w-5xl'}
     >
-      <span className="relative -top-[1px] mr-1 text-xs font-semibold uppercase text-white">
-        New
-      </span>{' '}
-      <span className={'hidden sm:inline'}>
-        Explore community made roadmaps
-      </span>
-      <span className={'inline text-sm sm:hidden'}>
-        Community roadmaps explorer!
-      </span>
-    </a>
+      <div className="text-balance bg-gradient-to-r from-gray-100 px-4 py-2 text-left text-sm md:py-3 lg:text-base">
+        <span
+          className="relative -top-px mr-1.5 rounded bg-blue-300 px-1.5 py-0.5 text-xs font-semibold uppercase text-gray-800"
+          style={{ lineHeight: '1.5' }}
+        >
+          New
+        </span>
+        Projects are live on the{' '}
+        <a
+          href={'/backend/projects'}
+          className="font-medium text-blue-500 underline underline-offset-2"
+        >
+          backend roadmap
+        </a>
+        <span className={'hidden md:inline'}>
+          {' '}
+          and are coming soon on the others{' '}
+        </span>
+        <PartyPopper className="relative -top-[3px] ml-2 inline-block h-5 w-5 text-blue-500 md:ml-1 md:h-6 md:w-6" />
+      </div>
+      <div
+        className="iframe-container"
+        style={{
+          position: 'relative',
+          paddingBottom: '56.25%',
+          height: 0,
+          overflow: 'hidden',
+        }}
+      >
+        {/*https://www.youtube.com/embed/?playsinline=1&disablekb=1&&iv_load_policy=3&cc_load_policy=0&controls=0&rel=0&autoplay=1&mute=1&origin=https%3A%2F%2Fytch.xyz&widgetid=1*/}
+        <iframe
+          src="https://www.youtube.com/embed/9lS3slfJ0x0?start=31&autoplay=1&disablekb=1&rel=0&cc_load_policy=0&rel=0&autoplay=1&origin=https%3A%2F%2Froadmap.sh&widgetid=1&showinfo=0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+          }}
+        />
+      </div>
+    </Modal>
+  );
+
+  return (
+    <>
+      {isPlaying && videoModal}
+      <button
+        className="rounded-md border border-dashed border-purple-600 px-3 py-1.5 text-purple-400 transition-colors hover:border-purple-400 hover:text-purple-200"
+        onClick={() => {
+          setIsPlaying(true);
+        }}
+      >
+        <span className="relative sm:-top-[1px] mr-1 text-xs font-semibold uppercase text-white">
+          <PlayCircle className="inline-block h-4 w-4 relative -top-[2px] mr-1" />
+          Watch
+        </span>{' '}
+        <span className={'hidden sm:inline'}>
+          Practice your skills with projects
+        </span>
+        <span className={'inline text-sm sm:hidden'}>
+          Build projects to skill up
+        </span>
+      </button>
+    </>
   );
 }

src/components/HeroSection/HeroSection.astro

@@ -11,7 +11,7 @@ import { FeatureAnnouncement } from "../FeatureAnnouncement";
     id='hero-text'
   >
     <p class='-mt-4 mb-7 sm:-mt-10 sm:mb-4'>
-      <FeatureAnnouncement />
+      <FeatureAnnouncement client:load />
     </p>
 
     <h1

src/components/Modal.tsx

@@ -33,7 +33,7 @@ export function Modal(props: ModalProps) {
   return (
     <div
       className={cn(
-        'popup fixed left-0 right-0 top-0 z-[99] flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50',
+        'fixed left-0 right-0 top-0 z-[99] flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50',
         overlayClassName,
       )}
     >
@@ -46,7 +46,7 @@ export function Modal(props: ModalProps) {
         <div
           ref={popupBodyEl}
           className={cn(
-            'popup-body relative h-full rounded-lg bg-white shadow',
+            'relative h-full rounded-lg bg-white shadow',
             bodyClassName,
           )}
         >

src/components/Navigation/Navigation.astro

@@ -4,6 +4,7 @@ import Icon from '../AstroIcon.astro';
 import { NavigationDropdown } from '../NavigationDropdown';
 import { AccountDropdown } from './AccountDropdown';
 import NewIndicator from './NewIndicator.astro';
+import { RoadmapDropdownMenu } from '../RoadmapDropdownMenu/RoadmapDropdownMenu';
 ---
 
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
@@ -19,7 +20,7 @@ import NewIndicator from './NewIndicator.astro';
 
       <a
         href='/teams'
-        class='group relative !mr-2 inline text-blue-300 hover:text-white sm:hidden'
+        class='group relative inline text-blue-300 hover:text-white sm:hidden'
       >
         Teams
 
@@ -35,32 +36,18 @@ import NewIndicator from './NewIndicator.astro';
       </a>
 
       <!-- Desktop navigation items -->
-      <div class='hidden space-x-5 sm:flex sm:items-center'>
+      <div class='hidden gap-5 sm:flex sm:items-center'>
         <NavigationDropdown client:load />
         <a href='/get-started' class='text-gray-400 hover:text-white'>
           Start Here
         </a>
+        <RoadmapDropdownMenu client:load />
         <a
           href='/teams'
-          class='group relative text-gray-400 hover:text-white'
+          class='group relative !mr-5 text-gray-400 hover:text-white'
         >
           Teams
         </a>
-        <a href='/ai' class='text-gray-400 hover:text-white'> AI</a>
-        <a
-          href='/community'
-          class='group relative !mr-2 text-blue-300 hover:text-white'
-        >
-          Community
-          <NewIndicator />
-        </a>
-        <!--<button-->
-        <!--  data-command-menu-->
-        <!--  class='hidden items-center rounded-md border border-gray-800 px-2.5 py-1.5 text-sm text-gray-400 hover:cursor-pointer hover:bg-gray-800 md:flex'-->
-        <!--&gt;-->
-        <!--  <Icon icon='search' class='h-3 w-3' />-->
-        <!--  <span class='ml-2'>Search</span>-->
-        <!--</button>-->
       </div>
     </div>
 

src/components/NavigationDropdown.tsx

@@ -2,22 +2,34 @@ import {
   BookOpenText,
   CheckSquare,
   FileQuestion,
+  FolderKanban,
   Menu,
   Shirt,
   Video,
   Waypoints,
 } from 'lucide-react';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { cn } from '../lib/classname.ts';
 import { useOutsideClick } from '../hooks/use-outside-click.ts';
+import {
+  navigationDropdownOpen,
+  roadmapsDropdownOpen,
+} from '../stores/page.ts';
+import { useStore } from '@nanostores/react';
 
 const links = [
   {
     link: '/roadmaps',
-    label: 'Roadmaps',
-    description: 'Step by step learning paths',
+    label: 'Official Roadmaps',
+    description: 'Made by subject matter experts',
     Icon: Waypoints,
   },
+  {
+    link: '/backend/projects',
+    label: 'Projects',
+    description: 'Skill-up with real-world projects',
+    Icon: FolderKanban,
+  },
   {
     link: '/best-practices',
     label: 'Best Practices',
@@ -54,21 +66,30 @@ const links = [
 
 export function NavigationDropdown() {
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
+
+  const $navigationDropdownOpen = useStore(navigationDropdownOpen);
+  const $roadmapsDropdownOpen = useStore(roadmapsDropdownOpen);
 
   useOutsideClick(dropdownRef, () => {
-    setIsOpen(false);
+    navigationDropdownOpen.set(false);
   });
 
+  useEffect(() => {
+    if ($roadmapsDropdownOpen) {
+      navigationDropdownOpen.set(false);
+    }
+  }, [$roadmapsDropdownOpen]);
+
   return (
     <div className="relative flex items-center" ref={dropdownRef}>
       <button
         className={cn('text-gray-400 hover:text-white', {
-          'text-white': isOpen,
+          'text-white': $navigationDropdownOpen,
         })}
-        onClick={() => setIsOpen(true)}
-        onMouseOver={() => setIsOpen(true)}
+        onClick={() => navigationDropdownOpen.set(true)}
+        onMouseOver={() => navigationDropdownOpen.set(true)}
         aria-label="Open Navigation Dropdown"
+        aria-expanded={$navigationDropdownOpen}
       >
         <Menu className="h-5 w-5" />
       </button>
@@ -76,9 +97,11 @@ export function NavigationDropdown() {
         className={cn(
           'pointer-events-none invisible absolute left-0 top-full z-[999] mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-xl transition-all duration-100',
           {
-            'pointer-events-auto visible translate-y-2.5 opacity-100': isOpen,
+            'pointer-events-auto visible translate-y-2.5 opacity-100':
+              $navigationDropdownOpen,
           },
         )}
+        role="menu"
       >
         {links.map((link) => (
           <a
@@ -87,6 +110,7 @@ export function NavigationDropdown() {
             rel={link.isExternal ? 'noopener noreferrer' : undefined}
             key={link.link}
             className="group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700"
+            role="menuitem"
           >
             <span className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-slate-600 transition-colors group-hover:bg-slate-500 group-hover:text-slate-100">
               <link.Icon className="inline-block h-5 w-5" />

src/components/OpenSourceBanner.astro

@@ -1,10 +1,13 @@
 ---
-import { getFormattedStars } from '../lib/github';
-import Icon from './AstroIcon.astro';
+import { getFormattedStars, getRepositoryRank } from '../lib/github';
 import { getDiscordInfo } from '../lib/discord';
+
 import OpenSourceStat from './OpenSourceStat.astro';
 
-const starCount = await getFormattedStars('kamranahmedse/developer-roadmap');
+const repoName = 'kamranahmedse/developer-roadmap';
+
+const starCount = await getFormattedStars(repoName);
+const repoRank = await getRepositoryRank(repoName);
 const discordInfo = await getDiscordInfo();
 ---
 
@@ -16,18 +19,19 @@ const discordInfo = await getDiscordInfo();
         href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
         target='_blank'
         class='font-medium text-gray-600 underline underline-offset-2 hover:text-black'
-        >6th most starred project on GitHub</a
+        >{repoRank} most starred project on GitHub</a
       > and is visited by hundreds of thousands of developers every month.
     </p>
 
     <div
       class='mt-5 grid grid-cols-1 justify-between gap-2 divide-x-0 sm:my-11 sm:grid-cols-3 sm:gap-0 sm:divide-x mb-4 sm:mb-0'
     >
-      <OpenSourceStat text='GitHub Stars' value={starCount} />
-      <OpenSourceStat text='Registered Users' value={'+1M'} />
+      <OpenSourceStat text='GitHub Stars' value={starCount} secondaryValue={repoRank} />
+      <OpenSourceStat text='Registered Users' value={'+1M'} secondaryValue="+90k" />
       <OpenSourceStat
         text='Discord Members'
         value={discordInfo.totalFormatted}
+        secondaryValue="+1.5k"
       />
     </div>
   </div>

src/components/OpenSourceStat.astro

@@ -1,12 +1,13 @@
 ---
-import { ChevronUp } from 'lucide-react';
 import Icon from './AstroIcon.astro';
+
 export interface Props {
+  secondaryValue?: string;
   value: string;
   text: string;
 }
 
-const { value, text } = Astro.props;
+const { value, text, secondaryValue } = Astro.props;
 
 const isGitHubStars = text.toLowerCase() === 'github stars';
 const isRegistered = text.toLowerCase() === 'registered users';
@@ -19,7 +20,7 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
   {
     isGitHubStars && (
       <p class='flex items-center text-sm text-blue-500 sm:flex'>
-        <span class='rounded-md bg-blue-500 px-1 text-white'>Rank 6th</span>
+        <span class='rounded-md bg-blue-500 px-1 text-white'>Rank {secondaryValue}</span>
         &nbsp;out of 28M!
       </p>
     )
@@ -28,7 +29,7 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
   {
     isRegistered && (
       <p class='flex items-center text-sm text-blue-500 sm:flex'>
-        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+75k</span>
+        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>{secondaryValue}</span>
         every month
       </p>
     )
@@ -37,14 +38,14 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
   {
     isDiscordMembers && (
       <p class='flex items-center text-sm text-blue-500 sm:flex'>
-        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>+1.5k</span>
+        <span class='mr-1.5 rounded-md bg-blue-500 px-1 text-white'>{secondaryValue}</span>
         every month
       </p>
     )
   }
   <div class="flex flex-row items-center sm:flex-col my-1 sm:my-0">
     <p
-      class='relative my-0 sm:my-4 mr-1 sm:mr-0 text-base font-bold sm:w-auto sm:text-5xl'
+      class='my-0 sm:my-4 mr-1 sm:mr-0 text-base font-bold sm:w-auto sm:text-5xl'
     >
       {value}
     </p>
@@ -88,7 +89,7 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
   {
     isDiscordMembers && (
       <a
-        href='https://discord.gg/ZrSpJ8zH'
+        href='https://roadmap.sh/discord'
         target='_blank'
         class='group mt-0 flex flex-col items-center rounded-lg border border-black bg-white px-3 py-2 text-sm hover:bg-black hover:text-white'
       >

src/components/Projects/EmptySolutions.tsx

@@ -0,0 +1,29 @@
+import { Blocks, CodeXml } from 'lucide-react';
+
+type EmptySolutionsProps = {
+  projectId: string;
+};
+
+export function EmptySolutions(props: EmptySolutionsProps) {
+  const { projectId } = props;
+
+  return (
+    <div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl px-5 py-3 sm:px-0 sm:py-20">
+      <Blocks className="mb-4 opacity-10 h-14 w-14" />
+      <h2 className="mb-1 text-lg font-semibold sm:text-xl">
+        No solutions submitted yet
+      </h2>
+      <p className="mb-3 text-balance text-center text-xs text-gray-400 sm:text-sm">
+        Be the first to submit a solution for this project
+      </p>
+      <div className="flex flex-col items-center gap-1 sm:flex-row sm:gap-1.5">
+        <a
+          href={`/projects/${projectId}`}
+          className="flex w-full items-center gap-1.5 rounded-md bg-gray-900 px-3 py-1.5 text-xs text-white sm:w-auto sm:text-sm"
+        >
+          View Project Details
+        </a>
+      </div>
+    </div>
+  );
+}

src/components/Projects/LeavingRoadmapWarningModal.tsx

@@ -0,0 +1,64 @@
+import { ArrowUpRight, X } from 'lucide-react';
+import { Modal } from '../Modal';
+import { SubmissionRequirement } from './SubmissionRequirement.tsx';
+
+type LeavingRoadmapWarningModalProps = {
+  onClose: () => void;
+  onContinue: () => void;
+};
+
+export function LeavingRoadmapWarningModal(
+  props: LeavingRoadmapWarningModalProps,
+) {
+  const { onClose, onContinue } = props;
+
+  return (
+    <Modal onClose={onClose} bodyClassName="h-auto p-4">
+      <h2 className="mb-1.5 text-2xl font-semibold">Leaving roadmap.sh</h2>
+      <p className="text-sm text-gray-500">
+        You are about to visit the project solution on GitHub. We recommend you
+        to follow these tips before you leave.
+      </p>
+
+      <div className="my-3">
+        <p className="rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          Make sure to come back and{' '}
+          <span className="font-medium text-purple-600">leave an upvote</span>{' '}
+          if you liked the solution. It helps the author and the community.
+        </p>
+
+        <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          If you have feedback on the solution, open an issue or a pull request
+          on the{' '}
+          <span className="font-medium text-purple-600">
+            solution repository
+          </span>
+          .
+        </p>
+
+        <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          Downvote the solution if it is{' '}
+          <span className="font-medium text-purple-600">
+            incorrect or misleading
+          </span>
+          . It helps the community.
+        </p>
+      </div>
+
+      <button
+        className="inline-flex w-full items-center gap-2 rounded-lg bg-black px-3 py-2.5 text-sm text-white"
+        onClick={onContinue}
+      >
+        <ArrowUpRight className="h-5 w-5" />
+        Continue to Solution
+      </button>
+
+      <button
+        className="absolute right-2.5 top-2.5 text-gray-600 hover:text-black"
+        onClick={onClose}
+      >
+        <X className="h-5 w-5" />
+      </button>
+    </Modal>
+  );
+}

src/components/Projects/ListProjectSolutions.tsx

@@ -0,0 +1,328 @@
+import { useEffect, useState } from 'react';
+import { useToast } from '../../hooks/use-toast';
+import { httpGet, httpPost } from '../../lib/http';
+import { LoadingSolutions } from './LoadingSolutions';
+import { EmptySolutions } from './EmptySolutions';
+import { ThumbsDown, ThumbsUp } from 'lucide-react';
+import { getRelativeTimeString } from '../../lib/date';
+import { Pagination } from '../Pagination/Pagination';
+import { deleteUrlParam, getUrlParams, setUrlParams } from '../../lib/browser';
+import { pageProgressMessage } from '../../stores/page';
+import { LeavingRoadmapWarningModal } from './LeavingRoadmapWarningModal';
+import { isLoggedIn } from '../../lib/jwt';
+import { showLoginPopup } from '../../lib/popup';
+import { VoteButton } from './VoteButton.tsx';
+import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
+import { cn } from '../../lib/classname.ts';
+
+export interface ProjectStatusDocument {
+  _id?: string;
+
+  userId: string;
+  projectId: string;
+
+  startedAt?: Date;
+  submittedAt?: Date;
+  repositoryUrl?: string;
+
+  upvotes: number;
+  downvotes: number;
+
+  isVisible?: boolean;
+
+  updated1t: Date;
+}
+
+const allowedVoteType = ['upvote', 'downvote'] as const;
+export type AllowedVoteType = (typeof allowedVoteType)[number];
+
+type ListProjectSolutionsResponse = {
+  data: (ProjectStatusDocument & {
+    user: {
+      id: string;
+      name: string;
+      avatar: string;
+    };
+    voteType?: AllowedVoteType | 'none';
+  })[];
+  totalCount: number;
+  totalPages: number;
+  currPage: number;
+  perPage: number;
+};
+
+type QueryParams = {
+  p?: string;
+};
+
+type PageState = {
+  currentPage: number;
+};
+
+const VISITED_SOLUTIONS_KEY = 'visited-project-solutions';
+
+type ListProjectSolutionsProps = {
+  projectId: string;
+};
+
+const submittedAlternatives = [
+  'submitted their solution',
+  'got it done',
+  'submitted their take',
+  'finished the project',
+  'submitted their work',
+  'completed the project',
+  'got it done',
+  'delivered their project',
+  'handed in their solution',
+  'provided their deliverables',
+  'submitted their approach',
+  'sent in their project',
+  'presented their take',
+  'shared their completed task',
+  'submitted their approach',
+  'completed it',
+  'finalized their solution',
+  'delivered their approach',
+  'turned in their project',
+  'submitted their final draft',
+  'delivered their solution',
+];
+
+export function ListProjectSolutions(props: ListProjectSolutionsProps) {
+  const { projectId } = props;
+
+  const toast = useToast();
+  const [pageState, setPageState] = useState<PageState>({
+    currentPage: 0,
+  });
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [solutions, setSolutions] = useState<ListProjectSolutionsResponse>();
+  const [alreadyVisitedSolutions, setAlreadyVisitedSolutions] = useState<
+    Record<string, boolean>
+  >({});
+  const [showLeavingRoadmapModal, setShowLeavingRoadmapModal] = useState<
+    ListProjectSolutionsResponse['data'][number] | null
+  >(null);
+
+  const loadSolutions = async (page = 1) => {
+    const { response, error } = await httpGet<ListProjectSolutionsResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-list-project-solutions/${projectId}`,
+      {
+        currPage: page,
+      },
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Failed to load project solutions');
+      setIsLoading(false);
+      return;
+    }
+
+    setSolutions(response);
+  };
+
+  const handleSubmitVote = async (
+    solutionId: string,
+    voteType: AllowedVoteType,
+  ) => {
+    if (!isLoggedIn()) {
+      showLoginPopup();
+      return;
+    }
+
+    pageProgressMessage.set('Submitting vote...');
+    const { response, error } = await httpPost(
+      `${import.meta.env.PUBLIC_API_URL}/v1-vote-project/${solutionId}`,
+      {
+        voteType,
+      },
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Failed to submit vote');
+      pageProgressMessage.set('');
+      return;
+    }
+
+    pageProgressMessage.set('');
+    setSolutions((prev) => {
+      if (!prev) {
+        return prev;
+      }
+
+      return {
+        ...prev,
+        data: prev.data.map((solution) => {
+          if (solution._id === solutionId) {
+            return {
+              ...solution,
+              upvotes: response?.upvotes || 0,
+              downvotes: response?.downvotes || 0,
+              voteType,
+            };
+          }
+
+          return solution;
+        }),
+      };
+    });
+  };
+
+  useEffect(() => {
+    const queryParams = getUrlParams() as QueryParams;
+    const alreadyVisitedSolutions = JSON.parse(
+      localStorage.getItem(VISITED_SOLUTIONS_KEY) || '{}',
+    );
+
+    setAlreadyVisitedSolutions(alreadyVisitedSolutions);
+    setPageState({
+      currentPage: +(queryParams.p || '1'),
+    });
+  }, []);
+
+  useEffect(() => {
+    setIsLoading(true);
+    if (!pageState.currentPage) {
+      return;
+    }
+
+    if (pageState.currentPage !== 1) {
+      setUrlParams({
+        p: String(pageState.currentPage),
+      });
+    } else {
+      deleteUrlParam('p');
+    }
+
+    loadSolutions(pageState.currentPage).finally(() => {
+      setIsLoading(false);
+    });
+  }, [pageState]);
+
+  if (isLoading) {
+    return <LoadingSolutions />;
+  }
+
+  const isEmpty = solutions?.data.length === 0;
+  if (isEmpty) {
+    return <EmptySolutions projectId={projectId} />;
+  }
+
+  const leavingRoadmapModal = showLeavingRoadmapModal ? (
+    <LeavingRoadmapWarningModal
+      onClose={() => setShowLeavingRoadmapModal(null)}
+      onContinue={() => {
+        const visitedSolutions = {
+          ...alreadyVisitedSolutions,
+          [showLeavingRoadmapModal._id!]: true,
+        };
+        localStorage.setItem(
+          VISITED_SOLUTIONS_KEY,
+          JSON.stringify(visitedSolutions),
+        );
+
+        window.open(showLeavingRoadmapModal.repositoryUrl, '_blank');
+      }}
+    />
+  ) : null;
+
+  return (
+    <section>
+      {leavingRoadmapModal}
+
+      <div className="flex min-h-[500px] flex-col divide-y divide-gray-100">
+        {solutions?.data.map((solution, counter) => {
+          const isVisited = alreadyVisitedSolutions[solution._id!];
+          const avatar = solution.user.avatar || '';
+
+          return (
+            <div
+              key={solution._id}
+              className={
+                'flex flex-col justify-between gap-2 py-2 text-sm text-gray-500 sm:flex-row sm:items-center sm:gap-0'
+              }
+            >
+              <div className="flex items-center gap-1.5">
+                <img
+                  src={
+                    avatar
+                      ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${avatar}`
+                      : '/images/default-avatar.png'
+                  }
+                  alt={solution.user.name}
+                  className="mr-0.5 h-7 w-7 rounded-full"
+                />
+                <span className="font-medium text-black">
+                  {solution.user.name}
+                </span>
+                <span className="hidden sm:inline">
+                  {submittedAlternatives[
+                    counter % submittedAlternatives.length
+                  ] || 'submitted their solution'}
+                </span>{' '}
+                <span className="flex-grow text-right text-gray-400 sm:flex-grow-0 sm:text-left sm:font-medium sm:text-black">
+                  {getRelativeTimeString(solution?.submittedAt!)}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-end gap-1">
+                <span className="flex overflow-hidden rounded-full border">
+                  <VoteButton
+                    icon={ThumbsUp}
+                    isActive={solution?.voteType === 'upvote'}
+                    count={solution.upvotes || 0}
+                    onClick={() => {
+                      handleSubmitVote(solution._id!, 'upvote');
+                    }}
+                  />
+
+                  <VoteButton
+                    icon={ThumbsDown}
+                    isActive={solution?.voteType === 'downvote'}
+                    count={solution.downvotes || 0}
+                    hideCount={true}
+                    onClick={() => {
+                      handleSubmitVote(solution._id!, 'downvote');
+                    }}
+                  />
+                </span>
+
+                <a
+                  className="ml-1 flex items-center gap-1 rounded-full border px-2 py-1 text-xs text-black transition-colors hover:border-black hover:bg-black hover:text-white"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setShowLeavingRoadmapModal(solution);
+                  }}
+                  target="_blank"
+                  href={solution.repositoryUrl}
+                >
+                  <GitHubIcon className="h-4 w-4 text-current" />
+                  Visit Solution
+                </a>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {(solutions?.totalPages || 0) > 1 && (
+        <div className="mt-4">
+          <Pagination
+            totalPages={solutions?.totalPages || 1}
+            currPage={solutions?.currPage || 1}
+            perPage={solutions?.perPage || 21}
+            totalCount={solutions?.totalCount || 0}
+            onPageChange={(page) => {
+              setPageState({
+                ...pageState,
+                currentPage: page,
+              });
+            }}
+          />
+        </div>
+      )}
+    </section>
+  );
+}

src/components/Projects/LoadingSolutions.tsx

@@ -0,0 +1,44 @@
+import { isMobileScreen } from '../../lib/is-mobile.ts';
+
+export function LoadingSolutions() {
+  const totalCount = isMobileScreen() ? 3 : 11;
+
+  const loadingRow = (
+    <li className="flex min-h-[78px] animate-pulse flex-wrap items-center justify-between overflow-hidden rounded-md bg-gray-200 sm:min-h-[44px] sm:animate-none sm:rounded-none sm:bg-transparent">
+      <span className="flex items-center">
+        <span className="block h-[28px] w-[28px] animate-pulse rounded-full bg-gray-200"></span>
+        <span
+          className={`ml-2 block h-[26px] w-[350px] animate-pulse rounded-full bg-gray-200`}
+        ></span>
+      </span>
+      <span className="flex items-center gap-2">
+        <span
+          className={
+            'animated-pulse h-[26px] w-[80px] rounded-full bg-gray-200'
+          }
+        ></span>
+        <span
+          className={
+            'animated-pulse h-[26px] w-[113px] rounded-full bg-gray-200'
+          }
+        ></span>
+      </span>
+    </li>
+  );
+
+  return (
+    <ul className="flex min-h-[500px] flex-col gap-2 divide-y sm:gap-0">
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+      {loadingRow}
+    </ul>
+  );
+}

src/components/Projects/ProjectTabs.tsx

@@ -0,0 +1,69 @@
+import { cn } from '../../lib/classname';
+import {
+  Blocks,
+  BoxSelect,
+  type LucideIcon,
+  StickyNote,
+  Text,
+} from 'lucide-react';
+
+export const allowedProjectTabs = ['details', 'solutions'] as const;
+export type AllowedProjectTab = (typeof allowedProjectTabs)[number];
+
+type TabButtonProps = {
+  text: string;
+  icon: LucideIcon;
+  smText?: string;
+  isActive?: boolean;
+  href: string;
+};
+
+function TabButton(props: TabButtonProps) {
+  const { text, icon: ButtonIcon, smText, isActive, href } = props;
+
+  return (
+    <a
+      href={href}
+      className={cn('relative flex items-center gap-1 p-2', {
+        'text-black': isActive,
+        'opacity-40 hover:opacity-90': !isActive,
+      })}
+    >
+      {ButtonIcon && <ButtonIcon className="mr-1 inline-block h-4 w-4" />}
+      <span className="hidden sm:inline">{text}</span>
+      {smText && <span className="sm:hidden">{smText}</span>}
+
+      {isActive && (
+        <span className="absolute bottom-0 left-0 right-0 h-0.5 translate-y-1/2 bg-black rounded-t-md"></span>
+      )}
+    </a>
+  );
+}
+
+type ProjectTabsProps = {
+  activeTab: AllowedProjectTab;
+  projectId: string;
+};
+
+export function ProjectTabs(props: ProjectTabsProps) {
+  const { activeTab, projectId } = props;
+
+  return (
+    <div className="my-3 flex flex-row flex-wrap items-center gap-1.5 rounded-md border bg-white px-2.5 text-sm">
+      <TabButton
+        text={'Project Detail'}
+        icon={Text}
+        smText={'Details'}
+        isActive={activeTab === 'details'}
+        href={`/projects/${projectId}`}
+      />
+      <TabButton
+        text={'Community Solutions'}
+        icon={Blocks}
+        smText={'Solutions'}
+        isActive={activeTab === 'solutions'}
+        href={`/projects/${projectId}/solutions`}
+      />
+    </div>
+  );
+}

src/components/Projects/StartProjectModal.tsx

@@ -0,0 +1,169 @@
+import { Check, CopyIcon, ServerCrash } from 'lucide-react';
+import { Modal } from '../Modal';
+import { getRelativeTimeString } from '../../lib/date';
+import { useEffect, useState } from 'react';
+import { Spinner } from '../ReactIcons/Spinner.tsx';
+import { httpPost } from '../../lib/http.ts';
+import { CheckIcon } from '../ReactIcons/CheckIcon.tsx';
+import { useCopyText } from '../../hooks/use-copy-text.ts';
+
+type StepLabelProps = {
+  label: string;
+};
+
+function StepLabel(props: StepLabelProps) {
+  const { label } = props;
+
+  return (
+    <span className="flex-shrink-0 rounded-full bg-gray-200 px-2 py-1 text-xs text-gray-600">
+      {label}
+    </span>
+  );
+}
+
+type StartProjectModalProps = {
+  projectId: string;
+  onClose: () => void;
+  startedAt?: Date;
+  onStarted: (startedAt: Date) => void;
+};
+
+export function StartProjectModal(props: StartProjectModalProps) {
+  const { onClose, startedAt, onStarted, projectId } = props;
+
+  const [isStartingProject, setIsStartingProject] = useState(true);
+  const [error, setError] = useState<string | null>();
+
+  const { isCopied, copyText } = useCopyText();
+
+  const projectUrl = `${import.meta.env.PUBLIC_APP_URL}/projects/${projectId}`;
+
+  const formattedStartedAt = startedAt ? getRelativeTimeString(startedAt) : '';
+
+  async function handleStartProject() {
+    if (!projectId || startedAt) {
+      return;
+    }
+
+    setIsStartingProject(true);
+    const { response, error } = await httpPost<{
+      startedAt: Date;
+    }>(`${import.meta.env.PUBLIC_API_URL}/v1-start-project/${projectId}`, {});
+
+    if (error || !response) {
+      setError(error?.message || 'Failed to start project');
+      setIsStartingProject(false);
+      return;
+    }
+
+    onStarted(response.startedAt);
+  }
+
+  useEffect(() => {
+    handleStartProject().finally(() => setIsStartingProject(false));
+  }, []);
+
+  if (error) {
+    return (
+      <Modal onClose={onClose} bodyClassName="h-auto text-red-500">
+        <div className="flex flex-col items-center justify-center gap-2 pb-10 pt-12">
+          <ServerCrash className={'h-6 w-6'} />
+          <p className="font-medium">{error}</p>
+        </div>
+      </Modal>
+    );
+  }
+
+  if (isStartingProject) {
+    return (
+      <Modal onClose={onClose} bodyClassName="h-auto">
+        <div className="flex flex-col items-center justify-center gap-4 pb-10 pt-12">
+          <Spinner className={'h-6 w-6'} isDualRing={false} />
+          <p className="font-medium">Starting project ..</p>
+        </div>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal
+      onClose={onClose}
+      bodyClassName="h-auto p-4 relative overflow-hidden"
+      wrapperClassName={'max-w-md'}
+    >
+      <p className="-mx-4 -mt-4 flex items-center bg-yellow-200 px-3 py-2 text-sm text-yellow-900">
+        <CheckIcon additionalClasses="mr-1.5 w-[15px] text-yellow-800 h-[15px]" />
+        <span className="mr-1.5 font-normal">Project started</span>{' '}
+        <span className="font-semibold">{formattedStartedAt}</span>
+      </p>
+      <h2 className="mb-1 mt-5 text-2xl font-semibold text-gray-800">
+        Start Building
+      </h2>
+      <p className="text-gray-700">
+        Follow these steps to complete the project.
+      </p>
+
+      <div className="my-5 space-y-1.5 marker:text-gray-400">
+        <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          1. Create a new public repository on GitHub.
+        </p>
+
+        <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          2. Complete the project according to the requirements and push your code
+          to the GitHub repository.
+        </p>
+
+        <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          3. Add a README file with instructions to run the project and the{' '}
+          <button
+            onClick={() => {
+              copyText(projectUrl);
+            }}
+            className="font-semibold"
+          >
+            {!isCopied && (
+              <span className="text-purple-600">
+                project page URL
+                <CopyIcon
+                  className="relative -top-px ml-1 inline-block h-4 w-4"
+                  strokeWidth={2.5}
+                />
+              </span>
+            )}
+            {isCopied && (
+              <>
+                copied URL
+                <Check className="inline-block h-4 w-4" strokeWidth={2.5} />
+              </>
+            )}
+          </button>
+        </p>
+        <p className="mt-1 rounded-lg bg-gray-200 p-2 text-sm text-gray-900">
+          4. Once done, submit your solution to help the others learn and get feedback
+          from the community.
+        </p>
+      </div>
+
+      <div className="mb-5">
+        <p className='text-sm'>
+          If you get stuck, you can always ask for help in the community{' '}
+          <a
+            href="https://roadmap.sh/discord"
+            target="_blank"
+            className="font-medium underline underline-offset-2"
+          >
+            chat on discord
+          </a>
+          .
+        </p>
+      </div>
+
+      <button
+        className="w-full rounded-md bg-black py-2 text-sm font-medium text-white hover:bg-gray-900"
+        onClick={onClose}
+      >
+        Close
+      </button>
+    </Modal>
+  );
+}

src/components/Projects/StatusStepper/MilestoneStep.tsx

@@ -0,0 +1,37 @@
+import { Check, type LucideIcon } from 'lucide-react';
+
+type MilestoneStepProps = {
+  icon: LucideIcon;
+  text: string;
+  isCompleted?: boolean;
+  isActive?: boolean;
+};
+
+export function MilestoneStep(props: MilestoneStepProps) {
+  const { icon: DisplayIcon, text, isActive = false, isCompleted } = props;
+
+  if (isActive) {
+    return (
+      <span className="flex cursor-default items-center gap-1.5 rounded-md border border-dashed border-current px-1.5 py-0.5 text-sm font-medium text-gray-400">
+        <DisplayIcon size={14} />
+        <span>{text}</span>
+      </span>
+    );
+  }
+
+  if (isCompleted) {
+    return (
+      <span className="flex cursor-default items-center gap-1.5 text-sm font-medium text-green-600">
+        <Check size={14} strokeWidth={3} />
+        <span>{text}</span>
+      </span>
+    );
+  }
+
+  return (
+    <span className="flex cursor-default items-center gap-1.5 text-sm text-gray-400">
+      <DisplayIcon size={14} />
+      <span>{text}</span>
+    </span>
+  );
+}

src/components/Projects/StatusStepper/ProjectStepper.tsx

@@ -0,0 +1,245 @@
+import { Flag, Play, Send } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { cn } from '../../../lib/classname.ts';
+import { useStickyStuck } from '../../../hooks/use-sticky-stuck.tsx';
+import { StepperAction } from './StepperAction.tsx';
+import { StepperStepSeparator } from './StepperStepSeparator.tsx';
+import { MilestoneStep } from './MilestoneStep.tsx';
+import { httpGet } from '../../../lib/http.ts';
+import { StartProjectModal } from '../StartProjectModal.tsx';
+import { getRelativeTimeString } from '../../../lib/date.ts';
+import { isLoggedIn } from '../../../lib/jwt.ts';
+import { showLoginPopup } from '../../../lib/popup.ts';
+import { SubmitProjectModal } from '../SubmitProjectModal.tsx';
+
+type ProjectStatusResponse = {
+  id?: string;
+
+  startedAt?: Date;
+  submittedAt?: Date;
+  repositoryUrl?: string;
+
+  upvotes: number;
+  downvotes: number;
+};
+
+type ProjectStepperProps = {
+  projectId: string;
+};
+
+export function ProjectStepper(props: ProjectStepperProps) {
+  const { projectId } = props;
+
+  const stickyElRef = useRef<HTMLDivElement>(null);
+  const isSticky = useStickyStuck(stickyElRef, 8);
+
+  const [isStartingProject, setIsStartingProject] = useState(false);
+  const [isSubmittingProject, setIsSubmittingProject] = useState(false);
+
+  const [error, setError] = useState<string | null>(null);
+  const [activeStep, setActiveStep] = useState<number>(0);
+  const [isLoadingStatus, setIsLoadingStatus] = useState(true);
+  const [projectStatus, setProjectStatus] = useState<ProjectStatusResponse>({
+    upvotes: 0,
+    downvotes: 0,
+  });
+
+  async function loadProjectStatus() {
+    setIsLoadingStatus(true);
+
+    const { response, error } = await httpGet<ProjectStatusResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-project-status/${projectId}`,
+      {},
+    );
+
+    if (error || !response) {
+      setError(error?.message || 'Error loading project status');
+      setIsLoadingStatus(false);
+      return;
+    }
+
+    const { startedAt, submittedAt, upvotes } = response;
+
+    if (upvotes >= 10) {
+      setActiveStep(4);
+    } else if (upvotes >= 5) {
+      setActiveStep(3);
+    } else if (submittedAt) {
+      setActiveStep(2);
+    } else if (startedAt) {
+      setActiveStep(1);
+    }
+
+    setProjectStatus(response);
+    setIsLoadingStatus(false);
+  }
+
+  useEffect(() => {
+    loadProjectStatus().finally(() => {});
+  }, []);
+
+  return (
+    <div
+      ref={stickyElRef}
+      className={cn(
+        'relative sm:sticky top-0 my-5 -mx-4 sm:mx-0 overflow-hidden rounded-none border-x-0 sm:border-x sm:rounded-lg border bg-white transition-all',
+        {
+          'sm:-mx-5 sm:rounded-none sm:border-x-0 sm:border-t-0 sm:bg-gray-50': isSticky,
+        },
+      )}
+    >
+      {isSubmittingProject && (
+        <SubmitProjectModal
+          onClose={() => setIsSubmittingProject(false)}
+          projectId={projectId}
+          onSubmit={(response) => {
+            const { repositoryUrl, submittedAt } = response;
+
+            setProjectStatus({
+              ...projectStatus,
+              repositoryUrl,
+              submittedAt,
+            });
+
+            setActiveStep(2);
+          }}
+          repositoryUrl={projectStatus.repositoryUrl}
+        />
+      )}
+      {isStartingProject && (
+        <StartProjectModal
+          projectId={projectId}
+          onStarted={(startedAt) => {
+            setProjectStatus({
+              ...projectStatus,
+              startedAt,
+            });
+            setActiveStep(1);
+          }}
+          startedAt={projectStatus?.startedAt}
+          onClose={() => setIsStartingProject(false)}
+        />
+      )}
+
+      {error && (
+        <div className="absolute inset-0 bg-red-100 p-2 text-sm text-red-500">
+          {error}
+        </div>
+      )}
+      {isLoadingStatus && (
+        <div className={cn('striped-loader absolute inset-0 z-10 bg-white')} />
+      )}
+      <div
+        className={cn(
+          'px-4 py-2 text-sm text-gray-500 transition-colors bg-gray-100',
+          {
+            'bg-purple-600 text-white': isSticky,
+          },
+        )}
+      >
+        {activeStep === 0 && (
+          <>
+            Start building, submit solution and get feedback from the community.
+          </>
+        )}
+        {activeStep === 1 && (
+          <>
+            Started working{' '}
+            <span
+              className={cn('font-medium text-gray-800', {
+                'text-purple-200': isSticky,
+              })}
+            >
+              {getRelativeTimeString(projectStatus.startedAt!)}
+            </span>
+            . Follow{' '}
+            <button
+              className={cn('underline underline-offset-2 hover:text-black', {
+                'text-purple-100 hover:text-white': isSticky,
+              })}
+              onClick={() => {
+                setIsStartingProject(true);
+              }}
+            >
+              these tips
+            </button>{' '}
+            to get most out of it.
+          </>
+        )}
+        {activeStep >= 2 && (
+          <>
+            Congrats on submitting your solution.{' '}
+            <button
+              className={cn('underline underline-offset-2 hover:text-black', {
+                'text-purple-100 hover:text-white': isSticky,
+              })}
+              onClick={() => {
+                setIsSubmittingProject(true);
+              }}
+            >
+              View or update your submission.
+            </button>
+          </>
+        )}
+      </div>
+
+      <div className="flex flex-col sm:flex-row min-h-[60px] items-start sm:items-center justify-between gap-2 sm:gap-3 px-4 py-4 sm:py-0">
+        <StepperAction
+          isActive={activeStep === 0}
+          isCompleted={activeStep > 0}
+          icon={Play}
+          text={activeStep > 0 ? 'Started Working' : 'Start Working'}
+          number={1}
+          onClick={() => {
+            if (!isLoggedIn()) {
+              showLoginPopup();
+              return;
+            }
+
+            setIsStartingProject(true);
+          }}
+        />
+        <StepperStepSeparator isActive={activeStep > 0} />
+        <StepperAction
+          isActive={activeStep === 1}
+          isCompleted={activeStep > 1}
+          icon={Send}
+          onClick={() => {
+            if (!isLoggedIn()) {
+              showLoginPopup();
+              return;
+            }
+
+            setIsSubmittingProject(true);
+          }}
+          text={activeStep > 1 ? 'Submitted' : 'Submit Solution'}
+          number={2}
+        />
+        <StepperStepSeparator isActive={activeStep > 1} />
+        <MilestoneStep
+          isActive={activeStep === 2}
+          isCompleted={activeStep > 2}
+          icon={Flag}
+          text={
+            activeStep == 2
+              ? `${projectStatus.upvotes} / 5 upvotes`
+              : `5 upvotes`
+          }
+        />
+        <StepperStepSeparator isActive={activeStep > 2} />
+        <MilestoneStep
+          isActive={activeStep === 3}
+          isCompleted={activeStep > 3}
+          icon={Flag}
+          text={
+            activeStep == 3
+              ? `${projectStatus.upvotes} / 10 upvotes`
+              : activeStep > 3
+                ? `${projectStatus.upvotes} upvotes`
+                : `10 upvotes`
+          }
+        />
+      </div>
+    </div>
+  );
+}

src/components/Projects/StatusStepper/StepperAction.tsx

@@ -0,0 +1,51 @@
+import { Check, type LucideIcon } from 'lucide-react';
+
+type StepperActionProps = {
+  isActive?: boolean;
+  isCompleted?: boolean;
+  onClick?: () => void;
+  icon: LucideIcon;
+  text: string;
+  number: number;
+};
+
+export function StepperAction(props: StepperActionProps) {
+  const {
+    isActive,
+    onClick = () => null,
+    isCompleted,
+    icon: DisplayIcon,
+    text,
+    number,
+  } = props;
+
+  if (isActive) {
+    return (
+      <button
+        onClick={onClick}
+        className="flex items-center gap-1.5 rounded-full bg-purple-600 py-1 pl-2 pr-2.5 text-sm text-white hover:bg-purple-700"
+      >
+        <DisplayIcon size={13} />
+        <span>{text}</span>
+      </button>
+    );
+  }
+
+  if (isCompleted) {
+    return (
+      <span className="flex cursor-default items-center gap-1.5 text-sm font-medium text-green-600">
+        <Check size={14} strokeWidth={3} />
+        <span>{text}</span>
+      </span>
+    );
+  }
+
+  return (
+    <span className="flex cursor-default items-center gap-1.5 text-sm text-gray-400">
+      <span className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-400/70 text-xs text-white">
+        {number}
+      </span>
+      <span>{text}</span>
+    </span>
+  );
+}

src/components/Projects/StatusStepper/StepperStepSeparator.tsx

@@ -0,0 +1,17 @@
+import { cn } from '../../../lib/classname.ts';
+
+type StepperStepSeparatorProps = {
+  isActive: boolean;
+};
+
+export function StepperStepSeparator(props: StepperStepSeparatorProps) {
+  const { isActive } = props;
+
+  return (
+    <hr
+      className={cn('flex-grow hidden sm:flex border border-gray-300', {
+        'border-green-500': isActive,
+      })}
+    />
+  );
+}

src/components/Projects/SubmissionRequirement.tsx

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+import { cn } from '../../lib/classname.ts';
+import { CheckIcon, CircleDashed, Loader, Loader2, X } from 'lucide-react';
+import { Spinner } from '../ReactIcons/Spinner.tsx';
+
+type SubmissionRequirementProps = {
+  status: 'pending' | 'success' | 'error';
+  children: ReactNode;
+  isLoading?: boolean;
+};
+
+export function SubmissionRequirement(props: SubmissionRequirementProps) {
+  const { status, isLoading = false, children } = props;
+
+  return (
+    <div
+      className={cn(`flex items-center rounded-lg p-2 text-sm text-gray-900`, {
+        'bg-gray-200': status === 'pending',
+        'bg-green-200': status === 'success',
+        'bg-red-200': status === 'error',
+      })}
+    >
+      {!isLoading && (
+        <>
+          {status === 'pending' ? (
+            <CircleDashed className="h-4 w-4 flex-shrink-0 text-gray-400" />
+          ) : status === 'success' ? (
+            <CheckIcon className="h-4 w-4 flex-shrink-0 text-green-800" />
+          ) : (
+            <X className="h-4 w-4 flex-shrink-0 text-yellow-800" />
+          )}
+        </>
+      )}
+
+      {isLoading && (
+        <Loader2
+          className={'h-4 w-4 animate-spin text-gray-400'}
+          strokeWidth={3}
+        />
+      )}
+      <span className="ml-2">{children}</span>
+    </div>
+  );
+}

src/components/Projects/SubmitProjectModal.tsx

@@ -0,0 +1,299 @@
+import { CheckIcon, CopyIcon, X } from 'lucide-react';
+import { CheckIcon as ReactCheckIcon } from '../ReactIcons/CheckIcon.tsx';
+import { Modal } from '../Modal';
+import { type FormEvent, useState } from 'react';
+import { httpPost } from '../../lib/http';
+import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
+import { SubmissionRequirement } from './SubmissionRequirement.tsx';
+import { useCopyText } from '../../hooks/use-copy-text.ts';
+
+type SubmitProjectResponse = {
+  repositoryUrl: string;
+  submittedAt: Date;
+};
+
+type VerificationChecksType = {
+  repositoryExists: 'pending' | 'success' | 'error';
+  readmeExists: 'pending' | 'success' | 'error';
+  projectUrlExists: 'pending' | 'success' | 'error';
+};
+
+type SubmitProjectModalProps = {
+  onClose: () => void;
+  projectId: string;
+  repositoryUrl?: string;
+  onSubmit: (response: SubmitProjectResponse) => void;
+};
+
+export function SubmitProjectModal(props: SubmitProjectModalProps) {
+  const {
+    onClose,
+    projectId,
+    onSubmit,
+    repositoryUrl: defaultRepositoryUrl = '',
+  } = props;
+
+  const { isCopied, copyText } = useCopyText();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+  const [repoUrl, setRepoUrl] = useState(defaultRepositoryUrl);
+  const [verificationChecks, setVerificationChecks] =
+    useState<VerificationChecksType>({
+      repositoryExists: defaultRepositoryUrl ? 'success' : 'pending',
+      readmeExists: defaultRepositoryUrl ? 'success' : 'pending',
+      projectUrlExists: defaultRepositoryUrl ? 'success' : 'pending',
+    });
+
+  const projectUrl = `${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/projects/${projectId}`;
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    try {
+      setVerificationChecks({
+        repositoryExists: 'pending',
+        readmeExists: 'pending',
+        projectUrlExists: 'pending',
+      });
+
+      setIsLoading(true);
+      setError('');
+      setSuccessMessage('');
+
+      if (!repoUrl) {
+        setVerificationChecks({
+          repositoryExists: 'error',
+          readmeExists: 'pending',
+          projectUrlExists: 'pending',
+        });
+
+        throw new Error('Repository URL is required');
+      }
+
+      const repoUrlParts = repoUrl
+        .replace(/https?:\/\/(www\.)?github\.com/, '')
+        .split('/');
+      const username = repoUrlParts[1];
+      const repoName = repoUrlParts[2];
+
+      if (!username || !repoName) {
+        setVerificationChecks({
+          repositoryExists: 'error',
+          readmeExists: 'pending',
+          projectUrlExists: 'pending',
+        });
+
+        throw new Error('Invalid GitHub repository URL');
+      }
+
+      const mainApiUrl = `https://api.github.com/repos/${username}/${repoName}`;
+
+      const allContentsUrl = `${mainApiUrl}/contents`;
+      const allContentsResponse = await fetch(allContentsUrl);
+      if (!allContentsResponse.ok) {
+        setVerificationChecks({
+          repositoryExists: 'error',
+          readmeExists: 'pending',
+          projectUrlExists: 'pending',
+        });
+
+        if (allContentsResponse?.status === 404) {
+          throw new Error(
+            'Repository not found. Make sure it exists and is public.',
+          );
+        }
+
+        throw new Error('Failed to fetch repository contents');
+      }
+
+      const allContentsData = await allContentsResponse.json();
+      if (!Array.isArray(allContentsData)) {
+        setVerificationChecks({
+          repositoryExists: 'error',
+          readmeExists: 'pending',
+          projectUrlExists: 'pending',
+        });
+
+        throw new Error('Failed to fetch repository contents');
+      }
+
+      const readmeFile = allContentsData.find(
+        (file) => file.name.toLowerCase() === 'readme.md',
+      );
+      if (!readmeFile || !readmeFile.url) {
+        setVerificationChecks({
+          repositoryExists: 'success',
+          readmeExists: 'error',
+          projectUrlExists: 'pending',
+        });
+
+        throw new Error('Readme file not found');
+      }
+
+      const readmeUrl = readmeFile.url;
+      const response = await fetch(readmeUrl);
+      if (!response.ok || response.status === 404) {
+        setVerificationChecks({
+          repositoryExists: 'success',
+          readmeExists: 'error',
+          projectUrlExists: 'pending',
+        });
+
+        throw new Error('Readme file not found');
+      }
+
+      const data = await response.json();
+      if (!data.content) {
+        setVerificationChecks({
+          repositoryExists: 'success',
+          readmeExists: 'error',
+          projectUrlExists: 'pending',
+        });
+
+        throw new Error('Readme file not found');
+      }
+
+      const readmeContent = window.atob(data.content);
+      if (!readmeContent.includes(projectUrl)) {
+        setVerificationChecks({
+          repositoryExists: 'success',
+          readmeExists: 'success',
+          projectUrlExists: 'error',
+        });
+
+        throw new Error('Add the project page URL to the readme file');
+      }
+
+      setVerificationChecks({
+        repositoryExists: 'success',
+        readmeExists: 'success',
+        projectUrlExists: 'success',
+      });
+
+      const submitProjectUrl = `${import.meta.env.PUBLIC_API_URL}/v1-submit-project/${projectId}`;
+      const { response: submitResponse, error } =
+        await httpPost<SubmitProjectResponse>(submitProjectUrl, {
+          repositoryUrl: repoUrl,
+        });
+
+      if (error || !submitResponse) {
+        throw new Error(
+          error?.message || 'Error submitting project. Please try again!',
+        );
+      }
+
+      setSuccessMessage('Solution submitted successfully!');
+      setIsLoading(false);
+
+      onSubmit(submitResponse);
+    } catch (error: any) {
+      console.error(error);
+      setError(error?.message || 'Failed to verify repository');
+      setIsLoading(false);
+    }
+  };
+
+  if (successMessage) {
+    return (
+      <Modal onClose={onClose} bodyClassName="h-auto p-4">
+        <div className="flex flex-col items-center justify-center gap-4 pb-10 pt-12">
+          <ReactCheckIcon additionalClasses={'h-12 text-green-500 w-12'} />
+          <p className="text-lg font-medium">{successMessage}</p>
+        </div>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal onClose={onClose} bodyClassName="h-auto p-4">
+      <h2 className="mb-2 flex items-center gap-2.5 text-xl font-semibold">
+        <GitHubIcon className="h-6 w-6 text-black" /> Submit Solution URL
+      </h2>
+      <p className="text-sm text-gray-500">
+        Submit the URL of your GitHub repository with the solution.
+      </p>
+
+      <div className="my-4 flex flex-col gap-1">
+        <SubmissionRequirement
+          isLoading={isLoading}
+          status={verificationChecks.repositoryExists}
+        >
+          URL must point to a public GitHub repository
+        </SubmissionRequirement>
+        <SubmissionRequirement
+          isLoading={isLoading}
+          status={verificationChecks.readmeExists}
+        >
+          Repository must contain a README file
+        </SubmissionRequirement>
+        <SubmissionRequirement
+          isLoading={isLoading}
+          status={verificationChecks.projectUrlExists}
+        >
+          README file must contain the{' '}
+          <button
+            className={
+              'font-medium underline underline-offset-2 hover:text-purple-700'
+            }
+            onClick={() => {
+              copyText(projectUrl);
+            }}
+          >
+            {!isCopied && (
+              <>
+                project URL{' '}
+                <CopyIcon
+                  className="relative -top-0.5 inline-block h-3 w-3"
+                  strokeWidth={2.5}
+                />
+              </>
+            )}
+            {isCopied && (
+              <>
+                copied URL{' '}
+                <CheckIcon
+                  className="relative -top-0.5 inline-block h-3 w-3"
+                  strokeWidth={2.5}
+                />
+              </>
+            )}
+          </button>
+        </SubmissionRequirement>
+      </div>
+
+      <form className="mt-4" onSubmit={handleSubmit}>
+        <input
+          type="text"
+          className="w-full rounded-lg border border-gray-300 p-2 text-sm focus:border-gray-500 focus:outline-none"
+          placeholder="https://github.com/you/solution-repo"
+          value={repoUrl}
+          onChange={(e) => setRepoUrl(e.target.value)}
+        />
+
+        <button
+          type="submit"
+          className="mt-2 w-full rounded-lg bg-black p-2 font-medium text-white disabled:opacity-50 text-sm"
+          disabled={isLoading}
+        >
+          {isLoading ? 'Verifying...' : 'Verify and Submit'}
+        </button>
+        {error && (
+          <p className="mt-2 text-sm font-medium text-red-500">{error}</p>
+        )}
+
+        {successMessage && (
+          <p className="mt-2 text-sm font-medium text-green-500">
+            {successMessage}
+          </p>
+        )}
+      </form>
+
+      <button
+        className="absolute right-2.5 top-2.5 text-gray-600 hover:text-black"
+        onClick={onClose}
+      >
+        <X className="h-5 w-5" />
+      </button>
+    </Modal>
+  );
+}

src/components/Projects/VoteButton.tsx

@@ -0,0 +1,35 @@
+import { cn } from '../../lib/classname.ts';
+import { type LucideIcon, ThumbsUp } from 'lucide-react';
+
+type VoteButtonProps = {
+  icon: LucideIcon;
+  isActive: boolean;
+  count: number;
+  hideCount?: boolean;
+  onClick: () => void;
+};
+export function VoteButton(props: VoteButtonProps) {
+  const { icon: VoteIcon, isActive, hideCount = false, count, onClick } = props;
+  return (
+    <button
+      className={cn(
+        'flex gap-1 px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-black focus:outline-none',
+        {
+          'bg-gray-100 text-orange-600 hover:text-orange-700': isActive,
+          'bg-transparent text-gray-500 hover:text-black': !isActive,
+        },
+      )}
+      disabled={isActive}
+      onClick={onClick}
+    >
+      <VoteIcon className={cn('size-3.5 stroke-[2.5px]', {
+          'top-[1.5px] relative mr-0.5': hideCount
+      })} />
+      {!hideCount && (
+        <span className="relative -top-[0.5px] text-xs font-medium tabular-nums">
+          {count}
+        </span>
+      )}
+    </button>
+  );
+}

src/components/RoadmapDropdownMenu/RoadmapDropdownMenu.tsx

@@ -0,0 +1,93 @@
+import { ChevronDown, Globe, Menu, Sparkles, Waypoints } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import { cn } from '../../lib/classname';
+import {
+  navigationDropdownOpen,
+  roadmapsDropdownOpen,
+} from '../../stores/page.ts';
+import { useStore } from '@nanostores/react';
+
+const links = [
+  {
+    link: '/roadmaps',
+    label: 'Official Roadmaps',
+    description: 'Made by subject matter experts',
+    Icon: Waypoints,
+  },
+  {
+    link: '/ai/explore',
+    label: 'AI Roadmaps',
+    description: 'Generate roadmaps with AI',
+    Icon: Sparkles,
+  },
+  {
+    link: '/community',
+    label: 'Community Roadmaps',
+    description: 'Made by community members',
+    Icon: Globe,
+  },
+];
+
+export function RoadmapDropdownMenu() {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const $roadmapsDropdownOpen = useStore(roadmapsDropdownOpen);
+  const $navigationDropdownOpen = useStore(navigationDropdownOpen);
+
+  useOutsideClick(dropdownRef, () => {
+    roadmapsDropdownOpen.set(false);
+  });
+
+  useEffect(() => {
+    if ($navigationDropdownOpen) {
+      roadmapsDropdownOpen.set(false);
+    }
+  }, [$navigationDropdownOpen]);
+
+  return (
+    <div className="relative flex items-center" ref={dropdownRef}>
+      <button
+        className={cn('text-gray-400 hover:text-white', {
+          'text-white': $roadmapsDropdownOpen,
+        })}
+        onClick={() => roadmapsDropdownOpen.set(true)}
+        onMouseOver={() => roadmapsDropdownOpen.set(true)}
+        aria-label="Open Navigation Dropdown"
+        aria-expanded={$roadmapsDropdownOpen}
+      >
+        Roadmaps{' '}
+        <ChevronDown className="inline-block h-3 w-3" strokeWidth={4} />
+      </button>
+      <div
+        className={cn(
+          'pointer-events-none invisible absolute left-0 top-full z-[999] mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-2xl transition-all duration-100',
+          {
+            'pointer-events-auto visible translate-y-2.5 opacity-100':
+              $roadmapsDropdownOpen,
+          },
+        )}
+        role="menu"
+      >
+        {links.map((link) => (
+          <a
+            href={link.link}
+            key={link.link}
+            className="group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700"
+            role="menuitem"
+          >
+            <span className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-slate-600 transition-colors group-hover:bg-slate-500 group-hover:text-slate-100">
+              <link.Icon className="inline-block h-5 w-5" />
+            </span>
+            <span className="flex flex-col">
+              <span className="font-medium text-slate-300 transition-colors group-hover:text-slate-100">
+                {link.label}
+              </span>
+              <span className="text-sm">{link.description}</span>
+            </span>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/TeamDropdown/TeamDropdown.tsx

@@ -32,24 +32,6 @@ export function TeamDropdown() {
   const user = useAuth();
   const { teamId } = useTeamId();
 
-  const [shouldShowTeamsIndicator, setShouldShowTeamsIndicator] =
-    useState(false);
-
-  useEffect(() => {
-    // Show team dropdown "New" indicator to first 3 refreshes
-    const viewedTeamsCount = localStorage.getItem('viewedTeamsCount');
-    const viewedTeamsCountNumber = parseInt(viewedTeamsCount || '0', 10);
-    const shouldShowTeamIndicator = viewedTeamsCountNumber < 5;
-
-    setShouldShowTeamsIndicator(shouldShowTeamIndicator);
-    if (shouldShowTeamIndicator) {
-      localStorage.setItem(
-        'viewedTeamsCount',
-        (viewedTeamsCountNumber + 1).toString(),
-      );
-    }
-  }, []);
-
   const teamList = useStore($teamList);
   const currentTeam = useStore($currentTeam);
 
@@ -102,15 +84,6 @@ export function TeamDropdown() {
       <div className="relative mr-2">
         <span className="mb-2 flex items-center justify-between text-xs uppercase text-gray-400">
           <span>Choose Team</span>
-
-          {shouldShowTeamsIndicator && (
-            <span className="mr-1 inline-flex h-1 w-1 items-center justify-center font-medium text-blue-300">
-              <span className="relative flex items-center">
-                <span className="relative rounded-full bg-gray-200 p-1 text-xs" />
-                <span className="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs" />
-              </span>
-            </span>
-          )}
         </span>
         <button
           className="relative flex w-full cursor-pointer items-center justify-between rounded border p-2 text-sm hover:bg-gray-100"

src/components/TopicDetail/TopicDetail.tsx

@@ -32,6 +32,18 @@ import { YouTubeIcon } from '../ReactIcons/YouTubeIcon.tsx';
 import { resourceTitleFromId } from '../../lib/roadmap.ts';
 import { lockBodyScroll } from '../../lib/dom.ts';
 
+export const allowedRoadmapResourceTypes = ['course', 'book', 'other'] as const;
+export type AllowedRoadmapResourceType =
+  (typeof allowedRoadmapResourceTypes)[number];
+
+type TopicResource = {
+  _id?: string;
+  title: string;
+  type: AllowedRoadmapResourceType;
+  url: string;
+  topicIds: string[];
+};
+
 type TopicDetailProps = {
   resourceTitle?: string;
   resourceType?: ResourceType;
@@ -50,7 +62,7 @@ const linkTypes: Record<AllowedLinkTypes, string> = {
   video: 'bg-purple-300',
   website: 'bg-blue-300',
   official: 'bg-blue-600 text-white',
-  feed: "bg-[#ce3df3] text-white"
+  feed: 'bg-[#ce3df3] text-white',
 };
 
 export function TopicDetail(props: TopicDetailProps) {
@@ -69,6 +81,8 @@ export function TopicDetail(props: TopicDetailProps) {
   const [links, setLinks] = useState<RoadmapContentDocument['links']>([]);
   const toast = useToast();
 
+  const [topicResources, setTopicResources] = useState<TopicResource[]>([]);
+
   const { secret } = getUrlParams() as { secret: string };
   const isGuest = useMemo(() => !isLoggedIn(), []);
   const topicRef = useRef<HTMLDivElement>(null);
@@ -87,6 +101,20 @@ export function TopicDetail(props: TopicDetailProps) {
     setIsActive(false);
   });
 
+  const loadTopicResources = async (roadmapId: string, topicId: string) => {
+    const sanitizedTopicId = topicId.split('@')?.[1] || topicId;
+    const { response, error } = await httpGet<TopicResource[]>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-list-topic-resources/${roadmapId}?t=${sanitizedTopicId}`,
+    );
+
+    if (error) {
+      toast.error(error?.message || 'Failed to load topic resources');
+      return;
+    }
+
+    setTopicResources(response || []);
+  };
+
   // Toggle topic is available even if the component UI is not active
   // This is used on the best practice screen where we have the checkboxes
   // to mark the topic as done/undone.
@@ -151,114 +179,125 @@ export function TopicDetail(props: TopicDetailProps) {
       }`;
     }
 
-    httpGet<string | RoadmapContentDocument>(
-      topicUrl,
-      {},
-      {
-        ...(!isCustomResource && {
-          headers: {
-            Accept: 'text/html',
-          },
-        }),
-      },
-    )
-      .then(({ response }) => {
-        if (!response) {
-          setError('Topic not found.');
-          setIsLoading(false);
-          return;
-        }
-        let topicHtml = '';
-        if (!isCustomResource) {
-          const topicDom = new DOMParser().parseFromString(
-            response as string,
-            'text/html',
-          );
+    Promise.all([
+      httpGet<string | RoadmapContentDocument>(
+        topicUrl,
+        {},
+        {
+          ...(!isCustomResource && {
+            headers: {
+              Accept: 'text/html',
+            },
+          }),
+        },
+      )
+        .then(({ response }) => {
+          if (!response) {
+            setError('Topic not found.');
+            setIsLoading(false);
+            return;
+          }
+          let topicHtml = '';
+          if (!isCustomResource) {
+            const topicDom = new DOMParser().parseFromString(
+              response as string,
+              'text/html',
+            );
 
-          const links = topicDom.querySelectorAll('a');
-          const urlElem: HTMLElement =
-            topicDom.querySelector('[data-github-url]')!;
-          const contributionUrl = urlElem?.dataset?.githubUrl || '';
+            const links = topicDom.querySelectorAll('a');
+            const urlElem: HTMLElement =
+              topicDom.querySelector('[data-github-url]')!;
+            const contributionUrl = urlElem?.dataset?.githubUrl || '';
 
-          const titleElem: HTMLElement = topicDom.querySelector('h1')!;
-          const otherElems = topicDom.querySelectorAll('body > *:not(h1, div)');
+            const titleElem: HTMLElement = topicDom.querySelector('h1')!;
+            const otherElems = topicDom.querySelectorAll(
+              'body > *:not(h1, div)',
+            );
 
-          let ulWithLinks: HTMLUListElement = document.createElement('ul');
+            let ulWithLinks: HTMLUListElement = document.createElement('ul');
 
-          // we need to remove the `ul` with just links (i.e. resource links)
-          // and show them separately.
-          topicDom.querySelectorAll('ul').forEach((ul) => {
-            const lisWithJustLinks = Array.from(
-              ul.querySelectorAll('li'),
-            ).filter((li) => {
-              return (
-                li.children.length === 1 &&
-                li.children[0].tagName === 'A' &&
-                li.children[0].textContent === li.textContent
-              );
+            // we need to remove the `ul` with just links (i.e. resource links)
+            // and show them separately.
+            topicDom.querySelectorAll('ul').forEach((ul) => {
+              const lisWithJustLinks = Array.from(
+                ul.querySelectorAll('li'),
+              ).filter((li) => {
+                return (
+                  li.children.length === 1 &&
+                  li.children[0].tagName === 'A' &&
+                  li.children[0].textContent === li.textContent
+                );
+              });
+
+              if (lisWithJustLinks.length > 0) {
+                ulWithLinks = ul;
+              }
             });
 
-            if (lisWithJustLinks.length > 0) {
-              ulWithLinks = ul;
+            const listLinks = Array.from(ulWithLinks.querySelectorAll('li > a'))
+              .map((link, counter) => {
+                const typePattern = /@([a-z.]+)@/;
+                let linkText = link.textContent || '';
+                const linkHref = link.getAttribute('href') || '';
+                const linkType = linkText.match(typePattern)?.[1] || 'article';
+
+                linkText = linkText.replace(typePattern, '');
+
+                return {
+                  id: `link-${linkHref}-${counter}`,
+                  title: linkText,
+                  url: linkHref,
+                  type: linkType as AllowedLinkTypes,
+                };
+              })
+              .sort((a, b) => {
+                // official at the top
+                // opensource at second
+                // article at third
+                // videos at fourth
+                // rest at last
+                const order = [
+                  'official',
+                  'opensource',
+                  'article',
+                  'video',
+                  'feed',
+                ];
+                return order.indexOf(a.type) - order.indexOf(b.type);
+              });
+
+            if (ulWithLinks) {
+              ulWithLinks.remove();
             }
-          });
 
-          const listLinks = Array.from(ulWithLinks.querySelectorAll('li > a'))
-            .map((link, counter) => {
-              const typePattern = /@([a-z.]+)@/;
-              let linkText = link.textContent || '';
-              const linkHref = link.getAttribute('href') || '';
-              const linkType = linkText.match(typePattern)?.[1] || 'article';
+            topicHtml = topicDom.body.innerHTML;
 
-              linkText = linkText.replace(typePattern, '');
+            setLinks(listLinks);
+            setHasContent(otherElems.length > 0);
+            setContributionUrl(contributionUrl);
+            setHasEnoughLinks(links.length >= 3);
+            setTopicHtmlTitle(titleElem?.textContent || '');
+          } else {
+            setLinks((response as RoadmapContentDocument)?.links || []);
+            setTopicTitle((response as RoadmapContentDocument)?.title || '');
 
-              return {
-                id: `link-${linkHref}-${counter}`,
-                title: linkText,
-                url: linkHref,
-                type: linkType as AllowedLinkTypes,
-              };
-            })
-            .sort((a, b) => {
-              // official at the top
-              // opensource at second
-              // article at third
-              // videos at fourth
-              // rest at last
-              const order = ['official', 'opensource', 'article', 'video', 'feed'];
-              return order.indexOf(a.type) - order.indexOf(b.type);
-            });
+            const sanitizedMarkdown = sanitizeMarkdown(
+              (response as RoadmapContentDocument).description || '',
+            );
 
-          if (ulWithLinks) {
-            ulWithLinks.remove();
+            setHasContent(sanitizedMarkdown?.length > 0);
+            topicHtml = markdownToHtml(sanitizedMarkdown, false);
           }
 
-          topicHtml = topicDom.body.innerHTML;
-
-          setLinks(listLinks);
-          setHasContent(otherElems.length > 0);
-          setContributionUrl(contributionUrl);
-          setHasEnoughLinks(links.length >= 3);
-          setTopicHtmlTitle(titleElem?.textContent || '');
-        } else {
-          setLinks((response as RoadmapContentDocument)?.links || []);
-          setTopicTitle((response as RoadmapContentDocument)?.title || '');
-
-          const sanitizedMarkdown = sanitizeMarkdown(
-            (response as RoadmapContentDocument).description || '',
-          );
-
-          setHasContent(sanitizedMarkdown?.length > 0);
-          topicHtml = markdownToHtml(sanitizedMarkdown, false);
-        }
-
-        setIsLoading(false);
-        setTopicHtml(topicHtml);
-      })
-      .catch((err) => {
-        setError('Something went wrong. Please try again later.');
-        setIsLoading(false);
-      });
+          setIsLoading(false);
+          setTopicHtml(topicHtml);
+        })
+        .catch((err) => {
+          setError('Something went wrong. Please try again later.');
+          setIsLoading(false);
+        }),
+      loadTopicResources(resourceId, topicId),
+    ]);
   });
 
   useEffect(() => {
@@ -424,47 +463,52 @@ export function TopicDetail(props: TopicDetailProps) {
               )}
 
               {/* Contribution */}
-              {canSubmitContribution && !hasEnoughLinks && contributionUrl && hasContent && (
-                <div className="mb-12 mt-3 border-t text-sm text-gray-400 sm:mt-12">
-                  <div className="mb-4 mt-3">
-                    <p className="">
-                      Find more resources using these pre-filled search queries:
-                    </p>
-                    <div className="mt-3 flex gap-2  text-gray-700">
-                      <a
-                        href={googleSearchUrl}
-                        target="_blank"
-                        className="flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 text-xs hover:border-gray-700 hover:bg-gray-100"
-                      >
-                        <GoogleIcon className={'h-4 w-4'} />
-                        Google
-                      </a>
-                      <a
-                        href={youtubeSearchUrl}
-                        target="_blank"
-                        className="flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 text-xs hover:border-gray-700 hover:bg-gray-100"
-                      >
-                        <YouTubeIcon className={'h-4 w-4 text-red-500'} />
-                        YouTube
-                      </a>
+              {canSubmitContribution &&
+                !hasEnoughLinks &&
+                contributionUrl &&
+                hasContent && (
+                  <div className="mb-12 mt-3 border-t text-sm text-gray-400 sm:mt-12">
+                    <div className="mb-4 mt-3">
+                      <p className="">
+                        Find more resources using these pre-filled search
+                        queries:
+                      </p>
+                      <div className="mt-3 flex gap-2 text-gray-700">
+                        <a
+                          href={googleSearchUrl}
+                          target="_blank"
+                          className="flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 text-xs hover:border-gray-700 hover:bg-gray-100"
+                        >
+                          <GoogleIcon className={'h-4 w-4'} />
+                          Google
+                        </a>
+                        <a
+                          href={youtubeSearchUrl}
+                          target="_blank"
+                          className="flex items-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 pl-2 text-xs hover:border-gray-700 hover:bg-gray-100"
+                        >
+                          <YouTubeIcon className={'h-4 w-4 text-red-500'} />
+                          YouTube
+                        </a>
+                      </div>
                     </div>
-                  </div>
 
-                  <p className="mb-2 mt-2 leading-relaxed">
-                    This popup should be a brief introductory paragraph for the topic and a few links
-                    to good articles, videos, or any other self-vetted resources. Please consider
-                    submitting a PR to improve this content.
-                  </p>
-                  <a
-                    href={contributionUrl}
-                    target={'_blank'}
-                    className="flex w-full items-center justify-center rounded-md bg-gray-800 p-2 text-sm text-white transition-colors hover:bg-black hover:text-white disabled:bg-green-200 disabled:text-black"
-                  >
-                    <GitHubIcon className="mr-2 inline-block h-4 w-4 text-white" />
-                    Help us Improve this Content
-                  </a>
-                </div>
-              )}
+                    <p className="mb-2 mt-2 leading-relaxed">
+                      This popup should be a brief introductory paragraph for
+                      the topic and a few links to good articles, videos, or any
+                      other self-vetted resources. Please consider submitting a
+                      PR to improve this content.
+                    </p>
+                    <a
+                      href={contributionUrl}
+                      target={'_blank'}
+                      className="flex w-full items-center justify-center rounded-md bg-gray-800 p-2 text-sm text-white transition-colors hover:bg-black hover:text-white disabled:bg-green-200 disabled:text-black"
+                    >
+                      <GitHubIcon className="mr-2 inline-block h-4 w-4 text-white" />
+                      Help us Improve this Content
+                    </a>
+                  </div>
+                )}
             </div>
             {resourceId === 'devops' && (
               <div className="mt-4">
@@ -528,4 +572,4 @@ export function TopicDetail(props: TopicDetailProps) {
       <div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
     </div>
   );
-}
+}

src/components/courses/CourseStep.astro

@@ -0,0 +1,84 @@
+---
+import { Swords } from 'lucide-react';
+---
+
+<div class='flex flex-col'>
+  <div
+    class='-ml-[27.6px] mb-3 flex items-center text-sm leading-none text-gray-400'
+  >
+    <span class='h-3 w-3 rounded-full bg-black'></span>
+    <span class='h-[1px] w-[15px] bg-black'></span>
+    <h2 class='rounded-md border border-black bg-black px-3 py-2 text-white'>
+      Step 1 — Learn the absolute basics i.e. HTML and CSS
+    </h2>
+  </div>
+
+  <p class='mb-2 text-sm text-gray-500'>
+    Purchase and watch one of the following <span class='font-medium text-black'
+      >premium courses</span
+    >
+  </p>
+
+  <div class='rounded-lg border p-3'>
+    <ul class='flex flex-col gap-1 text-sm'>
+      <li>
+        <a href='#' class='group font-medium text-gray-800 hover:text-black'>
+          <span
+            class='mr-1.5 inline-block rounded bg-green-300 px-1.5 py-0.5 text-xs uppercase text-black no-underline'
+          >
+            Course
+          </span>
+
+          <span class='underline underline-offset-1'
+            >HTML and CSS with Mosh</span
+          >
+        </a>
+      </li>
+      <li>
+        <a href='#' class='group font-medium text-gray-800 hover:text-black'>
+          <span
+            class='mr-1.5 inline-block rounded bg-green-300 px-1.5 py-0.5 text-xs uppercase text-black no-underline'
+          >
+            Course
+          </span>
+
+          <span class='underline underline-offset-1'
+            >Learn HTML with 50 Projects</span
+          >
+        </a>
+      </li>
+    </ul>
+  </div>
+
+  <p class='mt-3 text-sm text-gray-500'>
+    Once done, build the <span class='font-medium text-black'
+      >following projects</span
+    > to test and practice your skills
+  </p>
+
+  <div class='mt-3 flex flex-col gap-1'>
+    <a
+      href='/projects/task-tracker'
+      class='flex items-center gap-2 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
+    >
+      <Swords size='1.25em' className='text-gray-400' />
+      Build a login page for a website.
+    </a>
+
+    <a
+      href='/projects/task-tracker'
+      class='flex items-center gap-2 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
+    >
+      <Swords size='1.25em' className='text-gray-400' />
+      Create a landing page for an e-commerce website.
+    </a>
+
+    <a
+      href='/projects/task-tracker'
+      class='flex items-center gap-2 rounded-md bg-zinc-100 px-2 py-1.5 text-sm text-black transition-colors hover:bg-zinc-300'
+    >
+      <Swords size='1.25em' className='text-gray-400' />
+      Create a responsive website for a restaurant.
+    </a>
+  </div>
+</div>

src/components/courses/Milestone.astro

@@ -0,0 +1,29 @@
+---
+import { Flag } from 'lucide-react';
+---
+
+<div class='flex flex-col'>
+  <p
+    class='-ml-[37px] mb-3 flex items-center text-sm leading-none text-gray-400'
+  >
+    <span
+      class='relative flex h-8 w-8 items-center justify-center rounded-full bg-green-600 text-white'
+    >
+      <Flag size='1.2em' />
+    </span>
+    <span class='h-[2px] w-[4.5px] bg-green-600'></span>
+    <span
+      class='rounded-md border border-green-600 bg-green-600 px-3 py-2 text-white'
+    >
+      You are ready to apply for jobs
+    </span>
+  </p>
+
+  <p class='mb-2 text-sm text-gray-500'>
+    At this point, you should have a solid understanding of basic front-end development concepts and be able to build simple websites. Start applying for jobs, while continuing to learn and improve your skills.
+  </p>
+
+  <p class='mb-2 text-sm text-gray-500'>
+    You might have a difficult time finding a job at this stage, but don't get discouraged. Keep applying and improving your skills. You can also consider contributing to open-source projects to gain experience and build your portfolio.
+  </p>
+</div>

src/data/best-practices/api-security/content/x-frame-options-deny.md

@@ -3,3 +3,5 @@
 > Send `X-Frame-Options: deny` header.
 
 The `X-Frame-Options` header prevents the page from being displayed in an iframe, which is commonly used in clickjacking attacks. By setting the value of this header to `deny`, you are telling the browser not to display the page in any iframe. This helps prevent the page from being embedded within an attacker's website and reduces the risk of clickjacking attacks.
+
+- [@video@Tutorial - X-Frame-Options HTTP Header and Click-Jacking](https://www.youtube.com/watch?v=Els0GRj0CQM)

src/data/best-practices/backend-performance/content/prometheus-graphana.md

@@ -1,3 +1,5 @@
 # Backend Monitoring with Prometheus, Grafana, ELK Stack
 
-Efficiency and rate of performance are paramount for the backend processes in web applications. Utilizing performance monitoring tools such as Prometheus, Grafana, and the ELK Stack ensures that any issues impacting performance can be promptly identified and rectified. For example, Prometheus offers robust monitoring capabilities by collecting numeric time series data, presenting a detailed insight into the application's performance metrics. Grafana can visualize this data in an accessible, user-friendly way, helping developers to interpret complex statistics and notice trends or anomalies. Meanwhile, the ELK Stack (Elasticsearch, Logstash, Kibana) provides log management solutions, making it possible to search and analyze logs for indications of backend issues. By using these tools, developers can effectively keep backend performance at optimal levels, ensuring smoother user experiences.
+Efficiency and rate of performance are paramount for the backend processes in web applications. Utilizing performance monitoring tools such as Prometheus, Grafana, and the ELK Stack ensures that any issues impacting performance can be promptly identified and rectified. For example, Prometheus offers robust monitoring capabilities by collecting numeric time series data, presenting a detailed insight into the application's performance metrics. Grafana can visualize this data in an accessible, user-friendly way, helping developers to interpret complex statistics and notice trends or anomalies. Meanwhile, the ELK Stack (Elasticsearch, Logstash, Kibana) provides log management solutions, making it possible to search and analyze logs for indications of backend issues. By using these tools, developers can effectively keep backend performance at optimal levels, ensuring smoother user experiences.
+
+- [@video@Tutorial - Grafana Explained in 3 minutes](https://www.youtube.com/watch?v=X-GLqyMZaJk)

src/data/best-practices/backend-performance/content/up-to-date.md

@@ -1,3 +1,5 @@
 # Maintaining Updated Dependencies
 
-Keeping your dependencies up to date is crucial for optimizing backend performance in web applications. Regular updates bring new features, improvements, and important patches for security vulnerabilities that could harm the performance and security of your application. An outdated package, for example, may run inefficiently or even prevent other components from functioning at peak performance. This creates a ripple effect that could slow down or disrupt entire processes. Therefore, staying current with all updates enhances the robustness and operational efficiency, contributing to faster load times, better stability, and ultimately, an improved user experience.
+Keeping your dependencies up to date is crucial for optimizing backend performance in web applications. Regular updates bring new features, improvements, and important patches for security vulnerabilities that could harm the performance and security of your application. An outdated package, for example, may run inefficiently or even prevent other components from functioning at peak performance. This creates a ripple effect that could slow down or disrupt entire processes. Therefore, staying current with all updates enhances the robustness and operational efficiency, contributing to faster load times, better stability, and ultimately, an improved user experience.
+
+[@video@Tutorial - dependabot on GitHub](https://www.youtube.com/watch?v=TnBEVPUsuAw)

src/data/best-practices/code-review/content/change-functioning.md

@@ -1,6 +1,6 @@
 # Verify the Change in Production.
 
-Veryfing the change is a crucial step in the code review process that ensures the recently merged changes work correctly and do not cause any unexpected disruptions when deployed to the live production environment. Rigorous testing before deployment helps minimize the risks, but having an additional layer of validation post-deployment provides you with the confidence that your code changes are working as intended while interacting with real users and production data. To make sure of this, consider the following tips:
+Verifying the change is a crucial step in the code review process that ensures the recently merged changes work correctly and do not cause any unexpected disruptions when deployed to the live production environment. Rigorous testing before deployment helps minimize the risks, but having an additional layer of validation post-deployment provides you with the confidence that your code changes are working as intended while interacting with real users and production data. To make sure of this, consider the following tips:
 
 - Implement automated monitoring and alerting systems to keep track of your application's key performance indicators (KPIs) and notify you in case of a significant change in the metrics.
 
@@ -10,4 +10,4 @@ Veryfing the change is a crucial step in the code review process that ensures th
 
 - Observe user interaction through user analytics, bug reports, or direct feedback to assess whether the code change has had the intended impact and is positively affecting the user experience.
 
-- Establish strategies for gradual deployment, such as canary or blue-green deployments, to minimize the potential impact of a problematic change on your entire user base and ensure smoother rollback if needed.
+- Establish strategies for gradual deployment, such as canary or blue-green deployments, to minimize the potential impact of a problematic change on your entire user base and ensure smoother rollback if needed.

src/data/guides/devops-career-path.md

@@ -0,0 +1,235 @@
+---
+title: 'Is DevOps engineering a good career path in @currentYear@?'
+description: 'Learn why a DevOps career path is a smart choice in 2024. Get insights into demand, growth, and earning potential in DevOps.'
+authorId: ekene
+excludedBySlug: '/devops/career-path'
+seo:
+  title: 'Is DevOps engineering a good career path in @currentYear@?'
+  description: 'Learn why a DevOps career path is a smart choice in 2024. Get insights into demand, growth, and earning potential in DevOps.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/devops-engineer-career-path-2h4r7.jpg'
+isNew: true
+type: 'textual'
+date: 2024-08-20
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![Is it worth learning DevOps as a career path?](https://assets.roadmap.sh/guest/devops-engineer-career-path-2h4r7.jpg)
+
+Making career choices could be overwhelming for beginners and experienced software developers seeking to advance their skills. This could be due to several factors, such as the abundance of options, the numerous resources on the internet, the steep learning curves, and so on.
+
+However, before selecting a path, it is helpful to look at certain factors, such as your interests, strengths, and the future prospects of the career path, as these factors play a crucial role in determining your potential for success.
+
+[DevOps engineering](https://roadmap.sh/devops) is one of the most [in-demand and highest](https://uk.indeed.com/career-advice/career-development/software-engineering-jobs)[-](https://uk.indeed.com/career-advice/career-development/software-engineering-jobs)[paying roles](https://uk.indeed.com/career-advice/career-development/software-engineering-jobs) in the tech industry and, in recent times, has become the go-to choice for many people getting into tech and experienced tech professionals.
+As a DevOps professional, you'll enjoy spectacular career growth filled with endless opportunities.
+
+The DevOps philosophy involves bringing developers and operation teams together to improve the software delivery process.
+
+This guide will detail DevOps and provide the necessary information to help you decide whether to pursue the Devops engineer career path and steps to ensure a DevOps career growth.
+
+## What is DevOps?
+
+Derived from the combination of development (Dev) and operations (Ops), DevOps is a software development methodology that aims to improve collaboration between development and operations teams, increase the efficiency, security, and speed of software development and delivery.
+
+![DevOps](https://assets.roadmap.sh/guest/devops-8vc2m.jpg)
+
+Within DevOps, you'll play an important part in the entire software development lifecycle - from initial planning to implementation. This means you'll be a team player with excellent communication skills.
+
+## Is DevOps engineer career path right for you?
+
+DevOps is a field that's here to stay. The DevOps market grew to an incredible $10.3 billion at the end of 2023 and it is growing. Hence, securing a DevOps role is your first step toward a long-lasting career.
+
+DevOps career paths are worth considering if you have experience in software development, networking, or operations. It involves automation, testing, monitoring, configuring, networking, and Infrastructure as Code (IaC) and requires a diverse skill set as discussed below. It is a bridge between development and operations teams.
+
+These are some factors to consider before choosing the DevOps engineer career path:
+
+- Interest in automation
+- Enjoy collaborating
+- Interest in infrastructure management
+- Love for problem-solving
+- Willingness to continuously learn new skills and technology
+
+### Interest in automation
+
+Automation is an integral part of the DevOps career path. It involves writing scripts and code to automate repetitive tasks and enhance software delivery processes.  By automating repetitive tasks and workflows, DevOps teams can increase efficiency, reduce errors, and accelerate time to market for software releases.
+
+### Enjoy collaborating
+
+Collaboration is crucial in the DevOps career, as you will work with different people across several teams. The goal is to break down the silos across teams and ensure they all work together to achieve the same goal. Having great collaboration skills is crucial to being a DevOps engineer.
+
+### Interest in infrastructure management
+
+Do you enjoy working on infrastructural rather than domain code? The plus side of infrastructural code is that it can be replicated across several infrastructures once it is set up, and you can transfer the knowledge to other organizations instead of domain code, where you would always need to learn the domain of the business you are writing code for.
+
+### Love for problem-solving
+
+Choosing this field requires that you enjoy solving problems and can devise solutions to complex problems.
+
+### Willingness to continuously learn new skills and technology
+
+DevOps is an evolving field, and there is always something new. To be up to date, you have to be willing and open to continuous learning. This involves taking courses, reading articles, and getting updates on things happening in the DevOps field and tech.
+
+It is worth noting that working in DevOps involves working in high-pressure environments. You are constantly relied on to manage an organization's IT and new and existing cloud systems, which can sometimes be overwhelming.
+
+Also, there is a steep learning curve. As a tech beginner, it could be daunting and challenging to get into DevOps and adapt the DevOps culture, but as you go along, it gets easier.
+
+## DevOps in 2024
+
+According to [Statista](https://www.statista.com/statistics/1367003/in-demand-it-roles/), DevOps software engineering positions are among the top technical positions demanded by recruiters worldwide in 2023. Indeed reported that the average annual salary of [DevOps engineer](https://www.indeed.com/career/development-operations-engineer/salaries?from=top_sb) in the USA is $124,392.
+
+DevOps has evolved over the last decade. Today, it is more than automating tasks and having engineers write scripts. It is now more about practices that can help to automate software delivery, improve business and the overall software development processes.
+
+Certain trends are impacting the DevOps market currently and will also play a role in the future of DevOps. Some of them include:
+
+- Microservices
+- Cloud technology
+- Automation and CI/CD
+- Artificial Intelligence and Machine Learning
+
+Let's look at these trends and how they indirectly influence your decision.
+
+### Microservices
+
+This architecture enables the agile development and continuous delivery of software solutions. In a microservice architecture, applications are split into smaller parts known as microservices that focus on a single responsibility. Each part (microservice) is developed and deployed independently, and microservices communicate via events or API interfaces.
+
+It is a common trend, and many organizations are adopting this architecture because of its benefits, one of which is adapting to market changes and shipping out features faster rather than the delays of modular monoliths. A DevOps engineer is critical to helping in the adoption and success of microservices.
+
+### Cloud technology
+
+Cloud-native applications have become popular recently. They involve developing and deploying software applications and their dependencies in a cloud environment.
+
+There are several cloud platforms, some of the most popular ones being [AWS](https://roadmap.sh/aws), Microsoft Azure, and Google Cloud Platform (GCP). One advantage of using these cloud providers is that you don't have to manage the cloud infrastructure but instead focus on developing your applications. You also pay for only the resources you use.
+
+Containerization tools like [Docker](https://roadmap.sh/docker) and [Kubernetes](https://roadmap.sh/kubernetes) have been made popular by cloud services and microservices. These tools are part of the toolkit of DevOps engineers.
+
+### Automation and CI/CD
+
+Automation and continuous integration/continuous deployment are integral to DevOps. Organizations are widely adopting automation of their infrastructure and deployments because of its benefits including faster and more reliable application deployments.
+
+Also, with the adoption of GitOps, an operational framework that takes DevOps principles and best practices for application development and applies them to infrastructure automation, the deployment process is even more efficient. DevOps professionals are the major catalysts for this and will remain relevant.
+
+### Artificial intelligence and machine learning
+
+AI and ML have become integrated into our daily lives and automation tools are used to automate processes and routine tasks, monitor system health, and predict potential system issues. These AI tools need to be designed, maintained, and enhanced.
+
+In the AI and ML field, it is the job of an MLOps engineer, but a DevOps engineer can upskill and switch roles to an MLOps engineer.
+
+There is a concern that AI will replace DevOps professionals. However, I believe AI will complement the DevOps process, improve the software development lifecycle, and make better DevOps engineers.
+
+## Specializations in DevOps
+
+The DevOps career paths are rewarding and successful. The DevOps career also offers a lot of growth opportunities, and as you have seen in the previous section, it is in high demand.
+
+There are several DevOps career paths and devops career opportunities for both entry-level and experienced positions. Normally, working in DevOps starts with an entry-level position like a release manager or junior DevOps engineer.
+
+As a DevOps professional, you can decide to go for any of these following DevOps skills and specializations:
+
+- Automation expert
+- General DevOps engineer
+- System engineer
+- DevOps erchitect
+- DevOps release manager
+- DevSecOps engineer
+- DevOps test engineer
+
+### Automation expert
+
+In the DevOps career path, you can work as an automation expert or engineer, depending on the organization. You can specialize in implementing automation solutions, continuous improvement, and software delivery. As automation plays a critical role, every DevOps engineer should be familiar with the automation process.
+
+Automation experts specialize in implementing continuous integration (CI) and continuous delivery (CD) within the software lifecycle to boost the efficiency of development and operations teams. Additionally, they design and integrate monitoring, dashboard, and incident management tools like [Grafana](https://grafana.com/), [Loki](https://grafana.com/oss/loki/), and [Seq](https://datalust.co/seq).
+
+### General DevOps engineer
+
+This is one of the key DevOps career path. As a DevOps engineer, you work closely with developers and act as a bridge between other team members. You are involved in all aspects of the software development life cycle. You are also a bridge between operations and development teams. DevOps engineers need to be proficient with top DevOps automation tools and have knowledge of cloud platforms like AWS and Google Cloud. Usually a newbie in DevOps starts in this path as a junior DevOps engineer.
+
+### Systems engineer
+
+This is another DevOps career you can assume as you become a DevOps engineer. As a system engineer, you are responsible for designing, deploying, and maintaining an organization's IT infrastructure, including the hardware, software, networking, and operating systems.
+
+### DevOps architect
+
+In this DevOps career path, a DevOps architect is responsible for designing and implementing the overall DevOps architecture and processes in an organization.
+
+A DevOps architect is responsible for building the foundation upon which the entire process rests. The DevOps architect role is a more senior role than a DevOps engineer.
+
+A DevOps architect is like the contractor of the DevOps world and ensures consistency of agile principles across the DevOps process and work closely with other senior DevOps engineers and professionals to ensure these principles are followed.
+
+### DevOps release manager
+
+This is a DevOps career path where you are responsible for managing and overseeing software releases throughout the DevOps process. A DevOps release manager ensures software products are released on time, with high quality and reliability.
+
+### DevSecOps engineer
+
+DevSecOps stands for Development, Security and Operations. Such engineers design and implement secure architectures for software and infrastructure, manage vulnerabilities, and protect against security threats.
+
+DevSecOps engineers ensure that software applications and their supporting infrastructure are secure.
+
+### DevOps test engineer
+
+A DevOps test engineer is responsible for implementing tests to ensure software products are high-quality, reliable, and scalable. They oversee all stages of the testing process, such as designing automated testing frameworks, identifying and resolving issues, and certifying compliance with industry standards.
+
+Other DevOps roles include:
+
+- DevOps Cloud Engineer
+- Lead DevOps Engineer
+
+## Skills required in DevOps
+
+DevOps engineers require both technical skills and soft skills, which may vary from organization to organization, as well as team structure, technologies, and tools. However, some common skills exist across the board.
+
+- Knowledge of coding and scripting
+- In-depth knowledge of container and container orchestration
+- Knowledge of logging and configuration management
+- Understanding of system administration
+- In-depth knowledge of version control systems
+- Knowledge of continuous integration and continuous deployment (CI/CD)
+- Collaboration skills
+
+### Knowledge of coding and scripting
+
+To build a DevOps career, you should know at least one programming language and be proficient in scripting to further automate tasks and processes that would be tedious and slow. You should also be familiar with software development principles.
+
+### In-depth knowledge of container and container orchestration
+
+With micro-services popularity, applications can be shipped in containers and deployed to the cloud. It is possible with the help of tools like [Docker](https://roadmap.sh/docker) and container orchestration tools like [Kubernetes](https://roadmap.sh/kubernetes). A DevOps cloud engineer must have extensive knowledge of these tools and how to use them.
+
+![Docker and kubernetes](https://assets.roadmap.sh/guest/docker-and-kubernetes-kzopj.jpg)
+
+### Knowledge of logging and configuration management tools
+
+Monitoring is one of the core DevOps processes. In the DevOps career path, you are expected to have a knowledge of monitoring and logging tools. A popular one used is [Grafana](https://grafana.com/). You should be comfortable working with configuration management tools, automation frameworks, and Linux environments.
+
+### Understanding of system administration
+
+A basic understanding of provisioning and managing servers, security monitoring, and networks is required in the DevOps career path. You will monitor the servers for security vulnerabilities and apply patches when necessary.
+
+### In-depth knowledge of version control systems and source code management
+
+Version control is one of the DevOps tools, and required technical skills that a DevOps engineer should have. One of the common Version Control Systems(VCS) out there is Git.
+
+### Knowledge of continuous integration and continuous deployment (CI/CD)
+
+A DevOps professional is required to have a deep understanding of CI/CD. CI/CD involves the design and implementation of software delivery pipelines. It enables faster software release cycles. Some key DevOps tools include [Jenkins](https://www.jenkins.io/), [Azure DevOps](https://azure.microsoft.com/de-de/products/devops), [CircleCI](https://circleci.com/), [BitBucket Pipelines](https://bitbucket.org/), [GitHub Actions](https://github.com/features/actions), etc.
+
+### Communication and Collaboration skills
+
+As a DevOps professional, be prepared to work closely with cross-functional development teams. You are expected to have good communication and collaboration skills to be an effective team member. You should be able to clearly communicate your ideas to other developers, end-users and stakeholders.
+
+## How can I start my DevOps career?
+
+The next question you might be asking is how do I start my career in [DevOps](https://roadmap.sh/devops).
+You can begin your DevOps career by obtaining a bachelor's degree in computer science degree from a college.
+
+You can also obtain DevOps certification from certified DevOps trainers. One of the popular DevOps certifications is the AWS Certified DevOps Engineer.
+
+roadmap.sh offers step-by-step guidance on [how to become a DevOps engineer](https://roadmap.sh/devops/how-to-become-devops-engineer), and by signing up, you will be able to:
+
+- Keep track of your progress and also share it on your roadmap.sh profile.
+- Collaborate on other official roadmaps.
+- Draw your roadmap, either as an individual learner or for [Dev](https://roadmap.sh/teams) [t](https://roadmap.sh/teams)[eams](https://roadmap.sh/teams).
+- [Generate new roadmaps with AI](https://roadmap.sh/ai).

src/data/guides/devops-engineer.md

@@ -0,0 +1,309 @@
+---
+title: 'What is a DevOps Engineer? Responsbilities & Roles in @currentYear@'
+description: 'Explore the responsibilities and roles of a DevOps Engineer in @currentYear@. Gain insights into the evolving field of DevOps and what it takes to succeed.'
+authorId: ekene
+excludedBySlug: '/devops/devops-engineer'
+seo:
+  title: 'What is a DevOps Engineer? Responsbilities & Roles in @currentYear@'
+  description: 'Explore the responsibilities and roles of a DevOps Engineer in @currentYear@. Gain insights into the evolving field of DevOps and what it takes to succeed.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/what-is-devops-engineer-jort4.jpg'
+isNew: true
+type: 'textual'
+date: 2024-08-15
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![What is a DevOps engineer and what are their responsibilities?](https://assets.roadmap.sh/guest/what-is-devops-engineer-jort4.jpg)
+
+Are you a developer monitoring recent changes in the ecosystem, looking to change careers or pick up new skills in 2024? If your choice is DevOps, you might be wondering what it entails, what it will take to become one in 2024, and how it is affected by the recent changes in the tech ecosystem.
+
+In recent years, the technology ecosystem has experienced a constant shift in the way hiring managers reach out, companies hire, and the roles and responsibilities described in job postings. Particularly, 2023 proved to be a challenging year as layoffs in the technology sector grew significantly, with more than [262,000 employees laid off across 1,180 firms](https://www.statista.com/statistics/199999/worldwide-tech-layoffs-covid-19/).
+
+Despite this change, DevOps, a field within the same ecosystem, has experienced continuous growth. In fact, the DevOps market size is expected to grow to [25.5 billion USD by 2028](https://www.marketsandmarkets.com/Market-Reports/devops-market-824.html#:~:text=The%20global%20DevOps%20market%20size,USD%2010.4%20billion%20in%202023.). This indicates that the roles and responsibilities of a DevOps engineer in the modern technology environment will evolve alongside this increasing demand.
+
+In this guide, we'll discuss the roles and responsibilities of a [DevOps engineer](https://roadmap.sh/devops), the importance of DevOps in teams, common roles within a DevOps team, and best practices for DevOps teams. Finally, the guide will offer roadmaps for your DevOps journey.
+
+A DevOps engineer's roles and responsibilities include:
+
+- Following best practices and utilizing Infrastructure as Code (IaC) tools to design, implement, and manage infrastructure.
+
+- Implementing and managing Continuous Integration and Continuous Delivery (CI/CD) pipelines to automate software and code releases.
+
+- Facilitating and promoting interpersonal skills between the development teams, operations teams, and other stakeholders to establish productivity and continuous improvement.
+
+- Implementing monitoring, logging, alerts, and dashboards to track the performance and health of applications and infrastructure.
+
+- Writing and maintaining scripts to automate tasks and DevOps processes.
+
+- Providing support and troubleshooting issues related to applications, systems, and infrastructure.
+
+- Efficiently manage and monitor cloud resources by implementing autoscaling and other cloud management techniques to maintain optimal performance.
+
+Let's look at the DevOps ecosystem in detail.
+
+## What is a DevOps engineer?
+
+A DevOps engineer is a professional whose primary purpose is to work at the intersection of software development and IT operations. Their main goal is to continuously deliver high-quality software, improve collaboration between teams, and shorten the Software Development Life Cycle (SDLC).
+
+DevOps engineers are responsible for maintaining the culture and practices that bridge the gap between the software development process (Dev) and IT operations (Ops). They promote the use of tools and other automation mechanisms to shorten the software delivery processes while maintaining high quality.
+
+DevOps engineers use various tools to automate and enhance their workflow, such as:
+
+- Docker
+- Kubernetes
+- Jenkins
+- Version control systems
+- Grafana
+- Ansible
+- Prometheus
+
+### Docker
+
+Docker is a containerization platform that allows developers to package applications and their dependencies into a lightweight and portable container that can run consistently in any environment. Docker streamlines the development process by making it easy to manage and scale applications
+
+![Docker](https://assets.roadmap.sh/guest/docker-logo-cvtzr.jpg)
+
+You can learn more details by exploring the [Docker roadmap](https://roadmap.sh/docker).
+
+### Kubernetes
+
+Kubernetes is a container orchestration platform for automating, deploying, and scaling containerized applications. It offers numerous benefits, including cluster management, high availability, load balancing, and resource management.
+
+![Kubernetes](https://assets.roadmap.sh/guest/kubernetes-logo-zipbs.jpg)
+
+You can learn more details by exploring the [Kubernetes roadmap](https://roadmap.sh/kubernetes).
+
+### Jenkins
+
+Jenkins is an open-source automation tool for automating CI/CD processes. It gives developers the flexibility to build, test, and deploy applications. Jenkins' ecosystem and seamless integration with various tools make it ideal for automating DevOps workflow.
+
+![Jenkins](https://assets.roadmap.sh/guest/jenkins-logo-pqnqc.jpg)
+
+### Version control systems
+
+Version control systems allow developers to track, revise, manage branches, and merge codes seamlessly. Examples include Git, Mercurial, and Subversion, with popular platforms like GitHub and Bitbucket providing integration support.
+
+![Version control systems](https://assets.roadmap.sh/guest/git-logo-hrzut.jpg)
+
+### Grafana
+
+Grafana is an analytic and monitoring platform for visualizing metrics, logs, and other critical data. It helps DevOps engineers monitor the real-time health and performance of applications and systems.
+
+![Grafana](https://assets.roadmap.sh/guest/grafana-logo-zyx92.jpg)
+
+### Ansible
+
+Ansible is an automation tool for configuring application management, deployment, and other automation tasks. It uses a YAML syntax to define automation workflow, reducing the time required for repetitive tasks.
+
+![Ansible](https://assets.roadmap.sh/guest/ansible-logo-efs80.jpg)
+
+### Prometheus
+
+Prometheus is a monitoring and alerting tool that collects metrics from applications and infrastructure. It stores these metrics in a time-series database, allowing for querying and visualization to detect potential issues.
+
+![Prometheus](https://assets.roadmap.sh/guest/pometheus-logo-v4pp4.jpg)
+
+## What are the responsibilities of a DevOps engineer?
+
+DevOps engineers wear multiple hats to perform their day-to-day tasks. They possess technical skills in the software development lifecycle and operations skills for maintenance, and they are responsible for bridging the gap and fostering collaboration between development and other stakeholders.
+
+DevOps engineer responsibilities include:
+
+- Infrastructure management
+- Setting up and maintaining CI/CD pipelines
+- Working closely with others and keeping communication flowing
+- Keeping an eye on things by monitoring and logging
+- Automating toil
+- Handling deployments and managing cloud services
+- Optimizing performance
+- Software development and scripting
+- Managing resources efficiently
+- Supporting developers and troubleshooting issues
+- Ensuring security across the infrastructure
+
+![DevOps engineer job description](https://assets.roadmap.sh/guest/devops-engineer-description-tro4n.jpeg)
+
+Now, let's look at these points in detail.
+
+### Infrastructure management
+
+A key responsibility of a DevOps engineer is to ensure the design, implementation, and management of a robust and scalable infrastructure. They use Infrastructure as Code (IaC) tools like Terraform or Ansible to automate infrastructure provisioning and configuration management.
+
+### CI/CD pipelines
+
+In the SDLC, new features, patches, and fixes are frequently deployed to meet customers' needs. To facilitate this, a DevOps engineer must set up a CI/CD pipeline to automate the testing environment and software releases, ensuring seamless integration and a smooth deployment process.
+
+![ci/cd](https://assets.roadmap.sh/guest/cicd-y1h56.jpeg)
+
+### Collaboration and communication
+
+DevOps engineer skills are essential for fostering an efficient and collaborative work environment. DevOps engineers champion clear communication (both oral and written) between project stakeholders. They believe in active communication and collaboration between the development team and other project stakeholders to ensure productivity, shared responsibilities, and continuous improvement.
+
+![collaboration & communication](https://assets.roadmap.sh/guest/collaboration-f4lfb.jpeg)
+
+### Automation
+
+One of the essential DevOps principles is automating manual and repetitive tasks. A DevOps engineer uses DevOps automation tools like Puppet or SaltStack to improve efficiency and reduce human error during deployment processes, scaling, and other operational tasks.
+
+![automation](https://assets.roadmap.sh/guest/automation-kani0.jpeg)
+
+### Deployment and cloud management
+
+DevOps engineers use containers and orchestration platforms like Docker and Kubernetes to facilitate efficient deployment, scaling, and management, whether in on-premise environments or cloud services like [Amazon Web Services (AWS),](https://roadmap.sh/aws) Microsoft Azure, or Google Cloud Platform.
+
+![Clouds deployment — AWS vs Azure vs GCP](https://assets.roadmap.sh/guest/cloud-management-qbcb0.jpeg)
+
+### Performance optimization
+
+A key responsibility of a DevOps engineer is to set up mechanisms to constantly audit systems, analyze performance, and implement load and stress testing. This guarantees that applications can handle high demand and spikes in traffic.
+
+### Software development and scripting
+
+While the DevOps ecosystem offers both paid and open-source tools to help streamline responsibilities, there are times when custom-made tools or extensions of existing tools are required. A good understanding of software development processes and scripting languages like [Python](https://roadmap.sh/python), [Go](https://roadmap.sh/golang), or [JavaScript (Node.js)](https://roadmap.sh/nodejs) helps a DevOps engineer build solutions for such specific business edge cases.
+
+### Resource management
+
+In a DevOps engineer role, engineers ensure that the resources allocated to a system can perform effectively during both slow and peak periods. This involves implementing autoscaling, monitoring resource usage, considering future capacity needs, and utilizing other resource configuration management tools.
+
+### Developer support and troubleshooting
+
+An integral part of DevOps methodology is ensuring that development and operational teams are supported by troubleshooting issues related to applications, infrastructures, and other systems. Additionally, DevOps professionals create documentation, guides, and other helpful resources to enhance the knowledge base. This guarantees that both experienced team members and new joiners can leverage these resources for debugging, troubleshooting, or research purposes.
+
+### Security
+
+A growing part of the DevOps ecosystem is Development, Security, and Operations (DevSecOps). This practice involves automating security and best practices into every phase of the SDLC to ensure compliance with industry standards, effective resource identity and access management, and more. A good understanding of DevSecOps is an essential skill for experienced DevOps engineers.
+
+## What is the importance of DevOps in an organization?
+
+DevOps is gaining massive adoption because organizations are shifting away from traditional software development and resource provisioning approaches that are slow, prone to human error, and siloed. They want to deliver fast, reliable, and scalable applications, which the traditional approach lacks.
+
+Some of the ways DevOps can benefit an organization include:
+
+- Improving collaboration and shared responsibilities among project stakeholders.
+- Enhancing software quality with automated testing and continuous feedback loops.
+- Speeding up software delivery by promoting communication and collaboration between cross-functional teams.
+- Supporting career development through a DevOps culture of experimentation and learning new DevOps skills.
+- Providing a better customer experience because applications are thoroughly tested before going live.
+- Reducing risk associated with software development and deployment using CI/CD principles.
+- Encouraging knowledge sharing and flexibility to experiment, helping teams learn a wide range of skills and technologies.
+
+Organizations practicing or willing to adopt DevOps must be prepared for a cultural shift, continuous improvement, and investment in automation tools. Although it may be a lot at times, the benefits are worth the investment.
+
+## Common roles within the DevOps ecosystem
+
+The recent growth in the DevOps ecosystem has led to newer DevOps roles. While most jobs categorize these roles under the umbrella term "DevOps Engineer," which may work for small organizations, it becomes an issue in medium to larger organizations with diverse project goals and other factors. While these roles share similarities and sometimes overlap in responsibilities, it is important to understand the different aspects they tackle. The diagram below shows the crucial roles in the DevOps lifecycle.
+
+![Roles in DevOps](https://assets.roadmap.sh/guest/6-devops-roles-xc82k.jpeg)
+
+### Site Reliability engineers (SRE)
+
+SRE focuses on system reliability, scalability, and performance. Their skills involve combining software engineering and systems administration.
+
+**Key Responsibilities**
+
+- Implements monitoring and alerting systems.
+- Ensures the system is reliable, performant, and scalable.
+- Analyze incidents to detect them and implement preventive measures.
+
+**Required skills**
+
+- Proficiency in using automation and infrastructure as code tools.
+- Problem-solving and troubleshooting skills.
+- Experience with alerting and monitoring tools like Prometheus and Grafana.
+
+### Cloud engineers
+
+Cloud engineers are responsible for designing and implementing cloud-native solutions. They also manage cloud technologies and infrastructure like AWS, Azure, or Google Cloud to guarantee efficient resource usage and cost-effectiveness.
+
+**Key Responsibilities**
+
+- Design and manage cloud infrastructure.
+- Monitor and optimize cloud resources and associated costs.
+- Ensure compliance and security of cloud resources.
+
+**Required skills**
+
+- Expertise in using popular cloud providers like AWS, Azure, and GCP.
+- Proficiency in using automation tools like Terraform and CloudFormation.
+- Knowledge of cloud security and compliance
+
+### Automation engineers
+
+Automation engineers are responsible for identifying tasks that can be automated across development and operations. They develop scripts and DevOps tools to automate repetitive tasks and integrate them into CI/CD pipelines.
+
+**Key Responsibilities**
+
+- Review, design, and implement automation strategies across the software development lifecycle.
+- Ensures consistency and reliability of automated processes.
+- Stay up-to-date with the latest automation tools and technologies.
+
+**Required skills**
+
+- Proficiency in scripting and programming languages.
+- Expertise in automation tools and frameworks like Jenkins and GitHub Action.
+
+### Build engineers
+
+Build engineers are responsible for managing build systems and tools, troubleshooting build failures, optimizing build performance, and integrating builds into the CI/CD pipelines.
+
+**Key Responsibilities**
+
+- Manage and maintain build systems and tools.
+- Ensures builds are consistent and replicable across environments.
+- Automate the build process.
+
+**Required skills**
+
+- Knowledge of CI/CD tools and version control systems.
+- Proficiency in build tools.
+- Strong problem-solving and debugging skills.
+
+### Release engineers
+
+Release engineers are responsible for planning, scheduling, and coordinating the software release process for testing, sandbox, or production environments.
+
+**Key Responsibilities**
+
+- Plan and manage the release of new software, software updates, and new features.
+- Maintain release schedules and project release timelines.
+
+**Required skills**
+
+- Knowledge of CI/CD tools and version control systems.
+- Project management and organization skills.
+- Strong communication and coordination skills
+
+### Security engineers 
+
+Security engineers are responsible for integrating security and best practices into the DevOps pipeline. Additionally, they collaborate with development and operations teams to conduct security assessments, vulnerability scans, and compliance checks.
+
+**Key Responsibilities**
+
+- Implement and manage security tools and technologies.
+- Integrate DevSecOps into the software development lifecycle.
+- Document security best practices and ensure compliance with policies and regulations.
+
+**Required skills**
+
+- Knowledge of security best practices and frameworks
+- Familiarity with identity and access management systems
+
+## Best practices for DevOps teams
+
+To achieve success as a team practicing or intending to adopt DevOps practices, you need a combination of the right tools, best practices, and a cultural shift. Here are some tips and best DevOps practices for teams:
+
+- Encourage Continuous Integration (CI) and Continuous Deployment (CD) by having software developers commit code frequently, automating builds, and providing timely feedback between teams.
+- Embrace IaC to maintain consistency across testing, production, and other environments.
+- Implement logging, alerts, and monitoring across systems.
+- Ensure unit tests, integration tests, and end-to-end tests to validate the quality of software.
+- Promote soft skills, feedback loops, post-mortem audits, retrospectives, and a continuous learning culture.
+- Set clear metrics and Key Performance Indicators (KPIs) to easily identify areas needing improvement.
+- Ensure effective collaboration and shared responsibilities between development, operations, QAs, and other teams.
+
+In summary, DevOps is growing and will continue to expand, bringing about even more DevOps roles and responsibilities for engineers in the ecosystem. The roadmap.sh’s [DevOps roadmap](https://roadmap.sh/devops) is a valuable resource that can help you stay updated on these changes. Additionally, you can track your learning path and connect with a vibrant community by [signing up](https://roadmap.sh/signup) on the roadmap.sh platform.

src/data/guides/history-of-javascript.md

@@ -46,7 +46,7 @@ After a few years of the release of ES5, things started to change, TC39 (the com
 - Default and rest parameters
 - Spread operator
 - `let` and `const`
-- Iterators  `for..of`
+- Iterators `for..of`
 - Generators
 - `map` and `set`
 - Proxies and Symbols
@@ -80,4 +80,4 @@ ESNext is a dynamic name that refers to whatever the current version of ECMAScri
 
 Since the release of ES6, [TC39](https://github.com/tc39) has quite streamlined their process. TC39 operates through a Github organization now and there are [several proposals](https://github.com/tc39/proposals) for new features or syntax to be added to the next versions of ECMAScript. Any one can go ahead and [submit a proposal](https://github.com/tc39/proposals) thus resulting in increasing the participation from the community. Every proposal goes through [four stages of maturity](https://tc39.github.io/process-document/) before it makes it into the specification.
 
-And that about wraps it up. Feel free to leave your feedback in the [discord](https://discord.gg/ZrSpJ8zH). Also here are the links to original language specifications [ES6](https://www.ecma-international.org/ecma-262/6.0/), [ES7](https://www.ecma-international.org/ecma-262/7.0/) and [ES8](https://www.ecma-international.org/ecma-262/8.0/).
+And that about wraps it up. Feel free to leave your feedback in the [discord](https://roadmap.sh/discord). Also here are the links to original language specifications [ES6](https://www.ecma-international.org/ecma-262/6.0/), [ES7](https://www.ecma-international.org/ecma-262/7.0/) and [ES8](https://www.ecma-international.org/ecma-262/8.0/).

src/data/guides/how-to-become-frontend-developer.md

@@ -0,0 +1,306 @@
+---
+title: 'How to Become a Front-End Developer in 7 Steps'
+description: 'Learn how to become a front-end developer in 7 clear steps. Start your coding journey with practical tips and resources today!'
+authorId: kamran
+excludedBySlug: '/frontend/how-to-become-frontend-developer'
+seo:
+  title: 'How to become a Front-End Developer in 7 Steps'
+  description: 'Learn how to become a front-end developer in 7 clear steps. Start your coding journey with practical tips and resources today!'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/how-to-become-frontend-developer-i23nx.jpg'
+isNew: true
+type: 'textual'
+date: 2024-08-15
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![How to become a frontend developer.](https://assets.roadmap.sh/guest/how-to-become-frontend-developer-i23nx.jpg)
+
+Front-end developers **(also referred to as front-end engineers or client-side developers)** create the user interface (UI) and user experience (UX) of web pages and web applications. Using HTML, CSS, and JavaScript, they transform static designs into functional web pages. They create interactive and visual elements that users interact with directly, including buttons, forms, and navigation menus.
+
+[Front-end developers](https://roadmap.sh/frontend) are a crucial part of any team. They ensure that websites are user-friendly, load fast, and rank high on search engines. So, companies seek skilled front-end developers who can create dynamic and responsive websites.
+
+However, becoming a front-end developer isn't just about jumping straight into coding. It's a deliberate process that involves following specific steps.
+
+**TL;DR**: Become a front-end developer in 7 steps:
+
+- **Step 1**: Learn web development fundamentals.
+- **Step 2**: Practice building projects.
+- **Step 3**: Learn the version control systems and the command line.
+- **Step 4**: Learn front-end frameworks and libraries.
+- **Step 5**: Study the accessibility and responsive design principles
+- **Step 6:** Join online communities and attend events.
+- **Step 7**: Build a portfolio and apply for jobs.
+
+The above steps will give you the skills to become a proficient front-end developer. This guide will provide a deep dive into the steps and benefits of working in a front-end position.
+
+## Benefits of pursuing a career in front-end development
+
+The job market requires skilled professionals to create dynamic websites and web applications. This demand makes front-end development a role filled with numerous career opportunities.
+
+Some of the benefits of pursuing a career in front-end development include:
+
+- High demand and employment stability.
+- Flexible career.
+- Competitive earning potential.
+
+### High demand and employment stability
+
+Front-end development is a highly sought-after skill set in the tech industry. The demand isn't limited to a particular sector; it extends to healthcare, e-commerce, gaming, etc., making it a lucrative career choice.
+
+![Job Outlook for Front-End Developers](https://assets.roadmap.sh/guest/job-outlook-frontend-engineer-tvm05.jpeg)
+
+[BLS (Bureau of Labor Statistics)](https://www.bls.gov/ooh/computer-and-information-technology/web-developers.htm) projects a 16% increase in web developer jobs from 2022 to 2032. This rate exceeds the average for all other jobs by a significant margin. So, there will always be a need for front-end developers, which means job security and a steady career path.
+
+### Flexible career
+
+The front-end development field offers many benefits, one of which is flexibility. You can work as a freelancer, remotely, or in a hybrid role – whatever works best for you! Or, if you prefer, you can go with a more traditional office setup. This flexibility gives you the power to:
+
+- Work from anywhere on the planet as long as you can access the Internet.
+- Find projects and clients that align with your interests and goals.
+- Connect with global teams and build your professional network.
+
+### Competitive earning potential
+
+Front-end development provides a financially rewarding career path with competitive salaries. As per Glassdoor, front-end developers make an average salary of $85,432 in the United States.
+
+![Frontend Developer Salary](https://assets.roadmap.sh/guest/frontend-engineer-salary-smqar.PNG)
+
+However, how much you earn can depend on your experience, the size of the company, and where you're looking for a job.
+
+## Become a front-end developer in 7 steps
+![How to become a frontend developer in 7 steps](https://assets.roadmap.sh/guest/how-to-become-frontend-developer-in-7-steps-2gigl.jpeg)
+
+The number of online resources available to learn front-end development can be overwhelming. It's hard for aspiring front-end developers to know where to start. However, roadmap.sh provides a clear step-by-step [front-end roadmap](https://roadmap.sh/frontend) to help you learn.
+
+The guide breaks it down so you don't have to guess and gives you all you need to learn front-end development. The steps below present a concise version of the front-end roadmap.
+
+### Step 1: Learn web development fundamentals
+
+![Web development fundamentals](https://assets.roadmap.sh/guest/learn-web-fundementals-bg7c8.jpeg)
+
+The first step toward becoming a front-end developer is to learn the fundamentals. These are the foundations for everything you create on the web.
+
+It involves learning:
+
+- **HTML (Hyper Text Markup Language)**: For structuring the content on a webpage. HTML is the blueprint or skeletal structure of a website. It defines the different elements of websites, like headings, paragraphs, and images.
+- **CSS (Cascading Style Sheets):** For styling the content on a webpage. It is a styling language that controls the layout and appearance of HTML-based web pages. With CSS, you can add colors, fonts, and more to your web pages.
+- **JavaScript**: [JavaScript](https://roadmap.sh/javascript) adds interactivity and functionality to web pages. It is a programming language that makes HTML and CSS static websites functional. Thanks to JavaScript, web pages can respond to user actions. For example, you can achieve your desired outcome when you click a button or submit a form on a website.
+
+Building beautiful websites and applications begins with learning HTML, CSS, and JavaScript. It gives you many job options in web development and lets you create your own website!
+
+### Step 2: Practice building projects
+
+Coding is like playing video games: you have to put in a lot of practice to become proficient. So, don't just watch or read tutorials about coding concepts daily–apply them! It will improve your programming skills. If all you do is learn without practicing, you will be an expert in theory but an amateur in practice.
+
+Write code regularly and work on building projects, no matter how small. Follow a learning, practicing, and repetition cycle to enhance your skills. As you work on small projects, you'll gain experience with HTML, CSS, and JavaScript.
+
+Some ways to practice building projects include:
+
+- **Personal projects**: Build projects that address a problem or individual needs. These include tribute pages, calculators, or to-do list applications.
+- Join a technical team or find a coding partner to work on a project together.
+- **Project work**: Work on a client project or contribute to open-source projects on GitHub. It will allow you to learn from others, contribute to existing code, and connect with new people.
+- **Code challenges**: Participate in code challenges on platforms like [HackerRank](https://www.hackerrank.com/) and [LeetCode](https://leetcode.com/). These sites provide various exercises for practicing [front-end and building websites](https://cesscode.hashnode.dev/resources-to-help-you-practice-web-development).
+
+As you practice coding consistently, you will face a lot of issues. The more problems you solve, the better you become.
+
+### Step 3: Learn the version control systems and the command line.
+
+As a front-end developer, learning version control systems **(VCS)** and the command line is vital. They make it easier for you to:
+
+- Track and manage source code modifications.
+- Work with others on the same project.
+- Streamline your workflow and automate tasks.
+
+![Version control systems](https://assets.roadmap.sh/guest/version-control-systems-qwtx6.jpeg)
+
+Examples of version control systems include Git **(e.g., GitHub, GitLab, Bitbucket).** Git enables you to:
+
+- Create and manage repositories
+- Create branches and merge code
+- Commit changes and track source code revisions
+
+When you become skilled at using Git, you'll work and deploy projects faster. This documentation provides a detailed guide to help you learn everything you need to know about [Git](https://github.com/git-guides).
+
+### Step 4: Learn front-end frameworks and libraries
+
+Learning front-end frameworks and libraries is essential for a front-end developer. It will make your job easier and help you build faster websites and applications.
+
+![Front-end frameworks and libraries](https://assets.roadmap.sh/guest/frontend-frameworks-and-libraries-8vplh.jpeg)
+
+Examples of front-end development frameworks and libraries include:
+
+- **CSS libraries**: CSS libraries are pre-designed CSS templates for styling websites and applications. They provide ready-made design solutions, such as responsive layouts and button styling. Examples of CSS libraries are Bootstrap and TailwindCSS. They help you to work faster, keep your design consistent, and not write too much CSS code from scratch.
+- **JavaScript frameworks:** JavaScript frameworks are more extensive collections of code. They are building blocks for creating web applications and providing structure and functionality. Their pre-defined structure quickens development for creating complex web applications. Popular JavaScript frameworks include [Angular](https://roadmap.sh/angular) and [Vue.js](https://roadmap.sh/vue).
+- **JavaScript libraries:** JavaScript libraries are similar to CSS libraries. Examples of JavaScript libraries are Chart.js and [React](https://roadmap.sh/react). They offer pre-built functions for performing tasks like DOM manipulation and event handling.
+
+Before learning a front-end framework or library, ensure you understand HTML, CSS, and JavaScript. It will give you an in-depth understanding of how frameworks and libraries work.
+
+### Step 5: Study the accessibility and responsive design principles
+
+Becoming an expert frontend developer requires understanding accessibility and responsive design principles. These principles ensure that everyone can use your website and that it looks good on all devices.
+
+Responsive design involves creating websites that are:
+
+- Adaptable to several screen sizes and devices, e.g., laptops, tablets, and smartphones.
+- Able to deliver the best possible user experience on various devices.
+
+Accessible design involves creating websites that are:
+
+- Usable by a wide range of users, including users with disabilities.
+- Following guidelines and standards of accessibility.
+
+Understanding these principles demonstrates your commitment to best practices for front-end development. As a result, you become a better front-end developer and more job-ready.
+
+### Step 6: Join developer communities and attend events
+
+Attending developer events and joining a community is essential for aspiring front-end developers. The best part? You can join in from your work desk **(online)** or look for events nearby **(offline)** that work with your plans. These include conferences, meet-ups, and online forums like the [roadmap community.](https://discord.com/invite/cJpEt5Qbwa)
+
+By joining a developer community and attending tech events, you'll:
+
+- Become part of a supportive community.
+- Get access to resources and tools that can help simplify your development process.
+- Participate in workshops and sessions that will expand your skills.
+- Connect with colleagues to learn about new opportunities.
+
+### Step 7: Build a portfolio and apply for jobs
+
+The final step in becoming a front-end developer is to build an online portfolio and apply for jobs. Portfolios are visual representations of your skills, and they should include:
+
+- Real-world projects that showcase your skills in HTML, CSS, JavaScript, React and more. These projects could include anything from basic websites to complex web applications. However, it's advisable to include complex projects like an e-commerce application.
+- Open source contributions code.
+- Code examples to demonstrate your problem-solving skills.
+
+Once you've built a solid portfolio, it's time to apply for a front-end developer job. This process includes writing a cover letter and resume and preparing for interviews. This roadmap.sh guide will help you prepare for these interviews: [Top](https://roadmap.sh/questions/frontend) [Front End Developer Interview Questions](https://roadmap.sh/questions/frontend).
+
+But remember, front-end development is a continuous learning process. So, it's essential to keep learning during and after a job search to keep up with new tools and trends.
+
+## Responsibilities of a front-end developer
+
+Now that you've taken the steps to become a front-end developer, it's time to dive into the heart of the role.
+
+![Responsibilities of a front-end developer](https://assets.roadmap.sh/guest/responsibilites-of-frontend-developer-r6k0m.jpeg)
+
+Creating an effective website involves managing various responsibilities as a front-end developer, such as:
+
+- Collaboration with other teams.
+- Building user interfaces.
+- Responsiveness and cross-browser compatibility.
+- Implementing website functionality and interactivity.
+
+### Collaboration with other teams
+
+![Collaboration with other teams](https://assets.roadmap.sh/guest/collaboration-with-other-teams-04way.jpeg)
+
+Front-end development is usually not done alone. It is a team effort! It involves everyone working together and communicating well to ensure a successful project. As a front-end developer, you will work with several teams, such as:
+
+- **Back-end developers**: [Back-end developers](https://roadmap.sh/backend) build the server side of websites and web applications. They handle many functionalities you don't see on a website or web application. These functionalities include developing APIs **(application program interfaces)** and managing server-side logic. Front-end and back-end developers collaborate to create a functional and secure website.
+- **UI designers**: UI designers create the visual elements of websites and applications. They design the color scheme, layout, and interactive elements like buttons. Front-end developers collaborate with UI designers to understand the design requirements. They use their technical skills to turn these designs into functional, interactive websites.
+
+### Building user interfaces
+
+The responsibility of creating user interfaces (UIs) falls to front-end developers. Building UIs begins after the front-end developer understands the design requirements. It involves transforming design concepts into functional and interactive websites.
+
+The processes involved in building UIs include:
+
+- Writing clean, maintainable, and efficient code.
+- **Accessibility and performance optimization**: Front-end developers must prioritize accessibility. All users, including users with disabilities, must be able to access the UI. They must consider color contrast, keyboard navigation, and other accessibility features. Also, they should optimize performance by using lazy loading methods for fast-load times.
+- **Testing and iteration.** Testing the UI for bugs and usability issues is essential. It ensures the interface is easy to use and meets the desired quality.
+
+### Responsiveness and cross-browser compatibility
+
+Front-end developers are responsible for ensuring project responsiveness and cross-browser compatibility. It often takes place when building user interfaces.
+
+This process involves building a website and web application that:
+
+- Adjust to various devices and screen sizes **(responsive web design)**.
+- Function consistently in different web browsers, like Chrome and Firefox **(cross-browser compatibility)**.
+
+### Implementing website functionality and interactivity
+
+Front-end developers are responsible for implementing website functionality and interactivity. This step often follows the designer's completion of the user interface layout. The process involves making user-friendly UIs that boost user experience and engagement.
+
+It involves several steps, like:
+
+- Writing JavaScript code to create interactive features. These interactive features include:
+    - Form validation - To check if the web user fills the form fields correctly.
+    - Interactive elements like image sliders, clickable buttons, and dropdown menus.
+
+- Using CSS animations or JavaScript transitions for interactive responses. These transitions and animations include:
+    - Smooth scrolling animations for a better browsing experience.
+    - Animated dropdown menus for easy-to-use web navigation.
+
+## Frequently asked questions (FAQ): Becoming a front-end developer
+![Frequently asked questions: Becoming a front-end developer](https://assets.roadmap.sh/guest/frontend-developer-faqs-zhhns.jpeg)
+
+The process of becoming a front-end developer may pose some questions to you. The following are some answers to common questions to get you started:
+
+### Do I need any prior knowledge to start learning front-end development?
+
+No, learning front-end development does not require any prior knowledge. But it's good to have a basic idea of how computers and the internet work. [roadmap.sh](http://roadmap.sh) provides a clear step-by-step [front-end roadmap](https://roadmap.sh/frontend) to help you get started.
+
+### Is a degree in Computer Science necessary to become a front-end developer?
+
+Nope, you don't need a Computer Science degree. Many front-end developers are self-taught and have learned through online resources. An impressive portfolio is the key to demonstrating your front-end development skills.
+
+### Which languages should I study to learn front-end development?
+
+The following are the main coding languages used in front-end development:
+
+- **HTML (Hypertext Markup Language)**: For structuring the content on a webpage.
+- **CSS (Cascading Style Sheets)**: For styling the content on a webpage.
+- **JavaScript**: for adding interactivity and functionality to web pages
+
+### How skilled in these coding languages must I be to land my first job?
+
+To secure your first job as a front-end developer, you must be proficient in HTML, CSS, and JavaScript. It will allow you to create a portfolio site that shows your coding skills to employers.
+
+### Is HTML, CSS, and JavaScript enough for a front-end developer?
+
+HTML, CSS, and JavaScript are fundamental knowledge for any front-end developer. However, knowledge of frameworks and libraries like React is also essential.
+
+### Which skills are vital for a professional front-end developer?
+
+The following are some of the essential front-end developer skills:
+
+- Solid understanding of core web development technologies, e.g., HTML, CSS, and JavaScript.
+- Proficient in using version control systems, e.g., Git.
+- Practical experience with front-end frameworks and libraries such as React and TailwindCSS.
+- **Soft skills**: Communication, problem-solving, and collaboration skills.
+
+### How long does it take to become a frontend developer?
+
+How long it takes to become a front-end developer depends on how much time you spend learning. But if you are consistent, you can master the basics in a couple of months and more advanced skills in a year or two.
+
+### Is it possible for me to become a frontend developer on my own?
+
+Yes, you can learn how to become a frontend developer by using online resources.
+
+### Can I learn front-end development in 2 months?
+
+You can pick up the basics of frontend development in 2 months. However, getting really good at it takes more time.
+
+### What is the difference between a frontend developer and a back-end developer?
+
+Frontend developer develops user interfaces and user experiences for web applications and websites. They use coding languages like HTML, CSS, and JavaScript to create visual elements you can see and directly interact with on your phone. Examples of these visual elements include Buttons, forms, and text.
+
+Backend developers create the invisible elements on a web page, like database structures and queries. They create the back-end logic that keeps the website running smoothly using programming languages like Python and Java.
+
+### Who is a full-stack developer?
+
+A full-stack developer specializes in both frontend and backend development.
+
+### Does a front-end developer need to know backend development?
+
+Though it is not required, having a grasp of the basics of backend development can be helpful. It makes it easier to work with backend developers and better understand how the web works.
+
+## What next?
+
+To become a front-end developer, you need a mix of skills, dedication, and the right guidance. If you follow the steps in this guide, you'll be on track to kickstart an excellent front-end career. Stay on track with a personalized learning plan available on roadmap.sh.
+
+roadmap.sh will keep you focused and help you reach your maximum potential as a front-end developer. It has numerous resources that will help you learn front-end and web development. To get started, sign up, create a [front-end roadmap plan](https://roadmap.sh/frontend), and begin studying. You can also share the roadmap with your study buddies. 

src/data/guides/java-developer-skills.md

@@ -25,7 +25,7 @@ Java has been a popular programming language for the past 28 years and remains i
 
 If you are building web applications, the ability to work on both front-end and back-end development using Java is valuable. Fundamental and advanced Java skills such as multithreading, concurrency, JVM tuning, and object-oriented design are vital in enterprise environments.
 
-To remain competitive as a Java developer, you must continuously improve your skill sets to meet evolving industry demands. 
+To remain competitive as a Java developer, you must continuously improve your skill sets to meet evolving industry demands.
 
 This guide will equip you with the skills required in 2024. You’ll understand the landscape of Java demand, adoption, diverse applications, and strategies for excelling as a Java developer. By the end of this guide, you will be confident about pursuing a Java development career.
 
@@ -78,7 +78,7 @@ JavaScript is a programming language used alongside HTML and CSS to enhance the
 
 ### TypeScript
 
-Typescript is an extension of JavaScript with static typing and other advanced features. [TypeScript](https://roadmap.sh/typescript) code transpiles to JavaScript and can run seamlessly wherever JavaScript runs, making it a highly versatile programming language for front-end development. The knowledge enhances your productivity by allowing you to build robust applications,  detect errors, and catch issues as they happen.
+Typescript is an extension of JavaScript with static typing and other advanced features. [TypeScript](https://roadmap.sh/typescript) code transpiles to JavaScript and can run seamlessly wherever JavaScript runs, making it a highly versatile programming language for front-end development. The knowledge enhances your productivity by allowing you to build robust applications, detect errors, and catch issues as they happen.
 
 ![TypeScript](https://media.licdn.com/dms/image/D4D12AQHLiHtRbPUoAA/article-cover_image-shrink_600_2000/0/1696134741709?e=2147483647&v=beta&t=CajO9eTDp6iKznPn753F6ZUyTgaPf6DOzihN1AMMJew)
 
@@ -102,7 +102,7 @@ Here are the back-end skills you should learn in 2024:
 - Web Security
 - Caching
 
-### Java programming language: 
+### Java programming language:
 
 A deep understanding of Java fundamentals is essential to becoming a full stack developer. Having a strong grasp of Java's core concepts, such as classes, inheritance, abstraction, etc., is crucial for developing full stack applications running on the web or mobile platforms. Java's versatility and robustness make it a popular choice for backend development, and proficiency in Java allows developers to build scalable and secure server-side components for their applications. Some popular database management systems are MySQL, SQL, PostgreSQL, MongoDB, and Oracle.
 
@@ -116,7 +116,7 @@ Frameworks are pre-written and thoroughly tested collections of code, classes, c
 
 While Java has several frameworks for building full stack applications, it's crucial to consider each framework's associated pros and cons, adoption rates, and how effectively they address the intended business requirements. One particularly renowned framework is the Java [Spring](https://roadmap.sh/spring-boot) framework, celebrated for simplifying the web development process for small-scale and enterprise-level Java applications. In addition to its user-friendliness, it boasts a vast ecosystem and a thriving community of developers.
 
-### Version control 
+### Version control
 
 Version control systems facilitates teamwork by allowing you and your team members to collaborate on a project simultaneously. It enables the management of changes to code and files over time without disrupting the workflow.
 
@@ -182,7 +182,7 @@ Design patterns are proven approaches to solving specific design challenges and
 
 As the popular saying goes, "a tree cannot make a forest." While it might be tempting to work in isolation and tackle all development tasks alone, it's essential for you to join communities that encourage collaboration, peer learning, and staying updated on the latest developments.
 
-A great community to join is the [r](https://discord.gg/ZrSpJ8zH)[oadmap.sh](https://discord.gg/ZrSpJ8zH) [Discord community](https://discord.gg/ZrSpJ8zH), where you can connect with like-minded individuals who share your passion for development.
+A great community to join is the [r](https://roadmap.sh/discord)[oadmap.sh](https://roadmap.sh/discord) [Discord community](https://roadmap.sh/discord), where you can connect with like-minded individuals who share your passion for development.
 
 ### Soft skills
 

src/data/projects/basic-dockerfile.md

@@ -0,0 +1,39 @@
+---
+title: 'Basic Dockerfile'
+description: 'Build a basic Dockerfile to create a Docker image.'
+isNew: false
+sort: 1
+difficulty: 'beginner'
+nature: 'CLI'
+skills:
+  - 'docker'
+  - 'dockerfile'
+  - 'linux'
+  - 'devops'
+seo:
+  title: 'Basic Dockerfile'
+  description: 'Write a basic Dockerfile to create a Docker image.'
+  keywords:
+    - 'basic dockerfile'
+    - 'dockerfile'
+    - 'docker'
+roadmapIds:
+  - 'devops'
+  - 'docker'
+---
+
+In this project, you will write a basic Dockerfile to create a Docker image. When this Docker image is run, it should print "Hello, Captain!" to the console before exiting.
+
+## Requirements
+
+- The Dockerfile should be named `Dockerfile`.
+- The Dockerfile should be in the root directory of the project.
+- The base image should be `alpine:latest`.
+- The Dockerfile should contain a single instruction to print "Hello, Captain!" to the console before exiting.
+
+
+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 adding the ability to pass your name to the Docker image as an argument, and have the Docker image print "Hello, [your name]!" instead of "Hello, Captain!".

src/data/projects/caching-server.md

@@ -0,0 +1,68 @@
+---
+title: 'Caching Proxy'
+description: 'Build a caching server that caches responses from other servers.'
+isNew: false
+sort: 10
+difficulty: 'intermediate'
+nature: 'CLI'
+skills:
+  - 'Programming Language'
+  - 'Text Processing'
+  - 'Markdown libraries'
+  - 'File Uploads'
+seo:
+  title: 'Caching Proxy Project Idea'
+  description: 'Build a caching proxy server that caches responses from proxied server.'
+  keywords:
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+You are required to build a CLI tool that starts a caching proxy server, it will forward requests to the actual server and cache the responses. If the same request is made again, it will return the cached response instead of forwarding the request to the server.
+
+## Requirements
+
+User should be able to start the caching proxy server by running a command like following: 
+
+```shell
+caching-proxy --port <number> --origin <url>
+```
+
+- `--port` is the port on which the caching proxy server will run.
+- `--origin` is the URL of the server to which the requests will be forwarded.
+
+For example, if the user runs the following command:
+
+```shell
+caching-proxy --port 3000 --origin http://dummyjson.com
+```
+
+The caching proxy server should start on port 3000 and forward requests to `http://dummyjson.com`.
+
+Taking the above example, if the user makes a request to `http://localhost:3000/products`, the caching proxy server should forward the request to `http://dummyjson.com/products`, return the response along with headers and cache the response. Also, add the headers to the response that indicate whether the response is from the cache or the server.
+
+```plaintext
+# If the response is from the cache
+X-Cache: HIT
+
+# If the response is from the origin server
+X-Cache: MISS
+```
+
+If the same request is made again, the caching proxy server should return the cached response instead of forwarding the request to the server.
+
+You should also provide a way to clear the cache by running a command like following:
+
+```shell
+caching-proxy --clear-cache
+```
+
+<hr />
+
+After building the above project, you should have a good understanding of how caching works and how you can build a caching proxy server to cache responses from other servers.

src/data/projects/github-user-activity.md

@@ -7,6 +7,7 @@ difficulty: 'beginner'
 nature: 'CLI'
 skills:
   - 'Programming Language'
+  - 'CLI'
   - 'API Consumption'
 seo:
   title: 'GitHub User Activity CLI'

src/data/projects/log-archive-tool.md

@@ -0,0 +1,45 @@
+---
+title: 'Log Archive Tool'
+description: 'Build a tool to archive logs from the CLI.'
+isNew: false
+sort: 2
+difficulty: 'beginner'
+nature: 'CLI'
+skills:
+  - 'linux'
+  - 'bash'
+  - 'shell scripting'
+seo:
+  title: 'Log Archive Tool'
+  description: 'Build a tool to archive logs from the CLI.'
+  keywords:
+    - 'log archive tool'
+    - 'devops project idea'
+roadmapIds:
+  - 'devops'
+  - 'linux'
+---
+
+In this project, you will build a tool to archive logs on a set schedule by compressing them and storing them in a new directory, this is especially useful for removing old logs and keeping the system clean while maintaining the logs in a compressed format for future reference. This project will help you practice your programming skills, including working with files and directories, and building a simple cli tool.
+
+The most common location for logs on a unix based system is `/var/log`.
+
+## Requirements
+
+The tool should run from the command line, accept the log directory as an argument, compress the logs, and store them in a new directory. The user should be able to:
+
+- Provide the log directory as an argument when running the tool.
+  ```bash
+  log-archive <log-directory>
+  ```
+- The tool should compress the logs in a tar.gz file and store them in a new directory.
+- The tool should log the date and time of the archive to a file.
+  ```bash
+  logs_archive_20240816_100648.tar.gz
+  ```
+
+You can learn more about the `tar` command [here](https://www.gnu.org/software/tar/manual/tar.html).
+
+<hr />
+
+If you are looking to build a more advanced version of this project, you can consider adding functionality to the tool like emailing the user updates on the archive, or sending the archive to a remote server or cloud storage.

src/data/projects/markdown-note-taking-app.md

@@ -12,7 +12,7 @@ skills:
   - 'File Uploads'
 seo:
   title: 'Markdown Note-taking App Project Idea'
-  description: 'Build an API for an expense tracker application.'
+  description: 'Build a note-taking app that uses markdown for formatting.'
   keywords:
     - 'backend project idea'
 roadmapIds:

src/data/projects/number-guessing-game.md

@@ -0,0 +1,76 @@
+---
+title: 'Number Guessing Game'
+description: 'Build a simple number guessing game to test your luck.'
+isNew: false
+sort: 4
+difficulty: 'beginner'
+nature: 'CLI'
+skills:
+  - 'Programming Language'
+  - 'CLI'
+  - 'Logic Building'
+seo:
+  title: 'Number Guessing Game Project Idea'
+  description: 'Build a simple number guessing game to test your luck.'
+  keywords:
+    - 'number guessing game'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+You are required to build a simple number guessing game where the computer randomly selects a number and the user has to guess it. The user will be given a limited number of chances to guess the number. If the user guesses the number correctly, the game will end, and the user will win. Otherwise, the game will continue until the user runs out of chances.
+
+## Requirements
+
+It is a CLI-based game, so you need to use the command line to interact with the game. The game should work as follows:
+
+- When the game starts, it should display a welcome message along with the rules of the game.
+- The computer should randomly select a number between 1 and 100.
+- User should select the difficulty level (easy, medium, hard) which will determine the number of chances they get to guess the number.
+- The user should be able to enter their guess.
+- If the user's guess is correct, the game should display a congratulatory message along with the number of attempts it took to guess the number.
+- If the user's guess is incorrect, the game should display a message indicating whether the number is greater or less than the user's guess.
+- The game should end when the user guesses the correct number or runs out of chances.
+
+Here is a sample output of the game:
+
+```plaintext
+Welcome to the Number Guessing Game!
+I'm thinking of a number between 1 and 100.
+You have 5 chances to guess the correct number.
+
+Please select the difficulty level:
+1. Easy (10 chances)
+2. Medium (5 chances)
+3. Hard (3 chances)
+
+Enter your choice: 2
+
+Great! You have selected the Medium difficulty level.
+Let's start the game!
+
+Enter your guess: 50
+Incorrect! The number is less than 50.
+
+Enter your guess: 25
+Incorrect! The number is greater than 25.
+
+Enter your guess: 35
+Incorrect! The number is less than 35.
+
+Enter your guess: 30
+Congratulations! You guessed the correct number in 4 attempts.
+```
+
+To make the game more interesting, you can add the following features:
+
+- Allow the user to play multiple rounds of the game (i.e., keep playing until the user decides to quit). You can do this by asking the user if they want to play again after each round.
+- Add a timer to see how long it takes the user to guess the number.
+- Implement a hint system that provides clues to the user if they are stuck.
+- Keep track of the user's high score (i.e., the fewest number of attempts it took to guess the number under a specific difficulty level).

src/data/projects/scalable-ecommerce-platform.md

@@ -0,0 +1,115 @@
+---
+title: 'Scalable E-Commerce Platform'
+description: 'Build an e-commerce platform using microservices architecture.'
+isNew: false
+sort: 19
+difficulty: 'advanced'
+nature: 'API'
+skills:
+  - 'Microservices'
+  - 'Database'
+  - 'Docker'
+  - 'Authentication'
+seo:
+  title: 'Scalable E-Commerce Platform Project Idea'
+  description: 'Build a scalable e-commerce platform using microservices architecture and Docker.'
+  keywords:
+    - 'e-commerce platform'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+Build a scalable e-commerce platform using microservices architecture and Docker. The platform will handle various aspects of an online store, such as product catalog management, user authentication, shopping cart, payment processing, and order management. Each of these features will be implemented as separate microservices, allowing for independent development, deployment, and scaling.
+
+## Core Microservices:
+
+Here are the sample core microservices that you can implement for your e-commerce platform:
+
+1. **User Service:**
+    - **Functionality:** Handles user registration, authentication, and profile management.
+    - **Tech Stack:** Any backend language e.g. Node.js (Express), Go, Python (Flask/Django)
+    - **Database:** Any database e.g. PostgreSQL
+
+2. **Product Catalog Service:**
+    - **Functionality:** Manages product listings, categories, and inventory.
+    - **Tech Stack:** Any backend language e.g. Node.js (Express), Go, Python (Flask/Django)
+    - **Database:** Any database e.g. MongoDB or MySQL
+
+3. **Shopping Cart Service:**
+    - **Functionality:** Manages users' shopping carts, including adding/removing items and updating quantities.
+    - **Tech Stack:** Any backend language e.g. Node.js (Express), Go, Python (Flask/Django)
+    - **Database:** Redis (for quick access)
+
+4. **Order Service:**
+    - **Functionality:** Processes orders, including placing orders, tracking order status, and managing order history.
+    - **Tech Stack:** Any backend language e.g. Node.js (Express), Go, Python (Flask/Django)
+    - **Database:** MySQL
+
+5. **Payment Service:**
+    - **Functionality:** Handles payment processing, integrating with external payment gateways.
+    - **Tech Stack:** Any backend language e.g. Node.js (Express), Go, Python (Flask/Django)
+    - **Third-Party Integration:** Stripe, PayPal, etc.
+
+6. **Notification Service:**
+    - **Functionality:** Sends email and SMS notifications for various events (e.g., order confirmation, shipping updates).
+    - **Tech Stack:** Any backend language e.g. Node.js (Express), Go, Python (Flask/Django)
+    - **Third-Party Integration:** Twilio, SendGrid, etc.
+
+## **Additional Components:**
+
+- **API Gateway:**
+    - **Functionality:** Serves as the entry point for all client requests, routing them to the appropriate microservice.
+    - **Tech Stack:** NGINX, Kong, or Traefik
+
+- **Service Discovery:**
+    - **Functionality:** Automatically detects and manages service instances.
+    - **Tech Stack:** Consul or Eureka
+
+- **Centralized Logging:**
+    - **Functionality:** Aggregates logs from all microservices for easy monitoring and debugging.
+    - **Tech Stack:** ELK Stack (Elasticsearch, Logstash, Kibana)
+
+- **Docker & Docker Compose:**
+    - **Functionality:** Containerizes each microservice and manages their orchestration, networking, and scaling.
+    - **Docker Compose:** Defines and runs multi-container Docker applications for development and testing.
+
+- **CI/CD Pipeline:**
+    - **Functionality:** Automates the build, test, and deployment process of each microservice.
+    - **Tech Stack:** Jenkins, GitLab CI, or GitHub Actions
+
+## Steps to Get Started:
+
+1. **Set up Docker and Docker Compose:**
+    - Create Dockerfiles for each microservice.
+    - Use Docker Compose to define and manage multi-container applications.
+
+2. **Develop Microservices:**
+    - Start with a simple MVP (Minimum Viable Product) for each service, then iterate by adding more features.
+
+3. **Integrate Services:**
+    - Use REST APIs or gRPC for communication between microservices.
+    - Implement an API Gateway to handle external requests and route them to the appropriate services.
+
+4. **Implement Service Discovery:**
+    - Use Consul or Eureka to enable dynamic service discovery.
+
+5. **Set up Monitoring and Logging:**
+    - Use tools like Prometheus and Grafana for monitoring.
+    - Set up the ELK stack for centralized logging.
+
+6. **Deploy the Platform:**
+    - Use Docker Swarm or Kubernetes for production deployment.
+    - Implement auto-scaling and load balancing.
+
+7. **CI/CD Integration:**
+    - Automate testing and deployment using Jenkins or GitLab CI.
+
+<hr />
+
+This project offers a comprehensive approach to building a modern, scalable e-commerce platform and will give you hands-on experience with Docker, microservices, and related technologies. After completing this project, you'll have a solid understanding of how to design, develop, and deploy complex distributed systems.

src/data/question-groups/devops/content/ansible-benefits.md

@@ -0,0 +1,8 @@
+As an open-source tool for configuration management, Ansible provides several benefits when added to your project:
+
+- **Simplicity**: Easy to learn and use with simple YAML syntax.
+- **Agentless**: No need to install agents on managed nodes; instead it uses SSH to communicate with them.
+- **Scalability**: Can manage a large number of servers simultaneously with minimum effort.
+- **Integration**: Ansible integrates well with various cloud providers, CI/CD tools, and infrastructure.
+- **Modularity**: [Extensive library](https://docs.ansible.com/ansible/2.9/modules/list_of_all_modules.html) of modules for different tasks.
+- **Reusability**: Ansible playbooks and roles can be reused and shared across projects.

src/data/question-groups/devops/content/auto-scaling.md

@@ -0,0 +1,6 @@
+While the specifics will depend on the cloud provider you decide to go with, the generic steps would be the following:
+
+1. **Set up an auto-scaling group**. Create what is usually known as an auto-scaling group, where you configure the minimum and maximum number of instances you can have and their types. Your scaling policies will interact with this group to automate the actions later on.
+2. **Define the scaling policies**. What makes your platform want to scale? Is it traffic? Is it resource allocation? Find the right metric, and configure the policies that will trigger a scale-up or scale-down event on the auto-scaling group you already configured.
+3. **Balance your load**. Now it’s time to set up a load balancer to distribute the traffic amongst all your nodes. 
+4. **Monitor**. Keep a constant monitor over your cluster to understand if your policies are correctly configured, or if you need to adapt and tweak them. Once you’re done with the first 3 steps, this is where you’ll constantly be, as the triggering conditions might change quite often.

src/data/question-groups/devops/content/blue-green-deployment.md

@@ -0,0 +1,15 @@
+![Blue vs Green Deployment](https://assets.roadmap.sh/guest/blue-green-deployment-example-wmj10.png)
+
+Blue-green deployment is a release strategy that reduces downtime and the risk of production issues by running two identical production environments, referred to as "blue" and "green."
+
+At a high level, the way this process works is as follows:
+
+- **Setup Two Environments**: Prepare two identical environments: blue (current live environment) and green (new version environment).
+- **Deploy to Green**: Deploy the new version of the application to the green environment through your normal CI/CD pipelines.
+- **Testing green**: Perform testing and validation in the green environment to ensure the new version works as expected.
+- **Switch Traffic**: Once the green environment is verified, switch the production traffic from blue to green. Optionally, the traffic switch can be done gradually to avoid potential problems from affecting all users immediately.
+- **Monitor**: Monitor the green environment to ensure it operates correctly with live traffic. Take your time, and make sure you’ve monitored every single major event before issuing the “green light”.
+- **Fallback Plan**: Keep the blue environment intact as a fallback. If any issues arise in the green environment, you can quickly switch traffic back to the blue environment. This is one of the fastest rollbacks you’ll experience in deployment and release management.
+- **Clean Up**: Once the green environment is stable and no issues are detected, you can update the blue environment to be the new staging area for the next deployment.
+
+This way, you ensure minimal downtime (either for new deployments or for rollbacks) and allow for a quick rollback in case of issues with the new deployment.

src/data/question-groups/devops/content/build-pipelines.md

@@ -0,0 +1,3 @@
+A build pipeline is an automated process that compiles, tests, and prepares code for deployment. It typically involves multiple stages, such as source code retrieval, code compilation, running unit tests, performing static code analysis, creating build artifacts, and deploying to one of the available environments.
+
+The build pipeline effectively removes humans from the deployment process as much as possible, clearly reducing the chance of human error. This, in turn, ensures consistency and reliability in software builds and speeds up the development and deployment process.

src/data/question-groups/devops/content/canary-release.md

@@ -0,0 +1,5 @@
+![Canary Releases](https://assets.roadmap.sh/guest/canarly-release-explained-c8nco.png)
+
+A canary release is a common and well-known deployment strategy. It works this way: when a  new version of an application is ready, instead of deploying it and making it available to everyone, you gradually roll it out to a small subset of users or servers before being released to the entire production environment.
+
+This way, you can test the new version in a real-world environment with minimal risk. If the canary release performs well and no issues are detected, the deployment is gradually expanded to a larger audience until it eventually reaches 100% of the users. If, on the other hand, problems are found, the release can be quickly rolled back with minimal impact.

src/data/question-groups/devops/content/cicd-setup.md

@@ -0,0 +1,32 @@
+Setting up a CI/CD pipeline from scratch involves several steps. Assuming you’ve already set up your project on a version control system, and everyone in your team has proper access to it, then the next steps would help:
+
+1. **Setup the Continuous Integration (CI)**:
+- Select a continuous integration tool (there are many, like Jenkins, GitLab CI, CircleCI, pick one).
+- Connect the CI tool to your version control system.
+- Write a build script that defines the build process, including steps like code checkout, dependencies installation, compiling the code, and running tests.
+- Set up automated testing to run on every code commit or pull request.
+
+2. **Artifact Storage**:
+- Decide where to store build artifacts (it could be Docker Hub, AWS S3 or anywhere you can then reference from the CD pipeline).
+- Configure the pipeline to package and upload artifacts to the storage after a successful build.
+
+3. **Setup your Continuous Deployment (CD)**:
+- Choose a CD tool or extend your CI tool (same deal as before, there are many options, pick one).
+Define deployment scripts that specify how to deploy your application to different environments (e.g., development, staging, production).
+- Configure the CD tool to trigger deployments after successful builds and tests.
+- Set up environment-specific configurations and secrets management.
+Remember that this system should be able to pull the artifacts from the continuous integration pipeline, so set up that access as well.
+
+4. **Infrastructure Setup**:
+- Provision infrastructure using IaC tools (e.g., Terraform, CloudFormation).
+- Ensure environments are consistent and reproducible to reduce times if there is a need to create new ones or destroy and recreate existing ones. This should be as easy as executing a command without any human intervention.
+
+5. **Setup your monitoring and logging solutions**:
+- Implement monitoring and logging for your applications and infrastructure (e.g., Prometheus, Grafana, ELK stack).
+- Remember to configure alerts for critical issues. Otherwise, you’re missing a key aspect of monitoring (reacting to problems).
+
+6. **Security and Compliance**:
+- By now, it’s a good idea to think about integrating security scanning tools into your pipeline (e.g., Snyk, OWASP Dependency-Check).
+- nsure compliance with relevant standards and practices depending on your specific project’s needs.
+
+Additionally, as a good practice,  you might also want to document the CI/CD process, pipeline configuration, and deployment steps. This is to train new team members on using and maintaining the pipelines you just created.

src/data/question-groups/devops/content/cluster-health.md

@@ -0,0 +1,7 @@
+As usual, there are many options when it comes to monitoring and logging solutions, even in the space of Kubernetes. Some useful options could be a Prometheus and Grafana combo, where you get the monitoring data with the first one and plot the results however you want with the second one.
+
+You could also set up an EFK-based (using Elastic, Fluentd, and Kibana) or ELK-based (Elastic, Logstash, and Kibana) logging solution to gather and analyze logs.
+
+Finally, when it comes to alerting based on your monitoring data, you could use something like [Alertmanager](https://github.com/prometheus/alertmanager) that integrates directly with Prometheus and get notified of any issues in your infrastructure.
+
+There are other options out there as well, such as NewRelic or Datadog. In the end, it’s all about your specific needs and the context around them.

src/data/question-groups/devops/content/common-iac-tools.md

@@ -0,0 +1,28 @@
+![Common IaC Tools](https://assets.roadmap.sh/guest/infrastructure-as-code-tools-oyapx.png)
+
+As usual, there are several options out there, some of them specialized in different aspects of IaC.
+
+**Configuration management tools**
+
+If you’re in search of effective configuration management tools to streamline and automate your IT infrastructure, you might consider exploring the following popular options:
+
+- Ansible
+- Chef
+- Puppet
+
+Configuration management tools are designed to help DevOps engineers manage and maintain consistent configurations across multiple servers and environments. These tools automate the process of configuring, deploying, and managing systems, ensuring that your infrastructure remains reliable, scalable, and compliant with your organization's standards.
+
+**Provisioning and orchestration tools**
+
+If, on the other hand, you’re looking for tools to handle provisioning and orchestration of your infrastructure, you might want to explore the following popular options:
+
+- Terraform
+- CloudFormation (AWS)
+- Pulumi
+
+Provisioning and orchestration tools are essential for automating the process of setting up and managing your infrastructure resources. These tools allow you to define your IaC, making it easier to deploy, manage, and scale resources across cloud environments.
+
+Finally, if you’re looking for multi-purpose tools, you can try something like:
+
+- Ansible (can also be used for provisioning)
+- Pulumi (supports both IaC and configuration management)

src/data/question-groups/devops/content/container-consistency.md

@@ -0,0 +1,8 @@
+Containers help to add consistency in several ways, here are some examples:
+
+- **Isolation**: Containers encapsulate all the dependencies, libraries, and configurations needed to run an application, isolating it from the host system and other containers. This ensures that the application runs the same way regardless of where the container is deployed.
+- **Portability**: Containers can be run on any environment that supports the container runtime. This means that the same container image can be used on a developer's local machine, a testing environment, or a production server without any kind of modification.
+- **Consistency**: By using the same container image across different environments, you eliminate inconsistencies from differences in configuration, dependencies, and runtime environments. This ensures that if the application works in one environment, it will work in all others.
+- **Version Control**: Container images can be versioned and stored in registries (e.g., Docker Hub, AWS ECR). This allows teams to track and roll back to specific versions of an application if there are problems.
+- **Reproducibility**: Containers make it easier to reproduce the exact environment required for the application. This is especially useful for debugging issues that occur in production but not in development, as developers can recreate the production environment locally.
+- **Automation**: Containers facilitate the use of automated build and deployment pipelines. Automated processes can consistently create, test, and deploy container images.

src/data/question-groups/devops/content/container-vs-vm.md

@@ -0,0 +1,6 @@
+A container is a runtime instance of a container image (which is a lightweight, executable package that includes everything needed to run your code). It is the execution environment that runs the application or service defined by the container image. 
+
+When a container is started, it becomes an isolated process on the host machine with its own filesystem, network interfaces, and other resources.
+Containers share the host operating system's kernel, making them more efficient and faster to start than virtual machines.
+
+A virtual machine (VM), on the other hand, is an emulation of a physical computer. Each VM runs a full operating system and has virtualized hardware, which makes them more resource-intensive and slower to start compared to containers.

src/data/question-groups/devops/content/continuous-monitoring.md

@@ -0,0 +1,7 @@
+As a DevOps engineer, the concept of continuous monitoring should be ingrained in your brain as a must-perform activity.
+
+You see, continuous monitoring is the practice of constantly overseeing and analyzing an IT system's performance, security, and compliance in real-time.
+
+It involves collecting and assessing data from various parts of the infrastructure to detect issues, security threats, and performance bottlenecks as soon as they occur.
+
+The goal is to ensure the system's health, security, and compliance, enabling quick responses to potential problems and maintaining the overall stability and reliability of the environment. Tools like Prometheus, Grafana, Nagios, and Splunk are commonly used for continuous monitoring.

src/data/question-groups/devops/content/data-migration.md

@@ -0,0 +1,11 @@
+Handling data migrations in a continuous deployment pipeline is not a trivial task. It requires careful planning to ensure that the application remains functional and data integrity is maintained throughout the process. Here’s an approach:
+
+1. **Backward Compatibility**: Ensure that any database schema changes are backward compatible. This means that the old application version should still work with the new schema. For example, if you're adding a new column, ensure the application can handle cases where this column might be null initially.
+2. **Migration Scripts**: Write database migration scripts that are idempotent (meaning that they can be run multiple times without causing issues) and can be safely executed during the deployment process. Use a tool like Flyway or Liquibase to manage these migrations.
+3. **Separate Deployment Phases**:
+- **Phase 1 - Schema Migration**: Deploy the database migration scripts first, adding new columns, tables, or indexes without removing or altering existing structures that the current application relies on.
+- **Phase 2 - Application Deployment**: Deploy the application code that utilizes the new schema. This ensures that the application is ready to work with the updated database structure.
+- **Phase 3 - Cleanup (Optional)**: After verifying that the new application version is stable, you can deploy a cleanup script to remove or alter deprecated columns, tables, or other schema elements. While optional, this step is advised, as it helps reduce the chances of creating a build up of technical debt for future developers to deal with.
+4. **Feature Flags**: Use feature flags to roll out new features that depend on the data migration. This allows you to deploy the new application code without immediately activating the new features, providing an additional safety net.
+
+That said, an important, non-technical step that should also be taken into consideration is the coordination with stakeholders, particularly if the migration is complex or requires downtime. Clear communication ensures that everyone is aware of the risks and the planned steps.

src/data/question-groups/devops/content/devsecops.md

@@ -0,0 +1,11 @@
+To implement security in a DevOps pipeline (DevSecOps), you should integrate security practices throughout the development and deployment process. This is not just about securing the app once it’s in production, this is about securing the entire app-creation process.
+
+That includes:
+
+1. **Shift Left Security**: Incorporate security early in the development process by integrating security checks in the CI/CD pipeline. This means performing static code analysis, dependency scanning, and secret detection during the build phase.
+2. **Automated Testing**: Implement automated security tests, such as vulnerability scans and dynamic application security testing (DAST), to identify potential security issues before they reach production.
+3. **Continuous Monitoring**: Monitor the pipeline and the deployed applications for security incidents using tools like Prometheus, Grafana, and specialized security monitoring tools.
+4. **Infrastructure as Code - Security**: Ensure that infrastructure configurations defined in code are secure by scanning IaC templates (like Terraform) for misconfigurations and vulnerabilities (like hardcoded passwords).
+5. **Access Control**: Implement strict access controls, using something like role-based access control (RBAC) or ABAC (attribute-based access control) and enforcing the principle of least privilege across the pipeline.
+6. **Compliance Checks**: Figure out the compliance and regulations of your industry and integrate those checks to ensure the pipeline adheres to industry standards and regulatory requirements.
+7. **Incident Response**: Figure out a clear incident response plan and integrate security alerts into the pipeline to quickly address potential security breaches.

src/data/question-groups/devops/content/docker-compose.md

@@ -0,0 +1,10 @@
+Docker Compose is, in fact, a tool designed to simplify the definition and management of multi-container Docker applications. It allows you to define, configure, and run multiple containers as a single service using a single YAML file.
+
+In a multi-container application, Compose provides the following key roles:
+
+1. **Service Definition**: With Compose you can specify multiple services inside a single file, you can also define how each service should be built, the networks they should connect to, and the volumes they should use (if any).
+2. **Orchestration**: It manages the startup, shutdown, and scaling of services, ensuring that containers are launched in the correct order based on the defined dependencies.
+3. **Environment Management**: Docker Compose simplifies environment configuration because it lets you set environment variables, networking configurations, and volume mounts in the docker-compose.yml file.
+4. **Simplified Commands**:  All of the above can be done with a very simple set of commands you can run directly from the terminal (i.e. docker-compose up, or docker-compose down).
+
+In the end, Docker Compose simplifies the development, testing, and deployment of multi-container applications by giving you, as a user, an extremely friendly and powerful interface.

src/data/question-groups/devops/content/explain-ci-vs-cd.md

@@ -0,0 +1,5 @@
+Continuous Integration (CI) involves automatically building and testing code changes as they are committed to version control systems (usually Git). This helps catch issues early and improves code quality.
+
+On the other hand, Continuous Deployment (CD) goes a step further by automatically deploying every change that passes the CI process, ensuring that software updates are delivered to users quickly and efficiently without manual intervention.
+
+Combined, they add a great deal of stability and agility to the development lifecycle.

src/data/question-groups/devops/content/health-monitor.md

@@ -0,0 +1,9 @@
+Each DevOps team should define this list within the context of their own project, however, a good rule of thumb is to consider the following metrics:
+
+1. **Build Success Rate**: The percentage of successful builds versus failed builds. A low success rate indicates issues in code quality or pipeline configuration.
+2. **Build Time**: The time it takes to complete a build. Monitoring build time helps identify bottlenecks and optimize the pipeline for faster feedback.
+3. **Deployment Frequency**: How often deployments occur. Frequent deployments indicate a smooth pipeline, while long gaps may signal issues with your CI/CD or with the actual dev workflow.
+4. **Lead Time for Changes**: The time from code commit to production deployment. Shorter lead times are preferable, indicating an efficient pipeline.
+5. **Mean Time to Recovery (MTTR)**: The average time it takes to recover from a failure. A lower MTTR indicates a resilient pipeline that can quickly address and fix issues.
+6. **Test Coverage and Success Rate**: The percentage of code covered by automated tests and the success rate of those tests. High coverage and success rates are good indicators of better quality and reliability. 
+7. **Change Failure Rate**: The percentage of deployments that result in failures. A lower change failure rate indicates a stable and reliable deployment process.

src/data/question-groups/devops/content/high-availability.md

@@ -0,0 +1,15 @@
+Having high availability in your system means that the cluster will always be accessible, even if one or more servers are down.
+
+While disaster recovery means having the ability to continue providing service even in the face of a regional network outage (when multiple sections of the world are rendered unreachable).
+
+To ensure high availability and disaster recovery in a cloud environment, you can follow these strategies if they apply to your particular context:
+
+- **Multi-Region Deployment**: If available, deploy your application across multiple geographic regions to ensure that if one region fails, others can take over, minimizing downtime.
+- **Redundancy**: Keep redundant resources, such as multiple instances, databases, and storage systems, across different availability zones within a region to avoid single points of failure.
+- **Auto-Scaling**: Implement auto-scaling to automatically adjust resource capacity in response to demand, ensuring the application remains available even under high load.
+- **Monitoring and Alerts**: Implement continuous monitoring and set up alerts to detect and respond to potential issues before they lead to downtime. Use tools like CloudWatch, Azure Monitor, or Google Cloud Monitoring.
+- **Failover Mechanisms**: Make sure to set up automated failover mechanisms to switch to backup systems or regions seamlessly in case of a failure in the primary systems.
+
+Whatever strategy (or combination of) you decide to go with, always develop and regularly test a disaster recovery plan that outlines steps for restoring services and data in the event of a major failure.
+
+This plan should include defined RTO (Recovery Time Objective) and RPO (Recovery Point Objective) targets. Being prepared to deal with the worst case scenarios is the only way, as these types of problems tend to cause chaos in small and big companies alike.

src/data/question-groups/devops/content/iac-concept.md

@@ -0,0 +1,9 @@
+![Explain the concept of IaC](https://assets.roadmap.sh/guest/infrastructure-as-code-with-terraform-fbhi6.png)
+
+IaC (Infrastructure as Code) is all about managing infrastructure through code, instead of using other more conventional configuration methods. Specifically in the context of Terraform, here is how you’d want to approach IaC:
+
+- **Configuration Files**: Define your infrastructure using HCL or JSON files.
+- **Execution Plan**: Generate a plan showing the changes needed to reach the desired state.
+- **Resource Provisioning**: Terraform will then apply the plan to provision and configure desired resources.
+- **State Management**: Terraform then tracks the current state of your infrastructure with a state file.
+- **Version Control**: Finally, store the configuration files in a version control system to easily version them and share them with other team members.

src/data/question-groups/devops/content/implement-logging.md

@@ -0,0 +1,6 @@
+Logging for a distributed system is definitely not a trivial problem to solve. While the actual implementation might change based on your particular tech stack, the main aspects to consider are:
+
+- Keep the structure of all logs consistent and the same throughout your platform. This will ensure that whenever you want to explore them in search for details, you’ll be able to quickly move from one to the other without having to change anything.
+- Centralize them somewhere. It can be an ELK stack, it can be Splunk or any of the many solutions available out there. Just make sure you centralize all your logs so that you can easily interact with all of them when required.
+- Add unique IDs to each request that gets logged, that way you can trace the flow of data from service to service. Otherwise, debugging problems becomes a real issue.
+- Add a tool that helps you search, query, and visualize the logs. After all, that’s why you want to keep track of that information, to use it somehow. Find yourself a UI that works for you and use it to explore your logs.

src/data/question-groups/devops/content/kubernetes-components.md

@@ -0,0 +1,19 @@
+There are many components involved, some of them are part of the master node, and others belong to the worker nodes.
+
+Here’s a quick summary:
+
+1. **Master Node Component**s:
+- **API Server**: The front-end for the Kubernetes control plane, handling all RESTful requests for the cluster.
+- **etcd**: A distributed key-value store that holds the cluster's configuration and state.
+- **Controller** Manager: Manages various controllers that regulate the state of the cluster.
+- **Scheduler**: Assigns workloads to different nodes based on resource availability and other constraints.
+2. *Worker Node Components*:
+- **Kubelet**: This is an agent that runs on each node, and it ensures that each container is running in a Pod.
+- **Kube-proxy**: A network proxy that maintains network rules and handles routing for services.
+- **Container Runtime**: This software runs containers, such as Docker, containerd, or CRI-O.
+3. **Additional Components**:
+- **Pods**: These are the smallest deployable units in Kubernetes; they consist of one or more containers.
+- **Services**: Services define a logical set of Pods and a policy for accessing them, they’re often used for load balancing.
+- **ConfigMaps and Secrets**: They manage configuration data and sensitive information, respectively.
+- **Ingress**: It manages external access to services, typically through HTTP/HTTPS.
+- **Namespaces**: They provide a mechanism for isolating groups of resources within a single cluster.

src/data/question-groups/devops/content/kubernetes-operators.md

@@ -0,0 +1,15 @@
+As with any piece of software solution, there are no absolutes. In the case of Kubernetes Operators, while they do offer significant benefits for automating and managing complex applications, they also introduce additional complexity and resource requirements.
+
+**Advantages of Kubernetes Operators**:
+
+1. **Automation of Complex Tasks**: Operators automate the management of complex stateful applications, such as databases, reducing the need for manual intervention.
+2. **Consistency**: They help reduce human error and increase reliability by ensuring consistent deployments, scaling, and management of applications across environments.
+3. **Custom Resource Management**: Operators allow you to manage custom resources in Kubernetes, extending its capabilities to support more complex applications and services.
+4. **Simplified Day-2 Operations**: Operators streamline tasks like backups, upgrades, and failure recovery, making it easier to manage applications over time.
+
+**Disadvantages of Kubernetes Operators**:
+
+1. **Complexity**: Developing and maintaining Operators can be complex and require in-depth knowledge of both Kubernetes and the specific application being managed.
+2. **Overhead**: Running Operators adds additional components to your Kubernetes cluster, which can increase resource consumption and operational overhead.
+3. **Limited Use Cases**: Not all applications benefit from the complexity of an Operator; for simple stateless applications, Operators might be overkill.
+4. **Maintenance**: Operators need to be regularly maintained and updated, especially as Kubernetes itself keeps evolving, which can add to the maintenance burden.

src/data/question-groups/devops/content/load-balancer.md

@@ -0,0 +1,7 @@
+![What is a load balancer?](https://assets.roadmap.sh/guest/loadbalancer-working-eytvi.png)
+
+A load balancer is a device or software that distributes incoming network traffic across multiple servers to ensure no single server becomes overwhelmed.
+
+It is important because it improves the availability, reliability, and performance of applications by evenly distributing the load, preventing server overload, and providing failover capabilities in case of server failures.
+
+Load balancers are usually used when scaling up RESTful microservices, because given their stateless nature, you can set up multiple copies of the same one behind a load balancer and let it distribute the load amongst all copies evenly.

src/data/question-groups/devops/content/microservice-challenges.md

@@ -0,0 +1,10 @@
+While in theory microservices can solve all platform problems, in practice there are several challenges that you might encounter along the way. 
+
+Some examples are:
+
+1. **Complexity**: Managing multiple services increases the overall system complexity, making development, deployment, and monitoring more challenging (as there are more “moving parts”).
+2. **Service Communication**: Ensuring reliable communication between services, handling network latency, and dealing with issues like service discovery and API versioning can be difficult. There are of course alternatives to deal with all of these issues, but they’re not evident right off the bat nor the same for everyone.
+3. **Data Management**: It’s all about trade-offs in the world of distributed computing. Managing data consistency and transactions across distributed services is complex, often requiring techniques like eventual consistency and distributed databases. 
+4. **Deployment Overhead**: Coordinating the deployment of multiple services, especially when they have interdependencies, can lead to more complex CI/CD pipelines.
+5. **Monitoring and Debugging**: Troubleshooting issues is harder in a microservices architecture due to the distributed nature of the system. Trying to figure out where the information goes and which services are involved in a single request can be quite a challenge for large platforms. This makes debugging microservices architecture a real headache.
+6. **Security**: Securing microservices involves managing authentication, authorization, and data protection across multiple services, often with varying security requirements.

src/data/question-groups/devops/content/microservice-vs-monolithic.md

@@ -0,0 +1,11 @@
+![Microservice vs Monolithic](https://assets.roadmap.sh/guest/microservice-vs-monolith-2og84.png)
+
+A microservice is an architectural style that structures an application as a collection of small, loosely coupled, and independently deployable services (hence the term “micro”).
+
+Each service focuses on a specific business domain and can communicate with others through well-defined APIs.
+
+In the end, your application is not (usually) composed of a single microservice (that would make it monolith), instead, its architecture consists of multiple microservices working together to serve the incoming requests.
+
+On the other hand, a monolithic application is a single (often massive) unit where all functions and services are interconnected and run as a single process.
+
+The biggest difference between monoliths and microservices is that changes to a monolithic application require the entire system to be rebuilt and redeployed, while microservices can be developed, deployed, and scaled independently, allowing for greater flexibility and resilience.

src/data/question-groups/devops/content/migrate-environment.md

@@ -0,0 +1,8 @@
+To migrate an existing application into a containerized environment, you’ll need to adapt the following steps to your particular context:
+
+1. Figure out what parts of the application need to be containerized together.
+2. Create your Dockerfiles and define the entire architecture in that configuration, including the interservice dependencies that there might be.
+3. Figure out if you also need to containerize any external dependency, such as a database. If you do, add that to the Dockerfile.
+4. Build the actual docker image.
+5. Once you make sure it runs locally, configure the orchestration tool you use to manage the containers.
+6. You’re now ready to deploy to production, however, make sure you keep monitoring and alerting on any problem shortly after the deployment in case you need to roll back.

src/data/question-groups/devops/content/multi-cloud-kubernetes.md

@@ -0,0 +1,5 @@
+The process is pretty much the same as it was described above, with an added step to set up the actual Kubernetes cluster:
+
+Use Terraform to define and provision Kubernetes clusters in each cloud. For instance, create an EKS cluster on AWS, an AKS cluster on Azure, and a GKE cluster on Google Cloud, specifying configurations such as node types, sizes, and networking.
+
+Once you’re ready, make sure to set up the Kubernetes auto-scaler on each of the cloud providers to manage resources and scale based on the load they receive.

src/data/question-groups/devops/content/multi-cloud.md

@@ -0,0 +1,9 @@
+Setting up a multi-cloud infrastructure using Terraform involves the following steps:
+
+1. **Define Providers**: In your Terraform configuration files, define the providers for each cloud service you intend to use (e.g., AWS, Azure, Google Cloud). Each provider block will configure how Terraform interacts with that specific cloud.
+2. **Create Resource Definitions**: In the same or separate Terraform files, define the resources you want to provision in each cloud. For example, you might define AWS EC2 instances, Azure Virtual Machines, and Google Cloud Storage buckets within the same project.
+3. **Set Up State Management**: Use a remote backend to manage Terraform state files centrally and securely. This is crucial for multi-cloud setups to ensure consistency and to allow collaboration among team members.
+4. **Configure Networking**: Design and configure networking across clouds, including VPCs, subnets, VPNs, or peering connections, to enable communication between resources in different clouds.
+5. **Provision Resources**: Run terraform init to initialize the configuration, then terraform plan to preview the changes, and finally terraform apply to provision the infrastructure across the multiple cloud environments.
+6. **Handle Authentication**: Ensure that each cloud provider's authentication (e.g., access keys, service principals) is securely handled, possibly using environment variables or a secret management tool. Do not hardcode sensitive information in your code, ever.
+7. **Monitor and Manage**: As always, after deploying, use Terraform's state files and output to monitor the infrastructure.

src/data/question-groups/devops/content/network-configuration.md

@@ -0,0 +1,7 @@
+Managing the network configuration is not a trivial task, especially when the architecture is big and complex.
+
+- Specifically in a cloud environment, managing network configurations involves several steps:
+Creating and isolating resources within Virtual Private Clouds (VPCs), organizing them into subnets, and controlling traffic using security groups and network ACLs. 
+- Set up load balancers to distribute traffic for better performance, while setting up DNS services at the same time to manage domain routing. 
+- Have VPNs and VPC peering connect cloud resources securely with other networks. 
+- Finally, automation tools like Terraform handle network setups consistently, and monitoring tools ensure everything runs smoothly.

src/data/question-groups/devops/content/optimize-cicd.md

@@ -0,0 +1,9 @@
+There are many ways in which you can optimize a CI/CD pipeline for performance and reliability, it all depends highly on the tech stack and your specific context (your app, your CI/CD setup, etc). However, the following are some potential solutions to this problem:
+
+1. **Parallelize Jobs**: As long as you can, try to run independent jobs in parallel to reduce overall build and test times. This ensures faster feedback and speeds up the entire pipeline.
+2. **Optimize Build Caching**: Use caching mechanisms to avoid redundant work, such as re-downloading dependencies or rebuilding unchanged components. This can significantly reduce build times.
+3. **Incremental Builds**: Implement incremental builds that only rebuild parts of the codebase that have changed, rather than the entire project. This is especially useful for large projects with big codebases.
+4. **Efficient Testing**: Prioritize and parallelize tests, running faster unit tests early and reserving more intensive integration or end-to-end tests for later stages. Be smart about it and use test impact analysis to only run tests affected by recent code changes.
+5. **Monitor Pipeline Health**: Continuously monitor the pipeline for bottlenecks, failures, and performance issues. Use metrics and logs to identify and address inefficiencies.
+6. **Environment Consistency**: Ensure that build, test, and production environments are consistent to avoid "it works on my machine" issues. Use containerization or Infrastructure as Code (IaC) to maintain environment parity. Your code should work in all environments, and if it doesn’t, it should not be the fault of the environment.
+7. **Pipeline Stages**: Use pipeline stages wisely to catch issues early. For example, fail fast on linting or static code analysis before moving on to more resource-intensive stages.

src/data/question-groups/devops/content/orchestration.md

@@ -0,0 +1,7 @@
+Orchestration in DevOps refers to the automated coordination and management of complex IT systems. It involves combining multiple automated tasks and processes into a single workflow to achieve a specific goal.
+
+Nowadays, automation (or orchestration) is one of the key components of any software development process and it should never be avoided nor preferred over manual configuration.
+
+As an automation practice, orchestration helps to remove the chance of human error from the different steps of the software development lifecycle. This is all to ensure efficient resource utilization and consistency.
+
+Some examples of orchestration can include orchestrating container deployments with Kubernetes and automating infrastructure provisioning with tools like Terraform.