Add vite, vitest and playwright

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

@@ -12,6 +12,9 @@
   "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:cli-tools": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/readme.md",
+  "react-fundamental-topics:cli-tools:create-react-app": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/100-create-react-app.md",
+  "react-fundamental-topics:cli-tools:vite": "/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.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",
@@ -49,6 +52,8 @@
   "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:vitest": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/103-vitest.md",
+  "react-ecosystem:testing:playwright": "/roadmaps/103-react/content/102-react-ecosystem/106-testing/104-playwright.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",

content/roadmaps/103-react/content/100-react-fundamental-topics/100-cli-tools/101-vite.md

@@ -0,0 +1,8 @@
+# Vite
+
+Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://vitejs.dev'>Vite Website</BadgeLink>
+<BadgeLink colorScheme='blue' badgeText='Official Documentation' href='https://vitejs.dev/guide'>Vite Documentation</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://youtu.be/LQQ3CR2JTX8'>Vite Crash Course</BadgeLink>

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

@@ -0,0 +1,3 @@
+## CLI Tools
+
+The most famous options while working with react are `create-react-app` and `vite`.

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

@@ -0,0 +1,7 @@
+# Vitest
+
+Vitest is a fast Vite-native unit test framework with out-of-box ESM, TypeScript and JSX support.
+Works on React, Vue, Svelte and more projects created with Vite
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://vitest.dev/'>Vitest Website</BadgeLink>

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

@@ -0,0 +1,7 @@
+# Playwright
+
+Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari.Playwright leverages the DevTools protocol to write powerful, stable automated tests.Playwright can actually see into and control the browser rather than relying on a middle translation layer, it allows for the simulation of more insightful and relevant user scenarios.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='blue' badgeText='Official Website' href='https://playwright.dev/'>Official Website: Playwright</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Tutorial' href='https://www.browserstack.com/guide/playwright-tutorial'>Playwright Tuotorial</BadgeLink>