Add dedicated roadmap alert on the roadmap nodes

* Resources added for Docker swarm

* Update content/roadmaps/102-devops/content/105-infrastructure-as-code/104-docker-swarm.md

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

components/guide/guide-grid-item.tsx

@@ -21,7 +21,7 @@ export function GuideGridItem(props: GuideGridItemProps) {
     <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={href} shadow='xl' p='20px'
          rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
       <Text mb='10px' fontSize='13px' color='gray.400'>
-        {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
+        {isNew && <Badge colorScheme={'green'} mr='10px'>New</Badge>}
         {date}
       </Text>
       <Heading color='white' mb={'6px'} fontSize='20px'>{title}</Heading>

components/icons/tree.svg

@@ -0,0 +1 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 18v-7h-9v-5h3v-6h-8v6h3v5h-9v7h-2v6h6v-6h-2v-5h7v5h-2v6h6v-6h-2v-5h7v5h-2v6h6v-6z"/></svg>

components/links-list-item.tsx

@@ -49,7 +49,7 @@ export function LinksListItem(props: LinksListItemProps) {
         {icon}
         <Text maxWidth={'345px'} isTruncated as='span'>{title}</Text>
         {badgeText &&
-        <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>{badgeText}</Badge>}
+        <Badge pos='relative' top='1px' variant='subtle' colorScheme='green' ml='10px'>{badgeText}</Badge>}
       </Flex>
       <Text d={[hideSubtitleOnMobile ? 'none' : 'inline', 'inline']} mt={['3px', 0]} as='span'
             fontSize={['11px', '11px', '12px']} color='gray.500'>{subtitle}</Text>

components/md-renderer/mdx-components/dedicated-roadmap.tsx

@@ -0,0 +1,22 @@
+import { Box, Flex, Heading, Text } from '@chakra-ui/react';
+import TreeIcon from '../../icons/tree.svg';
+
+type DedicatedRoadmapProps = {
+  href: string;
+  title: string;
+  description: string;
+};
+
+export function DedicatedRoadmap(props: DedicatedRoadmapProps) {
+  const { href, title, description } = props;
+
+  return (
+    <Flex as={'a'} target='_blank' href={ href } p={5} px={5} mt={6} rounded='md' alignItems='center'  _hover={{ bg: 'yellow.400'}} bg='yellow.300'>
+      <Box d={['none', 'none', 'none', 'block', 'block']} mr={4} height='32px' w='32px' as={TreeIcon} color='gray.900' />
+      <Box as='span'>
+        <Heading fontSize='lg' as={'h4'} mb='2px' color='gray.900'>{ title }</Heading>
+        <Text color='gray.700' as='span' fontSize='md'>{ description }</Text>
+      </Box>
+    </Flex>
+  );
+}

components/md-renderer/mdx-components/index.tsx

@@ -11,6 +11,7 @@ import { BadgeLink } from './badge-link';
 import { Li, Ul } from './ul';
 import PremiumBlock from './premium-block';
 import { ResourceGroupTitle } from './resource-group-title';
+import { DedicatedRoadmap } from './dedicated-roadmap';
 
 const MdxComponents = {
   p: P,
@@ -18,6 +19,7 @@ const MdxComponents = {
   pre: Pre,
   blockquote: BlockQuote,
   a: EnrichedLink,
+  DedicatedRoadmap,
   table: Table,
   iframe: IFrame,
   img: Img,

components/roadmap/content-drawer.tsx

@@ -108,6 +108,7 @@ export function ContentDrawer(props: ContentDrawerProps) {
               </Text>
             </Button>
           </Flex>
+
           <RoadmapGroup isOutlet roadmap={roadmap} group={groupId} />
         </Box>
       </RemoveScroll>

components/watch/video-grid-item.tsx

@@ -7,7 +7,6 @@ type VideoGridItemProps = {
   date: string;
   target?: string;
   isNew?: boolean;
-  isPro?: boolean;
   colorIndex?: number;
 };
 
@@ -54,14 +53,13 @@ const bgColorList = [
 ];
 
 export function VideoGridItem(props: VideoGridItemProps) {
-  const { title, subtitle, date, isNew = false, isPro = false, colorIndex = 0, href, target } = props;
+  const { title, subtitle, date, isNew = false, colorIndex = 0, href, target } = props;
 
   return (
     <Box _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} as={Link} href={ href } target={target || '_self'} shadow='xl' p='20px'
           rounded='10px' bg={bgColorList[colorIndex] ?? bgColorList[0]} flex={1}>
       <Text mb='7px' fontSize='12px' color='gray.400'>
-        {isNew && <Badge colorScheme={'yellow'} mr='10px'>New</Badge>}
-        {isPro && <Badge colorScheme={'blue'} mr='10px'>PRO</Badge>}
+        {isNew && <Badge colorScheme={'green'} mr='10px'>New</Badge>}
         {date}
       </Text>
       <Heading color='white' mb={'6px'} fontSize='20px' lineHeight={'28px'}>{title}</Heading>

content/guides.json

@@ -3,7 +3,7 @@
     "id": "avoid-render-blocking-javascript-with-async-defer",
     "title": "Async and Defer Script Loading",
     "description": "Learn how to avoid render blocking JavaScript using async and defer scripts.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-09-10T19:59:14.191Z",
     "createdAt": "2021-09-10T19:59:14.191Z"
@@ -12,7 +12,7 @@
     "id": "what-are-web-vitals",
     "title": "What are Web Vitals?",
     "description": "Learn what are the core web vitals and how to measure them.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-09-05T19:59:14.191Z",
     "createdAt": "2021-09-05T19:59:14.191Z"
@@ -21,7 +21,7 @@
     "id": "what-is-sli-slo-sla",
     "title": "SLIs, SLOs and SLAs",
     "description": "Learn what are different indicators for performance identification of any service.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-08-31T19:59:14.191Z",
     "createdAt": "2021-08-31T19:59:14.191Z"
@@ -30,7 +30,7 @@
     "id": "ci-cd",
     "title": "What is CI and CD?",
     "description": "Learn the basics of CI/CD and how to implement that with GitHub Actions.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-07-09T19:59:14.191Z",
     "createdAt": "2021-07-09T19:59:14.191Z"
@@ -39,7 +39,7 @@
     "id": "sso",
     "title": "SSO — Single Sign On",
     "description": "Learn the basics of SAML and understand how does Single Sign On work.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-07-01T19:59:14.191Z",
     "createdAt": "2021-07-01T19:59:14.191Z"
@@ -48,7 +48,7 @@
     "id": "oauth",
     "title": "OAuth — Open Authorization",
     "description": "Learn and understand what is OAuth and how it works",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-28T19:59:14.191Z",
     "createdAt": "2021-06-28T19:59:14.191Z"
@@ -57,7 +57,7 @@
     "id": "jwt-authentication",
     "title": "JWT Authentication",
     "description": "Understand what is JWT authentication and how is it implemented",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-20T19:59:14.191Z",
     "createdAt": "2021-06-20T19:59:14.191Z"
@@ -66,7 +66,7 @@
     "id": "token-authentication",
     "title": "Token Based Authentication",
     "description": "Understand what is token based authentication and how it is implemented",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-06-02T20:59:14.191Z",
     "createdAt": "2021-06-02T20:59:14.191Z"
@@ -75,7 +75,7 @@
     "id": "session-authentication",
     "title": "Session Based Authentication",
     "description": "Understand what is session based authentication and how it is implemented",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-26T20:59:14.191Z",
     "createdAt": "2021-05-26T20:59:14.191Z"
@@ -84,7 +84,7 @@
     "id": "basic-authentication",
     "title": "Basic Authentication",
     "description": "Understand what is basic authentication and how it is implemented",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-19T20:59:14.191Z",
     "createdAt": "2021-05-19T20:59:14.191Z"
@@ -93,7 +93,7 @@
     "id": "character-encodings",
     "title": "Character Encodings",
     "description": "Covers the basics of character encodings and explains ASCII vs Unicode",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-14T20:59:14.191Z",
     "createdAt": "2021-05-14T20:59:14.191Z"
@@ -102,7 +102,7 @@
     "id": "unfamiliar-codebase",
     "title": "Unfamiliar Codebase",
     "description": "Tips on getting getting familiar with an unfamiliar codebase",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-05-04T20:59:14.191Z",
     "createdAt": "2021-05-04T20:59:14.191Z"
@@ -111,7 +111,7 @@
     "id": "why-build-it-and-they-will-come-wont-work-anymore",
     "title": "Build it and they will come?",
     "description": "Why “build it and they will come” alone won’t work anymore",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "spekulatius",
     "updatedAt": "2021-05-04T12:59:14.191Z",
     "createdAt": "2021-05-04T12:59:14.191Z"
@@ -120,7 +120,7 @@
     "id": "dhcp-in-one-picture",
     "title": "DHCP in One Picture",
     "description": "Here is what happens when a new device joins the network.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-28T15:48:21.191Z",
     "createdAt": "2021-04-28T15:48:21.191Z"
@@ -129,7 +129,7 @@
     "id": "ssl-tls-https-ssh",
     "title": "SSL vs TLS vs SSH",
     "description": "Quick tidbit on the differences between SSL, TLS, HTTPS and SSH",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-22T15:48:21.191Z",
     "createdAt": "2021-04-22T15:48:21.191Z"
@@ -138,7 +138,7 @@
     "id": "asymptotic-notation",
     "title": "Asymptotic Notation",
     "description": "Learn the basics of measuring the time and space complexity of algorithms",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-04-03T15:48:21.191Z",
     "createdAt": "2021-04-03T15:48:21.191Z"
@@ -147,7 +147,7 @@
     "id": "big-o-notation",
     "title": "Big-O Notation",
     "description": "Easy to understand explanation of Big-O notation without any fancy terms",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-03-15T15:48:21.191Z",
     "createdAt": "2021-03-15T15:48:21.191Z"
@@ -156,7 +156,7 @@
     "id": "random-numbers",
     "title": "Random Numbers: Are they?",
     "description": "Learn how they are generated and why they may not be truly random.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-03-14T15:48:21.191Z",
     "createdAt": "2021-03-14T15:48:21.191Z"
@@ -165,7 +165,7 @@
     "id": "scaling-databases",
     "title": "Scaling Databases",
     "description": "Learn the ups and downs of different database scaling strategies",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2021-02-18T15:48:21.191Z",
     "createdAt": "2021-02-18T15:48:21.191Z"
@@ -174,7 +174,7 @@
     "id": "what-is-internet",
     "title": "How does the internet work?",
     "description": "Learn the basics of internet and everything involved with this short video series",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "dmytrobol",
     "updatedAt": "2021-02-29T15:48:21.191Z",
     "createdAt": "2021-02-29T15:48:21.191Z"
@@ -183,7 +183,7 @@
     "id": "torrent-client",
     "title": "Building a BitTorrent Client",
     "description": "Learn everything you need to know about BitTorrent by writing a client in Go",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "jesse",
     "updatedAt": "2021-01-17T15:48:21.191Z",
     "createdAt": "2021-01-17T15:48:21.191Z",
@@ -193,7 +193,7 @@
     "id": "levels-of-seniority",
     "title": "Levels of Seniority",
     "description": "How to Step Up as a Junior, Mid Level or a Senior Developer?",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2020-12-03T12:13:00.860Z",
     "createdAt": "2020-12-03T12:13:00.860Z"
@@ -202,7 +202,7 @@
     "id": "design-patterns-for-humans",
     "title": "Design Patterns for Humans",
     "description": "A language agnostic, ultra-simplified explanation to design patterns",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2019-10-09T12:00:00.860Z",
     "createdAt": "2019-01-23T17:00:00.860Z"
@@ -211,7 +211,7 @@
     "id": "journey-to-http2",
     "title": "Journey to HTTP/2",
     "description": "The evolution of HTTP. How it all started and where we stand today",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-12-04T12:00:00.860Z",
     "updatedAt": "2018-12-04T12:00:00.860Z",
@@ -221,7 +221,7 @@
     "id": "dns-in-one-picture",
     "title": "DNS in One Picture",
     "description": "Quick illustrative guide on how a website is found on the internet.",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "updatedAt": "2018-12-04T12:00:00.860Z",
     "createdAt": "2018-12-04T17:00:00.860Z"
@@ -230,7 +230,7 @@
     "id": "http-caching",
     "title": "HTTP Caching",
     "description": "Everything you need to know about web caching",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "createdAt": "2018-11-29T17:00:00.860Z",
     "updatedAt": "2018-11-29T17:00:00.860Z"
@@ -239,7 +239,7 @@
     "id": "history-of-javascript",
     "title": "Brief History of JavaScript",
     "description": "How JavaScript was introduced and evolved over the years",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "kamranahmedse",
     "createdAt": "2017-10-28T17:00:00.860Z",
     "updatedAt": "2017-10-28T17:00:00.860Z"
@@ -248,7 +248,7 @@
     "id": "proxy-servers",
     "title": "Proxy Servers",
     "description": "How do proxy servers work and what are forward and reverse proxies?",
-    "isPro": false,
+    "isNew": false,
     "authorUsername": "ebrahimbharmal007",
     "createdAt": "2017-10-24T17:00:00.860Z",
     "updatedAt": "2017-10-24T17:00:00.860Z"

content/roadmaps.json

@@ -361,7 +361,6 @@
     "featured": true,
     "jsonUrl": "/project/python.json",
     "resourcesPath": "/roadmaps/107-python/resources.md",
-    "landingPath": "/roadmaps/107-python/landscape.md",
     "pdfUrl": "/pdfs/python.pdf",
     "versions": [
       "latest"
@@ -370,6 +369,7 @@
       "name": "Kamran Ahmed",
       "url": "https://twitter.com/kamranahmedse"
     },
+    "contentPathsFilePath": "/roadmaps/107-python/content-paths.json",
     "id": "python",
     "metaPath": "/roadmaps/107-python/meta.json",
     "isUpcoming": false

content/roadmaps/100-frontend/content/111-pick-a-framework/100-react-js/readme.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/react'
+  title='React Roadmap'
+  description='Click to check the detailed React Roadmap.'
+/>
+
 # React
 
 React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.

content/roadmaps/100-frontend/content/111-pick-a-framework/101-angular/readme.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/angular'
+  title='Angular Roadmap'
+  description='Click to check the detailed Angular Roadmap.'
+/>
+
 # Angular
 
 Angular is a component based front-end development framework built on TypeScript which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.

content/roadmaps/100-frontend/content/111-pick-a-framework/102-vue-js/readme.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap 
+  href='/vue'
+  title='Vue Roadmap'
+  description='Click to check the detailed Vue Roadmap.'
+/>
+
 # Vue.js
 
 Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is mainly focused on front end development.

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/100-go.md

@@ -1,3 +1,10 @@
+<DedicatedRoadmap
+  href='/go'
+  title='Go Roadmap'
+  description='Click to check the detailed Go Roadmap.'
+/>
+
+
 # Go
 
 Go is an open source programming language supported by Google. Go can be used to write cloud services, CLI tools, used for API development, and much more.

content/roadmaps/101-backend/content/103-learn-a-language/102-java.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/java'
+  title='Java Roadmap'
+  description='Click to check the detailed Java Roadmap.'
+/>
+
 # Java
 
 Java is general-purpose language, primarily used for Internet-based applications.

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/101-backend/content/103-learn-a-language/106-python.md

@@ -1,3 +1,9 @@
+<DedicatedRoadmap
+  href='/python'
+  title='Python Roadmap'
+  description='Click to check the detailed Python Roadmap.'
+/>
+
 # Python
 
 Python is a well known programming language which is both a strongly typed and a dynamically typed language. Being an interpreted language, code is executed as soon as it is written and the Python syntax allows for writing code in functional, procedureal or object-oriented programmatic ways.

content/roadmaps/102-devops/content-paths.json

@@ -113,6 +113,7 @@
   "managing-servers:live-in-terminal:df": "/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/138-df.md",
   "managing-servers:live-in-terminal:history": "/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/139-history.md",
   "managing-servers:live-in-terminal:du": "/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/140-du.md",
+  "managing-servers:live-in-terminal:scp": "/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/141-scp.md",
   "networking-protocols": "/roadmaps/102-devops/content/103-networking-protocols/readme.md",
   "networking-protocols:dns": "/roadmaps/102-devops/content/103-networking-protocols/101-dns.md",
   "networking-protocols:osi-model": "/roadmaps/102-devops/content/103-networking-protocols/100-osi-model.md",

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/100-screen-multiplexer.md

@@ -1 +1,8 @@
-# Screen Multiplexer
+# Screen
+
+Screen  is  a  full-screen  window manager that multiplexes a physical terminal between several processes (typically interactive shells). Each virtual terminal provides the functions of a DEC VT100 terminal and, in addition, several control functions from the ISO 6429 (ECMA 48, ANSI X3.64) and ISO 2022 standards (e.g. insert/delete line and support for multiple character sets). There is  a  scrollback  history buffer for each virtual terminal and a copy-and-paste mechanism that allows moving text regions between windows.
+
+See `man screen` or `screen -h` for further information
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://kapeli.com/cheat_sheets/screen.docset/Contents/Resources/Documents/index'>Screen Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='User Manual' colorScheme='blue' href='https://www.gnu.org/software/screen/manual/screen.html'>Screen User's Manual</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/101-tmux-multiplexer.md

@@ -1 +1,10 @@
-# Tmux multiplexer
+# Tmux
+
+Tmux is a terminal multiplexer: it enables a number of terminals to be created, accessed, and controlled from a single screen. Tmux may be detached from a screen and continue running in the background, then later reattached.
+
+When tmux is started it creates a new session with a single window and displays it on screen. A status line at the bottom of the screen shows information on the current session and is used to enter interactive commands.
+
+See `man tmux` further information
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://tmuxcheatsheet.com/'>Tux Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://tmuxguide.readthedocs.io/en/latest/tmux/tmux.html'>Tmux Documentation</BadgeLink>

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

@@ -1 +1,8 @@
-# Ps
+# ps - process status
+
+The ps utility displays a header line, followed by lines containing information about all of your processes that have controlling terminals.
+
+See `man ps` further information
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://www.sysadmin.md/ps-cheatsheet.html'>ps Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man1/ps.1.html'>ps Documentation</BadgeLink>

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

@@ -1 +1,8 @@
-# Top
+# top
+
+The top program periodically displays a sorted list of system processes.  The default sorting key is pid, but other keys can be used instead.  Various output options are available.
+
+See `man top` further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://gist.github.com/ericandrewlewis/4983670c508b2f6b181703df43438c37'>top Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man1/top.1.html'>top Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/103-htop.md

@@ -1 +1,6 @@
-# Htop
+# htop
+
+htop is a cross-platform ncurses-based process. It is similar to top, but allows you to scroll vertically and horizontally, and interact using a pointing device (mouse). You can observe all processes running on the system, along with their command line arguments, as well as view them in a tree format, select multiple processes and act on them all at once.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://www.maketecheasier.com/power-user-guide-htop/'>htop Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://www.man7.org/linux/man-pages/man1/htop.1.html'>htop Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/104-atop.md

@@ -1 +1,6 @@
-# Atop
+# atop
+
+The program atop is an interactive monitor to view the load on a Linux system. It shows the occupation of the most critical hardware resources (from a performance point of view) on system level, i.e. cpu, memory, disk and network.
+
+<BadgeLink badgeText='Command Guide' colorScheme='blue' href='https://www.digitalocean.com/community/tutorials/atop-command-in-linux'>atop Command Guide</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://linux.die.net/man/1/atop'>atop Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/105-lsof.md

@@ -1 +1,8 @@
-# Lsof
+# lsof
+
+Lsof lists on its standard output file information about files opened by processes.
+
+See `man lsof` or `lsof --help` for further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://neverendingsecurity.wordpress.com/2015/04/13/lsof-commands-cheatsheet/'>lsof Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man8/lsof.8.html'>lsof Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/124-cut.md

@@ -1 +1,8 @@
-# Cut
+# cut
+
+The cut utility cuts out selected portions of each line (as specified by list) from each file and writes them to the standard output.
+
+See `man cut` for further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://bencane.com/2012/10/22/cheat-sheet-cutting-text-with-cut/'>cut Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man1/cut.1.html'>cut Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/125-uniq.md

@@ -1 +1,8 @@
-# Uniq
+# uniq
+
+The uniq utility reads the specified input_file comparing adjacent lines, and writes a copy of each unique input line to the output_file.
+
+See `man uniq` for further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://www.geeksforgeeks.org/uniq-command-in-linux-with-examples/'>uniq Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man1/uniq.1.html'>uniq Documentation</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/128-fmt.md

@@ -1 +1,8 @@
-# Fmt
+# fmt
+
+`fmt` command is for formatting and optimizing contents in text files. It will be really usefull when it comes to beautify large text files by setting uniform column width and spaces.
+
+It has the following syntax: `$ fmt [-width] [option] [file]` e.g. `$ fmt file.txt`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.devopsroles.com/fmt-command-in-linux-with-example/'>Fmt command with Examples</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/129-tr.md

@@ -1 +1,8 @@
-# Tr
+# tr
+
+The tr utility copies the standard input to the standard output with substitution or deletion of selected characters.
+
+See `man tr` for further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://linuxopsys.com/topics/tr-command-in-linux'>tr Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://linuxcommand.org/lc3_man_pages/tr1.html'>tr Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/130-nl.md

@@ -1 +1,8 @@
-# Nl
+# nl
+
+The nl utility reads lines from the named file or the standard input if the file argument is omitted, applies a configurable line numbering filter operation and writes the result to the standard output.
+
+See `man nl` for further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://www.geeksforgeeks.org/nl-command-in-linux-with-examples/'>nl Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://man7.org/linux/man-pages/man1/nl.1.html'>nl Documentation</BadgeLink>

content/roadmaps/102-devops/content/102-managing-servers/101-live-in-terminal/131-wc.md

@@ -1 +1,8 @@
-# Wc
+# wc
+
+The wc utility displays the number of lines, words, and bytes contained in each input file, or standard input (if no file is specified) to the standard output.
+
+See `man wc` for further information.
+
+<BadgeLink badgeText='Cheat Sheet' colorScheme='blue' href='https://onecompiler.com/cheatsheets/wc'>wc Cheat Sheet</BadgeLink>
+<BadgeLink badgeText='Documentation' colorScheme='blue' href='https://linux.die.net/man/1/wc'>wc Documentation</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/101-live-in-terminal/141-scp.md

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

content/roadmaps/102-devops/content/103-networking-protocols/100-osi-model.md

@@ -1 +1,15 @@
-# Osi model
+# OSI Model
+
+Open Systems Interconnection (OSI) model is a **conceptual** model consists of 7 layers, that was proposed to standardize the communication between devices over the network. It was the first standard model for network communications, adopted by all major computer and telecommunication companies in the early 1980s.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/ddos/glossary/open-systems-interconnection-model-osi/'>What is OSI Model?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=dV8mjZd1OtU'>OSI Model</BadgeLink>
+
+# TCP/IP Model
+
+TCP/IP model is a **practical** model consists of 4 layers. The modern Internet is based on this model.
+
+
+<BadgeLink  colorScheme='yellow' badgeText='Read' href='https://www.geeksforgeeks.org/tcp-ip-model/'>What is TCP/IP Model?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=F5rni9fr1yE'>OSI vs TCP/IP Model</BadgeLink>

content/roadmaps/102-devops/content/103-networking-protocols/101-dns.md

@@ -1 +1,8 @@
-# Dns
+# DNS
+
+DNS (**D**omain **N**ame **S**ystem) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/dns/what-is-dns/'>What is DNS?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Wj0od2ag5sk'>DNS and How does it Work?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7lxgpKh_fRY'>DNS Records</BadgeLink>

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

@@ -1 +1,10 @@
-# Https
+# HTTPS
+
+HTTPS (**H**ypertext **T**ransfer **P**rotocol **S**ecure) is the secure version of HTTP, which is the primary protocol used to send data between a web browser and a website.
+
+`HTTPS = HTTP + SSL/TLS`
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.cloudflare.com/en-gb/learning/ssl/what-is-https/'>What is HTTPS?</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https'>Why HTTPS Matters</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developers.google.com/web/fundamentals/security/encrypt-in-transit/enable-https'>Enabling HTTPS on Your Servers</BadgeLink>

content/roadmaps/102-devops/content/103-networking-protocols/105-ssl-tls.md

@@ -1 +1,9 @@
-# Ssl tls
+# SSL/TLS
+
+Secure Sockets Layer (SSL) and Transport Layer Security (TLS) are cryptographic protocols used to provide security in internet communications. These protocols encrypt the data that is transmitted over the web, so anyone who tries to intercept packets will not be able to interpret the data. One difference that is important to know is that SSL is now deprecated due to security flaws, and most modern web browsers no longer support it. But TLS is still secure and widely supported, so preferably use TLS.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/learning/ssl/what-is-ssl/'>Cloudflare - What is SSL?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.cloudflare.com/en-gb/learning/ssl/transport-layer-security-tls/'>Cloudflare - What is TLS?</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://en.wikipedia.org/wiki/Transport_Layer_Security'>Wikipedia - SSL/TLS</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Watch' href='https://www.youtube.com/watch?v=k3rFFLmQCuY'>SSH vs SSL vs TLS</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/100-service-mesh/100-consul.md

@@ -1 +1,6 @@
-# Consul
+# Consul
+
+Consul is a service mesh solution providing a full featured control plane with service discovery, configuration, and segmentation functionality. Each of these features can be used individually as needed, or they can be used together to build a full service mesh. Consul requires a data plane and supports both a proxy and native integration model. Consul ships with a simple built-in proxy so that everything works out of the box, but also supports 3rd party proxy integrations such as Envoy.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.consul.io/docs/intro'>What is Consul?</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/100-service-mesh/101-istio.md

@@ -1 +1,6 @@
-# Istio
+# Istio
+
+Istio is an open source service mesh platform that provides a way to control how microservices share data with one another. It includes APIs that let Istio integrate into any logging platform, telemetry, or policy system. Istio is designed to run in a variety of environments: on-premise, cloud-hosted, in Kubernetes containers, in services running on virtual machines, and more.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='red' badgeText='Read' href='https://www.redhat.com/en/topics/microservices/what-is-istio'>What is Istio?</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/100-service-mesh/readme.md

@@ -1 +1,6 @@
-# Service mesh
+# Service Mesh
+
+A service mesh, like the open source project Istio, is a way to control how different parts of an application share data with one another. Unlike other systems for managing this communication, a service mesh is a dedicated infrastructure layer built right into an app. This visible infrastructure layer can document how well (or not) different parts of an app interact, so it becomes easier to optimize communication and avoid downtime as an app grows.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.redhat.com/en/topics/microservices/what-is-a-service-mesh'>What's a service mesh?</BadgeLink>

content/roadmaps/102-devops/content/105-infrastructure-as-code/104-docker-swarm.md

@@ -1 +1,8 @@
-# Docker swarm
+# Docker Swarm
+
+A Docker Swarm is a group of either physical or virtual machines that are running the Docker application and that have been configured to join together in a cluster. Once a group of machines have been clustered together, you can still run the Docker commands that you're used to, but they will now be carried out by the machines in your cluster. The activities of the cluster are controlled by a swarm manager, and machines that have joined the cluster are referred to as nodes.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.docker.com/'>Official Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Documentation' href='https://docs.docker.com/engine/swarm/'>Docker Swarm Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=Tm0Q5zr3FL4'>Docker Swarm Tutorial for Beginners</BadgeLink>

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

@@ -1 +1,6 @@
-# Datadog
+# Datadog
+
+Datadog is a monitoring and analytics platform for large-scale applications. It encompasses infrastructure monitoring, application performance monitoring, log management, and user-experience monitoring. Datadog aggregates data across your entire stack with 400+ integrations for troubleshooting, alerting, and graphing. 
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.datadoghq.com/'>Datadog Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://docs.datadoghq.com/'>Official Documentation</BadgeLink>

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

@@ -1 +1,8 @@
-# Zabbix
+# Zabbix
+
+Zabbix is an enterprise-class open source monitoring solution for network monitoring and application monitoring of millions of metrics.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.zabbix.com/'>Zabbix Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.zabbix.com/manuals'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.zabbix.com/roadmap'>Zabbix Roadmap</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/107-monitoring/102-logs-management/101-graylog.md

@@ -1 +1,8 @@
-# Graylog
+# Graylog
+
+Graylog is a leading centralized log management solution for capturing, storing, and enabling real-time analysis of terabytes of machine data.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.graylog.org/'>Graylog Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://docs.graylog.org/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.graylog.org/resources-videos'>Product Videos</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/102-logs-management/102-papertrail.md

@@ -1 +1,8 @@
-# Papertrail
+# Papertrail
+
+Papertrail is a leading centralized log management solution for capturing, storing, and enabling real-time analysis of terabytes of machine data.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://www.papertrail.com/'>Papertrail Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.papertrail.com/solution/guides/'>Official Guides</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://www.papertrail.com/blog/'>Official Blog</BadgeLink>

content/roadmaps/102-devops/content/107-monitoring/102-logs-management/102-splunk.md

@@ -1 +1,8 @@
-# Splunk
+# Splunk
+
+The Splunk platform removes the barriers between data and action, empowering observability, IT and security teams to ensure their organizations are secure, resilient and innovative.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Splunk Website' href='https://www.splunk.com/'>Splunk Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Read' href='https://docs.splunk.com/Documentation'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.splunk.com/en_us/resources/videos.html'>Splunk Videos</BadgeLink>

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

@@ -1 +1,7 @@
-# Albaba cloud
+# Alibaba Cloud
+
+Alibaba Cloud is a cloud computing service, offering over 100 products and services with data centers in 24 regions and 74 availability zones around the world.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.alibabacloud.com/'>Alibaba Cloud Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://www.alibabacloud.com/help/en/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://www.alibabacloud.com/getting-started'>Alibaba Cloud Getting Started Guide</BadgeLink>

content/roadmaps/102-devops/content/108-cloud-providers/105-linode.md

@@ -1 +1,7 @@
-# Linode
+# Linode
+
+Linode is a cloud computing service owned by Akamai Technologies. Linode positions itself as an alternative to AWS, GCP and Azure by offering core services without complexity for most workloads.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.linode.com/'>Linode Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://www.linode.com/docs/'>Official Documentation</BadgeLink>
+<BadgeLink badgeText='Get Started Guide' colorScheme='blue' href='https://www.linode.com/docs/guides/getting-started/'>Linode Getting Started Guide</BadgeLink>

content/roadmaps/102-devops/content/108-cloud-providers/106-vultr.md

@@ -1 +1,6 @@
-# Vultr
+# Vultr
+
+Vultr is an infrastructure focussed cloud computing service, available in 25 locations worldwide. Vultur compute offers 100% SSD and high performance Intel vCPUs.
+
+<BadgeLink badgeText='Official Website' colorScheme='blue' href='https://www.vultr.com/'>Vultr Website</BadgeLink>
+<BadgeLink badgeText='Official Documentation' colorScheme='blue' href='https://www.vultr.com/docs/'>Official Documentation</BadgeLink>

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

@@ -1,16 +1,16 @@
 {
   "home": "/roadmaps/103-react/content/readme.md",
-  "react-advanced-ecosystem": "/roadmaps/103-react/content/react-advanced-ecosystem/readme.md",
-  "react-advanced-ecosystem:hooks": "/roadmaps/103-react/content/react-advanced-ecosystem/100-hooks/readme.md",
-  "react-advanced-ecosystem:hooks:common-hooks": "/roadmaps/103-react/content/react-advanced-ecosystem/100-hooks/102-common-hooks.md",
-  "react-advanced-ecosystem:hooks:writing-your-own-hooks": "/roadmaps/103-react/content/react-advanced-ecosystem/100-hooks/101-writing-your-own-hooks.md",
-  "react-advanced-ecosystem:context": "/roadmaps/103-react/content/react-advanced-ecosystem/101-context.md",
-  "react-advanced-ecosystem:refs": "/roadmaps/103-react/content/react-advanced-ecosystem/102-refs.md",
-  "react-advanced-ecosystem:render-props": "/roadmaps/103-react/content/react-advanced-ecosystem/103-render-props.md",
-  "react-advanced-ecosystem:high-order-components": "/roadmaps/103-react/content/react-advanced-ecosystem/104-high-order-components.md",
-  "react-advanced-ecosystem:portals": "/roadmaps/103-react/content/react-advanced-ecosystem/105-portals.md",
-  "react-advanced-ecosystem:error-boundaries": "/roadmaps/103-react/content/react-advanced-ecosystem/106-error-boundaries.md",
-  "react-advanced-ecosystem:fiber-architecture": "/roadmaps/103-react/content/react-advanced-ecosystem/107-fiber-architecture.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",
@@ -25,7 +25,6 @@
   "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-advanced-topics": "/roadmaps/103-react/content/101-react-advanced-topics.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",
@@ -62,4 +61,4 @@
   "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/103-props-vs-state.md

@@ -1,5 +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

@@ -1 +1,11 @@
-# Conditional rendering
+# 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

@@ -1 +1,9 @@
-# Component life cycle
+# 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

@@ -1 +1,6 @@
-# Lists and keys
+# 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

@@ -1 +1,7 @@
-# Composition vs inheritance
+# 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

@@ -1 +1,7 @@
-# Use state
+# 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

@@ -1 +1,6 @@
-# Use effect
+# 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

@@ -1 +1,7 @@
-# Basic hooks
+# 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.md

@@ -1 +0,0 @@
-# React advanced topics

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

@@ -1 +1,8 @@
-# React router
+# 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

@@ -1 +1,8 @@
-# Reach router
+# 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

@@ -1 +1,3 @@
-# Routers
+# 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

@@ -1 +1,10 @@
-# Next js
+# 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

@@ -1 +1,11 @@
-# Ssr
+# 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

@@ -1 +1,8 @@
-# Gatsby
+# 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

@@ -1 +1,9 @@
-# Ssg
+# 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

@@ -1 +1,7 @@
-# React query
+# 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

@@ -1 +1,9 @@
-# Use http
+# 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

@@ -1 +1,9 @@
-# Apollo
+# 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

@@ -1 +1,7 @@
-# Relay modern
+# 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

@@ -1 +1,9 @@
-# Axios
+# 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

@@ -1 +1,6 @@
-# Unfetch
+# 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

@@ -1 +1,7 @@
-# Superagent
+# 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

@@ -1 +1,8 @@
-# Api calls
+# 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

@@ -1 +1,9 @@
-# React native
+# 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

@@ -1 +1,3 @@
-# Mobile
+# 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

@@ -1 +1,7 @@
-# React hook form
+# 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

@@ -1 +1,12 @@
-# Formik
+# 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

@@ -1 +1,8 @@
-# Final form
+# 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

@@ -1 +1,3 @@
-# Forms
+# 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

@@ -1 +1,6 @@
-# Jest
+# 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

@@ -1 +1,6 @@
-# React testing library
+# 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

@@ -1 +1,8 @@
-# Cypress
+# 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

@@ -1 +1,7 @@
-# Testing
+# 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

@@ -1 +1,8 @@
-# Conext state
+# 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>