Move images to img

* wip

* wip

* wip

* wip

* feat: add show upgrade modal

* chore: show upgrade on generate

* chore: upgrade modal

* Update limits messgaes

---------

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

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1750679157111
+		"lastUpdateCheck": 1753099755914
 	}
 }

migrate_content.py

@@ -1,89 +0,0 @@
-#!/usr/bin/env python3
-
-import json
-import os
-import sys
-
-def migrate_content():
-    """
-    Migrate content from content folder to content-migrated folder using mapping file
-    """
-    
-    # Read mapping file
-    mapping_file = 'migration-mapping.json'
-    content_dir = 'content'
-    migrated_dir = 'content-migrated'
-    
-    try:
-        with open(mapping_file, 'r') as f:
-            mapping = json.load(f)
-    except FileNotFoundError:
-        print(f"Error: {mapping_file} not found")
-        return False
-    except json.JSONDecodeError:
-        print(f"Error: Invalid JSON in {mapping_file}")
-        return False
-    
-    migrated_count = 0
-    skipped_count = 0
-    error_count = 0
-    
-    print(f"Starting migration of {len(mapping)} files...")
-    
-    for source_path, target_id in mapping.items():
-        # Determine source file path
-        if ':' in source_path:
-            # Nested path like "clean-code-principles:be-consistent"
-            parts = source_path.split(':')
-            source_file = os.path.join(content_dir, *parts[:-1], f"{parts[-1]}.md")
-        else:
-            # Top level path like "clean-code-principles"
-            source_file = os.path.join(content_dir, source_path, 'index.md')
-        
-        # Determine target file path
-        target_filename = f"{source_path.split(':')[-1]}@{target_id}.md"
-        target_file = os.path.join(migrated_dir, target_filename)
-        
-        # Check if target file is empty (needs migration)
-        if os.path.exists(target_file) and os.path.getsize(target_file) > 0:
-            print(f"⏭️  Skipped: {target_filename} (already migrated)")
-            skipped_count += 1
-            continue
-        
-        # Check if source file exists
-        if not os.path.exists(source_file):
-            print(f"❌ Error: Source file not found: {source_file}")
-            error_count += 1
-            continue
-        
-        try:
-            # Read source content
-            with open(source_file, 'r', encoding='utf-8') as f:
-                content = f.read()
-            
-            if not content.strip():
-                print(f"⚠️  Warning: Source file is empty: {source_file}")
-                continue
-            
-            # Write to target file
-            with open(target_file, 'w', encoding='utf-8') as f:
-                f.write(content)
-            
-            print(f"✅ Migrated: {source_path} -> {target_filename}")
-            migrated_count += 1
-            
-        except Exception as e:
-            print(f"❌ Error migrating {source_path}: {str(e)}")
-            error_count += 1
-    
-    print(f"\n📊 Migration Summary:")
-    print(f"   ✅ Migrated: {migrated_count}")
-    print(f"   ⏭️  Skipped: {skipped_count}")
-    print(f"   ❌ Errors: {error_count}")
-    print(f"   📁 Total: {len(mapping)}")
-    
-    return error_count == 0
-
-if __name__ == "__main__":
-    success = migrate_content()
-    sys.exit(0 if success else 1) 

public/roadmap-content/ai-agents.json

@@ -1134,6 +1134,11 @@
     "title": "Model Context Protocol (MCP)",
     "description": "Model Context Protocol (MCP) is a rulebook that tells an AI agent how to pack background information before it sends a prompt to a language model. It lists what pieces go into the prompt—things like the system role, the user’s request, past memory, tool calls, or code snippets—and fixes their order. Clear tags mark each piece, so both humans and machines can see where one part ends and the next begins. Keeping the format steady cuts confusion, lets different tools work together, and makes it easier to test or swap models later. When agents follow MCP, the model gets a clean, complete prompt and can give better answers.\n\nVisit the following resources to learn more:",
     "links": [
+      {
+        "title": "MCP: Build Rich-Context AI Apps with Anthropic",
+        "url": "https://www.deeplearning.ai/short-courses/mcp-build-rich-context-ai-apps-with-anthropic/",
+        "type": "course"
+      },
       {
         "title": "Model Context Protocol",
         "url": "https://github.com/modelcontextprotocol/modelcontextprotocol",

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

@@ -312,8 +312,8 @@
         "type": "article"
       },
       {
-        "title": "Exploratory Data Analysis with Seaborn",
-        "url": "https://imp.i384100.net/ZQmMgR",
+        "title": "Python for Data Visualization: Matplotlib & Seaborn",
+        "url": "https://imp.i384100.net/55xvzn",
         "type": "article"
       }
     ]

public/roadmap-content/android.json

@@ -29,11 +29,6 @@
         "url": "https://kotlinlang.org/docs/home.html",
         "type": "article"
       },
-      {
-        "title": "Learn Kotlin - w3schools",
-        "url": "https://www.w3schools.com/kotlin/",
-        "type": "article"
-      },
       {
         "title": "Learn Kotlin Programming for Beginners - Free Code Camp",
         "url": "https://youtu.be/EExSSotojVI?si=4VPW8ZHa2UMX0HH1",
@@ -107,11 +102,6 @@
         "title": "Kotlin Docs",
         "url": "https://kotlinlang.org/docs/getting-started.html",
         "type": "article"
-      },
-      {
-        "title": "Kotlin Tutorial for Beginners",
-        "url": "https://www.w3schools.com/kotlin/index.php",
-        "type": "article"
       }
     ]
   },
@@ -156,11 +146,6 @@
         "url": "https://docs.gradle.org/current/userguide/getting_started_eng.html",
         "type": "article"
       },
-      {
-        "title": "Get going with Gradle - PDF",
-        "url": "https://assets.gradlehero.com/get-going-with-gradle/get-going-with-gradle-book.pdf",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Gradle",
         "url": "https://app.daily.dev/tags/gradle?ref=roadmapsh",

public/roadmap-content/api-design.json

@@ -86,11 +86,6 @@
         "url": "https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods",
         "type": "article"
       },
-      {
-        "title": "HTTP Request Methods - W3Schools",
-        "url": "https://www.w3schools.com/tags/ref_httpmethods.asp",
-        "type": "article"
-      },
       {
         "title": "What are HTTP Methods? - Postman",
         "url": "https://blog.postman.com/what-are-http-methods/",

public/roadmap-content/aspnet-core.json

@@ -31,17 +31,7 @@
     "links": [
       {
         "title": "C# official website?",
-        "url": "https://learn.microsoft.com/en-us/dotnet/csharp//",
-        "type": "article"
-      },
-      {
-        "title": "The Beginners Guide to C#",
-        "url": "https://www.w3schools.com/CS/index.php",
-        "type": "article"
-      },
-      {
-        "title": "C# Tutorial",
-        "url": "https://www.w3schools.com/cs/index.php",
+        "url": "https://learn.microsoft.com/en-us/dotnet/csharp/",
         "type": "article"
       },
       {
@@ -117,11 +107,6 @@
         "url": "https://dotnettutorials.net/course/csharp-dot-net-tutorials/",
         "type": "article"
       },
-      {
-        "title": "C# tutorials - W3Schools",
-        "url": "https://www.w3schools.com/cs/index.php",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about C#",
         "url": "https://app.daily.dev/tags/csharp?ref=roadmapsh",
@@ -298,11 +283,6 @@
     "title": "SQL Basics",
     "description": "SQL stands for Structured Query Language. SQL lets you access and manipulate databases SQL became a standard of the American National Standards Institute (ANSI) in 1986, and of the International Organization for Standardization (ISO) in 1987.\n\nAlthough SQL is an ANSI/ISO standard, there are different versions of the SQL language.\n\nHowever, to be compliant with the ANSI standard, they all support at least the major commands (such as SELECT, UPDATE, DELETE, INSERT, WHERE) in a similar manner.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "Introduction to SQL",
-        "url": "https://www.w3schools.com/sql/sql_intro.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about SQL",
         "url": "https://app.daily.dev/tags/sql?ref=roadmapsh",
@@ -340,11 +320,6 @@
     "title": "Stored Procedures",
     "description": "A stored procedure is a pre-compiled collection of SQL statements that can be executed on a database server. Stored procedures are typically used to perform specific tasks, such as retrieving data from a database, inserting or updating data, or performing complex calculations. They are stored on the database server and can be called or executed from a client application or other stored procedures. Stored procedures can improve database performance by reducing the amount of SQL code needed to be executed and allowing developers to reuse common pieces of code. They can also provide security by allowing database administrators to control which users have access to specific stored procedures.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "Stored Procedure Tutorial",
-        "url": "https://www.w3schools.com/sql/sql_stored_procedures.asp",
-        "type": "article"
-      },
       {
         "title": "Stored Procedure in SQL: Benefits And How to Create It",
         "url": "https://www.simplilearn.com/tutorials/sql-tutorial/stored-procedure-in-sql",
@@ -361,11 +336,6 @@
     "title": "Constraints",
     "description": "Database constraints are rules that are used to limit the data that can be stored in a database table. These constraints can be used to ensure the integrity and accuracy of the data in the table, and they can be used to enforce business rules or other requirements. For example, a constraint might be used to ensure that a column only contains positive numbers, or to ensure that a column always has a unique value. Constraints can be specified at the time a table is created, or they can be added to an existing table. Some common types of constraints include primary keys, foreign keys, and NOT NULL constraints.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "SQL Constraints",
-        "url": "https://www.w3schools.com/sql/sql_constraints.asp",
-        "type": "article"
-      },
       {
         "title": "Constraints of SQL",
         "url": "https://www.educative.io/courses/database-design-fundamentals/m7JnY9Xm6Qp",
@@ -1131,11 +1101,6 @@
         "url": "https://learn.microsoft.com/en-us/aspnet/web-pages/overview/data/5-working-with-data",
         "type": "article"
       },
-      {
-        "title": "ASP.NET Web Pages - Databases",
-        "url": "https://www.w3schools.com/asp/webpages_database.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Backend Development",
         "url": "https://app.daily.dev/tags/backend?ref=roadmapsh",
@@ -1330,11 +1295,6 @@
         "url": "https://docs.microsoft.com/en-us/sql/sql-server/tutorials-for-sql-server-2016?view=sql-server-ver15",
         "type": "article"
       },
-      {
-        "title": "Getting started with SQL",
-        "url": "https://www.w3schools.com/sql/default.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about SQL",
         "url": "https://app.daily.dev/tags/sql?ref=roadmapsh",
@@ -2716,11 +2676,6 @@
     "title": "Razor",
     "description": "Razor is a markup syntax for embedding server-side code in web pages. It was introduced with [ASP.NET](http://ASP.NET) MVC 3 and later became a part of [ASP.NET](http://ASP.NET) Web Pages. It allows developers to write server-side code using C# or Visual Basic and embed it in HTML markup. Its syntax is designed to be compact and easy to read. It provides a rich set of features for building web applications, such as a component model for building reusable UI, a routing system for navigation, and support for dependency injection, it also allows you to use the same libraries, frameworks, and tools that you're already familiar with from building traditional [ASP.NET](http://ASP.NET) web applications.\n\nTo learn more, visit the following links:",
     "links": [
-      {
-        "title": "Complete Guide to ASP.NET Razor",
-        "url": "https://w3schools.com/asp/razor_intro.asp",
-        "type": "article"
-      },
       {
         "title": "Introduction to ASP.NET Web Programming Using Razor",
         "url": "https://learn.microsoft.com/en-us/aspnet/web-pages/overview/getting-started/introducing-razor-syntax-c",

public/roadmap-content/backend.json

@@ -133,11 +133,6 @@
         "url": "https://php.net/",
         "type": "article"
       },
-      {
-        "title": "Learn PHP - W3Schools",
-        "url": "https://www.w3schools.com/php/",
-        "type": "article"
-      },
       {
         "title": "PHP - The Right Way",
         "url": "https://phptherightway.com/",
@@ -236,11 +231,6 @@
         "url": "https://www.java.com/",
         "type": "article"
       },
-      {
-        "title": "W3 Schools Tutorials",
-        "url": "https://www.w3schools.com/java/",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Java",
         "url": "https://app.daily.dev/tags/java?ref=roadmapsh",
@@ -303,11 +293,6 @@
         "url": "https://learn.microsoft.com/en-us/dotnet/csharp/tour-of-csharp/",
         "type": "article"
       },
-      {
-        "title": "C# on W3 schools",
-        "url": "https://www.w3schools.com/cs/index.php",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about C#",
         "url": "https://app.daily.dev/tags/csharp?ref=roadmapsh",
@@ -613,11 +598,6 @@
         "url": "https://www.mysql.com/",
         "type": "article"
       },
-      {
-        "title": "W3Schools - MySQL Tutorial",
-        "url": "https://www.w3schools.com/mySQl/default.asp",
-        "type": "article"
-      },
       {
         "title": "MySQL for Developers",
         "url": "https://planetscale.com/courses/mysql-for-developers/introduction/course-introduction",
@@ -1089,11 +1069,6 @@
     "title": "SOAP",
     "description": "Simple Object Access Protocol (SOAP) is a message protocol for exchanging information between systems and applications. When it comes to application programming interfaces (APIs), a SOAP API is developed in a more structured and formalized way. SOAP messages can be carried over a variety of lower-level protocols, including the web-related Hypertext Transfer Protocol (HTTP).\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "w3school SOAP explanation",
-        "url": "https://www.w3schools.com/xml/xml_soap.asp",
-        "type": "article"
-      },
       {
         "title": "REST vs SOAP",
         "url": "https://www.youtube.com/watch?v=_fq8Ye8kodA",
@@ -2184,11 +2159,6 @@
         "url": "https://docs.aws.amazon.com/wellarchitected/2022-03-31/framework/rel_mitigate_interaction_failure_throttle_requests.html",
         "type": "article"
       },
-      {
-        "title": "Throttling and Debouncing",
-        "url": "https://dev.to/aneeqakhan/throttling-and-debouncing-explained-1ocb",
-        "type": "article"
-      },
       {
         "title": "Throttling vs Debouncing",
         "url": "https://www.youtube.com/watch?v=tJhA0DrH5co",

public/roadmap-content/blockchain.json

@@ -2249,11 +2249,6 @@
         "url": "https://www.docs.python.org/3",
         "type": "article"
       },
-      {
-        "title": "W3Schools - Python Tutorial",
-        "url": "https://www.w3schools.com/python/",
-        "type": "article"
-      },
       {
         "title": "Python Crash Course",
         "url": "https://ehmatthes.github.io/pcc/",
@@ -2290,11 +2285,6 @@
         "url": "https://gobyexample.com/",
         "type": "article"
       },
-      {
-        "title": "W3Schools Go Tutorial",
-        "url": "https://www.w3schools.com/go/",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Golang",
         "url": "https://app.daily.dev/tags/golang?ref=roadmapsh",

public/roadmap-content/computer-science.json

@@ -8,21 +8,11 @@
         "url": "https://roadmap.sh/cpp",
         "type": "article"
       },
-      {
-        "title": "Learn C++ - W3Schools",
-        "url": "https://www.w3schools.com/cpp/",
-        "type": "article"
-      },
       {
         "title": "Learn C++ - Tutorials Point",
         "url": "https://www.tutorialspoint.com/cplusplus/index.htm",
         "type": "article"
       },
-      {
-        "title": "Learn C - W3Schools",
-        "url": "https://www.w3schools.com/c/",
-        "type": "article"
-      },
       {
         "title": "Learn C - Tutorials Point",
         "url": "https://www.tutorialspoint.com/cprogramming/index.htm",
@@ -79,11 +69,6 @@
         "url": "https://pythonprinciples.com/",
         "type": "article"
       },
-      {
-        "title": "W3Schools - Python Tutorial ",
-        "url": "https://www.w3schools.com/python/",
-        "type": "article"
-      },
       {
         "title": "Python Crash Course",
         "url": "https://ehmatthes.github.io/pcc/",
@@ -130,11 +115,6 @@
         "url": "https://gobyexample.com/",
         "type": "article"
       },
-      {
-        "title": "W3Schools Go Tutorial",
-        "url": "https://www.w3schools.com/go/",
-        "type": "article"
-      },
       {
         "title": "Making a RESTful JSON API in Go",
         "url": "https://thenewstack.io/make-a-restful-json-api-go/",
@@ -161,11 +141,6 @@
         "url": "https://docs.microsoft.com/en-us/learn/paths/csharp-first-steps/?WT.mc_id=dotnet-35129-website",
         "type": "article"
       },
-      {
-        "title": "C# on W3 schools",
-        "url": "https://www.w3schools.com/cs/index.php",
-        "type": "article"
-      },
       {
         "title": "Introduction to C#",
         "url": "https://docs.microsoft.com/en-us/shows/CSharp-101/?WT.mc_id=Educationalcsharp-c9-scottha",
@@ -248,11 +223,6 @@
         "url": "https://www.tutorialspoint.com/cplusplus/index.htm",
         "type": "article"
       },
-      {
-        "title": "W3Schools C++",
-        "url": "https://www.w3schools.com/cpp/default.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about C++ Programming",
         "url": "https://app.daily.dev/tags/c++?ref=roadmapsh",
@@ -264,11 +234,6 @@
     "title": "C",
     "description": "C is a general-purpose computer programming language. It was created in the 1970s by Dennis Ritchie, and remains very widely used and influential. By design, C's features cleanly reflect the capabilities of the targeted CPUs.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "Learn C - W3Schools",
-        "url": "https://www.w3schools.com/c/",
-        "type": "article"
-      },
       {
         "title": "Learn C - Tutorials Point",
         "url": "https://www.tutorialspoint.com/cprogramming/index.htm",
@@ -310,11 +275,6 @@
         "url": "https://www.java.com/",
         "type": "article"
       },
-      {
-        "title": "W3 Schools Tutorials",
-        "url": "https://www.w3schools.com/java/",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Java",
         "url": "https://app.daily.dev/tags/java?ref=roadmapsh",

public/roadmap-content/cpp.json

@@ -29,11 +29,6 @@
     "title": "What is C++?",
     "description": "C++ is a general-purpose programming language created by Bjarne Stroustrup as an extension of the C programming language. It was first introduced in 1985 and provides object-oriented features like classes and inheritance. C++ is widely used in various applications like game development, system programming, embedded systems, and high-performance computing.\n\nC++ is a statically-typed language, meaning that the type of a variable is determined during compilation, and has an extensive library called the C++ Standard Library, which provides a rich set of functions, algorithms, and data structures for various tasks.\n\nC++ builds upon the features of C, and thus, most C programs can be compiled and run with a C++ compiler.\n\nCode Example\n------------\n\nHere's a simple example of a C++ program that demonstrates some essential features of the language:\n\n    #include <iostream>\n    \n    // A simple function to add two numbers\n    int add(int a, int b) {\n        return a + b;\n    }\n    \n    class Calculator {\n    public:\n        // A member function to multiply two numbers\n        int multiply(int a, int b) {\n            return a * b;\n        }\n    };\n    \n    int main() {\n        int x = 5;\n        int y = 3;\n    \n        // Using the standalone function 'add'\n        int sum = add(x, y);\n        std::cout << \"Sum: \" << sum << '\\n';\n    \n        // Using a class and member function\n        Calculator calc;\n        int product = calc.multiply(x, y);\n        std::cout << \"Product: \" << product << '\\n';\n    \n        return 0;\n    }\n    \n\nIn the above program, we define a simple function `add` and a class `Calculator` with a member function `multiply`. The `main` function demonstrates how to use these to perform basic arithmetic.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "w3schools C++ tutorial",
-        "url": "https://www.w3schools.com/cpp/",
-        "type": "article"
-      },
       {
         "title": "Learn C++",
         "url": "https://www.learncpp.com/",
@@ -73,7 +68,7 @@
   },
   "ew0AfyadpXPRO0ZY3Z19k": {
     "title": "Code Editors / IDEs",
-    "description": "Code editors and IDEs are programs specifically designed for editing, managing and writing source code. They offer a wide range of features that make the development process easier and faster. Here's a brief introduction to some of the most popular code editors and IDEs for C++:\n\n*   **Visual Studio**: Visual Studio is an Integrated Development Environment (IDE) for Windows, developed by Microsoft. It includes its own integrated compiler known as Microsoft Visual C++ (MSVC).\n    \n*   **Visual Studio Code (VSCode)**: Visual Studio Code is a popular, free, open-source, and lightweight code editor developed by Microsoft. It offers an extensive library of extensions that enhance functionality for C++ development.\n    \n*   **Sublime Text**: Sublime Text is a cross-platform text editor that is quite popular among developers due to its speed and minimalist design. It supports C++ with the help of plugins and has a variety of themes and packages available for customization.\n    \n*   **CLion**: CLion is an Integrated Development Environment (IDE) developed by JetBrains specifically for C and C++ developers. It provides advanced features like code completion, refactoring support, debugging, and more. It's worth noting that CLion is a commercial IDE, and there is no community version available; users are required to purchase a license for usage.\n    \n\nThese are just a few examples, and there are many other code editors available, including Atom, Notepad++, and Geany. They all have their features and may suit different developers' needs. Finding the right code editor is often a matter of personal preference and workflow.\n\nTo work with C++ in your chosen code editor, you often need to install some additional tools and add-ons, such as compilers, linters, and debugger support. Make sure to follow the instructions provided in the editor's documentation to set up C++ correctly.\n\nLearn more from the following resources:",
+    "description": "Code editors and IDEs are programs specifically designed for editing, managing and writing source code. They offer a wide range of features that make the development process easier and faster. Here's a brief introduction to some of the most popular code editors and IDEs for C++:\n\n*   **Visual Studio**: Visual Studio is an Integrated Development Environment (IDE) for Windows, developed by Microsoft. It includes its own integrated compiler known as Microsoft Visual C++ (MSVC).\n    \n*   **Visual Studio Code (VSCode)**: Visual Studio Code is a popular, free, open-source, and lightweight code editor developed by Microsoft. It offers an extensive library of extensions that enhance functionality for C++ development.\n    \n*   **Sublime Text**: Sublime Text is a cross-platform text editor that is quite popular among developers due to its speed and minimalist design. It supports C++ with the help of plugins and has a variety of themes and packages available for customization.\n    \n*   **CLion**: CLion is an Integrated Development Environment (IDE) developed by JetBrains specifically for C and C++ developers. It provides advanced features like code completion, refactoring support, debugging, and more. It's worth noting that CLion is a commercial IDE, but there is community version available.\n    \n\nThese are just a few examples, and there are many other code editors available, including Atom, Notepad++, and Geany. They all have their features and may suit different developers' needs. Finding the right code editor is often a matter of personal preference and workflow.\n\nTo work with C++ in your chosen code editor, you often need to install some additional tools and add-ons, such as compilers, linters, and debugger support. Make sure to follow the instructions provided in the editor's documentation to set up C++ correctly.\n\nLearn more from the following resources:",
     "links": [
       {
         "title": "Using C++ on Linux in VSCode",
@@ -184,11 +179,6 @@
         "title": "Function Overloading - Microsoft Learn",
         "url": "https://learn.microsoft.com/en-us/cpp/cpp/function-overloading",
         "type": "article"
-      },
-      {
-        "title": "C++ Function Overloading - W3Schools",
-        "url": "https://www.w3schools.com/cpp/cpp_function_overloading.asp",
-        "type": "article"
       }
     ]
   },
@@ -273,7 +263,7 @@
   },
   "uUzRKa9wGzdUwwmAg3FWr": {
     "title": "References",
-    "description": "A reference can be considered as a constant pointer (not to be confused with a pointer to a constant value) which always points to (references) the same object. They are declared using the `&` (ampersand) symbol.\n\nDeclaration and Initialization\n------------------------------\n\nTo declare a reference, use the `&` symbol followed by the variable type and the reference's name. Note that you must initialize a reference when you declare it.\n\n    int var = 10;        // Declare an integer variable\n    int& ref = var;      // Declare a reference that \"points to\" var\n    \n\nUsage\n-----\n\nYou can use the reference just like you'd use the original variable. When you change the value of the reference, the value of the original variable also changes, because they both share the same memory location.\n\n    var = 20;            // Sets the value of var to 20\n    std::cout << ref << '\\n'; // Outputs 20\n    \n    ref = 30;            // Sets the value of ref to 30\n    std::cout << var << '\\n'; // Outputs 30\n    \n\nFunction Parameters\n-------------------\n\nYou can use references as function parameters to create an alias for an argument. This is commonly done when you need to modify the original variable or when passing an object of considerable size to avoid the cost of copying.\n\n    void swap(int& a, int& b) {\n        int temp = a;\n        a = b;\n        b = temp;\n    }\n    \n    int main() {\n       int x = 5, y = 10;\n       std::cout << \"Before Swap: x = \" << x << \" y = \" << y << '\\n'; // Outputs 5 10\n       \n       swap(x, y);\n       std::cout << \"After Swap: x = \" << x << \" y = \" << y << '\\n';  // Outputs 10 5\n    }",
+    "description": "A reference can be considered as a constant pointer (not to be confused with a pointer to a constant value) which always points to (references) the same object. They are declared using the `&` (ampersand) symbol.\n\nDeclaration and Initialization\n------------------------------\n\nTo declare a reference, use the variable type followed by the `&` symbol and the reference's name. Note that you must initialize a reference when you declare it.\n\n    int var = 10;        // Declare an integer variable\n    int& ref = var;      // Declare a reference that \"points to\" var\n    \n\nUsage\n-----\n\nYou can use the reference just like you'd use the original variable. When you change the value of the reference, the value of the original variable also changes, because they both share the same memory location.\n\n    var = 20;            // Sets the value of var to 20\n    std::cout << ref << '\\n'; // Outputs 20\n    \n    ref = 30;            // Sets the value of ref to 30\n    std::cout << var << '\\n'; // Outputs 30\n    \n\nFunction Parameters\n-------------------\n\nYou can use references as function parameters to create an alias for an argument. This is commonly done when you need to modify the original variable or when passing an object of considerable size to avoid the cost of copying.\n\n    void swap(int& a, int& b) {\n        int temp = a;\n        a = b;\n        b = temp;\n    }\n    \n    int main() {\n       int x = 5, y = 10;\n       std::cout << \"Before Swap: x = \" << x << \" y = \" << y << '\\n'; // Outputs 5 10\n       \n       swap(x, y);\n       std::cout << \"After Swap: x = \" << x << \" y = \" << y << '\\n';  // Outputs 10 5\n    }",
     "links": []
   },
   "mSFwsTYvmg-GwG4_DEIEf": {

public/roadmap-content/cyber-security.json

@@ -54,6 +54,11 @@
         "title": "How bluetooth works",
         "url": "https://electronics.howstuffworks.com/bluetooth.htm",
         "type": "article"
+      },
+      {
+        "title": "video@How bluetooth works",
+        "url": "https://www.youtube.com/watch?v=1I1vxu5qIUM",
+        "type": "article"
       }
     ]
   },
@@ -5169,7 +5174,7 @@
   },
   "Rnpx7VkhrBkSQTni6UuTR": {
     "title": "WADCOMS",
-    "description": "WADcoms (Web Application Dangerous Commands) is a comprehensive database of dangerous web application commands and patterns that can be exploited to compromise web security. It offers a catalog of potentially harmful commands and their contexts, helping security professionals identify and mitigate risks associated with web applications by understanding how these commands can be misused for attacks like SQL injection, cross-site scripting (XSS), and remote code execution (RCE).\n\nLearn more from the following resources:",
+    "description": "WADcoms (Windows/Active Directory Commands) is an interactive cheat sheet, containing a curated list of offensive security tools and their respective commands, to be used against Windows/AD environments. Just select what information you currently have related to the Windows machine (passwords, usernames, services, etc.), and it will display a list of tools you can try against the machine, along with a template command for easy copy/pasting\n\nLearn more from the following resources:",
     "links": [
       {
         "title": "WADComs/WADComs.github.io",

public/roadmap-content/data-analyst.json

@@ -201,10 +201,16 @@
       }
     ]
   },
-  "analysis--reporting-with-excel@sgXIjVTbwdwdYoaxN3XBM.md": {
+  "sgXIjVTbwdwdYoaxN3XBM": {
     "title": "Analysis / Reporting with Excel",
-    "description": "",
-    "links": []
+    "description": "Excel is a powerful tool utilized by data analysts worldwide to store, manipulate, and analyze data. It offers a vast array of features such as pivot tables, graphs and a powerful suite of formulas and functions to help sift through large sets of data. A data analyst uses Excel to perform a wide range of tasks, from simple data entry and cleaning, to more complex statistical analysis and predictive modeling. Proficiency in Excel is often a key requirement for a data analyst, as its versatility and ubiquity make it an indispensable tool in the field of data analysis.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Microsoft Excel Course",
+        "url": "https://support.microsoft.com/en-us/office/excel-video-training-9bc05390-e94c-46af-a5b3-d7c22f6990bb",
+        "type": "course"
+      }
+    ]
   },
   "wME4MSldOWlMB54ekpReS": {
     "title": "IF",

public/roadmap-content/datastructures-and-algorithms.json

@@ -13,26 +13,11 @@
         "url": "https://roadmap.sh/javascript",
         "type": "article"
       },
-      {
-        "title": "W3Schools – JavaScript Tutorial",
-        "url": "https://www.w3schools.com/js/",
-        "type": "article"
-      },
       {
         "title": "The Modern JavaScript Tutorial",
         "url": "https://javascript.info/",
         "type": "article"
       },
-      {
-        "title": "W3Schools – Node.js Tutorial",
-        "url": "https://www.w3schools.com/nodejs/",
-        "type": "article"
-      },
-      {
-        "title": "What is NPM?",
-        "url": "https://www.w3schools.com/nodejs/nodejs_npm.asp",
-        "type": "article"
-      },
       {
         "title": "Official Documentation",
         "url": "https://nodejs.org/en/learn/getting-started/introduction-to-nodejs",
@@ -74,11 +59,6 @@
         "url": "https://www.java.com/",
         "type": "article"
       },
-      {
-        "title": "W3 Schools Tutorials",
-        "url": "https://www.w3schools.com/java/",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Java",
         "url": "https://app.daily.dev/tags/java?ref=roadmapsh",
@@ -120,11 +100,6 @@
         "url": "https://gobyexample.com/",
         "type": "article"
       },
-      {
-        "title": "W3Schools Go Tutorial ",
-        "url": "https://www.w3schools.com/go/",
-        "type": "article"
-      },
       {
         "title": "Making a RESTful JSON API in Go",
         "url": "https://thenewstack.io/make-a-restful-json-api-go/",
@@ -151,11 +126,6 @@
         "url": "https://docs.microsoft.com/en-us/learn/paths/csharp-first-steps/?WT.mc_id=dotnet-35129-website",
         "type": "article"
       },
-      {
-        "title": "C# on W3 schools",
-        "url": "https://www.w3schools.com/cs/index.php",
-        "type": "article"
-      },
       {
         "title": "Introduction to C#",
         "url": "https://docs.microsoft.com/en-us/shows/CSharp-101/?WT.mc_id=Educationalcsharp-c9-scottha",
@@ -228,11 +198,6 @@
         "url": "https://pythonprinciples.com/",
         "type": "article"
       },
-      {
-        "title": "W3Schools - Python Tutorial ",
-        "url": "https://www.w3schools.com/python/",
-        "type": "article"
-      },
       {
         "title": "Python Crash Course",
         "url": "https://ehmatthes.github.io/pcc/",
@@ -632,11 +597,6 @@
     "title": "Bubble Sort",
     "description": "Bubble Sort is a simple sorting algorithm that works by repeatedly swapping the adjacent elements if they are in the wrong order. It gets its name because with each iteration the largest element \"bubbles\" up to its proper location. It continues this process of swapping until the entire list is sorted in ascending order. The main steps of the algorithm are: starting from the beginning of the list, compare every pair of adjacent items and swap them if they are in the wrong order, and then pass through the list until no more swaps are needed. However, despite being simple, Bubble Sort is not suited for large datasets as it has a worst-case and average time complexity of O(n²), where n is the number of items being sorted.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "Bubble Sort",
-        "url": "https://www.w3schools.com/dsa/dsa_algo_bubblesort.php",
-        "type": "article"
-      },
       {
         "title": "Bubble Sort Visualize",
         "url": "https://www.hackerearth.com/practice/algorithms/sorting/bubble-sort/visualize/",
@@ -674,11 +634,6 @@
     "title": "Insertion Sort",
     "description": "Insertion sort is a simple sorting algorithm that builds the final sorted array (or list) one item at a time. It's much less efficient on large lists than more advanced algorithms like quicksort, heapsort, or merge sort. Still, it provides several advantages such as it's easy to understand the algorithm, it performs well with small lists or lists that are already partially sorted and it can sort the list as it receives it. The algorithm iterates, consuming one input element each repetition and growing a sorted output list. At each iteration, it removes one element from the input data, finds the location it belongs within the sorted list and inserts it there. It repeats until no input elements remain.",
     "links": [
-      {
-        "title": "Insertion Sort - W3Schools",
-        "url": "https://www.w3schools.com/dsa/dsa_algo_insertionsort.php",
-        "type": "article"
-      },
       {
         "title": "Insertion Sort Visualization",
         "url": "https://www.hackerearth.com/practice/algorithms/sorting/insertion-sort/visualize/",
@@ -716,11 +671,6 @@
     "title": "Selection Sort",
     "description": "Selection Sort is a simple and intuitive sorting algorithm. It works by dividing the array into two parts - sorted and unsorted. Initially, the sorted part is empty and the unsorted part contains all the elements. The algorithm repeatedly selects the smallest (or largest, if sorting in descending order) element from the unsorted part and moves that to the end of the sorted part. The process continues until the unsorted part becomes empty and the sorted part contains all the elements. Selection sort is not efficient on large lists, as its time complexity is O(n²) where n is the number of items.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "Selection Sort - W3Schools",
-        "url": "https://www.w3schools.com/dsa/dsa_algo_selectionsort.php",
-        "type": "article"
-      },
       {
         "title": "Selection Sort Visualize",
         "url": "https://www.hackerearth.com/practice/algorithms/sorting/selection-sort/practice-problems/",
@@ -758,11 +708,6 @@
     "title": "Linear Search",
     "description": "Linear search is one of the simplest search algorithms. In this method, every element in an array is checked sequentially starting from the first until a match is found or all elements have been checked. It is also known as sequential search. It works on both sorted and unsorted lists, and does not need any preconditioned list for the operation. However, its efficiency is lesser as compared to other search algorithms since it checks all elements one by one.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "DSA Linear Search - W3Schools",
-        "url": "https://www.w3schools.com/dsa/dsa_algo_linearsearch.php",
-        "type": "article"
-      },
       {
         "title": "Learn Linear Search in 3 minutes",
         "url": "https://www.youtube.com/watch?v=246V51AWwZM",
@@ -774,11 +719,6 @@
     "title": "Binary Search",
     "description": "`Binary Search` is a type of search algorithm that follows the divide and conquer strategy. It works on a sorted array by repeatedly dividing the search interval in half. Initially, the search space is the entire array and the target is compared with the middle element of the array. If they are not equal, the half in which the target cannot lie is eliminated and the search continues on the remaining half, again taking the middle element to compare to the target, and repeating this until the target is found. If the search ends with the remaining half being empty, the target is not in the array. Binary Search is log(n) as it cuts down the search space by half each step.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "DSA Binary Search - W3Schools",
-        "url": "https://www.w3schools.com/dsa/dsa_algo_binarysearch.php",
-        "type": "article"
-      },
       {
         "title": "Learn Binary Search in 10 minutes",
         "url": "https://www.youtube.com/watch?v=xrMppTpoqdw",
@@ -830,11 +770,6 @@
     "title": "Binary Trees",
     "description": "A **Binary Tree** is a type of tree data structure in which each node has at most two children, referred to as the left child and the right child. This distinguishes it from trees in which nodes can have any number of children. A binary tree is further classified as a strictly binary tree if every non-leaf node in the tree has non-empty left and right child nodes. A binary tree is complete if all levels of the tree, except possibly the last, are fully filled, and all nodes are as left-justified as possible. Multiple algorithms and functions employ binary trees due to their suitable properties for mathematical operations and data organization.\n\nLearn more from the following links:",
     "links": [
-      {
-        "title": "Binary Tree",
-        "url": "https://www.w3schools.com/dsa/dsa_data_binarytrees.php",
-        "type": "article"
-      },
       {
         "title": "Binary Tree",
         "url": "https://youtu.be/4r_XR9fUPhQ?si=PBsRjix_Z9kVHgMM",
@@ -907,8 +842,14 @@
   },
   "NrPO7vF8Z1WzmA9Ca3Y_E": {
     "title": "Depth First Search",
-    "description": "**Depth-First Search (DFS)** is an algorithm used for traversing or searching tree or graph data structures. The process starts at the root node (selecting some arbitrary node as the root in the case of a graph), and explores as far as possible along each branch before backtracking. It uses a last in, first out (LIFO) stack to remember to get the next vertex to start a search when a dead end occurs in any iteration. DFS has been used in a variety of applications including finding connected components, topological sorting, and finding articulation points (or cut vertices) in a graph.",
-    "links": []
+    "description": "**Depth-First Search (DFS)** is an algorithm used for traversing or searching tree or graph data structures. The process starts at the root node (selecting some arbitrary node as the root in the case of a graph), and explores as far as possible along each branch before backtracking. It uses a last in, first out (LIFO) stack to remember to get the next vertex to start a search when a dead end occurs in any iteration. DFS has been used in a variety of applications including finding connected components, topological sorting, and finding articulation points (or cut vertices) in a graph.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Learn Depth First Search in 7 minutes",
+        "url": "https://youtu.be/by93qH4ACxo?si=FXcUfuwB5atV5SIY",
+        "type": "video"
+      }
+    ]
   },
   "N-qvYirxpORcaTslvlOL0": {
     "title": "Shortest Path Algorithms",
@@ -1214,8 +1155,24 @@
   },
   "R3Coq0TG1_cSOXzXWgpuI": {
     "title": "Heap",
-    "description": "",
-    "links": []
+    "description": "A heap is a type of data structure in computer science that is like a tree, where each parent node is always bigger (in a max heap) or smaller (in a min heap) than its child nodes.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Heap Data Structure",
+        "url": "https://www.programiz.com/dsa/heap-data-structure",
+        "type": "article"
+      },
+      {
+        "title": "Heap Data Structure",
+        "url": "https://www.youtube.com/watch?v=t0Cq6tVNRBA",
+        "type": "video"
+      },
+      {
+        "title": "Heaps and Priority Queues",
+        "url": "https://www.youtube.com/watch?v=B7hVxCmfPtM",
+        "type": "video"
+      }
+    ]
   },
   "AabJqPUwFVBVS02YPDPvL": {
     "title": "A* Algorithm",

public/roadmap-content/design-system.json

@@ -0,0 +1,982 @@
+{
+  "understand-the-basics@uvnV1IjE8RV-FKDxHntUU.md": {
+    "title": "Understand the Basics",
+    "description": "",
+    "links": []
+  },
+  "4PrkkoZ5fY-oow0O-bVhu": {
+    "title": "What is a Design System?",
+    "description": "A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Everything you need to know about Design Systems",
+        "url": "https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969",
+        "type": "article"
+      },
+      {
+        "title": "Design Systems 101",
+        "url": "https://www.nngroup.com/articles/design-systems-101/",
+        "type": "article"
+      },
+      {
+        "title": "A comprehensive guide to design systems",
+        "url": "https://www.invisionapp.com/inside-design/guide-to-design-systems/",
+        "type": "article"
+      }
+    ]
+  },
+  "2rlmLn_yQQV-7DpX1qT98": {
+    "title": "Need of Design System",
+    "description": "Having a solid design system speeds up your work by making the product team more efficient, and it creates consistency and harmony within the product and brand ecosystem. A strong design system takes the burden off individual designers to think through commonly recurring design problems. With a full library of pre-approved elements, designers can focus on bigger problems like creating seamless, intuitive flows that delight users. That kind of efficiency pays huge dividends over time.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Why You Need a Strong Design System (and How to Build One)",
+        "url": "https://www.drawbackwards.com/blog/why-you-need-a-strong-design-system-and-how-to-build-one",
+        "type": "article"
+      },
+      {
+        "title": "On Design Systems: Sell The Output, Not The Workflow",
+        "url": "https://www.smashingmagazine.com/2016/05/design-systems-responsive-design-sell-output-not-workflow/",
+        "type": "article"
+      },
+      {
+        "title": "Design Systems, when and how much?",
+        "url": "https://www.youtube.com/watch?v=Hx02SaL_IH0",
+        "type": "video"
+      }
+    ]
+  },
+  "J5mU0v491qrm-mr1W3Msd": {
+    "title": "Design System vs Component Library",
+    "description": "A component library is just a collection of visuals i.e. colours, button stylings, fonts, etc. A Design System takes it to the next level by including standards and documentation around the look and usage of each component. The Design System acts as the single-source of truth.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "A Design System: So Much More Than A Component Library",
+        "url": "https://www.architech.ca/a-design-system-so-much-more-than-a-component-library",
+        "type": "article"
+      },
+      {
+        "title": "Design System vs UI Component Library vs Brand Style Guide",
+        "url": "https://prototype.net/blog/design-system-component-library-style-guide",
+        "type": "article"
+      },
+      {
+        "title": "Design Systems vs Pattern Libraries vs Style Guides vs Component Libraries",
+        "url": "https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/",
+        "type": "article"
+      }
+    ]
+  },
+  "6r9XbwlBtHmJrhviG2cTD": {
+    "title": "What is Atomic Design",
+    "description": "Atomic design (by Brad Frost) is a mental model to help you think of user interfaces as a cohesive whole and a collection of parts at the same time. Through the comparison to atoms, molecules, and organisms, we can think of the design of our UI as a composition of self-containing modules put together.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Atomic Design Principles & Methodology 101",
+        "url": "https://xd.adobe.com/ideas/process/ui-design/atomic-design-principles-methodology-101/",
+        "type": "article"
+      },
+      {
+        "title": "Atomic Design Methodology",
+        "url": "https://atomicdesign.bradfrost.com/chapter-2/",
+        "type": "article"
+      },
+      {
+        "title": "Atomic Design and UI Components: Theory to Practice",
+        "url": "https://blog.bitsrc.io/atomic-design-and-ui-components-theory-to-practice-f200db337c24",
+        "type": "article"
+      }
+    ]
+  },
+  "_3_tFOpQisx6DSP4Yc2E2": {
+    "title": "Stakeholders Involved in Building",
+    "description": "Building an effective design system is not an individual responsibility, you need more than just designers. Here’s a quick list of the disciplines that can be represented in your team to create an effective design system:\n\n*   **Designers:** to define the visual elements of the system\n*   **Frontend Developers:** To create modular efficient code\n*   **Accessibility Experts:** Accessibility experts to ensure your system conforms to standards like WCAG\n*   **Performance Experts:** who can ensure your system loads quickly on all devices\n*   **Content Strategists:** who can help the team nail the voice and tone of the system\n*   **Researchers:** who can help you understand customer needs\n*   **Product Managers:** to ensure the system is aligning to customer needs\n*   **Leaders:** (VPs and directors) to champion and align the vision throughout the company including up to executive leadership\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Designing the Design System",
+        "url": "https://www.designbetter.co/design-systems-handbook/designing-design-system",
+        "type": "article"
+      }
+    ]
+  },
+  "hauTvrBOAHgrUnO_m_kDM": {
+    "title": "Design System Examples",
+    "description": "Visit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Collection of Open Source Design Systems",
+        "url": "https://github.com/alexpate/awesome-design-systems",
+        "type": "opensource"
+      },
+      {
+        "title": "Material Design (Google)",
+        "url": "https://material.io/",
+        "type": "article"
+      },
+      {
+        "title": "Carbon Design System (IBM)",
+        "url": "https://carbondesignsystem.com/",
+        "type": "article"
+      },
+      {
+        "title": "Atlassian Design System",
+        "url": "https://atlassian.design/",
+        "type": "article"
+      },
+      {
+        "title": "Polaris Design System (Shopify)",
+        "url": "https://polaris.shopify.com/",
+        "type": "article"
+      },
+      {
+        "title": "Gov.uk Design System",
+        "url": "https://design-system.service.gov.uk/",
+        "type": "article"
+      }
+    ]
+  },
+  "de0TKvmFTDmKGZc5X7iFq": {
+    "title": "Terminology",
+    "description": "Design systems can be tricky if you don’t know what certain words mean. Have a look at the roadmap nodes as well as follow the link below to read the glossary.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Design Systems Glossary",
+        "url": "https://web.archive.org/web/20220620075140/https://superfriendly.com/design-systems/glossary/",
+        "type": "article"
+      }
+    ]
+  },
+  "97cpJyKBKNAq1P_pQZH-t": {
+    "title": "Component",
+    "description": "Components are the reusable building blocks of a design system. Each component meets a specific interaction or UI needs, and is specifically created to work together to create patterns and intuitive user experiences.",
+    "links": []
+  },
+  "vJ4WytrzY7j10mo8S3O1u": {
+    "title": "Component Library",
+    "description": "A component library is a collection of all the components used in a website, software or app. Some of the common tools to showcase and browse components in a component library include are given below:\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Pattern Lab",
+        "url": "https://patternlab.io/",
+        "type": "article"
+      },
+      {
+        "title": "Fractal",
+        "url": "https://fractal.build/",
+        "type": "article"
+      },
+      {
+        "title": "Storybook",
+        "url": "https://storybook.js.org/",
+        "type": "article"
+      }
+    ]
+  },
+  "fPUuXrlchna3K00KcY4O6": {
+    "title": "Design Language",
+    "description": "A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is a Design Language.. really?",
+        "url": "https://medium.com/thinking-design/what-is-a-design-language-really-cd1ef87be793",
+        "type": "article"
+      },
+      {
+        "title": "How to Develop a Design Language",
+        "url": "https://xd.adobe.com/ideas/principles/web-design/how-to-develop-design-language/",
+        "type": "article"
+      },
+      {
+        "title": "What Actually Constitutes Design Language?",
+        "url": "https://www.uxpin.com/studio/blog/design-language/",
+        "type": "article"
+      },
+      {
+        "title": "Visual Design Language: The Building Blocks Of Design",
+        "url": "https://www.smashingmagazine.com/2020/03/visual-design-language-building-blocks/",
+        "type": "article"
+      }
+    ]
+  },
+  "kifE3JE2immnU1O3-toZf": {
+    "title": "Governance",
+    "description": "Governance is a framework for clarifying roles, responsibilities, and authority over decisions. Having that clarity ensures that decisions for the design system funnel smoothly through the governance process\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Governance is a design system’s friend",
+        "url": "https://zeroheight.com/blog/governance-is-a-design-systems-friend",
+        "type": "article"
+      },
+      {
+        "title": "Design System Governance – Scale Your Design",
+        "url": "https://www.uxpin.com/studio/blog/design-system-governance/",
+        "type": "article"
+      },
+      {
+        "title": "Governance by design: Building successful design systems",
+        "url": "https://rangle.io/blog/governance-by-design-building-successful-design-systems/",
+        "type": "article"
+      },
+      {
+        "title": "Team Models for Scaling a Design System",
+        "url": "https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0",
+        "type": "article"
+      }
+    ]
+  },
+  "mlBzJ2YvBr9QuOthKdj0p": {
+    "title": "Guidelines",
+    "description": "Design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience. Designers use such guidelines to judge how to adopt principles such as intuitiveness, learnability, efficiency and consistency so they can create compelling designs and meet and exceed user needs.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Design Guidelines",
+        "url": "https://www.interaction-design.org/literature/topics/design-guidelines",
+        "type": "article"
+      }
+    ]
+  },
+  "7xPT8rUX3hjSWbxH_FfQs": {
+    "title": "Pattern",
+    "description": "Patterns are best practice design solutions for specific user-focused tasks and page types. Patterns often use one or more components and explain how to adapt them to the context. Some sample patterns could be user signing in to the application or performing the checkout operation.",
+    "links": []
+  },
+  "4dzoZmkNHPedgLqLy93t8": {
+    "title": "Pilot",
+    "description": "Pilots are one of the best ways to put your design system through its paces, especially before the design system even gets to a v1. Like television pilots help test audience reactions to a series concept without investing significant resources to create the whole thing, application pilots are a good foundation for ensuring your design system’s design and code are battle-tested.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Design Systems: Pilots & Scorecards",
+        "url": "https://superfriendly.com/design-systems/articles/design-systems-pilots-scorecards/",
+        "type": "article"
+      }
+    ]
+  },
+  "jETJVuS_EczJiQASLqaQr": {
+    "title": "Token",
+    "description": "Design system tokens are the style values of UI elements such as color, typography, spacing, shadows, etc., that are used across products and capable of being converted to a format for any platform (web, mobile, desktop). Tokens are building blocks of the design system—think of them as sub atoms, the smallest pieces of style values that allow designers to create styles for a product.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What Are Design Tokens?",
+        "url": "https://xd.adobe.com/ideas/principles/design-systems/what-are-design-tokens/",
+        "type": "article"
+      }
+    ]
+  },
+  "lUObv2N7eH3Jdnwwd5vmI": {
+    "title": "UI Kit",
+    "description": "As it relates to a design system, a UI Kit is a representation of coded components created in a way that designers who don’t know code can create interface mockups. Examples of UI kits are Sketch libraries and [Figma design systems](https://www.figma.com/blog/how-to-build-your-design-system-in-figma/).\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Design System vs UI Kit",
+        "url": "https://uigstudio.com/insights/design-system-vs-ui-kit",
+        "type": "article"
+      },
+      {
+        "title": "Your sketch library is not a design system",
+        "url": "http://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/",
+        "type": "article"
+      }
+    ]
+  },
+  "dUaoMARPabiD4DRqdkaer": {
+    "title": "Making a Design System",
+    "description": "First step in building a design system is identifying [if you even need a design system](https://sparkbox.com/foundry/when_not_to_use_a_design_system).\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Design Systems: Step-by-Step Guide to Creating Your Own",
+        "url": "https://www.uxpin.com/create-design-system-guide/",
+        "type": "article"
+      },
+      {
+        "title": "Does My Organization Need a Design System?",
+        "url": "https://www.method.com/insights/does-my-organization-need-a-design-system/",
+        "type": "article"
+      },
+      {
+        "title": "Introducing Design Systems Into Chaos - Diana Mounter, GitHub",
+        "url": "https://www.youtube.com/watch?v=FZSi1bK-BRM",
+        "type": "video"
+      },
+      {
+        "title": "Design Systems, when and how much?",
+        "url": "https://www.youtube.com/watch?v=Hx02SaL_IH0",
+        "type": "video"
+      },
+      {
+        "title": "Create a Design System with Figma - Full Course",
+        "url": "https://www.youtube.com/watch?v=RYDiDpW2VkM",
+        "type": "video"
+      }
+    ]
+  },
+  "-9I3fTpnQlmcZmIIuQiPe": {
+    "title": "Making it from Scratch",
+    "description": "If you are building a Design System from Scratch, you may skip the \"Existing Design Analysis\" node of the roadmap and start with \"Creating Design Language\".\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Create a Design System with Figma - Full Course",
+        "url": "https://www.youtube.com/watch?v=RYDiDpW2VkM",
+        "type": "video"
+      }
+    ]
+  },
+  "z5gBy7BjlBKwbYbxXtoDA": {
+    "title": "Making it from Existing Design",
+    "description": "If you are creating a Design System from pre-existing product design, there is an additional step to perform the existing design analysis, understand the existing design process, perform a visual audit, identify design elements and components and so on.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Create a Design System with Figma - Full Course",
+        "url": "https://www.youtube.com/watch?v=RYDiDpW2VkM",
+        "type": "video"
+      }
+    ]
+  },
+  "8eWhvW2zDIxMGHaXl0Y9i": {
+    "title": "Existing Design Analysis",
+    "description": "First step in creating a design system from an existing design is performing a design analysis and understanding what you will be working with to identify the requirements and prepare a plan. Performing the analysis may consist of:\n\n*   Understanding the Existing Design Process\n*   Performing Visual Audit\n*   Identifying Design Elements\n*   Identify Common Components\n*   Understanding the A/B Testing and Experimentation Needs\n*   Understanding any Locale or regional requirements (such as LTR/RTL).\n*   Documenting your findings",
+    "links": []
+  },
+  "NKm-gXbt5Y7dDwKVkPHjX": {
+    "title": "Performing a Visual Audit",
+    "description": "Take screenshots of your current product with the help of your team. You can use any presentation software like Google Slides or print and pin them on foam-core boards. Group the screenshots into categories like buttons, navigation, forms, tables, charts, lists etc.\n\nNow, review each category to find inconsistencies and note areas for improvement with your team. Use a tool like [CSS Stats](https://cssstats.com/) to see how many unique colors, typefaces you have in your style sheets.",
+    "links": []
+  },
+  "CnsDoZ3gIaPeNbwHuZXYJ": {
+    "title": "Identify Existing Design Process",
+    "description": "To better understand the kind of design system you would like to implement, you need to start by reviewing and analyzing the current approach for design at your company. Find the answers to the following questions:\n\n*   What is the design process that your company follows?\n*   What are the existing tools that your company uses?\n\nIt’s also recommended to evaluate the level of design maturity of the product teams. This knowledge will help you estimate the time required to introduce the system to your organization.",
+    "links": []
+  },
+  "aak3227IDDJMh0MquQX6m": {
+    "title": "Icons",
+    "description": "Icons are visual symbols that communicate meaning quickly. They should maintain consistent style, use a grid system, provide multiple sizes, organize into semantic categories, ensure accessibility, consider cultural neutrality, be available in multiple formats, include interactive states, and follow systematic versioning.",
+    "links": []
+  },
+  "-MrrapoyFWKhSeE2PZ9mb": {
+    "title": "Visual Forms",
+    "description": "Visual forms focus on aesthetic and interactive design aspects of form components. Effective design should establish clear information architecture, create consistent field styling, develop harmonious label positioning, design clear error communication, implement progressive enhancement, prioritize mobile-first design, and ensure cross-platform consistency.",
+    "links": []
+  },
+  "78RsPhsWpl00AbkwKXUxL": {
+    "title": "Sizing",
+    "description": "Sizing tokens establish consistent dimensions across components and layouts. An effective system should establish a foundational unit, create predefined size variations, ensure minimum accessibility requirements, define standard icon sizes, establish container dimensions, implement fluid sizing, and account for platform-specific requirements.",
+    "links": []
+  },
+  "GtLYBPJjdZwG0qgA7erk7": {
+    "title": "Spaces",
+    "description": "Spacing tokens define white space between elements, creating visual rhythm and clear relationships. An effective system should establish a foundational unit, create systematic scales, define consistent internal spacing, establish layout guidelines, implement fluid spacing, create meaningful categories, and ensure cross-platform consistency.",
+    "links": []
+  },
+  "2prUeRYbSJTYjo2quJIKs": {
+    "title": "Color",
+    "description": "Color establishes brand identity and visual hierarchy in design systems. A comprehensive color system should organize colors logically, meet WCAG accessibility standards, support light/dark themes, create semantic categories, establish systematic naming, balance brand expression with function, and provide multiple formats.",
+    "links": []
+  },
+  "ODQ8zrHc2rsc8PN-APKvz": {
+    "title": "Typography",
+    "description": "Typography establishes hierarchy, readability, and brand personality. An effective system should develop harmonious scales using mathematical ratios, choose appropriate typefaces, implement fluid typography, establish consistent line-heights, define font weight hierarchy, ensure accessibility compliance, and provide clear usage guidelines.",
+    "links": []
+  },
+  "_dIMuXWI73ogboGjnLIpT": {
+    "title": "Avatar",
+    "description": "Avatars represent users or entities in interfaces. They should support multiple shapes (circular, square), various sizes, handle missing images with initials or default icons, include status indicators, maintain image quality standards, ensure accessibility, provide loading states, and support group arrangements with proper interactive feedback.",
+    "links": []
+  },
+  "UG4AIgJBfZpuhia4Y1K5v": {
+    "title": "Badges",
+    "description": "Badges are small status indicators that communicate information about objects or actions. Effective design should include numeric indicators for notifications, status badges with distinct colors, category labels, interactive states, multiple sizes, semantic color integration, consistent positioning, content guidelines, and proper accessibility.",
+    "links": []
+  },
+  "5DUobzueMZbScyTZTHpCS": {
+    "title": "Banners",
+    "description": "Banners communicate important information at the top of pages. They should support different message types with distinct visuals, various positioning options, clear dismissal mechanisms, relevant actions, consistent iconography, mobile adaptations, subtle animations, content guidelines, proper accessibility, and stacking rules for multiple banners.",
+    "links": []
+  },
+  "s6oqvHgwK4Cwyx-JENBbY": {
+    "title": "Buttons",
+    "description": "Buttons enable user actions and require clear visual hierarchy (primary, secondary, tertiary), comprehensive interactive states, multiple sizes, icon support, content guidelines, minimum 44px touch targets, loading indicators, responsive behavior, proper accessibility with ARIA labels, and subtle animations.",
+    "links": []
+  },
+  "yLLAUGbGUHBTEDkZNK0fm": {
+    "title": "Cards",
+    "description": "Cards are flexible content containers that group related information and actions. They require clear content hierarchy, consistent elevation systems, responsive behavior, distinct interactive states, media support, defined action areas, content variants, loading states, proper accessibility, and consistent spacing aligned with the design system.",
+    "links": []
+  },
+  "hzVwLVzAij6TgPTcNHyhv": {
+    "title": "Dropdowns",
+    "description": "Dropdowns reveal option lists when activated to save space. They need clear triggers with visual indicators, organized options with grouping, search/filtering for long lists, multi-select support, smart positioning, full keyboard navigation, loading states, mobile adaptations, proper accessibility, and performance optimization.",
+    "links": []
+  },
+  "5LCMzBnnS206t5EtgaUx8": {
+    "title": "Forms",
+    "description": "Forms collect user input and require standardized input components, comprehensive validation systems, effective labeling strategies, consistent layouts, clear error handling, progressive disclosure, required field indicators, auto-complete integration, proper accessibility, and mobile optimization.",
+    "links": []
+  },
+  "Ia1gYzepJOTvTro961eSj": {
+    "title": "...other",
+    "description": "Specialized elements beyond core components include badges for notifications, breadcrumbs for navigation, progress indicators, tooltips for help, pagination for browsing, tab systems, accordions for collapsible content, modals for focused interactions, notification systems, and basic data visualization elements.",
+    "links": []
+  },
+  "ILRDAnpfGHCZq-FBlbfDO": {
+    "title": "A/B Tests & Experiments",
+    "description": "Understand how the team implements A/B tests and experiments on different screens and if the new design system should accommodate any necessary requirements.",
+    "links": []
+  },
+  "pRJ9wEPNfFx_6EYB501vk": {
+    "title": "Regional Requirements",
+    "description": "Understand any regional requirements such as LTR or any other UX variations that your design system should accommodate.",
+    "links": []
+  },
+  "-b4GjLpL_ppDMJSiChTef": {
+    "title": "Documentation",
+    "description": "Organize and document the results of visual audit, design elements, components with variations, states, patterns found, any existing documentation, current design process, and considerations. This documentation will be shared across the team and act as a guide when building the new design system.",
+    "links": []
+  },
+  "JnaNZ9MfMrXQrjW2wABzB": {
+    "title": "Creating Design Language",
+    "description": "Like any language, a design language is a methodical way of communicating with your audience through your approach to product design. It’s the cornerstone of consistent customer experiences.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is a Design Language.. really?",
+        "url": "https://medium.com/thinking-design/what-is-a-design-language-really-cd1ef87be793",
+        "type": "article"
+      },
+      {
+        "title": "How to Develop a Design Language",
+        "url": "https://xd.adobe.com/ideas/principles/web-design/how-to-develop-design-language/",
+        "type": "article"
+      },
+      {
+        "title": "What Actually Constitutes Design Language?",
+        "url": "https://www.uxpin.com/studio/blog/design-language/",
+        "type": "article"
+      },
+      {
+        "title": "Visual Design Language: The Building Blocks Of Design",
+        "url": "https://www.smashingmagazine.com/2020/03/visual-design-language-building-blocks/",
+        "type": "article"
+      }
+    ]
+  },
+  "toyNbBB5tbyiJZkzuklIv": {
+    "title": "Writing Guidelines",
+    "description": "Every consistent experience needs watertight writing. Laying down the foundations for your house style early keeps everything in line with consistent grammar, style choices and action-oriented language to help your design.",
+    "links": []
+  },
+  "fnlVIgsmyxj2UVCCjM-8g": {
+    "title": "Tone of Voice",
+    "description": "A clear tone of voice defines how you speak to your audience at every moment in their journey, helping them get wherever they want to go.",
+    "links": []
+  },
+  "Zspu1SsuTE34PVmYePcs4": {
+    "title": "Terminology",
+    "description": "Create the standard terms and phrases that need to be kept the same throughout the user experience, speeding up the design process and unifying your voice.",
+    "links": []
+  },
+  "1RJrMVJf_3clM7E5OML-f": {
+    "title": "Design Principles",
+    "description": "The considerations that guide the basis of your practice. They outline how you approach design from a philosophical perspective and help with everyday decisions.",
+    "links": []
+  },
+  "cMfsRtvzvDZZJ0TqeUOxm": {
+    "title": "Vision",
+    "description": "Brand vision serves as the foundation for design system decisions, providing purpose and direction. An effective vision should articulate organizational purpose, identify core values, visualize future success, prioritize user needs, clarify brand uniqueness, account for cultural considerations, and connect to measurable goals.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Creating Brand Vision",
+        "url": "https://www.interaction-design.org/literature/article/branding-in-ux",
+        "type": "article"
+      },
+      {
+        "title": "Vision-Driven Design Systems",
+        "url": "https://bradfrost.com/blog/post/the-design-system-ecosystem/",
+        "type": "article"
+      },
+      {
+        "title": "Brand Strategy for Design",
+        "url": "https://alistapart.com/article/creating-a-brand-identity/",
+        "type": "article"
+      },
+      {
+        "title": "Purpose-Driven Design",
+        "url": "https://designsystem.digital.gov/design-tokens/brand/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Brand Strategy",
+        "url": "https://app.daily.dev/tags/branding?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "Wn8CylBz-hyl9-iXcUVTO": {
+    "title": "Monochrome Version",
+    "description": "A monochrome version of your logo that looks good on top of photography or when it’s printed with a poor quality printer.",
+    "links": []
+  },
+  "FA3JsZgNhKrgNHVtVreol": {
+    "title": "Small Use Guidance",
+    "description": "Your logo must perform well and be recognisable at all sizes. Tips for using your logo in these cases will minimise the risk of it being misused.",
+    "links": [
+      {
+        "title": "Everything You Need to Know About Logo Usage Guidelines",
+        "url": "https://www.tailorbrands.com/blog/logo-usage-guidelines",
+        "type": "article"
+      }
+    ]
+  },
+  "7n61402xwhIgJ7dPHg8q7": {
+    "title": "Placement Guidance",
+    "description": "Logo placement guidance ensures consistent brand representation through clear positioning, sizing, and clearance rules. Effective guidelines should define minimum clearance areas, establish preferred positions for different contexts, provide size specifications, define background treatments, and account for platform-specific requirements.",
+    "links": []
+  },
+  "RmSFwKqL9yXXxGKZusKWX": {
+    "title": "Usage Guidance",
+    "description": "Logo usage guidance provides rules for proper implementation to maintain brand consistency. Effective guidance should establish clear examples of proper usage and mistakes to avoid, define logo variations, specify color requirements, prohibit unauthorized alterations, and include approval processes for new contexts.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Logo Usage Best Practices",
+        "url": "https://99designs.com/blog/tips/logo-usage-guidelines/",
+        "type": "article"
+      },
+      {
+        "title": "Brand Guidelines Development",
+        "url": "https://designsystem.digital.gov/design-tokens/logo/",
+        "type": "article"
+      },
+      {
+        "title": "Trademark and Logo Legal Guidelines",
+        "url": "https://www.uspto.gov/trademarks-getting-started/trademark-basics",
+        "type": "article"
+      },
+      {
+        "title": "Brand Identity Protection",
+        "url": "https://www.brandfolder.com/blog/brand-guidelines",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Brand Management",
+        "url": "https://app.daily.dev/tags/branding?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "-6LPUMRm-SqvRVEWPDFl8": {
+    "title": "File Formats",
+    "description": "Providing a variety of formats for the vector version of your logo will make it easier for others to work and prevent anyone from redrawing it.",
+    "links": [
+      {
+        "title": "What is a Vector Logo and Why You Need It",
+        "url": "https://www.renderforest.com/blog/vector-logo",
+        "type": "article"
+      }
+    ]
+  },
+  "aLtOGjNFxaRzg0PI-ed99": {
+    "title": "Accessibility",
+    "description": "Guidelines for how you approach accessibility and how you leverage colour, hierarchy and assistive technologies to help your users.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Introduction to Web Accessibility",
+        "url": "https://www.w3.org/WAI/fundamentals/accessibility-intro/",
+        "type": "article"
+      },
+      {
+        "title": "What is Accessibility? by Mozilla",
+        "url": "https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility",
+        "type": "article"
+      },
+      {
+        "title": "Accessibility Principles",
+        "url": "https://www.w3.org/WAI/fundamentals/accessibility-principles/",
+        "type": "article"
+      },
+      {
+        "title": "WebAIMs Website (Web Accessibility In Mind)",
+        "url": "https://webaim.org/",
+        "type": "article"
+      },
+      {
+        "title": "WAVE Web Accessibility Evaluation Tool",
+        "url": "https://wave.webaim.org/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Accessibility",
+        "url": "https://app.daily.dev/tags/accessibility?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "PlW8mHnOTyYnbtl0zUSG9": {
+    "title": "User Onboarding",
+    "description": "How you onboard your users to your product or a new feature and give them a great experience from the start.",
+    "links": [
+      {
+        "title": "What is user onboarding? ",
+        "url": "https://www.youtube.com/watch?v=PatIqbGEQe4",
+        "type": "video"
+      }
+    ]
+  },
+  "bD-DjUbAA6l2eK1R9ITcK": {
+    "title": "Microcopy Guidelines",
+    "description": "The standard way to write for the components in your design system. These take platform conventions and best practices for writing all into consideration.",
+    "links": []
+  },
+  "a53cl6ZKvYXxG25Ii2_zu": {
+    "title": "Defining Design Tokens",
+    "description": "Variables that store values for the base layer of your design system, like colour and typography. They’re used in components, so changes on this level will resonate throughout the whole system.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What Are Design Tokens?",
+        "url": "https://xd.adobe.com/ideas/principles/design-systems/what-are-design-tokens/",
+        "type": "article"
+      }
+    ]
+  },
+  "fW0cEy2SB0HDbiF7QA7Ev": {
+    "title": "Accessibility",
+    "description": "Make sure to have accessible pairings between the main colours in your palette. More importantly, make sure that your background and text colours have at least an AA standard contrast ratio between them.",
+    "links": []
+  },
+  "__Pv19gRr2SFknVnfm0Mr": {
+    "title": "Functional Colors",
+    "description": "Besides your brand colours, make sure to have colours defined and made into variables for functions like disabled states, backgrounds, actions and high contrast text.",
+    "links": []
+  },
+  "kxUnqpydDwB73IwrCPZM0": {
+    "title": "Dark Mode",
+    "description": "Preparing a dark mode version of your colour palette will allow your design system to adapt to dark mode and respect what your user wants to see.",
+    "links": []
+  },
+  "XDfxs5cgjSuTEprZi2Z5b": {
+    "title": "Guidelines",
+    "description": "Provide guidelines on how and when to use the colours in your palette, what to keep in mind when working with them and how not to use them.",
+    "links": []
+  },
+  "wQbMhC7q3qdKYf_pX5qL4": {
+    "title": "Units",
+    "description": "Units are the most granular building blocks for layout. Defining a set of values with consistent increments (such as 4, 8, 12 and 16 for a 4-point system) will provide you with the foundation when you’re designing your grid and spacing values.",
+    "links": []
+  },
+  "8f2V-rM7soorTTvNo5Vcx": {
+    "title": "Grid",
+    "description": "Every layout should sit on a grid that brings order and hierarchy to the interface. Define a grid separately for mobile, tablet and desktop devices with columns, gutters, and margins so your interface can adapt to any platform easily.",
+    "links": []
+  },
+  "djwnJq9Y_Hx1Ynw01wr_u": {
+    "title": "Breakpoints",
+    "description": "Predefine the screen sizes and orientations your grid will adapt to.",
+    "links": []
+  },
+  "dXaYOwTAnYSlipNEBSV9l": {
+    "title": "Spacking",
+    "description": "Horizontal and vertical rhythm plays a big role in a layout. You should provide easy methods for adding space between interface elements independent of your grid.",
+    "links": []
+  },
+  "8YVCtgYRHR3VcpUJXMVwP": {
+    "title": "Responsiveness",
+    "description": "Desktop devices can usually afford to have bigger font sizes compared to mobile devices. Creating a typography scale that adapts to the viewport size will help with a more meaningful hierarchy and layout.",
+    "links": []
+  },
+  "Zl7MVllzJgObruYtlibKf": {
+    "title": "Grid Relation",
+    "description": "Font sizes and leading should match your grid to allow better pairing between text and other UI elements. A good example of this is text paired with icons with bounding boxes.",
+    "links": []
+  },
+  "L2NHddsv5RGR_BW0I3f4T": {
+    "title": "Readability",
+    "description": "Optimising the letter spacing (tracking), line height (leading) and line length for your typography scale will help with the readability of text.",
+    "links": []
+  },
+  "wFL9axjaPcVvI8XWduxgz": {
+    "title": "Performance",
+    "description": "Custom fonts need to be downloaded before they can be displayed, especially on the web. Make sure that you have sensible fallbacks and fast loading time for your typography assets. Using system fonts solves this performance problem.",
+    "links": []
+  },
+  "Jab5LO0mGhTy1cU61Catu": {
+    "title": "Guidelines",
+    "description": "Provide guidelines on how and when to use the pairings in your typography scale, what to keep in mind when working with them and how not to use them.",
+    "links": []
+  },
+  "DhrnZwQODG0P7D-27_3ec": {
+    "title": "Accessibility",
+    "description": "For icons that convey a meaning or serve a function, add the necessary support for screen readers. You can skip this for decorative icons.",
+    "links": []
+  },
+  "SPK1i0XuHpNEWyi1iIxrV": {
+    "title": "Style",
+    "description": "Make sure that your icon family makes visual sense as a whole. Picking an outlined or filled style and sticking with it will lead to better visual consistency and predictability.",
+    "links": []
+  },
+  "wiclAEEYioRgLmXFcKQ4E": {
+    "title": "Naming",
+    "description": "Name your icons based on what they are, not what they represent. For instance, a trash icon should be named trash, not delete. You can still add related keywords to improve discoverability.",
+    "links": []
+  },
+  "6Hmj_TeQ563jshqAAl__I": {
+    "title": "Grid Relation",
+    "description": "Draw your icons in a bounding box that plays well with your grid. This makes for a better pairing with other UI elements. A good example of this would be icons with bounding boxes paired with text.",
+    "links": []
+  },
+  "w3LS85eFerscaxb2Xp-dP": {
+    "title": "Sizes",
+    "description": "Provide different sizes for icons that correlate to your grid. Provide a minimum size and remove unnecessary detail for your icons for smaller sizes.",
+    "links": []
+  },
+  "HDf2L4F1f8uUGpVaf7Y7z": {
+    "title": "Keywords",
+    "description": "Adding keywords will improve the discoverability of each icon and provide a better user experience for anyone using your system.",
+    "links": []
+  },
+  "Y0KxHVrcNGHDao-38Oz3w": {
+    "title": "Reserved Icons",
+    "description": "Reserving icons that represent common actions will prevent their use in any other context. System icons for navigation or adding and deleting are a good example. This leads to a more intuitive user experience.",
+    "links": []
+  },
+  "eTxhpC3AQIMcUax6WFU9U": {
+    "title": "Guidelines",
+    "description": "Provide guidelines on how and when to use icons, what to keep in mind when working with them and how not to use them.",
+    "links": []
+  },
+  "Hw_LQInG6OtSwDXch3Lvg": {
+    "title": "Creating Core Components",
+    "description": "Components are the main building blocks for user interfaces. Building a reusable component library enhances your product development workflow by reducing design and tech debt and speeding up the process. Core components can’t be broken down into granular pieces without losing their meaning.",
+    "links": []
+  },
+  "h3TZY1yBkzLYUK6W7K7xs": {
+    "title": "Avatar",
+    "description": "Avatars are used to show a thumbnail of a user photo or a visual representation of any other type of content.\n\n*   **Image:** Avatars should mask an image into their shape and work with any image size since they may get this image from unknown data sources.\n*   **Image Fallback:** There should be fallbacks when there’s no image available. This can be done with placeholder images or initials.\n*   **Accessibility:** Always provide a description for screen readers describing what’s displayed on the avatar image instead of just naming its role.\n*   **Sizes:** There are many contexts to use avatars and they all require different sizes for the component. For average projects use at least 2-3 different sizes and make sure there’s at least a small size available.\n*   **Icon:** Avatars can be used with an icon instead of an image to emphasize areas that don’t necessarily have (or need) an image associated with it.\n*   **Background Colors:** When used with icons or text, there has to be a background colour from the design system colour tokens applied to the avatar shape. Make sure that icons and text have enough contrast ratio with the background according to the WCAG AA standard.",
+    "links": []
+  },
+  "hjiJJg4KNr8lyktFQd868": {
+    "title": "Input Text",
+    "description": "Input text lets users enter and edit text.\n\n*   **Disabled State:** Prevents input interactions and removes its value from the form submission.\n*   **Placeholder:** When there’s no value entered, show a placeholder with a potential value example. Don’t use placeholders as labels for the inputs.\n*   **Label:** There should be a text label linked with the text field. Clicking the label should move the focus to the field.\n*   **Error State:** The error state is used for form validation errors when the error is related to the text field only. Always use a text error along with changing the colour of the field.\n*   **Focused State:** The focused state should highlight the text field when users start to interact with it. There is always only one focused field in the form.\n*   **Autocomplete:** When applicable, adding support for the HTML autocomplete attribute will allow users to easily enter different data types.\n*   **Icon Support:** Icons are used to describe input methods, express a text field state or provide additional functionality.",
+    "links": []
+  },
+  "kkqRIgdXWaJbX9CjLpwha": {
+    "title": "Banner",
+    "description": "Banners display an actionable message used as a prominent way of communicating with your users.\n\n*   **Appearance:** Banners are used to display different types of messages and it’s important to differentiate their visual appearance based on the role they’re playing. If you’re using background colours for role differentiation, make sure there’s enough contrast ratio with the content according to the WCAG AA standard.\n*   **Area for icons or images:** Banners can supplement their message using a supporting icon or image. They shouldn’t be used instead of text content.\n*   **Actions:** Actions in banners should relate to its text and provide a way to react to the message sent to the user.\n*   **Dismissible Action:** Don’t overwhelm the user with banners on the page and include a dismissable action. That may be either a separate close button or one of the actions provided.\n*   **Accessibility:** If a banner dynamically appears on the page, it should be announced to the user by their assistive technology.\n*   **Responsiveness:** Banners should adapt to the viewport size. This usually means that they become full-width for mobile to save some space.",
+    "links": []
+  },
+  "LNsXQI8sE_5kzSD_iMLJA": {
+    "title": "Badge",
+    "description": "Badges are elements that represent the status of an object or user input value.\n\n*   **Appearance:** Badges may play various roles in your product and having a predefined colour for each role should help users understand their meaning. When changing colours, make sure the text has enough contrast ratio with the background according to the WCAG AA standard.\n*   **Dismissible Action:** Badges can be used as a dynamic way to display selected values and there should be a way to dismiss them.",
+    "links": []
+  },
+  "LWihkf4q5UawjLd84KQxN": {
+    "title": "Button",
+    "description": "Buttons are interactive elements used for single-step actions.\n\n*   **Hover State:** Clearly show that the button is interactive when it gets hovered with a mouse cursor.\n*   **Active State:** Used when a button gets pressed. The same state can be used to represent the button responsible for toggling another element on the page while that element is visibly opened.\n*   **Focused State:** Used when a button gets selected through keyboard navigation.\n*   **Icon Support:** Icons easily communicate the purpose of the button when used next to its label or can be used without text when there’s not enough space. Make sure that the accessibility label is provided when used with an icon only.\n*   **Disabled:** Visually shows that a button is not interactive and restricts it from being pressed.\n*   **Loading:** Used when users have to wait for the result of their action after they press a button. If a spinner is used to display this state make sure that it’s not changing the original button width or height.\n*   **Full Width:** By default buttons take the width of their content, but they should also come with a full width variant that works well in mobile devices.\n*   **Variants:** When using multiple buttons, there should be a way to differentiate between primary and secondary actions. Buttons may play different roles for the user or be used on different types of surfaces and they have to change the way they look.\n*   **Sizes:** Buttons can be used in different areas of the website and may have multiple predefined sizes. On mobile, tappable areas have to be a minimum of 48px to be accessible according to iOS and Android accessibility guidelines.",
+    "links": []
+  },
+  "rZ7d1C9swiqlRTbdJLZ0R": {
+    "title": "Card",
+    "description": "Cards are used to group information about subjects and their related actions.\n\n*   **Supports any type of content:** Cards are one of the most used components in the product, so they have to be flexible enough to support any other components placed in them.\n*   **Information structure:** No matter how flexible cards are, it’s important for cards to have a specific structure for its elements for product consistency.\n*   **Supports media sections:** One of the most popular scenarios for using cards is mixing them with media content. The most popular options are having a full-width area on top of the content or full-height area at one of the card’s sides.\n*   **Supplementary actions:** Cards can be used with actions usually placed at the bottom of the card, or the card itself can be tappable and represent an action.\n*   **Responsiveness:** On mobile viewports cards are usually full-width in order to save space for the content.",
+    "links": []
+  },
+  "yWEXfjzuzk99dxjZlG4Cq": {
+    "title": "Carousel",
+    "description": "Carousels stack the same type of items and allows scrolling through them horizontally.\n\n*   **Navigation Controls:** Carousels should have easy-to-find navigation controls for scrolling through content.\n*   **Supports any content:** Carousels can be used in different contexts and shouldn’t be limited to a specific child component. In some scenarios you might want items within the same carousel to differ from each other.\n*   **Items width customisation:** For simple products, it might be fine to use multiple predefined sizes for carousel items. For more flexibility, it’s good to provide a way to define a custom width.\n*   **Touch events support:** Carousels should be scrollable on touch devices. Some of the best practices are to use native scrolling and to make sure you’re supporting the same behaviour for all touch devices, not just mobile phones.\n*   **Keyboard navigation:** It should be possible to scroll through content with keyboard arrows when focused on navigation controls.\n*   **Responsiveness:** It’s good practice to hide or reduce the size of navigation controls for mobile viewports to improve the visibility of the content.",
+    "links": []
+  },
+  "MtBSvKoyjdLd6DIdolLRi": {
+    "title": "Dropdown",
+    "description": "Dropdowns are used to display a contextual subview with a list of actions or content related to the area where the dropdown is.\n\n*   **Supports any type of content:** Dropdowns may be used in a lot of contexts like date pickers, language selection or other product features.\n*   **Action Menu:** One of the most used scenarios for dropdowns is providing an action menu for the user, so it’s useful to have this layout defined.\n*   **Focus Trapping:** Once the dropdown’s opened, the focus should work only for elements inside the dropdown. When it’s closed, the focus should move to the dropdown trigger.\n*   **Close Action:** Either some actions inside the dropdown should close it or there should be a separate close button. Also, it’s good practice to close the dropdown when a user clicks outside.\n*   **Keyboard Navigation:** It should be possible to navigate through dropdown children elements with the keyboard and close it with an Esc key.\n*   **Dynamic Position:** Dropdown content should be displayed based on the current position of the trigger element on the screen and always visible to the user.\n*   **Responsiveness:** Dropdown content should be adapted for mobile viewpoints as it may take a lot of space on desktops.",
+    "links": []
+  },
+  "bzY_iXRnotct_WnNRTlbd": {
+    "title": "Icon",
+    "description": "The icon component is a way to align the way iconography static assets are displayed in the product.\n\n*   **Sizes:** Icons should have a number of predefined sizes to provide a holistic experience across the product. Typography pairings may be used for these size values to ensure that they are aligned with the text sizes.\n*   **Colors:** Icons should be using values from the design system colour palette. Using parent element text colour for icon fill colour can make this automatic.",
+    "links": []
+  },
+  "F5_sxUnnGEdgF6BkA5T5x": {
+    "title": "Input Checkbox",
+    "description": "An input checkbox is a form element used for selecting one or multiple options.\n\n*   **Checked State:** Used when the checkbox is selected and will use its value for the form submission.\n*   **Disabled State:** Prevents checkbox interactions and removes its value from the form submission.\n*   **Intermediate State:** Used when the checkbox has children selectable elements and only some of them are selected.\n*   **Label:** There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection.\n*   **Error State:** The error state is used for form validation errors when the error is related to the checkbox field only. Always use a text error along with changing the colour of the field.\n*   **Keyboard State:** Checkbox selections should be triggered with the Space key. Using native elements for this should provide this kind of interaction out of the box.\n*   **Checkbox Group:** Checkboxes can be grouped to work with multiple values at the same time.",
+    "links": []
+  },
+  "rN-_plAA5FkcQl03wsL18": {
+    "title": "Input Radio",
+    "description": "An input radio is a form element used for selecting one option from a list.\n\n*   **Checked State:** Used when the radio is selected and will use its value for the form submission. A radio input can’t be unselected by pressing it again.\n*   **Disabled State:** Prevents radio interactions and removes its value from the form submission.\n*   **Label:** There should be a text label linked with the radio field. Clicking the label should also trigger the radio selection.\n*   **Error State:** The error state is used for form validation errors when the error is related to the radio field only. Always use a text error along with changing the colour of the field.\n*   **Keyboard State:** A radio selection should be triggered when the Space key is pressed. Using native elements for this should provide this kind of interaction out of the box.\n*   **Radio Group:** Radio inputs should always be used in a group. If one of them is selected, it can be deselected only by choosing another radio.",
+    "links": []
+  },
+  "NISeaJUlDtQ0kSuyxmrOT": {
+    "title": "Input Switch",
+    "description": "Input switches toggle the state of a single item. Compared to the input checkbox, their changes usually apply without any additional submission.\n\n*   **Checked State:** Used when an input switch is turned on. It’s better to provide an additional way to indicate the checked state besides changing its colour when applicable.\n*   **Disabled State:** Prevents interacting with an input switch.\n*   **Label:** There should be a text label linked with the switch field. Clicking the label should also trigger the input selection.\n*   **Keyboard State:** A switch selection should be triggered when the Space key is pressed.",
+    "links": []
+  },
+  "n1nUkMqGtPobZPJHCvPsk": {
+    "title": "Select",
+    "description": "Select lets user select a value from a list of values in a form context:\n\n*   **Disabled State:** Prevents input interactions and removes its value from the form submission.\n*   **Placeholder:** When there’s no value entered, show a placeholder with a potential value example. Don’t use placeholders as labels for the inputs.\n*   **Label:** There should be a text label linked with the text field. Clicking the label should move the focus to the field.\n*   **Error State:** The error state is used for form validation errors when the error is related to the text field only. Always use a text error along with changing the colour of the field.\n*   **Focused State:** The focused state should highlight the text field when users start to interact with it. There is always only one focused field in the form.\n*   **Autocomplete:** When applicable, adding support for the HTML autocomplete attribute will allow users to easily enter different data types.\n*   **Icon Support:** Icons are used to describe input methods, express a text field state or provide additional functionality.",
+    "links": []
+  },
+  "iusI39fxcu2rbMXiosaM6": {
+    "title": "Textarea",
+    "description": "Text area lets users enter and edit text.\n\n*   **Disabled State:** Prevents input interactions and removes its value from the form submission.\n*   **Placeholder:** When there’s no value entered, show a placeholder with a potential value example. Don’t use placeholders as labels for the inputs.\n*   **Label:** There should be a text label linked with the text field. Clicking the label should move the focus to the field.\n*   **Error State:** The error state is used for form validation errors when the error is related to the text field only. Always use a text error along with changing the colour of the field.\n*   **Focused State:** The focused state should highlight the text field when users start to interact with it. There is always only one focused field in the form.",
+    "links": []
+  },
+  "2T7tiM3Ew3H1U5iJR2TDb": {
+    "title": "List",
+    "description": "Lists define the layout of the page content or groups of elements stacking them vertically or horizontally.\n\n*   **Support any type of content:** Lists can be used in any context from page-level layout to managing offsets between granular components. hey should work with any component used inside.\n*   **Horizontal Stacking:** Lists can be used for inline elements and they have to manage how they’re stacked horizontally, including handling offsets between multiple rows of elements.\n*   **Divided Variant:** Lists with dividers are the best practice advised by many platform guidelines (especially on mobile).\n*   **Supports Actionable Content:** Sometimes lists are used for grouping tappable components, where the whole area of the list item should be clickable.",
+    "links": []
+  },
+  "JhnHOMIlU6mQcwvIpErUY": {
+    "title": "Loading Indicator",
+    "description": "The loading indicator shows that an operation’s being performed and how long the process will take.\n\n*   **Linear and non-linear Variants:** Depending on the context and the component it’s used for, the loading indicator can be represented either with linear or with a non-linear (e.g. circular) variant.\n*   **Determinate or indeterminate wait time:** In some cases, the wait time can’t be determined. The loading indicator should be shown until the loading finishes or an error happens. In other cases, it’s better to indicate how much time’s left until the loading is done.\n*   **Light Variant:** The loading indicator should respect its parent element background and provide a variant to be used on darker background colours.\n*   **Reduced Motion:** The loading indicator should be synced with the system motion settings and reduce its animation speed when reduced motion settings are turned on.",
+    "links": []
+  },
+  "IjNitkG25vNo30rB4ckNV": {
+    "title": "Modal",
+    "description": "Modals are containers appearing in front of the main content to provide critical information or an actionable piece of content.\n\n*   **Supports any type of Content:** Like any other container, modals can be used in different scenarios and you should be able to use it with any other component inside.\n*   **Supplementary Actions:** Since content in the modal may be actionable, it’s important to have an area for action elements. This area is usually located at the bottom of the modal container.\n*   **Close Action:** Modals should provide a clear way to be closed as they’re blocking content when open. This may be either a separate close button or one of the supplementary actions.\n*   **Information Structure:** Even though modals can be used as an empty container for the content, they need a defined information structure to provide a holistic experience. It may include defining how titles and subtitles look by default or where an action element’s area is.\n*   **Keyboard Navigation Support:** It should be possible to close a modal by pressing the Esc key and all the focusable elements inside the modal container should be accessible with keyboard navigation.\n*   **Focus Trapping:** Once a modal is opened, the focus should be moved to the first element inside the modal and should be looped within the modal container. Closing the modal should return the focus to the last focused element on the page.",
+    "links": []
+  },
+  "1vYR1EMyZhJA-znxnFBBb": {
+    "title": "Tabs",
+    "description": "Tabs organise navigation between multiple pages or content sections.\n\n*   **Active Button State:** There should be a clear differentiation between selected and unselected tab buttons.\n*   **Button Icon Support:** Icons help show the purpose of the tab buttons when used next to its label.\n*   **Equally-sized tab buttons:** Tabs can be used in a relatively small-sized container where you need to switch between a definite number of sections. For such scenarios, it’s better to support a variant where the button’s area is divided equally.\n*   **Keyboard Navigation:** All tab buttons should be focusable and navigation between the tab’s component should be accessible from the keyboard.\n*   **Responsiveness:** If all tabs on mobile don’t fit into the viewport, users should still have access to all tab buttons. Ways to solve this can be making the button area scrollable for mobile or showing a More button containing a dropdown with the rest of the buttons.",
+    "links": []
+  },
+  "-T7uL6a3lJ5-IIcDaG6IN": {
+    "title": "Toast",
+    "description": "Toasts provide short meaningful feedback messages about the action results.\n\n*   **Dismissed Automatically:** Toast messages shouldn’t interrupt the user flow, block the screen for a long time or require additional action from the user.\n*   **Action Support:** Besides displaying the message, toasts may also provide an action related to the message like undoing an action.\n*   **Handles Multiple Instances:** Even though it doesn’t happen often, toasts can be called from multiple sources at the same time and all resulting toasts should be queued. It’s good practice not to show all the messages at the same time.\n*   **Accessibility:** Toast messages should be announced by the voice assistive technology and their action should be easily accessible from the keyboard.\n*   **Responsivenss:** Toasts should be aligned with the mobile viewport and their action should be easily reachable for tapping.",
+    "links": []
+  },
+  "2oCAzsk_y2Y2oHUi467dp": {
+    "title": "Tooltip",
+    "description": "Tooltips are desktop-only components that display additional information when hovering over or focusing on an element.\n\n*   **Keyboard Hover Support:** Tooltips should be accessible when an element is focused using the keyboard.\n*   **Dynamic Positioning:** Tooltip content should be displayed based on the current position of the trigger element on the screen and always visible to the user.\n*   **Hover Timeout:** Having a small timeout before triggering a tooltip will help to prevent occasionally showing tooltips while users move their mouse cursor.\n*   **Light Variant:** The tooltip should respect its parent element background and provide a variant to be used on darker background colours.\n*   **Instant Transition for Element Groups:** If there’s a group of elements using tooltips, hovering over another element while a tooltip’s already active shouldn’t trigger the animation.",
+    "links": []
+  },
+  "jggrr5nZOe6FY3ZrZJTOw": {
+    "title": "Tooling",
+    "description": "Design system tooling encompasses technical infrastructure and workflows. Effective tooling should integrate with design tools, provide component libraries for frameworks, implement token management, utilize documentation platforms, establish automated versioning, create testing infrastructure, and enable collaboration workflows.",
+    "links": []
+  },
+  "ccpT9MPFbc3Ewjm1tFMsZ": {
+    "title": "Design Editor",
+    "description": "There are many design editors available in the market today with the most popular names being Sketch, Figma and Adobe XD. If you're unsure which route to go down it's often best to speak with your team.",
+    "links": []
+  },
+  "uO-2O0Jwh_DxrMAB9wxp1": {
+    "title": "Plugins",
+    "description": "Most popular Design Editors (Sketch and Figma, especially) come with third-party plugin support. Whilst it's best to use the editors in-built tools for laying out your components, plugins can bring in a range of useful data to populate them.",
+    "links": []
+  },
+  "CYY6nbQiC2pu5ATWmO6wA": {
+    "title": "Version Control",
+    "description": "Having your design versioned with semantic versioning will allow you to easily align design with development, roll back faulty changes and release changes in code and design at the same time.",
+    "links": []
+  },
+  "TiCNCRpMPgZUhn7JdaIZA": {
+    "title": "Contribution Guidelines",
+    "description": "Define the process of contributing to the UI and UX of the design system and document it in a discoverable place to make it easier for everyone to contribute.",
+    "links": []
+  },
+  "VeLiPzbGr22_Mh_8T2Gnf": {
+    "title": "Component Catalog",
+    "description": "Isolate your UI components’ environment outside of your product codebase to make sure they’re not dependent on any global dependencies and can be easily reused.",
+    "links": []
+  },
+  "k1Lwk_b6cLIeyQwc4RUh1": {
+    "title": "Documentation",
+    "description": "Having your code documented is key to driving adoption and reducing the load on the contributors.",
+    "links": []
+  },
+  "zEqFAuH9zmKTLwwgx54pW": {
+    "title": "Code Style",
+    "description": "Having a defined code style helps align the way code’s written in the system and increases development velocity. It should be automated with the tools provided for each platform.",
+    "links": []
+  },
+  "y8No8I0MltA91j4Q2toT0": {
+    "title": "Unit Testing",
+    "description": "Every part of the design system should be covered with unit tests. Once your system’s adopted, any change in the isolated environment may affect how the product works.",
+    "links": []
+  },
+  "yhP8EhyCWWRBLkYPyOFeg": {
+    "title": "Accessibility Testing",
+    "description": "Design systems should cover accessibility as much as possible. Making this automatic reduces the risk of inaccessible components or user flows in the product.",
+    "links": []
+  },
+  "ZLt1yJqinC8OSpqucC2dV": {
+    "title": "Semantic Versioning",
+    "description": "Version your code with semantic versioning that dictates how version numbers are assigned and incremented.",
+    "links": []
+  },
+  "CfWCQNaCJGL-egRhFhc4B": {
+    "title": "Release Strategy",
+    "description": "Design system releases should be automated and ideally use scripts ran locally or in remote CI pipelines to prevent broken releases.",
+    "links": []
+  },
+  "IVYe8oh1IWbUbxMZRxVQA": {
+    "title": "Commit Guidelines",
+    "description": "Automate the generation of your changelog by adopting a commit message guidelines that categorise and define the changes being made.",
+    "links": []
+  },
+  "wd9ZHZmqV7wbLN-9V4EQy": {
+    "title": "PR Templates",
+    "description": "Create pull request templates that outline the change being proposed to facilitate productive discussions.",
+    "links": []
+  },
+  "xJ1LAAhiZvbZOLRVc1HZa": {
+    "title": "Contribution Guidelines",
+    "description": "Define the process of contributing to the code of the design system. Document everything in a discoverable place to make it easier for everyone to contribute.",
+    "links": []
+  },
+  "JfXwzkN29UGz17FYHHE3A": {
+    "title": "Project Management",
+    "description": "Design systems are no different than any other project your team might take on. In order to successfully build and maintain one, you need a clear strategy that’s well executed daily, and you‘ll need to create opportunities for your colleagues to give feedback to help share your design system together.",
+    "links": []
+  },
+  "gMrX5600JqFDplriq-eU3": {
+    "title": "Roadmap",
+    "description": "Setting your short and long term vision and mapping things out helps you decide the steps to take, understand your place in the bigger picture and prioritise day-to-day tasks.",
+    "links": []
+  },
+  "ruPXxVwmD9vSlS7rBZmA-": {
+    "title": "Milestones",
+    "description": "Define milestones that act as bigger epics in your project management with the help of your roadmap. These will help you understand your progress.",
+    "links": []
+  },
+  "i39J0fk4DaPeNFIMbH0ap": {
+    "title": "Ticketing",
+    "description": "Make it easier to track your day-to-day progress by using ticketing software like Jira, Trello or GitHub. This’ll make it easier for others to submit feature proposals or bug reports.",
+    "links": []
+  },
+  "G8dOkM_4hP7wPF3QJ8y4g": {
+    "title": "Component Analytics",
+    "description": "Track the usage of your components. For development you can use built-in tools like Figma’s Design System Analytics. For the end product you can have a separate way of tracking per platform depending on the technology.",
+    "links": []
+  },
+  "xYqDmDpjwkShtL86nt-vY": {
+    "title": "Logging",
+    "description": "Implement a way to track and pinpoint component-related outages in your product.",
+    "links": []
+  },
+  "qiJGYYWL4naJX-MgZA9Ms": {
+    "title": "Tooling Analytics",
+    "description": "Track what tools are being used for your design system. Find out which ones are used the most and which features are the most popular.",
+    "links": []
+  },
+  "5znnOkpf9G9tdiMWB6Rut": {
+    "title": "Service and Health Metrics",
+    "description": "Define service and health metrics for your design system to set a benchmark on how well you’re doing. Common examples can be the number of tickets closed, improvements made or bugs fixed.",
+    "links": []
+  },
+  "eG8ranXuINtcqWfeMH5GW": {
+    "title": "Community Meetings",
+    "description": "Arrange community meetings with everyone who uses the design system. Share your knowledge and make proposals to improve the sense of community.",
+    "links": []
+  },
+  "LWrrKrhwXfMDKgbFW5DuO": {
+    "title": "Communication Channel",
+    "description": "Most product development work happens digitally, so create a digital channel where people can reach out and ask questions.",
+    "links": []
+  },
+  "YWoPoO9IW3vLZyxLL2fnT": {
+    "title": "Open Hours",
+    "description": "Create open hours in which you can engage your audience in a more private setting where you can discuss things in more detail. You can also use these as peer coding or peer design opportunities.",
+    "links": []
+  },
+  "cpAeotBxN8BCsU9RqTEue": {
+    "title": "FAQs",
+    "description": "To save everyone time, define which questions are asked frequently by your audience and document them in a discoverable place.",
+    "links": []
+  }
+}

public/roadmap-content/devops.json

@@ -168,21 +168,11 @@
         "url": "https://roadmap.sh/javascript",
         "type": "article"
       },
-      {
-        "title": "W3Schools – JavaScript Tutorial",
-        "url": "https://www.w3schools.com/js/",
-        "type": "article"
-      },
       {
         "title": "The Modern JavaScript Tutorial",
         "url": "https://javascript.info/",
         "type": "article"
       },
-      {
-        "title": "What is NPM?",
-        "url": "https://www.w3schools.com/nodejs/nodejs_npm.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about JavaScript",
         "url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
@@ -770,11 +760,6 @@
         "url": "https://bitbucket.org/product/guides/getting-started/overview",
         "type": "article"
       },
-      {
-        "title": "Git and Bitbucket Introduction",
-        "url": "https://www.w3schools.com/git/git_intro.asp?remote=bitbucket",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Bitbucket",
         "url": "https://app.daily.dev/tags/bitbucket?ref=roadmapsh",

public/roadmap-content/frontend.json

@@ -175,11 +175,6 @@
         "url": "https://www.freecodecamp.org/learn/2022/responsive-web-design/",
         "type": "course"
       },
-      {
-        "title": "W3Schools: Learn HTML",
-        "url": "https://www.w3schools.com/html/html_intro.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about HTML",
         "url": "https://app.daily.dev/tags/html?ref=roadmapsh",
@@ -201,11 +196,6 @@
     "title": "Learn the basics",
     "description": "HTML (HyperText Markup Language) is the backbone of webpages. It structures the content you see online. You use CSS to style this HTML structure and JavaScript to make it interactive. Think of HTML as the skeleton of a website.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools: Learn HTML",
-        "url": "https://www.w3schools.com/html/html_intro.asp",
-        "type": "article"
-      },
       {
         "title": "web.dev: Learn HTML",
         "url": "https://web.dev/learn/html",
@@ -227,11 +217,6 @@
         "url": "https://cs.fyi/guide/writing-semantic-html",
         "type": "article"
       },
-      {
-        "title": "W3Schools: Semantic HTML",
-        "url": "https://www.w3schools.com/html/html5_semantic_elements.asp",
-        "type": "article"
-      },
       {
         "title": "Semantic HTML - web.dev",
         "url": "https://web.dev/learn/html/semantic-html/",
@@ -257,11 +242,6 @@
         "title": "Learn Forms by web.dev",
         "url": "https://web.dev/learn/forms/",
         "type": "article"
-      },
-      {
-        "title": "W3Schools: JavaScript Form Validation",
-        "url": "https://www.w3schools.com/js/js_validation.asp",
-        "type": "article"
       }
     ]
   },
@@ -347,11 +327,6 @@
     "title": "Learn the basics",
     "description": "CSS (Cascading Style Sheets) is the language for styling websites. It makes the frontend look good. Along with HTML and JavaScript, CSS is a key part of the World Wide Web. It controls colors, fonts, layout, and more to visually design webpages.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools — Learn CSS",
-        "url": "https://www.w3schools.com/css/",
-        "type": "article"
-      },
       {
         "title": "web.dev — Learn CSS",
         "url": "https://web.dev/learn/css/",
@@ -508,11 +483,6 @@
     "title": "Learn the Basics",
     "description": "JavaScript makes webpages interactive. Think of sliders, what happens when you click something, or pop-up messages – that's often JavaScript at work. It adds dynamic behavior to the static structure created by HTML and styled by CSS.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools – JavaScript Tutorial",
-        "url": "https://www.w3schools.com/js/",
-        "type": "article"
-      },
       {
         "title": "The Modern JavaScript Tutorial",
         "url": "https://javascript.info/",
@@ -1737,11 +1707,6 @@
         "url": "https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots",
         "type": "article"
       },
-      {
-        "title": "HTML Template Tag",
-        "url": "https://www.w3schools.com/tags/tag_template.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about HTML",
         "url": "https://app.daily.dev/tags/html?ref=roadmapsh",

public/roadmap-content/full-stack.json

@@ -3,11 +3,6 @@
     "title": "HTML",
     "description": "HTML stands for HyperText Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools: Learn HTML",
-        "url": "https://www.w3schools.com/html/html_intro.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about HTML",
         "url": "https://app.daily.dev/tags/html?ref=roadmapsh",
@@ -29,11 +24,6 @@
     "title": "CSS",
     "description": "CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools — Learn CSS",
-        "url": "https://www.w3schools.com/css/",
-        "type": "article"
-      },
       {
         "title": "Web.dev by Google — Learn CSS",
         "url": "https://web.dev/learn/css/",
@@ -326,11 +316,6 @@
         "url": "https://nodejs.org/en/learn/getting-started/introduction-to-nodejs",
         "type": "article"
       },
-      {
-        "title": "Node.JS Introduction",
-        "url": "https://www.w3schools.com/nodejs/nodejs_intro.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Node.js",
         "url": "https://app.daily.dev/tags/nodejs?ref=roadmapsh",

public/roadmap-content/graphql.json

@@ -0,0 +1,845 @@
+{
+  "JfXwzkN29UGz17FYHHE3A": {
+    "title": "Introduction",
+    "description": "GraphQL is a query language and runtime for APIs that enables clients to request exactly the data they need in a single call. It provides a predictable format, reducing multiple API calls and eliminating over-fetching, making data retrieval more efficient than traditional REST APIs.\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "Introduction to GraphQL",
+        "url": "https://graphql.org/learn/",
+        "type": "article"
+      },
+      {
+        "title": "Getting started with GraphQL",
+        "url": "https://graphql.org/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about GraphQL",
+        "url": "https://app.daily.dev/tags/graphql?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "cMfsRtvzvDZZJ0TqeUOxm": {
+    "title": "What is GraphQL",
+    "description": "GraphQL is a query language for APIs and server-side runtime that lets clients request exactly the data they need. Unlike REST, it uses a type system to define data structure and allows fetching multiple resources in a single request, reducing over-fetching and under-fetching problems.\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "Introduction to graphQL",
+        "url": "https://graphql.org/learn/",
+        "type": "article"
+      },
+      {
+        "title": "Tutorial - What is graphQL?",
+        "url": "https://www.howtographql.com/basics/0-introduction/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about GraphQL",
+        "url": "https://app.daily.dev/tags/graphql?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "2rlmLn_yQQV-7DpX1qT98": {
+    "title": "Problems GraphQL Solves",
+    "description": "GraphQL solves major API problems including over-fetching (getting unnecessary data), under-fetching (multiple requests needed), inefficient versioning, and lack of flexibility. It enables precise data requests, single queries for multiple resources, seamless versioning through schema evolution, and microservice communication through federation.",
+    "links": []
+  },
+  "J5mU0v491qrm-mr1W3Msd": {
+    "title": "Thinking in Graphs",
+    "description": "\"Thinking in Graphs\" is a GraphQL mindset where data is organized as a graph with nodes (objects) and edges (relationships). This approach allows flexible and intuitive querying by following relationships between connected data points, making complex data retrieval more natural and efficient.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL - Thinking in Graphs",
+        "url": "https://graphql.org/learn/thinking-in-graphs/",
+        "type": "article"
+      }
+    ]
+  },
+  "W_Lg8086ZhrIqtck1sgnb": {
+    "title": "GraphQL Queries",
+    "description": "GraphQL queries are client requests to retrieve specific data from a server. They specify exactly which fields should be returned, using a hierarchical structure that matches the data requirements. Queries are written in GraphQL syntax and executed by the server to fetch the requested data.\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "What are GraphQL Queries?",
+        "url": "https://graphql.org/learn/queries/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about GraphQL",
+        "url": "https://app.daily.dev/tags/graphql?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "6r9XbwlBtHmJrhviG2cTD": {
+    "title": "GraphQL on Frontend",
+    "description": "GraphQL on the frontend enables efficient data fetching with clients like Apollo, URQL, or Relay. It provides declarative data requirements, intelligent caching, real-time subscriptions, and type safety, allowing frontend applications to request exactly the data they need in a single query.\n\nLearn more from following links:",
+    "links": [
+      {
+        "title": "Get started with GraphQL on the frontend",
+        "url": "https://www.howtographql.com/react-apollo/0-introduction/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Frontend Development",
+        "url": "https://app.daily.dev/tags/frontend?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "ODQ8zrHc2rsc8PN-APKvz": {
+    "title": "GraphQL on Backend",
+    "description": "GraphQL on the backend involves implementing servers that execute GraphQL queries, mutations, and subscriptions. It includes defining schemas, writing resolvers, handling data sources, implementing authentication/authorization, and optimizing performance through caching and batching strategies.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "How to use GraphQL in Backend?",
+        "url": "https://www.howtographql.com/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Backend Development",
+        "url": "https://app.daily.dev/tags/backend?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "2SU4dcaz7zwGsF7g8FjmI": {
+    "title": "What are Queries?",
+    "description": "In GraphQL, queries are client requests to retrieve data from the server. They're structured as hierarchical trees of fields that correspond to the properties of the requested data, allowing clients to specify exactly what data they need in a predictable format.\n\nLearn more from following links:",
+    "links": [
+      {
+        "title": "Introduction of GraphQL - Query",
+        "url": "https://graphql.org/learn/queries/",
+        "type": "article"
+      }
+    ]
+  },
+  "Pc9H7AcoqJQkWnuhbytyD": {
+    "title": "Fields",
+    "description": "Fields in GraphQL are individual pieces of data that can be queried or modified, representing properties of the requested data. They're defined in the GraphQL schema and serve as building blocks for queries and mutations, specifying what data is available for each type.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL: Types and Fields",
+        "url": "https://graphql.org/learn/queries/#fields",
+        "type": "article"
+      }
+    ]
+  },
+  "B77yLU4SuRChSjEbmYwc-": {
+    "title": "Aliases",
+    "description": "Aliases in GraphQL rename fields in query responses, useful when requesting the same field multiple times with different arguments or when field names aren't suitable for client usage. They distinguish fields in responses and improve query readability and usability.\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "What are GraphQL Aliases?",
+        "url": "https://graphql.org/learn/queries/#aliases",
+        "type": "article"
+      }
+    ]
+  },
+  "hrpb108R8Gyu3hhzkMYzL": {
+    "title": "Arguments",
+    "description": "Arguments in GraphQL are values passed to fields or directives to specify execution details like filtering, sorting, pagination, or configuration options. They're passed as key-value pairs, can be defined as variables, and may be optional or required depending on the field definition.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL - Arguments",
+        "url": "https://graphql.org/learn/queries/#arguments",
+        "type": "article"
+      }
+    ]
+  },
+  "MnmwccPahqPCzOhqjfbsY": {
+    "title": "Directives",
+    "description": "Directives in GraphQL modify query execution by adding behavior or validation to fields, operations, and fragments. They can take arguments to configure behavior and include built-in directives like @include and @skip, or custom ones defined by developers for specific functionality.\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "Directives in GraphQL",
+        "url": "https://graphql.org/learn/queries/#directives",
+        "type": "article"
+      }
+    ]
+  },
+  "YZaFEK547FYricfOuANvH": {
+    "title": "Variables",
+    "description": "Variables in GraphQL pass dynamic values to queries and mutations, making them flexible and reusable. Defined with the $ symbol and a type, their values are passed in a separate JSON object. Variables are type-safe, ensuring values match the defined types.\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "GraphQL Variables",
+        "url": "https://dgraph.io/docs/graphql/api/variables/",
+        "type": "article"
+      },
+      {
+        "title": "Intro to Variables in GraphQL",
+        "url": "https://graphql.org/learn/queries/#variables",
+        "type": "article"
+      }
+    ]
+  },
+  "CehwjrCG_wbUU-TFNCuJn": {
+    "title": "Fragments",
+    "description": "Fragments in GraphQL are reusable pieces of queries that retrieve specific fields from one or more types. Defined with the \"fragment\" keyword, they promote code reuse, reduce duplication, and make complex queries more maintainable by separating common field selections.\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "Intro to Fragments in GraphQL",
+        "url": "https://graphql.org/learn/queries/#fragments",
+        "type": "article"
+      }
+    ]
+  },
+  "jy_91mhFWbpR6sYVbuX1x": {
+    "title": "Mutations",
+    "description": "Mutations in GraphQL are used to modify data on the server, including creating, updating, or deleting records. They're structured like queries but use the \"mutation\" field at the top level and include fields specifying the data to be changed and the operation type.\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "Getting started with Mutations",
+        "url": "https://graphql.org/learn/queries/#mutations",
+        "type": "article"
+      }
+    ]
+  },
+  "9Q2pGidY-rfkltHq3vChp": {
+    "title": "What are Mutations?",
+    "description": "Mutations in GraphQL are operations used to modify data on the server - creating, updating, or deleting records. They're structured like queries but use the \"mutation\" field at the top level and include fields specifying the data to be changed and the operation type.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Get started with Mutations",
+        "url": "https://graphql.org/learn/mutations/",
+        "type": "article"
+      }
+    ]
+  },
+  "AySlY8AyI6jE-cy-qKKOU": {
+    "title": "Multiple Fields in Mutation",
+    "description": "GraphQL allows multiple mutations in a single query by including multiple mutation fields, called batching or chaining mutations. This enables performing several data modifications atomically, improving efficiency and ensuring consistent state changes across related operations.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Guide to Multiple fields in mutations",
+        "url": "https://graphql.org/learn/queries/#multiple-fields-in-mutations",
+        "type": "article"
+      }
+    ]
+  },
+  "q9TYEygvUyHourdZIvk8G": {
+    "title": "Operation Name",
+    "description": "Operation names are optional identifiers for GraphQL queries and mutations that help uniquely identify operations in documents with multiple operations. They provide meaningful names for operations, improve debugging, and make error identification easier in complex applications.\n\nLearn more from the following resources:",
+    "links": [
+      {
+        "title": "Intro to Operation Name",
+        "url": "https://graphql.org/learn/queries/#operation-name",
+        "type": "article"
+      }
+    ]
+  },
+  "IbEqXlGjsyNLKE9dZrPPk": {
+    "title": "Subscriptions",
+    "description": "Subscriptions in GraphQL enable real-time updates by allowing clients to subscribe to specific events or data changes on the server. The server maintains an open connection and pushes updates to subscribed clients as soon as events occur or data changes.\n\nLearn more from following links:",
+    "links": [
+      {
+        "title": "Subscriptions and Live Queries - Real Time with GraphQL",
+        "url": "https://the-guild.dev/blog/subscriptions-and-live-queries-real-time-with-graphql",
+        "type": "article"
+      }
+    ]
+  },
+  "RlBc-hWEUOPaEQLTgJa-K": {
+    "title": "What are Subscriptions",
+    "description": "Subscriptions in GraphQL enable real-time updates by allowing clients to subscribe to specific events or data changes on the server. They're structured like queries with a \"subscription\" field at the top level and push updates to clients as soon as events occur.\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "How GraphQL Subscriptions Work?",
+        "url": "https://the-guild.dev/blog/subscriptions-and-live-queries-real-time-with-graphql",
+        "type": "article"
+      }
+    ]
+  },
+  "kJMyRhasBKfBypent3GxK": {
+    "title": "Event Based Subscriptions",
+    "description": "Event-based subscriptions in GraphQL provide real-time updates by subscribing to specific events or data changes. Clients maintain persistent connections through WebSockets to receive live updates when subscribed events occur, enabling reactive applications with real-time functionality.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL Subscriptions",
+        "url": "https://the-guild.dev/blog/subscriptions-and-live-queries-real-time-with-graphql",
+        "type": "article"
+      },
+      {
+        "title": "GraphQL Subscriptions Documentation",
+        "url": "https://graphql.org/blog/subscriptions-in-graphql-and-relay/",
+        "type": "article"
+      }
+    ]
+  },
+  "CHdzww8_TNfeM6Bp1oTPI": {
+    "title": "Live Queries",
+    "description": "Live Queries automatically update query results when underlying data changes, providing real-time synchronization without manual subscription management. This advanced feature simplifies building reactive applications by maintaining fresh data automatically, though it requires specialized GraphQL implementations.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL Live Queries",
+        "url": "https://the-guild.dev/blog/collecting-graphql-live-query-resource-identifier-with-graphql-tools",
+        "type": "article"
+      }
+    ]
+  },
+  "t6XxFB_lx27kS4FE2_GMH": {
+    "title": "@defer / @stream directives",
+    "description": "Defer and Stream directives are experimental GraphQL features for incremental data delivery. @defer postpones non-critical fields to improve initial response times, while @stream sends list items progressively, enabling better user experiences with large datasets and slow-loading fields.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Defer and Stream in GraphQL",
+        "url": "https://the-guild.dev/graphql/yoga-server/docs/features/defer-stream",
+        "type": "article"
+      }
+    ]
+  },
+  "lj1WEh4WbfBsoZFYsi1Yz": {
+    "title": "Schema",
+    "description": "A GraphQL schema defines the structure and capabilities of a GraphQL API using Schema Definition Language (SDL). It specifies types, fields, arguments, relationships, and root operations (Query, Mutation, Subscription) that serve as entry points, acting as a contract between client and server.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What is Schema?",
+        "url": "https://graphql.org/learn/schema/",
+        "type": "article"
+      }
+    ]
+  },
+  "jpu0_FAlxtD-H80mPcod5": {
+    "title": "Type System",
+    "description": "GraphQL is strongly typed with a type system that defines data types available in applications. It includes Scalar, Object, Query, Mutation, and Enum types. The type system defines the schema, acting as a contract between client and server for predictable API interactions.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get started with Type system",
+        "url": "https://graphql.org/learn/schema/#type-system",
+        "type": "article"
+      }
+    ]
+  },
+  "HPdntdgTar1T34CZX8Y6y": {
+    "title": "Fields",
+    "description": "Fields in GraphQL are units of data that can be queried or manipulated. Each field has a name, type, and optional description, and can return scalar values or objects, enabling complex nested data structures and taking arguments for filtering.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL: Types and Fields",
+        "url": "https://graphql.org/learn/queries/#fields",
+        "type": "article"
+      }
+    ]
+  },
+  "U-tLelmNQtR-pUq-sxU_2": {
+    "title": "Scalars",
+    "description": "Scalars are \"leaf\" values in GraphQL representing primitive data types. Built-in scalars include String, Int, Float, Boolean, and ID for unique identifiers. Custom scalars can be defined for specific needs like dates, JSON, or large integers, extending the type system beyond basic primitives.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get started with Scalars in GraphQL",
+        "url": "https://graphql.org/learn/schema/#scalar-types",
+        "type": "article"
+      }
+    ]
+  },
+  "wfOsfb0zSAIdNkwFHfBcw": {
+    "title": "Enums",
+    "description": "Enums (enumeration types) are special scalars restricted to a particular set of allowed values. They validate arguments against allowed values and communicate through the type system that fields will always be one of a finite set of predefined options.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "What are Enums?",
+        "url": "https://graphql.org/learn/schema/#enumeration-types",
+        "type": "article"
+      }
+    ]
+  },
+  "tc_rjJZrr2x3bp8mcoQ0F": {
+    "title": "Interfaces",
+    "description": "Interfaces in GraphQL define a set of fields that implementing types must include. They enable polymorphism by allowing common field querying across different types that implement the same interface, promoting code reuse and consistent API design.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get started with Interfaces",
+        "url": "https://graphql.org/learn/schema/#interfaces",
+        "type": "article"
+      }
+    ]
+  },
+  "d2ikbo4sZq7PmaCi5znkd": {
+    "title": "Lists",
+    "description": "Lists in GraphQL represent ordered collections of items, defined using square brackets around the item type. They can contain scalars, objects, or other lists, enabling complex nested data structures and array-based field returns in schemas.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get started with Lists",
+        "url": "https://graphql.org/learn/schema/#lists-and-non-null",
+        "type": "article"
+      }
+    ]
+  },
+  "LX9vZpx7yKlf0iR6AtBWz": {
+    "title": "Objects",
+    "description": "Objects in GraphQL are types that represent groups of fields, defining the structure of queries and mutations. Each field can return scalar values or other objects, enabling complex nested data structures. Objects are defined using the \"type\" keyword followed by the name and field definitions.\n\nTo learn more, visit the following:",
+    "links": [
+      {
+        "title": "Object Types and Fields",
+        "url": "https://graphql.org/learn/schema/#object-types-and-fields",
+        "type": "article"
+      },
+      {
+        "title": "Object Types",
+        "url": "https://graphql.org/graphql-js/object-types/",
+        "type": "article"
+      }
+    ]
+  },
+  "59COH3rerJJzKr6vrj4bF": {
+    "title": "Unions",
+    "description": "Unions allow fields to return multiple types, enabling different handling for various types in clients. They provide schema flexibility by grouping types together, though they don't allow common field querying across types like interfaces do.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get started with Union in GraphQL",
+        "url": "https://graphql.org/learn/schema/#union-types",
+        "type": "article"
+      }
+    ]
+  },
+  "A54vi3Ao7fBHyTuqoH_it": {
+    "title": "Arguments",
+    "description": "Arguments in GraphQL are values passed to fields in queries and mutations to filter or modify returned data. They're defined in the schema with a name, type, and optional default value, enabling dynamic data retrieval.\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "Get started with Arguments in GraphQL",
+        "url": "https://graphql.org/learn/schema/#arguments",
+        "type": "article"
+      }
+    ]
+  },
+  "iYkHCKTsjtvo40f3eZoet": {
+    "title": "Validation",
+    "description": "Validation in GraphQL ensures queries and mutations conform to schema rules and constraints. It checks for required fields, correct argument types, and value ranges before execution, preventing invalid operations and improving API reliability.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get Started with Validation in GraphQL",
+        "url": "https://graphql.org/learn/validation/",
+        "type": "article"
+      }
+    ]
+  },
+  "72wGg6yP8WnEdmkeKL9vh": {
+    "title": "Execution",
+    "description": "Execution in GraphQL is the process of running queries or mutations and returning results to clients. The GraphQL engine performs parsing, validation, and data retrieval steps to produce the final response, coordinating resolver functions to fetch data from various sources.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get Started with Execution in GraphQL",
+        "url": "https://graphql.org/learn/execution/",
+        "type": "article"
+      },
+      {
+        "title": "Intro to Execution",
+        "url": "https://graphql.org/graphql-js/execution/",
+        "type": "article"
+      }
+    ]
+  },
+  "AlJlHZD3_SPoLNaqdM-pB": {
+    "title": "Root Fields",
+    "description": "Root fields are the top-level fields available to clients in GraphQL queries and mutations. They serve as entry points for client requests, with Query fields for retrieving data and Mutation fields for modifying data on the server.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get Started with Root Feilds",
+        "url": "https://graphql.org/learn/execution/#root-fields-resolvers",
+        "type": "article"
+      }
+    ]
+  },
+  "VDur5xYBC0LJtQgDrSEyj": {
+    "title": "Resolvers",
+    "description": "Resolvers are functions responsible for fetching data for each field in GraphQL queries and mutations. Defined in the schema and executed by the GraphQL server, they retrieve data from databases, APIs, or other sources and return it to clients.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Guide to Resolver",
+        "url": "https://the-guild.dev/blog/better-type-safety-for-resolvers-with-graphql-codegen",
+        "type": "article"
+      }
+    ]
+  },
+  "uPpsj2kCdgKsJpmTaw86u": {
+    "title": "Synchronous",
+    "description": "Synchronous resolvers in GraphQL execute immediately and return their results directly without waiting for external operations. They complete their execution before returning any value, making them simpler but potentially blocking if they perform complex computations.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL Execution",
+        "url": "https://graphql.org/learn/execution/",
+        "type": "article"
+      },
+      {
+        "title": "Understanding Resolvers",
+        "url": "https://www.apollographql.com/docs/apollo-server/data/resolvers/",
+        "type": "article"
+      }
+    ]
+  },
+  "tbDvQBtLRAcD-xYX9V7Va": {
+    "title": "Asynchronous",
+    "description": "Asynchronous resolvers in GraphQL are functions that return promises instead of immediate values. They allow resolvers to wait for external operations like database queries or API calls to complete before returning results, enabling non-blocking execution.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get Started with Asynchronous",
+        "url": "https://graphql.org/learn/execution/#asynchronous-resolvers",
+        "type": "article"
+      }
+    ]
+  },
+  "QFUOmJlPkkjpcl1vJxg9h": {
+    "title": "Scalar Coercion",
+    "description": "Scalar coercion in GraphQL converts input values from one type to another when they don't match the expected type but can be successfully converted. This process is implemented using custom scalar types with coerce functions that handle the type conversion.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get started with Scalar coercion",
+        "url": "https://graphql.org/learn/execution/#scalar-coercion",
+        "type": "article"
+      }
+    ]
+  },
+  "sJ1_c3e08aehiqNMbIEEP": {
+    "title": "Lists",
+    "description": "Lists in GraphQL represent ordered collections of items and can be used as return types for fields. They can contain any type of items including scalars and objects, with resolver functions typically returning data as arrays from databases or APIs.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get started with Lists and Non-Null",
+        "url": "https://graphql.org/learn/schema/#lists-and-non-null",
+        "type": "article"
+      }
+    ]
+  },
+  "I4wNBXV4xEZ0LWBhv5FwF": {
+    "title": "Validation",
+    "description": "Validation in GraphQL ensures queries and mutations adhere to schema rules by verifying field access, type correctness, and input constraints. GraphQL servers validate all incoming operations before execution, returning errors for invalid queries with specific details about violations.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get Started with Validation in GraphQL",
+        "url": "https://graphql.org/learn/validation/",
+        "type": "article"
+      }
+    ]
+  },
+  "zQHifboRreE4OgJ7GnUlp": {
+    "title": "Producing the Result",
+    "description": "Producing the result in GraphQL involves generating the final response to queries and mutations. This process includes parsing the request, validating against the schema, executing resolvers to fetch data, and formatting the response according to the query requirements.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get Started with GraphQL",
+        "url": "https://graphql.org/learn/",
+        "type": "article"
+      }
+    ]
+  },
+  "inhjhH-7xJyX8o4DQqErF": {
+    "title": "Serving over Internet",
+    "description": "Serving GraphQL over the internet involves making a GraphQL server accessible to clients through a public IP address or domain name. This can be done using reverse proxies, cloud services, or serverless functions to expose the GraphQL endpoint publicly.\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "Introduction to Serving over HTTPs",
+        "url": "https://graphql.org/learn/serving-over-http/",
+        "type": "article"
+      }
+    ]
+  },
+  "V3bgswBFr1xames3F8S_V": {
+    "title": "GraphQL Over HTTP Spec",
+    "description": "The GraphQL over HTTP specification defines standard practices for serving GraphQL over HTTP, including request/response formats, status codes, and content types. It ensures interoperability between different GraphQL implementations and provides guidance for consistent API behavior across platforms.",
+    "links": []
+  },
+  "UYwuUVTeurwODV4_Kdt_W": {
+    "title": "Caching",
+    "description": "Caching in GraphQL improves performance by storing query results for reuse. Strategies include HTTP caching, response caching, dataloader for batching requests, and normalized caching at the client level to reduce redundant API calls and improve user experience.\n\nThere are several types of caching that can be used in GraphQL:\n\n*   Client-side caching\n*   Server-side caching\n*   CDN caching\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get started with Caching",
+        "url": "https://graphql.org/learn/caching/",
+        "type": "article"
+      }
+    ]
+  },
+  "v9gVexHfDkpG9z3NL5S-9": {
+    "title": "Batching",
+    "description": "Batching in GraphQL combines multiple queries into a single request to reduce network overhead and improve performance. DataLoader is a common pattern that batches and caches database requests, preventing N+1 query problems and optimizing data fetching efficiency.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "DataLoader",
+        "url": "https://github.com/graphql/dataloader",
+        "type": "opensource"
+      },
+      {
+        "title": "Solving the N+1 Problem",
+        "url": "https://shopify.engineering/solving-the-n-1-problem-for-graphql-through-batching",
+        "type": "article"
+      }
+    ]
+  },
+  "i-zcfN6RNXhA_sb7DcIon": {
+    "title": "Authorization",
+    "description": "Authorization in GraphQL refers to the process of controlling access to specific fields, types, or operations in a GraphQL schema based on user roles or permissions. It allows you to restrict access to certain data or functionality in your application based on the user's role or permissions.\n\nThere are several ways to implement authorization in GraphQL:\n\n*   Using middleware\n*   Using schema directives\n*   Using a data source layer\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "Get Started with Authorization",
+        "url": "https://graphql.org/learn/authorization/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Authorization",
+        "url": "https://app.daily.dev/tags/authorization?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "A-PQ3_FVuCK3Eud75hsdj": {
+    "title": "Specification",
+    "description": "The GraphQL specification is the official standard that defines the GraphQL query language, type system, execution algorithm, and validation rules. It ensures consistency across different GraphQL implementations and serves as the authoritative reference for developers building GraphQL services and tools.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL Specification",
+        "url": "https://spec.graphql.org/",
+        "type": "article"
+      },
+      {
+        "title": "GraphQL Foundation",
+        "url": "https://foundation.graphql.org/",
+        "type": "article"
+      }
+    ]
+  },
+  "2YLm_S1j_832pb1OGSNaM": {
+    "title": "Realtime",
+    "description": "Realtime GraphQL enables live data updates through subscriptions, allowing clients to receive instant notifications when data changes. Implemented using WebSockets, Server-Sent Events, or polling, it's essential for chat applications, live feeds, and collaborative tools requiring immediate data synchronization.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Get Started with Real Time with GraphQL",
+        "url": "https://the-guild.dev/blog/subscriptions-and-live-queries-real-time-with-graphql",
+        "type": "article"
+      }
+    ]
+  },
+  "GzwPvLybxTJM96fUhQUOi": {
+    "title": "Authorization",
+    "description": "Authorization in GraphQL refers to the process of controlling access to specific fields, types, or operations in a GraphQL schema based on user roles or permissions. It allows you to restrict access to certain data or functionality in your application based on the user's role or permissions.\n\nThere are several ways to implement authorization in GraphQL:\n\n*   Using middleware\n*   Using schema directives\n*   Using a data source layer\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "Get Started with Authorization",
+        "url": "https://graphql.org/learn/authorization/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Authorization",
+        "url": "https://app.daily.dev/tags/authorization?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "O8k-m6s9B_uXkLsXKVFnL": {
+    "title": "Specification",
+    "description": "The GraphQL specification defines the core language, type system, execution model, and validation rules for GraphQL. Maintained by the GraphQL Foundation, it provides the technical foundation that all GraphQL implementations must follow to ensure interoperability and consistency across platforms.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL Specification",
+        "url": "https://spec.graphql.org/",
+        "type": "article"
+      },
+      {
+        "title": "GraphQL Foundation",
+        "url": "https://foundation.graphql.org/",
+        "type": "article"
+      }
+    ]
+  },
+  "G50ZMlmP7Ru5LcFne5Rhu": {
+    "title": "Authorization",
+    "description": "Authorization in GraphQL controls access to data and operations based on user permissions and roles. It can be implemented at the schema level, field level, or within resolvers, ensuring users only access data they're permitted to see through various authentication and permission strategies.\n\nThere are several ways to implement authorization in GraphQL:\n\n*   Using middleware\n*   Using schema directives\n*   Using a data source layer\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "Get Started with Authorization",
+        "url": "https://graphql.org/learn/authorization/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Authorization",
+        "url": "https://app.daily.dev/tags/authorization?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "Uf8XxJPs7RzKVhlxiQdbB": {
+    "title": "Pagination",
+    "description": "Pagination in GraphQL handles large datasets by breaking them into smaller chunks. Common approaches include cursor-based pagination (using cursors for stable pagination) and offset-based pagination (using skip/take), with cursor-based being preferred for performance and consistency.\n\nTo learn more, visit the following links:",
+    "links": [
+      {
+        "title": "Get Started with Pagination",
+        "url": "https://graphql.org/learn/pagination/",
+        "type": "article"
+      }
+    ]
+  },
+  "jCzrMElTo-c9xGcpPOOPl": {
+    "title": "GraphQL.js",
+    "description": "GraphQL.js is the reference implementation of GraphQL for JavaScript and Node.js. It provides the core functionality for parsing, validating, and executing GraphQL queries, serving as the foundation for many other GraphQL tools and libraries in the JavaScript ecosystem.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL.js Repository",
+        "url": "https://github.com/graphql/graphql-js",
+        "type": "article"
+      },
+      {
+        "title": "GraphQL.js Documentation",
+        "url": "https://graphql.org/graphql-js/",
+        "type": "article"
+      }
+    ]
+  },
+  "9nVo95gRNGHGIbaJQPH1x": {
+    "title": "GraphQL Go",
+    "description": "GraphQL Go refers to implementing GraphQL servers and clients using the Go programming language. Popular libraries include graphql-go/graphql for schema-first development and 99designs/gqlgen for code-first generation. Go's strong typing and performance make it excellent for building scalable GraphQL APIs.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "graphql-go/graphql",
+        "url": "https://github.com/graphql-go/graphql",
+        "type": "opensource"
+      },
+      {
+        "title": "99designs/gqlgen",
+        "url": "https://github.com/99designs/gqlgen",
+        "type": "opensource"
+      }
+    ]
+  },
+  "7szipojhVb2VoL3VcS619": {
+    "title": "GraphQL Java",
+    "description": "GraphQL Java is a popular library for implementing GraphQL APIs in Java applications. It provides schema-first development capabilities, runtime query execution, and integrates well with Spring Boot and other Java frameworks, making it a solid choice for enterprise GraphQL implementations.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL Java Repository",
+        "url": "https://github.com/graphql-java/graphql-java",
+        "type": "article"
+      },
+      {
+        "title": "GraphQL Java Documentation",
+        "url": "https://www.graphql-java.com/",
+        "type": "article"
+      }
+    ]
+  },
+  "N-vsu-wvOikuoTbzdgX3X": {
+    "title": "graphql-http",
+    "description": "GraphQL over HTTP is a specification that defines how GraphQL queries and mutations should be transported over HTTP. It standardizes request/response formats, HTTP methods, status codes, and headers, ensuring consistent GraphQL API communication across different implementations.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "graphql-http Library",
+        "url": "https://github.com/graphql/graphql-http",
+        "type": "opensource"
+      },
+      {
+        "title": "GraphQL over HTTP Specification",
+        "url": "https://graphql.github.io/graphql-over-http/",
+        "type": "article"
+      }
+    ]
+  },
+  "Gotb1xtxySCVC5MrnkPSs": {
+    "title": "GraphQL Yoga",
+    "description": "GraphQL Yoga is an open-source GraphQL server library for Node.js built on Express.js. It provides minimal boilerplate setup with built-in authentication, authorization, data validation, and subscription support for real-time updates, making GraphQL server development streamlined.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL Armor - for Yoga Server 2",
+        "url": "https://the-guild.dev/blog/improved-security-with-graphql-armor-support-for-yoga-server-2",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about GraphQL",
+        "url": "https://app.daily.dev/tags/graphql?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "o_VkyoN6DmUUkfl0u0cro": {
+    "title": "Apollo Server",
+    "description": "Apollo Server is a popular open-source library for building GraphQL servers in JavaScript. It provides tools for parsing, validating, executing resolvers, and formatting responses with built-in features for authentication, authorization, data validation, and real-time subscriptions.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Apollo Tutorial - Introduction",
+        "url": "https://www.howtographql.com/react-apollo/0-introduction/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Apollo",
+        "url": "https://app.daily.dev/tags/apollo?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "iTV2H8clmRTOksul4v38p": {
+    "title": "mercurius",
+    "description": "Mercurius is a high-performance GraphQL server library for Fastify, offering excellent performance and minimal memory usage. It provides schema-first development, built-in caching, subscriptions support, and integration with Fastify's ecosystem for building fast, scalable GraphQL APIs.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Mercurius Repository",
+        "url": "https://github.com/mercurius-js/mercurius",
+        "type": "opensource"
+      },
+      {
+        "title": "Mercurius Documentation",
+        "url": "https://mercurius.dev/",
+        "type": "article"
+      }
+    ]
+  },
+  "datKo3vPDwXoyVskcrdkc": {
+    "title": "graphql-http",
+    "description": "GraphQL HTTP is a specification for serving GraphQL over HTTP protocol. It defines standard methods for sending queries and mutations, primarily using POST requests with JSON payloads in the request body, and receiving results in the response body.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Overview of GraphQL HTTP",
+        "url": "https://graphql.org/graphql-js/express-graphql/#graphqlhttp",
+        "type": "article"
+      },
+      {
+        "title": "Get Started with GraphQL HTTP",
+        "url": "https://graphql.org/learn/serving-over-http/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about GraphQL",
+        "url": "https://app.daily.dev/tags/graphql?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "Ab_ngkf6bmejvcp9okuw6": {
+    "title": "Relay",
+    "description": "Relay is Facebook's GraphQL client designed for React applications, emphasizing performance and data consistency. It uses a declarative approach with fragments, automatic query optimization, pagination handling, and strict conventions for building scalable, efficient GraphQL applications.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "GraphQL Code Generator & Relay Compiler",
+        "url": "https://the-guild.dev/blog/graphql-codegen-relay-compiler",
+        "type": "article"
+      }
+    ]
+  },
+  "D5O7ky5eXwm_Ys1IcFNaq": {
+    "title": "Apollo Client",
+    "description": "Apollo Client is a popular GraphQL client library for JavaScript that provides data fetching, caching, and state management. It offers declarative data fetching with React hooks, intelligent caching, optimistic UI updates, and error handling for building efficient GraphQL-powered applications.\n\nLearn more from the following links:",
+    "links": [
+      {
+        "title": "Why Apollo Client - Frontend?",
+        "url": "https://www.howtographql.com/react-apollo/0-introduction/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Apollo",
+        "url": "https://app.daily.dev/tags/apollo?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "WP0Oo_YMfLBlXqDQQtKes": {
+    "title": "Urql",
+    "description": "URQL is a lightweight, highly customizable GraphQL client for React, Vue, and Svelte. It provides caching, real-time subscriptions, offline support, and a modular architecture with exchanges for extending functionality, offering an alternative to Apollo Client with better performance.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "urql - Formidable Labs",
+        "url": "https://formidable.com/open-source/urql/",
+        "type": "article"
+      }
+    ]
+  }
+}

public/roadmap-content/java.json

@@ -8,11 +8,6 @@
         "url": "https://hyperskill.org/tracks/8",
         "type": "course"
       },
-      {
-        "title": "Java Basics - W3Schools",
-        "url": "https://www.w3schools.com/java/",
-        "type": "article"
-      },
       {
         "title": "Head First Java",
         "url": "https://www.amazon.co.uk/Head-First-Java-3rd-Brain-Friendly/dp/1491910771",

public/roadmap-content/javascript.json

@@ -13,11 +13,6 @@
         "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
         "type": "article"
       },
-      {
-        "title": "W3Schools – JavaScript Tutorial",
-        "url": "https://www.w3schools.com/js/",
-        "type": "article"
-      },
       {
         "title": "The Modern JavaScript Tutorial",
         "url": "https://javascript.info/",
@@ -59,11 +54,6 @@
         "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
         "type": "article"
       },
-      {
-        "title": "W3Schools – JavaScript Tutorial",
-        "url": "https://www.w3schools.com/js/",
-        "type": "article"
-      },
       {
         "title": "The Modern JavaScript Tutorial",
         "url": "https://javascript.info/",
@@ -136,11 +126,6 @@
         "url": "https://roadmap.sh/guides/history-of-javascript",
         "type": "article"
       },
-      {
-        "title": "JavaScript Version",
-        "url": "https://www.w3schools.com/js/js_versions.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about JavaScript",
         "url": "https://app.daily.dev/tags/javascript?ref=roadmapsh",
@@ -246,11 +231,6 @@
     "title": "Variable Scopes",
     "description": "In JavaScript, scope refers to the visibility of a variable or how it can be used after it is declared. The scope of a variable depends on the keyword that was used to declare it.\n\nThe three types of Scope are Global Scope, Function Scope, and Block Scope. Before ES6 (2015), JavaScript had only Global Scope and Function Scope with the `var` keyword. ES6 introduced `let` and `const` which allow Block Scope in JavaScript.\n\nGlobal Scope: Variables declared outside any function or curly braces '{}' have Global Scope, and can be accessed from anywhere within the same Javascript code. `var`, `let` and `const` all provide this Scope.\n\nFunction Scope: Variables declared within a function can only be used within that same function. Outside that function, they are undefined. `var`, `let` and `const` all provide this Scope.\n\nBlock Scope: A block is any part of JavaScript code bounded by '{}'. Variables declared within a block can not be accessed outside that block. This Scope is only provided by the `let` and `const` keywords. If you declare a variable within a block using the `var` keyword, it will NOT have Block Scope.\n\nLocal Scope: Local variables are only recognized inside their functions, variables with the same name can be used in different functions. Local variables are created when a function starts, and deleted when the function is completed. `var`, `let` and `const` all provide this Scope.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "JavaScript Scope",
-        "url": "https://www.w3schools.com/js/js_scope.asp",
-        "type": "article"
-      },
       {
         "title": "javascript scope",
         "url": "https://wesbos.com/javascript/03-the-tricky-bits/scope",
@@ -277,11 +257,6 @@
         "url": "https://javascript.info/variables",
         "type": "article"
       },
-      {
-        "title": "JavaScript Variables - W3Schools",
-        "url": "https://www.w3schools.com/js/js_variables.asp",
-        "type": "article"
-      },
       {
         "title": "Declaring Variables without Var, Let, Const - What Would Happen?",
         "url": "https://www.youtube.com/watch?v=6UAKBYpUC-Y",
@@ -341,11 +316,6 @@
     "title": "Function",
     "description": "When a variable is declared inside a function, it is only accessible within that function and cannot be used outside that function.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "JavaScript Scope",
-        "url": "https://www.w3schools.com/js/js_scope.asp",
-        "type": "article"
-      },
       {
         "title": "Function Scope & Block Scope in JS",
         "url": "https://medium.com/nerd-for-tech/function-scope-block-scope-in-js-d29c8e7cd216",
@@ -356,13 +326,7 @@
   "oC4o6GLEES_nUgCJu9Q6I": {
     "title": "Global",
     "description": "Variables declared Globally (outside any function) have Global Scope. Global variables can be accessed from anywhere in a JavaScript program. Variables declared with `var`, `let` and `const` are quite similar when declared outside a block.\n\nNote\n----\n\nIf you assign a value to a variable that has not been declared i.e `potato = true` it will automatically become a _GLOBAL_ variable.\n\nVisit the following resources to learn more:",
-    "links": [
-      {
-        "title": "JavaScript Scope",
-        "url": "https://www.w3schools.com/js/js_scope.asp",
-        "type": "article"
-      }
-    ]
+    "links": []
   },
   "kvActjpU4FUJdrmuFoFEe": {
     "title": "All about Variables",
@@ -399,11 +363,6 @@
         "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures",
         "type": "article"
       },
-      {
-        "title": "JavaScript Data Types",
-        "url": "https://www.w3schools.com/js/js_datatypes.asp",
-        "type": "article"
-      },
       {
         "title": "JavaScript Data Types",
         "url": "https://javascript.info/types",
@@ -535,11 +494,6 @@
         "title": "Working with Objects",
         "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects",
         "type": "article"
-      },
-      {
-        "title": "JavaScript Object Definition",
-        "url": "https://www.w3schools.com/js/js_object_definition.asp",
-        "type": "article"
       }
     ]
   },
@@ -593,11 +547,6 @@
         "title": "typeof Reference",
         "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof",
         "type": "article"
-      },
-      {
-        "title": "typeof Live Examples",
-        "url": "https://www.w3schools.com/js/tryit.asp?filename=tryjs_typeof_all",
-        "type": "article"
       }
     ]
   },
@@ -626,11 +575,6 @@
         "url": "https://javascript.info/type-conversions",
         "type": "article"
       },
-      {
-        "title": "JavaScript Type Conversion",
-        "url": "https://www.w3schools.com/js/js_type_conversion.asp",
-        "type": "article"
-      },
       {
         "title": "Type Casting in JavaScript",
         "url": "https://www.tutorialspoint.com/type-casting-in-javascript",
@@ -694,11 +638,6 @@
     "title": "Implicit Type Casting",
     "description": "Implicit type conversion happens when the compiler or runtime automatically converts data types. JavaScript is loosely typed language and most of the time operators automatically convert a value to the right type.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools - JavaScript Tutorials",
-        "url": "https://www.w3schools.com/js/js_type_conversion.asp",
-        "type": "article"
-      },
       {
         "title": "TutorialsPoint - JavaScript Tutorials",
         "url": "https://www.tutorialspoint.com/explain-typecasting-in-javascript",
@@ -926,11 +865,6 @@
     "title": "Equality Comparisons",
     "description": "Comparison operators are used in logical statements to determine equality or difference between variables or values. Comparison operators can be used in conditional statements to compare values and take action depending on the result.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "JavaScript Comparisons",
-        "url": "https://www.w3schools.com/js/js_comparisons.asp",
-        "type": "article"
-      },
       {
         "title": "JavaScript Equality Operators",
         "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#equality_operators",
@@ -1059,11 +993,6 @@
         "title": "do...while - MDN",
         "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/do...while",
         "type": "article"
-      },
-      {
-        "title": "JavaScript do...while Loop - W3Schools",
-        "url": "https://www.w3schools.com/jsref/jsref_dowhile.asp",
-        "type": "article"
       }
     ]
   },
@@ -1123,11 +1052,6 @@
         "title": "JavaScript MDN Docs - break statement",
         "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break",
         "type": "article"
-      },
-      {
-        "title": "W3Schools – JavaScript Tutorial",
-        "url": "https://www.w3schools.com/js/js_break.asp",
-        "type": "article"
       }
     ]
   },
@@ -1220,11 +1144,6 @@
     "title": "throw statement",
     "description": "The throw statement throws a user-defined exception. Execution of the current function will stop (the statements after throw won't be executed), and control will be passed to the first catch block in the call stack. If no catch block exists among caller functions, the program will terminate. (excerpt from MDN)\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "throw statement - w3schools",
-        "url": "https://www.w3schools.com/jsref/jsref_throw.asp",
-        "type": "article"
-      },
       {
         "title": "JavaScript MDN Docs",
         "url": "https://developer.mozilla.org/en-us/docs/web/javascript/reference/statements/throw",
@@ -1245,13 +1164,7 @@
   "rbjEZe5vxCJ8reI1oZ-jf": {
     "title": "try/catch/finally",
     "description": "These are ways of handling errors in your JavaScript code. Inside the try code block we have the code to run, inside the catch block we handle the errors, and inside the finally block we have code that runs after the execution of the previous code blocks, regardless of the result.\n\nVisit the following resources to learn more:",
-    "links": [
-      {
-        "title": "JavaScript Errors",
-        "url": "https://www.w3schools.com/js/js_errors.asp",
-        "type": "article"
-      }
-    ]
+    "links": []
   },
   "-z-4VTaC3tOThqChgyoMs": {
     "title": "Error Objects",
@@ -1335,11 +1248,6 @@
     "title": "Comparison Operators",
     "description": "Comparison operators are the operators that compare values and return true or false. The operators include: `>`, `<`, `>=`, `<=`, `==`, `===`, `!=` and `!==`\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools - JavaScript Tutorials",
-        "url": "https://www.w3schools.com/js/js_comparisons.asp",
-        "type": "article"
-      },
       {
         "title": "JavaScript MDN Docs",
         "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#comparison_operators",
@@ -1360,11 +1268,6 @@
         "title": "Arithmetic Operators - JavaScript.info",
         "url": "https://javascript.info/operators#maths",
         "type": "article"
-      },
-      {
-        "title": "JavaScript Arithmetic Operators",
-        "url": "https://www.w3schools.com/js/js_arithmetic.asp",
-        "type": "article"
       }
     ]
   },
@@ -1430,11 +1333,6 @@
         "title": "JavaScript MDN Docs",
         "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#conditional_operator",
         "type": "article"
-      },
-      {
-        "title": "W3Schools - JavaScript Tutorials",
-        "url": "https://www.w3schools.com/js/js_comparisons.asp",
-        "type": "article"
       }
     ]
   },
@@ -1510,11 +1408,6 @@
         "title": "MDN - Arrow Function Expressions",
         "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions",
         "type": "article"
-      },
-      {
-        "title": "JavaScript Arrow Function",
-        "url": "https://www.w3schools.com/js/js_arrow_function.asp",
-        "type": "article"
       }
     ]
   },
@@ -1692,11 +1585,6 @@
     "title": "Using (this) keyword",
     "description": "In JavaScript, the `this` keyword is a little different compared to other languages. It refers to an object, but it depends on how or where it is being invoked. It also has some differences between strict mode and non-strict mode.\n\n*   In an object method, `this` refers to the object\n*   Alone, `this` refers to the global object\n*   In a function, `this` refers to the global object\n*   In a function, in strict mode, `this` is undefined\n*   In an event, `this` refers to the element that received the event\n*   Methods like call(), apply(), and bind() can refer `this` to any object\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "The JavaScript this Keyword",
-        "url": "https://www.w3schools.com/js/js_this.asp",
-        "type": "article"
-      },
       {
         "title": "This Keyword",
         "url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this",
@@ -1717,46 +1605,23 @@
         "title": "this in methods",
         "url": "https://javascript.info/object-methods#this-in-methods",
         "type": "article"
-      },
-      {
-        "title": "Short and clear post about the this keyword",
-        "url": "https://www.w3schools.com/js/js_this.asp",
-        "type": "article"
       }
     ]
   },
   "azsXq6Y5iCvQDgTWZpWQ3": {
     "title": "in a function",
     "description": "The keyword `this` when used in a function refers to the global object.\n\n_Note: in a browser window the global object is the `window` object._\n\nVisit the following resources to learn more:",
-    "links": [
-      {
-        "title": "this in a function",
-        "url": "https://www.w3schools.com/js/js_this.asp",
-        "type": "article"
-      }
-    ]
+    "links": []
   },
   "qps2Mdm-lwa4Wr0IxKm0C": {
     "title": "using it alone",
     "description": "The keyword `this` when used alone refers to the global object.\n\n_Note: in a browser window the global object is the `window` object._\n\nVisit the following resources to learn more:",
-    "links": [
-      {
-        "title": "this Alone",
-        "url": "https://www.w3schools.com/js/js_this.asp",
-        "type": "article"
-      }
-    ]
+    "links": []
   },
   "JVbEBtVrTTFnTF3_yUIAC": {
     "title": "in event handlers",
     "description": "The keyword `this` when used in an event handler refers to the element that received the event.\n\nVisit the following resources to learn more:",
-    "links": [
-      {
-        "title": "this in Event handlers",
-        "url": "https://www.w3schools.com/js/js_this.asp",
-        "type": "article"
-      }
-    ]
+    "links": []
   },
   "P0190rTm2wLQmCzWOKour": {
     "title": "in arrow functions",
@@ -1836,11 +1701,6 @@
         "title": "Function binding",
         "url": "https://javascript.info/bind",
         "type": "article"
-      },
-      {
-        "title": "Javascript Function Bind()",
-        "url": "https://www.w3schools.com/js/js_function_bind.asp",
-        "type": "article"
       }
     ]
   },
@@ -1905,11 +1765,6 @@
         "url": "https://developer.mozilla.org/en-US/docs/Web/API/setTimeout",
         "type": "article"
       },
-      {
-        "title": "W3Schools – JavaScript - setTimeOut",
-        "url": "https://www.w3schools.com/jsref/met_win_settimeout.asp",
-        "type": "article"
-      },
       {
         "title": "setInterval and setTimeout: timing events",
         "url": "https://www.youtube.com/watch?v=kOcFZV3c75I",
@@ -1946,11 +1801,6 @@
         "title": "Callback Functions",
         "url": "https://developer.mozilla.org/en-US/docs/Glossary/Callback_function",
         "type": "article"
-      },
-      {
-        "title": "W3School CallBack Function",
-        "url": "https://www.w3schools.com/js/js_callback.asp",
-        "type": "article"
       }
     ]
   },
@@ -2057,11 +1907,6 @@
         "url": "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch",
         "type": "article"
       },
-      {
-        "title": "Fetch W3school Docs",
-        "url": "https://www.w3schools.com/jsref/api_fetch.asp",
-        "type": "article"
-      },
       {
         "title": "Network request - Fetch",
         "url": "https://javascript.info/fetch",
@@ -2087,11 +1932,6 @@
         "title": "Network request - XMLHttpRequest",
         "url": "https://javascript.info/xmlhttprequest",
         "type": "article"
-      },
-      {
-        "title": "W3Schools",
-        "url": "https://www.w3schools.com/xml/xml_http.asp",
-        "type": "article"
       }
     ]
   },
@@ -2260,11 +2100,6 @@
         "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"
       }
     ]
   },

public/roadmap-content/kubernetes.json

@@ -65,11 +65,6 @@
         "url": "https://kubernetes.io/docs/concepts/overview/#why-you-need-kubernetes-and-what-can-it-do",
         "type": "article"
       },
-      {
-        "title": "Why should you use Kubernetes?",
-        "url": "https://www.predicagroup.com/blog/why-kubernetes-2022/",
-        "type": "article"
-      },
       {
         "title": "Primer: How Kubernetes Came to Be, What It Is, and Why You Should Care",
         "url": "https://thenewstack.io/primer-how-kubernetes-came-to-be-what-it-is-and-why-you-should-care/",
@@ -1261,10 +1256,31 @@
       }
     ]
   },
-  "advanced-topics@t8SJbGVXsUDECxePLDk_w.md": {
+  "t8SJbGVXsUDECxePLDk_w": {
     "title": "Advanced Topics",
-    "description": "",
-    "links": []
+    "description": "Advanced Kubernetes concepts cover production-grade techniques for DevOps, Docker, and backend development. These include GitOps deployments, container optimization, stateful workloads management, secure cloud-native applications and service scalable implementations.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Kubernetes Production Best Practices",
+        "url": "https://kubernetes.io/docs/setup/production-environment/",
+        "type": "article"
+      },
+      {
+        "title": "Top Kubernetes design patterns",
+        "url": "https://www.wallarm.com/what/top-kubernetes-design-patterns",
+        "type": "article"
+      },
+      {
+        "title": "The Role of Kubernetes in DevOps",
+        "url": "https://spacelift.io/blog/kubernetes-devops",
+        "type": "article"
+      },
+      {
+        "title": "Kubernetes for Docker Users",
+        "url": "https://www.youtube.com/watch?v=keNQ6V_W4VE&ab_channel=Rancher",
+        "type": "video"
+      }
+    ]
   },
   "L9rVPEEXFwisQOwT_LQ4v": {
     "title": "Creating Custom Controllers",

public/roadmap-content/nodejs.json

@@ -34,11 +34,6 @@
         "url": "https://nodejs.org/en/learn/getting-started/introduction-to-nodejs",
         "type": "article"
       },
-      {
-        "title": "Node.js - Introduction",
-        "url": "https://www.w3schools.com/nodejs/nodejs_intro.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Node.js",
         "url": "https://app.daily.dev/tags/nodejs?ref=roadmapsh",
@@ -376,7 +371,7 @@
       },
       {
         "title": "Getting Started with Npm Workspaces",
-        "url": "https://ruanmartinelli.com/posts/npm-7-workspaces-1",
+        "url": "https://ruanmartinelli.com/blog/npm-7-workspaces-1/",
         "type": "article"
       },
       {
@@ -681,11 +676,6 @@
         "url": "https://developer.mozilla.org/en-US/docs/Web/API/setTimeout",
         "type": "article"
       },
-      {
-        "title": "W3Schools – JavaScript - setTimeOut",
-        "url": "https://www.w3schools.com/jsref/met_win_settimeout.asp",
-        "type": "article"
-      },
       {
         "title": "setInterval and setTimeout: timing events",
         "url": "https://www.youtube.com/watch?v=kOcFZV3c75I",
@@ -865,11 +855,6 @@
         "url": "https://nodejs.org/api/fs.html",
         "type": "article"
       },
-      {
-        "title": "More about fs module",
-        "url": "https://www.w3schools.com/nodejs/nodejs_filesystem.asp",
-        "type": "article"
-      },
       {
         "title": "Using fs",
         "url": "https://www.youtube.com/watch?v=ZySsdm576wE",

public/roadmap-content/postgresql-dba.json

@@ -734,11 +734,6 @@
         "title": "Joins Between Tables",
         "url": "https://www.postgresql.org/docs/current/tutorial-join.html",
         "type": "article"
-      },
-      {
-        "title": "PostgreSQL - Joins",
-        "url": "https://www.w3schools.com/postgresql/postgresql_joins.php",
-        "type": "article"
       }
     ]
   },

public/roadmap-content/python.json

@@ -23,11 +23,6 @@
         "url": "https://developers.google.com/edu/python",
         "type": "article"
       },
-      {
-        "title": "W3Schools - Python Tutorial",
-        "url": "https://www.w3schools.com/python",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Python",
         "url": "https://app.daily.dev/tags/python?ref=roadmapsh",
@@ -44,11 +39,6 @@
     "title": "Basic Syntax",
     "description": "Setup the environment for python and get started with the basics.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools - Python",
-        "url": "https://www.w3schools.com/python/",
-        "type": "article"
-      },
       {
         "title": "Python Basics",
         "url": "https://www.tutorialspoint.com/python/python_basic_syntax.htm",
@@ -75,16 +65,6 @@
         "url": "https://realpython.com/python-variables",
         "type": "article"
       },
-      {
-        "title": "W3Schools — Python Variables",
-        "url": "https://www.w3schools.com/python/python_variables.asp",
-        "type": "article"
-      },
-      {
-        "title": "Python Data Types",
-        "url": "https://www.w3schools.com/python/python_datatypes.asp",
-        "type": "article"
-      },
       {
         "title": "Python for Beginners: Data Types",
         "url": "https://thenewstack.io/python-for-beginners-data-types/",
@@ -169,11 +149,6 @@
         "url": "https://docs.python.org/3/library/functions.html",
         "type": "article"
       },
-      {
-        "title": "Python Functions - W3Schools",
-        "url": "https://www.w3schools.com/python/python_functions.asp",
-        "type": "article"
-      },
       {
         "title": "Defining Python Functions",
         "url": "https://realpython.com/defining-your-own-python-function/",
@@ -242,11 +217,6 @@
         "url": "https://learnpython.com/blog/python-sets/",
         "type": "article"
       },
-      {
-        "title": "An W3Schools - Python Sets",
-        "url": "https://www.w3schools.com/python/python_sets.asp",
-        "type": "article"
-      },
       {
         "title": "Python Sets tutorial for Beginners",
         "url": "https://www.youtube.com/watch?v=t9j8lCUGZXo",
@@ -263,11 +233,6 @@
         "url": "https://docs.python.org/3/tutorial/datastructures.html#dictionaries",
         "type": "article"
       },
-      {
-        "title": "W3 Schools - Dictionaries",
-        "url": "https://www.w3schools.com/python/python_dictionaries.asp",
-        "type": "article"
-      },
       {
         "title": "Dictionaries in Python",
         "url": "https://realpython.com/python-dicts/",
@@ -525,11 +490,6 @@
     "title": "Lambdas",
     "description": "Python Lambda Functions are anonymous function means that the function is without a name. As we already know that the def keyword is used to define a normal function in Python. Similarly, the lambda keyword is used to define an anonymous function in Python.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "Lambdas in Python",
-        "url": "https://www.w3schools.com/python/python_lambda.asp",
-        "type": "article"
-      },
       {
         "title": "How to use Lambda functions",
         "url": "https://realpython.com/python-lambda/",
@@ -572,11 +532,6 @@
     "title": "Iterators",
     "description": "An iterator is an object that contains a countable number of values. An iterator is an object that can be iterated upon, meaning that you can traverse through all the values. Technically, in Python, an iterator is an object which implements the iterator protocol, which consist of the methods **iter**() and **next**() .\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "Iterators in Python",
-        "url": "https://www.w3schools.com/python/python_iterators.asp",
-        "type": "article"
-      },
       {
         "title": "Python Iterators",
         "url": "https://www.programiz.com/python-programming/iterator",
@@ -645,11 +600,6 @@
         "url": "https://docs.python.org/3/tutorial/classes.html",
         "type": "article"
       },
-      {
-        "title": "Python Classes and Objects",
-        "url": "https://www.w3schools.com/python/python_classes.asp",
-        "type": "article"
-      },
       {
         "title": "Python OOP Tutorial",
         "url": "https://www.youtube.com/watch?v=ZDa-Z5JzLYM&list=PL-osiE80TeTsqhIuOqKhwlXsIBIdSeYtc",
@@ -660,13 +610,7 @@
   "S0FLE70szSVUPI0CDEQK7": {
     "title": "Inheritance",
     "description": "Inheritance is a fundamental concept in object-oriented programming (OOP) that allows one class to inherit the properties and behavior of another class.\n\nVisit the following resources to learn more:",
-    "links": [
-      {
-        "title": "Python Inheritance",
-        "url": "https://www.w3schools.com/python/python_inheritance.asp",
-        "type": "article"
-      }
-    ]
+    "links": []
   },
   "zAS4YiEJ6VPsyABrkIG8i": {
     "title": "Methods, Dunder",
@@ -740,11 +684,6 @@
         "url": "https://realpython.com/what-is-pip/",
         "type": "article"
       },
-      {
-        "title": "Python PIP Introduction",
-        "url": "https://www.w3schools.com/python/python_pip.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about PIP",
         "url": "https://app.daily.dev/tags/pip?ref=roadmapsh",
@@ -788,11 +727,6 @@
         "url": "https://docs.python.org/3/tutorial/datastructures.html#list-comprehensions",
         "type": "article"
       },
-      {
-        "title": "Python - List Comprehension",
-        "url": "https://www.w3schools.com/python/python_lists_comprehension.asp",
-        "type": "article"
-      },
       {
         "title": "What Exactly are List Comprehensions in Python? - CodeGuage",
         "url": "https://www.codeguage.com/courses/python/lists-list-comprehensions",

public/roadmap-content/qa.json

@@ -122,7 +122,7 @@
       },
       {
         "title": "What Do Software Testers Do?",
-        "url": "https://www.ministryoftesting.com/dojo/lessons/what-do-software-testers-do-version-0-1",
+        "url": "https://www.ministryoftesting.com/articles/what-do-software-testers-do",
         "type": "article"
       },
       {
@@ -835,21 +835,6 @@
     "title": "HTML, CSS, JavaScript",
     "description": "HTML stands for HyperText Markup Language. It is used on the front and gives structure to the webpage, which you can style using CSS and make interactive using JavaScript.\n\nCSS or Cascading Style Sheets is the language used to style the front end of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.\n\nJavaScript allows you to add interactivity to your pages. You may have seen common examples on the websites: sliders, click interactions, popups, and so on.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "W3Schools - Learn HTML",
-        "url": "https://www.w3schools.com/html/html_intro.asp",
-        "type": "article"
-      },
-      {
-        "title": "W3Schools — Learn CSS",
-        "url": "https://www.w3schools.com/css/",
-        "type": "article"
-      },
-      {
-        "title": "W3Schools – JavaScript Tutorial",
-        "url": "https://www.w3schools.com/js/",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about CSS",
         "url": "https://app.daily.dev/tags/css?ref=roadmapsh",
@@ -877,11 +862,6 @@
     "title": "Ajax",
     "description": "AJAX stands for Asynchronous JavaScript And XML. In a nutshell, it is the use of the XMLHttpRequest object to communicate with servers. It can send and receive information in various formats, including JSON, XML, HTML, and text files.\n\nVisit the following resources to learn more:",
     "links": [
-      {
-        "title": "What is AJAX?",
-        "url": "https://www.w3schools.com/whatis/whatis_ajax.asp",
-        "type": "article"
-      },
       {
         "title": "Getting Started with AJAX",
         "url": "https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started",

public/roadmap-content/react.json

@@ -127,11 +127,6 @@
         "url": "https://www.codeguage.com/courses/react/jsx",
         "type": "article"
       },
-      {
-        "title": "JSX in React on w3school",
-        "url": "https://www.w3schools.com/react/react_jsx.asp",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about JSX",
         "url": "https://app.daily.dev/tags/jsx?ref=roadmapsh",
@@ -502,11 +497,6 @@
         "url": "https://react.dev/reference/react/useRef",
         "type": "article"
       },
-      {
-        "title": "W3Schools",
-        "url": "https://www.w3schools.com/react/react_useref.asp",
-        "type": "article"
-      },
       {
         "title": "WebDevSimplified",
         "url": "https://www.youtube.com/watch?v=t2ypzz6gJm0",
@@ -697,11 +687,6 @@
         "url": "https://react.dev/learn/passing-data-deeply-with-context",
         "type": "article"
       },
-      {
-        "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/",

public/roadmap-content/software-architect.json

@@ -311,11 +311,6 @@
         "url": "https://automatetheboringstuff.com/",
         "type": "article"
       },
-      {
-        "title": "W3Schools - Python Tutorial ",
-        "url": "https://www.w3schools.com/python/",
-        "type": "article"
-      },
       {
         "title": "Python Crash Course",
         "url": "https://ehmatthes.github.io/pcc/",
@@ -373,11 +368,6 @@
         "url": "https://gobyexample.com/",
         "type": "article"
       },
-      {
-        "title": "W3Schools Go Tutorial ",
-        "url": "https://www.w3schools.com/go/",
-        "type": "article"
-      },
       {
         "title": "Explore top posts about Golang",
         "url": "https://app.daily.dev/tags/golang?ref=roadmapsh",
@@ -501,11 +491,6 @@
         "url": "https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_programming",
         "type": "article"
       },
-      {
-        "title": "W3schools - OOP Concepts",
-        "url": "https://www.w3schools.com/java/java_oop.asp",
-        "type": "article"
-      },
       {
         "title": "FreeCodeCamp - (OOP) in C++",
         "url": "https://www.youtube.com/watch?v=wN0x9eZLix4",

public/roadmap-content/software-design-architecture.json

@@ -411,6 +411,11 @@
         "url": "https://en.wikipedia.org/wiki/Class_invariant",
         "type": "article"
       },
+      {
+        "title": "Class Invariants",
+        "url": "https://course.ccs.neu.edu/cs3500f15/lec_08_notes.html",
+        "type": "article"
+      },
       {
         "title": "The concept of class invariant in object-oriented programming",
         "url": "https://arxiv.org/abs/2109.06557",
@@ -463,11 +468,6 @@
         "title": "Overview of Anemic Domain Model",
         "url": "https://en.wikipedia.org/wiki/Anemic_domain_model",
         "type": "article"
-      },
-      {
-        "title": "What is an Anaemic Domain Model?",
-        "url": "https://www.ensonodigital.com/blog/anaemic-domain-model-vs-rich-domain-model",
-        "type": "article"
       }
     ]
   },
@@ -477,7 +477,7 @@
     "links": [
       {
         "title": "What is an Abstract Class in Object Oriented Programming",
-        "url": "https://computinglearner.com/abstract-class-in-object-oriented-programming/",
+        "url": "https://www.theserverside.com/definition/abstract-class",
         "type": "article"
       }
     ]

public/roadmap-content/spring-boot.json

@@ -0,0 +1,982 @@
+{
+  "jy2heDVZuM6ASCXlI1TDn": {
+    "title": "Introduction",
+    "description": "Spring Boot is a framework for building applications based on the Spring Framework, a widely-used, open-source framework for building Java-based enterprise applications. Spring Boot aims to make it easy to create stand-alone, production-grade Spring-based applications that you can \"just run\".\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Boot",
+        "url": "https://spring.io/projects/spring-boot",
+        "type": "article"
+      },
+      {
+        "title": "Spring Boot - Introduction",
+        "url": "https://www.tutorialspoint.com/spring_boot/spring_boot_introduction.htm",
+        "type": "article"
+      },
+      {
+        "title": "Introduction to Spring Boot",
+        "url": "https://medium.com/adessoturkey/introduction-to-spring-boot-458cb814ec14",
+        "type": "article"
+      },
+      {
+        "title": "What-is-Spring-Boot?",
+        "url": "https://www.ibm.com/topics/java-spring-boot",
+        "type": "article"
+      }
+    ]
+  },
+  "OB--nMudscm0p6RqqfA7T": {
+    "title": "Configuration",
+    "description": "Spring Core Configuration is the process of configuring the Spring Framework, which involves specifying the various configuration details required for an application to function properly. This can include setting up beans, specifying bean dependencies, configuring aspect-oriented programming (AOP) aspects, and more. Configuration can be done through Java code, XML files, or using annotations in the code.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Framework Documentation",
+        "url": "https://docs.spring.io/spring/docs/current/spring-framework-reference/",
+        "type": "article"
+      },
+      {
+        "title": "\"Spring Configuration\" tutorial",
+        "url": "https://www.baeldung.com/project-configuration-with-spring",
+        "type": "article"
+      },
+      {
+        "title": "\"Spring Framework\" tutorial",
+        "url": "https://www.tutorialspoint.com/spring/index.htm",
+        "type": "article"
+      },
+      {
+        "title": "\"Spring Core\" video tutorial",
+        "url": "https://www.youtube.com/watch?v=GB8k2-Egfv0",
+        "type": "video"
+      }
+    ]
+  },
+  "C2EQ5J1aJYF9e9Rr2KysT": {
+    "title": "Dependency Injection",
+    "description": "Spring Boot uses the Spring Framework's Inversion of Control (IoC) container to manage objects and their dependencies. The IoC container is responsible for creating objects, wiring them together, and managing their lifecycle. When an object is created, its dependencies are also created and injected into the object.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Dependency Injection",
+        "url": "https://www.baeldung.com/spring-dependency-injection",
+        "type": "article"
+      },
+      {
+        "title": "Dependency Injection Using Spring Boot",
+        "url": "https://medium.com/edureka/what-is-dependency-injection-5006b53af782",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Dependency Injection",
+        "url": "https://app.daily.dev/tags/dependency-injection?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "PlUU_vzFQ3Xx6Z5XREIYP": {
+    "title": "Spring IOC",
+    "description": "Inversion of Control (IoC) is a design pattern that is often used in conjunction with the Dependency Injection (DI) pattern. The basic idea behind IoC is to invert the flow of control in a program, so that instead of the program controlling the flow of logic and the creation of objects, the objects themselves control the flow of logic and the creation of other objects.\n\nSpring is a popular Java framework that uses IoC and DI to provide a more flexible, modular approach to software development. The Spring IoC container is responsible for managing the creation and configuration of objects in a Spring-based application.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring IoC, Spring Bean Example Tutorial",
+        "url": "https://www.digitalocean.com/community/tutorials/spring-ioc-bean-example-tutorial",
+        "type": "article"
+      },
+      {
+        "title": "Intro to Inversion of Control with Spring",
+        "url": "https://www.baeldung.com/inversion-control-and-dependency-injection-in-spring",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Spring Framework",
+        "url": "https://app.daily.dev/tags/spring?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "wV1_I_4czMIxpBionvLs4": {
+    "title": "Spring AOP",
+    "description": "Spring AOP (Aspect-Oriented Programming) is a feature of the Spring Framework that allows developers to define certain behaviors (i.e., \"aspects\") that cut across multiple classes, such as logging or transaction management. These behaviors, which are called \"advices,\" can be applied to specific \"join points\" (i.e., points in the execution of a program) in the application, using \"pointcuts\" to determine where the advices should be applied.\n\nSpring AOP allows developers to separate the implementation of these cross-cutting concerns from the business logic of the application, making the code more modular and easier to understand. This can also make the application more flexible, since the same advices can be applied to different parts of the code without having to duplicate the code for the advices themselves.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring AOP Tutorial",
+        "url": "https://www.simplilearn.com/tutorials/spring-tutorial/spring-aop-aspect-oriented-programming",
+        "type": "article"
+      },
+      {
+        "title": "AOP with Spring Framework",
+        "url": "https://www.tutorialspoint.com/spring/aop_with_spring.htm",
+        "type": "article"
+      },
+      {
+        "title": "Spring AOP Tutorial",
+        "url": "https://howtodoinjava.com/spring-aop-tutorial/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Spring Framework",
+        "url": "https://app.daily.dev/tags/spring?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "QiNWE4sMTao3cVzjt3yPp": {
+    "title": "Spring MVC",
+    "description": "Spring MVC is a framework for building web applications in Java. It is part of the Spring Framework, which is a larger ecosystem of tools for building Java applications. Spring MVC is built on the Model-View-Controller (MVC) design pattern, which helps to separate the concerns of the application into three distinct components: the Model, the View, and the Controller.\n\nSpring MVC provides a powerful and flexible way to build web applications, and it integrates well with other parts of the Spring ecosystem, such as Spring Security for authentication and authorization, and Spring Data for data access.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Web MVC framework",
+        "url": "https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/mvc.html",
+        "type": "article"
+      },
+      {
+        "title": "Spring - MVC Framework",
+        "url": "https://www.tutorialspoint.com/spring/spring_web_mvc_framework.htm",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Spring Framework",
+        "url": "https://app.daily.dev/tags/spring?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "HdCpfGMrMaXxk5QrtYn3X": {
+    "title": "Annotations",
+    "description": "One of the key features of Spring Boot is its use of annotations, which are used to configure various aspects of the application and to enable certain features.\n\nSome of the most commonly used annotations in Spring Boot include:\n\n*   `@SpringBootApplication`\n*   `@RestController`\n*   `@Autowired`\n*   `@Value`\n*   `@Enable`\n*   `@Configuration`\n*   `@Bean`\n\nThese are just a few examples of the many annotations that are available in Spring Boot. There are many other annotations that you can use to configure various aspects of your application, such as security, caching, and data access.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Annotations",
+        "url": "https://www.digitalocean.com/community/tutorials/spring-annotations",
+        "type": "article"
+      },
+      {
+        "title": "Annotations in Spring",
+        "url": "https://www.techferry.com/articles/spring-annotations.html",
+        "type": "article"
+      }
+    ]
+  },
+  "KdN62IpNgPFMndXfLaYa1": {
+    "title": "Spring Bean Scope",
+    "description": "In the Spring Framework, a bean is an object that is instantiated, assembled, and managed by the Spring IoC container. One of the key features of the Spring container is its ability to manage the lifecycle of beans, which includes creating, configuring, and destroying beans as necessary. One way the container can control the lifecycle of a bean is by specifying its scope.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring - Bean Scopes",
+        "url": "https://www.tutorialspoint.com/spring/spring_bean_scopes.htm",
+        "type": "article"
+      },
+      {
+        "title": "Quick Guide to Spring Bean Scopes",
+        "url": "https://www.baeldung.com/spring-bean-scopes",
+        "type": "article"
+      },
+      {
+        "title": "Spring Bean Scopes",
+        "url": "https://www.digitalocean.com/community/tutorials/spring-bean-scopes",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Spring Framework",
+        "url": "https://app.daily.dev/tags/spring?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "WrUCyVfFNUpHB8jyjjKna": {
+    "title": "Terminology",
+    "description": "Spring Core, the base of the Spring Framework, provides a model for configuring Java applications. Key concepts include **Beans** (Java objects managed by Spring), **Inversion of Control (IoC)** (Spring managing bean lifecycles and dependencies), and **Dependency Injection (DI)** (Spring providing bean dependencies). The **Spring container** (specifically an **ApplicationContext**) creates and manages these beans. Spring also offers **Aspect-Oriented Programming (AOP)** for handling cross-cutting concerns, an **event model** for decoupled communication using **ApplicationEvent** and **listeners**, abstractions for **Data Access** and **Transactions**, and utilities for **Task Execution and Scheduling**.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Boot",
+        "url": "https://spring.io/projects/spring-boot",
+        "type": "article"
+      },
+      {
+        "title": "Spring Boot - Starter Guide",
+        "url": "https://spring.io/quickstart",
+        "type": "article"
+      }
+    ]
+  },
+  "yuXN-rD4AyyPYUYOR50L_": {
+    "title": "Architecture",
+    "description": "Spring Boot follows a layered architecture in which each layer communicates with the layer directly below or above (hierarchical structure) it. There are four layers in Spring Boot are as follows:\n\n*   **Presentation Layer**: handles the HTTP requests, translates the JSON parameter to object, and authenticates the request and transfer it to the business layer.\n*   **Business Layer**: The business layer handles all the business logic. It consists of service classes and uses services provided by data access layers. It also performs authorization and validation.\n*   **Persistence Layer**: The persistence layer contains all the storage logic and translates business objects from and to database rows.\n*   **Database Layer**: In the database layer, CRUD (create, retrieve, update, delete) operations are performed.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Boot Architecture – Detailed Explanation",
+        "url": "https://www.interviewbit.com/blog/spring-boot-architecture",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Architecture",
+        "url": "https://app.daily.dev/tags/architecture?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "WGf3W6bdWL0rK0o6O28G2": {
+    "title": "Why use Spring?",
+    "description": "Spring Boot provides a number of features that make it easier to create a Spring-based application, including:\n\n*   Embedded Application Server\n*   Automatic Configuration\n*   Pre-configured Starters\n*   Ease of Packaging and Distribution\n*   Ease of monitoring through built-in health check endpoint and the ability to customize the management endpoint.\n\nAdditionally, it's come with a lot of best practices and conventions baked in, which reduces the amount of work and boiler plate code developers need to write.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Why Spring?",
+        "url": "https://spring.io/why-spring",
+        "type": "article"
+      },
+      {
+        "title": "Spring vs Spring Boot: Know The Difference",
+        "url": "https://www.interviewbit.com/blog/spring-vs-spring-boot",
+        "type": "article"
+      },
+      {
+        "title": "A Comparison Between Spring and Spring Boot",
+        "url": "https://www.baeldung.com/spring-vs-spring-boot",
+        "type": "article"
+      },
+      {
+        "title": "Advantages of Spring Boot",
+        "url": "https://www.adservio.fr/post/advantages-of-spring-boot",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Spring Framework",
+        "url": "https://app.daily.dev/tags/spring?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "KaUdyVWEiZa6lUDRBlOKt": {
+    "title": "Spring Security",
+    "description": "Spring Security is a framework for securing Java-based applications. It is a powerful and highly customizable authentication and access-control framework that can be easily integrated with a wide variety of applications, including web applications and RESTful web services. Spring Security provides a comprehensive security solution for both authentication and authorization, and it can be used to secure applications at both the web and method level.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Security",
+        "url": "https://spring.io/projects/spring-security",
+        "type": "article"
+      },
+      {
+        "title": "What is Spring security",
+        "url": "https://www.javadevjournal.com/spring/what-is-spring-security/",
+        "type": "article"
+      },
+      {
+        "title": "Spring Security: Authentication and Authorization In-Depth",
+        "url": "https://www.marcobehler.com/guides/spring-security",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Security",
+        "url": "https://app.daily.dev/tags/security?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "ssdk2iAt4avhc8B5tnIzQ": {
+    "title": "Authentication",
+    "description": "Spring Security is a framework for securing Java-based applications. One of its core features is authentication, which is the process of verifying that a user is who they claim to be. Spring Security provides a wide range of options for implementing authentication, including support for traditional username/password-based authentication as well as more modern alternatives such as OAuth and JSON Web Tokens (JWT).\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Authentication",
+        "url": "https://docs.spring.io/spring-security/reference/features/authentication/index.html",
+        "type": "article"
+      },
+      {
+        "title": "Spring Security Authentication",
+        "url": "https://spring.io/projects/spring-security",
+        "type": "article"
+      },
+      {
+        "title": "Spring Security Basic Authentication",
+        "url": "https://www.baeldung.com/spring-security-basic-authentication",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Authentication",
+        "url": "https://app.daily.dev/tags/authentication?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "c7w7Z3Coa81FKa_yAKTse": {
+    "title": "Authorization",
+    "description": "Spring Security supports a variety of authentication mechanisms, such as username and password authentication, OAuth2, and more. Once a user is authenticated, Spring Security can then be used to authorize that user's access to specific resources or functionality. There are several annotations that can be used to control access to specific methods or classes.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Authorization",
+        "url": "https://docs.spring.io/spring-security/reference/servlet/authorization/index.html",
+        "type": "article"
+      },
+      {
+        "title": "Advanced authorization in Spring",
+        "url": "https://docs.spring.io/spring-security/site/docs/5.2.11.RELEASE/reference/html/authorization.html",
+        "type": "article"
+      },
+      {
+        "title": "Spring Security: Authentication and Authorization In-Depth",
+        "url": "https://www.marcobehler.com/guides/spring-security",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Authorization",
+        "url": "https://app.daily.dev/tags/authorization?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "p7t3RlIIm9U08GFC6azff": {
+    "title": "OAuth2",
+    "description": "Spring Security OAuth2 library provides support for both the authorization code grant type (for web apps) and the implicit grant type (for single-page apps). You can also use Spring Security to protect your resources, and to configure your application as an OAuth2 resource server. The OAuth2 authentication process can be complex and time-consuming, but the Spring Security OAuth2 library makes it easy to get started by providing a set of convenient configuration classes and annotations.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Boot and OAuth2",
+        "url": "https://spring.io/guides/tutorials/spring-boot-oauth2/",
+        "type": "article"
+      },
+      {
+        "title": "Spring Boot - OAuth2 with JWT",
+        "url": "https://www.tutorialspoint.com/spring_boot/spring_boot_oauth2_with_jwt.htm",
+        "type": "article"
+      },
+      {
+        "title": "Spring Security",
+        "url": "https://www.tutorialspoint.com/spring_security/spring_security_with_oauth2.htm",
+        "type": "article"
+      }
+    ]
+  },
+  "1My7mbdwAbRcJoiA50pWW": {
+    "title": "JWT Authentication",
+    "description": "Spring Security can be used to implement JWT Authentication and Authorization to your APIs. The library provides a JWT-based authentication filter that you can add to your API endpoints. The filter will check the JWT that is included in the request header, and if it is valid, it will set the authentication information in the security context. You can then use the security context to perform authorization checks on the API endpoints.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "JWT Token Authentication in Spring",
+        "url": "https://springframework.guru/jwt-authentication-in-spring-microservices-jwt-token/",
+        "type": "article"
+      },
+      {
+        "title": "Spring Security with JWT for REST API",
+        "url": "https://www.toptal.com/spring/spring-security-tutorial",
+        "type": "article"
+      },
+      {
+        "title": "Spring Security - JWT",
+        "url": "https://www.tutorialspoint.com/spring_security/spring_security_with_jwt.htm",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Authentication",
+        "url": "https://app.daily.dev/tags/authentication?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "JrH2hiu27PhIO1VtrArMa": {
+    "title": "Spring Boot Starters",
+    "description": "Spring Boot starters are a set of convenient dependency descriptors that you can include in your application. They provide a variety of functionality, such as security, data access, and web services, and help to minimize the amount of boilerplate code and configuration you need to write.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Intro to Spring Boot Starters",
+        "url": "https://www.baeldung.com/spring-boot-starters",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Spring Framework",
+        "url": "https://app.daily.dev/tags/spring?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "88-h3d7kb-VmUBsnUUXW_": {
+    "title": "Autoconfiguration",
+    "description": "Spring Boot's Autoconfiguration is a powerful and convenient feature that makes it easy to configure beans and other components in your application based on the presence of certain dependencies and properties. It saves developer's time by reducing the need for boilerplate configuration code, and can be fine-tuned through properties and annotations, to provide a fine-grained control over the auto-configurations.\n\nFor more information, visit the following links:",
+    "links": [
+      {
+        "title": "Auto-configuration using Spring Boot",
+        "url": "https://docs.spring.io/spring-boot/docs/2.0.x/reference/html/using-boot-auto-configuration.html",
+        "type": "article"
+      }
+    ]
+  },
+  "N7hd3d_XQtvOgnCqdCFt3": {
+    "title": "Actuators",
+    "description": "Spring Boot Actuators are a set of production-ready features in Spring Boot that allow you to monitor and manage your application in various ways. They provide a variety of endpoints that expose information about the health and performance of your application, and allow you to perform various management tasks such as shutting down the application or refreshing its configuration.\n\nSpring Boot Actuators are typically used in production environments to monitor the health and performance of an application and identify any issues that may arise. They can also be used in development and testing environments to gain insight into the internal workings of the application.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Building a RESTful Web Service with Spring Boot Actuator",
+        "url": "https://spring.io/guides/gs/actuator-service/",
+        "type": "article"
+      },
+      {
+        "title": "What is Spring Boot Actuator",
+        "url": "https://www.baeldung.com/spring-boot-actuators",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Spring Framework",
+        "url": "https://app.daily.dev/tags/spring?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "ONb0VnSUMY8JBeW3G2mTp": {
+    "title": "Embedded Server",
+    "description": "Spring Boot's Embedded Server feature is a convenient and powerful feature that allows you to run a web server directly within your application, without the need to deploy it to a separate standalone web server. This makes it easy to develop, test, and deploy web applications, and it's also lightweight, easy to start and stop, and easy to configure.\n\nFor more resources, visit the following links:",
+    "links": [
+      {
+        "title": "Embedded Web Servers ‘How-to’ guides",
+        "url": "https://docs.spring.io/spring-boot/docs/2.1.9.RELEASE/reference/html/howto-embedded-web-servers.html",
+        "type": "article"
+      },
+      {
+        "title": "Embedded Servers in Spring",
+        "url": "https://subscription.packtpub.com/book/application-development/9781789132588/3/ch03lvl1sec24/embedded-servers",
+        "type": "article"
+      },
+      {
+        "title": "What is an Embedded Server? (Spring Boot)",
+        "url": "https://www.springboottutorial.com/java-programmer-essentials-what-is-an-embedded-server",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Embedded Systems",
+        "url": "https://app.daily.dev/tags/embedded?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "h5-HnycxfbJgwalSdXTAz": {
+    "title": "Hibernate",
+    "description": "Hibernate is a Java framework that provides an object-relational mapping to an object-oriented model to the relational database. It means hibernate provides from Java classes to database tables and also provides data querying and retrieval facility.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Difference Between Spring vs Hibernate",
+        "url": "https://www.educba.com/spring-vs-hibernate/",
+        "type": "article"
+      },
+      {
+        "title": "Spring Hibernate Integration Example",
+        "url": "https://www.digitalocean.com/community/tutorials/spring-hibernate-integration-example-tutorial",
+        "type": "article"
+      }
+    ]
+  },
+  "H9Z0EvKT_148vD0mR-dUf": {
+    "title": "Transactions",
+    "description": "A transaction simply represents a unit of work. In such case, if one step fails, the whole transaction fails (which is termed as atomicity). A transaction can be described by ACID properties (Atomicity, Consistency, Isolation and Durability).\n\nIn hibernate framework, we have Transaction interface that defines the unit of work. It maintains abstraction from the transaction implementation (JTA,JDBC).\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Hibernate Transaction Management",
+        "url": "https://www.javaguides.net/2018/12/hibernate-transaction-management-tutorial.html",
+        "type": "article"
+      },
+      {
+        "title": "Hibernate Transaction",
+        "url": "https://www.w3schools.blog/hibernate-transaction-management",
+        "type": "article"
+      }
+    ]
+  },
+  "D4ybyh0ydvl9W2_xUcvZ_": {
+    "title": "Relationships",
+    "description": "Using hibernate, if we want to have relationship between two entities, there must exist a foreign key relationship between the tables, we call it as Referential integrity. The main advantage of having relationship between objects is, we can do operation on one object, and the same operation can transfer onto the other object in the database.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Hibernate Relationships In Depth",
+        "url": "https://www.java4s.com/hibernate/hibernate-relationships-in-depth/",
+        "type": "article"
+      },
+      {
+        "title": "Guide to JPA with Hibernate - Relationship Mapping",
+        "url": "https://stackabuse.com/a-guide-to-jpa-with-hibernate-relationship-mapping/",
+        "type": "article"
+      },
+      {
+        "title": "Hibernate Mapping",
+        "url": "https://dzone.com/articles/hibernate-mapping",
+        "type": "article"
+      }
+    ]
+  },
+  "Ijmy0J3VyaeTGXtu2VkkQ": {
+    "title": "Entity Lifecycle",
+    "description": "In Hibernate, we can either create a new object of an entity and store it into the database, or we can fetch the existing data of an entity from the database. These entity is connected with the lifecycle and each object of entity passes through the various stages of the lifecycle.\n\nThere are mainly four states of the Hibernate Lifecycle :\n\n*   Transient State\n*   Persistent State\n*   Detached State\n*   Removed State\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Hibernate Entity Lifecycle & and its state",
+        "url": "https://www.baeldung.com/hibernate-entity-lifecycle",
+        "type": "article"
+      }
+    ]
+  },
+  "pvVLbFQoT50vz_VRK4VbJ": {
+    "title": "Spring Data",
+    "description": "Spring Data is a collection of projects for data access in Spring-based applications. It provides a common interface for working with various types of data stores, including relational databases, NoSQL data stores, and cloud-based data services. The goal of Spring Data is to simplify data access in Spring applications by providing a consistent, high-level repository programming model across different data stores and data access technologies. This can help developers write less boilerplate code and focus on business logic, while still being able to take advantage of the full power of the underlying data store.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Data",
+        "url": "https://spring.io/projects/spring-data",
+        "type": "article"
+      },
+      {
+        "title": "Spring Data – One API To Rule Them All?",
+        "url": "https://www.infoq.com/articles/spring-data-intro/",
+        "type": "article"
+      },
+      {
+        "title": "What is JPA, Spring Data and Spring Data JPA",
+        "url": "https://www.amitph.com/jpa-and-spring-data-jpa/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Spring Framework",
+        "url": "https://app.daily.dev/tags/spring?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "6u08QN-pUeFm3o0h5Scfm": {
+    "title": "Spring Data JPA",
+    "description": "Spring Data JPA is a library that makes it easy to implement Java Persistence API (JPA) based repositories (a fancy word for \"DAO\") for Spring applications. It's an abstraction on top of JPA that allows you to use a simpler and more convenient API for performing CRUD (Create, Read, Update, Delete) operations on databases. Spring Data JPA also provides additional functionality such as pagination, dynamic query generation, and more.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Data JPA",
+        "url": "https://spring.io/projects/spring-data-jpa",
+        "type": "article"
+      },
+      {
+        "title": "Introduction to Spring Data JPA",
+        "url": "https://www.baeldung.com/the-persistence-layer-with-spring-data-jpa",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Spring Framework",
+        "url": "https://app.daily.dev/tags/spring?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "fy-TphbqkLpR1zvFcr7dg": {
+    "title": "Spring Data MongoDB",
+    "description": "Spring Data for MongoDB is part of the umbrella Spring Data project which aims to provide a familiar and consistent Spring-based programming model for new datastores while retaining store-specific features and capabilities\n\nThe Spring Data MongoDB project provides integration with the MongoDB document database. Key functional areas of Spring Data MongoDB are a POJO centric model for interacting with a MongoDB DBCollection and easily writing a Repository style data access layer.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Data MongoDB",
+        "url": "https://spring.io/projects/spring-data-mongodb",
+        "type": "article"
+      },
+      {
+        "title": "Introduction to Spring Data MongoDB",
+        "url": "https://www.baeldung.com/spring-data-mongodb-tutorial",
+        "type": "article"
+      },
+      {
+        "title": "Spring Boot Integration with MongoDB Tutorial",
+        "url": "https://www.mongodb.com/compatibility/spring-boot",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about MongoDB",
+        "url": "https://app.daily.dev/tags/mongodb?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "dd1A-MyzBs_kNOtVG7f1D": {
+    "title": "Spring Data JDBC",
+    "description": "Spring Data JDBC is a part of the Spring Data project that provides support for using JDBC (Java Database Connectivity) to interact with relational databases. It is designed to provide a simple and consistent programming model for interacting with databases using JDBC, while still allowing for the full power of JDBC to be used if needed. Spring Data JDBC provides a set of abstraction and utility classes that simplify the task of working with databases, such as a simple template class for executing SQL queries, a repository abstraction for implementing data access objects (DAOs), and support for pagination and sorting of query results. It works with both Java and Kotlin.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Data JDBC",
+        "url": "https://spring.io/projects/spring-data-jdbc",
+        "type": "article"
+      },
+      {
+        "title": "Spring Data JDBC - Reference Documentation",
+        "url": "https://docs.spring.io/spring-data/jdbc/docs/current/reference/html/",
+        "type": "article"
+      },
+      {
+        "title": "Introduction to Spring Data JDBC",
+        "url": "https://www.baeldung.com/spring-data-jdbc-intro",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Spring Framework",
+        "url": "https://app.daily.dev/tags/spring?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "jU_KHoPUSU_HoIKk0ZpRF": {
+    "title": "Microservices",
+    "description": "Spring Microservices is a framework that makes it easier to build and manage microservices-based applications using the Spring Framework. Microservices is an architectural style in which a large application is built as a collection of small, independently deployable services. Each service has a narrowly defined responsibility and communicates with other services through APIs.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Microservices with Spring",
+        "url": "https://spring.io/microservices",
+        "type": "article"
+      },
+      {
+        "title": "Microservices with Spring Boot ",
+        "url": "https://medium.com/omarelgabrys-blog/microservices-with-spring-boot-intro-to-microservices-part-1-c0d24cd422c3",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Microservices",
+        "url": "https://app.daily.dev/tags/microservices?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "VWNDYSw83Vzi2UPQprJ5z": {
+    "title": "Spring Cloud",
+    "description": "Spring Cloud is a collection of libraries and tools for building cloud-native applications using the Spring Framework. It provides a set of abstractions and implementations for common patterns and best practices used in cloud-based applications, such as service discovery, configuration management, and circuit breaker patterns, among others.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Cloud",
+        "url": "https://spring.io/projects/spring-cloud",
+        "type": "article"
+      },
+      {
+        "title": "Spring Cloud – Bootstrapping",
+        "url": "https://www.baeldung.com/spring-cloud-bootstrapping",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Cloud",
+        "url": "https://app.daily.dev/tags/cloud?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "f-i0NX2KOzCh3JwkaSPFo": {
+    "title": "Spring Cloud Gateway",
+    "description": "Spring Cloud Gateway is a Spring Framework library for building API gateways. An API gateway is a service that acts as an intermediary between an application and a set of microservices. The API gateway is responsible for request routing, composition, and protocol translation, among other things. It can also perform tasks such as authentication, rate limiting, and caching.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Cloud Gateway",
+        "url": "https://spring.io/projects/spring-cloud-gateway",
+        "type": "article"
+      },
+      {
+        "title": "What is Spring Cloud Gateway?",
+        "url": "https://tanzu.vmware.com/developer/guides/scg-what-is/",
+        "type": "article"
+      },
+      {
+        "title": "Exploring the New Spring Cloud Gateway",
+        "url": "https://www.baeldung.com/spring-cloud-gateway",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Cloud",
+        "url": "https://app.daily.dev/tags/cloud?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "9hG3CB8r41bUb_s8-0u73": {
+    "title": "Cloud Config",
+    "description": "Spring Cloud Config is a library for managing configuration properties for distributed applications. It allows developers to externalize configuration properties for an application, so that they can be easily changed without modifying the application's code. It also provides a centralized server for storing and managing configuration properties for multiple applications, making it easy to update and rollback configurations across different environments.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Cloud Config",
+        "url": "https://spring.io/projects/spring-cloud-config",
+        "type": "article"
+      },
+      {
+        "title": "Quick Intro to Spring Cloud Configuration",
+        "url": "https://www.baeldung.com/spring-cloud-configuration",
+        "type": "article"
+      },
+      {
+        "title": "Spring Boot - Cloud Configuration Server",
+        "url": "https://www.tutorialspoint.com/spring_boot/spring_boot_cloud_configuration_server.htm",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Cloud",
+        "url": "https://app.daily.dev/tags/cloud?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "kqpSlO--X9-xYxfq1KFVe": {
+    "title": "Spring Cloud Circuit Breaker",
+    "description": "Spring Cloud Circuit Breaker is a library for managing the fault tolerance of microservices-based applications using the Circuit Breaker pattern. The Circuit Breaker pattern is a design pattern that helps to prevent cascading failures and improve the resilience of distributed systems. It does this by introducing a \"circuit breaker\" proxy in front of a service that can detect when the service is unresponsive or has failed, and stop routing traffic to it temporarily, in order to allow the service to recover.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Cloud Circuit Breaker",
+        "url": "https://spring.io/projects/spring-cloud-circuitbreaker",
+        "type": "article"
+      },
+      {
+        "title": "Quick Guide to Spring Cloud Circuit Breaker",
+        "url": "https://www.baeldung.com/spring-cloud-circuit-breaker",
+        "type": "article"
+      },
+      {
+        "title": "Spring Cloud - Circuit Breaker using Hystrix",
+        "url": "https://www.tutorialspoint.com/spring_cloud/spring_cloud_circuit_breaker_using_hystrix.htm",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Cloud",
+        "url": "https://app.daily.dev/tags/cloud?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "EKSXTMSN2xdaleJ4wOV1A": {
+    "title": "Spring Cloud Open Feign",
+    "description": "Spring Cloud OpenFeign is a library for creating declarative REST clients in Spring applications. It allows developers to easily make HTTP requests to other microservices or remote services, without having to manually write the low-level code to handle the requests and responses. OpenFeign is built on top of the OpenFeign declarative HTTP client, which is a simple, lightweight library for creating HTTP clients in Java.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Introduction to Spring Cloud OpenFeign",
+        "url": "https://www.baeldung.com/spring-cloud-openfeign",
+        "type": "article"
+      },
+      {
+        "title": "Spring Cloud OpenFeign",
+        "url": "https://spring.io/projects/spring-cloud-openfeign",
+        "type": "article"
+      },
+      {
+        "title": "Simple Implementation of Spring Cloud OpenFeign",
+        "url": "https://medium.com/javarevisited/simple-implementation-of-spring-cloud-openfeign-7f022630d01d",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Cloud",
+        "url": "https://app.daily.dev/tags/cloud?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "GsmBGRohWbJ6XOaALFZ8o": {
+    "title": "Micrometer",
+    "description": "",
+    "links": []
+  },
+  "6sLE6gb5Y477SmO2GhQIG": {
+    "title": "Eurkea",
+    "description": "Spring Cloud Eureka is a library for service discovery in a microservices-based architecture. Service discovery is a technique that allows services to find and communicate with each other, without having to hardcode their addresses.\n\nEureka is a service registry that allows service instances to register themselves and to discover other services by name. It provides a simple, consistent way for services to find and communicate with each other, and it integrates with other Spring Cloud libraries such as Ribbon and Feign to provide load balancing and declarative REST clients.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Introduction to Spring Cloud Netflix – Eureka",
+        "url": "https://www.baeldung.com/spring-cloud-netflix-eureka",
+        "type": "article"
+      },
+      {
+        "title": "Spring Boot - Eureka Server",
+        "url": "https://www.tutorialspoint.com/spring_boot/spring_boot_eureka_server.htm",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Backend Development",
+        "url": "https://app.daily.dev/tags/backend?ref=roadmapsh",
+        "type": "article"
+      },
+      {
+        "title": "Introducing Spring Cloud EUREKA",
+        "url": "https://www.youtube.com/watch?v=1uNo1NrqsX4",
+        "type": "video"
+      }
+    ]
+  },
+  "S-BbOoRD7anvoJrprjoKF": {
+    "title": "Spring MVC",
+    "description": "Spring MVC is a web application framework that is part of the Spring Framework. It is designed to make it easy to build web applications using the Model-View-Controller (MVC) design pattern.\n\nIn Spring MVC, the application is divided into three main components: the Model, the View, and the Controller. The Model represents the data and the business logic of the application, the View is responsible for generating the HTML that is sent to the client's web browser, and the Controller acts as an intermediary between the Model and the View, handling incoming HTTP requests and generating the appropriate response.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring - MVC Framework",
+        "url": "https://www.tutorialspoint.com/spring/spring_web_mvc_framework.htm",
+        "type": "article"
+      },
+      {
+        "title": "Spring MVC Tutorial – Everything You Need To Know",
+        "url": "https://www.edureka.co/blog/spring-mvc-tutorial/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Spring Framework",
+        "url": "https://app.daily.dev/tags/spring?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "35NTx2eO1j02sjy4m6DPq": {
+    "title": "Servlet",
+    "description": "A Spring servlet is a Java class that serves as the central point for handling requests and managing the lifecycle of the Spring IoC container. The Spring Framework provides a class called DispatcherServlet, which acts as the front controller in a Spring-based web application. When a user makes a request to a Spring web application, the DispatcherServlet is responsible for handling the request, delegating responsibility to other components, and ultimately returning a response to the user. The DispatcherServlet also manages the lifecycle of the Spring IoC container, including creating and initializing the container and making its beans available for use by other components in the application.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "The DispatcherServlet",
+        "url": "https://docs.spring.io/spring-framework/docs/3.0.0.M4/spring-framework-reference/html/ch15s02.html",
+        "type": "article"
+      },
+      {
+        "title": "DispatcherServlet and web.xml in Spring Boot",
+        "url": "https://www.baeldung.com/spring-boot-dispatcherservlet-web-xml",
+        "type": "article"
+      }
+    ]
+  },
+  "Lz0GPMiYzb30iFJdv1dL6": {
+    "title": "JSP Files",
+    "description": "JSP (JavaServer Pages) is a technology for building dynamic web pages using Java.\n\nIn a Spring MVC application that uses JSPs, the view component of the MVC pattern is implemented using JSP files. The JSP files contain the presentation logic for the application and are responsible for generating the HTML that is sent to the client's web browser. When a user makes a request to a Spring MVC application, the DispatcherServlet, which acts as the front controller, handles the request and delegates responsibility for generating the response to the appropriate JSP file.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring Boot With JavaServer Pages (JSP)",
+        "url": "https://www.baeldung.com/spring-boot-jsp",
+        "type": "article"
+      },
+      {
+        "title": "Spring MVC: from JSP and Tiles to Thymeleaf",
+        "url": "https://spring.io/blog/2012/10/30/spring-mvc-from-jsp-and-tiles-to-thymeleaf/",
+        "type": "article"
+      }
+    ]
+  },
+  "_vS_zdJZegZS6MIKAFyg8": {
+    "title": "Architecture",
+    "description": "The Spring MVC (Model-View-Controller) is a web application framework that is part of the Spring Framework. It is designed to make it easy to build web applications using the MVC design pattern.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Overview of Spring MVC Architecture",
+        "url": "https://terasolunaorg.github.io/guideline/1.0.1.RELEASE/en/Overview/SpringMVCOverview.html",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Architecture",
+        "url": "https://app.daily.dev/tags/architecture?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "sgA06Tu9Y4cEHtfI8CyLL": {
+    "title": "Components",
+    "description": "The Spring MVC (Model-View-Controller) framework has several key components that work together to handle the requests and generate the appropriate responses in a web application.\n\nThere are other supporting components that are used to manage the lifecycle of the application's objects, such as the Spring IoC container and different interceptors that provides additional functionality, such as caching and security.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Web MVC Framework",
+        "url": "https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/mvc.html",
+        "type": "article"
+      }
+    ]
+  },
+  "7Qqrh_Rz_7uAD49g9sDzi": {
+    "title": "Testing",
+    "description": "Spring provides a set of testing utilities that make it easy to test the various components of a Spring application, including controllers, services, repositories, and other components. It has a rich set of testing annotations, utility classes and other features to aid in unit testing, integration testing and more.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "What Is Spring Testing?",
+        "url": "https://www.developer.com/design/what-is-spring-testing/",
+        "type": "article"
+      },
+      {
+        "title": "Complete Guide To Spring Testing",
+        "url": "https://www.lambdatest.com/blog/spring-testing/",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Testing",
+        "url": "https://app.daily.dev/tags/testing?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "Nhx2QiSD_4pVWD17lsCbu": {
+    "title": "JPA Test",
+    "description": "Spring JPA (Java Persistence API) is a library that makes it easy to work with databases and other data stores in a Spring application. Spring JPA uses the Java Persistence API (JPA) to interact with databases and provides an abstraction layer to work with different data stores.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Testing JPA Queries with Spring Boot and @DataJpaTest",
+        "url": "https://reflectoring.io/spring-boot-data-jpa-test/",
+        "type": "article"
+      },
+      {
+        "title": "@DataJpaTest example for Spring Data Repository Unit Test",
+        "url": "https://www.bezkoder.com/spring-boot-unit-test-jpa-repo-datajpatest/",
+        "type": "article"
+      },
+      {
+        "title": "Testing in Spring Boot",
+        "url": "https://www.baeldung.com/spring-boot-testing",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Java",
+        "url": "https://app.daily.dev/tags/java?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "5d1BERqTKNJMKiBcqa8Ie": {
+    "title": "Mock MVC",
+    "description": "Spring's MockMvc is a class that allows you to test Spring MVC controllers without the need for an actual web server. It is part of the Spring Test module, which provides a set of testing utilities for Spring applications.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Spring MockMVC tutorial",
+        "url": "https://zetcode.com/spring/mockmvc/",
+        "type": "article"
+      },
+      {
+        "title": "Spring Boot MockMVC Example",
+        "url": "https://howtodoinjava.com/spring-boot2/testing/spring-boot-mockmvc-example/",
+        "type": "article"
+      },
+      {
+        "title": "Integration Testing in Spring",
+        "url": "https://baeldung.com/integration-testing-in-spring",
+        "type": "article"
+      }
+    ]
+  },
+  "p91CaVPh5GMzFU0yEU_hl": {
+    "title": "@SpringBootTest Annotation",
+    "description": "`@SpringBootTest` This annotation is used to create a fully-configured instance of the Spring ApplicationContext for testing. It can be used to test the application's components, including controllers, services, and repositories, in a real application environment.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Testing with Spring Boot and @SpringBootTest",
+        "url": "https://reflectoring.io/spring-boot-test/",
+        "type": "article"
+      },
+      {
+        "title": "Annotation Interface SpringBootTest",
+        "url": "https://docs.spring.io/spring-boot/docs/current/api/org/springframework/boot/test/context/SpringBootTest.html",
+        "type": "article"
+      },
+      {
+        "title": "Testing in Spring Boot",
+        "url": "https://www.baeldung.com/spring-boot-testing",
+        "type": "article"
+      },
+      {
+        "title": "Explore top posts about Spring Framework",
+        "url": "https://app.daily.dev/tags/spring?ref=roadmapsh",
+        "type": "article"
+      }
+    ]
+  },
+  "i77NTa0hpGGBjmql9u_CT": {
+    "title": "@MockBean Annotation",
+    "description": "`MockBean` is a Spring annotation that can be used to create a mock implementation of a bean in the Spring application context. When a test is annotated with MockBean, Spring creates a mock implementation of the specified bean and adds it to the application context. The mock bean can then be used to replace the real bean during testing.\n\nVisit the following resources to learn more:",
+    "links": [
+      {
+        "title": "Annotation Interface MockBean",
+        "url": "https://docs.spring.io/spring-boot/docs/current/api/org/springframework/boot/test/mock/mockito/MockBean.html",
+        "type": "article"
+      },
+      {
+        "title": "Mockito.mock() vs @Mock vs @MockBean",
+        "url": "https://www.baeldung.com/java-spring-mockito-mock-mockbean",
+        "type": "article"
+      },
+      {
+        "title": "Spring Boot @MockBean Example",
+        "url": "https://howtodoinjava.com/spring-boot2/testing/spring-mockbean-annotation/",
+        "type": "article"
+      }
+    ]
+  }
+}

public/roadmap-content/sql.json

@@ -28,7 +28,7 @@
   },
   "nhUKKWyBH80nyKfGT8ErC": {
     "title": "Learn the Basics",
-    "description": "SQL, which stands for Structured Query Language, is a programming language that is used to communicate with and manage databases. SQL is a standard language for manipulating data held in relational database management systems (RDBMS), or for stream processing in a relational data stream management system (RDSMS). It was first developed in the 1970s by IBM.\n\nSQL consists of several components, each serving their own unique purpose in database communication:\n\n*   **Queries:** This is the component that allows you to retrieve data from a database. The SELECT statement is most commonly used for this purpose.\n*   **Data Definition Language (DDL):** It lets you to create, alter, or delete databases and their related objects like tables, views, etc. Commands include CREATE, ALTER, DROP, and TRUNCATE.\n*   **Data Manipulation Language (DML):** It lets you manage data within database objects. These commands include SELECT, INSERT, UPDATE, and DELETE.\n*   **Data Control Language (DCL):** It includes commands like GRANT and REVOKE, which primarily deal with rights, permissions and other control-level management tasks for the database system.\n\nSQL databases come in a number of forms, such as Oracle Database, Microsoft SQL Server, and MySQL. Despite their many differences, all SQL databases utilise the same language commands - SQL.\n\nLearn more about SQL from the following resources:",
+    "description": "SQL, which stands for Structured Query Language, is a programming language that is used to communicate with and manage databases. SQL is a standard language for manipulating data held in relational database management systems (RDBMS), or for stream processing in a relational data stream management system (RDSMS). It was first developed in the 1970s by IBM.\n\nSQL consists of several components, each serving their own unique purpose in database communication:\n\n*   **Queries:** This is the component that allows you to retrieve data from a database. The SELECT statement is most commonly used for this purpose.\n*   **Data Definition Language (DDL):** It lets you create, alter, or delete databases and their related objects like tables, views, etc. Commands include CREATE, ALTER, DROP, and TRUNCATE.\n*   **Data Manipulation Language (DML):** It lets you manage data within database objects. These commands include SELECT, INSERT, UPDATE, and DELETE.\n*   **Data Control Language (DCL):** It includes commands like GRANT and REVOKE, which primarily deal with rights, permissions and other control-level management tasks for the database system.\n\nSQL databases come in a number of forms, such as Oracle Database, Microsoft SQL Server, and MySQL. Despite their many differences, all SQL databases utilise the same language commands - SQL.\n\nLearn more about SQL from the following resources:",
     "links": [
       {
         "title": "SQL Tutorial - Mode",
@@ -39,11 +39,6 @@
         "title": "SQL Tutorial",
         "url": "https://www.sqltutorial.org/",
         "type": "article"
-      },
-      {
-        "title": "SQL Tutorial - W3Schools",
-        "url": "https://www.w3schools.com/sql/default.asp",
-        "type": "article"
       }
     ]
   },
@@ -76,11 +71,6 @@
         "title": "SQL Tutorial",
         "url": "https://www.sqltutorial.org/",
         "type": "article"
-      },
-      {
-        "title": "SQL Tutorial - W3Schools",
-        "url": "https://www.w3schools.com/sql/default.asp",
-        "type": "article"
       }
     ]
   },
@@ -88,11 +78,6 @@
     "title": "SQL Keywords",
     "description": "SQL keywords are reserved words that have special meanings within SQL statements. These include commands (like `SELECT`, `INSERT`, `UPDATE`), clauses (such as `WHERE`, `GROUP BY`, `HAVING`), and other syntax elements that form the structure of SQL queries. Understanding SQL keywords is fundamental to writing correct and effective database queries. Keywords are typically case-insensitive but are often written in uppercase by convention for better readability.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL Keywords Reference",
-        "url": "https://www.w3schools.com/sql/sql_ref_keywords.asp",
-        "type": "article"
-      },
       {
         "title": "SQL Keywords, Operators and Statements",
         "url": "https://blog.hubspot.com/website/sql-keywords-operators-statements",
@@ -120,11 +105,6 @@
     "title": "Operators",
     "description": "SQL operators are symbols or keywords used to perform operations on data within a database. They are essential for constructing queries that filter, compare, and manipulate data. Common types of operators include arithmetic operators (e.g., `+`, `-`, `*`, `/`), which perform mathematical calculations; comparison operators (e.g., `=`, `!=`, `<`, `>`), used to compare values; logical operators (e.g., `AND`, `OR`, `NOT`), which combine multiple conditions in a query; and set operators (e.g., `UNION`, `INTERSECT`, `EXCEPT`), which combine results from multiple queries. These operators enable precise control over data retrieval and modification.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL Operators",
-        "url": "https://www.w3schools.com/sql/sql_operators.asp",
-        "type": "article"
-      },
       {
         "title": "SQL Operators: 6 Different Types",
         "url": "https://www.dataquest.io/blog/sql-operators/",
@@ -135,23 +115,12 @@
   "rmqXH29n1oXtZ8tvmcRFn": {
     "title": "SELECT",
     "description": "SELECT is one of the most fundamental SQL commands, used to retrieve data from one or more tables in a database. It allows you to specify which columns to fetch, apply filtering conditions, sort results, and perform various operations on the data. The SELECT statement is versatile, supporting joins, subqueries, aggregations, and more, making it essential for data querying and analysis in relational databases.\n\nLearn more from the following resources:",
-    "links": [
-      {
-        "title": "SQL_Select",
-        "url": "https://www.w3schools.com/sql/sql_select.asp",
-        "type": "article"
-      }
-    ]
+    "links": []
   },
   "mPj6BiK5FKKkIQ9WsWEo6": {
     "title": "INSERT",
     "description": "The \"INSERT\" statement is used to add new rows of data to a table in a database. There are two main forms of the INSERT command: `INSERT INTO` which, if columns are not named, expects a full set of columns, and `INSERT INTO table_name (column1, column2, ...)` where only named columns will be filled with data.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL INSERT",
-        "url": "https://www.w3schools.com/sql/sql_insert.asp",
-        "type": "article"
-      },
       {
         "title": "SQL INSERT Statement",
         "url": "https://www.youtube.com/watch?v=Yp1MKeIG-M4",
@@ -163,11 +132,6 @@
     "title": "UPDATE",
     "description": "The UPDATE statement in SQL is used to modify existing records in a table. It allows you to change the values of one or more columns based on specified conditions. The basic syntax includes specifying the table name, the columns to be updated with their new values, and optionally, a WHERE clause to filter which rows should be affected. UPDATE can be used in conjunction with subqueries, joins, and CTEs (Common Table Expressions) for more complex data modifications. It's important to use UPDATE carefully, especially with the WHERE clause, to avoid unintended changes to data. In transactional databases, UPDATE operations can be rolled back if they're part of a transaction that hasn't been committed.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL UPDATE Statement",
-        "url": "https://www.w3schools.com/sql/sql_update.asp",
-        "type": "article"
-      },
       {
         "title": "Efficient column updates in SQL",
         "url": "https://www.atlassian.com/data/sql/how-to-update-a-column-based-on-a-filter-of-another-column",
@@ -254,11 +218,6 @@
     "title": "Drop Table",
     "description": "The `DROP TABLE` statement is a Data Definition Language (DDL) operation that is used to **completely remove** a table from the database. This operation deletes the table structure along with **all the data in** it, effectively removing the table from the database system.\n\nWhen you execute the `DROP TABLE` statement, it eliminates both the table and its data, as well as any associated indexes, constraints, and triggers. Unlike the `TRUNCATE TABLE` statement, which only removes data but keeps the table structure, `DROP TABLE` removes everything associated with the table.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "DROP TABLE",
-        "url": "https://www.w3schools.com/sql/sql_drop_table.asp",
-        "type": "article"
-      },
       {
         "title": "Drop a Table",
         "url": "https://www.coginiti.co/tutorials/beginner/drop-a-table/",
@@ -290,23 +249,12 @@
   "i8u8E_sne6XiKJo2FXDog": {
     "title": "Select",
     "description": "SELECT is one of the most fundamental SQL commands, used to retrieve data from one or more tables in a database. It allows you to specify which columns to fetch, apply filtering conditions, sort results, and perform various operations on the data. The SELECT statement is versatile, supporting joins, subqueries, aggregations, and more, making it essential for data querying and analysis in relational databases.\n\nLearn more from the following resources:",
-    "links": [
-      {
-        "title": "SQL_Select",
-        "url": "https://www.w3schools.com/sql/sql_select.asp",
-        "type": "article"
-      }
-    ]
+    "links": []
   },
   "N1Racr3ZpU320gS545We8": {
     "title": "FROM",
     "description": "The `FROM` clause in SQL specifies the tables from which the retrieval should be made. It is an integral part of `SELECT` statements and variants of `SELECT` like `SELECT INTO` and `SELECT WHERE`. `FROM` can be used to join tables as well.\n\nTypically, `FROM` is followed by space delimited list of tables in which the SELECT operation is to be executed. If you need to pull data from multiple tables, you would separate each table with a comma.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL FROM Keyword",
-        "url": "https://www.w3schools.com/sql/sql_ref_from.asp",
-        "type": "article"
-      },
       {
         "title": "How to write basic SQL",
         "url": "https://www.youtube.com/watch?v=YfTDBA45PHk",
@@ -334,11 +282,6 @@
     "title": "ORDER BY",
     "description": "The `ORDER BY` clause in SQL is used to sort the result set of a query by one or more columns. By default, the sorting is in ascending order, but you can specify descending order using the `DESC` keyword. The clause can sort by numeric, date, or text values, and multiple columns can be sorted by listing them in the `ORDER BY` clause, each with its own sorting direction. This clause is crucial for organizing data in a meaningful sequence, such as ordering by a timestamp to show the most recent records first, or alphabetically by name.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL ORDER BY Keyword",
-        "url": "https://www.w3schools.com/sql/sql_orderby.asp",
-        "type": "article"
-      },
       {
         "title": "SQL ORDER BY Sorting Clause",
         "url": "https://www.youtube.com/watch?v=h_HHTNjAgS8",
@@ -398,11 +341,6 @@
     "title": "INSERT",
     "description": "The \"INSERT\" statement is used to add new rows of data to a table in a database. There are two main forms of the INSERT command: `INSERT INTO` which, if columns are not named, expects a full set of columns, and `INSERT INTO table_name (column1, column2, ...)` where only named columns will be filled with data.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL INSERT",
-        "url": "https://www.w3schools.com/sql/sql_insert.asp",
-        "type": "article"
-      },
       {
         "title": "SQL INSERT Statement",
         "url": "https://www.youtube.com/watch?v=Yp1MKeIG-M4",
@@ -414,11 +352,6 @@
     "title": "UPDATE",
     "description": "The UPDATE statement in SQL is used to modify existing records in a table. It allows you to change the values of one or more columns based on specified conditions. The basic syntax includes specifying the table name, the columns to be updated with their new values, and optionally, a WHERE clause to filter which rows should be affected. UPDATE can be used in conjunction with subqueries, joins, and CTEs (Common Table Expressions) for more complex data modifications. It's important to use UPDATE carefully, especially with the WHERE clause, to avoid unintended changes to data. In transactional databases, UPDATE operations can be rolled back if they're part of a transaction that hasn't been committed.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL UPDATE Statement",
-        "url": "https://www.w3schools.com/sql/sql_update.asp",
-        "type": "article"
-      },
       {
         "title": "Efficient column updates in SQL",
         "url": "https://www.atlassian.com/data/sql/how-to-update-a-column-based-on-a-filter-of-another-column",
@@ -446,11 +379,6 @@
     "title": "SUM",
     "description": "SUM is an aggregate function in SQL used to calculate the total of a set of values. It's commonly used with numeric columns in combination with GROUP BY clauses to compute totals for different categories or groups within the data. SUM is essential for financial calculations, statistical analysis, and generating summary reports from database tables. It ignores NULL values and can be used in conjunction with other aggregate functions for complex data analysis.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL SUM Function",
-        "url": "https://www.w3schools.com/sql/sql_sum.asp",
-        "type": "article"
-      },
       {
         "title": "SQL SUM",
         "url": "https://www.studysmarter.co.uk/explanations/computer-science/databases/sql-sum/",
@@ -462,11 +390,6 @@
     "title": "COUNT",
     "description": "`COUNT` is an SQL aggregate function that returns the number of rows that match the specified criteria. It can be used to count all rows in a table, non-null values in a specific column, or rows that meet certain conditions when combined with a `WHERE` clause. `COUNT` is often used in data analysis, reporting, and performance optimization queries to determine the size of datasets or the frequency of particular values.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "COUNT",
-        "url": "https://www.w3schools.com/sql/sql_count.asp",
-        "type": "article"
-      },
       {
         "title": "COUNT SQL Function",
         "url": "https://www.datacamp.com/tutorial/count-sql-function",
@@ -558,11 +481,6 @@
     "title": "Data Constraints",
     "description": "Data constraints in SQL are rules applied to columns or tables to enforce data integrity and consistency. They include primary key, foreign key, unique, check, and not null constraints. These constraints define limitations on the data that can be inserted, updated, or deleted in a database, ensuring that the data meets specific criteria and maintains relationships between tables. By implementing data constraints, database designers can prevent invalid data entry, maintain referential integrity, and enforce business rules directly at the database level.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "Data Constraints",
-        "url": "https://www.w3schools.com/sql/sql_constraints.asp",
-        "type": "article"
-      },
       {
         "title": "SQL Constraints",
         "url": "https://www.programiz.com/sql/constraints",
@@ -574,11 +492,6 @@
     "title": "Primary Key",
     "description": "A primary key in SQL is a unique identifier for each record in a database table. It ensures that each row in the table is uniquely identifiable, meaning no two rows can have the same primary key value. A primary key is composed of one or more columns, and it must contain unique values without any `NULL` entries. The primary key enforces entity integrity by preventing duplicate records and ensuring that each record can be precisely located and referenced, often through foreign key relationships in other tables. Using a primary key is fundamental for establishing relationships between tables and maintaining the integrity of the data model.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL PRIMARY KEY Constraint",
-        "url": "https://www.w3schools.com/sql/sql_primarykey.ASP",
-        "type": "article"
-      },
       {
         "title": "SQL Primary Key",
         "url": "https://www.tutorialspoint.com/sql/sql-primary-key.htm",
@@ -633,11 +546,6 @@
     "title": "CHECK",
     "description": "A `CHECK` constraint in SQL is used to enforce data integrity by specifying a condition that must be true for each row in a table. It allows you to define custom rules or restrictions on the values that can be inserted or updated in one or more columns. `CHECK` constraints help maintain data quality by preventing invalid or inconsistent data from being added to the database, ensuring that only data meeting specified criteria is accepted.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL CHECK Constraint",
-        "url": "https://www.w3schools.com/sql/sql_check.asp",
-        "type": "article"
-      },
       {
         "title": "CHECK Constraint",
         "url": "https://www.youtube.com/watch?v=EeG2boJCXbc",
@@ -665,11 +573,6 @@
     "title": "INNER JOIN",
     "description": "An `INNER JOIN` in SQL is a type of join that returns the records with matching values in both tables. This operation compares each row of the first table with each row of the second table to find all pairs of rows that satisfy the join predicate.\n\nFew things to consider in case of `INNER JOIN`:\n\n*   It is a default join in SQL. If you mention `JOIN` in your query without specifying the type, SQL considers it as an `INNER JOIN`.\n*   It returns only the matching rows from both the tables.\n*   If there is no match, the returned is an empty result.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL INNER JOIN",
-        "url": "https://www.w3schools.com/sql/sql_join_inner.asp",
-        "type": "article"
-      },
       {
         "title": "SQL INNER JOIN Clause",
         "url": "https://www.programiz.com/sql/inner-join",
@@ -681,11 +584,6 @@
     "title": "LEFT JOIN",
     "description": "A `LEFT JOIN` in SQL returns all rows from the left (first) table and the matching rows from the right (second) table. If there's no match in the right table, `NULL` values are returned for those columns. This join type is useful when you want to see all records from one table, regardless of whether they have corresponding entries in another table. `LEFT JOIN`s are commonly used for finding missing relationships, creating reports that include all primary records, or when working with data where not all entries have corresponding matches in related tables.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL LEFT JOIN",
-        "url": "https://www.w3schools.com/sql/sql_join_left.asp",
-        "type": "article"
-      },
       {
         "title": "SQL LEFT JOIN - SQL Tutorial",
         "url": "https://www.youtube.com/watch?v=giKwmtsz1U8",
@@ -697,11 +595,6 @@
     "title": "RIGHT JOIN",
     "description": "A `RIGHT JOIN` in SQL is a type of outer join that returns all rows from the right (second) table and the matching rows from the left (first) table. If there's no match in the left table, `NULL` values are returned for the left table's columns. This join type is less commonly used than LEFT JOIN but is particularly useful when you want to ensure all records from the second table are included in the result set, regardless of whether they have corresponding matches in the first table. `RIGHT JOIN` is often used to identify missing relationships or to include all possible values from a lookup table.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL RIGHT JOIN",
-        "url": "https://www.w3schools.com/sql/sql_join_right.asp",
-        "type": "article"
-      },
       {
         "title": "SQL RIGHT JOIN With Examples",
         "url": "https://www.programiz.com/sql/right-join",
@@ -713,11 +606,6 @@
     "title": "FULL OUTER JOIN",
     "description": "A `FULL OUTER JOIN` in SQL combines the results of both `LEFT` and `RIGHT OUTER JOIN`s. It returns all rows from both tables, matching records where the join condition is met and including unmatched rows from both tables with `NULL` values in place of missing data. This join type is useful when you need to see all data from both tables, regardless of whether there are matching rows, and is particularly valuable for identifying missing relationships or performing data reconciliation between two tables.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "FULL OUTER JOIN",
-        "url": "https://www.w3schools.com/sql/sql_join_full.asp",
-        "type": "article"
-      },
       {
         "title": "SQL FULL OUTER JOIN",
         "url": "https://www.youtube.com/watch?v=XpBkXo3DCEg",
@@ -745,11 +633,6 @@
     "title": "Cross Join",
     "description": "The cross join in SQL is used to combine every row of the first table with every row of the second table. It's also known as the Cartesian product of the two tables. The most important aspect of performing a cross join is that it does not require any condition to join.\n\nThe issue with cross join is it returns the Cartesian product of the two tables, which can result in large numbers of rows and heavy resource usage. It's hence critical to use them wisely and only when necessary.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "CROSS JOIN",
-        "url": "https://www.w3schools.com/mysql/mysql_join_cross.asp",
-        "type": "article"
-      },
       {
         "title": "SQL CROSS JOIN With Examples",
         "url": "https://www.sqlshack.com/sql-cross-join-with-examples/",
@@ -793,11 +676,6 @@
     "title": "Column",
     "description": "In SQL, columns are used to categorize the data in a table. A column serves as a structure that stores a specific type of data (ints, str, bool, etc.) in a table. Each column in a table is designed with a type, which configures the data that it can hold. Using the right column types and size can help to maintain data integrity and optimize performance.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL Column",
-        "url": "https://www.w3schools.com/sql/sql_ref_column.asp",
-        "type": "article"
-      },
       {
         "title": "Column Types - PostgreSQL",
         "url": "https://www.postgresqltutorial.com/postgresql-tutorial/postgresql-data-types/",
@@ -878,11 +756,6 @@
     "title": "FLOOR",
     "description": "The SQL `FLOOR` function is used to round down any specific decimal or numeric value to its nearest whole integer. The returned number will be less than or equal to the number given as an argument.\n\nOne important aspect to note is that the `FLOOR` function's argument must be a number and it always returns an integer.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "FLOOR",
-        "url": "https://www.w3schools.com/sql/func_sqlserver_floor.asp",
-        "type": "article"
-      },
       {
         "title": "How to Round in SQL",
         "url": "https://www.youtube.com/watch?v=AUXw2JRwCFY",
@@ -910,11 +783,6 @@
     "title": "MOD",
     "description": "The `MOD` function in SQL calculates the remainder when one number is divided by another. It takes two arguments: the dividend and the divisor. `MOD` returns the remainder of the division operation, which is useful for various mathematical operations, including checking for odd/even numbers, implementing cyclic behaviors, or distributing data evenly. The syntax and exact behavior may vary slightly between different database systems, with some using the % operator instead of the `MOD` keyword.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "MOD",
-        "url": "https://www.w3schools.com/sql/func_mysql_mod.asp",
-        "type": "article"
-      },
       {
         "title": "MOD Function in SQL",
         "url": "https://www.youtube.com/watch?v=f1Rqf7CwjE0",
@@ -926,11 +794,6 @@
     "title": "ROUND",
     "description": "The `ROUND` function in SQL is used to round a numeric value to a specified number of decimal places. It takes two arguments: the number to be rounded and the number of decimal places to round to. If the second argument is omitted, the function rounds the number to the nearest whole number. For positive values of the second argument, the number is rounded to the specified decimal places; for negative values, it rounds to the nearest ten, hundred, thousand, etc. The `ROUND` function is useful for formatting numerical data for reporting or ensuring consistent precision in calculations.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL ROUND",
-        "url": "https://www.w3schools.com/sql/func_sqlserver_round.asp",
-        "type": "article"
-      },
       {
         "title": "What is the SQL ROUND Function and how does it work?",
         "url": "https://www.datacamp.com/tutorial/mastering-sql-round",
@@ -957,11 +820,6 @@
         "title": "An overview of the CONCAT function in SQL",
         "url": "https://www.sqlshack.com/an-overview-of-the-concat-function-in-sql-with-examples/",
         "type": "article"
-      },
-      {
-        "title": "SQL Server CONCAT",
-        "url": "https://www.w3schools.com/sql/func_sqlserver_concat.asp",
-        "type": "article"
       }
     ]
   },
@@ -1001,11 +859,6 @@
     "title": "REPLACE",
     "description": "The `REPLACE` function in SQL is used to substitute all occurrences of a specified substring within a string with a new substring. It takes three arguments: the original string, the substring to be replaced, and the substring to replace it with. If the specified substring is found in the original string, `REPLACE` returns the modified string with all instances of the old substring replaced by the new one. If the substring is not found, the original string is returned unchanged. This function is particularly useful for data cleaning tasks, such as correcting typos, standardizing formats, or replacing obsolete data.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL REPLACE Function",
-        "url": "https://www.w3schools.com/sql/func_sqlserver_replace.asp",
-        "type": "article"
-      },
       {
         "title": "How to use the SQL REPLACE Function",
         "url": "https://www.datacamp.com/tutorial/sql-replace",
@@ -1017,11 +870,6 @@
     "title": "UPPER",
     "description": "UPPER() is a string function in SQL used to convert all characters in a specified string to uppercase. This function is particularly useful for data normalization, case-insensitive comparisons, or formatting output. UPPER() typically works on alphabetic characters and leaves non-alphabetic characters unchanged. It's often used in SELECT statements to display data, in WHERE clauses for case-insensitive searches, or in data manipulation operations. Most SQL databases also provide a complementary LOWER() function for converting to lowercase. When working with international character sets, it's important to be aware of potential locale-specific behavior of UPPER().\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL Server UPPER Function",
-        "url": "https://www.w3schools.com/sql/func_sqlserver_upper.asp",
-        "type": "article"
-      },
       {
         "title": "How to Convert a String to Uppercase in SQL",
         "url": "https://learnsql.com/cookbook/how-to-convert-a-string-to-uppercase-in-sql/",
@@ -1049,11 +897,6 @@
     "title": "CASE",
     "description": "The CASE statement in SQL is used to create conditional logic within a query, allowing you to perform different actions based on specific conditions. It operates like an if-else statement, returning different values depending on the outcome of each condition. The syntax typically involves specifying one or more WHEN conditions, followed by the result for each condition, and an optional ELSE clause for a default outcome if none of the conditions are met.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL CASE Expression",
-        "url": "https://www.w3schools.com/sql/sql_case.asp",
-        "type": "article"
-      },
       {
         "title": "SQL CASE - Intermediate SQL",
         "url": "https://mode.com/sql-tutorial/sql-case",
@@ -1065,11 +908,6 @@
     "title": "NULLIF",
     "description": "`NULLIF` is an SQL function that compares two expressions and returns NULL if they are equal, otherwise it returns the first expression. It's particularly useful for avoiding division by zero errors or for treating specific values as `NULL` in calculations or comparisons. `NULLIF` takes two arguments and is often used in combination with aggregate functions or in `CASE` statements to handle special cases in data processing or reporting.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "NULLIF",
-        "url": "https://www.w3schools.com/sql/func_sqlserver_nullif.asp",
-        "type": "article"
-      },
       {
         "title": "What is NULLIF in SQL?",
         "url": "https://www.youtube.com/watch?v=Jaw53T__RRY",
@@ -1097,11 +935,6 @@
     "title": "DATE",
     "description": "The DATE data type in SQL is used to store calendar dates (typically in the format YYYY-MM-DD). It represents a specific day without any time information. DATE columns are commonly used for storing birthdates, event dates, or any other data that requires only day-level precision. SQL provides various functions to manipulate and format DATE values, allowing for date arithmetic, extraction of date components, and comparison between dates. The exact range of valid dates may vary depending on the specific database management system being used.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "SQL DATE",
-        "url": "https://www.w3schools.com/sql/sql_dates.asp",
-        "type": "article"
-      },
       {
         "title": "Working with Dates",
         "url": "https://www.youtube.com/watch?v=XyZ9HwXoR7o",
@@ -1118,11 +951,6 @@
     "title": "TIMESTAMP",
     "description": "SQL `TIMESTAMP` is a data type that allows you to store both date and time. It is typically used to track updates and changes made to a record, providing a chronological time of happenings.\n\nDepending on the SQL platform, the format and storage size can slightly vary. For instance, MySQL uses the 'YYYY-MM-DD HH:MI:SS' format and in PostgreSQL, it's stored as a 'YYYY-MM-DD HH:MI:SS' format but it additionally can store microseconds.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "MYSQL TIMESTAMP function",
-        "url": "https://www.w3schools.com/mysql/func_mysql_timestamp.asp",
-        "type": "article"
-      },
       {
         "title": "Different SQL TimeStamp functions in SQL Server",
         "url": "https://www.sqlshack.com/different-sql-timestamp-functions-in-sql-server/",
@@ -1134,11 +962,6 @@
     "title": "DATEPART",
     "description": "`DATEPART` is a useful function in SQL that allows you to extract a specific part of a date or time field. You can use it to get the year, quarter, month, day of the year, day, week, weekday, hour, minute, second, or millisecond from any date or time expression.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "DATEPART",
-        "url": "https://www.w3schools.com/sql/func_sqlserver_datepart.asp",
-        "type": "article"
-      },
       {
         "title": "SQL DATEPART",
         "url": "https://hightouch.com/sql-dictionary/sql-datepart",
@@ -1230,11 +1053,6 @@
     "title": "Indexes",
     "description": "Indexes in SQL are database objects that improve the speed of data retrieval operations on database tables. They work similarly to book indexes, providing a quick lookup mechanism for finding rows with specific column values. Indexes create a separate data structure that allows the database engine to locate data without scanning the entire table. While they speed up `SELECT` queries, indexes can slow down `INSERT`, `UPDATE`, and `DELETE` operations because the index structure must be updated. Proper index design is crucial for optimizing database performance, especially for large tables or frequently queried columns.\n\nLearn more from the following resources:",
     "links": [
-      {
-        "title": "Create SQL Index Statement",
-        "url": "https://www.w3schools.com/sql/sql_create_index.asp",
-        "type": "article"
-      },
       {
         "title": "SQL Indexing Best Practices",
         "url": "https://www.youtube.com/watch?v=BIlFTFrEFOI",

public/roadmap-content/system-design.json

@@ -731,11 +731,6 @@
     "title": "Asynchronism",
     "description": "Asynchronous workflows help reduce request times for expensive operations that would otherwise be performed in-line. They can also help by doing time-consuming work in advance, such as periodic aggregation of data.\n\nTo learn more, visit the following links:",
     "links": [
-      {
-        "title": "Asynchronous Thinking for Microservice System Design",
-        "url": "https://www.datamachines.io/blog/asynchronous-thinking-for-microservice-system-design",
-        "type": "article"
-      },
       {
         "title": "Patterns for microservices - Sync vs Async",
         "url": "https://medium.com/inspiredbrilliance/patterns-for-microservices-e57a2d71ff9e",

public/roadmap-content/vue.json

@@ -383,11 +383,6 @@
         "title": "v-on Documentation",
         "url": "https://vuejs.org/api/built-in-directives.html#v-on",
         "type": "article"
-      },
-      {
-        "title": "v-on Directive",
-        "url": "https://www.w3schools.com/vue/ref_v-on.php",
-        "type": "article"
       }
     ]
   },
@@ -1258,11 +1253,6 @@
         "url": "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch",
         "type": "article"
       },
-      {
-        "title": "Fetch W3school Docs",
-        "url": "https://www.w3schools.com/jsref/api_fetch.asp",
-        "type": "article"
-      },
       {
         "title": "Network Request - Fetch",
         "url": "https://javascript.info/fetch",

readme.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://roadmap.sh/"><img src="public/images/brand.png" height="128"></a>
+  <a href="https://roadmap.sh/"><img src="public/img/brand.png" height="128"></a>
   <h2 align="center"><a href="https://roadmap.sh">roadmap.sh</a></h2>
   <p align="center">Community driven roadmaps, articles and resources for developers<p>
   <p align="center">

scripts/compressed-images.json

@@ -36,33 +36,33 @@
   "public/guides/torrent-client/pipelining.png",
   "public/guides/unfamiliar-codebase.png",
   "public/guides/web-vitals.png",
-  "public/images/brand.png",
-  "public/images/default-avatar.png",
-  "public/images/features/in-progress.png",
-  "public/images/icons8-wand.gif",
-  "public/images/partners/ambassador-graphic-1.png",
-  "public/images/partners/ambassador-graphic-2.png",
-  "public/images/partners/apollo-workshop.png",
-  "public/images/partners/graphql-summit.png",
-  "public/images/partners/nginx.png",
-  "public/images/roadmap-editor.jpeg",
-  "public/images/system-design.png",
-  "public/images/team-promo/contact.png",
-  "public/images/team-promo/documentation.png",
-  "public/images/team-promo/growth-plans.png",
-  "public/images/team-promo/hero-img.png",
-  "public/images/team-promo/hero.png",
-  "public/images/team-promo/invite-members.png",
-  "public/images/team-promo/many-roadmaps.png",
-  "public/images/team-promo/onboarding.png",
-  "public/images/team-promo/our-roadmaps.png",
-  "public/images/team-promo/progress-tracking.png",
-  "public/images/team-promo/roadmap-editor.png",
-  "public/images/team-promo/sharing-settings.png",
-  "public/images/team-promo/skill-gap.png",
-  "public/images/team-promo/team-dashboard.png",
-  "public/images/team-promo/team-insights.png",
-  "public/images/team-promo/update-progress.png",
+  "public/img/brand.png",
+  "public/img/default-avatar.png",
+  "public/img/features/in-progress.png",
+  "public/img/icons8-wand.gif",
+  "public/img/partners/ambassador-graphic-1.png",
+  "public/img/partners/ambassador-graphic-2.png",
+  "public/img/partners/apollo-workshop.png",
+  "public/img/partners/graphql-summit.png",
+  "public/img/partners/nginx.png",
+  "public/img/roadmap-editor.jpeg",
+  "public/img/system-design.png",
+  "public/img/team-promo/contact.png",
+  "public/img/team-promo/documentation.png",
+  "public/img/team-promo/growth-plans.png",
+  "public/img/team-promo/hero-img.png",
+  "public/img/team-promo/hero.png",
+  "public/img/team-promo/invite-members.png",
+  "public/img/team-promo/many-roadmaps.png",
+  "public/img/team-promo/onboarding.png",
+  "public/img/team-promo/our-roadmaps.png",
+  "public/img/team-promo/progress-tracking.png",
+  "public/img/team-promo/roadmap-editor.png",
+  "public/img/team-promo/sharing-settings.png",
+  "public/img/team-promo/skill-gap.png",
+  "public/img/team-promo/team-dashboard.png",
+  "public/img/team-promo/team-insights.png",
+  "public/img/team-promo/update-progress.png",
   "public/manifest/apple-touch-icon.png",
   "public/manifest/icon152.png",
   "public/manifest/icon196.png",

scripts/generate-og-images.mjs

@@ -239,7 +239,7 @@ async function generateGuideOpenGraph() {
   for (const guide of allGuides) {
     const author = allAuthors.find((author) => author.id === guide.authorId);
     const image =
-      author?.imageUrl || 'https://roadmap.sh/images/default-avatar.png';
+      author?.imageUrl || 'https://roadmap.sh/img/default-avatar.png';
     const isExternalImage = image?.startsWith('http');
     let authorImageExtension = '';
     let authorAvatar;

src/components/AIChat/AIChat.tsx

@@ -12,7 +12,7 @@ import { flushSync } from 'react-dom';
 import AutogrowTextarea from 'react-textarea-autosize';
 import { QuickHelpPrompts } from './QuickHelpPrompts';
 import { QuickActionButton } from './QuickActionButton';
-import { getAiCourseLimitOptions } from '../../queries/ai-course';
+import { aiLimitOptions } from '../../queries/ai-course';
 import { isLoggedIn, removeAuthToken } from '../../lib/jwt';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { queryClient } from '../../stores/query-client';
@@ -83,7 +83,7 @@ export function AIChat(props: AIChatProps) {
   const textareaMessageRef = useRef<HTMLTextAreaElement>(null);
 
   const { data: tokenUsage, isLoading } = useQuery(
-    getAiCourseLimitOptions(),
+    aiLimitOptions(),
     queryClient,
   );
 
@@ -275,7 +275,7 @@ export function AIChat(props: AIChatProps) {
           setAiChatHistory(newMessages);
         });
 
-        queryClient.invalidateQueries(getAiCourseLimitOptions());
+        queryClient.invalidateQueries(aiLimitOptions());
         queryClient.invalidateQueries({
           predicate: (query) => {
             return query.queryKey[0] === 'list-chat-history';

src/components/AIGuide/AIGuideCard.tsx

@@ -11,30 +11,15 @@ type AIGuideCardProps = {
 export function AIGuideCard(props: AIGuideCardProps) {
   const { guide, showActions = true } = props;
 
-  const guideDepthColor =
-    {
-      essentials: 'text-green-700',
-      detailed: 'text-blue-700',
-      complete: 'text-purple-700',
-    }[guide.depth] || 'text-gray-700';
-
   return (
     <div className="relative flex flex-grow flex-col">
       <a
         href={`/ai/guide/${guide.slug}`}
         className="group relative flex h-full min-h-[120px] w-full flex-col overflow-hidden rounded-lg border border-gray-200 bg-white p-3 text-left hover:border-gray-300 hover:bg-gray-50 sm:p-4"
       >
-        <div className="mb-2 flex items-center justify-between sm:mb-3">
-          <span
-            className={`rounded-full text-xs font-medium capitalize opacity-80 ${guideDepthColor}`}
-          >
-            {guide.depth}
-          </span>
-        </div>
-
         <div className="relative max-h-[180px] min-h-[140px] overflow-y-hidden sm:max-h-[200px] sm:min-h-[160px]">
           <div
-            className="prose prose-sm prose-pre:bg-gray-100 [&_h1]:hidden [&_h1:first-child]:block [&_h1:first-child]:text-base [&_h1:first-child]:font-bold [&_h1:first-child]:leading-[1.35] [&_h1:first-child]:text-pretty sm:[&_h1:first-child]:text-lg [&_h2]:hidden [&_h3]:hidden [&_h4]:hidden [&_h5]:hidden [&_h6]:hidden"
+            className="prose prose-sm prose-pre:bg-gray-100 [&_h1]:hidden [&_h1:first-child]:block [&_h1:first-child]:text-base [&_h1:first-child]:leading-[1.35] [&_h1:first-child]:font-bold [&_h1:first-child]:text-pretty sm:[&_h1:first-child]:text-lg [&_h2]:hidden [&_h3]:hidden [&_h4]:hidden [&_h5]:hidden [&_h6]:hidden"
             dangerouslySetInnerHTML={{ __html: guide.html }}
           />
 

src/components/AIGuide/AILibraryLayout.tsx

@@ -5,7 +5,7 @@ import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
 import { LibraryTabs } from '../Library/LibraryTab';
 
 type AILibraryLayoutProps = {
-  activeTab: 'courses' | 'guides';
+  activeTab: 'courses' | 'guides' | 'roadmaps' | 'quizzes';
   children: React.ReactNode;
 };
 
@@ -22,7 +22,7 @@ export function AILibraryLayout(props: AILibraryLayoutProps) {
       <div className="mx-auto flex w-full max-w-6xl flex-grow flex-col p-2">
         <AITutorHeader
           title="Library"
-          subtitle="Explore your AI-generated guides and courses"
+          subtitle="Explore your AI-generated guides, courses and roadmaps"
           onUpgradeClick={() => setShowUpgradePopup(true)}
         />
 

src/components/AIQuiz/AIMCQQuestion.tsx

@@ -0,0 +1,302 @@
+import type { QuizQuestion } from '../../queries/ai-quiz';
+import { cn } from '../../lib/classname';
+import {
+  CheckIcon,
+  XIcon,
+  InfoIcon,
+  AlertTriangleIcon,
+  SkipForwardIcon,
+} from 'lucide-react';
+import { markdownToHtml } from '../../lib/markdown';
+import type { QuestionState } from './AIQuizContent';
+
+export const markdownClassName =
+  'prose prose-base prose-p:mb-3 prose-p:text-base prose-p:font-normal prose-pre:my-5 prose-p:prose-code:whitespace-nowrap prose-p:prose-code:text-sm prose-p:prose-code:px-2 prose-p:prose-code:py-1 prose-p:prose-code:rounded-md prose-p:prose-code:border prose-p:prose-code:border-gray-300 prose-p:prose-code:bg-gray-50 text-left text-gray-800';
+
+type AIMCQQuestionProps = {
+  question: QuizQuestion;
+  questionState: QuestionState;
+
+  setSelectedOptions: (options: number[]) => void;
+  onSubmit: (status: QuestionState['status']) => void;
+  onNext: () => void;
+  onSkip: () => void;
+  isLastQuestion: boolean;
+  onComplete: () => void;
+};
+
+export function AIMCQQuestion(props: AIMCQQuestionProps) {
+  const {
+    question,
+    questionState,
+    setSelectedOptions,
+    onSubmit,
+    onSkip,
+    onNext,
+    isLastQuestion,
+    onComplete,
+  } = props;
+  const { title: questionText, options, answerExplanation } = question;
+
+  const { isSubmitted, selectedOptions = [] } = questionState;
+
+  const canSubmitMultipleAnswers =
+    options.filter((option) => option.isCorrect).length > 1;
+
+  const handleSelectOption = (index: number) => {
+    if (isSubmitted) {
+      return;
+    }
+
+    if (!canSubmitMultipleAnswers) {
+      const newSelectedOptions = [index];
+      setSelectedOptions(newSelectedOptions);
+      return;
+    }
+
+    const newSelectedOptions = selectedOptions.includes(index)
+      ? selectedOptions.filter((id) => id !== index)
+      : [...selectedOptions, index];
+    setSelectedOptions(newSelectedOptions);
+  };
+
+  const handleSubmit = () => {
+    if (isSubmitted) {
+      if (isLastQuestion) {
+        onComplete();
+      } else {
+        onNext();
+      }
+      return;
+    }
+
+    const isCorrect =
+      selectedOptions.every((index) => options[index].isCorrect) &&
+      selectedOptions.length ===
+        options.filter((option) => option.isCorrect).length;
+
+    onSubmit(isCorrect ? 'correct' : 'incorrect');
+  };
+
+  const hasAnySelected = selectedOptions.length > 0;
+  const canSubmit = hasAnySelected || questionState.status === 'skipped';
+
+  return (
+    <div className="mx-auto max-w-4xl">
+      <QuestionTitle title={questionText} />
+
+      <div className="mt-8">
+        {options.map((option, index) => {
+          const isSelected = selectedOptions.includes(index);
+          const isCorrectOption = option.isCorrect;
+
+          const isSelectedAndCorrect =
+            isSubmitted && isSelected && isCorrectOption;
+          const isSelectedAndIncorrect =
+            isSubmitted && isSelected && !isCorrectOption;
+          const isNotSelectedAndCorrect =
+            isSubmitted && !isSelected && isCorrectOption;
+
+          const html = markdownToHtml(option.title, false);
+
+          const isOptionDisabled =
+            isSubmitted && !isSelected && !isCorrectOption;
+
+          return (
+            <button
+              key={option.id}
+              className={cn(
+                'group flex w-full items-start gap-4 rounded-lg py-2 text-left',
+                isSelected && !isSubmitted && '',
+                isSubmitted &&
+                  isSelectedAndCorrect &&
+                  'border-green-500 text-green-700',
+                isSubmitted &&
+                  isSelectedAndIncorrect &&
+                  'border-red-500 text-red-700',
+                isSubmitted &&
+                  isNotSelectedAndCorrect &&
+                  'border-green-500 text-green-700',
+                isOptionDisabled && 'cursor-not-allowed opacity-50',
+              )}
+              onClick={() => handleSelectOption(index)}
+              disabled={isOptionDisabled}
+            >
+              <div
+                className={cn(
+                  'flex size-6.5 shrink-0 items-center justify-center rounded-lg border-2 border-gray-300',
+                  isSelected &&
+                    !isSubmitted &&
+                    'border-black bg-black text-white',
+                  isSelectedAndCorrect &&
+                    'border-green-500 bg-green-500 text-white',
+                  isSelectedAndIncorrect &&
+                    'border-red-500 bg-red-500 text-white',
+                  isNotSelectedAndCorrect &&
+                    'border-green-500 bg-green-500 text-white',
+                  !isSelected &&
+                    !isSubmitted &&
+                    'group-hover:border-gray-300 group-hover:bg-gray-200',
+                )}
+              >
+                {isSelected && !isSubmitted && (
+                  <div className="size-5 bg-black" />
+                )}
+                {isSelectedAndCorrect && <CheckIcon className="size-5" />}
+
+                {isSelectedAndIncorrect && <XIcon className="size-5" />}
+
+                {isNotSelectedAndCorrect && <CheckIcon className="size-5" />}
+              </div>
+              <div
+                className={cn(markdownClassName, 'flex-1')}
+                dangerouslySetInnerHTML={{ __html: html }}
+              />
+            </button>
+          );
+        })}
+      </div>
+
+      {isSubmitted && answerExplanation && (
+        <QuestionExplanation
+          explanation={answerExplanation}
+          status={questionState.status}
+        />
+      )}
+
+      <div className="mt-8 flex justify-between">
+        <button
+          onClick={onSkip}
+          disabled={isSubmitted}
+          className="rounded-xl bg-gray-100 px-8 py-3 text-base font-medium text-gray-800 hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Skip Question
+        </button>
+        <button
+          className={cn(
+            'rounded-xl bg-black px-8 py-3 text-base font-medium text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50',
+          )}
+          onClick={handleSubmit}
+          disabled={!canSubmit}
+        >
+          {isSubmitted
+            ? isLastQuestion
+              ? 'Finish Quiz'
+              : 'Next Question'
+            : 'Check Answer'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+type QuestionTitleProps = {
+  title: string;
+};
+
+export function QuestionTitle(props: QuestionTitleProps) {
+  const { title } = props;
+
+  const titleHtml = markdownToHtml(title, false);
+
+  return (
+    <div
+      className="prose prose-xl prose-headings:text-3xl prose-headings:font-bold prose-headings:text-black prose-headings:mb-6 prose-p:text-3xl prose-p:font-semibold prose-p:leading-normal prose-p:text-black prose-p:mb-0 prose-pre:my-5 prose-p:prose-code:whitespace-nowrap prose-p:prose-code:relative prose-p:prose-code:top-[-5px] prose-p:prose-code:text-xl prose-p:prose-code:px-3 prose-p:prose-code:py-1 prose-p:prose-code:rounded-md prose-p:prose-code:border prose-p:prose-code:border-gray-300 prose-p:prose-code:bg-gray-100 prose-p:prose-code:font-medium mb-2 text-left"
+      dangerouslySetInnerHTML={{ __html: titleHtml }}
+    />
+  );
+}
+
+type QuestionExplanationProps = {
+  explanation: string;
+  title?: string;
+  status?: 'correct' | 'incorrect' | 'can_be_improved' | 'skipped' | 'pending';
+};
+
+export function QuestionExplanation(props: QuestionExplanationProps) {
+  const { explanation, title, status } = props;
+
+  const explanationHtml = markdownToHtml(explanation, false);
+
+  const getStatusConfig = () => {
+    switch (status) {
+      case 'correct':
+        return {
+          bgColor: 'bg-green-50',
+          borderColor: 'border-green-200',
+          iconBgColor: 'bg-green-500',
+          textColor: 'text-green-800',
+          icon: CheckIcon,
+          defaultTitle: 'Correct Answer',
+        };
+      case 'incorrect':
+        return {
+          bgColor: 'bg-red-50',
+          borderColor: 'border-red-200',
+          iconBgColor: 'bg-red-500',
+          textColor: 'text-red-800',
+          icon: XIcon,
+          defaultTitle: 'Incorrect Answer',
+        };
+      case 'can_be_improved':
+        return {
+          bgColor: 'bg-yellow-50',
+          borderColor: 'border-yellow-200',
+          iconBgColor: 'bg-yellow-500',
+          textColor: 'text-yellow-800',
+          icon: AlertTriangleIcon,
+          defaultTitle: 'Can Be Improved',
+        };
+      case 'skipped':
+        return {
+          bgColor: 'bg-gray-50',
+          borderColor: 'border-gray-200',
+          iconBgColor: 'bg-gray-500',
+          textColor: 'text-gray-800',
+          icon: SkipForwardIcon,
+          defaultTitle: 'Question Skipped',
+        };
+      default:
+        return {
+          bgColor: 'bg-blue-50',
+          borderColor: 'border-blue-200',
+          iconBgColor: 'bg-blue-500',
+          textColor: 'text-blue-800',
+          icon: InfoIcon,
+          defaultTitle: 'Explanation',
+        };
+    }
+  };
+
+  const config = getStatusConfig();
+  const IconComponent = config.icon;
+  const displayTitle = title || config.defaultTitle;
+
+  return (
+    <div
+      className={cn(
+        'mt-6 rounded-xl border-2 p-6 transition-all duration-200',
+        config.bgColor,
+        config.borderColor,
+      )}
+    >
+      <div className="mb-4 flex items-center gap-3">
+        <div
+          className={cn(
+            'flex size-8 items-center justify-center rounded-full text-white',
+            config.iconBgColor,
+          )}
+        >
+          <IconComponent className="size-4" strokeWidth={2.5} />
+        </div>
+        <h3 className={cn('text-lg font-semibold', config.textColor)}>
+          {displayTitle}
+        </h3>
+      </div>
+      <div
+        className={cn(markdownClassName, 'leading-relaxed text-gray-700')}
+        dangerouslySetInnerHTML={{ __html: explanationHtml }}
+      />
+    </div>
+  );
+}

src/components/AIQuiz/AIOpenEndedQuestion.tsx

@@ -0,0 +1,155 @@
+import { type QuizQuestion } from '../../queries/ai-quiz';
+import { cn } from '../../lib/classname';
+import { Loader2Icon } from 'lucide-react';
+import { QuestionExplanation, QuestionTitle } from './AIMCQQuestion';
+import type { QuestionState } from './AIQuizContent';
+import { useVerifyAnswer } from '../../hooks/use-verify-answer';
+
+export type VerifyQuizAnswerResponse = {
+  status: 'correct' | 'incorrect' | 'can_be_improved';
+  feedback: string;
+};
+
+type AIOpenEndedQuestionProps = {
+  quizSlug: string;
+  question: QuizQuestion;
+  questionState: QuestionState;
+
+  onSubmit: (status: QuestionState['status']) => void;
+  onNext: () => void;
+
+  setUserAnswer: (answer: string) => void;
+  setCorrectAnswer: (answer: string) => void;
+
+  isLastQuestion: boolean;
+  onComplete: () => void;
+
+  onSkip: () => void;
+};
+
+export function AIOpenEndedQuestion(props: AIOpenEndedQuestionProps) {
+  const {
+    quizSlug,
+    question,
+    questionState,
+    onSubmit,
+    onNext,
+    setUserAnswer,
+    setCorrectAnswer,
+    isLastQuestion,
+    onComplete,
+    onSkip,
+  } = props;
+  const { title: questionText } = question;
+
+  const {
+    isSubmitted,
+    userAnswer = '',
+    correctAnswer = '',
+    status,
+  } = questionState;
+
+  const {
+    verifyAnswer,
+    data: verificationData,
+    status: verifyStatus,
+  } = useVerifyAnswer({
+    quizSlug,
+    question: questionText,
+    userAnswer,
+    onFinish: (data) => {
+      if (!data || !data.status) {
+        console.error('No data or status', data);
+        onSubmit('incorrect');
+        return;
+      }
+
+      setCorrectAnswer(data.feedback || '');
+      onSubmit(data?.status || 'incorrect');
+    },
+  });
+
+  const handleSubmit = async () => {
+    if (isSubmittedAndNotSkipped) {
+      if (isLastQuestion) {
+        onComplete();
+      } else {
+        onNext();
+      }
+      return;
+    }
+
+    await verifyAnswer();
+  };
+
+  const canSubmit = userAnswer.trim().length > 0;
+  const isVerifying =
+    verifyStatus === 'loading' || verifyStatus === 'streaming';
+  const feedback = verificationData?.feedback || correctAnswer;
+  const feedbackStatus = verificationData?.status || status;
+
+  const isSubmittedAndNotSkipped = isSubmitted && status !== 'skipped';
+
+  return (
+    <div>
+      <QuestionTitle title={questionText} />
+
+      <div className="mt-6">
+        <textarea
+          className={cn(
+            'min-h-[200px] w-full resize-none rounded-xl border border-gray-200 p-4 text-lg',
+            'focus:border-gray-400 focus:ring-0 focus:outline-none',
+            isSubmittedAndNotSkipped && 'bg-gray-50',
+            isSubmittedAndNotSkipped &&
+              feedbackStatus === 'correct' &&
+              'border-green-500 bg-green-50',
+            isSubmittedAndNotSkipped &&
+              feedbackStatus === 'incorrect' &&
+              'border-red-500 bg-red-50',
+            isSubmittedAndNotSkipped &&
+              feedbackStatus === 'can_be_improved' &&
+              'border-yellow-500 bg-yellow-50',
+          )}
+          placeholder="Type your answer here..."
+          value={userAnswer}
+          onChange={(e) => setUserAnswer(e.target.value)}
+          disabled={isSubmittedAndNotSkipped || isVerifying}
+        />
+      </div>
+
+      {feedback && (
+        <QuestionExplanation explanation={feedback} status={feedbackStatus} />
+      )}
+
+      <div className="mt-4 flex items-center justify-between">
+        <button
+          onClick={onSkip}
+          disabled={isSubmitted}
+          className="rounded-xl bg-gray-100 px-8 py-3 text-base font-medium text-gray-800 hover:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Skip Question
+        </button>
+
+        <button
+          className={cn(
+            'rounded-xl bg-black px-8 py-3 text-base font-medium text-white hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50',
+          )}
+          onClick={handleSubmit}
+          disabled={!canSubmit || isVerifying}
+        >
+          {isVerifying ? (
+            <Loader2Icon className="size-4 animate-spin stroke-[2.5]" />
+          ) : isSubmittedAndNotSkipped ? (
+            isLastQuestion ? (
+              'Finish Quiz'
+            ) : (
+              'Next Question'
+            )
+          ) : (
+            'Verify Answer'
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/AIQuiz/AIQuiz.tsx

@@ -0,0 +1,85 @@
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
+import { queryClient } from '../../stores/query-client';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
+import { AlertCircleIcon } from 'lucide-react';
+import { aiLimitOptions } from '../../queries/ai-course';
+import { billingDetailsOptions } from '../../queries/billing';
+import { AIQuizLayout } from './AIQuizLayout';
+import { GenerateAIQuiz } from './GenerateAIQuiz';
+import { aiQuizOptions, generateAIQuiz } from '../../queries/ai-quiz';
+import { AIQuizContent } from './AIQuizContent';
+import { LoadingChip } from '../LoadingChip';
+
+type AIQuizProps = {
+  quizSlug?: string;
+};
+
+export function AIQuiz(props: AIQuizProps) {
+  const { quizSlug: defaultQuizSlug } = props;
+  const [quizSlug, setQuizSlug] = useState(defaultQuizSlug);
+
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const [isRegenerating, setIsRegenerating] = useState(false);
+
+  // only fetch the guide if the guideSlug is provided
+  // otherwise we are still generating the guide
+  const {
+    data: aiQuiz,
+    isLoading: isLoadingBySlug,
+    error: aiQuizError,
+  } = useQuery(aiQuizOptions(quizSlug), queryClient);
+
+  const {
+    data: tokenUsage,
+    isLoading: isTokenUsageLoading,
+    refetch: refetchTokenUsage,
+  } = useQuery(aiLimitOptions(), queryClient);
+
+  const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
+    useQuery(billingDetailsOptions(), queryClient);
+
+  const isLoading =
+    isLoadingBySlug ||
+    isRegenerating ||
+    isTokenUsageLoading ||
+    isBillingDetailsLoading;
+
+  return (
+    <AIQuizLayout>
+      {showUpgradeModal && (
+        <UpgradeAccountModal onClose={() => setShowUpgradeModal(false)} />
+      )}
+
+      <div className="relative grow">
+        {isLoading && (
+          <div className="absolute inset-0 z-20 flex h-full flex-col items-center justify-center bg-white">
+            <LoadingChip message="Loading Quiz" />
+          </div>
+        )}
+
+        {!isLoading && aiQuizError && (
+          <div className="absolute inset-0 z-20 flex h-full flex-col items-center justify-center bg-white">
+            <div className="flex flex-col items-center justify-center gap-2">
+              <AlertCircleIcon className="size-10 text-gray-500" />
+              <p className="text-center">
+                {aiQuizError?.message || 'Something went wrong'}
+              </p>
+            </div>
+          </div>
+        )}
+
+        {quizSlug && !aiQuizError && (
+          <AIQuizContent
+            quizSlug={quizSlug}
+            questions={aiQuiz?.questions ?? []}
+            isLoading={isLoading}
+          />
+        )}
+        {!quizSlug && !aiQuizError && (
+          <GenerateAIQuiz onQuizSlugChange={setQuizSlug} />
+        )}
+      </div>
+    </AIQuizLayout>
+  );
+}