Fix flicker on python roadmap

* added echo content

* added egrep content

* added fgrep content

* Update 133-fgrep.md

* Update content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/127-echo.md

* Update content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/133-fgrep.md

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

content/roadmaps.json

@@ -177,7 +177,6 @@
     "isTextHeavy": false,
     "isCommunity": false,
     "featured": true,
-    "landingPath": "/roadmaps/103-react/landscape.md",
     "resourcesPath": "/roadmaps/103-react/resources.md",
     "jsonUrl": "/project/react.json",
     "versions": [
@@ -190,6 +189,7 @@
       "url": "https://twitter.com/kamranahmedse"
     },
     "pdfUrl": "/pdfs/react.pdf",
+    "contentPathsFilePath": "/roadmaps/103-react/content-paths.json",
     "id": "react",
     "metaPath": "/roadmaps/103-react/meta.json",
     "isUpcoming": false
@@ -237,6 +237,60 @@
     "metaPath": "/roadmaps/104-angular/meta.json",
     "isUpcoming": false
   },
+  {
+    "seo": {
+      "title": "Vue Developer Roadmap: Learn to become a Vue developer",
+      "description": "Community driven, articles, resources, guides, interview questions, quizzes for vue development. Learn to become a modern Vue developer by following the steps, skills, resources and guides listed in this roadmap.",
+      "keywords": [
+        "guide to becoming a vue developer",
+        "guide to becoming a vue.js developer",
+        "vue developer roadmap",
+        "vue.js developer roadmap",
+        "vue roadmap",
+        "vue.js roadmap",
+        "become vue developer",
+        "become vue.js developer",
+        "vue developer skills",
+        "vue.js developer skills",
+        "vue skills test",
+        "vue.js skills test",
+        "skills for vue development",
+        "skills for vue.js development",
+        "learn vue development",
+        "learn vue.js development",
+        "what is vue",
+        "what is vue.js",
+        "vue quiz",
+        "vue.js quiz",
+        "vue interview questions",
+        "vue.js interview questions"
+      ]
+    },
+    "title": "Vue Developer",
+    "description": "Everything that is there to learn about Vue and the ecosystem in 2022.",
+    "featuredTitle": "Vue",
+    "type": "tool",
+    "featuredDescription": "Step by step guide to become a Vue Developer in 2022",
+    "isTextHeavy": false,
+    "isCommunity": false,
+    "featured": true,
+    "jsonUrl": "/project/vue.json",
+    "resourcesPath": "/roadmaps/105-vue/resources.md",
+    "versions": [
+      "latest",
+      "2018",
+      "2017"
+    ],
+    "author": {
+      "name": "Kamran Ahmed",
+      "url": "https://twitter.com/kamranahmedse"
+    },
+    "pdfUrl": "/pdfs/vue.pdf",
+    "contentPathsFilePath": "/roadmaps/105-vue/content-paths.json",
+    "id": "vue",
+    "metaPath": "/roadmaps/105-vue/meta.json",
+    "isUpcoming": false
+  },
   {
     "seo": {
       "title": "Android Developer Roadmap: Learn to become an Android developer",
@@ -264,8 +318,8 @@
     "isCommunity": false,
     "featured": true,
     "jsonUrl": "/project/android.json",
-    "landingPath": "/roadmaps/105-android/landscape.md",
-    "resourcesPath": "/roadmaps/105-android/resources.md",
+    "landingPath": "/roadmaps/106-android/landscape.md",
+    "resourcesPath": "/roadmaps/106-android/resources.md",
     "versions": [
       "latest",
       "2018",
@@ -276,7 +330,7 @@
       "url": "https://twitter.com/kamranahmedse"
     },
     "id": "android",
-    "metaPath": "/roadmaps/105-android/meta.json",
+    "metaPath": "/roadmaps/106-android/meta.json",
     "isUpcoming": false
   },
   {
@@ -306,8 +360,7 @@
     "isCommunity": false,
     "featured": true,
     "jsonUrl": "/project/python.json",
-    "resourcesPath": "/roadmaps/106-python/resources.md",
-    "landingPath": "/roadmaps/106-python/landscape.md",
+    "resourcesPath": "/roadmaps/107-python/resources.md",
     "pdfUrl": "/pdfs/python.pdf",
     "versions": [
       "latest"
@@ -316,8 +369,9 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
+    "contentPathsFilePath": "/roadmaps/107-python/content-paths.json",
     "id": "python",
-    "metaPath": "/roadmaps/106-python/meta.json",
+    "metaPath": "/roadmaps/107-python/meta.json",
     "isUpcoming": false
   },
   {
@@ -358,8 +412,8 @@
     "isUpcoming": false,
     "featured": true,
     "jsonUrl": "/project/golang.json",
-    "landingPath": "/roadmaps/107-golang/landscape.md",
-    "resourcesPath": "/roadmaps/107-golang/resources.md",
+    "landingPath": "/roadmaps/108-golang/landscape.md",
+    "resourcesPath": "/roadmaps/108-golang/resources.md",
     "pdfUrl": "/pdfs/go.pdf",
     "versions": [
       "latest",
@@ -371,7 +425,7 @@
       "url": "https://twitter.com/kamranahmedse"
     },
     "id": "golang",
-    "metaPath": "/roadmaps/107-golang/meta.json"
+    "metaPath": "/roadmaps/108-golang/meta.json"
   },
   {
     "seo": {
@@ -410,8 +464,8 @@
     "isUpcoming": false,
     "featured": true,
     "jsonUrl": "/project/java.json",
-    "landingPath": "/roadmaps/108-java/landscape.md",
-    "resourcesPath": "/roadmaps/108-java/resources.md",
+    "landingPath": "/roadmaps/109-java/landscape.md",
+    "resourcesPath": "/roadmaps/109-java/resources.md",
     "versions": [
       "latest",
       "2018",
@@ -423,7 +477,7 @@
     },
     "pdfUrl": "/pdfs/java.pdf",
     "id": "java",
-    "metaPath": "/roadmaps/108-java/meta.json"
+    "metaPath": "/roadmaps/109-java/meta.json"
   },
   {
     "seo": {
@@ -455,8 +509,8 @@
     "featuredTitle": "DBA",
     "type": "role",
     "featuredDescription": "Step by step guide to become a PostgreSQL DBA in 2022",
-    "landingPath": "/roadmaps/109-postgresql-dba/landscape.md",
-    "resourcesPath": "/roadmaps/109-postgresql-dba/resources.md",
+    "landingPath": "/roadmaps/110-postgresql-dba/landscape.md",
+    "resourcesPath": "/roadmaps/110-postgresql-dba/resources.md",
     "author": {
       "name": "Alexey Lesovsky",
       "url": "https://github.com/lesovsky"
@@ -467,48 +521,9 @@
     "detailed": false,
     "versions": [],
     "id": "postgresql-dba",
-    "metaPath": "/roadmaps/109-postgresql-dba/meta.json",
+    "metaPath": "/roadmaps/110-postgresql-dba/meta.json",
     "isUpcoming": false
   },
-  {
-    "seo": {
-      "title": "AWS Roadmap: Learn to use AWS",
-      "description": "Community driven, articles, resources, guides, interview questions, quizzes for react development. Learn to become a modern React developer by following the steps, skills, resources and guides listed in this roadmap.",
-      "keywords": [
-        "guide to aws",
-        "aws roadmap",
-        "aws skills",
-        "aws skills test",
-        "skills for aws",
-        "cloud development",
-        "what is aws",
-        "aws quiz",
-        "aws interview questions"
-      ]
-    },
-    "title": "AWS",
-    "description": "Everything that is there to learn about AWS and the ecosystem in 2022.",
-    "featuredTitle": "AWS",
-    "type": "tool",
-    "featuredDescription": "Step by step guide to learn AWS in 2022",
-    "isTextHeavy": false,
-    "isCommunity": false,
-    "isUpcoming": true,
-    "featured": true,
-    "landingPath": "/roadmaps/110-aws/landscape.md",
-    "resourcesPath": "/roadmaps/110-aws/resources.md",
-    "versions": [
-      "latest",
-      "2018",
-      "2017"
-    ],
-    "author": {
-      "name": "Kamran Ahmed",
-      "url": "https://twitter.com/kamranahmedse"
-    },
-    "id": "aws",
-    "metaPath": "/roadmaps/110-aws/meta.json"
-  },
   {
     "seo": {
       "title": "QA Roadmap: Learn to become a modern QA engineer",
@@ -535,13 +550,13 @@
     "featuredDescription": "Step by step guide to becoming a modern QA Engineer in 2022",
     "isUpcoming": true,
     "featured": true,
-    "landingPath": "/roadmaps/111-qa/landscape.md",
-    "resourcesPath": "/roadmaps/111-qa/resources.md",
+    "landingPath": "/roadmaps/112-qa/landscape.md",
+    "resourcesPath": "/roadmaps/112-qa/resources.md",
     "author": {
       "name": "Anas Fitiani",
       "url": "https://github.com/anas-qa"
     },
     "id": "qa",
-    "metaPath": "/roadmaps/111-qa/meta.json"
+    "metaPath": "/roadmaps/112-qa/meta.json"
   }
 ]

content/roadmaps/100-frontend/content/115-testing-your-apps/100-jest.md

@@ -1,4 +1,5 @@
 # Jest
+
 Jest is a delightful JavaScript Testing Framework with a focus on simplicity.
 It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
 

content/roadmaps/100-frontend/content/115-testing-your-apps/101-react-testing-library.md

@@ -3,4 +3,4 @@
 The React Testing Library is a very lightweight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.
 
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
-<BadgeLink colorScheme='blue' badgeText='Official Getting Started' href='https://testing-library.com/docs/react-testing-library/intro/' />
+<BadgeLink colorScheme='blue' badgeText='Official Getting Started' href='https://testing-library.com/docs/react-testing-library/intro/'>React Testing Library</BadgeLink>

content/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md

@@ -1,8 +1,6 @@
 # Next.js
 
-Next.js is an open-source development framework built on top of Node.js
-enabling React based web applications functionalities such as server-side
-rendering and generating static websites.
+Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.
 
 <ResourceGroupTitle>Free Resources</ResourceGroupTitle>
 <BadgeLink colorScheme='blue' badgeText='Website' href='https://nextjs.org/'>Official Website</BadgeLink>

content/roadmaps/101-backend/content/103-learn-a-language/105-javascript.md

@@ -6,6 +6,7 @@ JavaScript allows you to add interactivity to your pages. Common examples that y
 
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.w3schools.com/js/'>W3Schools – JavaScript Tutorial</BadgeLink>
 <BadgeLink badgeText='Read' colorScheme="yellow" href='https://javascript.info/'>The Modern JavaScript Tutorial</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://eloquentjavascript.net/'>Eloquent Javascript - Book</BadgeLink>
 <BadgeLink badgeText='Watch' href='https://youtu.be/hdI2bqOjy3c'>JavaScript Crash Course for Beginners</BadgeLink>
 
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=fBNz5xF-Kx4'>Node.js Crash Course</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/120-awk.md

@@ -1 +1,11 @@
-# Awk
+# awk
+
+`awk` is a general-purpose scripting language used for manipulating data or text and generating reports in the Linux world. It is mostly used for pattern scanning and processing. It searches one or more files to see if they contain lines that match the specified patterns and then performs the associated actions. 
+
+It has the below syntax: 
+
+`awk options 'selection_criteria {action}' input-file > output-file` e.g. `$ awk '{print}' file.txt`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/awk-command-unixlinux-examples/'>What is AWK? How to use it?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://linuxize.com/post/awk-command/'>How AWK works?</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/121-sed.md

@@ -1 +1,12 @@
-# Sed
+# sed
+
+`sed`(**S**tream **Ed**itor) command in UNIX can perform lots of functions on file like searching, finding and replacing, insertion or deletion. By using SED you can edit files even without opening them in editors like [VI Editor](https://www.redhat.com/sysadmin/introduction-vi-editor).
+
+It has the following syntax:
+
+`$ sed [options].. [script] [input-file]` e.g. `$ sed 's/search-regex/replacement-txt/g' file.txt`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/sed-command-in-linux-unix-with-examples/'>What is SED? with examples</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Manual' href='https://www.gnu.org/software/sed/manual/sed.html'>Detailed Manual</BadgeLink>
+

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/122-grep.md

@@ -1 +1,11 @@
-# Grep
+# grep
+
+The `grep` command (**g**lobal search for **r**egular **e**xpression and **p**rint out) searches file(s) for a particular pattern of characters, and displays all lines that contain that pattern. It can be used with other commands like `ps` making it more useful.
+
+It has the following syntax:
+
+`$ grep [options] pattern [files]` e.g. `$ grep "search-regex" file-1.txt`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/grep-command-in-unixlinux/'>What is Grep? with examples</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Manual' href='https://www.gnu.org/software/grep/manual/grep.html'>Detailed Manual</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/123-sort.md

@@ -1 +1,12 @@
-# Sort
+# sort
+
+`sort` command is used to sort the contents of a file in a particular order. By default, it sorts a file assuming the contents are in ASCII. But it also can also be used to sort numerically by using appropriate options.
+
+It has the following syntax
+
+`$ sort [options].. input-file` e.g. `$ sort file.txt`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/sort-command-linuxunix-examples/'>Sort command with examples</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Wiki' href='https://en.wikipedia.org/wiki/Sort_(Unix)'>Options</BadgeLink>
+

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/126-cat.md

@@ -1 +1,16 @@
-# Cat
+# cat
+
+`cat` (concatenate) command is very frequently used in Linux. It reads data from the file and gives its content as output. It helps us to create, view, and concatenate files.
+
+
+It has the following syntax:
+
+* View : `$ cat [option] [input-file]`
+* Create : `$ cat [content] > [new-file]`
+* Append : `$ cat [append_content] >> [existing-file]`
+
+e.g. `$ cat file.txt`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tecmint.com/13-basic-cat-command-examples-in-linux/'>Cat Command with examples</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Wiki' href='https://en.wikipedia.org/wiki/Cat_(Unix)'>Options</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/127-echo.md

@@ -1 +1,8 @@
-# Echo
+# echo
+
+`echo` is a built-in command in Linux used to display lines of text/string that are passed as an argument. It is mostly used in shell scripts and batch files to output status text or `ENV` variables to the screen or a file. 
+
+It has the following syntax: `$ echo [options] [string]` e.g. `$ echo "Hello World!"`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tecmint.com/echo-command-in-linux/'>Echo command with Examples</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/132-egrep.md

@@ -1 +1,12 @@
-# Egrep
+# egrep
+
+`egrep` (**E**xtended **Grep**) is a pattern searching command which belongs to the family of grep functions. It treats the pattern as an extended **regular expression** and prints out the lines that match the pattern.
+It works the same way as `$ grep -E` command
+
+It has the following syntax:
+
+`$  egrep [options] pattern [files]` e.g. `$ egrep "search-regex" *.txt`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://linuxhint.com/linux_egrep_command_examples/'>Egrep command with examples</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.thegeekdiary.com/fgrep-command-examples-in-linux'>options</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/133-fgrep.md

@@ -1 +1,13 @@
-# Fgrep
+# fgrep
+
+`fgrep` (**F**ixed **Grep**) command is used for searching fixed-character strings in a file.
+It treats meta-characters or regular expressions in the search field as strings. For searching any **direct string** or files having meta-characters, this is the version of grep which should be selected. It works the same way as `$ grep -F` command.
+
+It has the following syntax:
+
+`$  fgrep [options] [string] [files]` e.g. `$ fgrep "search-string" file.txt`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/fgrep-command-in-linux-with-examples/'>Fgrep command with examples</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.thegeekdiary.com/fgrep-command-examples-in-linux/'>options</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.tecmint.com/difference-between-grep-egrep-and-fgrep-in-linux/'>Grep vs Egrep vs Fgrep</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/readme.md

@@ -1 +1,7 @@
-# Managing servers
+# Managing Servers
+
+Server management includes all of the monitoring and maintenance required for servers to operate reliably and at optimal performance levels. Server management also involves the management of hardware, software, security, and backups all in service of keeping the IT environment operational and efficient. The primary goals of an effective server management strategy are to:
+
+- Minimize server slowdowns and downtime while maximizing reliability.
+- Build secure server environments.
+- Scale servers and related operations to meet the needs of the organization over time.

content/roadmaps/102-devops/content/103-networking-protocols/102-http.md

@@ -1 +1,10 @@
-# Http
+# HTTP
+
+HTTP is the `TCP/IP` based application layer communication protocol which standardizes how the client and server communicate with each other. It defines how the content is requested and transmitted across the internet.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/ddos/glossary/hypertext-transfer-protocol-http/'>What is HTTP?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview'>An overview of HTTP</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://kamranahmed.info/blog/2016/08/13/http-in-depth'>Journey to HTTP/2</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2021/08/http3-core-concepts-part1/'>HTTP/3 From A To Z: Core Concepts</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=iYM2zFP3Zn0'>HTTP Crash Course & Exploration</BadgeLink>

content/roadmaps/102-devops/content/103-networking-protocols/readme.md

@@ -1 +1,6 @@
-# Networking protocols
+# Networking Protocols
+
+A network protocol is an established set of rules that determine how data is transmitted between different devices in the same network. Essentially, it allows connected devices to communicate with each other, regardless of any differences in their internal processes, structure or design. Network protocols are the reason you can easily communicate with people all over the world, and thus play a critical role in modern digital communications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.comptia.org/content/guides/what-is-a-network-protocol'>What Is a Network Protocol, and How Does It Work?</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/101-lxc.md

@@ -1 +1,8 @@
-# Lxc
+# LXC
+
+LXC is a well-known Linux container runtime that consists of tools, templates, and library and language bindings. It's pretty low level, very flexible and covers just about every containment feature supported by the upstream kernel.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://linuxcontainers.org/'>LXC Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://linuxcontainers.org/lxc/documentation/'>LXC Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=CWmkSj_B-wo'>Getting started with LXC containers</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/102-configuration-management/100-ansible.md

@@ -1 +1,8 @@
-# Ansible
+# Ansible
+
+Ansible is an open-source configuration management, application deployment and provisioning tool that uses it's own declarative language in YAML. Ansible is agentlesse, meaning you only need remote connections via SSH or Windows Remote Management via Powershell in order to function
+
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.ansible.com/'>Ansible Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.ansible.com/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://www.ansible.com/resources/get-started'>Ansible Getting Started Guide</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/102-configuration-management/102-salt.md

@@ -1 +1,8 @@
-# Salt
+# Salt
+
+Salt is an open-source event-driven IT automation, remote task execution, and configuration management software service. Built on python, Salt uses simple and human-readable YAML combined with event-driven automation to deploy and configure complex IT systems.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://docs.saltproject.io/en/latest/topics/about_salt_project.html'>Salt Project Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.saltproject.io/en/latest/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Introduction' colorScheme='blue' href='https://docs.saltproject.io/en/latest/topics/index.html'>Introduction to Salt</BadgeLink>
+<BadgeLink badgeText='Install' colorScheme='blue' href='https://docs.saltproject.io/en/latest/topics/installation/index.html#installation'>Salt Installation</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/102-configuration-management/103-puppet.md

@@ -1 +1,7 @@
-# Puppet
+# Puppet
+
+Puppet, an automated administrative engine for your Linux, Unix, and Windows systems, performs administrative tasks (such as adding users, installing packages, and updating server configurations) based on a centralized specification.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://puppet.com/'>Puppet Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://puppet.com/docs'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Introduction' colorScheme='blue' href='https://puppet.com/docs/puppet/6/puppet_overview.html'>Introduction to Puppet</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/103-infrastructure-provisioning/101-aws-cdk.md

@@ -1 +1,9 @@
-# Aws cdk
+# AWS CDK
+
+The AWS Cloud Development Kit (AWS CDK) is an open-source software development framework used to provision cloud infrastructure resources in a safe, repeatable manner through AWS CloudFormation.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://aws.amazon.com/cdk/'>AWS CDK Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.aws.amazon.com/cdk/index.html'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='AWS CDK Explained' colorScheme='blue' href='https://docs.aws.amazon.com/cdk/v2/guide/home.html'>What is the AWS CDK?</BadgeLink>
+<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://docs.aws.amazon.com/cdk/v2/guide/getting_started.html'>AWS SDK Getting Started Guide</BadgeLink>
+<BadgeLink badgeText='AWS CDK Examples' colorScheme='blue' href='https://github.com/aws-samples/aws-cdk-examples'>AWS CDK Examples</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/103-infrastructure-provisioning/102-cloudformation.md

@@ -1 +1,8 @@
-# Cloudformation
+# CloudFormation
+
+CloudFormation is the AWS service that helps to define collections of AWS resources. CloudFormation lets you model, provision, and manage AWS and third-party resources by treating infrastructure as code.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://aws.amazon.com/cloudformation/'>AWS CloudFormation Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.aws.amazon.com/cloudformation/index.html'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://aws.amazon.com/cloudformation/getting-started/'>AWS CloudFormation Getting Started Guide</BadgeLink>
+<BadgeLink badgeText='Templates' colorScheme='blue' href='https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/cfn-sample-templates.html'>CloudFormation Sample Templates</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/103-infrastructure-provisioning/103-pulumi.md

@@ -1 +1,7 @@
-# Pulumi
+# Pulumi
+
+Pulumi is an open source Infrastructure as Code tool that can be written in TypeScript, JavaScript, Python, Go, .NET, Java, and YAML to model cloud infrastructure.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.pulumi.com/'>Pulumi Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://www.pulumi.com/docs/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://www.pulumi.com/docs/get-started/'>Pulumi Getting Started Guide</BadgeLink>

content/roadmaps/102-devops/content/106-ci-cd/106-azure-devops-services.md

@@ -1 +1,7 @@
-# Azure devops services
+# Azure DevOps
+
+Azure DevOps is developed by Microsoft as a full scale application lifecycle management and CI/CD service. Azure DevOps provides developer services for allowing teams to plan work, collaborate on code development, and build and deploy applications.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://azure.microsoft.com/en-us/services/devops/#overview'>Azure DevOps Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.microsoft.com/en-us/azure/devops/?view=azure-devops&viewFallbackFrom=vsts'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://docs.microsoft.com/en-us/azure/devops/user-guide/sign-up-invite-teammates?view=azure-devops'>Azure DevOps Getting Started Guide</BadgeLink>

content/roadmaps/102-devops/content/106-ci-cd/108-drone.md

@@ -1 +1,7 @@
-# Drone
+# Drone
+
+Drone is a CI/CD service offering by [Harness](https://harness.io/). Each build runs on an isolated Docker container, and Drone integrates with many popular source code management repositories like GitHub, BitBucket and GitLab
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.drone.io/'>Drone Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.drone.io/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://docs.drone.io/server/overview/'>Drone Getting Started Guide</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/100-infrastructure-monitoring/100-prometheus.md

@@ -1 +1,7 @@
-# Prometheus
+# Prometheus
+
+Prometheus is a free software application used for event monitoring and alerting. It records real-time metrics in a time series database built using a HTTP pull model, with flexible queries and real-time alerting.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://prometheus.io/'>Pulumi Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://prometheus.io/docs/introduction/overview/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Getting Started Guide' colorScheme='blue' href='https://prometheus.io/docs/tutorials/getting_started/'>Getting Started with Prometheus</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/100-infrastructure-monitoring/101-nagios.md

@@ -1 +1,8 @@
-# Nagios
+# Nagios
+
+Nagios is a powerful tool that provides you with instant awareness of your organization’s mission-critical IT infrastructure. Nagios allows you to detect and repair problems and mitigate future issues before they affect end-users and customers.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://www.nagios.org/'>Nagios Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.nagios.org/documentation/'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://support.nagios.com/kb/'>Nagios Support Knowledge Base</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/100-infrastructure-monitoring/102-grafana.md

@@ -1 +1,9 @@
-# Grafana
+# Grafana
+
+Grafana is the open-source platform for monitoring and observability. It allows you to query, visualize, alert on and understand your metrics no matter where they are stored.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://grafana.com/'>Grafana Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://grafana.com/docs/'>Grafana Official Documentation</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://community.grafana.com/'>Grafana Community</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://grafana.com/videos/'>Grafana Webinars and Videos</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/102-logs-management/100-elastic-stack.md

@@ -1 +1,8 @@
-# Elastic stack
+# Elastic Stack
+
+Elastic Stack is a group of open source products comprised of Elasticsearch, Kibana, Beats, and Logstash and more that help store, search, analyze, and visualize data from various source, in different format, in real-time.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.elastic.co/elastic-stack/'>Elastic Stack Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://www.elastic.co/guide/index.html'>Official Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Features List' href='https://www.elastic.co/elastic-stack/features'>Elastic Stack features</BadgeLink>

content/roadmaps/102-devops/content/108-cloud-providers/101-google-cloud.md

@@ -1 +1,7 @@
-# Google cloud
+# Google Cloud
+
+Google Cloud is Google's cloud computing service offering, providing over 150 products/services to choose from. Google Cloud runs on the same infrastructure that Google uses internally for its end-user products, such as Search, Gmail, Google Drive, and YouTube.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://cloud.google.com/'>Google Cloud Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://cloud.google.com/docs'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://cloud.google.com/docs/get-started/'>Google Cloud Get Started Guide</BadgeLink>

content/roadmaps/102-devops/content/108-cloud-providers/102-azure.md

@@ -1 +1,8 @@
-# Azure
+# Azure
+
+Microsoft Azure is a is a cloud computing service operated by Microsoft. Azure currently provides more than 200 products and cloud services.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://azure.microsoft.com/en-us/'>Azure Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.microsoft.com/en-us/azure/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://azure.microsoft.com/en-ca/get-started/#explore-azure'>Azure Get Started Guide</BadgeLink>
+<BadgeLink badgeText='Get to know Azure' colorScheme='blue' href='https://azure.microsoft.com/en-us/explore/'>Get to know Azure</BadgeLink>

content/roadmaps/102-devops/content/108-cloud-providers/103-heroku.md

@@ -1 +1,7 @@
-# Heroku
+# Heroku
+
+Heroku is a cloud platform as a service subsidiary of Salesforce. Heroku officially supports Node.js, Ruby, Java, PHP, Python, Go, Scala and Clojure, along with any language that runs on Linux via a third-party build pack.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.heroku.com/'>Heroku Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://devcenter.heroku.com/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://devcenter.heroku.com/start'>Heroku Get Started Guide</BadgeLink>

content/roadmaps/102-devops/content/108-cloud-providers/104-digital-ocean.md

@@ -1 +1,7 @@
-# Digital ocean
+# DigitalOcean
+
+DigitalOcean is a cloud computing service offering products and services in Compute, Storage, Managed Databases, Containers & Images and Networking.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.digitalocean.com/'>DigitalOcean Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.digitalocean.com/products/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://docs.digitalocean.com/products/getting-started/'>DigitalOcean Get Started Guide</BadgeLink>

content/roadmaps/103-react/content-paths.json

@@ -0,0 +1,64 @@
+{
+  "home": "/roadmaps/103-react/content/readme.md",
+  "react-advanced-topics": "/roadmaps/103-react/content/101-react-advanced-topics/readme.md",
+  "react-advanced-topics:hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md",
+  "react-advanced-topics:hooks:common-hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md",
+  "react-advanced-topics:hooks:writing-your-own-hooks": "/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md",
+  "react-advanced-topics:context": "/roadmaps/103-react/content/101-react-advanced-topics/101-context.md",
+  "react-advanced-topics:refs": "/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md",
+  "react-advanced-topics:render-props": "/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md",
+  "react-advanced-topics:high-order-components": "/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md",
+  "react-advanced-topics:portals": "/roadmaps/103-react/content/101-react-advanced-topics/105-portals.md",
+  "react-advanced-topics:error-boundaries": "/roadmaps/103-react/content/101-react-advanced-topics/106-error-boundaries.md",
+  "react-advanced-topics:fiber-architecture": "/roadmaps/103-react/content/101-react-advanced-topics/107-fiber-architecture.md",
+  "react-fundamental-topics": "/roadmaps/103-react/content/100-react-fundamental-topics/readme.md",
+  "react-fundamental-topics:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md",
+  "react-fundamental-topics:jsx": "/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md",
+  "react-fundamental-topics:components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md",
+  "react-fundamental-topics:components:functional-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md",
+  "react-fundamental-topics:components:class-components": "/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md",
+  "react-fundamental-topics:props-vs-state": "/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md",
+  "react-fundamental-topics:conditional-rendering": "/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md",
+  "react-fundamental-topics:component-life-cycle": "/roadmaps/103-react/content/100-react-fundamental-topics/105-component-life-cycle.md",
+  "react-fundamental-topics:lists-and-keys": "/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md",
+  "react-fundamental-topics:composition-vs-inheritance": "/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md",
+  "react-fundamental-topics:basic-hooks": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md",
+  "react-fundamental-topics:basic-hooks:use-state": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md",
+  "react-fundamental-topics:basic-hooks:use-effect": "/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md",
+  "react-ecosystem": "/roadmaps/103-react/content/102-react-ecosystem/readme.md",
+  "react-ecosystem:routers": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/readme.md",
+  "react-ecosystem:routers:react-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md",
+  "react-ecosystem:routers:reach-router": "/roadmaps/103-react/content/102-react-ecosystem/100-routers/101-reach-router.md",
+  "react-ecosystem:ssr": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/readme.md",
+  "react-ecosystem:ssr:next-js": "/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-next-js.md",
+  "react-ecosystem:ssg": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/readme.md",
+  "react-ecosystem:ssg:gatsby": "/roadmaps/103-react/content/102-react-ecosystem/102-ssg/101-gatsby.md",
+  "react-ecosystem:api-calls": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md",
+  "react-ecosystem:api-calls:react-query": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md",
+  "react-ecosystem:api-calls:use-http": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md",
+  "react-ecosystem:api-calls:apollo": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md",
+  "react-ecosystem:api-calls:relay-modern": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md",
+  "react-ecosystem:api-calls:axios": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md",
+  "react-ecosystem:api-calls:unfetch": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md",
+  "react-ecosystem:api-calls:superagent": "/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md",
+  "react-ecosystem:mobile": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/readme.md",
+  "react-ecosystem:mobile:react-native": "/roadmaps/103-react/content/102-react-ecosystem/104-mobile/100-react-native.md",
+  "react-ecosystem:forms": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md",
+  "react-ecosystem:forms:react-hook-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/100-react-hook-form.md",
+  "react-ecosystem:forms:formik": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/101-formik.md",
+  "react-ecosystem:forms:final-form": "/roadmaps/103-react/content/102-react-ecosystem/105-forms/102-final-form.md",
+  "react-ecosystem:testing": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/readme.md",
+  "react-ecosystem:testing:jest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/100-jest.md",
+  "react-ecosystem:testing:react-testing-library": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md",
+  "react-ecosystem:testing:cypress": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/102-cypress.md",
+  "react-ecosystem:state-management": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md",
+  "react-ecosystem:state-management:conext-state": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-conext-state.md",
+  "react-ecosystem:state-management:redux": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md",
+  "react-ecosystem:state-management:mobx": "/roadmaps/103-react/content/102-react-ecosystem/107-state-management/102-mobx.md",
+  "react-ecosystem:styling": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md",
+  "react-ecosystem:styling:chakra-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md",
+  "react-ecosystem:styling:material-ui": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md",
+  "react-ecosystem:styling:ant-design": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-ant-design.md",
+  "react-ecosystem:styling:styled-components": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md",
+  "react-ecosystem:styling:emotion": "/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md"
+}

content/roadmaps/103-react/content/100-react-fundamental-topics/100-create-react-app.md

@@ -0,0 +1,8 @@
+# Create React App
+
+Create React App is the CLI based tool and is the best way to start building a new single-page application in React.
+
+It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://create-react-app.dev/docs/getting-started'>Official Website</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/101-jsx.md

@@ -0,0 +1,8 @@
+# JSX
+
+JSX stands for JavaScript XML. It allows writing HTML in JavaScript and converts the HTML tags into React elements.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Introduction' href='https://reactjs.org/docs/introducing-jsx.html'>Introduction to JSX</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/jsx-in-react-introduction/'>JSX in React – Explained with Examples</BadgeLink>
+

content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/100-functional-components.md

@@ -0,0 +1,7 @@
+# Functional Components
+
+Functional components are some of the more common components that will come across while working in React. These are simply JavaScript functions. We can create a functional component to React by writing a JavaScript function. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree. Functional components can also have state which is managed using React hooks.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html#function-and-class-components'>Components and Props</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/reactjs-functional-components/'>ReactJS Functional Components</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/101-class-components.md

@@ -0,0 +1,10 @@
+# Class Components
+
+Components can either be created using the class based approach or a functional approach. These components are simple classes (made up of multiple functions that add functionality to the application). All class based components are child classes for the Component class of ReactJS.
+
+Although the class components are supported in React, it is encouraged to write functional components and make use of hooks in modern React applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html#function-and-class-components'>Components and Props</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://medium.com/geekculture/is-there-any-reason-to-still-use-react-class-components-9b6a1e6aa9ef'>Is There Any Reason to Still Use React Class Components?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/functional-components-vs-class-components-in-react'>Functional Components vs Class Components in React</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/102-components/readme.md

@@ -0,0 +1,9 @@
+# Components
+
+Components are the building blocks of React applications. They let us split the UI into independent, reusable pieces, and think about each piece in isolation.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/components-and-props.html'>Components and Props</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/react-component.html'>Components in Depth</BadgeLink>
+
+

content/roadmaps/103-react/content/100-react-fundamental-topics/103-props-vs-state.md

@@ -0,0 +1,8 @@
+# Props vs State
+
+Props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of component render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/faq-state.html'>Component State</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://stackoverflow.com/questions/27991366/what-is-the-difference-between-state-and-props-in-react'>What is the difference between state and props in React?</BadgeLink>
+

content/roadmaps/103-react/content/100-react-fundamental-topics/104-conditional-rendering.md

@@ -0,0 +1,11 @@
+# Conditional Rendering
+
+In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
+
+Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [if](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/conditional-rendering.html'>Conditional Rendering</BadgeLink>
+
+
+

content/roadmaps/103-react/content/100-react-fundamental-topics/105-component-life-cycle.md

@@ -0,0 +1,9 @@
+# Component Life Cycle
+
+Each component has several “lifecycle methods” that you can override to run code at particular times in the process. You can use this [lifecycle diagram](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) as a cheat sheet. In the list below, commonly used lifecycle methods are marked as bold. The rest of them exist for relatively rare use cases.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/react-component.html#the-component-lifecycle'>The Component Lifecycle</BadgeLink>
+
+
+

content/roadmaps/103-react/content/100-react-fundamental-topics/106-lists-and-keys.md

@@ -0,0 +1,6 @@
+# Lists and Keys
+
+When you render lists in React, you can use the `key` prop to specify a unique key for each item. This key is used to identify which item to update when you want to update a specific item.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/lists-and-keys.html'>Lists and Keys</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/107-composition-vs-inheritance.md

@@ -0,0 +1,7 @@
+# Composition vs Inheritance
+
+React has a powerful composition model, and it is recommended to use composition instead of inheritance to reuse code between components.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/composition-vs-inheritance.html'>Composition vs Inheritance</BadgeLink>
+

content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/100-use-state.md

@@ -0,0 +1,7 @@
+# useState Hook
+
+`useState` hook is used to manage the state of a component in functional components. Calling `useState` returns an array with two elements: the current state value and a function to update the state.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-state.html'>Using the State Hook</BadgeLink>
+

content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/101-use-effect.md

@@ -0,0 +1,6 @@
+# useEffect Hook
+
+`useEffect` is a special hook that lets you run side effects in React. It is similar to componentDidMount and componentDidUpdate, but it only runs when the component (or some of its props) changes.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-effect.html'>Using the Effect Hook</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/108-basic-hooks/readme.md

@@ -0,0 +1,7 @@
+# Hooks
+
+Hooks were introduced in React 16.8 and they let us use state and other React features without writing a class
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-intro.html'>Introduction to Hooks</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-reference.html'>Hooks Reference</BadgeLink>

content/roadmaps/103-react/content/100-react-fundamental-topics/readme.md

@@ -0,0 +1,7 @@
+# React
+
+React is a JavaScript library for building user interfaces. It is an open-source, component-based front end library responsible only for the view layer of the application.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactjs.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/getting-started.html'>Official Documentation</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/101-writing-your-own-hooks.md

@@ -0,0 +1,8 @@
+# Writing Custom Hooks
+
+Building your own Hooks lets you extract component logic into reusable functions.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-custom.html'>Creating Custom Hooks</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/how-to-create-react-hooks/'>How to Build Your Own React Hooks</BadgeLink>
+

content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/102-common-hooks.md

@@ -0,0 +1,6 @@
+# Common Hooks
+
+React also has a lot of hooks that allow you to write more efficient React code.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-reference.html#usereducer'>React Hooks Reference</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/100-hooks/readme.md

@@ -0,0 +1,8 @@
+# React Hooks
+
+Hooks were introduced in React 16.8 and they let us use state and other React features without writing a class
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-intro.html'>Introduction to Hooks</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/hooks-reference.html'>Hooks Reference</BadgeLink>
+

content/roadmaps/103-react/content/101-react-advanced-topics/101-context.md

@@ -0,0 +1,8 @@
+# Context
+
+Context provides a way to pass data through the component tree without having to pass props down manually at every level.
+
+In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/context.html'>Official React Context Docs</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/102-refs.md

@@ -0,0 +1,8 @@
+# Refs
+
+Refs provide a way to access DOM nodes or React elements created in the render method.
+
+In the typical React dataflow, props are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/refs-and-the-dom.html'>Refs and DOM</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/103-render-props.md

@@ -0,0 +1,8 @@
+# Render Props
+
+The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.
+
+A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/render-props.html'>Render Props in React</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/104-high-order-components.md

@@ -0,0 +1,8 @@
+# High Order Components
+
+A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.
+
+Concretely, a higher-order component is a function that takes a component and returns a new component.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/higher-order-components.html'>High-Order Components</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/105-portals.md

@@ -0,0 +1,6 @@
+# Portals
+
+Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/portals.html'>Portals in React</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/106-error-boundaries.md

@@ -0,0 +1,8 @@
+# Error Boundaries
+
+In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to emit cryptic errors on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
+
+Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/error-boundaries.html'>Error Boundaries in React</BadgeLink>

content/roadmaps/103-react/content/101-react-advanced-topics/107-fiber-architecture.md

@@ -0,0 +1,9 @@
+# Fiber Architecture
+
+React 16.0 was released with an update to the React core algorithm. This new core architecture is named “Fiber.” Facebook has completely rewritten the internals of React from the ground-up while keeping the public API essentially unchanged; in simple terms, it means only changing the engine of a running car.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://github.com/acdlite/react-fiber-architecture'>React Fiber Architecture</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://dzone.com/articles/understanding-of-react-fiber-architecture'>Understanding React Fiber Architecture</BadgeLink>
+
+

content/roadmaps/103-react/content/101-react-advanced-topics/readme.md

@@ -0,0 +1,3 @@
+# Advanced Topics
+
+Now that you have covered the basics, next we have the advanced topics such as advanced hook topics, context, refs, portals, error boundaries and more.

content/roadmaps/103-react/content/102-react-ecosystem/100-routers/100-react-router.md

@@ -0,0 +1,8 @@
+# React Router
+
+React router is the most famous library when it comes to implementing routing in React applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactrouter.com/'>React Router — Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactrouter.com/docs/en/v6/getting-started/tutorial'>Getting Started Guide</BadgeLink>
+

content/roadmaps/103-react/content/102-react-ecosystem/100-routers/101-reach-router.md

@@ -0,0 +1,8 @@
+# Reach Router
+
+Reach Router is a small, simple router for React that borrows from React Router, Ember, and Preact Router. Reach Router has a small footprint, supports only simple route patterns by design, and has strong (but experimental) accessibility features.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reach.tech/router/'>Reach Router — Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reach.tech/router/tutorial/01-intro'>Getting Started Guide</BadgeLink>
+

content/roadmaps/103-react/content/102-react-ecosystem/100-routers/readme.md

@@ -0,0 +1,3 @@
+# Routing
+
+Routing is an essential concept in Single Page Applications (SPA). When your application is divided into separated logical sections, and all of them are under their own URL, your users can easily share links among each other.

content/roadmaps/103-react/content/102-react-ecosystem/101-ssr/100-next-js.md

@@ -0,0 +1,10 @@
+# Next.js
+
+Next.js is an open-source development framework built on top of Node.js enabling React based web applications functionalities such as server-side rendering and generating static websites.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Website' href='https://nextjs.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://nextjs.org/docs/getting-started'>Official Docs for Getting Started</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://masteringnextjs.com/'>Mastering Next.js</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://youtu.be/1WmNXEVia8I'>Next.js for Beginners - freeCodeCamp</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Handbook' href='https://www.freecodecamp.org/news/the-next-js-handbook/'>The Next.js Handbook — freeCodeCamp</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/101-ssr/readme.md

@@ -0,0 +1,11 @@
+# Server-side rendering
+
+Server-side rendering refers to the process that the service side completes the HTML structure splicing of the page, sends it to the browser, and then binds the status and events for it to become a fully interactive page.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.educative.io/answers/what-is-server-side-rendering'>what is server side rendering</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://medium.com/@mbleigh/when-should-i-server-side-render-c2a383ff2d0f'>When should I Server-Side Render?</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://vuejs.org/guide/scaling-up/ssr.html'>Server-Side Rendering (SSR)</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=GQzn7XRdzxY'>what is server side rendering?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=okvg3MRAPs0'>What is server-side rendering for web development?</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/102-ssg/101-gatsby.md

@@ -0,0 +1,8 @@
+# Gatsby
+
+Gatsby is a React-based open source framework with performance, scalability and security built-in.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.gatsbyjs.com/'>Gatsby Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://www.gatsbyjs.com/docs'>Gatsby Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtube.com/playlist?list=PL4cUxeGkcC9hw1g77I35ZivVLe8k2nvjB'>Gatsby Tutorial</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/102-ssg/readme.md

@@ -0,0 +1,9 @@
+# Static Site Generators
+
+A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates. Essentially, a static site generator automates the task of coding individual HTML pages and gets those pages ready to serve to users ahead of time. Because these HTML pages are pre-built, they can load very quickly in users' browsers.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/learning/performance/static-site-generator/'>What is a static site generator?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://nextjs.org/docs/advanced-features/static-html-export'>Next.js SSG</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.gatsbyjs.com/docs/glossary/static-site-generator/'>Gatsby SSG</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.smashingmagazine.com/2021/10/building-ssg-11ty-vite-jam-sandwich/'>SSG — An 11ty, Vite And JAM Sandwich</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/100-react-query.md

@@ -0,0 +1,7 @@
+# React Query
+
+Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/TanStack/query'>TanStack Query</BadgeLink>
+<BadgeLink colorScheme='red' badgeText='Watch' href='https://www.youtube.com/watch?v=novnyCaa7To'>React Query in 100 Seconds</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/101-use-http.md

@@ -0,0 +1,9 @@
+# use-http
+
+React hook for making isomorphic http requests.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://use-http.com/#/'>Official Website: use-http</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/ava/use-http'>ava / use-http</BadgeLink>
+
+

content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/102-apollo.md

@@ -0,0 +1,9 @@
+# Apollo
+
+Apollo is a platform for building a unified graph, a communication layer that helps you manage the flow of data between your application clients (such as web and native apps) and your back-end services.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.apollographql.com'>Apollo Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.apollographql.com/docs/'>Official Docs</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Watch' href='https://www.youtube.com/c/ApolloGraphQL/'>Official YouTube Channel</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=YyUWW04HwKY'>GraphQL With React Tutorial - Apollo Client</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/103-relay-modern.md

@@ -0,0 +1,7 @@
+# Relay Modern
+
+Relay is a JavaScript client used in the browser to fetch GraphQL data. It's a JavaScript framework developed by Facebook for managing and fetching data in React applications. It is built with scalability in mind in order to power complex applications like Facebook. The ultimate goal of GraphQL and Relay is to deliver instant UI-response interactions.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://relay.dev/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://relay.dev/docs/'>Introduction to Relay modern</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/104-axios.md

@@ -0,0 +1,9 @@
+# Axios
+
+The most common way for frontend programs to communicate with servers is through the HTTP protocol. You are probably familiar with the Fetch API and the XMLHttpRequest interface, which allows you to fetch resources and make HTTP requests.
+
+Axios is a client HTTP API based on the XMLHttpRequest interface provided by browsers.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://axios-http.com/docs/intro'>Axios Getting Started</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://blog.logrocket.com/how-to-make-http-requests-like-a-pro-with-axios/#why'>How to make HTTP requests with Axios</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/105-unfetch.md

@@ -0,0 +1,6 @@
+# Unfetch
+
+Unfetch is the bare minimum 500b [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) polyfill.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/developit/unfetch'>Official GitHub Repository</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/106-superagent.md

@@ -0,0 +1,7 @@
+# Superagent
+
+Small progressive client-side HTTP request library, and Node.js module with the same API, supporting many high-level HTTP client features
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://visionmedia.github.io/superagent/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/visionmedia/superagent'>GitHub Repository</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/103-api-calls/readme.md

@@ -0,0 +1,8 @@
+# API Calls
+
+There are several options available to make API calls from your React.js applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/faq-ajax.html'>AJAX and APIs</BadgeLink>
+
+

content/roadmaps/103-react/content/102-react-ecosystem/104-mobile/100-react-native.md

@@ -0,0 +1,9 @@
+# React Native
+
+React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactnative.dev/'>React Native: Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactnative.dev/docs/getting-started'>Official Getting Started</BadgeLink>
+
+

content/roadmaps/103-react/content/102-react-ecosystem/104-mobile/readme.md

@@ -0,0 +1,3 @@
+# Mobile
+
+React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.

content/roadmaps/103-react/content/102-react-ecosystem/105-forms/100-react-hook-form.md

@@ -0,0 +1,7 @@
+# React hook form
+
+React hook form is an opensource form library for react. Performant, flexible and extensible forms with easy-to-use validation.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://react-hook-form.com/'>React Hook Form: Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/react-hook-form/react-hook-form'>react-hook-form/react-hook-form</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/105-forms/101-formik.md

@@ -0,0 +1,12 @@
+# Formik
+
+Formik is another famous opensource form library that helps with getting values in and out of form state, validation and error messages, and handling form submissions.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://formik.org/'>Official Website — Formik</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://formik.org/docs/overview'>Getting Started</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/formik/formik'>formik/formik</BadgeLink>
+
+
+
+

content/roadmaps/103-react/content/102-react-ecosystem/105-forms/102-final-form.md

@@ -0,0 +1,8 @@
+# Final form
+
+High performance subscription-based form state management for React.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://final-form.org/react'>Final Form — Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/final-form/react-final-form'>final-form / react-final-form</BadgeLink>
+

content/roadmaps/103-react/content/102-react-ecosystem/105-forms/readme.md

@@ -0,0 +1,3 @@
+# Forms
+
+Although you can build forms using vanilla React, it normally requires a lot of boilerplate code. This is because the form is built using a combination of state and props. To make it easier to manage forms, we use some sort of library.

content/roadmaps/103-react/content/102-react-ecosystem/106-testing/100-jest.md

@@ -0,0 +1,6 @@
+# Jest
+
+Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://jestjs.io/'>Jest Website</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/106-testing/101-react-testing-library.md

@@ -0,0 +1,6 @@
+# React Testing Library
+
+The React Testing Library is a very lightweight solution for testing React components. It provides light utility functions on top of react-dom and react-dom/test-utils, in a way that encourages better testing practices. Its primary guiding principle is: The more your tests resemble the way your software is used, the more confidence they can give you.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Getting Started' href='https://testing-library.com/docs/react-testing-library/intro/'>React Testing Library</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/106-testing/102-cypress.md

@@ -0,0 +1,8 @@
+# Cypress
+
+Cypress framework is a JavaScript-based end-to-end testing framework built on top of Mocha – a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and convenient. It also uses a BDD/TDD assertion library and a browser to pair with any JavaScript testing framework.
+
+<ResourceGroupTitle>Free Resources</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Website' href='https://www.cypress.io/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://docs.cypress.io/guides/overview/why-cypress#Other'>Official Documentation</BadgeLink>
+<BadgeLink colorScheme='purple' badgeText='Watch' href='https://www.youtube.com/watch?v=7N63cMKosIE'>Cypress End-to-End Testing</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/106-testing/readme.md

@@ -0,0 +1,7 @@
+# Testing
+
+A key to building software that meets requirements without defects is testing. Software testing helps developers know they are building the right software. When tests are run as part of the development process (often with continuous integration tools), they build confidence and prevent regressions in the code.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.guru99.com/software-testing-introduction-importance.html'>What is Software Testing?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.browserstack.com/guide/testing-pyramid-for-test-automation'>Testing Pyramid</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/100-conext-state.md

@@ -0,0 +1,8 @@
+# Context
+
+Context provides a way to pass data through the component tree without having to pass props down manually at every level.
+
+In a typical React application, data is passed top-down (parent to child) via props, but such usage can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://reactjs.org/docs/context.html'>Official React Context Docs</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/101-redux.md

@@ -0,0 +1,9 @@
+# Redux
+
+Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as [live code editing combined with a time traveling debugger](https://github.com/reduxjs/redux-devtools).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://redux.js.org/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://redux.js.org/introduction/getting-started'>Official Getting Started to Redux</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://redux.js.org/tutorials/essentials/part-1-overview-concepts'>Official Tutorial to Learn Redux</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867'>Fundamentals of Redux Course from Dan Abramov</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/102-mobx.md

@@ -0,0 +1,8 @@
+# MobX
+
+MobX is an open source state management tool. MobX, a simple, scalable, and standalone state management library, follows functional reactive programming (FRP) implementation and prevents inconsistent state by ensuring that all derivations are performed automatically.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://mobx.js.org/'>MobX Official Website</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=WQQq1QbYlAw'>Intro to MobX Tutorial</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/107-state-management/readme.md

@@ -0,0 +1,6 @@
+# State Management
+
+Application state management is the process of maintaining knowledge of an application's inputs across multiple related data flows that form a complete business transaction -- or a session -- to understand the condition of the app at any given moment. In computer science, an input is information put into the program by the user and state refers to the condition of an application according to its stored inputs -- saved as variables or constants. State can also be described as the collection of preserved information that forms a complete session.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.techtarget.com/searchapparchitecture/definition/state-management'>What is State Management?</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/100-chakra-ui.md

@@ -0,0 +1,11 @@
+# Chakra UI
+
+Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://chakra-ui.com/'>Chakra UI Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Docs' href='https://chakra-ui.com/docs/getting-started'>Chakra UI Official Getting Started</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/build-a-modern-user-interface-with-chakra-ui-fac68106'>Build a Modern User Interface with Chakra UI</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/wI2vqXsjsIo'>Official Getting Started Video</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://youtu.be/s-bIsz-NR3c'>Chakra UI Crash Course</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/why-should-you-start-using-chakraui/'>Why You Should Start Using Chakra UI</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/101-material-ui.md

@@ -0,0 +1,8 @@
+# Material UI
+
+Material-UI is an open-source framework that features React components that implement Google’s Material Design.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Framework Website' href='https://mui.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Docs' href='https://mui.com/getting-started/installation/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=vyJU9efvUtQ'>Material UI React Tutorial</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/102-ant-design.md

@@ -0,0 +1,9 @@
+# Ant design
+
+An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://ant.design/'>Official Website: Ant Design</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='GitHub Repository' href='https://github.com/ant-design/ant-design'>ant-design / ant-design</BadgeLink>
+
+

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/103-styled-components.md

@@ -0,0 +1,9 @@
+# Styled components
+
+Styled-components is a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components. With styled-components, you can use the CSS you’re already familiar with instead of having to learn a new styling structure.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://styled-components.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://styled-components.com/docs'>Official Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=02zO0hZmwnw'>Styled Components Crash Course & Project</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/104-emotion.md

@@ -0,0 +1,8 @@
+# Emotion
+
+Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://emotion.sh/docs/introduction'>Official Website and Docs</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=yO3JU2bMLGA'>Styled components using emotion in React</BadgeLink>

content/roadmaps/103-react/content/102-react-ecosystem/108-styling/readme.md

@@ -0,0 +1,3 @@
+# Styling
+
+While "CSS in JS" is the most predominant way of styling modern frontend applications, there are several different ways to style your React applications whether it is vanilla CSS, [CSS Modules](https://github.com/css-modules/css-modules), or [CSS in JS](https://css-tricks.com/a-thorough-analysis-of-css-in-js/) etc and each has several frameworks available.

content/roadmaps/103-react/content/102-react-ecosystem/readme.md

@@ -0,0 +1,7 @@
+# Ecosystem
+
+Thanks to its popularity, React has been enriched by a vast ecosystem of plugins and tools. A (long) list is available here: [awesome-react](https://github.com/enaqx/awesome-react).
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Awesome React' href='https://github.com/enaqx/awesome-react'>Awesome React</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Awesome React Components' href='https://github.com/brillout/awesome-react-components'>Awesome React Components</BadgeLink>

content/roadmaps/103-react/content/readme.md

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

content/roadmaps/103-react/landscape.md

@@ -1,7 +0,0 @@
-The intent of this guide is to give you an idea about the React ecosystem and to help guide your learning if you are confused. We have another [roadmap on the Frontend Development](/frontend) that focuses on the frontend development if you are interested in that.
-
-Also, please note that the list below is exhaustive, and the items are listed in no particular order. You don't need to learn everything listed in the picture, however knowing what you don't know is as important as knowing things.
-
-![](/roadmaps/react.png)
-
-Please note that the list is opinionated, and you might have different opinions than those of the author. Having said that, [we would love to hear your opinions](https://github.com/kamranahmedse/developer-roadmap/issues/new) and incorporate them in the picture if suitable.

content/roadmaps/103-react/meta.json

@@ -26,7 +26,6 @@
   "isTextHeavy": false,
   "isCommunity": false,
   "featured": true,
-  "landingPath": "./landscape.md",
   "resourcesPath": "./resources.md",
   "jsonUrl": "/project/react.json",
   "versions": [
@@ -38,5 +37,6 @@
     "name": "Kamran Ahmed",
     "url": "https://twitter.com/kamranahmedse"
   },
-  "pdfUrl": "/pdfs/react.pdf"
-}
+  "pdfUrl": "/pdfs/react.pdf",
+  "contentPathsFilePath": "./content-paths.json"
+}

content/roadmaps/105-vue/content-paths.json

@@ -0,0 +1,70 @@
+{
+  "home": "/roadmaps/105-vue/content/readme.md",
+  "fundamental-topics": "/roadmaps/105-vue/content/100-fundamental-topics/readme.md",
+  "fundamental-topics:vue-cli": "/roadmaps/105-vue/content/100-fundamental-topics/100-vue-cli.md",
+  "fundamental-topics:components": "/roadmaps/105-vue/content/100-fundamental-topics/101-components/readme.md",
+  "fundamental-topics:components:single-file-components": "/roadmaps/105-vue/content/100-fundamental-topics/101-components/100-single-file-components.md",
+  "fundamental-topics:components:component-registration": "/roadmaps/105-vue/content/100-fundamental-topics/101-components/101-component-registration.md",
+  "fundamental-topics:components:props": "/roadmaps/105-vue/content/100-fundamental-topics/101-components/102-props.md",
+  "fundamental-topics:components:events": "/roadmaps/105-vue/content/100-fundamental-topics/101-components/103-events.md",
+  "fundamental-topics:components:attribute-inheritance": "/roadmaps/105-vue/content/100-fundamental-topics/101-components/104-attribute-inheritance.md",
+  "fundamental-topics:templates": "/roadmaps/105-vue/content/100-fundamental-topics/102-templates.md",
+  "fundamental-topics:directives": "/roadmaps/105-vue/content/100-fundamental-topics/103-directives.md",
+  "fundamental-topics:api-styles": "/roadmaps/105-vue/content/100-fundamental-topics/104-api-styles/readme.md",
+  "fundamental-topics:api-styles:options-api": "/roadmaps/105-vue/content/100-fundamental-topics/104-api-styles/100-options-api.md",
+  "fundamental-topics:api-styles:composition-api": "/roadmaps/105-vue/content/100-fundamental-topics/104-api-styles/101-composition-api.md",
+  "fundamental-topics:app-configurations": "/roadmaps/105-vue/content/100-fundamental-topics/105-app-configurations.md",
+  "fundamental-topics:rendering-lists": "/roadmaps/105-vue/content/100-fundamental-topics/106-rendering-lists.md",
+  "fundamental-topics:conditional-rendering": "/roadmaps/105-vue/content/100-fundamental-topics/107-conditional-rendering.md",
+  "fundamental-topics:lifecycle-hooks": "/roadmaps/105-vue/content/100-fundamental-topics/108-lifecycle-hooks.md",
+  "fundamental-topics:forms-handling": "/roadmaps/105-vue/content/100-fundamental-topics/109-forms-handling.md",
+  "fundamental-topics:events-handling": "/roadmaps/105-vue/content/100-fundamental-topics/110-events-handling.md",
+  "fundamental-topics:computed-properties": "/roadmaps/105-vue/content/100-fundamental-topics/111-computed-properties.md",
+  "advanced-topics": "/roadmaps/105-vue/content/101-advanced-topics/readme.md",
+  "advanced-topics:ref": "/roadmaps/105-vue/content/101-advanced-topics/100-ref.md",
+  "advanced-topics:torefs": "/roadmaps/105-vue/content/101-advanced-topics/101-torefs.md",
+  "advanced-topics:reactive": "/roadmaps/105-vue/content/101-advanced-topics/102-reactive.md",
+  "advanced-topics:computed": "/roadmaps/105-vue/content/101-advanced-topics/103-computed.md",
+  "advanced-topics:watch": "/roadmaps/105-vue/content/101-advanced-topics/104-watch.md",
+  "advanced-topics:next-tick": "/roadmaps/105-vue/content/101-advanced-topics/105-next-tick.md",
+  "advanced-topics:composables": "/roadmaps/105-vue/content/101-advanced-topics/106-composables.md",
+  "advanced-topics:async-components": "/roadmaps/105-vue/content/101-advanced-topics/107-async-components.md",
+  "advanced-topics:teleport-components": "/roadmaps/105-vue/content/101-advanced-topics/108-teleport-components.md",
+  "advanced-topics:provide-inject": "/roadmaps/105-vue/content/101-advanced-topics/109-provide-inject.md",
+  "advanced-topics:custom-directives": "/roadmaps/105-vue/content/101-advanced-topics/110-custom-directives.md",
+  "advanced-topics:custom-events": "/roadmaps/105-vue/content/101-advanced-topics/111-custom-events.md",
+  "advanced-topics:plugins": "/roadmaps/105-vue/content/101-advanced-topics/112-plugins.md",
+  "advanced-topics:watchers": "/roadmaps/105-vue/content/101-advanced-topics/113-watchers.md",
+  "advanced-topics:slots": "/roadmaps/105-vue/content/101-advanced-topics/114-slots.md",
+  "advanced-topics:transition": "/roadmaps/105-vue/content/101-advanced-topics/115-transition.md",
+  "advanced-topics:transition-group": "/roadmaps/105-vue/content/101-advanced-topics/116-transition-group.md",
+  "ecosystem": "/roadmaps/105-vue/content/102-ecosystem/readme.md",
+  "ecosystem:routing": "/roadmaps/105-vue/content/102-ecosystem/100-routing/readme.md",
+  "ecosystem:routing:vue-router": "/roadmaps/105-vue/content/102-ecosystem/100-routing/100-vue-router.md",
+  "ecosystem:forms": "/roadmaps/105-vue/content/102-ecosystem/101-forms/readme.md",
+  "ecosystem:forms:vue-formulate": "/roadmaps/105-vue/content/102-ecosystem/101-forms/100-vue-formulate.md",
+  "ecosystem:forms:vee-validate": "/roadmaps/105-vue/content/102-ecosystem/101-forms/101-vee-validate.md",
+  "ecosystem:forms:vuelidate": "/roadmaps/105-vue/content/102-ecosystem/101-forms/102-vuelidate.md",
+  "ecosystem:ssr": "/roadmaps/105-vue/content/102-ecosystem/102-ssr/readme.md",
+  "ecosystem:ssr:quasar": "/roadmaps/105-vue/content/102-ecosystem/102-ssr/100-quasar.md",
+  "ecosystem:ssr:nuxt-js": "/roadmaps/105-vue/content/102-ecosystem/102-ssr/101-nuxt-js.md",
+  "ecosystem:ssg": "/roadmaps/105-vue/content/102-ecosystem/103-ssg/readme.md",
+  "ecosystem:ssg:gridsome": "/roadmaps/105-vue/content/102-ecosystem/103-ssg/100-gridsome.md",
+  "ecosystem:ssg:vuepress": "/roadmaps/105-vue/content/102-ecosystem/103-ssg/101-vuepress.md",
+  "ecosystem:state-management": "/roadmaps/105-vue/content/102-ecosystem/104-state-management/readme.md",
+  "ecosystem:state-management:pinia": "/roadmaps/105-vue/content/102-ecosystem/104-state-management/100-pinia.md",
+  "ecosystem:mobile-apps": "/roadmaps/105-vue/content/102-ecosystem/105-mobile-apps/readme.md",
+  "ecosystem:mobile-apps:capacitor": "/roadmaps/105-vue/content/102-ecosystem/105-mobile-apps/100-capacitor.md",
+  "ecosystem:api-calls": "/roadmaps/105-vue/content/102-ecosystem/106-api-calls/readme.md",
+  "ecosystem:api-calls:apollo": "/roadmaps/105-vue/content/102-ecosystem/106-api-calls/100-apollo.md",
+  "ecosystem:api-calls:vue-relay": "/roadmaps/105-vue/content/102-ecosystem/106-api-calls/101-vue-relay.md",
+  "ecosystem:api-calls:axios": "/roadmaps/105-vue/content/102-ecosystem/106-api-calls/102-axios.md",
+  "ecosystem:api-calls:unfetch": "/roadmaps/105-vue/content/102-ecosystem/106-api-calls/103-unfetch.md",
+  "ecosystem:api-calls:superagent": "/roadmaps/105-vue/content/102-ecosystem/106-api-calls/104-superagent.md",
+  "ecosystem:jest": "/roadmaps/105-vue/content/102-ecosystem/107-jest.md",
+  "ecosystem:vue-testing-library": "/roadmaps/105-vue/content/102-ecosystem/108-vue-testing-library.md",
+  "ecosystem:cypress": "/roadmaps/105-vue/content/102-ecosystem/109-cypress.md",
+  "ecosystem:tailwind-css": "/roadmaps/105-vue/content/102-ecosystem/110-tailwind-css.md",
+  "ecosystem:vuetify": "/roadmaps/105-vue/content/102-ecosystem/111-vuetify.md",
+  "ecosystem:element-ui": "/roadmaps/105-vue/content/102-ecosystem/112-element-ui.md"
+}

content/roadmaps/105-vue/content/100-fundamental-topics/100-vue-cli.md

@@ -0,0 +1,18 @@
+# Vue CLI
+
+Vue CLI is a full system for rapid Vue.js development, providing:
+
+- Interactive project scaffolding via `@vue/cli`.
+- A runtime dependency (`@vue/cli-service`) that is:
+  - Upgradeable;
+  - Built on top of webpack, with sensible defaults;
+  - Configurable via in-project config file;
+  - Extensible via plugins
+- A rich collection of official plugins integrating the best tools in the frontend ecosystem.
+- A full graphical user interface to create and manage Vue.js projects.
+
+Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://cli.vuejs.org/guide/'>Vue CLI Guide</BadgeLink>
+