Merge branch 'master' into feat/project

Add "Too Many Linked Lists" book to Rust LinkedList resources

.astro/settings.json

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

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/blockchain.json

@@ -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

@@ -367,8 +367,34 @@
   },
   "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.",
-    "links": []
+    "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"
+      }
+    ]
   },
   "lqFp4VLY_S-5tAbhNQTew": {
     "title": "CISA",
@@ -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",
@@ -2000,7 +2129,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

@@ -572,7 +572,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 +3052,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",

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://discord.gg/ZrSpJ8zH) and ask away!",
     "links": []
   }
 }

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

@@ -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",
@@ -1914,11 +1942,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 +2202,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

@@ -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 usecase 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",

public/roadmap-content/python.json

@@ -194,8 +194,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",

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"
       }
     ]
   },
@@ -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,8 +263,14 @@
   },
   "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",

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/OpenSourceStat.astro

@@ -44,7 +44,7 @@ const isDiscordMembers = text.toLowerCase() === 'discord members';
   }
   <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>

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. 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,327 @@
+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 items-center 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}
+                    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,30 @@
+import { cn } from '../../lib/classname.ts';
+import { type LucideIcon, ThumbsUp } from 'lucide-react';
+
+type VoteButtonProps = {
+  icon: LucideIcon;
+  isActive: boolean;
+  count: number;
+  onClick: () => void;
+};
+export function VoteButton(props: VoteButtonProps) {
+  const { icon: VoteIcon, isActive, count, onClick } = props;
+  return (
+    <button
+      className={cn(
+        'flex items-center 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]')} />
+      <span className="relative -top-[0.5px] text-xs font-medium tabular-nums">
+        {count}
+      </span>
+    </button>
+  );
+}

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/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/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/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/roadmaps/android/content/textview@znvZp24L-PcQwkSObtixs.md

@@ -0,0 +1,7 @@
+# TextView
+
+TextView is a widget that is seen in every android application. This widget is used to display simple text within the android application.
+
+Visit the following resources to learn more:
+
+- [@article@Android developers: TextView](https://developer.android.com/reference/android/widget/TextView)

src/data/roadmaps/android/content/toast@BVgO9n7tGlVdiS72-hFSd.md

@@ -0,0 +1,7 @@
+# Toast
+
+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.
+
+Visit the following resources to learn more:
+
+- [@article@Android developers: Toast](https://developer.android.com/guide/topics/ui/notifiers/toasts)

src/data/roadmaps/angular/content/creating-modules@9YhTXybJw2gszlqFeBtW3.md

@@ -2,15 +2,6 @@
 
 Creating modules in Angular helps organize your application into manageable, cohesive units. Each module can encapsulate related components, directives, pipes, and services. Here's a detailed guide on how to create and use modules in Angular.
 
-Creation Methods:
-
--     Generate Modules: Use ng generate module module-name.
--     Define Modules: Use @NgModule decorator to declare components, import other modules, and export components.
--     Create and Add Components: Generate and add components to the module.
--     Import Modules: Import your new module into app.module.ts or other feature modules.
--     Feature Modules: Use feature modules for large applications to manage related functionalities.
-
 Visit the following resources to learn more:
 
 - [@official@Angular Official Docs (Feature Modules)](https://angular.dev/guide/ngmodules/feature-modules)
-- [@article@How to Create a new module in Angular](https://www.geeksforgeeks.org/how-to-create-a-new-module-in-angular/)

src/data/roadmaps/angular/content/module-architecture@BCq5sgWQLiw0f7u7ZSAd2.md

@@ -1 +1,7 @@
-# Module Architecture
+# Module Architecture
+
+Angular’s module architecture organizes an application into cohesive units called NgModules, each defined by the @NgModule decorator. These modules group related components, directives, pipes, and services to encapsulate functionality and promote modular development. The root module (AppModule) is the entry point, bootstrapping the application and importing essential modules like BrowserModule. Feature modules encapsulate specific functionalities and can be eagerly or lazily loaded to improve performance and manageability. Shared modules group reusable components and services to prevent code duplication. The @NgModule metadata includes properties like imports, declarations, exports, providers, and bootstrap, which help manage dependencies, declarations, visibility, service providers, and the root component. This modular approach enhances code organization, scalability, and maintainability in Angular applications.
+
+Visit following resources to learn more:
+
+- [@article@Angular Architecture](https://dev.to/digitaldino/angular-architecture-39no)

src/data/roadmaps/backend/content/graphql@zp3bq38tMnutT2N0tktOW.md

@@ -11,4 +11,5 @@ GraphQL is widely used in modern web and mobile applications, and it is supporte
 Visit the following resources to learn more:
 
 - [@official@GraphQL Official Website](https://graphql.org/)
+- [@video@Tutorial - GraphQL Explained in 100 Seconds](https://www.youtube.com/watch?v=eIQh02xuVw4)
 - [@feed@Explore top posts about GraphQL](https://app.daily.dev/tags/graphql?ref=roadmapsh)

src/data/roadmaps/backend/content/timescale@WiAK70I0z-_bzbWNwiHUd.md

@@ -1 +1,9 @@
-# TimeScale
+# TimeScale
+
+TimescaleDB is an open-source time-series database built on top of PostgreSQL, designed for efficiently storing and querying time-series data. 
+
+It 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. 
+
+TimescaleDB 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.
+
+It's a robust choice for developers looking to manage time-series data in scalable and efficient ways.

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

@@ -5797,7 +5797,7 @@
       },
       "selected": false,
       "data": {
-        "label": "Cloud Design Ptterns",
+        "label": "Cloud Design Patterns",
         "style": {
           "fontSize": 17,
           "justifyContent": "flex-start",
@@ -8409,4 +8409,4 @@
       "focusable": true
     }
   ]
-}
+}

src/data/roadmaps/cyber-security/content/drive-by-attack@cO70zHvHgBAH29khF-hBW.md

@@ -0,0 +1,7 @@
+# Drive-by Attack
+
+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.
+
+Visit the following resources to learn more:
+
+- [@aticle@What is a Drive-By Attack?](https://www.ericom.com/glossary/what-is-a-drive-by-attack/)

src/data/roadmaps/cyber-security/content/evil-twin@O1fY2n40yjZtJUEeoItKr.md

@@ -0,0 +1,21 @@
+# What is Evil Twin attack
+
+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.
+
+## Types of Evil Twin Attacks
+
+- **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.
+- **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.
+- **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.
+- **Malware Injection:** The attacker injects malware into the user's device, which can then spread to other devices on the network.
+
+## How Evil Twin Attacks are Carried Out
+
+- **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.
+- **Wi-Fi Scanning:** The attacker uses specialized software to scan for nearby Wi-Fi networks and identify potential targets.
+- **Network Sniffing:** The attacker uses network sniffing tools to capture and analyze network traffic, allowing them to identify vulnerabilities and intercept sensitive information.
+
+Visit the following resources to learn more:
+
+- [@website@Common tool - airgeddon](https://www.kali.org/tools/airgeddon/)

src/data/roadmaps/cyber-security/content/impersonation@ZEgxmvjWPp5NofLFz_FTJ.md

@@ -0,0 +1,7 @@
+# Impersonation
+
+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.
+
+Visit the following resources to learn more:
+
+- [@article@What is an Impersonation Attack?](https://www.upguard.com/blog/impersonation-attack)

src/data/roadmaps/cyber-security/content/watering-hole-attack@dcvuKHq0nHgHLcLwtl4IJ.md

@@ -0,0 +1,7 @@
+# Watering Hole Attack
+
+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.
+
+Visit the following resources to learn more:
+- [@article@What is a watering hole attack?](https://www.techtarget.com/searchsecurity/definition/watering-hole-attack)
+

src/data/roadmaps/cyber-security/cyber-security.json

@@ -1749,7 +1749,7 @@
       "focusable": true
     },
     {
-      "id": "BqvijNoRzSGYLCMP-6hhr",
+      "id": "AAo7DXB7hyBzO6p05gx1i",
       "type": "subtopic",
       "position": {
         "x": -390.0291449445003,
@@ -1757,7 +1757,7 @@
       },
       "selected": false,
       "data": {
-        "label": "CISSP",
+        "label": "CEH",
         "style": {
           "fontSize": 17,
           "justifyContent": "flex-start",
@@ -2045,7 +2045,7 @@
       "selectable": true
     },
     {
-      "id": "AAo7DXB7hyBzO6p05gx1i",
+      "id": "BqvijNoRzSGYLCMP-6hhr",
       "type": "subtopic",
       "position": {
         "x": -389.24003999212795,
@@ -2053,7 +2053,7 @@
       },
       "selected": false,
       "data": {
-        "label": "CEH",
+        "label": "CISSP",
         "style": {
           "fontSize": 17,
           "justifyContent": "flex-start",
@@ -12001,4 +12001,4 @@
       "focusable": true
     }
   ]
-}
+}

src/data/roadmaps/devops/content/bash@syBIAL1mHbJLnTBoSxXI7.md

@@ -1,4 +1,5 @@
 # Bash scripting
 
 - [@article@Interactive Shell Scripting Tutorial](https://www.learnshell.org/en/Welcome)
-- [@feed@Explore top posts about Bash](https://app.daily.dev/tags/bash?ref=roadmapsh)
+- [@article@Bash Scripting Tutorial](https://www.javatpoint.com/bash)
+- [@feed@Explore top posts about Bash](https://app.daily.dev/tags/bash?ref=roadmapsh)

src/data/roadmaps/devops/content/datadog@BHny2Emf96suhAlltiEro.md

@@ -0,0 +1 @@
+# Datadog

src/data/roadmaps/devops/devops.md

@@ -18,7 +18,7 @@ question:
     DevOps is not a specific job title or role, but rather a set of practices and principles that can be applied across a variety of roles in software development and IT operations. Anyone involved in the software development and delivery process can adopt a DevOps mindset and apply DevOps practices in their work, including developers, testers, operations engineers, product managers, and others.
     
     ## What is a DevOps Engineer?
-    While DevOps is not a specific job title or role, organizations often hire for a "DevOps Engineer" role. A DevOps Engineer is a software engineer who specializes in the practices and tools that enable the continuous delivery of software. DevOps Engineers are responsible for the design and implementation of applications, software, and services for their organization, and they work closely with developers, testers, and operations staff to oversee the code releases.
+    While DevOps is not a specific job title or role, organizations often hire for a "DevOps Engineer" role. A [DevOps Engineer](https://roadmap.sh/devops/devops-engineer) is a software engineer who specializes in the practices and tools that enable the continuous delivery of software. DevOps Engineers are responsible for the design and implementation of applications, software, and services for their organization, and they work closely with developers, testers, and operations staff to oversee the code releases.
 dimensions:
   width: 968
   height: 2850

src/data/roadmaps/devrel/content/building-a-community@GvmXdWiwITgWzx_f5_ick.md

@@ -1 +1,8 @@
-# Building a Community
+# Building a Community
+
+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.
+
+Learn more from the following resources:
+
+- [@article@Building and Nurturing Online Developer Communities: The Ultimate Guide](https://www.doc-e.ai/post/building-and-nurturing-online-developer-communities-the-ultimate-guide)
+- [@article@10 Proven Strategies for Building a Developer Community That Thrives: A Guide to Inclusion & Engagement](https://dev.to/swati1267/10-proven-strategies-for-building-a-developer-community-that-thrives-a-guide-to-inclusion-engagement-21cm)

src/data/roadmaps/git-github/content/--hard@V_joZNpQsS9G9PI-o-GmC.md

@@ -1 +1,7 @@
-# --hard
+# --hard
+
+With this option, both the HEAD pointer and the working directory's contents are updated to match the specified commit. Any changes made since then will be lost.
+
+Visit the following resources to learn more:
+
+- [@official@--hard documentation](https://git-scm.com/docs/git-reset#Documentation/git-reset.txt---hard)

src/data/roadmaps/git-github/content/--mixed@qis7Z5VRxMcOmbesQlegZ.md

@@ -1 +1,7 @@
-# --mixed
+# --mixed
+
+When using mixed mode, the HEAD pointer is moved to the specified commit. However, files in your working directory remain as they were before the reset. The staging area (index) is updated to match the specified commit.
+
+Visit the following resources to learn more:
+
+- [@official@--mixed documentation](https://git-scm.com/docs/git-reset#Documentation/git-reset.txt---hard)

src/data/roadmaps/git-github/content/--soft@Uc7FyfAKpDFRGRNHwztFo.md

@@ -1 +1,5 @@
-# --soft
+# --soft
+
+In this mode, only the HEAD pointer is moved to the specified commit. The files in your working directory are not modified, but they remain as they were when you started the reset.
+
+- [@official@--soft documentation](https://git-scm.com/docs/git-reset#Documentation/git-reset.txt---hard)

src/data/roadmaps/git-github/content/adding--updating@x4bnsPVTiX2xOCSyrgWpF.md

@@ -1 +1,8 @@
-# Adding / Updating
+# Adding / Updating
+
+To add a submodule to a repository, use `git submodule add https://github.com/user/submodule-repo.git`, which is the typical format for specifying the URL of the submodule repository. This creates a new folder for the submodule and checks it out at the specified revision. To update an existing submodule to its latest commit, run `git submodule update`. If you want to pull in changes from upstream while keeping your submodule's history intact, use `git submodule sync` followed by `git submodule update`.
+
+Visit the following resources to learn more:
+
+- [@article@Git submodules](https://www.atlassian.com/git/tutorials/git-submodule)
+- [@article@Working with submodules](https://github.blog/open-source/git/working-with-submodules/)

src/data/roadmaps/git-github/content/automations@TNBz5755PhI6iKxTQTqcS.md

@@ -1 +1,8 @@
-# Automations
+# Automations
+
+To add automation to your GitHub project, use built-in workflows that can trigger actions such as setting fields on item changes or archiving items meeting specific criteria, and also configure automatic item addition from repositories based on matching criteria.
+
+Visit the following resources to learn more:
+
+- [@official@Automating your project](https://docs.github.com/en/issues/planning-and-tracking-with-projects/automating-your-project)
+- [@video@GitHub Project Management - Create GitHub Project Board & Automations](https://www.youtube.com/watch?v=oPQgFxHcjAw&t=600s)

src/data/roadmaps/git-github/content/basic-git-usage@PtU5Qwfzn3N1i3oRlCGoR.md

@@ -2,7 +2,7 @@
 
 Starting with a new project, you'll use `git init` to initialize a repository and then make changes using `git add`. Once ready, commit your work with `git commit`. If mistakes occur, `git reset` can help correct them. You'll also interact with remote repositories, whether private or public, by adding remotes (git remote add) and managing their connections through commands like `git fetch`, `git push`, and `git pull`.
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@video@Git Tutorial for Beginners: Learn Git in 1 Hour](https://www.youtube.com/watch?v=8JJ101D3knE&t=1135s)
 - [@article@Git ignore](https://www.atlassian.com/git/tutorials/saving-changes/gitignore)

src/data/roadmaps/git-github/content/between-branches@O-zoAWkDvyn7B8_TmY257.md

@@ -1 +1,8 @@
-# Between Branches
+# Between Branches
+
+When comparing the differences between two branches, such as a feature branch and its upstream parent branch, use `git diff <branch1>..<branch2>`. This command displays the changes made on the feature branch relative to the parent branch. It's useful for reviewing the impact of new features or changes before merging them into your mainline.
+
+Visit the following resources to learn more:
+
+- [@article@How to compare branches in Git diff](https://scribehow.com/shared/How_to_Compare_Branches_in_GitHub__xsotezV-S1O-GL0PquqJwQ)
+- [@article@How can I see the differences between two branches?](https://stackoverflow.com/questions/9834689/how-can-i-see-the-differences-between-two-branches)

src/data/roadmaps/git-github/content/between-commits@Rwpeltygwzcf6hnuZNURE.md

@@ -1 +1,8 @@
-# Between Commits
+# Between Commits
+
+To compare two specific commits in your Git history, use git diff followed by the hashes of the commits. This will show you the changes made between those two points, including added, modified, and deleted lines.
+
+Visit the following resources to learn more:
+
+- [@article@Comparing changes with Git diff](https://refine.dev/blog/git-diff-command/)
+- [@video@Git Diff 2 Different Commits, Tags or Branches](https://www.youtube.com/watch?v=uq5VWPDCtFo)

src/data/roadmaps/git-github/content/branch-naming@ks1Pip-RM-UWD6zuF2j4n.md

@@ -1 +1,8 @@
-# Branch Naming
+# Branch Naming
+
+A well-defined branch naming convention is essential for maintaining a clean and organized Git workflow. It's recommended to use descriptive and meaningful names that clearly indicate the purpose of each branch. For example, using prefixes like `feature/`, `fix/`, or `docs/` can help identify whether a branch is related to new feature development, bug fixes, or documentation updates. Additionally, including the issue or task ID (e.g., `issue/123`) can provide context and make it easier for team members to find relevant information. By following a consistent naming convention, you can improve collaboration, reduce confusion, and increase the overall efficiency of your Git workflow.
+
+Visit the following resources to learn more:
+
+- [@article@Naming conventions for Git Branches — a Cheatsheet](https://medium.com/@abhay.pixolo/naming-conventions-for-git-branches-a-cheatsheet-8549feca2534)
+- [@article@Git Branching Naming Convention: Best Practices to Follow](https://phoenixnap.com/kb/git-branch-name-convention)

src/data/roadmaps/git-github/content/branching-basics@bXfCUG3h1TIFPgD4WUDph.md

@@ -1 +1,8 @@
-# Branching Basics
+# Branching Basics
+
+Branches in Git serve as separate lines of development that allow multiple features or changes to be worked on simultaneously without affecting the main codebase. With branches, you can create isolated environments for different tasks, collaborate with others, and manage complex workflows.
+
+Visit the following resources to learn more:
+
+- [@official@Git Branching - Basic Branching and Merging](https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging)
+- [@video@Git Branches Tutorial](https://www.youtube.com/watch?v=e2IbNHi4uCI)

src/data/roadmaps/git-github/content/caching-dependencies@HMNhzzV6ApTKj4I_FOmUB.md

@@ -1 +1,13 @@
-# Caching Dependencies
+# Caching Dependencies
+
+GitHub Actions provides a caching feature that allows you to store and reuse dependencies between workflows, reducing the time it takes to run your actions. By caching dependencies, you can:
+- Reuse compiled code
+- Store database connections
+- Reduce network traffic
+
+It is highly recommended to not store any sensitive information in the cache. For example, sensitive information can include access tokens or login credentials stored in a file in the cache path.
+
+Visit the following resources to learn more:
+
+- [@official@Caching dependencies to speed up workflows](https://docs.github.com/en/actions/writing-workflows/choosing-what-your-workflow-does/caching-dependencies-to-speed-up-workflows)
+- [@video@Cache Management with GitHub actions](https://www.youtube.com/watch?v=7PVUjRXUY0o)

src/data/roadmaps/git-github/content/checkout-branch@PtRo-wGiNAagZ6CykfvMr.md

@@ -2,7 +2,7 @@
 
 In Git, to "checkout" from a branch means to switch your working directory to that branch, making it the active branch. This updates your files to match the state of that branch and allows you to work on it.
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@official@git-checkout](https://git-scm.com/docs/git-checkout)
 - [@article@git-commands-checkout](https://www.git-tower.com/learn/git/commands/git-checkout)

src/data/roadmaps/git-github/content/checkout-tags@62E1tDMXB6K74OEN0WsS0.md

@@ -2,7 +2,7 @@
 
 Tags in Git are typically used to mark specific points in history, such as a release version. Checking out a tag means switching your working directory to the state of the repository at the point in time when that tag was created.
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@article@How To Checkout Git Tags](https://devconnected.com/how-to-checkout-git-tags/)
 - [@article@What is git tag, How to create tags & How to checkout git remote tag(s)](https://stackoverflow.com/questions/35979642/what-is-git-tag-how-to-create-tags-how-to-checkout-git-remote-tags)

src/data/roadmaps/git-github/content/cherry-picking-commits@eFf2fesrs-1aVM5tH3ORQ.md

@@ -2,7 +2,7 @@
 
 Cherry-picking in Git allows you to apply a specific commit from one branch to another, without merging the entire branch. This is useful when you want to bring in a specific feature or fix from one branch to another without incorporating all the changes from the source branch.
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@official@git-cherry-pick-docs](https://git-scm.com/docs/git-cherry-pick)
 - [@article@Git cherry pick](https://www.atlassian.com/git/tutorials/cherry-pick)

src/data/roadmaps/git-github/content/citation-files@Ddkss13_qDJTquDHbVTVs.md

@@ -0,0 +1,7 @@
+# CITATION files
+
+You can add a CITATION.cff file to the root of a repository to let others know how you would like them to cite your work. The citation file format is plain text with human- and machine-readable citation information.
+
+Visit the following resources to learn more:
+
+- [@official@CITATION Files Documentation](https://docs.github.com/en/repositories/managing-your-repositorys-settings-and-features/customizing-your-repository/about-citation-files)

src/data/roadmaps/git-github/content/clean-git-history@i3AbARgzQtxtlB-1AS8zv.md

@@ -7,7 +7,7 @@ Cleaning up Git history can make your commit history more readable, concise, and
 - To be able to deploy any commit on your development branch using your CI/CD system
 - If you are handling mobile app releases and you are responsible for figuring out what feature is in which release.
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@article@Clean GIT history — a Step by Step Guide](https://medium.com/@catalinaturlea/clean-git-history-a-step-by-step-guide-eefc0ad8696d)
 - [@video@Git best practice tip: clean commit history](https://youtu.be/bZpiVijzd2g?si=8lJTlR3LfY9ZUd77)

src/data/roadmaps/git-github/content/client-vs-server-hooks@zsU6R2zvJKnYNU2ac4o4p.md

@@ -2,8 +2,8 @@
 
 Like many other Version Control Systems, Git has a way to fire off custom scripts when certain important actions occur. There are two groups of these hooks: client-side and server-side. Client-side hooks are triggered by operations such as committing and merging, while server-side hooks run on network operations such as receiving pushed commits.
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@official@Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks#:~:text=There%20are%20two%20groups%20of,for%20all%20sorts%20of%20reasons.)
 - [@article@Git Hooks: The Powerful Tool You're Probably Not Using](https://dev.to/algodame/git-hooks-the-powerful-tool-youre-probably-not-using-but-should-be-1lec)
-- [@video@Client vs Server Hooks](https://youtu.be/egfuwOe8nXc?si=IkbLCr-3eGE9x6cY)
+- [@video@Client vs Server Hooks](https://youtu.be/egfuwOe8nXc?si=IkbLCr-3eGE9x6cY)

src/data/roadmaps/git-github/content/cloning-repositories@1Koej79yTv-OAswVZwgGq.md

@@ -1,9 +1,9 @@
 # Cloning Repositories
 Cloning a repository in Git and GitHub involves creating a local copy of a remote repository on your computer. This allows you to work on the project locally, commit changes, and later push those changes back to the remote repository.
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@official@Git clone](https://git-scm.com/docs/git-clone/en)
 - [@official@Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)
 - [@article@Clone a git respository](https://www.atlassian.com/git/tutorials/setting-up-a-repository/git-clone)
-- [@video@Cloning remote respository into local machine](https://youtu.be/xeQih8LVtZM?si=djlyTDpLNS0oyqQH)
+- [@video@Cloning remote respository into local machine](https://youtu.be/xeQih8LVtZM?si=djlyTDpLNS0oyqQH)

src/data/roadmaps/git-github/content/code-reviews@xLB2fhsOm0Vu3xg_PusJB.md

@@ -1,6 +1,5 @@
 # Code Reviews
 
-
 The purpose of a code review in software development is to help ensure that the code meets the organization’s standards and requirements, is of high quality, and is maintainable. In addition to identifying errors and bugs, code reviews also promote a culture of learning and collaboration among the development team.
 
 Some of the benefits of code reviews include:
@@ -10,7 +9,7 @@ Some of the benefits of code reviews include:
 - Boost collaboration, communication, and knowledge sharing among developers by providing a forum to discuss code and ask questions, share ideas and best practices, and learn from each other.
 - Ensure that the code is maintainable by identifying any software maintenance issues and suggesting improvements.
 
-Learn more from the following links:
+Visit the following resources to learn more:
 
 - [@article@A practical guide for better, faster code reviews](https://github.com/mawrkus/pull-request-review-guide)
 - [@article@How to improve code with code reviews](https://github.com/resources/articles/software-development/how-to-improve-code-with-code-reviews)

src/data/roadmaps/git-github/content/collaboration-on-github@d_GNnB6PBINz1jxGNWAE-.md

@@ -2,8 +2,8 @@
 
 Collaboration on GitHub is a powerful way for multiple people to work together on the same project, using Git as the version control system. GitHub provides various tools and workflows that make collaboration efficient and organized.
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@official@How to collaborate in a GitHub project](https://gist.github.com/neklaf/9002d3acccf6b6e448db5c4c4e8764c0)
 - [@article@Best Practices for collaborating in github](https://www.gitkraken.com/blog/collaborate-on-github)
-- [@article@Working with GitHub in VS Code](https://code.visualstudio.com/docs/sourcecontrol/github)
+- [@article@Working with GitHub in VS Code](https://code.visualstudio.com/docs/sourcecontrol/github)

src/data/roadmaps/git-github/content/collaboration@bXfCUG3h1TIFPgD4WUDph.md

@@ -2,7 +2,7 @@
 
 When working on projects with others, Git provides tools to facilitate collaboration through forking repositories using `git clone` or `git fork`, cloning them locally with git clone, managing pull requests with `git request-pull`, and resolving merge conflicts. To contribute effectively, follow established contributing guides and respect open-source licences that govern how contributors' work may be used by others.
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@article@Git Fork and Git Clone: The difference and why it's important!](https://dev.to/danielasaboro/git-fork-and-clone-whats-the-difference-190c)
 - [@article@About pull requests](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/about-pull-requests)

src/data/roadmaps/git-github/content/collaborators--members@_ft-uvXt6s_xrcMT3fbSF.md

@@ -1 +1,8 @@
-# Collaborators / Members
+# Collaborators / Members
+
+In GitHub, collaborators and members refer to individuals who contribute to or have access to your repository. Collaborators are users who have been granted permission to contribute code, make changes, and push updates to your repository, whereas members are the owners of a repository, including organization owners who have full control over their team's repositories. Members can be either individual collaborators or part of an organization team, with varying levels of access and permissions based on their role within the team.
+
+Visit the following resources to learn more:
+
+- [@article@Inviting collaborators to a personal repository](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-access-to-your-personal-repositories/inviting-collaborators-to-a-personal-repository)
+- [@official@REST API endpoints for collaborators](https://docs.github.com/en/rest/collaborators/collaborators?apiVersion=2022-11-28)

src/data/roadmaps/git-github/content/collaborators@r-u1vTpUyuvsB0revOU0C.md

@@ -2,11 +2,10 @@
 
 Collaborators in GitHub are users who have been granted direct access to a repository by the repository owner or organization administrators. Collaborators can perform actions like pushing commits, creating branches, and managing issues or pull requests, depending on the permissions granted to them. They are typically added to private repositories or to public repositories where more control over contributions is needed.
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@official@How to add collaborators to your personal projects](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-personal-account-on-github/managing-access-to-your-personal-repositories/inviting-collaborators-to-a-personal-repository)
 - [@official@Adding outside collaborators to repositories in your organization](https://docs.github.com/en/organizations/managing-user-access-to-your-organizations-repositories/managing-outside-collaborators/adding-outside-collaborators-to-repositories-in-your-organization)
 - [@article@What are github collaborators](https://www.geeksforgeeks.org/what-are-github-collaborators/)
 - [@article@How to Add Collaborators to Your GitHub Repository](https://www.blinkops.com/blog/how-to-add-collaborators-to-your-github-repository)
-- [@video@Using Github for Team collaboration](https://youtu.be/4nyIS58ORWw?si=yK5LCONNVm9OIUK5)
-
+- [@video@Using Github for Team collaboration](https://youtu.be/4nyIS58ORWw?si=yK5LCONNVm9OIUK5)

src/data/roadmaps/git-github/content/commit-messages@7lRUYWNSpHvJ-QyIE8RMa.md

@@ -2,7 +2,7 @@
 
 A Git commit message is a brief explanation of the changes introduced in a particular commit. It helps others (and your future self) understand the purpose of the changes and the context behind them. Writing clear and informative commit messages is an important practice for maintaining a well-organized and easily navigable project history.
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@article@How to Write Better Git Commit Messages](https://www.freecodecamp.org/news/how-to-write-better-git-commit-messages/)
 - [@article@Writing good commit messages](https://www.theodinproject.com/lessons/foundations-commit-messages)

src/data/roadmaps/git-github/content/commit-msg@jzYjHx-gIKSP8dQUTqWVw.md

@@ -1 +1,8 @@
-# commit-msg
+# commit-msg
+
+The commit-msg hook is a client-side hook that runs after you've committed changes to your repository. It's typically used to validate or modify the commit message before it's recorded in the Git history.
+
+Visit the following resources to learn more:
+
+- [@article@A Git-Hook for Commit Messages Validation - No Husky, Just JS](https://dev.to/mbarzeev/a-git-hook-for-commit-messages-validation-no-husky-just-js-1hni)
+- [@video@Git Hooks Made Easy: Create a Custom 'commit-msg' Hook Script](https://www.youtube.com/watch?v=yH1lBm5t97s)

src/data/roadmaps/git-github/content/committing-changes@2_z3R7seCvQVj-Na4H1SV.md

@@ -1 +1,8 @@
-# Committing Changes
+# Committing Changes
+
+Committing changes in Git is a crucial part of version control, allowing you to save your progress and record a snapshot of your project's current state.
+
+Visit the following resources to learn more:
+
+- [@official@How git commit works](https://github.com/git-guides/git-commit)
+- [@article@Git commit](https://www.atlassian.com/git/tutorials/saving-changes/git-commit)

src/data/roadmaps/git-github/content/contribution-guidelines@pJ-najh7dXhhYA_0bDiR5.md

@@ -1 +1,10 @@
-# Contribution Guidelines
+# Contribution Guidelines
+
+Contribution guidelines are essential for collaborative projects on GitHub as they help streamline collaboration, set expectations for contributions, and maintain the project's quality and consistency. 
+
+Visit the following resources to learn more:
+
+- [@official@Setting guidelines for respository contributors](https://docs.github.com/articles/setting-guidelines-for-repository-contributors)
+- [@official@Contributing Guidelines](https://github.blog/news-insights/contributing-guidelines/)
+- [@official@Contributing Guides: A Template](https://github.com/nayafia/contributing-template)
+- [@article@How to Build a CONTRIBUTING.md](https://mozillascience.github.io/working-open-workshop/contributing/)

src/data/roadmaps/git-github/content/creating-account@i7fIIHcBEk473te8bniJ5.md

@@ -1 +1,7 @@
-# Creating Account
+# Creating Account
+
+To get started with GitHub, you'll need to create a free personal account on GitHub.com and verify your email address. Every person who uses GitHub.com signs in to a personal account. Your personal account is your identity on GitHub.com and has a username and profile.
+
+Visit the following resources to learn more:
+
+- [@official@Creating an account on GitHub](https://docs.github.com/en/get-started/start-your-journey/creating-an-account-on-github)

src/data/roadmaps/git-github/content/creating-branch@OegitQ5Ngjvd3ZfMpfrkM.md

@@ -1 +1,8 @@
-# Creating Branch
+# Creating Branch
+
+Creating a branch in Git is a fundamental part of working with version control, allowing you to work on different features or fixes without affecting the main codebase. You can create branches either through the terminal or github interface
+
+Visit the following resources to learn more:
+
+- [@official@Git branch documentation](https://git-scm.com/docs/git-branch)
+- [@article@Git branch](https://www.atlassian.com/git/tutorials/using-branches)

src/data/roadmaps/git-github/content/creating-repositories@c_FO6xMixrrMo6iisfsvl.md

@@ -1 +1,7 @@
-# Creating Repositories
+# Creating Repositories
+
+Creating a Git repository means setting up a system to track changes in your project's files over time. This is crucial for version control, allowing you to manage, review, and collaborate on code efficiently. 
+
+Visit the following resources to learn more:
+
+- [@official@Quickstart for repositories - GitHub Docs](https://docs.github.com/en/repositories/creating-and-managing-repositories/quickstart-for-repositories)

src/data/roadmaps/git-github/content/deleting-branch@1uDenoQ6zu7CT69FR2iQB.md

@@ -1 +1,8 @@
-# Deleting Branch
+# Deleting Branch
+
+Deleting a Git branch means removing a line of development from your Git repository. A branch in Git is essentially a pointer to a specific commit, representing an independent line of development. When you delete a branch, you’re removing this pointer, making that line of development no longer accessible through the branch name.
+
+Visit the following resources to learn more:
+
+- [@official@Creating and deleting branches within your repository](https://docs.github.com/articles/creating-and-deleting-branches-within-your-repository)
+- [@article@How to Delete a Git Branch Both Locally and Remotely](https://www.freecodecamp.org/news/how-to-delete-a-git-branch-both-locally-and-remotely/)

src/data/roadmaps/git-github/content/detached-head@0cLf7FiI9CX--UX45sm2f.md

@@ -1 +1,8 @@
-# Detached HEAD
+# Detached HEAD
+
+In Git, a detached head occurs when you check out a commit directly using its hash instead of a branch name. This leaves your repository's HEAD pointer pointing directly at that commit, rather than being linked to a specific branch. To view the history and changes made in a detached head, use `git log` or `git show`. If you want to see the differences between the current detached head and another branch, use `git diff <branch>`. A detached head can be a useful temporary state for exploring specific commits or features, but it's essential to merge those changes back into a branch before sharing them with others.
+
+Visit the following resources to learn more:
+
+- [@article@How to resolve detached HEAD state in Git](https://graphite.dev/guides/how-to-resolve-detached-head-state-in-git)
+- [@video@Head & Detached Head](https://www.youtube.com/watch?v=HvDjbAa9ZsY)

src/data/roadmaps/git-github/content/documentation@D2WIExwfSnkAPIa5O-Hp5.md

@@ -1 +1,16 @@
-# Documentation
+# Documentation
+
+A well-maintained repository should include documentation that helps others understand the project, its context, and how to contribute to it. This is essential for fostering a community around your project and making it easier for newcomers to join in.
+
+Here are some key sections of documentation that you should consider including in each repository:
+
+- README.md: A brief introduction to the project, explaining what it's about, why it exists, and how to get started.
+- CONTRIBUTING.md: Guidelines on how others can contribute to the project, including steps for reporting issues, submitting pull requests, or suggesting new features.
+- LICENSE: Information about the license under which the repository is released, ensuring users understand their rights and responsibilities when using your code.
+- CHANGELOG: A history of changes made to the project over time, highlighting significant updates, bug fixes, or feature additions.
+
+These documents help ensure a smooth onboarding process for contributors, making it easier for them to collaborate effectively and enhance the overall project.
+
+Visit the following resources to learn more:
+
+- [@article@How to Manage Documentation in a GitHub Repository: A Guide for Junior Developers](https://dev.to/mochafreddo/how-to-manage-documentation-in-a-github-repository-a-guide-for-junior-developers-pgo)

src/data/roadmaps/git-github/content/fast-forward-vs-non-ff@agtPWS8j6i6wQPk10cy8E.md

@@ -1 +1,16 @@
-# Fast-Forward vs Non-FF
+# Fast-Forward vs Non-FF
+
+In Git, when you merge branches, there are two primary types of merges: Fast-Forward and Non-Fast-Forward (No-FF). These terms describe how Git handles the history and pointers when merging branches. Understanding the difference between these two types of merges is crucial for managing your project's commit history effectively.
+
+A Fast-Forward merge occurs when the branch you are merging into (often main or master) has not diverged from the branch you are merging (often a feature branch). In other words, the commit history of the target branch is a strict subset of the branch being merged. In a Fast-Forward merge, Git simply moves the pointer of the target branch forward to the latest commit on the branch being merged.
+No new merge commit is created; the history is linear.
+
+A Non-Fast-Forward (No-FF) merge happens when the target branch has diverged from the branch being merged or when you explicitly choose to create a merge commit. In this case, Git creates a new commit that represents the merging of the two branches. Git creates a new merge commit that has two parent commits: one from the target branch and one from the branch being merged. The merge commit is a snapshot of the merged work, preserving the history of both branches.
+
+Visit the following resources to learn more:
+
+- [@article@Git Fast-Forward VS Non-Fast-Forward](https://leimao.github.io/blog/Git-Fast-Forward-VS-Non-Fast-Forward/)
+- [@article@Git Merge: To Squash Or Fast-Forward?](https://dev.to/trpricesoftware/git-merge-to-squash-or-fast-forward-3791)
+- [@article@Difference between a git fast forward and no fast forward](https://gist.github.com/moraisaugusto/1fa02c49b6d9833fcdf665505595ac2e)
+- [@video@GIT Fast Forward Visualized](https://youtu.be/DN1fNYoJgDw?si=_TZKACj4SCOuESGm)
+- [@video@git merge no fast forward](https://youtu.be/X_8atqzsO8U?si=e9hMQg_aWLRMWf4O)

src/data/roadmaps/git-github/content/fetch-without-merge@Gybnekbd1rJKTOf4hJ4Sh.md

@@ -1 +1,9 @@
-# Fetch without Merge
+# Fetch without Merge
+
+Running `git fetch` retrieves changes from a remote repository into your local clone, but does not automatically merge any of these changes into your local working directory. This is different from `git pull`, which both fetches and merges remote changes. By using fetch without merge, you can ensure that your local clone is up-to-date with the latest information from the remote repository, while leaving your working directory unchanged. You can then choose to apply these changes by using merge or rebase. This approach helps maintain a clean and consistent local state, making it easier to manage and commit changes.
+
+Visit the following resources to learn more:
+
+- [@official@Git Fetch](https://git-scm.com/docs/git-fetch)
+- [@article@Git fetch](https://www.atlassian.com/git/tutorials/syncing/git-fetch)
+- [@video@Git Fetch | What is Git Fetch and How to Use it | Learn Git](https://www.youtube.com/watch?v=uEEcw1s_wWk)

src/data/roadmaps/git-github/content/forking-vs-cloning@l1Wf7Pe_ah8ycCgslfSK4.md

@@ -1 +1,12 @@
-# Forking vs Cloning
+# Forking vs Cloning
+
+Forking and cloning are two fundamental concepts in Git, particularly when working with repositories hosted on platforms like GitHub, GitLab, or Bitbucket. While both actions involve copying a repository, they serve different purposes and have distinct workflows.
+Cloning a repository means creating a local copy of a repository that exists on a remote server (e.g., GitHub) on your local machine. This allows you to work on the project locally, make changes, and then push those changes back to the remote repository if you have the necessary permissions.
+Forking a repository is specific to platforms like GitHub, GitLab, and Bitbucket. When you fork a repository, you create a copy of someone else’s repository in your own account. This forked repository is independent of the original and can be modified without affecting the original project.
+
+Visit the following resources to learn more:
+
+- [@official@The difference between forking and cloning a repository](https://github.com/orgs/community/discussions/35849)
+- [@article@Git fork vs. clone: What's the difference?](https://www.theserverside.com/answer/Git-fork-vs-clone-Whats-the-difference)
+- [@video@Git Fork vs. Git Clone: What's the Difference?](https://youtu.be/6YQxkxw8nhE?si=mJNvcaB4lQccsU57)
+- [@video@GitHub Forking vs Cloning: Key Differences Explained](https://youtu.be/yQSjqYs2UBE?si=3BKYtWmkLIMWvA6G)

src/data/roadmaps/git-github/content/git-attributes@CGj_UX5JMOOCKinedsNRc.md

@@ -1 +1,9 @@
-# Git Attributes
+# Git Attributes
+
+Git attributes are settings stored in the .gitattributes file, controlling how Git handles files in your repository. They can influence filtering (e.g., ignoring specific files), conversion (formatting or transforming files during Git operations), and formatting (applying consistent styles). These settings can be applied to specific file types (like *.txt) or filter files based on content patterns. Attributes also define smudge patterns (highlighting differences) and ignore patterns, helping maintain a clean repository by automatically applying intended settings for certain file types.
+
+Visit the following resources to learn more:
+
+- [@official@Customizing Git - Git Attributes](https://git-scm.com/book/en/v2/Customizing-Git-Git-Attributes)
+- [@opensource@gitattributes/gitattributes](https://github.com/gitattributes/gitattributes)
+- [@article@The benefits of git attributes and how to set them up](https://medium.com/@cloudwala/the-benefits-of-git-attributes-and-how-to-set-them-up-87f90251b8e0)

src/data/roadmaps/git-github/content/git-bisect@ExXuwTQSI_lg4SRGW3Iu1.md

@@ -1 +1,9 @@
-# Git Bisect
+# Git Bisect
+
+Git Bisect is an interactive tool used to identify which commit in your project's history introduced a bug or regression. You start by identifying two commits: one where the issue isn't present (the "good" commit) and another where it is (the "bad" commit). Then, run `git bisect start`, followed by `git bisect good` for the good commit and `git bisect bad` for the bad commit. Git Bisect will guide you through a binary search process, asking you to test the midpoint of your current range until it identifies the exact commit that introduced the bug or regression.
+
+Visit the following resources to learn more:
+
+- [@official@Git Bisect](https://git-scm.com/docs/git-bisect)
+- [@article@Using `git bisect` to find the faulty commit](https://dev.to/alvesjessica/using-git-bisect-to-find-the-faulty-commit-25gf)
+- [@video@Git Bisect | How to use Git Bisect | Learn Git](https://www.youtube.com/watch?v=z-AkSXDqodc)

src/data/roadmaps/git-github/content/git-commit---amend@NjPnEXLf1Lt9qzgxccogv.md

@@ -1 +1,9 @@
-# git commit --amend
+# git commit --amend
+
+`git commit --amend` is a command used to modify the most recent commit in your repository's history by updating its message, adding or removing files, or changing the commit's metadata. This allows you to correct mistakes or improve the commit's description after it has been made. When using --amend, Git will replace the existing commit with a new one that includes any changes made since the last commit, effectively "amending" the previous commit.
+
+Visit the following resources to learn more:
+
+- [@article@Changing a commit message](https://docs.github.com/en/enterprise-cloud@latest/pull-requests/committing-changes-to-your-project/creating-and-editing-commits/changing-a-commit-message)
+- [@article@Rewriting history](https://www.atlassian.com/git/tutorials/rewriting-history)
+- [@video@Git Amend Tutorial: Rewrite Git History](https://www.youtube.com/watch?v=q53umU5vMkk)

src/data/roadmaps/git-github/content/git-config@NMCWgzhhfUvFOMO5GbF_u.md

@@ -4,7 +4,7 @@ The `git config` command is a convenience function that is used to set Git confi
 
 The most basic use case for `git config` is to invoke it with a configuration name, which will display the set value at that name. Configuration names are dot delimited strings composed of a 'section' and a 'key' based on their hierarchy. For example: `user.email`
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@official@Git - git-config Documentation](https://git-scm.com/docs/git-config)
 - [@article@git config | Atlassian Git Tutorial](https://www.atlassian.com/git/tutorials/setting-up-a-repository/git-config)

src/data/roadmaps/git-github/content/git-hooks@pqBV7BMAs0z6qpfZeW2XP.md

@@ -1 +1,14 @@
-# Git hooks
+# Git hooks
+
+Git hooks are scripts that run automatically at specific points during the Git workflow, such as when you commit, push, or pull changes from a repository. These scripts can be used to perform various tasks, like validating code, formatting files, or even sending notifications.
+
+There are two types of Git hooks:
+
+- Client-side hooks: Run on your local machine before committing changes.
+- Server-side hooks: Run on the remote server when you push changes.
+
+Visit the following resources to learn more:
+
+- [@official@Customizing Git - Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)
+- [@article@Git hooks](https://www.atlassian.com/git/tutorials/git-hooks)
+- [@video@What are GitHooks? Explained in 5 minutes](https://www.youtube.com/watch?v=1OFiiPretCM)

src/data/roadmaps/git-github/content/git-init@1iOkbO5juk2LO-WZHx_W6.md

@@ -2,7 +2,7 @@
 
 The `git init` command creates a new Git repository. It can be used to convert an existing, unversioned project to a Git repository or initialize a new, empty repository. Most other Git commands are not available outside of an initialized repository, so this is usually the first command you'll run in a new project.
 
-Learn more from the following resources:
+Visit the following resources to learn more:
 
 - [@official@Git - git-init Documentation](https://git-scm.com/docs/git-init)
-- [@article@git init | Atlassian Git Tutorial](https://www.atlassian.com/git/tutorials/setting-up-a-repository/git-init#:~:text=The%20git%20init%20command%20creates,run%20in%20a%20new%20project.)
+- [@article@git init | Atlassian Git Tutorial](https://www.atlassian.com/git/tutorials/setting-up-a-repository/git-init#:~:text=The%20git%20init%20command%20creates,run%20in%20a%20new%20project.)