Add DevOps forkable

* Add forkable Backend roadmap

* Add `(Fork)` at title

.npmrc

@@ -1 +1,2 @@
-auto-install-peers=true
+auto-install-peers=true
+strict-peer-dependencies=false

package-lock.json

@@ -11025,4 +11025,4 @@
       }
     }
   }
-}
+}

package.json

@@ -27,10 +27,10 @@
     "@astrojs/tailwind": "^5.0.2",
     "@fingerprintjs/fingerprintjs": "^4.1.0",
     "@nanostores/react": "^0.7.1",
-    "@types/react": "^18.2.29",
+    "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
-    "astro": "^3.3.2",
-    "astro-compress": "^2.0.15",
+    "astro": "^3.3.3",
+    "astro-compress": "^2.1.5",
     "clsx": "^2.0.0",
     "dracula-prism": "^2.1.13",
     "jose": "^4.15.4",
@@ -45,13 +45,12 @@
     "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
     "reactflow": "^11.9.4",
-    "@roadmapsh/web-draw": "git+https://github.com/roadmapsh/web-draw.git",
     "rehype-external-links": "^3.0.0",
     "roadmap-renderer": "^1.0.6",
     "slugify": "^1.6.6",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
-    "zustand": "^4.4.3"
+    "zustand": "^4.4.4"
   },
   "devDependencies": {
     "@playwright/test": "^1.39.0",
@@ -62,7 +61,7 @@
     "gh-pages": "^6.0.0",
     "js-yaml": "^4.1.0",
     "markdown-it": "^13.0.2",
-    "openai": "^4.12.4",
+    "openai": "^4.13.0",
     "prettier": "^3.0.3",
     "prettier-plugin-astro": "^0.12.0",
     "prettier-plugin-tailwindcss": "^0.5.6"

readme.md

@@ -39,6 +39,7 @@ Here is the list of available roadmaps with more being actively worked upon.
 - [QA Roadmap](https://roadmap.sh/qa)
 - [Python Roadmap](https://roadmap.sh/python)
 - [Software Architect Roadmap](https://roadmap.sh/software-architect)
+- [Game Developer Roadmap](https://roadmap.sh/game-developer)
 - [Software Design and Architecture Roadmap](https://roadmap.sh/software-design-architecture)
 - [JavaScript Roadmap](https://roadmap.sh/javascript)
 - [TypeScript Roadmap](https://roadmap.sh/typescript)

scripts/roadmap-content.cjs

@@ -19,13 +19,12 @@ if (!allowedRoadmapIds.includes(roadmapId)) {
 }
 
 const ROADMAP_CONTENT_DIR = path.join(ALL_ROADMAPS_DIR, roadmapId, 'content');
-const { Configuration, OpenAIApi } = require('openai');
-const configuration = new Configuration({
+const OpenAI = require('openai');
+
+const openai = new OpenAI({
   apiKey: OPEN_AI_API_KEY,
 });
 
-const openai = new OpenAIApi(configuration);
-
 function getFilesInFolder(folderPath, fileList = {}) {
   const files = fs.readdirSync(folderPath);
 
@@ -60,16 +59,16 @@ function writeTopicContent(currTopicUrl) {
 
   const roadmapTitle = roadmapId.replace(/-/g, ' ');
 
-  let prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${childTopic}". Write me with a brief summary of that. Content should be in markdown. I already know the benefits of each so do not add benefits in the output. Also include the code examples if applicable to this topic.`;
+  let prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${childTopic}". Write me a brief paragraph for that. Content should be in markdown. I already know the benefits of each so do not add benefits in the output.`;
   if (!childTopic) {
-    prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${parentTopic}". Write me with a brief summary of that. Content should be in markdown. I already know the benefits of each so do not add benefits in the output. Also include the code examples if applicable to this topic.`;
+    prompt = `I am reading a guide about "${roadmapTitle}". I am on the topic "${parentTopic}". I want to know more about "${parentTopic}". Write me a brief paragraph for that. Content should be in markdown. I already know the benefits of each so do not add benefits in the output.`;
   }
 
   console.log(`Generating '${childTopic || parentTopic}'...`);
 
   return new Promise((resolve, reject) => {
-    openai
-      .createChatCompletion({
+    openai.chat.completions
+      .create({
         model: 'gpt-4',
         messages: [
           {
@@ -79,7 +78,7 @@ function writeTopicContent(currTopicUrl) {
         ],
       })
       .then((response) => {
-        const article = response.data.choices[0].message.content;
+        const article = response.choices[0].message.content;
 
         resolve(article);
       })
@@ -92,7 +91,7 @@ function writeTopicContent(currTopicUrl) {
 async function writeFileForGroup(group, topicUrlToPathMapping) {
   const topicId = group?.properties?.controlName;
   const topicTitle = group?.children?.controls?.control?.find(
-    (control) => control?.typeID === 'Label'
+    (control) => control?.typeID === 'Label',
   )?.properties?.text;
   const currTopicUrl = topicId?.replace(/^\d+-/g, '/')?.replace(/:/g, '/');
   if (!currTopicUrl) {
@@ -138,15 +137,14 @@ async function writeFileForGroup(group, topicUrlToPathMapping) {
 async function run() {
   const topicUrlToPathMapping = getFilesInFolder(ROADMAP_CONTENT_DIR);
 
-  const roadmapJson = require(path.join(
-      ALL_ROADMAPS_DIR,
-      `${roadmapId}/${roadmapId}`
-  ));
+  const roadmapJson = require(
+    path.join(ALL_ROADMAPS_DIR, `${roadmapId}/${roadmapId}`),
+  );
 
   const groups = roadmapJson?.mockup?.controls?.control?.filter(
     (control) =>
       control.typeID === '__group__' &&
-      !control.properties?.controlName?.startsWith('ext_link')
+      !control.properties?.controlName?.startsWith('ext_link'),
   );
 
   if (!OPEN_AI_API_KEY) {

src/components/CreateTeam/UpdateTeamResourceModal.tsx

@@ -8,6 +8,7 @@ import { useOutsideClick } from '../../hooks/use-outside-click';
 import { useKeydown } from '../../hooks/use-keydown';
 import type { TeamResourceConfig } from './RoadmapSelector';
 import { useToast } from '../../hooks/use-toast';
+import {replaceChildren} from "../../lib/dom.ts";
 
 export type ProgressMapProps = {
   teamId: string;
@@ -81,7 +82,8 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
       fontURL: '/fonts/balsamiq.woff2',
     });
 
-    containerEl.current?.replaceChildren(svg);
+    replaceChildren(containerEl.current!, svg);
+    // containerEl.current?.replaceChildren(svg);
 
     // Render team configuration
     removedItems.forEach((topicId: string) => {

src/components/CreateVersion/CreateVersion.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useState } from 'react';
+import { httpGet, httpPost } from '../../lib/http';
+import { useToast } from '../../hooks/use-toast';
+import { isLoggedIn } from '../../lib/jwt';
+import { GitFork, Loader2, Map } from 'lucide-react';
+import { showLoginPopup } from '../../lib/popup';
+import type { RoadmapDocument } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
+
+type CreateVersionProps = {
+  roadmapId: string;
+};
+
+export function CreateVersion(props: CreateVersionProps) {
+  const { roadmapId } = props;
+
+  const toast = useToast();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isCreating, setIsCreating] = useState(false);
+  const [isConfirming, setIsConfirming] = useState(false);
+  const [userVersion, setUserVersion] = useState<RoadmapDocument>();
+
+  async function loadMyVersion() {
+    if (!isLoggedIn()) {
+      return;
+    }
+
+    setIsLoading(true);
+    const { response, error } = await httpGet<RoadmapDocument>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-my-version/${roadmapId}`,
+      {},
+    );
+
+    if (error || !response) {
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(false);
+    setUserVersion(response);
+  }
+
+  useEffect(() => {
+    loadMyVersion().finally(() => {
+      setIsLoading(false);
+    });
+  }, []);
+
+  async function createVersion() {
+    if (isCreating || !roadmapId) {
+      return;
+    }
+
+    if (!isLoggedIn()) {
+      showLoginPopup();
+      return;
+    }
+
+    setIsCreating(true);
+    const { response, error } = await httpPost<{ roadmapId: string }>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-create-version/${roadmapId}`,
+      {},
+    );
+
+    if (error || !response) {
+      setIsCreating(false);
+      toast.error(error?.message || 'Failed to create version');
+      return;
+    }
+
+    window.location.href = `${
+      import.meta.env.PUBLIC_EDITOR_APP_URL
+    }/${response?.roadmapId}`;
+  }
+
+  if (isLoading) {
+    return (
+      <div className="h-[30px] w-[312px] animate-pulse rounded-md bg-gray-300"></div>
+    );
+  }
+
+  if (!isLoading && userVersion?._id) {
+    return (
+      <div className={'flex items-center'}>
+        <a
+          href={`/r?id=${userVersion._id}`}
+          className="flex items-center rounded-md border border-blue-400 bg-gray-50 px-2.5 py-1 text-xs font-medium text-blue-600 hover:bg-blue-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:hover:bg-gray-100 max-sm:hidden sm:text-sm"
+        >
+          <Map size="15px" className="mr-1.5" />
+          Visit your own version of this Roadmap
+        </a>
+      </div>
+    );
+  }
+
+  if (isConfirming) {
+    return (
+      <p className="flex h-[30px] items-center text-sm text-red-500">
+        Create and edit a custom roadmap from this roadmap?
+        <button
+          onClick={() => {
+            setIsConfirming(false);
+            createVersion().finally(() => null);
+          }}
+          className="ml-2 font-semibold underline underline-offset-2"
+        >
+          Yes
+        </button>
+        <span className="text-xs">&nbsp;/&nbsp;</span>
+        <button
+          className="font-semibold underline underline-offset-2"
+          onClick={() => setIsConfirming(false)}
+        >
+          No
+        </button>
+      </p>
+    );
+  }
+
+  return (
+    <button
+      disabled={isCreating}
+      className="flex items-center justify-center rounded-md border border-gray-300 bg-gray-50 px-2.5 py-1 text-xs font-medium text-black hover:bg-gray-200 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:hover:bg-gray-100 max-sm:hidden sm:text-sm"
+      onClick={() => {
+        if (!isLoggedIn()) {
+          showLoginPopup();
+          return;
+        }
+
+        setIsConfirming(true);
+      }}
+    >
+      {isCreating ? (
+        <>
+          <Loader2 className="mr-2 h-3 w-3 animate-spin stroke-[2.5]" />
+          Please wait ..
+        </>
+      ) : (
+        <>
+          <GitFork className="mr-1.5" size="16px" />
+          Create your own version of this roadmap
+        </>
+      )}
+    </button>
+  );
+}

src/components/CustomRoadmap/PersonalRoadmapList.tsx

@@ -7,6 +7,7 @@ import {
   Globe,
   LockIcon,
   Users,
+  PenSquare,
 } from 'lucide-react';
 import { useToast } from '../../hooks/use-toast';
 import {
@@ -142,7 +143,7 @@ function CustomRoadmapItem(props: CustomRoadmapItemProps) {
 
   return (
     <li
-      className="grid grid-cols-1 p-2.5 sm:grid-cols-[auto_110px]"
+      className="grid grid-cols-1 p-2.5 sm:grid-cols-[auto_172px]"
       key={roadmap._id!}
     >
       <div className="mb-3 grid grid-cols-1 sm:mb-0">
@@ -174,10 +175,20 @@ function CustomRoadmapItem(props: CustomRoadmapItemProps) {
           }}
         />
 
+        <a
+          href={editorLink}
+          className={
+            'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs text-black hover:bg-gray-50 focus:outline-none'
+          }
+          target={'_blank'}
+        >
+          <PenSquare className="inline-block h-4 w-4" />
+          Edit
+        </a>
         <a
           href={`/r?id=${roadmap._id}`}
           className={
-            'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none'
+            'ml-2 flex items-center gap-2 rounded-md border border-blue-400 bg-white px-2 py-1.5 text-xs hover:bg-blue-50 focus:outline-none text-blue-600'
           }
           target={'_blank'}
         >

src/components/CustomRoadmap/RoadmapActionButton.tsx

@@ -23,7 +23,7 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
       <button
         disabled={false}
         onClick={() => setIsOpen(!isOpen)}
-        className="inline-flex items-center justify-center rounded-md bg-gray-500 py-1.5 pl-2 pr-2 text-xs font-medium text-white hover:bg-gray-600 sm:pl-1.5 sm:pr-3 sm:text-sm"
+        className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:border-gray-300 hover:bg-gray-300 sm:pl-1.5 sm:pr-3 sm:text-sm"
       >
         <MoreVertical className="mr-0 h-4 w-4 stroke-[2.5] sm:mr-1.5" />
         <span className="hidden sm:inline">Actions</span>
@@ -32,7 +32,7 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
       {isOpen && (
         <div
           ref={menuRef}
-          className="align-right absolute right-0 top-full z-50 mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
+          className="align-right absolute right-0 top-full mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md z-[9999]"
         >
           <ul>
             {onUpdateSharing && (

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -9,6 +9,8 @@ import { type TeamResourceConfig } from '../CreateTeam/RoadmapSelector';
 import { useToast } from '../../hooks/use-toast';
 import { RoadmapActionButton } from './RoadmapActionButton';
 import { Lock, Shapes } from 'lucide-react';
+import { Modal } from '../Modal';
+import { ShareSuccess } from '../ShareOptions/ShareSuccess';
 
 type RoadmapHeaderProps = {};
 
@@ -22,9 +24,11 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
     _id: roadmapId,
     creator,
     team,
+    visibility,
   } = useStore(currentRoadmap) || {};
 
   const [isSharing, setIsSharing] = useState(false);
+  const [isSharingWithOthers, setIsSharingWithOthers] = useState(false);
   const toast = useToast();
 
   async function deleteResource() {
@@ -65,6 +69,22 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
     ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${creator?.avatar}`
     : '/images/default-avatar.png';
 
+  const sharingWithOthersModal = isSharingWithOthers && (
+    <Modal
+      onClose={() => setIsSharingWithOthers(false)}
+      wrapperClassName="max-w-lg"
+      bodyClassName="p-4 flex flex-col"
+    >
+      <ShareSuccess
+        visibility="public"
+        roadmapId={roadmapId!}
+        description={description}
+        onClose={() => setIsSharingWithOthers(false)}
+        isSharingWithOthers={true}
+      />
+    </Modal>
+  );
+
   return (
     <div className="border-b">
       <div className="container relative py-5 sm:py-12">
@@ -117,63 +137,78 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
               <span className="ml-2">Subscribe</span>
             </button>
           </div>
-          {$canManageCurrentRoadmap && (
-            <div className="flex items-center gap-2">
-              {isSharing && $currentRoadmap && (
-                <ShareOptionsModal
-                  isDiscoverable={$currentRoadmap.isDiscoverable}
-                  description={$currentRoadmap?.description}
-                  visibility={$currentRoadmap?.visibility}
-                  teamId={$currentRoadmap?.teamId}
-                  roadmapId={$currentRoadmap?._id!}
-                  sharedFriendIds={$currentRoadmap?.sharedFriendIds || []}
-                  sharedTeamMemberIds={
-                    $currentRoadmap?.sharedTeamMemberIds || []
-                  }
-                  onClose={() => setIsSharing(false)}
-                  onShareSettingsUpdate={(settings) => {
-                    currentRoadmap.set({
-                      ...$currentRoadmap,
-                      ...settings,
-                    });
+          <div className="flex items-center gap-2">
+            {$canManageCurrentRoadmap && (
+              <>
+                {isSharing && $currentRoadmap && (
+                  <ShareOptionsModal
+                    isDiscoverable={$currentRoadmap.isDiscoverable}
+                    description={$currentRoadmap?.description}
+                    visibility={$currentRoadmap?.visibility}
+                    teamId={$currentRoadmap?.teamId}
+                    roadmapId={$currentRoadmap?._id!}
+                    sharedFriendIds={$currentRoadmap?.sharedFriendIds || []}
+                    sharedTeamMemberIds={
+                      $currentRoadmap?.sharedTeamMemberIds || []
+                    }
+                    onClose={() => setIsSharing(false)}
+                    onShareSettingsUpdate={(settings) => {
+                      currentRoadmap.set({
+                        ...$currentRoadmap,
+                        ...settings,
+                      });
+                    }}
+                  />
+                )}
+
+                <a
+                  href={`${import.meta.env.PUBLIC_EDITOR_APP_URL}/${
+                    $currentRoadmap?._id
+                  }`}
+                  target="_blank"
+                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium  text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
+                >
+                  <Shapes className="mr-1.5 h-4 w-4 stroke-[2.5]" />
+                  <span className="hidden sm:inline-block">Edit Roadmap</span>
+                  <span className="sm:hidden">Edit</span>
+                </a>
+                <button
+                  onClick={() => setIsSharing(true)}
+                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
+                >
+                  <Lock className="mr-1.5 h-4 w-4 stroke-[2.5]" />
+                  Sharing
+                </button>
+
+                <RoadmapActionButton
+                  onDelete={() => {
+                    const confirmation = window.confirm(
+                      'Are you sure you want to delete this roadmap?'
+                    );
+
+                    if (!confirmation) {
+                      return;
+                    }
+
+                    deleteResource().finally(() => null);
                   }}
                 />
-              )}
+              </>
+            )}
 
-              <a
-                href={`${import.meta.env.PUBLIC_EDITOR_APP_URL}/${
-                  $currentRoadmap?._id
-                }`}
-                target="_blank"
-                className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium  text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
-              >
-                <Shapes className="mr-1.5 h-4 w-4 stroke-[2.5]" />
-                <span className="hidden sm:inline-block">Edit Roadmap</span>
-                <span className="sm:hidden">Edit</span>
-              </a>
-              <button
-                onClick={() => setIsSharing(true)}
-                className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium  text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
-              >
-                <Lock className="mr-1.5 h-4 w-4 stroke-[2.5]" />
-                Sharing
-              </button>
-
-              <RoadmapActionButton
-                onDelete={() => {
-                  const confirmation = window.confirm(
-                    'Are you sure you want to delete this roadmap?'
-                  );
-
-                  if (!confirmation) {
-                    return;
-                  }
-
-                  deleteResource().finally(() => null);
-                }}
-              />
-            </div>
-          )}
+            {!$canManageCurrentRoadmap && visibility === 'public' && (
+              <>
+                {sharingWithOthersModal}
+                <button
+                  onClick={() => setIsSharingWithOthers(true)}
+                  className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white py-1.5 pl-2 pr-2 text-xs font-medium  text-black hover:border-gray-300 hover:bg-gray-300 sm:px-3 sm:text-sm"
+                >
+                  <Lock className="mr-1.5 h-4 w-4 stroke-[2.5]" />
+                  Share with Others
+                </button>
+              </>
+            )}
+          </div>
         </div>
 
         <RoadmapHint

src/components/Footer.astro

@@ -48,7 +48,7 @@ import Icon from './AstroIcon.astro';
           <span class='mx-2 text-gray-400'>by</span>
           <a
             class='font-regular rounded-md bg-blue-600 px-1.5 py-1 text-sm hover:bg-blue-700'
-            href='https://twitter.com/intent/user?screen_name=kamrify'
+            href='https://twitter.com/kamrify'
             target='_blank'
           >
             <span class='hidden sm:inline'>@kamrify</span>

src/components/FrameRenderer/renderer.ts

@@ -10,6 +10,7 @@ import {
 import type { ResourceProgressType, ResourceType } from '../../lib/resource-progress';
 import { pageProgressMessage } from '../../stores/page';
 import { showLoginPopup } from '../../lib/popup';
+import {replaceChildren} from "../../lib/dom.ts";
 
 export class Renderer {
   resourceId: string;
@@ -88,7 +89,8 @@ export class Renderer {
         });
       })
       .then((svg) => {
-        this.containerEl?.replaceChildren(svg);
+        replaceChildren(this.containerEl!, svg);
+        // this.containerEl?.replaceChildren(svg);
       })
       .then(() => {
         return renderResourceProgress(

src/components/RelatedRoadmaps.astro

@@ -1,5 +1,7 @@
 ---
+import { getQuestionGroupsByIds } from '../lib/question-group';
 import { getRoadmapsByIds, RoadmapFrontmatter } from '../lib/roadmap';
+import { Map, Clipboard } from 'lucide-react';
 
 export interface Props {
   roadmap: RoadmapFrontmatter;
@@ -8,35 +10,89 @@ export interface Props {
 const { roadmap } = Astro.props;
 
 const relatedRoadmaps = roadmap.relatedRoadmaps || [];
-if (!relatedRoadmaps.length) {
-  return null;
-}
-
 const relatedRoadmapDetails = await getRoadmapsByIds(relatedRoadmaps);
+
+const relatedQuestions = roadmap.relatedQuestions || [];
+const relatedQuestionDetails = await getQuestionGroupsByIds(relatedQuestions);
 ---
 
-<div class='border-t bg-gray-100'>
-  <div class='container'>
-    <div class='flex justify-between relative -top-5'>
-      <span class='text-md font-medium py-1 px-3 border bg-white rounded-md'>Related Roadmaps</span>
-      <a href='/roadmaps' class='text-md font-medium py-1 px-3 border bg-white rounded-md hover:bg-gray-50'>
-        <span class='hidden sm:inline'>All Roadmaps &rarr;</span>
-        <span class='inline sm:hidden'>More &rarr;</span>
-      </a>
-    </div>
-
-    <div class='flex flex-col gap-1 pb-8'>
-      {
-        relatedRoadmapDetails.map((relatedRoadmap) => (
+{
+  relatedQuestionDetails.length > 0 && (
+    <div class='border-t bg-gray-100 pb-3'>
+      <div class='container'>
+        <div class='relative -top-5 flex justify-between'>
+          <span class='text-md flex items-center rounded-md border bg-white px-3 py-1 font-medium'>
+            <Clipboard className='mr-1.5 text-black' size='17px' />
+            Test your Knowledge
+            <span class='ml-2 rounded-md border border-yellow-300 bg-yellow-100 px-1 py-0.5 text-xs uppercase'>
+              New
+            </span>
+          </span>
           <a
-            href={`/${relatedRoadmap.id}`}
-            class='py-2 px-3.5 bg-white border rounded-md hover:bg-gray-50 flex flex-col sm:flex-row gap-0.5 sm:gap-0'
+            href='/roadmaps'
+            class='text-md rounded-md border bg-white px-3 py-1 font-medium hover:bg-gray-50'
           >
-            <span class='font-medium inline-block min-w-[150px]'>{relatedRoadmap.frontmatter.briefTitle}</span>
-            <span class='text-gray-500'>{relatedRoadmap.frontmatter.briefDescription}</span>
+            <span class='hidden sm:inline'>All Quizzes &rarr;</span>
+            <span class='inline sm:hidden'>More &rarr;</span>
           </a>
-        ))
-      }
+        </div>
+
+        <div class='flex flex-col gap-1 pb-8'>
+          {relatedQuestionDetails.map((relatedQuestionGroup) => (
+            <a
+              href={`/questions/${relatedQuestionGroup.id}`}
+              class='flex flex-col gap-0.5 rounded-md border bg-white px-3.5 py-2 hover:bg-gray-50 sm:flex-row sm:gap-0'
+            >
+              <span class='inline-block min-w-[150px] font-medium'>
+                {relatedQuestionGroup.title}
+              </span>
+              <span class='text-gray-500'>
+                {relatedQuestionGroup.description}
+              </span>
+            </a>
+          ))}
+        </div>
+      </div>
     </div>
-  </div>
-</div>
+  )
+}
+
+{
+  relatedRoadmaps.length && (
+    <div class:list={['border-t bg-gray-100', {
+      'mt-8': !relatedQuestionDetails.length
+    }]}>
+      <div class='container'>
+        <div class='relative -top-5 flex justify-between'>
+          <span class='text-md flex items-center rounded-md border bg-white px-3 py-1 font-medium'>
+            <Map className='text-black mr-1.5' size='17px' />
+            Related Roadmaps
+          </span>
+          <a
+            href='/roadmaps'
+            class='text-md rounded-md border bg-white px-3 py-1 font-medium hover:bg-gray-50'
+          >
+            <span class='hidden sm:inline'>All Roadmaps &rarr;</span>
+            <span class='inline sm:hidden'>More &rarr;</span>
+          </a>
+        </div>
+
+        <div class='flex flex-col gap-1 pb-8'>
+          {relatedRoadmapDetails.map((relatedRoadmap) => (
+            <a
+              href={`/${relatedRoadmap.id}`}
+              class='flex flex-col gap-0.5 rounded-md border bg-white px-3.5 py-2 hover:bg-gray-50 sm:flex-row sm:gap-0'
+            >
+              <span class='inline-block min-w-[150px] font-medium'>
+                {relatedRoadmap.frontmatter.briefTitle}
+              </span>
+              <span class='text-gray-500'>
+                {relatedRoadmap.frontmatter.briefDescription}
+              </span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/RoadmapHeader.astro

@@ -8,7 +8,8 @@ import YouTubeAlert from './YouTubeAlert.astro';
 import ProgressHelpPopup from './ProgressHelpPopup.astro';
 import { MarkFavorite } from './FeaturedItems/MarkFavorite';
 import { TeamVersions } from './TeamVersions/TeamVersions';
-import { RoadmapFrontmatter } from '../lib/roadmap';
+import { CreateVersion } from './CreateVersion/CreateVersion';
+import { type RoadmapFrontmatter } from '../lib/roadmap';
 
 export interface Props {
   title: string;
@@ -20,6 +21,7 @@ export interface Props {
   hasSearch?: boolean;
   question?: RoadmapFrontmatter['question'];
   hasTopics?: boolean;
+  isForkable?: boolean;
 }
 
 const {
@@ -32,6 +34,7 @@ const {
   note,
   hasTopics = false,
   question,
+  isForkable = false,
 } = Astro.props;
 
 const isRoadmapReady = !isUpcoming;
@@ -58,13 +61,21 @@ const hasTnsBanner = !!tnsBannerLink;
     ]}
   >
     <div class='mb-3 mt-0 sm:mb-4'>
+      {
+        isForkable && (
+          <div class='mb-2'>
+            <CreateVersion client:load roadmapId={roadmapId} />
+          </div>
+        )
+      }
+
       <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'>
         {title}
         <span class='relative top-0 sm:-top-1'>
           <MarkFavorite
             resourceId={roadmapId}
             resourceType='roadmap'
-            className='text-gray-500 !opacity-100 hover:text-gray-600 [&>svg]:stroke-[0.4] [&>svg]:stroke-gray-400 hover:[&>svg]:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 sm:[&>svg]:h-4 sm:[&>svg]:w-4 ml-1.5 relative focus:outline-0'
+            className='relative ml-1.5 text-gray-500 !opacity-100 hover:text-gray-600 focus:outline-0 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:stroke-gray-400 [&>svg]:stroke-[0.4] hover:[&>svg]:stroke-gray-600 sm:[&>svg]:h-4 sm:[&>svg]:w-4'
             client:only='react'
           />
         </span>

src/components/ShareOptions/ShareSuccess.tsx

@@ -8,10 +8,17 @@ type ShareSuccessProps = {
   onClose: () => void;
   visibility: AllowedRoadmapVisibility;
   description?: string;
+  isSharingWithOthers?: boolean;
 };
 
 export function ShareSuccess(props: ShareSuccessProps) {
-  const { roadmapId, onClose, description, visibility } = props;
+  const {
+    roadmapId,
+    onClose,
+    description,
+    visibility,
+    isSharingWithOthers = false,
+  } = props;
 
   const baseUrl = import.meta.env.DEV
     ? 'http://localhost:3000'
@@ -42,7 +49,11 @@ export function ShareSuccess(props: ShareSuccessProps) {
     <div className="flex grow flex-col justify-center">
       <div className="mt-5 flex grow flex-col items-center justify-center gap-1.5">
         <CheckCircle className="h-14 w-14 text-green-500" />
-        <h3 className="text-xl font-medium">Sharing Settings Updated</h3>
+        {isSharingWithOthers ? (
+          <h3 className="text-xl font-medium">Sharing with Others</h3>
+        ) : (
+          <h3 className="text-xl font-medium">Sharing Settings Updated</h3>
+        )}
       </div>
 
       <input
@@ -55,15 +66,21 @@ export function ShareSuccess(props: ShareSuccessProps) {
           copyText(shareLink);
         }}
       />
-      <p className="mt-1 text-sm text-gray-400">
-        You can share the above link with anyone who has access
-      </p>
+      {isSharingWithOthers ? (
+        <p className="mt-1 text-sm text-gray-400">
+          You can share the above link with anyone
+        </p>
+      ) : (
+        <p className="mt-1 text-sm text-gray-400">
+          You can share the above link with anyone who has access
+        </p>
+      )}
 
       {visibility === 'public' && (
         <>
           <div className="-mx-4 mt-4 flex items-center gap-1.5">
             <span className="h-px grow bg-gray-300" />
-            <span className="text-xs uppercase text-gray-400 px-2">Or</span>
+            <span className="px-2 text-xs uppercase text-gray-400">Or</span>
             <span className="h-px grow bg-gray-300" />
           </div>
 

src/components/TeamProgress/MemberProgressModal.tsx

@@ -17,6 +17,7 @@ import { useToast } from '../../hooks/use-toast';
 import { useAuth } from '../../hooks/use-auth';
 import { pageProgressMessage } from '../../stores/page';
 import { MemberProgressModalHeader } from './MemberProgressModalHeader';
+import {replaceChildren} from "../../lib/dom.ts";
 
 export type ProgressMapProps = {
   member: TeamMember;
@@ -91,7 +92,8 @@ export function MemberProgressModal(props: ProgressMapProps) {
       fontURL: '/fonts/balsamiq.woff2',
     });
 
-    containerEl.current?.replaceChildren(svg);
+    replaceChildren(containerEl.current!, svg);
+    // containerEl.current?.replaceChildren(svg);
   }
 
   useKeydown('Escape', () => {

src/components/TeamRoadmapsList/TeamRoadmaps.tsx

@@ -27,6 +27,7 @@ import {
 import { RoadmapActionDropdown } from './RoadmapActionDropdown';
 import { UpdateTeamResourceModal } from '../CreateTeam/UpdateTeamResourceModal';
 import { ShareOptionsModal } from '../ShareOptions/ShareOptionsModal';
+import { cn } from '../../lib/classname';
 
 export function TeamRoadmaps() {
   const { t: teamId } = getUrlParams();
@@ -428,7 +429,12 @@ export function TeamRoadmaps() {
 
               return (
                 <div
-                  className="grid grid-cols-1 p-2.5 sm:grid-cols-[auto_110px]"
+                  className={cn(
+                    'grid grid-cols-1 p-2.5',
+                    canManageCurrentTeam
+                      ? 'sm:grid-cols-[auto_172px]'
+                      : 'sm:grid-cols-[auto_110px]'
+                  )}
                   key={resourceConfig.resourceId}
                 >
                   <div className="mb-3 grid grid-cols-1 sm:mb-0">
@@ -479,6 +485,18 @@ export function TeamRoadmaps() {
                       <ExternalLink className="inline-block h-4 w-4" />
                       Visit
                     </a>
+                    {canManageCurrentTeam && (
+                      <a
+                        href={editorLink}
+                        className={
+                          'ml-2 flex items-center gap-2 rounded-md border border-gray-800 bg-gray-900 px-2.5 py-1.5 text-xs text-white hover:bg-gray-800 focus:outline-none'
+                        }
+                        target={'_blank'}
+                      >
+                        <PenSquare className="inline-block h-4 w-4" />
+                        Edit
+                      </a>
+                    )}
                   </div>
                 </div>
               );

src/components/TopicDetail/TopicDetail.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import CloseIcon from '../../icons/close.svg';
 import SpinnerIcon from '../../icons/spinner.svg';
 
@@ -184,6 +184,10 @@ export function TopicDetail(props: TopicDetailProps) {
       });
   });
 
+  useEffect(() => {
+    if (isActive) topicRef?.current?.focus();
+  }, [isActive]);
+
   if (!isActive) {
     return null;
   }
@@ -194,7 +198,8 @@ export function TopicDetail(props: TopicDetailProps) {
     <div className={'relative z-50'}>
       <div
         ref={topicRef}
-        className="fixed right-0 top-0 z-40 h-screen w-full overflow-y-auto bg-white p-4 sm:max-w-[600px] sm:p-6"
+        tabIndex={0}
+        className="fixed right-0 top-0 z-40 h-screen w-full overflow-y-auto bg-white p-4 focus:outline-0 sm:max-w-[600px] sm:p-6"
       >
         {isLoading && (
           <div className="flex w-full justify-center">

src/data/guides/http-caching.md

@@ -67,7 +67,7 @@ Unlike browser cache which serves a single user, proxy caches may serve hundreds
 
 A Reverse proxy cache or surrogate cache is implemented close to the origin servers in order to reduce the load on the server. Unlike proxy caches which are implemented by ISPs etc to reduce the bandwidth usage in a network, surrogates or reverse proxy caches are implemented near the origin servers by the server administrators to reduce the load on the server.
 
-![Reverse Proxy Cache](http://i.imgur.com/Eg4Cru3.png)
+![Reverse Proxy Cache](https://i.imgur.com/Eg4Cru3.png)
 
 Although you can control the reverse proxy caches (since it is implemented by you on your server) you can not avoid or control browser and proxy caches. And if your website is not configured to use these caches properly, it will still be cached using whatever defaults are set on these caches.
 

src/data/roadmaps/android/android.md

@@ -5,13 +5,17 @@ briefTitle: 'Android'
 briefDescription: 'Step by step guide to becoming an Android Developer in 2023'
 title: 'Android Developer'
 description: 'Step by step guide to becoming an Android developer in 2023'
-hasTopics: false
+hasTopics: true
+isNew: true
+dimensions:
+  width: 968
+  height: 2197.76
 schema:
   headline: 'Android Developer Roadmap'
   description: 'Learn how to become a Android Developer with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'
   imageUrl: 'https://roadmap.sh/roadmaps/android.png'
-  datePublished: '2023-01-05'
-  dateModified: '2023-01-20'
+  datePublished: '2023-01-24'
+  dateModified: '2023-10-24'
 seo:
   title: 'Android Developer Roadmap: Learn to become an Android developer'
   description: 'Community driven, articles, resources, guides, interview questions, quizzes for android development. Learn to become a modern Android developer by following the steps, skills, resources and guides listed in this roadmap.'
@@ -28,10 +32,8 @@ seo:
     - 'android quiz'
     - 'android interview questions'
 relatedRoadmaps:
-  - 'frontend'
-  - 'javascript'
-  - 'react'
-  - 'nodejs'
+  - 'react-native'
+  - 'flutter'
 sitemap:
   priority: 1
   changefreq: 'monthly'
@@ -39,104 +41,4 @@ tags:
   - 'roadmap'
   - 'main-sitemap'
   - 'role-roadmap'
----
-The intent of this guide is to give you an idea about the Android development landscape and to help guide your learning if you are confused. Before we start, please note that the roadmap 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 roadmap if suitable.
-
-There are multiple ways to develop applications for Android; you can go down the path of hybrid application development where [Flutter](https://flutter.dev/), [React-Native](https://reactnative.dev/), or [NativeScript](https://www.nativescript.org/) are the most common contenders. Flutter uses Dart, whereas React Native and Native Script rely on JavaScript. Answering the question of hybrid vs native is out of the scope of this roadmap. This roadmap is focused on native Android app development, but if you are interested in learning any hybrid framework, my personal preference is [React-Native](https://reactnative.dev) and I would recommend you check out the [Frontend Developer Roadmap](/frontend).
-
-## Complete Roadmap
-
-Here is the full version of the roadmap in a single image and after that we have the broken down version with the resources and links to learn more about each of the boxes.
-
-[![](/roadmaps/android/roadmap.svg)](/roadmaps/android/roadmap.png)
-
-## Broken Down Version
-
-Below is the broken down version of the roadmap with links and resources to learn more about each of the items listed in the complete roadmap above.
-
-## Pick a Language
-
-For the languages, you can develop Android apps either by using Kotlin or Java.
-
-[![](/roadmaps/android/pick-language.svg)](/roadmaps/android/pick-language.svg)
-
-Although, you can use both [Kotlin](<https://en.wikipedia.org/wiki/Kotlin_(programming_language)>) and [Java](<https://en.wikipedia.org/wiki/Java_(programming_language)>) to develop native Android apps, [Google announced in 2019](https://android-developers.googleblog.com/2019/05/google-io-2019-empowering-developers-to-build-experiences-on-Android-Play.html) to make Kotlin the preferred way of developing Android applications. If you were to start learning Android development today, Kotlin should be your language of choice.
-
-## The Fundamentals
-
-Install [Android Studio](https://developer.android.com/studio) and learn the basics of Kotlin to get started.
-
-[![](/roadmaps/android/the-fundamentals.png)](/roadmaps/android/the-fundamentals.png)
-
-We have also listed down some free resources which you can use for the items listed in the image above. If you have some better ones, please do suggest. Also, you don't need to go through all of them, just go through them and pick what you like.
-
-- [Learn the basics of Kotlin](https://blog.teamtreehouse.com/absolute-beginners-guide-kotlin)
-- [Kotlin Docs](https://kotlinlang.org/docs/reference/basic-syntax.html) and [Official Kotlin Tutorials](https://kotlinlang.org/docs/tutorials/)
-- [Data Structures and Algorithms](https://www.studytonight.com/data-structures/introduction-to-data-structures). Also [check this](https://www.tutorialspoint.com/data_structures_algorithms/index.htm).
-- [Kotlin Data Structures](https://kotlinlang.org/docs/reference/collections-overview.html)
-- [Algorithms and Data Structures in Kotlin](https://github.com/bmaslakov/kotlin-algorithm-club)
-- [Getting started with Gradle](https://docs.gradle.org/current/userguide/userguide.html)
-  Note: Android Studio comes with a working installation of Gradle, so you don’t need to install Gradle separately in that case.
-
-## Version Control Systems
-
-Version Control Systems record your changes to the codebase and allow you to recall specific versions later. There are multiple Version Control Systems available, but [Git](https://git-scm.com/) is the most common one these days.
-
-[![](/roadmaps/android/git-github.png)](/roadmaps/android/git-github.png)
-
-Here are some of the resources to get you started. Feel free to google and find something else that you find easier.
-
-- [Udacity — Version Control with Git](https://www.udacity.com/course/version-control-with-git--ud123)
-- [GitHub Hello World](https://guides.github.com/activities/hello-world/)
-
-## Building an Application
-
-Here is the list of items that you are going to need when developing Android applications. Please note that this is an exhaustive list, and you don't need to know it all from the get-go. Get an idea of the items listed, and just start building some apps and keep the items listed in the back of your mind and have a deep dive when using them.
-
-[![](/roadmaps/android/build-an-application.png)](/roadmaps/android/build-an-application.png)
-
-To learn more about the items listed in the image above, here are the links to the relevant docs.
-
-- [Using Activities and Activity Life Cycles](https://developer.android.com/guide/components/activities/intro-activities)
-- Building Flexible Interfaces using [Fragments](https://developer.android.com/guide/components/fragments)
-- [Debugging using Android Studio Debugger](https://developer.android.com/studio/debug)
-- [Handling App Configurations](https://developer.android.com/work/managed-configurations)
-- [Using Intents and Intent Filters](https://developer.android.com/guide/components/intents-filters)
-- [Understand Context](https://guides.codepath.com/android/Using-Context)
-- [Learn about Multithreading](https://developer.android.com/training/multiple-threads)
-- [Data Privacy](https://www.raywenderlich.com/6901838-data-privacy-for-android)
-- [Securing Network Data](https://www.raywenderlich.com/5634-securing-network-data-tutorial-for-android)
-- [Dependency Injection](https://developer.android.com/training/dependency-injection)
-- [Content Providers](https://developer.android.com/guide/topics/providers/content-providers)
-- [Glide](https://github.com/bumptech/glide), [Retrofit](https://square.github.io/retrofit/), [Crashlytics](https://firebase.google.com/docs/crashlytics/get-started), [GSON](https://github.com/google/gson)
-- [Room](https://developer.android.com/topic/libraries/architecture/room), [Navigation](https://developer.android.com/guide/navigation/navigation-getting-started), [Work Manager](https://developer.android.com/topic/libraries/architecture/workmanager), [LiveData](https://developer.android.com/topic/libraries/architecture/livedata), [Data Binding](https://developer.android.com/topic/libraries/data-binding)
-- [RxJava](https://github.com/ReactiveX/RxJava), [RxKotlin](https://github.com/ReactiveX/RxKotlin)
-- [Memory Management Overview](https://developer.android.com/topic/performance/memory-overview)
-- [Diving deeper into context-oriented programming in Kotlin](https://proandroiddev.com/diving-deeper-into-context-oriented-programming-in-kotlin-3ecb4ec38814)
-
-## Jetpack Compose
-
-Jetpack Compose is Android’s modern toolkit for building native UI. It simplifies and accelerates UI development on Android. Quickly bring your app to life with less code, powerful tools, and intuitive Kotlin APIs.
-
-- [Jetpack Compose](https://developer.android.com/jetpack/compose/documentation)
-- [Material Design 3](https://m3.material.io/)
-- [Getting started with Material Components](https://m3.material.io/libraries/mdc-android/getting-started)
-
-## Free Resources
-
-I would highly recommend watching [this free course](https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012) from Google on Developing Android Apps with Kotlin. You may also get started with this [free course](https://developer.android.com/courses/android-basics-kotlin/course) on the Android developer's page, where concepts are taught with the help of code labs, projects and quizzes, and you also earn badges as you learn that appear on your Google developer profile. Also, here are some of the resources to learn more about the topics listed above.
-
-- [Developing Android Apps with Kotlin](https://www.udacity.com/course/developing-android-apps-with-kotlin--ud9012)
-- [Android Basics in Kotlin](https://developer.android.com/courses/android-basics-kotlin/course)
-- [Android Developer Guides](https://developer.android.com/guide)
-- [Kodeco](https://www.kodeco.com)
-
-## Wrap Up
-
-That wraps it up for the Android developer roadmap. Again, remember to not be exhausted by the list; just learn the basics and start working on some project and the rest of the learnings will come along the way. Good luck!
-
-For any suggestions, improvements and feedback, feel free to [submit an issue](https://github.com/kamranahmedse/developer-roadmap) or reach out to me on twitter [@kamrify](https://twitter.com/kamrify).
-
-<!-- @fixme add padding to the container -->
-
-<br /><br /><br />
+---

src/data/roadmaps/android/content/100-pick-a-language/100-kotlin.md

@@ -0,0 +1,3 @@
+# Kotlin
+
+`Kotlin` is a cross-platform, statically typed general-purpose programming language with type inference. Developed by JetBrains, the makers of the world’s leading IDEs, Kotlin has a syntax, which is more expressive and concise. This allows for more readable and maintainable code. It is fully interoperable with Java and comes with no limitations. It can be used almost everywhere Java is used today, for server-side development, Android apps, and much more. Kotlin introduces several improvements for programmers over Java, which makes it a preferred choice for many developers. With more concise code base and modern programming concept support - it's certainly a future of Android app development.

src/data/roadmaps/android/content/100-pick-a-language/101-java.md

@@ -0,0 +1,3 @@
+# Java
+
+Java is a popular programming language used for Android development due to its robustness and ease of use. Its object-oriented structure allows developers to create modular programs and reusable code. The language was built with the philosophy of "write once, run anywhere" (WORA), meaning compiled Java code can run on all platforms without the need for recompilation. Android’s API and core libraries are primarily written in Java, therefore understanding Java is fundamental in creating diverse and powerful Android apps. Java is a statically-typed language, which can be beneficial for detecting errors at compile-time rather than at runtime. Oracle, who owns Java, provides comprehensive documentation and support for the language.

src/data/roadmaps/android/content/100-pick-a-language/index.md

@@ -0,0 +1,3 @@
+# Pick a Language
+
+When developing for Android, one crucial step is picking a programming language to use. There are multiple languages you can choose from, but the three most popular ones are Java, Kotlin, and C++. Java is the original language used for Android development and is widely used, making it a good choice for beginners due to the wealth of resources and developer communities. Kotlin is a newer option that is fully supported by Google and Android Studio, and addressing many of the drawbacks of Java which makes it a popular choice for many developers. Lastly, C++ can be used in Android development through the Android Native Development Kit (NDK), though it comes with more complexities and is usually not recommended for beginners. Your selection might depend on your existing familiarity with these languages, the complexity and specific requirements of your project, and the resources or libraries you wish to use.

src/data/roadmaps/android/content/101-the-fundamentals/100-development-ide.md

@@ -0,0 +1,3 @@
+# Development IDE
+
+"Development IDE" refers to Development Integrated Development Environment that is vital for Android App development. For Android, the primary IDE is **Android Studio**. This official IDE from Google includes everything you need to build an Android app, such as a code editor, code analysis tools, emulators for all of Android's supported OS versions and hardware configurations, and more. Other popular IDEs include **Eclipse** (with an Android Developer Tools plugin), **NetBeans**, and **IntelliJ IDEA**. Each of these IDEs tends to have its own set of specialized features, but all are designed to provide the tools and services needed for Android development. The choice of IDE often depends on the specific needs and preferences of the developer or development team.

src/data/roadmaps/android/content/101-the-fundamentals/101-basics-of-kotlin.md

@@ -0,0 +1,3 @@
+# Basics of Kotlin
+
+Kotlin is a statically-typed programming language that runs on the Java Virtual Machine (JVM) and can be used to develop all types of Android apps. It is Google's preferred language for Android app development. Kotlin's syntax is more concise than Java, which means less code to write and read, and fewer opportunities for errors. It provides several high-level features like lambdas, coroutines and higher order functions that help making the code more clean and understandable. Key basics of Kotlin include control flow statements (if, when, for, while), variables (mutable and non-mutable), null safety, classes and objects, inheritance, interfaces, and exception handling. While learning Kotlin, experience with Java will certainly be helpful, but it's not a prerequisite.

src/data/roadmaps/android/content/101-the-fundamentals/102-basics-of-oop.md

@@ -0,0 +1,3 @@
+# Basics of OOP
+
+In Android development, understanding the `Basics of Object-Oriented Programming (OOP)` is crucial. OOP is a programming paradigm that uses "Objects" - entities that contain both data and functions that manipulate the data. Key concepts include `Classes`, which are blueprints from which objects are created; `Objects`, instances of a class; `Inheritance`, where one class acquires properties from another; `Polymorphism`, the ability of an object to take many forms; `Abstraction`, showing only necessary details and hiding implementation from the user; and `Encapsulation`, the concept of wrapping data and the methods that work on data within one unit. By understanding these fundamentals, you can create more efficient and effective Android apps.

src/data/roadmaps/android/content/101-the-fundamentals/103-datastructures-and-algorithms.md

@@ -0,0 +1,5 @@
+# DataStructures and Algorithms
+
+In Android, **data structures** are primarily used to collect, organize and perform operations on the stored data more effectively. They are essential for designing advanced-level Android applications. Examples include Array, Linked List, Stack, Queue, Hash Map, and Tree. 
+
+Meanwhile, **algorithms** are a sequence of instructions or rules for performing a particular task. In Android, algorithms can be used for data searching, sorting, or performing complex business logic. Some commonly used algorithms are Binary Search, Bubble Sort, Selection Sort, etc. A deep understanding of data structures and algorithms is crucial in optimizing the performance and the memory consumption of the Android applications.

src/data/roadmaps/android/content/101-the-fundamentals/104-using-gradle.md

@@ -0,0 +1,3 @@
+# What is and how to use Gradle?
+
+**Using Gradle**: Gradle is a powerful build system used in Android development that allows you to define your project and dependencies, and distinguish between different build types and flavors. Gradle uses a domain-specific language (DSL) which gives developers almost complete control over the build process. When you trigger a build in Android Studio, Gradle is the tool working behind the scenes to compile and package your app. It looks at the dependencies you declared in your build.gradle files and creates a build script accordingly. Using Gradle in android development requires continuous editing of the build.gradle files to manage app dependencies, build variants, signing configurations and other essential aspects related to building your app. 

src/data/roadmaps/android/content/101-the-fundamentals/105-hello-world-app.md

@@ -0,0 +1,3 @@
+# Create a basic Hello World App
+
+The "Hello World" app is a simple project that you can build when you're getting started with Android development. It's often the first program that beginners learn to build in a new system. It's usually considered the simplest form of program that displays a message to the user - "Hello, World!" In Android, this involves creating a new project from the Android Studio and setting up the main activity. The main activity file is primarily written in Java or Kotlin where you can code for the display message, while the layout design view can be created in the XML file.

src/data/roadmaps/android/content/101-the-fundamentals/index.md

@@ -0,0 +1,3 @@
+# The Fundamentals
+
+"The Fundamentals" of Android primarily concentrate on 5 components; Activities, Services, Broadcast Receivers, Content Providers, and Intents. **Activities** are essentially what you see on your screen; each screen in an app is a separate activity. **Services** run in the background to perform long-running operations or to perform work for remote processes. They do not provide a user interface. **Broadcast Receivers** respond to broadcast messages from other applications or from the system itself. These messages are often in the form of Intents. **Content Providers** manage a shared set of app data that other apps can query or modify, through a structured interface. Finally, **Intents** are messaging objects which facilitate the communication between the aforementioned components. Understanding these five core concepts is key to mastering Android fundamentals.

src/data/roadmaps/android/content/102-version-control/100-git.md

@@ -0,0 +1,3 @@
+# Git
+
+`Git` is a highly efficient and flexible distributed version control system that was created by Linus Torvalds, the creator of Linux. It allows multiple developers to work on a project concurrently, providing tools for non-linear development and tracking changes in any set of files. Git has a local repository with a complete history and version-tracking capabilities, allowing offline operations, unlike SVN. It ensures data integrity and provides strong support for non-linear development with features such as branching and merging. Yet, Git has a high learning curve and can be complex for beginners to understand the command line interface. Furthermore, Git also allows you to create `tags` to reference certain points in your history for milestone or version releases.

src/data/roadmaps/android/content/102-version-control/101-github.md

@@ -0,0 +1,4 @@
+# GitHub
+
+**GitHub** is a cloud-based hosting service for managing software version control using Git. It provides a platform for enabling multiple developers to work together on the same project at the same time. With GitHub, codes can be stored publicly, allowing for collaboration with other developers or privately for individual projects. Key features of GitHub include code sharing, task management, and version control, among others. GitHub also offers functionalities such as bug tracking, feature requests, and task management for the project.
+For Android development, it supports Gradle-based android projects, plugins for Android Studio and JetBrains IntelliJ IDEA, making version control operations more user-friendly.

src/data/roadmaps/android/content/102-version-control/102-bitbucket.md

@@ -0,0 +1,3 @@
+# BitBucket
+
+Bitbucket is a web-based hosting service that is owned by Atlassian. Bitbucket uses either Mercurial or Git revision control systems, allowing users to manage and maintain their code. This platform is mainly used for code and code review. Bitbucket provides both commercial plans and free accounts. It offers free accounts with an unlimited number of private repositories (which can have up to five users in the case of free accounts) as of September 2010. It originally offered only Mercurial support. Bitbucket integrates with other Atlassian software like JIRA, HipChat, Confluence and Bamboo.

src/data/roadmaps/android/content/102-version-control/103-gitlab.md

@@ -0,0 +1,3 @@
+# GitLab
+
+`Gitlab` is a web-based DevOps lifecycle tool which provides a Git-repository manager, along with continuous integration and deployment pipeline features, using an open-source license, developed by GitLab Inc. Users can manage and create their software projects and repositories, and collaborate on these projects with other members. `Gitlab` also allows users to view analytics and open issues of their project. It stands next to other version control tools like `GitHub` and `Bitbucket`, but comes with its own set of additional features and nuances. For Android development, `Gitlab` can be particularly useful owing to its continuous integration and deployment system which can automate large parts of the app testing and deployment.

src/data/roadmaps/android/content/102-version-control/index.md

@@ -0,0 +1,3 @@
+# Version Control Systems
+
+_Version Control_ is a system that records changes to a file or set of files over time so that you can recall specific versions later. An essential tool for software development, it helps to track changes, enhance collaboration, and manage different versions of a project. Two common types of version control systems are Centralized Version Control System (CVCS) and Distributed Version Control System (DVCS). CVCS uses a central server to store all versions of a project, with users getting snapshots from that server. Examples include SVN and Perforce. On the other hand, DVCS allows multiple developers to work on a single project simultaneously. Each user has a complete backup of all versions of the work. Examples include Git and Mercurial.

src/data/roadmaps/android/content/103-app-components/100-activity/100-activity-lifecycle.md

@@ -0,0 +1,3 @@
+# Activity Lifecycle
+
+The **Activity Lifecycle** in Android represents a series of states or events that an activity can go through from its creation to its destruction. The primary states or events are `onCreate()`, `onStart()`, `onResume()`, `onPause()`, `onStop()`, `onDestroy()`, and `onRestart()`. The method `onCreate()` is called when the activity is first created, followed by `onStart()` when the activity becomes visible to the user. The `onResume()` method executes when the user starts interacting with the application. `onPause()` and `onStop()` methods are invoked when the application is no longer in the foreground or visible to the user. The `onDestroy()` method is used when the activity is being completely removed from the memory. The `onRestart()` method is called after the system stops the activity and is about to start it again. The proper handling of these states ensures the efficient use of resources and a smooth user experience.

src/data/roadmaps/android/content/103-app-components/100-activity/101-state-changes.md

@@ -0,0 +1,3 @@
+# State Changes
+
+In Android, an "Activity" is a crucial component that represents a single screen with a user interface. One or more active activities make up an Application. These activities can go through different states in their lifecycle, often due to user interaction or system interruption. The primary states of an Activity include `Created`, `Started`, `Resumed`, `Paused`, `Stopped`, `Restarted`, and `Destroyed`. The "Created" state occurs when an activity instance is being created. The "Started" state is when the activity is visible to the user, while "Resumed" is when the activity is interacting with the user. An activity is "Paused" when it loses focus but is partly visible, "Stopped" when it's not visible, "Restarted" when the activity is about to be started, and "Destroyed" when the activity is finished or the system is temporarily destroying it.

src/data/roadmaps/android/content/103-app-components/100-activity/102-tasks-backstack.md

@@ -0,0 +1,3 @@
+# Tasks and Backstack
+
+The **tasks backstack** in Android refers to the way Android manages and arranges tasks in a stack-like structure. Every task has a stack of activities, which is referred to as the task's back stack. The activities are placed in the order they are opened. When a new activity is started, it is placed at the top of the stack and becomes the running activity, while the previous activity is paused and put into the back stack. When you press the back button, the current activity is destroyed and the activity at the top of the back stack becomes active again. Android defines how to navigate between tasks and activities using this back stack concept.

src/data/roadmaps/android/content/103-app-components/100-activity/index.md

@@ -0,0 +1,3 @@
+# Activity
+
+`Activity` in Android is a crucial component that represents a single screen with a user interface. It is just like a window in a desktop application. Android apps are typically made up of one or more activities, each having its interface which allows user interaction. When an app is launched, an instance of `Activity` is created, starting the lifecycle of that app. Every activity has its own lifecycle (create, start, resume, pause, stop, destroy) that keeps the state of a user's progress, and Android manages these states automatically. Activities can also have `Intent`, which allows them to interact with other components, such as starting another activity or getting a result from that activity.

src/data/roadmaps/android/content/103-app-components/101-services.md

@@ -0,0 +1,3 @@
+# Services
+
+**Services**: A service in Android is an app component that performs operations in the background without a user interface. It can be started by an application component, like an activity, and it will continue to run in the background even if the user switches to another application. There are two types of services in Android, namely, `Started Service` and `Bound Service`. A `Started Service` is used to perform a single operation, such as downloading a large file. On the other hand, a `Bound Service` offers a client-server interface that allows components to interact with the service, send requests, receive results, and even perform interprocess communication (IPC).

src/data/roadmaps/android/content/103-app-components/102-content-provider.md

@@ -0,0 +1,3 @@
+# Content Provider
+
+A **Content Provider** in Android is a key component that allows applications to securely share data with other applications. They act as a layer between databases and applications to enhance data security. Content providers manage access to a structured set of data by handling data transactions, implementing data security, and maintaining isolation between applications. They provide an abstracted interface which is used to access data, while the underlying storage method (Like SQLite database, web, or any other method) remains hidden. This mechanism aids in retrieving data from a non-relational source in a structured way. They're used primarily when data needs to be shared between multiple applications, not just within a single application.

src/data/roadmaps/android/content/103-app-components/103-broadcast-receiver.md

@@ -0,0 +1,3 @@
+# Broadcast Receiver
+
+**Broadcast Receivers** in Android are components that respond to system-wide broadcast announcements. They can be registered to respond to a specific type of broadcasts or implement a user-defined broadcast. While you can initiate a broadcast from your app, they are generally used for receiving system notifications or communicating with other applications. However, keep in mind that they cannot display a user interface, but they can start activities if necessary, which do have a user interface. A `BroadcastReceiver` class must override the `onReceive()` method where each message is received as an `Intent` object parameter.

src/data/roadmaps/android/content/103-app-components/104-intent/100-implicit-intents.md

@@ -0,0 +1,3 @@
+# Implicit Intents
+
+In Android development, **Implicit Intents** do not specify the target component explicitly like Explicit Intents. Instead, they allow the system to find a suitable component matching the Intent description to handle the request. The system will find an activity that can handle this intent by comparing the `<intent-filter>` section in the `AndroidManifest.xml` of all apps installed on the device against the Implicit Intent. An ideal example of an implicit intent is opening a URL. You do not need to know the specific activity that can handle this request, you just declare an intent to view a web page and Android system will select the suitable app that can open the URL.

src/data/roadmaps/android/content/103-app-components/104-intent/101-explicit-intents.md

@@ -0,0 +1,3 @@
+# Explicit Intents
+
+**Explicit Intents** are primarily used within an application's own boundaries. In explicit intents you specify the component that needs to be responded to the intent. Therefore, the target component must be specified by calling methods such as `setComponent(ComponentName)`, `setClass(Context, Class)`, or `setClassName(String, String)`. This means that explicit intents are typically used for launching activities, broadcasting messages, starting services within the app. Explicit intents are not resolved by the system but are passed to the component identified in the intent.

src/data/roadmaps/android/content/103-app-components/104-intent/102-intent-filters.md

@@ -0,0 +1,3 @@
+# Intent Filters
+
+`Intent Filters` in Android are essential components of the Android system where you can declare the capabilities of your activities, services, and broadcast receivers. An intent filter is an expression found in your app's manifest file, defined in the <intent-filter> XML element. Android uses these filters to determine the appropriate components for incoming intents, which can be either explicit or implicit. Your app's ability to respond to intents depends on the filters you define. The filters are set of conditions comprised of `action`, `category`, and `data` which your activity or service is able to perform. If the incoming `Intent` matches with defined `Intent Filters`, Android system will permit that `Intent` to your Component (Activity, Service, or Broadcast Receiver).

src/data/roadmaps/android/content/103-app-components/104-intent/index.md

@@ -0,0 +1,3 @@
+# Intent
+
+"Intent" in Android is a software mechanism used for late runtime binding between components, such as activities, content providers, and services. It is essentially a passive data structure holding an abstract description of an operation that the Android system is requested to perform. The Intent can be explicit, in which you specify the component to start or  implicit, where you declare a general action to perform, allowing a component from another app to handle it. Implicit intents are often used to request another app's functionality, such as showing a user a location on a map or taking a photo. "Intent Filters" are then used by the components to advertise their capabilities to handle different types of intents.

src/data/roadmaps/android/content/103-app-components/index.md

@@ -0,0 +1,15 @@
+# App Components
+
+Android apps are primarily made up of five different types of components: 
+
+1. **Activities**: These are individual screens that a user can interact with. Any UI action like touching a button or swiping a screen will usually take place within an activity. 
+
+2. **Services**: Unlike activities, services run in the background and don't have a user interface. They’re used for repetitive or long running operations, like playing music or pulling in a feed of data from a server. 
+
+3. **Broadcast Receivers**: These are event listeners. The Android operating system uses them to respond to system-wide events. 
+
+4. **Content Providers**: They manage and share app data with other apps installed on the device. For security, data is not generally shared across apps.
+
+5. **Intents**: These serve as messages or commands to the Android system. They're used to signal to the Android system that certain events have occurred.
+   
+Each app component is designed to serve different purposes and to have a well-defined lifecycle which defines how the component is created and destroyed.

src/data/roadmaps/android/content/104-interface-and-navigation/100-jetpack-compose.md

@@ -0,0 +1,3 @@
+# Jetpack Compose
+
+`Jetpack Compose` is a modern toolkit for building native Android UI. It simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs. `Jetpack Compose` offers a declarative approach to designing UI, where you can simply describe what your UI should look like at any given point of your app’s state, and `Compose` takes care of updating the view hierarchy, making UI development more efficient. It also integrates well with existing Android apps, letting you adopt its benefits at your own pace.

src/data/roadmaps/android/content/104-interface-and-navigation/101-app-shortcuts.md

@@ -0,0 +1,7 @@
+# App Shortcuts
+
+Sure, I can provide information about "app shortcuts" feature in Android. 
+
+### App Shortcuts
+
+App shortcuts in Android are designed to provide quick and convenient routes to specific actions or functions within your app from the device home screen. To use them, long-press an app's icon and a pop-up menu will appear with the available shortcuts. Depending on the app, you might be able to send a message, make a booking, navigate home, or perform some other specific task without having to first open the app and navigate to the desired function. These shortcuts can also be moved and placed individually on the home screen for even faster access.

src/data/roadmaps/android/content/104-interface-and-navigation/102-navigation-components.md

@@ -0,0 +1,3 @@
+# Navigation Components
+
+The **Navigation Components** are part of Android Jetpack and are designed to simplify the implementation of navigation in your Android app. These components help you follow best practices, handle deep linking, and provide a consistent user experience across deep and conditional navigation. They also automate many common tasks, such as handling Up and Back actions correctly across many different types of devices. The Navigation component consists of three key parts which are Navigation graph, NavHost, and NavController.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/100-text-view.md

@@ -0,0 +1,3 @@
+# TextView
+
+`TextView` in Android is a UI (User Interface) element that allows you to display text to the user. You can set the text to be displayed by declaring it in XML or introducing it programmatically. This element supports various attributes such as `android:textAllCaps`, `android:textAppearance`, `android:textColor`, etc., to customize its appearance. Each `TextView` corresponds to an `android.widget.TextView` object. You can also react to user interaction events such as touch or click with the help of listeners (like `View.onClickListener` or `View.onTouchListener`). Manipulating with `TextView` is common when creating Android apps as they form the basic building block for user interface components.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/101-edit-text.md

@@ -0,0 +1,3 @@
+# EditText
+
+`EditText` is a common element used in Android development. It's a fundamental component for accepting user input in simple form or dialog. It allows users to modify text within its bounding box, much like what a TextField does in more general programming languages. If you have used a form or a webpage that allows you to input text, it was probably created with an EditText or similar control. You can customize an `EditText` in various ways including size, color, initial text, and hint text. You can also listen for changes in the text in an EditText, apply filters, specify input types, and more. The `android:text` attribute lets you pre-fill the EditText with text, and `android:hint` provides hint text when the EditText is empty.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/102-buttons.md

@@ -0,0 +1,3 @@
+# Buttons
+
+Buttons in Android are user interactions that trigger certain programmable actions. They are part of the `View` class in Android, making them an essential part of user interfaces. Android provides different types of buttons such as `Button`, `ToggleButton`, `RadioButton`, `CheckBox`, `Switch`, `ImageButton`, and `FloatingActionButton`. Each of these serves a different purpose and provides varied interactivity options. Their behavior and appearance can be customized in terms of different properties such as text, ID, color, etc. They can be programmed in the XML layout files or dynamically in the Java/Kotlin code.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/103-image-view.md

@@ -0,0 +1,3 @@
+# ImageView
+
+An `ImageView` is a class used in Android for displaying an image file. It inherits from 'View' class and extends the ability of views to show images. Images can be loaded from various sources such as a resource file, drawable, or a URL, with varying scale types. This class also provides methods to manage the image scale type, define padding, set tint, and manipulate the color filter. It's important to note that `ImageView` should be used in moderation as it is resource-intensive and could degrade app performance if used excessively.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/104-list-view.md

@@ -0,0 +1,3 @@
+# ListView
+
+`ListView` in Android is a view which groups several items and displays them in vertical scrollable list. The list items are automatically inserted to the list using an `Adapter` that pulls content from a source such as an array or database query and converts each item result into a view that's placed into the list. It is widely used in android apps as it offers an easy way to display a list of data in an organized manner. Functions such as `setAdapter(Adapter)` to specify data source, `setOnItemClickListener(OnItemClickListener)` to listen for click events on items, and `setOnScrollListener(OnScrollListener)` to listen for scroll events, provide further control over the list behavior.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/105-tabs.md

@@ -0,0 +1,3 @@
+# Tabs
+
+Tabs are commonly used in Android for switching between different views within the same activity. Some instances may make use of a `TabLayout` located within a `ViewPager` to create swipeable tabs. Each tab is usually associated with a fragment. To create tabs in Android, you need to use the `TabLayout` component that is available in the Material Design library. A typical `TabLayout` contains multiple `TabItem`, each representing a tab in the interface. The `TabLayout` works with a `ViewPager` to provide a consistent swipeable interface. Users can approach tabs differently depending on whether they are coded for manual or automatic filling. Manual tab creation and addition require explicit defining of each tab and adding them to the `TabLayout`, while in automatic filling tabs are generated from the `PagerAdaptor`'s page title.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/106-fragments.md

@@ -0,0 +1,3 @@
+# Fragments
+
+In Android, **Fragments** represent a behavior or a part of the user interface in an Activity. They are modular sections of an activity, which are reusable in different activities. They contribute to making an application adaptive to different devices with varied screen sizes. A fragment has its own lifecycle, receives its own input events, and can be added or removed while the activity is running. While they exist within the context of an activity, they can also be used independently to encapsulate functionality for easier development and reuse. Multiple fragments can combine in a single activity to build a multi-pane UI.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/107-dialogs.md

@@ -0,0 +1,5 @@
+# Dialogs
+
+Dialogs in Android are small windows that prompt users to make a decision or enter additional information. They don't fill the screen and are normally used for modal events that require users to take action before they can proceed. In Android, `Dialog` is actually an abstract class directly subclassed from `Object`. `AlertDialog` is the subclass that you will most commonly use, which contains a number of methods as compared to `Dialog` to support features like lists, checkboxes, radio buttons, and a custom layout design. They are typically used for user interactions such as warnings, notifications, and menus. 
+
+To create a dialog, you must use the `Dialog` class or one of its subclasses, such as `DialogFragment` or `AlertDialog`. For a more detailed explanation on implementing dialogs in Android, you can refer to the official Android Developer's Guide.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/108-toast.md

@@ -0,0 +1,3 @@
+# Toast
+
+`Toast` in Android is a simple message that appears on the screen for a short period of time then disappears automatically. It is generally used to provide feedback to the user about an operation in a small popup without requiring any user interaction. This feedback could be an error message or simply information that a process completed successfully. You can configure the toast to appear anywhere on the screen and specify how long it stays up. In order to use a toast, you have to import the `android.widget.Toast` package and instantiate a Toast object. Here's an example of creating a simple toast: `Toast.makeText(context, text, duration).show()`, where context is your application context, text is the message to display, and duration is either `Toast.LENGTH_SHORT` or `Toast.LENGTH_LONG`.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/109-bottom-sheet.md

@@ -0,0 +1,3 @@
+# Bottom Sheet
+
+The **Bottom Sheet** is a popular UI component within the Android development environment. This interface element acts like a drawer that slides up from the bottom of the screen to reveal more content or options. There are two types of bottom sheets in Android: "persistent" and "modal". The persistent bottom sheet shows in-app content that supplements the primary screen content, remaining visible even when the user interacts with the primary surface. On the other hand, the modal bottom sheet is a simple menu presenting a list of options, often used for sharing content, navigating, or for user-editable content. It can be dismissed by the user and does not remain visible when the user interacts with the primary surface.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/110-drawer.md

@@ -0,0 +1,3 @@
+# Drawer
+
+The `Drawer` in Android is a slide-out menu that enables users to navigate between different parts of an application. It is usually triggered by a hamburger icon in the app's top-left corner. The `Drawer` can contain a list of options, subheadings, and separators to articulate the app's structure. In Android, this component can be implemented using `DrawerLayout` and `NavigationView`. The `DrawerLayout` is the parent component and `NavigationView` is typically placed within the `DrawerLayout`. One key thing to note is that the `Drawer` should not be used as the only means of navigating through an application, according to Android's design guidelines.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/111-animations.md

@@ -0,0 +1,5 @@
+# Animations
+
+In Android, animations are used to give a more visual, dynamic, and interactive aspect to a static user interface. Android offers four categories of animation APIs in order to create and manage the animations. These are: **Property Animation**: This allows modification of properties of an object over a given time period. **View Animation**: Consists of two subcategories i.e. Tween Animation (transition of a view from one state to another) and Frame Animation (displaying frames one after another). **Drawable Animation**: This is similar to a slideshow, showing one image after another. Lastly, **Layout Animation**: This is used to animate the layout itself when views are added or removed.
+
+You can utilize Android's built-in animations or fully customize your own to add unique transitions and movements in your applications. Every app can benefit from a touch of animation to create a more immersive and pleasant user experience.

src/data/roadmaps/android/content/104-interface-and-navigation/elements/index.md

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

src/data/roadmaps/android/content/104-interface-and-navigation/index.md

@@ -0,0 +1,3 @@
+# Interface and Navigation
+
+In Android development, the concepts of "Interface" and "Navigation" are crucial. The "Interface" often refers to the Graphical User Interface (GUI) that users interact with. This includes buttons, text fields, image views, scroll views and other UI elements that the users can interact with to perform certain tasks. Tools like XML and Material Designs are used for interface design in Android. Meanwhile, "Navigation" refers to the interactions that allow users to navigate across, into, and back out from the different pieces of content within the app, following a clear path, like a map. Android uses the Navigation Component, a suite of libraries, tools, and guidance on constructing in-app navigation. Understanding both these elements, Interface and Navigation, is fundamental to creating an intuitive and user-friendly Android application.

src/data/roadmaps/android/content/104-interface-and-navigation/layouts/100-frame.md

@@ -0,0 +1,3 @@
+# Frame
+
+The `FrameLayout` in Android is a layout manager that pinpoints its children to the top left corner of the layout. This means that all children will be piled up on each other at the same top left corner, which might not be visually appealing. However, it can be useful in some specific designs, where you desire to overlay one view on top of another. Additionally, `FrameLayout` allows you to control the positioning of items in the frame by configuring the `gravity` property. However, bear in mind that this layout does not provide any visual structure – you may need to use `padding` or `margin` to create spaces between the elements in the frame.

src/data/roadmaps/android/content/104-interface-and-navigation/layouts/101-linear.md

@@ -0,0 +1,3 @@
+# Linear
+
+`Linear Layout` in Android is a layout where all elements are aligned in a linear fashion - either horizontally or vertically. Each element inside a `LinearLayout` takes up space according to its size. In a vertical layout, elements can occupy the full width and a certain height, whereas in a horizontal layout, elements can occupy the full height and a certain width. This is extremely useful if you want to align elements in a single direction. You provide the orientation of a `LinearLayout` using the `android:orientation` attribute.

src/data/roadmaps/android/content/104-interface-and-navigation/layouts/102-relative.md

@@ -0,0 +1,3 @@
+# Relative
+
+`RelativeLayout` in Android is a layout that positions views based on their relationship to each other or the parent. This means that you can set your views related to the position of siblings (other child views) or the parent. For example, you can place a button right to an ImageView, or at the bottom of a parent view. Android systems determine this order dynamically by examining each of the RelativeLayout parameters, such as `android:layout_below` or `android:layout_toRightOf`, and applying them according to the rules defined. This layout is useful when you're building a UI that needs to maintain relative positioning of elements, even as screen size or orientation changes.

src/data/roadmaps/android/content/104-interface-and-navigation/layouts/103-constraint.md

@@ -0,0 +1,3 @@
+# Constraint
+
+ConstraintLayout is a ViewGroup that allows you to position and size widgets in a flexible way. It was added to Android Studio 2.2 in 2016. It's similar to RelativeLayout in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use with Android Studio's Layout Editor. All direct children of a ConstraintLayout have a set of constraints that define their position. These constraints are used to position the child's left or top edge relative to other views or the parent layout. The position and size for each view can be specified using a number of methods including baseline alignment, margins, and bias. ConstraintLayout works best with Android Studio's Layout Editor where you can drag-and-drop views and then add constraints to fine-tune view positions.

src/data/roadmaps/android/content/104-interface-and-navigation/layouts/104-recycle-view.md

@@ -0,0 +1,3 @@
+# RecycleView
+
+The `RecyclerView` is an enhanced version of the `ListView` and the `GridView`. It is a more advanced and flexible version of `ListView`. In `RecyclerView`, there are several different components that work together to display your data. The `RecyclerView.Adapter` is similar to the `BaseAdapter`; it takes data and turns it into views that can be inserted in the `RecyclerView` layout. On the other hand, the `RecyclerView.LayoutManager` helps positioning items inside the `RecyclerView` and determining the behavior when scrolling. A third significant component is `RecyclerView.ViewHolder`. It provides references to the views for each data item which help to reduce unnecessary calls to `findViewById()`. It's also important to mention that the `RecyclerView` class supports not only lists but also a custom implementation of horizontal or vertical lists, grids, or staggered grids while offering more opportunities for fantastic custom animations.

src/data/roadmaps/android/content/104-interface-and-navigation/layouts/index.md

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

src/data/roadmaps/android/content/105-design-architecture/100-repository-pattern.md

@@ -0,0 +1,3 @@
+# Repository Pattern
+
+In Android design architecture, the `Repository Pattern` separates the data sources from the rest of the application. It acts as a mediator between different data sources, such as persistent models, web services, or caches. Instead of having the network and database calls spread out throughout your ViewModel, they are encapsulated within a Repository class. This separation will make the code clean, easy to read and testable. It provides a simple API for data access, the rest of the app doesn't need to know where the data is coming from it just asks the repository.

src/data/roadmaps/android/content/105-design-architecture/101-builder-pattern.md

@@ -0,0 +1,3 @@
+# Builder Pattern
+
+The **Builder Pattern** in Android is used to construct complex objects step by step. It separates the construction of an object from its representation. The pattern involves a `Builder` class which is used to construct the `Product` class. The Builder class typically has a method for each part that may be used to construct a Product. It also has a method for returning the final product. The Builder pattern is useful in situations where you might have multiple ways to create an object or when an object requires a large number of parameters for its constructor.

src/data/roadmaps/android/content/105-design-architecture/102-observer-pattern/100-flow.md

@@ -0,0 +1,3 @@
+# Flow
+
+`Flow` in Android development is part of the Kotlin Coroutines library. It is a type that can emit multiple values sequentially, making it perfect for working with any data streams or any streams of events that aren't instantaneous. Like Observables, `Flow` is also based on the observer pattern, meaning it can emit values and these emissions can be observed and reacted to. However, `Flow` comes with built-in backpressure handling and the ability to transform, filter, or combine these flows in a sequence. Along with Coroutines, `Flow` encourages a more predictable and simplified concurrency design without callback hell problem.

src/data/roadmaps/android/content/105-design-architecture/102-observer-pattern/101-rxjava.md

@@ -0,0 +1,7 @@
+# RxJava
+
+RxJava, standing for Reactive Extensions for the JVM, is a library in the Java and Android ecosystem that allows developers to write asynchronous, event-based programs. It is developed according to reactive programming principles and it supports multi-threading operations. One can create data streams from just about anything - variables, data structures, inputs, etc. and these streams could be used with functional programming methods to process the data. 
+
+In Android, RxJava is often used in combination with Retrofit, to handle API calls or with Room, to handle tasks involving the database. This library provides a set of operators such as `map()`, `filter()`, `concat()`, `merge()`, `flatmap()` etc. to handle tasks such as chain asynchronous operations, perform computations, or transform data. 
+
+There are three important entities in RxJava - 'Observable', 'Observer' and 'Subscription'. 'Observable' is a data stream that does some work, 'Observer' watches the 'Observable' and does something when the 'Observable’ changes, and 'Subscription' is what ties an 'Observer' to an 'Observable' - linking their lifecycles and allowing 'Observer’s to unsubscribe (to stop receiving updates) when they’re destroyed. In other words, 'Subscription' is what allows you to manage memory and prevent crashes due to leaks.

src/data/roadmaps/android/content/105-design-architecture/102-observer-pattern/102-rxkotlin.md

@@ -0,0 +1,3 @@
+# RxKotlin
+
+`RxKotlin` is a lightweight library that adds convenient extension functions to `RxJava`. It allows developers to use RxJava with Kotlin in a more idiomatic way, thus making code more readable and understandable. While `RxJava` is a Java-based implementation of Reactive Extensions, `RxKotlin` is essentially a wrapper that includes extension functions and other constructs to take full advantage of Kotlin's features, such as its syntactic simplicity and ease of use.

src/data/roadmaps/android/content/105-design-architecture/102-observer-pattern/103-livedata.md

@@ -0,0 +1,3 @@
+# LiveData
+
+`LiveData` is a data holder class that can be observed within a given lifecycle. This means that an `Observer` can be added in a pair with a `LifecycleOwner`, and this observer will be notified about modifications of the `LiveData` object only if the associated `LifecycleOwner` is in active state. `LiveData` respects the lifecycle state of app components, such as activities, fragments, or services, and it only updates app-component observers that are in an active lifecycle state. Furthermore, `LiveData` automatically removes the observers when their associated `LifecycleOwner` moves to the `Destroyed` state. This combination of `LiveData` and `LifecycleOwner` helps you to manage appropriate and efficient updates because `LiveData` takes into consideration the lifecycle state of your app components.

src/data/roadmaps/android/content/105-design-architecture/102-observer-pattern/index.md

@@ -0,0 +1,3 @@
+# Observer Pattern
+
+The **Observer Pattern** is a software design pattern in which an object, known as the subject, maintains a list of its dependants, called observers, and notifies them automatically of any state changes. This is usually done by calling one of their methods. It's mainly used for implementing distributed event handling systems and is viewed as a good practice to follow, making your design more robust, flexible, and scalable. The subject to be observed triggers events and observers react to the change or the event that they are listening to. In Android, observable libraries like `LiveData`, `RxJava`, `Flow`, and other reactive streams allow the implementation of observer pattern.

src/data/roadmaps/android/content/105-design-architecture/103-dependency-injection/100-dagger.md

@@ -0,0 +1,3 @@
+# Dagger
+
+[Dagger](https://dagger.dev/) is a fully static, compile-time dependency injection framework for both Java and Android. It is an adaptation of an earlier version created by Square that's focused on simplicity and speed. Dagger's primary focus is on compile-time analysis of dependencies, code simplicity, and clarity. It uses annotations to define dependencies, thus aiding in easy readability and understanding of the code. Dagger also eliminates the use of reflection to inject dependencies, thus boosting performance. It offers custom scopes to control the lifespan of instances and ensures that dependencies are Singleton across the entire lifespan of certain scopes.

src/data/roadmaps/android/content/105-design-architecture/103-dependency-injection/101-hilt.md

@@ -0,0 +1,3 @@
+# Hilt
+
+Hilt is a dependency injection library for Android that reduces the boilerplate code that you would normally need to write when setting up manual dependency injection in your project. It is based on the Dagger library, but it simplifies the implementation process and streamlines the use of Dagger in Android apps. To set it up, you must annotate your Android classes and Hilt will automatically generate and provide the necessary dependencies for you. Moreover, Hilt provides predefined set of components tied to the Android lifecycle which helps to handle scoped instances.

src/data/roadmaps/android/content/105-design-architecture/103-dependency-injection/102-koin.md

@@ -0,0 +1,3 @@
+# Koin
+
+[Koin](https://insert-koin.io) is a lightweight dependency injection framework developed specifically for Kotlin developers. It uses functional resolution only - no proxy, no code generation, no reflection, and offers simplicity by leveraging Kotlin's language features. While Koin is not related to the Android platform, it provides specific extensions enabling an efficient integration into your Android applications, including [Android Architecture Components](https://developer.android.com/topic/libraries/architecture/index.html) and [Kotlin Coroutines](https://kotlinlang.org/docs/reference/coroutines-overview.html), amongst others.

src/data/roadmaps/android/content/105-design-architecture/103-dependency-injection/103-kodein.md

@@ -0,0 +1,3 @@
+# Kodein
+
+`Kodein` is one of the recommended dependency injection frameworks suitable for Android development. This open-source Kotlin library simplifies the DI process by allowing developers to bind various types of dependencies, such as singleton, factory, or provider bindings into containers or `Kodein` modules. It promotes dependency declaration where used, instead of prior declaration. It follows a "Define in Use" principle that enables easy-to-use, easy-to-debug and very idiomatic Kotlin code. It's also worth noting that `Kodein` works hand in hand with Android's lifecycle and provides easy integration with popular libraries such as Android Architecture Components, leveraging their functionality.

src/data/roadmaps/android/content/105-design-architecture/103-dependency-injection/index.md

@@ -0,0 +1,3 @@
+# Dependency Injection
+
+`Dependency Injection` is a technique where an object does not need to create its own dependencies; instead, dependencies are provided (or injected) at runtime. This technique is highly beneficial in Android Development. It helps in creating loosely coupled and easily testable code. For example, the `Retrofit` instance that your application requires to make network calls can be created somewhere else and can be injected whenever required using libraries like `Dagger`, `Koin` or `Hilt`. The `ViewModel` instances can also be injected rather than being created in the required classes directly. Through dependency injection, plugins ensure the code becomes easier to change, understand, and maintain, hence, improving the quality of the code.

src/data/roadmaps/android/content/105-design-architecture/104-factory-pattern.md

@@ -0,0 +1,37 @@
+# Factory Pattern
+
+The **Factory Pattern** is part of the Creational Design Patterns. This pattern provides an interface for creating objects in a superclass, but allows subclasses to alter the type of objects that will be created. It introduces an abstraction layer between the client code and the concrete objects. Normally, this is achieved by using a factory method to create objects instead of using constructors. The instance of the class is usually created by a method, referred to as a `factory method`, which is either specified in an interface and implemented in implementing classes or implemented in a base class which may be optionally overridden by derived classes. The Factory Method is used when we want to provide users with a way to create an instance of a class from one of several possible classes that share a common super class.
+
+Here is a basic example of the Factory Pattern:
+
+```java
+public abstract class Animal {
+    public abstract String makeSound();
+}
+
+public class Dog extends Animal {
+    @override
+    public String makeSound() {
+        return "Woof";
+    }
+}
+
+public class Cat extends Animal {
+    @override
+    public String makeSound() {
+        return "Meow";
+    }
+}
+
+public class AnimalFactory {
+    public Animal createAnimal(String type) {
+        if ("Dog".equals(type)) {
+            return new Dog();
+        } else if ("Cat".equals(type)) {
+            return new Cat();
+        }
+        return null;
+    }
+}
+```
+In the code above, `AnimalFactory` is the factory class responsible to create and return instances of `Dog` and `Cat` classes.

src/data/roadmaps/android/content/105-design-architecture/architectural-patterns/100-mvi.md

@@ -0,0 +1,3 @@
+# MVI
+
+"MVI" stands for Model-View-Intent, and is an architectural pattern used in Android development. This pattern introduces a unidirectional data flow which makes it easier to understand an app's state at any given point in time. In the MVI pattern, the `Intent` represents an intention or desire to perform an action, often triggered by user inputs. The `View` is responsible for rendering the UI and emitting intents. The `Model`, on the other hand, represents the state of the app and reacts to intents by changing its state. It's the Model's responsibility to respond to each Intent with a resulting new state. Once a new state is created, it is published back to the `View`. This clear separation and single direction of data and event flow can help in managing side-effects and handling asynchronous actions.

src/data/roadmaps/android/content/105-design-architecture/architectural-patterns/101-mvvm.md

@@ -0,0 +1,3 @@
+# MVVM
+
+"**MVVM**" stands for "Model View ViewModel" and it is an architectural pattern that aims to separate the development of Graphical User Interface from the business logic. In MVVM, the **Model** represents the data and the business logic of the app. The **View** is responsible for the display of the data and interacts with the user. The **ViewModel** acts as a link between the Model and the View. It handles all the UI logic and preserves the state of the data when the configuration changes or when the app is stopped and then started again.

src/data/roadmaps/android/content/105-design-architecture/architectural-patterns/102-mvp.md

@@ -0,0 +1,3 @@
+# MVP
+
+MVP stands for Model-View-Presenter. It is an architectural pattern often used in Android development. In MVP, the architect separates the application's responsibilities into three main layers. The 'Model' refers to the data and business logic of the application. The 'View', typically implemented by an Activity or Fragment in Android, is responsible for displaying the data to the user and collecting user inputs. Lastly, the 'Presenter' works as a bridge between the Model and the View. It listens to user interactions from the View and updates the Model accordingly, and also updates the View based on changes in the Model. This separation of responsibilities allows for better code organization, easier testing, and greater flexibility.

src/data/roadmaps/android/content/105-design-architecture/architectural-patterns/103-mvc.md

@@ -0,0 +1,3 @@
+# MVC
+
+MVC stands for Model-View-Controller. It is a widely used design pattern for designing software's architecture. According to this, an application is divided into three core components. The 'Model' is responsible for handling the data and business logic. The 'View' is responsible for rendering the model's data and generating the user interface. The 'Controller' acts as an interface between the Model and View. It processes all the user's interactions and updates the View and Model accordingly. It's crucial to note that in MVC, the View can have multiple representations of the Model.

src/data/roadmaps/android/content/105-design-architecture/architectural-patterns/index.md

@@ -0,0 +1 @@
+# Architectural patterns

src/data/roadmaps/android/content/105-design-architecture/index.md

@@ -0,0 +1,3 @@
+# Architecture and Design Patterns
+
+In Android, **Design Architecture** refers to structuring the code in a way that increases its readability, maintainability, and testability. There are several ways to design architecture like [Model-View-Controller (MVC)](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller), [Model-View-Presenter (MVP)](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter), [Model-View-ViewModel (MVVM)](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel), and [Model-View-Intent (MVI)](https://www.raywenderlich.com/817602-mvi-architecture-for-android-tutorial-getting-started). Each of these define the interaction between the data, the logic, and the UI layers. Google’s recommended architectural pattern is [Android Architecture Components](https://developer.android.com/topic/libraries/architecture) which follow the principles of the MVVM pattern. Bear in mind that an architecture is not a rigid structure that fits all solutions. Rather, it serves as a guideline and can be tweaked as necessary.

src/data/roadmaps/android/content/106-storage/100-shared-preferences.md

@@ -0,0 +1,3 @@
+# Shared Preferences
+
+Shared Preferences in Android are used to store data in key-value pairs. It works similar to a tiny database where you can save small pieces of data such as settings or the state of an application. When data is saved to Shared Preferences, it persists across user sessions, even if your application is killed or gets deleted. Data in Shared Preferences is not typically used for large amounts of data. To perform actions such as saving, retrieving, or editing data in Shared Preferences, you use an instance of `SharedPreferences.Editor`.

src/data/roadmaps/android/content/106-storage/101-datastore.md

@@ -0,0 +1,3 @@
+# DataStore
+
+`DataStore` is a new and improved data storage solution by Android, meant to supersede `SharedPreferences`. It is important to understand that it comes in two different implementations: `Preferences DataStore` and `Proto DataStore`. `Preferences DataStore` uses key-value pairs similar to `SharedPreferences`, but it's more robust and handles runtime exceptions more efficiently. On the other hand, `Proto DataStore` uses custom data types to provide type safety. It lets you leverage the power of Protocol Buffers, a language-neutral, platform-neutral mechanism for serializing structured data, as the data storage format. Operating on data in `DataStore` is transactional, meaning that if an error occurs during an operation, all changes are rolled back, so the data remains in a consistent state.

src/data/roadmaps/android/content/106-storage/102-room.md

@@ -0,0 +1,3 @@
+# Room Database
+
+"Room" is a persistence library introduced by Google that provides an abstraction layer over SQLite to help with robust database access while harnessing the full power of SQLite. Room supports the creation of databases and defines queries in compile-time-checked SQL strings. These databases belong to the data classes that you create representing your app's data. Room comprises three main components: **Database**, a container that holds your app's data tables; **Entity**, representing a table within the database; and **DAO (Data Access Object)**, containing SQL query methods to interact with the database.

src/data/roadmaps/android/content/106-storage/103-file-system.md

@@ -0,0 +1,3 @@
+# File System
+
+The Android operating system uses a specific File System structure to store and manage files. It’s primarily based on the Linux File system, with some specific Android features. The File System includes several key directories that are used for specific purposes. For instance, directories such as `/system` hold system apps and firmware, while `/data` contains user data, settings and installed applications, and `/sdcard` usually represents an internal or external SD card for additional storage. It's worth mentioning directories like `/proc`, `/dev`, and `/sys` which are virtual file systems and house important system files. As an Android developer, understanding these directories can help you interact with Android's file system more effectively. Note that access to some of these directories may be restricted depending on system permissions.

src/data/roadmaps/android/content/106-storage/index.md

@@ -0,0 +1,3 @@
+# Storage
+
+On Android devices, storage refers to where your data such as apps, photos, videos, and music are saved. It can be categorized into two types: internal and external storage. Internal Storage is where data is stored that's tied directly to your app. This data is private by default and not accessible by other apps. External Storage, on the other hand, is a shared space where all apps can read and write data. It can be further subcategorized into Public and Private directories. Public directories are shared among all apps while private directories are specific to your app but can be accessed by other apps if they have the appropriate permissions. To control the access to these storage types, Android provides a file-based and a Scoped Storage framework. The latter limits apps' access to external storage and gives users more control over their data.