From 15306862cbffda2678fcef3acc9c3b5cb927bf72 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Thu, 11 Aug 2022 16:48:18 +0400 Subject: [PATCH] Make react roadmap interactive --- lib/roadmap.ts | 2 +- public/project/react.json | 4722 +++++++++++++++++++++++-------------- 2 files changed, 3010 insertions(+), 1714 deletions(-) diff --git a/lib/roadmap.ts b/lib/roadmap.ts index b607dacca..2986fea0f 100644 --- a/lib/roadmap.ts +++ b/lib/roadmap.ts @@ -43,5 +43,5 @@ export function getFeaturedRoadmaps(): RoadmapType[] { } export function isInteractiveRoadmap(id: string): boolean { - return ['frontend', 'backend', 'devops', 'vue'].includes(id); + return ['frontend', 'backend', 'devops', 'react', 'vue'].includes(id); } diff --git a/public/project/react.json b/public/project/react.json index 517aad77b..c7699d7fa 100644 --- a/public/project/react.json +++ b/public/project/react.json @@ -3,7 +3,112 @@ "controls": { "control": [ { - "ID": "0", + "ID": "2609", + "typeID": "Arrow", + "zOrder": "0", + "w": "24", + "h": "77", + "measuredW": "150", + "measuredH": "100", + "x": "618", + "y": "183", + "properties": { + "curvature": "0", + "leftArrow": "false", + "rightArrow": "false", + "color": "10027263", + "p0": { + "x": 10, + "y": -0.3333333333333428 + }, + "p1": { + "x": 0.5175865027166142, + "y": -0.21132399199313673 + }, + "p2": { + "x": 24.66666666666663, + "y": 77 + } + } + }, + { + "ID": "2610", + "typeID": "Label", + "zOrder": "1", + "measuredW": "76", + "measuredH": "36", + "x": "647", + "y": "267", + "properties": { + "size": "28", + "text": "React" + } + }, + { + "ID": "2611", + "typeID": "Arrow", + "zOrder": "2", + "w": "27", + "measuredW": "150", + "measuredH": "100", + "x": "638", + "y": "27", + "properties": { + "curvature": "0", + "leftArrow": "false", + "rightArrow": "false", + "color": "10027263", + "stroke": "dotted", + "p0": { + "x": 20.66666666666663, + "y": -0.33333333333333215 + }, + "p1": { + "x": 0.4525527916281198, + "y": 0.13367847141227748 + }, + "p2": { + "x": -0.019880609337405986, + "y": 99.62109147224172 + } + } + }, + { + "ID": "2612", + "typeID": "Arrow", + "zOrder": "3", + "w": "2", + "h": "96", + "measuredW": "150", + "measuredH": "100", + "x": "411", + "y": "1091", + "properties": { + "color": "2848996", + "curvature": "0", + "direction": "bottom", + "leftArrow": "false", + "p0": { + "length": 95, + "x": 0, + "y": 95 + }, + "p1": { + "length": 0.4737749079645269, + "x": 0.4737425216042544, + "y": -0.005539552404165743 + }, + "p2": { + "length": 1, + "x": 1, + "y": 0 + }, + "rightArrow": "false", + "stroke": "dotted" + } + }, + { + "ID": "2613", "typeID": "Arrow", "zOrder": "4", "w": "105", @@ -34,7 +139,7 @@ } }, { - "ID": "1", + "ID": "2614", "typeID": "Arrow", "zOrder": "5", "w": "92", @@ -65,7 +170,7 @@ } }, { - "ID": "2", + "ID": "2615", "typeID": "Arrow", "zOrder": "6", "w": "89", @@ -96,7 +201,7 @@ } }, { - "ID": "3", + "ID": "2616", "typeID": "Arrow", "zOrder": "7", "w": "6", @@ -130,7 +235,7 @@ } }, { - "ID": "4", + "ID": "2617", "typeID": "Arrow", "zOrder": "8", "w": "140", @@ -161,7 +266,7 @@ } }, { - "ID": "5", + "ID": "2618", "typeID": "Arrow", "zOrder": "9", "w": "95", @@ -195,7 +300,7 @@ } }, { - "ID": "6", + "ID": "2619", "typeID": "Arrow", "zOrder": "10", "w": "101", @@ -229,7 +334,7 @@ } }, { - "ID": "7", + "ID": "2620", "typeID": "Arrow", "zOrder": "11", "w": "88", @@ -263,7 +368,7 @@ } }, { - "ID": "8", + "ID": "2621", "typeID": "Arrow", "zOrder": "12", "w": "86", @@ -297,7 +402,7 @@ } }, { - "ID": "9", + "ID": "2622", "typeID": "Arrow", "zOrder": "13", "w": "6", @@ -327,7 +432,7 @@ } }, { - "ID": "10", + "ID": "2623", "typeID": "Arrow", "zOrder": "14", "w": "1", @@ -361,7 +466,7 @@ } }, { - "ID": "11", + "ID": "2624", "typeID": "Arrow", "zOrder": "15", "w": "170", @@ -392,7 +497,7 @@ } }, { - "ID": "12", + "ID": "2625", "typeID": "Arrow", "zOrder": "16", "w": "65", @@ -423,7 +528,7 @@ } }, { - "ID": "13", + "ID": "2626", "typeID": "Arrow", "zOrder": "17", "w": "64", @@ -454,7 +559,7 @@ } }, { - "ID": "14", + "ID": "2627", "typeID": "Arrow", "zOrder": "18", "w": "58", @@ -485,7 +590,7 @@ } }, { - "ID": "15", + "ID": "2628", "typeID": "Arrow", "zOrder": "19", "w": "67", @@ -516,7 +621,7 @@ } }, { - "ID": "16", + "ID": "2629", "typeID": "Arrow", "zOrder": "20", "w": "60", @@ -547,7 +652,7 @@ } }, { - "ID": "17", + "ID": "2630", "typeID": "Arrow", "zOrder": "21", "w": "66", @@ -578,7 +683,7 @@ } }, { - "ID": "18", + "ID": "2631", "typeID": "Arrow", "zOrder": "22", "w": "74", @@ -609,7 +714,7 @@ } }, { - "ID": "19", + "ID": "2632", "typeID": "Arrow", "zOrder": "23", "w": "63", @@ -640,7 +745,7 @@ } }, { - "ID": "20", + "ID": "2633", "typeID": "Arrow", "zOrder": "24", "w": "74", @@ -671,7 +776,7 @@ } }, { - "ID": "21", + "ID": "2634", "typeID": "Arrow", "zOrder": "25", "w": "95", @@ -705,7 +810,7 @@ } }, { - "ID": "22", + "ID": "2635", "typeID": "Arrow", "zOrder": "26", "w": "94", @@ -739,7 +844,7 @@ } }, { - "ID": "23", + "ID": "2636", "typeID": "Arrow", "zOrder": "27", "w": "2", @@ -773,7 +878,7 @@ } }, { - "ID": "24", + "ID": "2637", "typeID": "Arrow", "zOrder": "28", "w": "83", @@ -807,7 +912,7 @@ } }, { - "ID": "25", + "ID": "2638", "typeID": "Arrow", "zOrder": "29", "w": "93", @@ -841,7 +946,7 @@ } }, { - "ID": "26", + "ID": "2639", "typeID": "Arrow", "zOrder": "30", "w": "94", @@ -875,7 +980,7 @@ } }, { - "ID": "27", + "ID": "2640", "typeID": "Arrow", "zOrder": "31", "w": "68", @@ -906,7 +1011,7 @@ } }, { - "ID": "28", + "ID": "2641", "typeID": "Arrow", "zOrder": "32", "w": "106", @@ -937,7 +1042,7 @@ } }, { - "ID": "29", + "ID": "2642", "typeID": "Arrow", "zOrder": "33", "w": "94", @@ -968,7 +1073,7 @@ } }, { - "ID": "30", + "ID": "2643", "typeID": "Arrow", "zOrder": "34", "w": "109", @@ -1002,7 +1107,7 @@ } }, { - "ID": "31", + "ID": "2644", "typeID": "Arrow", "zOrder": "35", "w": "104", @@ -1033,7 +1138,7 @@ } }, { - "ID": "32", + "ID": "2645", "typeID": "Arrow", "zOrder": "36", "w": "103", @@ -1064,7 +1169,7 @@ } }, { - "ID": "33", + "ID": "2646", "typeID": "Arrow", "zOrder": "37", "w": "49", @@ -1094,7 +1199,7 @@ } }, { - "ID": "34", + "ID": "2647", "typeID": "Arrow", "zOrder": "38", "w": "117", @@ -1125,7 +1230,7 @@ } }, { - "ID": "35", + "ID": "2648", "typeID": "Arrow", "zOrder": "39", "w": "111", @@ -1156,7 +1261,7 @@ } }, { - "ID": "36", + "ID": "2649", "typeID": "Arrow", "zOrder": "40", "w": "119", @@ -1187,7 +1292,7 @@ } }, { - "ID": "37", + "ID": "2650", "typeID": "Arrow", "zOrder": "41", "w": "89", @@ -1218,7 +1323,7 @@ } }, { - "ID": "38", + "ID": "2651", "typeID": "Arrow", "zOrder": "42", "w": "93", @@ -1249,7 +1354,7 @@ } }, { - "ID": "39", + "ID": "2652", "typeID": "Arrow", "zOrder": "43", "w": "69", @@ -1283,7 +1388,7 @@ } }, { - "ID": "40", + "ID": "2653", "typeID": "Arrow", "zOrder": "44", "w": "81", @@ -1314,7 +1419,7 @@ } }, { - "ID": "41", + "ID": "2654", "typeID": "Arrow", "zOrder": "45", "w": "114", @@ -1348,7 +1453,7 @@ } }, { - "ID": "42", + "ID": "2655", "typeID": "Arrow", "zOrder": "46", "w": "88", @@ -1379,7 +1484,7 @@ } }, { - "ID": "43", + "ID": "2656", "typeID": "Arrow", "zOrder": "47", "w": "105", @@ -1410,7 +1515,7 @@ } }, { - "ID": "44", + "ID": "2657", "typeID": "Arrow", "zOrder": "48", "w": "108", @@ -1441,7 +1546,7 @@ } }, { - "ID": "45", + "ID": "2658", "typeID": "Arrow", "zOrder": "49", "w": "102", @@ -1472,7 +1577,7 @@ } }, { - "ID": "46", + "ID": "2659", "typeID": "Arrow", "zOrder": "50", "w": "66", @@ -1506,7 +1611,7 @@ } }, { - "ID": "47", + "ID": "2660", "typeID": "Arrow", "zOrder": "51", "w": "114", @@ -1540,7 +1645,7 @@ } }, { - "ID": "48", + "ID": "2661", "typeID": "Arrow", "zOrder": "52", "w": "50", @@ -1574,7 +1679,7 @@ } }, { - "ID": "49", + "ID": "2662", "typeID": "Arrow", "zOrder": "53", "w": "129", @@ -1608,7 +1713,7 @@ } }, { - "ID": "50", + "ID": "2663", "typeID": "Arrow", "zOrder": "54", "w": "110", @@ -1639,7 +1744,7 @@ } }, { - "ID": "51", + "ID": "2664", "typeID": "Arrow", "zOrder": "55", "w": "67", @@ -1673,7 +1778,7 @@ } }, { - "ID": "52", + "ID": "2665", "typeID": "Arrow", "zOrder": "56", "w": "70", @@ -1707,7 +1812,7 @@ } }, { - "ID": "53", + "ID": "2666", "typeID": "Arrow", "zOrder": "57", "w": "38", @@ -1737,7 +1842,7 @@ } }, { - "ID": "54", + "ID": "2667", "typeID": "Arrow", "zOrder": "58", "w": "30", @@ -1767,7 +1872,7 @@ } }, { - "ID": "57", + "ID": "2668", "typeID": "Canvas", "zOrder": "59", "w": "350", @@ -1778,7 +1883,7 @@ "y": "74" }, { - "ID": "58", + "ID": "2669", "typeID": "Label", "zOrder": "60", "measuredW": "314", @@ -1791,7 +1896,7 @@ } }, { - "ID": "59", + "ID": "2670", "typeID": "Label", "zOrder": "61", "measuredW": "319", @@ -1804,94 +1909,9 @@ } }, { - "ID": "60", - "typeID": "Canvas", - "zOrder": "62", - "w": "320", - "h": "45", - "measuredW": "100", - "measuredH": "70", - "x": "899", - "y": "155", - "properties": { - "borderColor": "4273622", - "color": "4273622" - } - }, - { - "ID": "61", - "typeID": "Label", - "zOrder": "63", - "measuredW": "105", - "measuredH": "28", - "x": "1040", - "y": "163", - "properties": { - "color": "16777215", - "size": "20", - "text": "roadmap.sh" - } - }, - { - "ID": "62", - "typeID": "Label", - "zOrder": "64", - "measuredW": "35", - "measuredH": "28", - "x": "975", - "y": "163", - "properties": { - "color": "16777215", - "size": "20", - "text": "http" - } - }, - { - "ID": "63", - "typeID": "Label", - "zOrder": "65", - "measuredW": "5", - "measuredH": "28", - "x": "1012", - "y": "163", - "properties": { - "color": "16777215", - "size": "20", - "text": ":" - } - }, - { - "ID": "64", - "typeID": "Label", - "zOrder": "66", - "measuredW": "10", - "measuredH": "28", - "x": "1019", - "y": "164", - "properties": { - "color": "16777215", - "size": "20", - "text": "/" - } - }, - { - "ID": "65", - "typeID": "Label", - "zOrder": "67", - "measuredW": "10", - "measuredH": "28", - "x": "1027", - "y": "164", - "properties": { - "color": "16777215", - "size": "20", - "text": "/" - } - }, - { - "ID": "79", + "ID": "2677", "typeID": "Arrow", - "zOrder": "68", + "zOrder": "63", "w": "118", "h": "51", "measuredW": "150", @@ -1920,9 +1940,9 @@ } }, { - "ID": "80", + "ID": "2678", "typeID": "Arrow", - "zOrder": "69", + "zOrder": "64", "w": "128", "h": "35", "measuredW": "150", @@ -1951,9 +1971,9 @@ } }, { - "ID": "81", + "ID": "2679", "typeID": "Arrow", - "zOrder": "70", + "zOrder": "65", "w": "109", "h": "80", "measuredW": "150", @@ -1982,474 +2002,18 @@ } }, { - "ID": "82", - "typeID": "TextArea", - "zOrder": "71", - "w": "272", - "h": "50", - "measuredW": "200", - "measuredH": "140", - "x": "562", - "y": "394", - "properties": { - "color": "16776960" - } - }, - { - "ID": "83", - "typeID": "Label", - "zOrder": "72", - "measuredW": "155", - "measuredH": "25", - "x": "617", - "y": "407", - "properties": { - "size": "17", - "text": "Fundamental Topics" - } - }, - { - "ID": "84", - "typeID": "TextArea", - "zOrder": "73", - "w": "159", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "322", - "y": "415", - "properties": { - "color": "16770457" - } - }, - { - "ID": "85", - "typeID": "Label", - "zOrder": "74", - "measuredW": "99", - "measuredH": "25", - "x": "351", - "y": "425", - "properties": { - "size": "17", - "text": "Components" - } - }, - { - "ID": "86", - "typeID": "TextArea", - "zOrder": "75", - "w": "255", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "932", - "y": "433", - "properties": { - "color": "16770457" - } - }, - { - "ID": "87", - "typeID": "Label", - "zOrder": "76", - "measuredW": "210", - "measuredH": "25", - "x": "954", - "y": "443", - "properties": { - "size": "17", - "text": "Composition vs Inheritance" - } - }, - { - "ID": "88", - "typeID": "TextArea", - "zOrder": "77", - "w": "213", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "73", - "y": "392", - "properties": { - "color": "16770457" - } - }, - { - "ID": "89", - "typeID": "Label", - "zOrder": "78", - "measuredW": "183", - "measuredH": "25", - "x": "89", - "y": "402", - "properties": { - "size": "17", - "text": "Functional Components" - } - }, - { - "ID": "90", - "typeID": "TextArea", - "zOrder": "79", - "w": "213", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "73", - "y": "442", - "properties": { - "color": "16770457" - } - }, - { - "ID": "91", - "typeID": "Label", - "zOrder": "80", - "measuredW": "146", - "measuredH": "25", - "x": "106", - "y": "452", - "properties": { - "size": "17", - "text": "Class Components" - } - }, - { - "ID": "92", - "typeID": "TextArea", - "zOrder": "81", - "w": "159", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "322", - "y": "365", - "properties": { - "color": "16770457" - } - }, - { - "ID": "93", - "typeID": "Label", - "zOrder": "82", - "measuredW": "30", - "measuredH": "25", - "x": "385", - "y": "375", - "properties": { - "size": "17", - "text": "JSX" - } - }, - { - "ID": "94", - "typeID": "TextArea", + "ID": "2714", + "typeID": "__group__", "zOrder": "83", - "w": "159", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "322", - "y": "467", - "properties": { - "color": "16770457" - } - }, - { - "ID": "95", - "typeID": "Label", - "zOrder": "84", - "measuredW": "110", - "measuredH": "25", - "x": "344", - "y": "477", - "properties": { - "size": "17", - "text": "Props vs State" - } - }, - { - "ID": "96", - "typeID": "TextArea", - "zOrder": "85", - "w": "254", - "h": "42", - "measuredW": "200", - "measuredH": "140", - "x": "933", - "y": "483", - "properties": { - "color": "16770457" - } - }, - { - "ID": "97", - "typeID": "Label", - "zOrder": "86", - "measuredW": "96", - "measuredH": "25", - "x": "1013", - "y": "492", - "properties": { - "size": "17", - "text": "Basic Hooks" - } - }, - { - "ID": "98", - "typeID": "TextArea", - "zOrder": "87", - "w": "153", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "906", - "y": "551", - "properties": { - "color": "16770457" - } - }, - { - "ID": "99", - "typeID": "Label", - "zOrder": "88", - "measuredW": "69", - "measuredH": "25", - "x": "947", - "y": "561", - "properties": { - "size": "17", - "text": "useState" - } - }, - { - "ID": "100", - "typeID": "TextArea", - "zOrder": "89", - "w": "153", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "1066", - "y": "551", - "properties": { - "color": "16770457" - } - }, - { - "ID": "101", - "typeID": "Label", - "zOrder": "90", - "measuredW": "73", - "measuredH": "25", - "x": "1105", - "y": "561", - "properties": { - "size": "17", - "text": "useEffect" - } - }, - { - "ID": "102", - "typeID": "TextArea", - "zOrder": "91", - "w": "255", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "932", - "y": "384", - "properties": { - "color": "16770457" - } - }, - { - "ID": "103", - "typeID": "Label", - "zOrder": "92", - "measuredW": "111", - "measuredH": "25", - "x": "1002", - "y": "394", - "properties": { - "size": "17", - "text": "Lists and Keys" - } - }, - { - "ID": "104", - "typeID": "TextArea", - "zOrder": "93", - "w": "215", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "268", - "y": "517", - "properties": { - "color": "16770457" - } - }, - { - "ID": "105", - "typeID": "Label", - "zOrder": "94", - "measuredW": "173", - "measuredH": "25", - "x": "291", - "y": "527", - "properties": { - "size": "17", - "text": "Conditional Rendering" - } - }, - { - "ID": "106", - "typeID": "TextArea", - "zOrder": "95", - "w": "214", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "268", - "y": "315", - "properties": { - "color": "16770457" - } - }, - { - "ID": "107", - "typeID": "Label", - "zOrder": "96", - "measuredW": "139", - "measuredH": "25", - "x": "305", - "y": "325", - "properties": { - "size": "17", - "text": "Create React App" - } - }, - { - "ID": "108", - "typeID": "TextArea", - "zOrder": "97", - "w": "255", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "932", - "y": "333", - "properties": { - "color": "16770457" - } - }, - { - "ID": "109", - "typeID": "Label", - "zOrder": "98", - "measuredW": "170", - "measuredH": "25", - "x": "974", - "y": "343", - "properties": { - "size": "17", - "text": "Component Life Cycle" - } - }, - { - "ID": "110", - "typeID": "TextArea", - "zOrder": "99", - "w": "272", - "h": "50", - "measuredW": "200", - "measuredH": "140", - "x": "578", - "y": "609", - "properties": { - "color": "16776960" - } - }, - { - "ID": "111", - "typeID": "Label", - "zOrder": "100", - "measuredW": "130", - "measuredH": "25", - "x": "646", - "y": "622", - "properties": { - "size": "17", - "text": "Advanced Topics" - } - }, - { - "ID": "112", - "typeID": "TextArea", - "zOrder": "101", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "351", - "y": "590", - "properties": { - "color": "16770457" - } - }, - { - "ID": "113", - "typeID": "Label", - "zOrder": "102", - "measuredW": "49", - "measuredH": "25", - "x": "406", - "y": "600", - "properties": { - "size": "17", - "text": "Hooks" - } - }, - { - "ID": "114", - "typeID": "TextArea", - "zOrder": "103", - "w": "243", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "75", - "y": "569", - "properties": { - "color": "16770457" - } - }, - { - "ID": "115", - "typeID": "Label", - "zOrder": "104", - "measuredW": "183", - "measuredH": "25", - "x": "103", - "y": "579", - "properties": { - "size": "17", - "text": "Writing your Own Hooks" - } - }, - { - "ID": "116", - "typeID": "__group__", - "zOrder": "105", "measuredW": "243", "measuredH": "248", "w": "243", "h": "248", "x": "75", "y": "620", + "properties": { + "controlName": "102-advanced-topics:hooks:common-hooks" + }, "children": { "controls": { "control": [ @@ -2593,7 +2157,7 @@ "ID": "10", "typeID": "TextArea", "zOrder": "10", - "w": "217", + "w": "121", "h": "43", "measuredW": "200", "measuredH": "140", @@ -2609,1434 +2173,3166 @@ "zOrder": "11", "measuredW": "88", "measuredH": "25", - "x": "77", + "x": "29", "y": "202", "properties": { "size": "17", "text": "useContext" } + }, + { + "ID": "12", + "typeID": "TextArea", + "zOrder": "12", + "w": "92", + "h": "43", + "measuredW": "200", + "measuredH": "140", + "x": "139", + "y": "193", + "properties": { + "color": "16770457" + } + }, + { + "ID": "13", + "typeID": "Label", + "zOrder": "13", + "measuredW": "24", + "measuredH": "25", + "x": "173", + "y": "202", + "properties": { + "size": "17", + "text": "......." + } } ] } } }, { - "ID": "117", - "typeID": "TextArea", - "zOrder": "106", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "351", - "y": "639", - "properties": { - "color": "16770457" - } - }, - { - "ID": "118", + "ID": "2753", "typeID": "Label", - "zOrder": "107", - "measuredW": "60", - "measuredH": "25", - "x": "399", - "y": "649", + "zOrder": "103", + "measuredW": "25", + "measuredH": "117", + "x": "75", + "y": "1230", "properties": { "size": "17", - "text": "Context" - } - }, - { - "ID": "119", - "typeID": "TextArea", - "zOrder": "108", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "351", - "y": "689", - "properties": { - "color": "16770457" + "text": "REST API Calls", + "textOrientation": "up" } }, { - "ID": "120", + "ID": "2760", "typeID": "Label", - "zOrder": "109", - "measuredW": "36", - "measuredH": "25", - "x": "411", - "y": "699", + "zOrder": "107", + "measuredW": "25", + "measuredH": "71", + "x": "75", + "y": "1108", "properties": { "size": "17", - "text": "Refs" + "text": "GraphQL", + "textOrientation": "up" } }, { - "ID": "121", - "typeID": "TextArea", - "zOrder": "110", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "351", - "y": "739", - "properties": { - "color": "16770457" - } - }, - { - "ID": "122", - "typeID": "Label", - "zOrder": "111", - "measuredW": "107", - "measuredH": "25", - "x": "376", - "y": "749", - "properties": { - "size": "17", - "text": "Render Props" - } - }, - { - "ID": "123", - "typeID": "TextArea", - "zOrder": "112", - "w": "224", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "942", - "y": "612", - "properties": { - "color": "16770457" - } - }, - { - "ID": "124", - "typeID": "Label", - "zOrder": "113", - "measuredW": "188", - "measuredH": "25", - "x": "960", - "y": "622", - "properties": { - "size": "17", - "text": "High Order Components" - } - }, - { - "ID": "125", - "typeID": "TextArea", - "zOrder": "114", - "w": "224", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "942", - "y": "662", - "properties": { - "color": "16770457" - } - }, - { - "ID": "126", - "typeID": "Label", - "zOrder": "115", - "measuredW": "53", - "measuredH": "25", - "x": "1027", - "y": "672", - "properties": { - "size": "17", - "text": "Portals" - } - }, - { - "ID": "127", - "typeID": "TextArea", - "zOrder": "116", - "w": "224", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "942", - "y": "711", - "properties": { - "color": "16770457" - } - }, - { - "ID": "128", - "typeID": "Label", - "zOrder": "117", - "measuredW": "132", - "measuredH": "25", - "x": "989", - "y": "721", - "properties": { - "size": "17", - "text": "Error Boundaries" - } - }, - { - "ID": "129", - "typeID": "TextArea", - "zOrder": "118", - "w": "224", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "942", - "y": "760", - "properties": { - "color": "16770457" - } - }, - { - "ID": "130", - "typeID": "Label", - "zOrder": "119", - "measuredW": "138", - "measuredH": "25", - "x": "985", - "y": "770", - "properties": { - "size": "17", - "text": "Fiber Architecture" - } - }, - { - "ID": "131", - "typeID": "TextArea", - "zOrder": "120", - "w": "201", - "h": "50", - "measuredW": "200", - "measuredH": "140", - "x": "534", - "y": "912", - "properties": { - "color": "16776960" - } - }, - { - "ID": "132", - "typeID": "Label", - "zOrder": "121", - "measuredW": "84", - "measuredH": "25", - "x": "590", - "y": "924", - "properties": { - "size": "17", - "text": "Ecosystem" - } - }, - { - "ID": "135", - "typeID": "TextArea", - "zOrder": "122", - "w": "202", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "780", - "y": "867", - "properties": { - "color": "16767334" - } - }, - { - "ID": "136", - "typeID": "Label", - "zOrder": "123", - "measuredW": "48", - "measuredH": "25", - "x": "857", - "y": "877", - "properties": { - "size": "17", - "text": "Forms" - } - }, - { - "ID": "137", - "typeID": "TextArea", - "zOrder": "124", - "w": "171", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "1029", - "y": "819", - "properties": { - "color": "16770457" - } - }, - { - "ID": "138", - "typeID": "Label", - "zOrder": "125", - "measuredW": "135", - "measuredH": "25", - "x": "1048", - "y": "829", - "properties": { - "size": "17", - "text": "React Hook Form" - } - }, - { - "ID": "139", - "typeID": "TextArea", - "zOrder": "126", - "w": "171", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "1029", - "y": "867", - "properties": { - "color": "16770457" - } - }, - { - "ID": "140", - "typeID": "Label", + "ID": "2799", + "typeID": "Arrow", "zOrder": "127", - "measuredW": "52", - "measuredH": "25", - "x": "1089", - "y": "877", - "properties": { - "size": "17", - "text": "Formik" - } - }, - { - "ID": "141", - "typeID": "TextArea", - "zOrder": "128", - "w": "171", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "1029", - "y": "915", - "properties": { - "color": "16770457" - } - }, - { - "ID": "142", - "typeID": "Label", - "zOrder": "129", - "measuredW": "82", - "measuredH": "25", - "x": "1075", - "y": "925", + "w": "4", + "h": "89", + "measuredW": "150", + "measuredH": "100", + "x": "670", + "y": "1557", "properties": { - "size": "17", - "text": "Final Form" + "color": "2848996", + "curvature": "0", + "direction": "bottom", + "leftArrow": "false", + "p0": { + "length": 3, + "x": 3, + "y": 0 + }, + "p1": { + "length": 0.5327426604018495, + "x": 0.5326751848090503, + "y": 0.008478779433645868 + }, + "p2": { + "length": 88, + "x": 0, + "y": 88 + }, + "rightArrow": "false" } }, { - "ID": "151", - "typeID": "TextArea", + "ID": "2810", + "typeID": "__group__", "zOrder": "130", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "335", - "y": "911", - "properties": { - "color": "16767334" - } - }, - { - "ID": "152", - "typeID": "Label", - "zOrder": "131", - "measuredW": "61", - "measuredH": "25", - "x": "383", - "y": "921", - "properties": { - "size": "17", - "text": "Routers" - } - }, - { - "ID": "153", - "typeID": "TextArea", - "zOrder": "132", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "110", - "y": "877", - "properties": { - "color": "16770457" - } - }, - { - "ID": "154", - "typeID": "Label", - "zOrder": "133", - "measuredW": "104", - "measuredH": "25", - "x": "136", - "y": "887", + "measuredW": "542", + "measuredH": "96", + "w": "542", + "h": "96", + "x": "295", + "y": "108", "properties": { - "size": "17", - "text": "React Router" + "controlName": "ext_link:roadmap.sh/frontend" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Canvas", + "zOrder": "0", + "w": "542", + "h": "96", + "measuredW": "100", + "measuredH": "70", + "x": "0", + "y": "0" + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "475", + "measuredH": "32", + "x": "34", + "y": "18", + "properties": { + "size": "24", + "text": "Frontend Roadmap till Framework Selection" + } + }, + { + "ID": "2", + "typeID": "Label", + "zOrder": "2", + "measuredW": "171", + "measuredH": "26", + "x": "201", + "y": "54", + "properties": { + "size": "18", + "text": "roadmap.sh/frontend", + "color": "10027263" + } + } + ] + } } }, { - "ID": "157", - "typeID": "TextArea", - "zOrder": "134", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "109", - "y": "927", + "ID": "2811", + "typeID": "__group__", + "zOrder": "62", + "measuredW": "320", + "measuredH": "45", + "w": "320", + "h": "45", + "x": "899", + "y": "155", "properties": { - "color": "16770457" + "controlName": "ext_link:roadmap.sh" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Canvas", + "zOrder": "0", + "w": "320", + "h": "45", + "measuredW": "100", + "measuredH": "70", + "x": "0", + "y": "0", + "properties": { + "borderColor": "4273622", + "color": "4273622" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "105", + "measuredH": "28", + "x": "141", + "y": "8", + "properties": { + "color": "16777215", + "size": "20", + "text": "roadmap.sh" + } + }, + { + "ID": "2", + "typeID": "Label", + "zOrder": "2", + "measuredW": "35", + "measuredH": "28", + "x": "76", + "y": "8", + "properties": { + "color": "16777215", + "size": "20", + "text": "http" + } + }, + { + "ID": "3", + "typeID": "Label", + "zOrder": "3", + "measuredW": "5", + "measuredH": "28", + "x": "113", + "y": "8", + "properties": { + "color": "16777215", + "size": "20", + "text": ":" + } + }, + { + "ID": "4", + "typeID": "Label", + "zOrder": "4", + "measuredW": "10", + "measuredH": "28", + "x": "120", + "y": "9", + "properties": { + "color": "16777215", + "size": "20", + "text": "/" + } + }, + { + "ID": "5", + "typeID": "Label", + "zOrder": "5", + "measuredW": "10", + "measuredH": "28", + "x": "128", + "y": "9", + "properties": { + "color": "16777215", + "size": "20", + "text": "/" + } + } + ] + } } }, { - "ID": "158", - "typeID": "Label", - "zOrder": "135", - "measuredW": "108", - "measuredH": "25", - "x": "135", - "y": "937", + "ID": "2813", + "typeID": "__group__", + "zOrder": "66", + "measuredW": "272", + "measuredH": "50", + "w": "272", + "h": "50", + "x": "562", + "y": "394", "properties": { - "size": "17", - "text": "Reach Router" + "controlName": "100-fundamental-topics" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "272", + "h": "50", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "155", + "measuredH": "25", + "x": "55", + "y": "13", + "properties": { + "size": "17", + "text": "Fundamental Topics" + } + } + ] + } } }, { - "ID": "162", - "typeID": "TextArea", - "zOrder": "136", - "w": "157", - "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "335", - "y": "1157", + "ID": "2814", + "typeID": "__group__", + "zOrder": "80", + "measuredW": "272", + "measuredH": "50", + "w": "272", + "h": "50", + "x": "578", + "y": "609", "properties": { - "color": "16767334" + "controlName": "101-advanced-topics" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "272", + "h": "50", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "130", + "measuredH": "25", + "x": "68", + "y": "13", + "properties": { + "size": "17", + "text": "Advanced Topics" + } + } + ] + } } }, { - "ID": "163", - "typeID": "Label", - "zOrder": "137", - "measuredW": "69", - "measuredH": "25", - "x": "378", - "y": "1167", + "ID": "2815", + "typeID": "__group__", + "zOrder": "91", + "measuredW": "201", + "measuredH": "50", + "w": "201", + "h": "50", + "x": "534", + "y": "912", "properties": { - "size": "17", - "text": "API Calls" + "controlName": "102-ecosystem" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "201", + "h": "50", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16776960" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "84", + "measuredH": "25", + "x": "56", + "y": "12", + "properties": { + "size": "17", + "text": "Ecosystem" + } + } + ] + } } }, { - "ID": "164", - "typeID": "TextArea", - "zOrder": "138", - "w": "157", + "ID": "2816", + "typeID": "__group__", + "zOrder": "78", + "measuredW": "214", + "measuredH": "44", + "w": "214", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "110", - "y": "1219", + "x": "268", + "y": "315", "properties": { - "color": "16770457" + "controlName": "100-fundamental-topics:create-react-app" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "214", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "139", + "measuredH": "25", + "x": "37", + "y": "10", + "properties": { + "size": "17", + "text": "Create React App" + } + } + ] + } } }, { - "ID": "165", - "typeID": "Label", - "zOrder": "139", - "measuredW": "41", - "measuredH": "25", - "x": "167", - "y": "1229", + "ID": "2817", + "typeID": "__group__", + "zOrder": "71", + "measuredW": "159", + "measuredH": "44", + "w": "159", + "h": "44", + "x": "322", + "y": "365", "properties": { - "size": "17", - "text": "Axios" + "controlName": "101-fundamental-topics:jsx" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "159", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "30", + "measuredH": "25", + "x": "63", + "y": "10", + "properties": { + "size": "17", + "text": "JSX" + } + } + ] + } } }, { - "ID": "168", - "typeID": "TextArea", - "zOrder": "140", - "w": "157", + "ID": "2818", + "typeID": "__group__", + "zOrder": "67", + "measuredW": "159", + "measuredH": "44", + "w": "159", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "109", - "y": "1269", + "x": "322", + "y": "415", "properties": { - "color": "16770457" + "controlName": "102-fundamental-topics:components" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "159", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "99", + "measuredH": "25", + "x": "29", + "y": "10", + "properties": { + "size": "17", + "text": "Components" + } + } + ] + } } }, { - "ID": "169", - "typeID": "Label", - "zOrder": "141", - "measuredW": "61", - "measuredH": "25", - "x": "158", - "y": "1279", + "ID": "2819", + "typeID": "__group__", + "zOrder": "72", + "measuredW": "159", + "measuredH": "44", + "w": "159", + "h": "44", + "x": "322", + "y": "467", "properties": { - "size": "17", - "text": "Unfetch" + "controlName": "103-fundamental-topics:props-vs-state" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "159", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "110", + "measuredH": "25", + "x": "22", + "y": "10", + "properties": { + "size": "17", + "text": "Props vs State" + } + } + ] + } } }, { - "ID": "173", - "typeID": "TextArea", - "zOrder": "142", - "w": "157", + "ID": "2820", + "typeID": "__group__", + "zOrder": "77", + "measuredW": "215", + "measuredH": "44", + "w": "215", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "109", - "y": "1318", + "x": "268", + "y": "517", "properties": { - "color": "16770457" + "controlName": "104-fundamental-topics:conditional-rendering" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "215", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "173", + "measuredH": "25", + "x": "23", + "y": "10", + "properties": { + "size": "17", + "text": "Conditional Rendering" + } + } + ] + } } }, { - "ID": "174", - "typeID": "Label", - "zOrder": "143", - "measuredW": "88", - "measuredH": "25", - "x": "144", - "y": "1328", + "ID": "2821", + "typeID": "__group__", + "zOrder": "79", + "measuredW": "255", + "measuredH": "44", + "w": "255", + "h": "44", + "x": "932", + "y": "333", "properties": { - "size": "17", - "text": "superagent" + "controlName": "105-fundamental-topics:component-life-cycle" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "255", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "170", + "measuredH": "25", + "x": "42", + "y": "10", + "properties": { + "size": "17", + "text": "Component Life Cycle" + } + } + ] + } } }, { - "ID": "178", - "typeID": "Label", - "zOrder": "144", - "measuredW": "25", - "measuredH": "117", - "x": "75", - "y": "1230", + "ID": "2822", + "typeID": "__group__", + "zOrder": "76", + "measuredW": "255", + "measuredH": "44", + "w": "255", + "h": "44", + "x": "932", + "y": "384", "properties": { - "size": "17", - "text": "REST API Calls", - "textOrientation": "up" + "controlName": "106-fundamental-topics:lists-and-keys" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "255", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "111", + "measuredH": "25", + "x": "70", + "y": "10", + "properties": { + "size": "17", + "text": "Lists and Keys" + } + } + ] + } } }, { - "ID": "180", - "typeID": "TextArea", - "zOrder": "145", - "w": "157", + "ID": "2823", + "typeID": "__group__", + "zOrder": "68", + "measuredW": "255", + "measuredH": "44", + "w": "255", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "335", - "y": "1240", + "x": "932", + "y": "433", "properties": { - "color": "16770457" + "controlName": "107-fundamental-topics:composition-vs-inheritance" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "255", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "210", + "measuredH": "25", + "x": "22", + "y": "10", + "properties": { + "size": "17", + "text": "Composition vs Inheritance" + } + } + ] + } } }, { - "ID": "181", - "typeID": "Label", - "zOrder": "146", - "measuredW": "64", - "measuredH": "25", - "x": "380", - "y": "1250", + "ID": "2824", + "typeID": "__group__", + "zOrder": "73", + "measuredW": "254", + "measuredH": "42", + "w": "254", + "h": "42", + "x": "933", + "y": "483", "properties": { - "size": "17", - "text": "use-http" + "controlName": "108-fundamental-topics:basic-hooks" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "254", + "h": "42", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "96", + "measuredH": "25", + "x": "80", + "y": "9", + "properties": { + "size": "17", + "text": "Basic Hooks" + } + } + ] + } } }, { - "ID": "184", - "typeID": "TextArea", - "zOrder": "147", - "w": "156", + "ID": "2825", + "typeID": "__group__", + "zOrder": "74", + "measuredW": "153", + "measuredH": "44", + "w": "153", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "109", - "y": "1093", - "properties": { - "color": "16770457" - } - }, - { - "ID": "185", - "typeID": "Label", - "zOrder": "148", - "measuredW": "48", - "measuredH": "25", - "x": "164", - "y": "1103", + "x": "906", + "y": "551", "properties": { - "size": "17", - "text": "Apollo" + "controlName": "100-fundamental-topics:basic-hooks:use-state" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "153", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "69", + "measuredH": "25", + "x": "41", + "y": "10", + "properties": { + "size": "17", + "text": "useState" + } + } + ] + } } }, { - "ID": "186", - "typeID": "TextArea", - "zOrder": "149", - "w": "156", + "ID": "2826", + "typeID": "__group__", + "zOrder": "75", + "measuredW": "153", + "measuredH": "44", + "w": "153", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "109", - "y": "1141", + "x": "1066", + "y": "551", "properties": { - "color": "16770457" + "controlName": "101-fundamental-topics:basic-hooks:use-effect" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "153", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "73", + "measuredH": "25", + "x": "39", + "y": "10", + "properties": { + "size": "17", + "text": "useEffect" + } + } + ] + } } }, { - "ID": "187", - "typeID": "Label", - "zOrder": "150", - "measuredW": "107", - "measuredH": "25", - "x": "134", - "y": "1151", + "ID": "2827", + "typeID": "__group__", + "zOrder": "69", + "measuredW": "213", + "measuredH": "44", + "w": "213", + "h": "44", + "x": "73", + "y": "392", "properties": { - "size": "17", - "text": "Relay Modern" + "controlName": "100-fundamental-topics:components:functional-components" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "213", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "183", + "measuredH": "25", + "x": "16", + "y": "10", + "properties": { + "size": "17", + "text": "Functional Components" + } + } + ] + } } }, { - "ID": "193", - "typeID": "Label", - "zOrder": "151", - "measuredW": "25", - "measuredH": "71", - "x": "75", - "y": "1108", + "ID": "2828", + "typeID": "__group__", + "zOrder": "70", + "measuredW": "213", + "measuredH": "44", + "w": "213", + "h": "44", + "x": "73", + "y": "442", "properties": { - "size": "17", - "text": "GraphQL", - "textOrientation": "up" + "controlName": "101-fundamental-topics:components:class-components" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "213", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "146", + "measuredH": "25", + "x": "33", + "y": "10", + "properties": { + "size": "17", + "text": "Class Components" + } + } + ] + } } }, { - "ID": "194", - "typeID": "TextArea", - "zOrder": "152", - "w": "202", + "ID": "2829", + "typeID": "__group__", + "zOrder": "81", + "measuredW": "157", + "measuredH": "44", + "w": "157", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "780", - "y": "945", + "x": "351", + "y": "590", "properties": { - "color": "16767334" + "controlName": "100-advanced-topics:hooks" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "49", + "measuredH": "25", + "x": "55", + "y": "10", + "properties": { + "size": "17", + "text": "Hooks" + } + } + ] + } } }, { - "ID": "195", - "typeID": "Label", - "zOrder": "153", - "measuredW": "56", - "measuredH": "25", - "x": "852", - "y": "955", + "ID": "2830", + "typeID": "__group__", + "zOrder": "84", + "measuredW": "157", + "measuredH": "44", + "w": "157", + "h": "44", + "x": "351", + "y": "639", "properties": { - "size": "17", - "text": "Testing" + "controlName": "101-advanced-topics:context" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "60", + "measuredH": "25", + "x": "48", + "y": "10", + "properties": { + "size": "17", + "text": "Context" + } + } + ] + } } }, { - "ID": "196", - "typeID": "TextArea", - "zOrder": "154", - "w": "218", + "ID": "2831", + "typeID": "__group__", + "zOrder": "85", + "measuredW": "157", + "measuredH": "44", + "w": "157", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "1029", - "y": "974", + "x": "351", + "y": "689", "properties": { - "color": "16770457" + "controlName": "102-advanced-topics:refs" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "36", + "measuredH": "25", + "x": "60", + "y": "10", + "properties": { + "size": "17", + "text": "Refs" + } + } + ] + } } }, { - "ID": "197", - "typeID": "Label", - "zOrder": "155", - "measuredW": "33", - "measuredH": "25", - "x": "1121", - "y": "984", + "ID": "2832", + "typeID": "__group__", + "zOrder": "86", + "measuredW": "157", + "measuredH": "44", + "w": "157", + "h": "44", + "x": "351", + "y": "739", "properties": { - "size": "17", - "text": "Jest" + "controlName": "103-advanced-topics:render-props" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "107", + "measuredH": "25", + "x": "25", + "y": "10", + "properties": { + "size": "17", + "text": "Render Props" + } + } + ] + } } }, { - "ID": "198", - "typeID": "TextArea", - "zOrder": "156", - "w": "218", + "ID": "2833", + "typeID": "__group__", + "zOrder": "87", + "measuredW": "224", + "measuredH": "44", + "w": "224", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "1029", - "y": "1023", + "x": "942", + "y": "612", "properties": { - "color": "16770457" + "controlName": "104-advanced-topics:high-order-components" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "224", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "188", + "measuredH": "25", + "x": "18", + "y": "10", + "properties": { + "size": "17", + "text": "High Order Components" + } + } + ] + } } }, { - "ID": "199", - "typeID": "Label", - "zOrder": "157", - "measuredW": "164", - "measuredH": "25", - "x": "1054", - "y": "1033", + "ID": "2834", + "typeID": "__group__", + "zOrder": "88", + "measuredW": "224", + "measuredH": "44", + "w": "224", + "h": "44", + "x": "942", + "y": "662", "properties": { - "size": "17", - "text": "React Testing Library" + "controlName": "105-advanced-topics:portals" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "224", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "53", + "measuredH": "25", + "x": "85", + "y": "10", + "properties": { + "size": "17", + "text": "Portals" + } + } + ] + } } }, { - "ID": "204", - "typeID": "TextArea", - "zOrder": "158", - "w": "218", + "ID": "2835", + "typeID": "__group__", + "zOrder": "89", + "measuredW": "224", + "measuredH": "44", + "w": "224", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "1029", - "y": "1072", + "x": "942", + "y": "711", "properties": { - "color": "16770457" + "controlName": "106-advanced-topics:error-boundaries" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "224", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "132", + "measuredH": "25", + "x": "47", + "y": "10", + "properties": { + "size": "17", + "text": "Error Boundaries" + } + } + ] + } } }, { - "ID": "205", - "typeID": "Label", - "zOrder": "159", - "measuredW": "63", - "measuredH": "25", - "x": "1105", - "y": "1082", + "ID": "2836", + "typeID": "__group__", + "zOrder": "90", + "measuredW": "224", + "measuredH": "44", + "w": "224", + "h": "44", + "x": "942", + "y": "760", "properties": { - "size": "17", - "text": "Cypress" + "controlName": "107-advanced-topics:fiber-architecture" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "224", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "138", + "measuredH": "25", + "x": "43", + "y": "10", + "properties": { + "size": "17", + "text": "Fiber Architecture" + } + } + ] + } } }, { - "ID": "208", - "typeID": "TextArea", - "zOrder": "160", - "w": "202", + "ID": "2837", + "typeID": "__group__", + "zOrder": "82", + "measuredW": "243", + "measuredH": "44", + "w": "243", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "787", - "y": "1034", + "x": "75", + "y": "569", "properties": { - "color": "16767334" + "controlName": "101-advanced-topics:hooks:writing-your-own-hooks" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "243", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "183", + "measuredH": "25", + "x": "28", + "y": "10", + "properties": { + "size": "17", + "text": "Writing your Own Hooks" + } + } + ] + } } }, { - "ID": "209", - "typeID": "Label", - "zOrder": "161", - "measuredW": "148", - "measuredH": "25", - "x": "814", - "y": "1044", + "ID": "2838", + "typeID": "__group__", + "zOrder": "96", + "measuredW": "157", + "measuredH": "44", + "w": "157", + "h": "44", + "x": "335", + "y": "911", "properties": { - "size": "17", - "text": "State Management" + "controlName": "100-ecosystem:routers" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "61", + "measuredH": "25", + "x": "48", + "y": "10", + "properties": { + "size": "17", + "text": "Routers" + } + } + ] + } } }, { - "ID": "210", - "typeID": "TextArea", - "zOrder": "162", - "w": "155", + "ID": "2839", + "typeID": "__group__", + "zOrder": "116", + "measuredW": "157", + "measuredH": "44", + "w": "157", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "837", - "y": "1117", + "x": "334", + "y": "963", "properties": { - "color": "16770457" + "controlName": "101-ecosystem:ssr" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "33", + "measuredH": "25", + "x": "61", + "y": "10", + "properties": { + "size": "17", + "text": "SSR" + } + } + ] + } } }, { - "ID": "211", - "typeID": "Label", - "zOrder": "163", - "measuredW": "117", - "measuredH": "25", - "x": "854", - "y": "1127", + "ID": "2840", + "typeID": "__group__", + "zOrder": "128", + "measuredW": "157", + "measuredH": "44", + "w": "157", + "h": "44", + "x": "334", + "y": "1014", "properties": { - "size": "17", - "text": "Context / State" + "controlName": "102-ecosystem:ssg" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "34", + "measuredH": "25", + "x": "61", + "y": "10", + "properties": { + "size": "17", + "text": "SSG" + } + } + ] + } } }, { - "ID": "212", - "typeID": "TextArea", - "zOrder": "164", - "w": "155", + "ID": "2842", + "typeID": "__group__", + "zOrder": "99", + "measuredW": "157", + "measuredH": "44", + "w": "157", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "837", - "y": "1166", + "x": "335", + "y": "1157", "properties": { - "color": "16770457" + "controlName": "103-ecosystem:api-calls" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "69", + "measuredH": "25", + "x": "43", + "y": "10", + "properties": { + "size": "17", + "text": "API Calls" + } + } + ] + } } }, { - "ID": "213", - "typeID": "Label", - "zOrder": "165", - "measuredW": "50", - "measuredH": "25", - "x": "890", - "y": "1176", + "ID": "2843", + "typeID": "__group__", + "zOrder": "125", + "measuredW": "159", + "measuredH": "44", + "w": "159", + "h": "44", + "x": "334", + "y": "1374", "properties": { - "size": "17", - "text": "Redux" + "controlName": "104-ecosystem:mobile" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "159", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "52", + "measuredH": "25", + "x": "55", + "y": "10", + "properties": { + "size": "17", + "text": "Mobile" + } + } + ] + } } }, { - "ID": "214", - "typeID": "TextArea", - "zOrder": "166", - "w": "155", + "ID": "2844", + "typeID": "__group__", + "zOrder": "92", + "measuredW": "202", + "measuredH": "44", + "w": "202", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "837", - "y": "1214", + "x": "780", + "y": "867", "properties": { - "color": "16770457" + "controlName": "105-ecosystem:forms" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "202", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "48", + "measuredH": "25", + "x": "77", + "y": "10", + "properties": { + "size": "17", + "text": "Forms" + } + } + ] + } } }, { - "ID": "215", - "typeID": "Label", - "zOrder": "167", - "measuredW": "44", - "measuredH": "25", - "x": "893", - "y": "1224", + "ID": "2845", + "typeID": "__group__", + "zOrder": "108", + "measuredW": "202", + "measuredH": "44", + "w": "202", + "h": "44", + "x": "780", + "y": "945", "properties": { - "size": "17", - "text": "MobX" + "controlName": "106-ecosystem:testing" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "202", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "56", + "measuredH": "25", + "x": "72", + "y": "10", + "properties": { + "size": "17", + "text": "Testing" + } + } + ] + } } }, { - "ID": "223", - "typeID": "TextArea", - "zOrder": "168", - "w": "157", + "ID": "2846", + "typeID": "__group__", + "zOrder": "112", + "measuredW": "202", + "measuredH": "44", + "w": "202", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "334", - "y": "963", + "x": "787", + "y": "1034", "properties": { - "color": "16767334" + "controlName": "107-ecosystem:state-management" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "202", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "148", + "measuredH": "25", + "x": "27", + "y": "10", + "properties": { + "size": "17", + "text": "State Management" + } + } + ] + } } }, { - "ID": "224", - "typeID": "Label", - "zOrder": "169", - "measuredW": "33", - "measuredH": "25", - "x": "395", - "y": "973", + "ID": "2847", + "typeID": "__group__", + "zOrder": "118", + "measuredW": "157", + "measuredH": "44", + "w": "157", + "h": "44", + "x": "843", + "y": "1277", "properties": { - "size": "17", - "text": "SSR" + "controlName": "108-ecosystem:styling" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "51", + "measuredH": "25", + "x": "51", + "y": "10", + "properties": { + "size": "17", + "text": "Styling" + } + } + ] + } } }, { - "ID": "225", - "typeID": "TextArea", - "zOrder": "170", + "ID": "2848", + "typeID": "__group__", + "zOrder": "97", + "measuredW": "158", + "measuredH": "44", "w": "158", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "107", - "y": "984", - "properties": { - "color": "16770457" - } - }, - { - "ID": "226", - "typeID": "Label", - "zOrder": "171", - "measuredW": "52", - "measuredH": "25", - "x": "159", - "y": "994", + "x": "109", + "y": "877", "properties": { - "size": "17", - "text": "Next.js" + "controlName": "100-ecosystem:routers:react-router" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "158", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "104", + "measuredH": "25", + "x": "27", + "y": "10", + "properties": { + "size": "17", + "text": "React Router" + } + } + ] + } } }, { - "ID": "229", - "typeID": "TextArea", - "zOrder": "172", + "ID": "2849", + "typeID": "__group__", + "zOrder": "98", + "measuredW": "157", + "measuredH": "44", "w": "157", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "843", - "y": "1277", + "x": "109", + "y": "927", "properties": { - "color": "16767334" + "controlName": "101-ecosystem:routers:reach-router" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "108", + "measuredH": "25", + "x": "26", + "y": "10", + "properties": { + "size": "17", + "text": "Reach Router" + } + } + ] + } } }, { - "ID": "230", - "typeID": "Label", - "zOrder": "173", - "measuredW": "51", - "measuredH": "25", - "x": "894", - "y": "1287", + "ID": "2850", + "typeID": "__group__", + "zOrder": "117", + "measuredW": "158", + "measuredH": "44", + "w": "158", + "h": "44", + "x": "107", + "y": "984", "properties": { - "size": "17", - "text": "Styling" + "controlName": "100-ecosystem:ssr:next-js" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "158", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "52", + "measuredH": "25", + "x": "52", + "y": "10", + "properties": { + "size": "17", + "text": "Next.js" + } + } + ] + } } }, { - "ID": "231", - "typeID": "TextArea", - "zOrder": "174", + "ID": "2851", + "typeID": "__group__", + "zOrder": "124", + "measuredW": "157", + "measuredH": "44", "w": "157", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "1060", - "y": "1223", - "properties": { - "color": "16770457" - } - }, - { - "ID": "232", - "typeID": "Label", - "zOrder": "175", - "measuredW": "78", - "measuredH": "25", - "x": "1100", - "y": "1233", + "x": "107", + "y": "1033", "properties": { - "size": "17", - "text": "Chakra UI" + "controlName": "101-ecosystem:ssg:gatsby" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "54", + "measuredH": "25", + "x": "51", + "y": "10", + "properties": { + "size": "17", + "text": "Gatsby" + } + } + ] + } } }, { - "ID": "233", - "typeID": "TextArea", - "zOrder": "176", + "ID": "2852", + "typeID": "__group__", + "zOrder": "129", + "measuredW": "157", + "measuredH": "44", "w": "157", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "1060", - "y": "1272", - "properties": { - "color": "16770457" - } - }, - { - "ID": "234", - "typeID": "Label", - "zOrder": "177", - "measuredW": "86", - "measuredH": "25", - "x": "1096", - "y": "1282", + "x": "334", + "y": "1082", "properties": { - "size": "17", - "text": "Material UI" + "controlName": "100-ecosystem:api-calls:react-query" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "90", + "measuredH": "25", + "x": "34", + "y": "9", + "properties": { + "size": "17", + "text": "react-query" + } + } + ] + } } }, { - "ID": "241", - "typeID": "TextArea", - "zOrder": "178", + "ID": "2853", + "typeID": "__group__", + "zOrder": "104", + "measuredW": "157", + "measuredH": "44", "w": "157", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "1060", - "y": "1320", + "x": "335", + "y": "1240", "properties": { - "color": "16770457" + "controlName": "101-ecosystem:api-calls:use-http" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "64", + "measuredH": "25", + "x": "45", + "y": "10", + "properties": { + "size": "17", + "text": "use-http" + } + } + ] + } } }, { - "ID": "242", - "typeID": "Label", - "zOrder": "179", - "measuredW": "84", - "measuredH": "25", - "x": "1095", - "y": "1330", + "ID": "2854", + "typeID": "__group__", + "zOrder": "105", + "measuredW": "156", + "measuredH": "44", + "w": "156", + "h": "44", + "x": "109", + "y": "1093", "properties": { - "size": "17", - "text": "Ant Design" + "controlName": "102-ecosystem:api-calls:apollo" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "156", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "48", + "measuredH": "25", + "x": "55", + "y": "10", + "properties": { + "size": "17", + "text": "Apollo" + } + } + ] + } } }, { - "ID": "246", - "typeID": "TextArea", - "zOrder": "180", - "w": "191", + "ID": "2855", + "typeID": "__group__", + "zOrder": "106", + "measuredW": "156", + "measuredH": "44", + "w": "156", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "829", - "y": "1351", + "x": "109", + "y": "1141", "properties": { - "color": "16770457" + "controlName": "103-ecosystem:api-calls:relay-modern" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "156", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "107", + "measuredH": "25", + "x": "25", + "y": "10", + "properties": { + "size": "17", + "text": "Relay Modern" + } + } + ] + } } }, { - "ID": "247", - "typeID": "Label", - "zOrder": "181", - "measuredW": "150", - "measuredH": "25", - "x": "848", - "y": "1361", + "ID": "2856", + "typeID": "__group__", + "zOrder": "100", + "measuredW": "157", + "measuredH": "44", + "w": "157", + "h": "44", + "x": "110", + "y": "1219", "properties": { - "size": "17", - "text": "Styled Components" + "controlName": "104-ecosystem:api-calls:axios" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "41", + "measuredH": "25", + "x": "57", + "y": "10", + "properties": { + "size": "17", + "text": "Axios" + } + } + ] + } } }, { - "ID": "248", - "typeID": "TextArea", - "zOrder": "182", - "w": "191", + "ID": "2857", + "typeID": "__group__", + "zOrder": "101", + "measuredW": "157", + "measuredH": "44", + "w": "157", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "829", - "y": "1400", - "properties": { - "color": "16770457" - } - }, - { - "ID": "249", - "typeID": "Label", - "zOrder": "183", - "measuredW": "64", - "measuredH": "25", - "x": "894", - "y": "1410", + "x": "109", + "y": "1269", "properties": { - "size": "17", - "text": "Emotion" + "controlName": "105-ecosystem:api-calls:unfetch" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "61", + "measuredH": "25", + "x": "49", + "y": "10", + "properties": { + "size": "17", + "text": "Unfetch" + } + } + ] + } } }, { - "ID": "250", - "typeID": "TextArea", - "zOrder": "184", + "ID": "2858", + "typeID": "__group__", + "zOrder": "102", + "measuredW": "157", + "measuredH": "44", "w": "157", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "107", - "y": "1033", - "properties": { - "color": "16770457" - } - }, - { - "ID": "251", - "typeID": "Label", - "zOrder": "185", - "measuredW": "54", - "measuredH": "25", - "x": "158", - "y": "1043", + "x": "109", + "y": "1318", "properties": { - "size": "17", - "text": "Gatsby" + "controlName": "106-ecosystem:api-calls:superagent" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "88", + "measuredH": "25", + "x": "35", + "y": "10", + "properties": { + "size": "17", + "text": "superagent" + } + } + ] + } } }, { - "ID": "255", - "typeID": "TextArea", - "zOrder": "186", + "ID": "2859", + "typeID": "__group__", + "zOrder": "126", + "measuredW": "159", + "measuredH": "44", "w": "159", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "334", + "x": "126", "y": "1374", "properties": { - "color": "16767334" - } - }, - { - "ID": "256", - "typeID": "Label", - "zOrder": "187", - "measuredW": "52", - "measuredH": "25", - "x": "389", - "y": "1384", - "properties": { - "size": "17", - "text": "Mobile" + "controlName": "100-ecosystem:mobile:react-native" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "159", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "100", + "measuredH": "25", + "x": "30", + "y": "10", + "properties": { + "size": "17", + "text": "React Native" + } + } + ] + } } }, { - "ID": "257", - "typeID": "TextArea", - "zOrder": "188", - "w": "159", + "ID": "2860", + "typeID": "__group__", + "zOrder": "93", + "measuredW": "171", + "measuredH": "44", + "w": "171", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "126", - "y": "1374", + "x": "1029", + "y": "819", "properties": { - "color": "16770457" + "controlName": "100-ecosystem:forms:react-hook-form" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "171", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "135", + "measuredH": "25", + "x": "19", + "y": "10", + "properties": { + "size": "17", + "text": "React Hook Form" + } + } + ] + } } }, { - "ID": "258", - "typeID": "Label", - "zOrder": "189", - "measuredW": "100", - "measuredH": "25", - "x": "156", - "y": "1384", + "ID": "2861", + "typeID": "__group__", + "zOrder": "94", + "measuredW": "171", + "measuredH": "44", + "w": "171", + "h": "44", + "x": "1029", + "y": "867", "properties": { - "size": "17", - "text": "React Native" + "controlName": "101-ecosystem:forms:formik" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "171", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "52", + "measuredH": "25", + "x": "60", + "y": "10", + "properties": { + "size": "17", + "text": "Formik" + } + } + ] + } } }, { - "ID": "262", - "typeID": "Arrow", - "zOrder": "190", - "w": "4", - "h": "89", - "measuredW": "150", - "measuredH": "100", - "x": "670", - "y": "1557", + "ID": "2862", + "typeID": "__group__", + "zOrder": "95", + "measuredW": "171", + "measuredH": "44", + "w": "171", + "h": "44", + "x": "1029", + "y": "915", "properties": { - "color": "2848996", - "curvature": "0", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "length": 3, - "x": 3, - "y": 0 - }, - "p1": { - "length": 0.5327426604018495, - "x": 0.5326751848090503, - "y": 0.008478779433645868 - }, - "p2": { - "length": 88, - "x": 0, - "y": 88 - }, - "rightArrow": "false" + "controlName": "102-ecosystem:forms:final-form" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "171", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "82", + "measuredH": "25", + "x": "46", + "y": "10", + "properties": { + "size": "17", + "text": "Final Form" + } + } + ] + } } }, { - "ID": "269", - "typeID": "TextArea", - "zOrder": "191", - "w": "157", + "ID": "2863", + "typeID": "__group__", + "zOrder": "109", + "measuredW": "218", + "measuredH": "44", + "w": "218", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "334", - "y": "1014", + "x": "1029", + "y": "974", "properties": { - "color": "16767334" + "controlName": "100-ecosystem:testing:jest" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "218", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "33", + "measuredH": "25", + "x": "92", + "y": "10", + "properties": { + "size": "17", + "text": "Jest" + } + } + ] + } } }, { - "ID": "270", - "typeID": "Label", - "zOrder": "192", - "measuredW": "34", - "measuredH": "25", - "x": "395", - "y": "1024", + "ID": "2864", + "typeID": "__group__", + "zOrder": "110", + "measuredW": "218", + "measuredH": "44", + "w": "218", + "h": "44", + "x": "1029", + "y": "1023", "properties": { - "size": "17", - "text": "SSG" + "controlName": "101-ecosystem:testing:react-testing-library" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "218", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "164", + "measuredH": "25", + "x": "25", + "y": "10", + "properties": { + "size": "17", + "text": "React Testing Library" + } + } + ] + } } }, { - "ID": "271", - "typeID": "TextArea", - "zOrder": "193", - "w": "157", + "ID": "2865", + "typeID": "__group__", + "zOrder": "111", + "measuredW": "218", + "measuredH": "44", + "w": "218", "h": "44", - "measuredW": "200", - "measuredH": "140", - "x": "334", - "y": "1082", + "x": "1029", + "y": "1072", "properties": { - "color": "16770457" + "controlName": "102-ecosystem:testing:cypress" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "218", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "63", + "measuredH": "25", + "x": "76", + "y": "10", + "properties": { + "size": "17", + "text": "Cypress" + } + } + ] + } } }, { - "ID": "272", - "typeID": "Label", - "zOrder": "194", - "measuredW": "90", - "measuredH": "25", - "x": "368", - "y": "1091", + "ID": "2866", + "typeID": "__group__", + "zOrder": "113", + "measuredW": "155", + "measuredH": "44", + "w": "155", + "h": "44", + "x": "837", + "y": "1117", "properties": { - "size": "17", - "text": "react-query" + "controlName": "100-ecosystem:state-management:conext-state" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "155", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "117", + "measuredH": "25", + "x": "17", + "y": "10", + "properties": { + "size": "17", + "text": "Context / State" + } + } + ] + } } }, { - "ID": "277", - "typeID": "Arrow", - "zOrder": "3", - "w": "2", - "h": "96", - "measuredW": "150", - "measuredH": "100", - "x": "411", - "y": "1091", + "ID": "2867", + "typeID": "__group__", + "zOrder": "114", + "measuredW": "155", + "measuredH": "44", + "w": "155", + "h": "44", + "x": "837", + "y": "1166", "properties": { - "color": "2848996", - "curvature": "0", - "direction": "bottom", - "leftArrow": "false", - "p0": { - "length": 95, - "x": 0, - "y": 95 - }, - "p1": { - "length": 0.4737749079645269, - "x": 0.4737425216042544, - "y": -0.005539552404165743 - }, - "p2": { - "length": 1, - "x": 1, - "y": 0 - }, - "rightArrow": "false", - "stroke": "dotted" + "controlName": "101-ecosystem:state-management:redux" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "155", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "50", + "measuredH": "25", + "x": "53", + "y": "10", + "properties": { + "size": "17", + "text": "Redux" + } + } + ] + } } }, { - "ID": "281", - "typeID": "Canvas", - "zOrder": "195", - "w": "542", - "h": "96", - "measuredW": "100", - "measuredH": "70", - "x": "295", - "y": "108" - }, - { - "ID": "284", - "typeID": "Arrow", - "zOrder": "2", - "w": "27", - "measuredW": "150", - "measuredH": "100", - "x": "638", - "y": "27", + "ID": "2868", + "typeID": "__group__", + "zOrder": "115", + "measuredW": "155", + "measuredH": "44", + "w": "155", + "h": "44", + "x": "837", + "y": "1214", "properties": { - "curvature": "0", - "leftArrow": "false", - "rightArrow": "false", - "color": "10027263", - "stroke": "dotted", - "p0": { - "x": 20.66666666666663, - "y": -0.33333333333333215 - }, - "p1": { - "x": 0.4525527916281198, - "y": 0.13367847141227748 - }, - "p2": { - "x": -0.019880609337405986, - "y": 99.62109147224172 + "controlName": "102-ecosystem:state-management:mobx" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "155", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "44", + "measuredH": "25", + "x": "56", + "y": "10", + "properties": { + "size": "17", + "text": "MobX" + } + } + ] } } }, { - "ID": "286", - "typeID": "Arrow", - "zOrder": "0", - "w": "24", - "h": "77", - "measuredW": "150", - "measuredH": "100", - "x": "618", - "y": "183", + "ID": "2869", + "typeID": "__group__", + "zOrder": "119", + "measuredW": "157", + "measuredH": "44", + "w": "157", + "h": "44", + "x": "1060", + "y": "1223", "properties": { - "curvature": "0", - "leftArrow": "false", - "rightArrow": "false", - "color": "10027263", - "p0": { - "x": 10, - "y": -0.3333333333333428 - }, - "p1": { - "x": 0.5175865027166142, - "y": -0.21132399199313673 - }, - "p2": { - "x": 24.66666666666663, - "y": 77 + "controlName": "100-ecosystem:styling:chakra-ui" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "78", + "measuredH": "25", + "x": "40", + "y": "10", + "properties": { + "size": "17", + "text": "Chakra UI" + } + } + ] } } }, { - "ID": "287", - "typeID": "Label", - "zOrder": "1", - "measuredW": "76", - "measuredH": "36", - "x": "647", - "y": "267", + "ID": "2870", + "typeID": "__group__", + "zOrder": "120", + "measuredW": "157", + "measuredH": "44", + "w": "157", + "h": "44", + "x": "1060", + "y": "1272", "properties": { - "size": "28", - "text": "React" + "controlName": "101-ecosystem:styling:material-ui" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "86", + "measuredH": "25", + "x": "36", + "y": "10", + "properties": { + "size": "17", + "text": "Material UI" + } + } + ] + } } }, { - "ID": "288", - "typeID": "Canvas", - "zOrder": "198", - "w": "576", - "h": "105", - "measuredW": "100", - "measuredH": "70", - "x": "351", - "y": "1487" - }, - { - "ID": "290", - "typeID": "Label", - "zOrder": "196", - "measuredW": "475", - "measuredH": "32", - "x": "329", - "y": "126", + "ID": "2871", + "typeID": "__group__", + "zOrder": "121", + "measuredW": "157", + "measuredH": "44", + "w": "157", + "h": "44", + "x": "1060", + "y": "1320", "properties": { - "size": "24", - "text": "Frontend Roadmap till Framework Selection" + "controlName": "102-ecosystem:styling:ant-design" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "157", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "84", + "measuredH": "25", + "x": "35", + "y": "10", + "properties": { + "size": "17", + "text": "Ant Design" + } + } + ] + } } }, { - "ID": "291", - "typeID": "Label", - "zOrder": "197", - "measuredW": "171", - "measuredH": "26", - "x": "496", - "y": "162", + "ID": "2872", + "typeID": "__group__", + "zOrder": "122", + "measuredW": "191", + "measuredH": "44", + "w": "191", + "h": "44", + "x": "829", + "y": "1351", "properties": { - "size": "18", - "text": "roadmap.sh/frontend", - "color": "10027263" + "controlName": "103-ecosystem:styling:styled-components" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "191", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "150", + "measuredH": "25", + "x": "19", + "y": "10", + "properties": { + "size": "17", + "text": "Styled Components" + } + } + ] + } } }, { - "ID": "292", - "typeID": "Label", - "zOrder": "199", - "measuredW": "502", - "measuredH": "32", - "x": "391", - "y": "1509", + "ID": "2873", + "typeID": "__group__", + "zOrder": "123", + "measuredW": "191", + "measuredH": "44", + "w": "191", + "h": "44", + "x": "829", + "y": "1400", "properties": { - "size": "24", - "text": "Frontend Roadmap after Framework Selection" + "controlName": "104-ecosystem:styling:emotion" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextArea", + "zOrder": "0", + "w": "191", + "h": "44", + "measuredW": "200", + "measuredH": "140", + "x": "0", + "y": "0", + "properties": { + "color": "16770457" + } + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "64", + "measuredH": "25", + "x": "65", + "y": "10", + "properties": { + "size": "17", + "text": "Emotion" + } + } + ] + } } }, { - "ID": "293", - "typeID": "Label", - "zOrder": "200", - "measuredW": "171", - "measuredH": "26", - "x": "556", - "y": "1545", + "ID": "2874", + "typeID": "__group__", + "zOrder": "131", + "measuredW": "576", + "measuredH": "105", + "w": "576", + "h": "105", + "x": "351", + "y": "1487", "properties": { - "text": "roadmap.sh/frontend", - "size": "18", - "color": "10027263" + "controlName": "ext_link:roadmap.sh/frontend" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "Canvas", + "zOrder": "0", + "w": "576", + "h": "105", + "measuredW": "100", + "measuredH": "70", + "x": "0", + "y": "0" + }, + { + "ID": "1", + "typeID": "Label", + "zOrder": "1", + "measuredW": "502", + "measuredH": "32", + "x": "40", + "y": "22", + "properties": { + "size": "24", + "text": "Frontend Roadmap after Framework Selection" + } + }, + { + "ID": "2", + "typeID": "Label", + "zOrder": "2", + "measuredW": "171", + "measuredH": "26", + "x": "205", + "y": "58", + "properties": { + "text": "roadmap.sh/frontend", + "size": "18", + "color": "10027263" + } + } + ] + } } } ] }, "attributes": { - "name": "New Wireframe 2", - "order": 1000010.3738670473, + "name": "New Wireframe 1 copy", + "order": 1000011.7645389404, "parentID": null, - "notes": null + "notes": "" }, "branchID": "Master", - "resourceID": "D99BBD4B-2F60-48E7-8996-D075F997D617", + "resourceID": "3DD51A3C-1F09-4BE6-B9FB-6875747EBA53", "mockupH": "1619", "mockupW": "1174", "measuredW": "1247", "measuredH": "1646", "version": "1.0" - } + }, + "groupOffset": { + "x": 0, + "y": 0 + }, + "dependencies": [], + "projectID": "file:///Users/kamranahmed/Desktop/devops%20roadmap%5C.bmpr" }