add content to react, vue, angular and pwa (#2187)

content/roadmaps/114-software-architect/content/111-web-and-mobile/101-react-vue-angular.md

@@ -1 +1,49 @@
-# React vue angular
+<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.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://reactjs.org/'>React Website</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://reactjs.org/tutorial/tutorial.html'>Official Getting Started</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://beta.reactjs.org/'>Beta React Docs</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://egghead.io/courses/the-beginner-s-guide-to-react'>The Beginner's Guide to React</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=nTeuhbP7wdE'>React JS Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=bMknfKXIFA8'>React Course - Beginner's Tutorial for React JavaScript Library [2022]</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=i793Qm6kv3U'>Understanding React's UI Rendering Process</BadgeLink>
+
+
+<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.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://vuejs.org/'>Vue.js Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Guide' href='https://vuejs.org/v2/guide/'>Official Getting Started</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=FXpIoQ_rT_c'>Vue.js Course for Beginners</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=qZXt1Aom3Cs'>Vue.js Crash Course</BadgeLink>
+
+
+<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.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://angular.io/start'>Official - Getting started with Angular</BadgeLink>

content/roadmaps/114-software-architect/content/111-web-and-mobile/103-pwa.md

@@ -1 +1,10 @@
-# Pwa
+# PWA
+
+
+Progressive Web Apps (PWAs) are websites that are progressively enhanced to function like installed, native apps on supporting platforms, while functioning like regular websites on other browsers.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://www.freecodecamp.org/news/what-are-progressive-web-apps/'>Progressive Web Apps for Beginners</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://web.dev/learn/pwa/'>Learn PWA</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme="yellow" href='https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/'>MDN Web Docs: Progressive Web Apps </BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=sFsRylCQblw'>Build a Progressive Web App</BadgeLink>