fix: showcase roadmap index

* feat: implement discover custom roadmaps

* feat: add error page

* wip: roadmap ratings

* wip

* feat: implement rating

* refactor: roadmap discover page

* Update UI

* fix: search

* fix: search query

* Update UI for the discover page

* Refactor rating logic

* Button changes on the custom roadmap page

* Refactor feedback modal

* Hide rating from custom roadmaps which are not discoverable

* feat: rating feedback pagination

* fix: remove per page

* Update ratings

* fix: button height

* Update UI for the discover page

---------

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

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1720192549979
+		"lastUpdateCheck": 1721257136269
 	}
 }

contributing.md

@@ -76,8 +76,6 @@ It's important to add a valid type, this will help us categorize the content and
 - <p><strong>Write meaningful commit messages</strong><br >
 
   Meaningful commit messages help speed up the review process as well as help other contributors in gaining a good overview of the repositories commit history without having to dive into every commit.
-  
-  (See the following guide on how to write good [commit messages](https://www.freecodecamp.org/news/how-to-write-better-git-commit-messages/)).
 
   </p>
 - <p><strong>Look at the existing issues/pull requests before opening new ones</strong></p>

package.json

@@ -32,13 +32,13 @@
     "@astrojs/react": "^3.6.0",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
-    "@fingerprintjs/fingerprintjs": "^4.4.1",
+    "@fingerprintjs/fingerprintjs": "^4.4.3",
     "@nanostores/react": "^0.7.2",
     "@napi-rs/image": "^1.9.2",
     "@resvg/resvg-js": "^2.6.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.11.3",
+    "astro": "^4.11.5",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
     "dom-to-image": "^2.6.0",
@@ -46,35 +46,35 @@
     "gray-matter": "^4.0.3",
     "htm": "^3.1.1",
     "image-size": "^1.1.1",
-    "jose": "^5.6.2",
+    "jose": "^5.6.3",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.399.0",
     "nanoid": "^5.0.7",
     "nanostores": "^0.10.3",
     "node-html-parser": "^6.1.13",
     "npm-check-updates": "^16.14.20",
-    "playwright": "^1.45.0",
+    "playwright": "^1.45.2",
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-calendar-heatmap": "^1.9.0",
     "react-confetti": "^6.1.0",
     "react-dom": "^18.3.1",
-    "react-tooltip": "^5.27.0",
+    "react-tooltip": "^5.27.1",
     "reactflow": "^11.11.4",
     "rehype-external-links": "^3.0.0",
     "remark-parse": "^11.0.0",
     "roadmap-renderer": "^1.0.6",
-    "satori": "^0.10.13",
+    "satori": "^0.10.14",
     "satori-html": "^0.3.2",
     "sharp": "^0.33.4",
     "slugify": "^1.6.6",
-    "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.4",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss": "^3.4.6",
     "unified": "^11.0.5",
     "zustand": "^4.5.4"
   },
   "devDependencies": {
-    "@playwright/test": "^1.45.0",
+    "@playwright/test": "^1.45.2",
     "@tailwindcss/typography": "^0.5.13",
     "@types/dom-to-image": "^2.6.7",
     "@types/js-cookie": "^3.0.6",
@@ -84,10 +84,10 @@
     "gh-pages": "^6.1.1",
     "js-yaml": "^4.1.0",
     "markdown-it": "^14.1.0",
-    "openai": "^4.52.2",
-    "prettier": "^3.3.2",
-    "prettier-plugin-astro": "^0.14.0",
+    "openai": "^4.52.7",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.5",
-    "tsx": "^4.16.0"
+    "tsx": "^4.16.2"
   }
 }

src/api/roadmap.ts

@@ -0,0 +1,39 @@
+import { type APIContext } from 'astro';
+import { api } from './api.ts';
+import type { RoadmapDocument } from '../components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
+
+export type ListShowcaseRoadmapResponse = {
+  data: Pick<
+    RoadmapDocument,
+    | '_id'
+    | 'title'
+    | 'description'
+    | 'slug'
+    | 'creatorId'
+    | 'visibility'
+    | 'createdAt'
+    | 'topicCount'
+    | 'ratings'
+  >[];
+  totalCount: number;
+  totalPages: number;
+  currPage: number;
+  perPage: number;
+};
+
+export function roadmapApi(context: APIContext) {
+  return {
+    listShowcaseRoadmap: async function () {
+      const searchParams = new URLSearchParams(context.url.searchParams);
+      return api(context).get<ListShowcaseRoadmapResponse>(
+        `${import.meta.env.PUBLIC_API_URL}/v1-list-showcase-roadmap`,
+        searchParams,
+      );
+    },
+    isShowcaseRoadmap: async function (slug: string) {
+      return api(context).get<{
+        isShowcase: boolean;
+      }>(`${import.meta.env.PUBLIC_API_URL}/v1-is-showcase-roadmap/${slug}`);
+    },
+  };
+}

src/components/AuthenticationFlow/TriggerVerifyEmail.tsx

@@ -73,7 +73,7 @@ export function TriggerVerifyEmail() {
           Verifying your new Email
         </h2>
         <div className="text-sm sm:text-base">
-          {isLoading && <p>Please wait while we verify your new Email..</p>}
+          {isLoading && <p>Please wait while we verify your new Email.</p>}
           {error && <p className="text-red-700">{error}</p>}
         </div>
       </div>

src/components/CommandMenu/CommandMenu.tsx

@@ -243,7 +243,7 @@ export function CommandMenu() {
                 const groupChanged = prevPage && prevPage.group !== page.group;
 
                 return (
-                  <Fragment key={page.id}>
+                  <Fragment key={page.group+'/'+page.id}>
                     {groupChanged && (
                       <div className="border-b border-gray-100"></div>
                     )}

src/components/CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx

@@ -23,24 +23,44 @@ export const allowedCustomRoadmapType = ['role', 'skill'] as const;
 export type AllowedCustomRoadmapType =
   (typeof allowedCustomRoadmapType)[number];
 
+export const allowedShowcaseStatus = ['visible', 'hidden'] as const;
+export type AllowedShowcaseStatus = (typeof allowedShowcaseStatus)[number];
+
 export interface RoadmapDocument {
   _id?: string;
   title: string;
   description?: string;
   slug?: string;
   creatorId: string;
+  aiRoadmapId?: string;
   teamId?: string;
-  isDiscoverable: boolean;
-  type: AllowedCustomRoadmapType;
+  topicCount: number;
   visibility: AllowedRoadmapVisibility;
   sharedFriendIds?: string[];
   sharedTeamMemberIds?: string[];
+  feedbacks?: {
+    userId: string;
+    email: string;
+    feedback: string;
+  }[];
+  metadata?: {
+    originalRoadmapId?: string;
+    defaultRoadmapId?: string;
+  };
   nodes: any[];
   edges: any[];
+
+  isDiscoverable?: boolean;
+  showcaseStatus?: AllowedShowcaseStatus;
+  ratings: {
+    average: number;
+    breakdown: {
+      [key: number]: number;
+    };
+  };
+
   createdAt: Date;
   updatedAt: Date;
-  canManage: boolean;
-  isCustomResource: boolean;
 }
 
 interface CreateRoadmapModalProps {

src/components/CustomRoadmap/CustomRoadmap.tsx

@@ -18,7 +18,7 @@ export const allowedLinkTypes = [
   'roadmap.sh',
   'official',
   'roadmap',
-  'feed'
+  'feed',
 ] as const;
 
 export type AllowedLinkTypes = (typeof allowedLinkTypes)[number];
@@ -47,6 +47,7 @@ export type GetRoadmapResponse = RoadmapDocument & {
   canManage: boolean;
   creator?: CreatorType;
   team?: CreatorType;
+  unseenRatingCount: number;
 };
 
 export function hideRoadmapLoader() {

src/components/CustomRoadmap/CustomRoadmapAlert.tsx

@@ -1,4 +1,11 @@
-import { BadgeCheck, MessageCircleHeart, PencilRuler } from 'lucide-react';
+import {
+  BadgeCheck,
+  Heart,
+  HeartHandshake,
+  MessageCircleHeart,
+  PencilRuler,
+  Search,
+} from 'lucide-react';
 import { showLoginPopup } from '../../lib/popup.ts';
 import { isLoggedIn } from '../../lib/jwt.ts';
 import { useState } from 'react';
@@ -17,14 +24,11 @@ export function CustomRoadmapAlert() {
         />
       )}
       <div className="relative mb-5 mt-0 rounded-md border border-yellow-500 bg-yellow-100 p-2 sm:-mt-6 sm:mb-7 sm:p-2.5">
-        <h2 className="text-base font-semibold text-yellow-800 sm:text-lg">
-          Community Roadmap
-        </h2>
-        <p className="mt-2 mb-2.5 sm:mb-1.5 sm:mt-1 text-sm text-yellow-800 sm:text-base">
-          This is a custom roadmap made by a community member and is not verified by{' '}
-          <span className="font-semibold">roadmap.sh</span>
+        <p className="mb-2.5 mt-2 text-sm text-yellow-800 sm:mb-1.5 sm:mt-1 sm:text-base">
+          This is a custom roadmap made by a community member and is not
+          verified by <span className="font-semibold">roadmap.sh</span>
         </p>
-        <div className="flex items-start sm:items-center flex-col sm:flex-row gap-2">
+        <div className="flex flex-col items-start gap-2 sm:flex-row sm:items-center">
           <a
             href="/roadmaps"
             className="inline-flex items-center gap-1.5 text-sm font-semibold text-yellow-700 underline-offset-2 hover:underline"
@@ -32,20 +36,16 @@ export function CustomRoadmapAlert() {
             <BadgeCheck className="h-4 w-4 stroke-[2.5]" />
             Visit Official Roadmaps
           </a>
-          <span className="font-black text-yellow-700 hidden sm:block">&middot;</span>
-          <button
+          <span className="hidden font-black text-yellow-700 sm:block">
+            &middot;
+          </span>
+          <a
+            href="/community"
             className="inline-flex items-center gap-1.5 text-sm font-semibold text-yellow-700 underline-offset-2 hover:underline"
-            onClick={() => {
-              if (!isLoggedIn()) {
-                showLoginPopup();
-              } else {
-                setIsCreatingRoadmap(true);
-              }
-            }}
           >
-            <PencilRuler className="h-4 w-4 stroke-[2.5]" />
-            Create Your Own Roadmap
-          </button>
+            <HeartHandshake className="h-4 w-4 stroke-[2.5]" />
+            More Community Roadmaps
+          </a>
         </div>
 
         <MessageCircleHeart className="absolute bottom-2 right-2 hidden h-12 w-12 text-yellow-500 opacity-50 sm:block" />

src/components/CustomRoadmap/CustomRoadmapRatings.tsx

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { Rating } from '../Rating/Rating';
+import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
+import { CustomRoadmapRatingsModal } from './CustomRoadmapRatingsModal';
+import { Star } from 'lucide-react';
+
+type CustomRoadmapRatingsProps = {
+  roadmapSlug: string;
+  ratings: RoadmapDocument['ratings'];
+  canManage?: boolean;
+  unseenRatingCount: number;
+};
+
+export function CustomRoadmapRatings(props: CustomRoadmapRatingsProps) {
+  const { ratings, roadmapSlug, canManage, unseenRatingCount } = props;
+  const average = ratings?.average || 0;
+
+  const totalPeopleWhoRated = Object.keys(ratings?.breakdown || {}).reduce(
+    (acc, key) => acc + ratings?.breakdown[key as any],
+    0,
+  );
+
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+
+  return (
+    <>
+      {isDetailsOpen && (
+        <CustomRoadmapRatingsModal
+          roadmapSlug={roadmapSlug}
+          onClose={() => {
+            setIsDetailsOpen(false);
+          }}
+          ratings={ratings}
+          canManage={canManage}
+        />
+      )}
+      {average === 0 && (
+        <>
+          {!canManage && (
+            <button
+              className="flex h-[34px] items-center gap-2 rounded-md border border-gray-300 bg-white py-1 pl-2 pr-3 text-sm font-medium hover:border-black"
+              onClick={() => {
+                setIsDetailsOpen(true);
+              }}
+            >
+              <Star className="size-4 fill-yellow-400 text-yellow-400" />
+              <span className="hidden md:block">Rate this roadmap</span>
+              <span className="block md:hidden">Rate</span>
+            </button>
+          )}
+          {canManage && (
+            <span className="flex h-[34px] cursor-default items-center gap-2 rounded-md border border-gray-300 bg-white py-1 pl-2 pr-3 text-sm font-medium opacity-50">
+              <Star className="size-4 fill-yellow-400 text-yellow-400" />
+              <span className="hidden md:block">No ratings yet</span>
+              <span className="block md:hidden">Rate</span>
+            </span>
+          )}
+        </>
+      )}
+
+      {average > 0 && (
+        <button
+          className="relative flex h-[34px] items-center gap-2 rounded-md border border-gray-300 bg-white py-1 pl-2 pr-3 text-sm font-medium hover:border-black"
+          onClick={() => {
+            setIsDetailsOpen(true);
+          }}
+        >
+          {average.toFixed(1)}
+          <span className="hidden lg:block">
+            <Rating
+              starSize={16}
+              rating={average}
+              className={'pointer-events-none gap-px'}
+              readOnly
+            />
+          </span>
+          <span className="lg:hidden">
+            <Star className="size-5 fill-yellow-400 text-yellow-400" />
+          </span>
+          ({totalPeopleWhoRated})
+          {canManage && unseenRatingCount > 0 && (
+            <span className="absolute right-0 top-0 flex size-4 -translate-y-1/2 translate-x-1/2 items-center justify-center rounded-full bg-red-500 text-[10px] font-medium leading-none text-white">
+              {unseenRatingCount}
+            </span>
+          )}
+        </button>
+      )}
+    </>
+  );
+}

src/components/CustomRoadmap/CustomRoadmapRatingsModal.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { Modal } from '../Modal';
+import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
+import { RateRoadmapForm } from './RateRoadmapForm';
+import { ListRoadmapRatings } from './ListRoadmapRatings';
+
+type ActiveTab = 'ratings' | 'feedback';
+
+type CustomRoadmapRatingsModalProps = {
+  onClose: () => void;
+  roadmapSlug: string;
+  ratings: RoadmapDocument['ratings'];
+  canManage?: boolean;
+};
+
+export function CustomRoadmapRatingsModal(
+  props: CustomRoadmapRatingsModalProps,
+) {
+  const { onClose, ratings, roadmapSlug, canManage = false } = props;
+
+  const [activeTab, setActiveTab] = useState<ActiveTab>(
+    canManage ? 'feedback' : 'ratings',
+  );
+
+  const tabs: {
+    id: ActiveTab;
+    label: string;
+  }[] = [
+    {
+      id: 'ratings',
+      label: 'Ratings',
+    },
+    {
+      id: 'feedback',
+      label: 'Feedback',
+    },
+  ];
+
+  return (
+    <Modal
+      onClose={onClose}
+      bodyClassName="bg-transparent shadow-none"
+      wrapperClassName="h-auto"
+      overlayClassName="items-start md:items-center"
+    >
+      {activeTab === 'ratings' && (
+        <RateRoadmapForm
+          ratings={ratings}
+          roadmapSlug={roadmapSlug}
+          canManage={canManage}
+        />
+      )}
+      {activeTab === 'feedback' && (
+        <ListRoadmapRatings ratings={ratings} roadmapSlug={roadmapSlug} />
+      )}
+    </Modal>
+  );
+}

src/components/CustomRoadmap/ListRoadmapRatings.tsx

@@ -0,0 +1,181 @@
+import { useEffect, useState } from 'react';
+import { httpGet } from '../../lib/http';
+import { useToast } from '../../hooks/use-toast';
+import { isLoggedIn } from '../../lib/jwt';
+import { Loader2, MessageCircle, ServerCrash } from 'lucide-react';
+import { Rating } from '../Rating/Rating';
+import { Spinner } from '../ReactIcons/Spinner.tsx';
+import { getRelativeTimeString } from '../../lib/date.ts';
+import { cn } from '../../lib/classname.ts';
+import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal.tsx';
+import { Pagination } from '../Pagination/Pagination.tsx';
+
+export interface RoadmapRatingDocument {
+  _id?: string;
+  roadmapId: string;
+  userId: string;
+  rating: number;
+  feedback?: string;
+
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+type ListRoadmapRatingsResponse = {
+  data: (RoadmapRatingDocument & {
+    name: string;
+    avatar?: string;
+  })[];
+  totalCount: number;
+  totalPages: number;
+  currPage: number;
+  perPage: number;
+};
+
+type ListRoadmapRatingsProps = {
+  roadmapSlug: string;
+  ratings: RoadmapDocument['ratings'];
+};
+
+export function ListRoadmapRatings(props: ListRoadmapRatingsProps) {
+  const { roadmapSlug, ratings: ratingSummary } = props;
+
+  const totalWhoRated = Object.keys(ratingSummary.breakdown || {}).reduce(
+    (acc, key) => acc + ratingSummary.breakdown[key as any],
+    0,
+  );
+  const averageRating = ratingSummary.average;
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [ratingsResponse, setRatingsResponse] =
+    useState<ListRoadmapRatingsResponse | null>(null);
+
+  const listRoadmapRatings = async (currPage: number = 1) => {
+    setIsLoading(true);
+
+    const { response, error } = await httpGet<ListRoadmapRatingsResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-list-roadmap-ratings/${roadmapSlug}`,
+      {
+        currPage,
+      },
+    );
+
+    if (!response || error) {
+      setError(error?.message || 'Something went wrong');
+      setIsLoading(false);
+      return;
+    }
+
+    setRatingsResponse(response);
+    setError('');
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    if (!isLoggedIn()) {
+      return;
+    }
+
+    listRoadmapRatings().then();
+  }, []);
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center bg-white py-10">
+        <ServerCrash className="size-12 text-red-500" />
+        <p className="mt-3 text-lg text-red-500">{error}</p>
+      </div>
+    );
+  }
+
+  const ratings = ratingsResponse?.data || [];
+
+  return (
+    <div className="relative min-h-[100px] overflow-auto rounded-lg bg-white p-2 md:max-h-[550px]">
+      {isLoading && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <Spinner isDualRing={false} />
+        </div>
+      )}
+
+      {!isLoading && ratings.length > 0 && (
+        <div className="relative">
+          <div className="sticky top-1.5 mb-2 flex items-center justify-center gap-1 rounded-lg bg-yellow-50 px-2 py-1.5 text-sm text-yellow-900">
+            <span>
+              Rated{' '}
+              <span className="font-medium">{averageRating.toFixed(1)}</span>
+            </span>
+            <Rating starSize={15} rating={averageRating} readOnly />
+            by{' '}
+            <span className="font-medium">
+              {totalWhoRated} user{totalWhoRated > 1 && 's'}
+            </span>
+          </div>
+
+          <div className="mb-3 flex flex-col">
+            {ratings.map((rating) => {
+              const userAvatar = rating?.avatar
+                ? `${import.meta.env.PUBLIC_AVATAR_BASE_URL}/${rating.avatar}`
+                : '/images/default-avatar.png';
+
+              const isLastRating =
+                ratings[ratings.length - 1]._id === rating._id;
+
+              return (
+                <div
+                  key={rating._id}
+                  className={cn('px-2 py-2.5', {
+                    'border-b': !isLastRating,
+                  })}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-1">
+                      <img
+                        src={userAvatar}
+                        alt={rating.name}
+                        className="h-4 w-4 rounded-full"
+                      />
+                      <span className="text-sm font-medium">{rating.name}</span>
+                    </div>
+                    <span className="text-xs text-gray-400">
+                      {getRelativeTimeString(rating.createdAt)}
+                    </span>
+                  </div>
+
+                  <div className="mt-2.5">
+                    <Rating rating={rating.rating} readOnly />
+
+                    {rating.feedback && (
+                      <p className="mt-2 text-sm text-gray-500">
+                        {rating.feedback}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+
+          <Pagination
+            variant="minimal"
+            totalCount={ratingsResponse?.totalCount || 1}
+            currPage={ratingsResponse?.currPage || 1}
+            totalPages={ratingsResponse?.totalPages || 1}
+            perPage={ratingsResponse?.perPage || 1}
+            onPageChange={(page) => {
+              listRoadmapRatings(page).then();
+            }}
+          />
+        </div>
+      )}
+
+      {!isLoading && ratings.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-10">
+          <MessageCircle className="size-12 text-gray-200" />
+          <p className="mt-3 text-base text-gray-600">No Feedbacks</p>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/CustomRoadmap/RateRoadmapForm.tsx

@@ -0,0 +1,273 @@
+import { useEffect, useState } from 'react';
+import type { RoadmapDocument } from './CreateRoadmap/CreateRoadmapModal';
+import { formatCommaNumber } from '../../lib/number';
+import { Rating } from '../Rating/Rating';
+import { httpGet, httpPost } from '../../lib/http';
+import { useToast } from '../../hooks/use-toast';
+import { isLoggedIn } from '../../lib/jwt';
+import { Loader2, Star } from 'lucide-react';
+import { cn } from '../../lib/classname';
+import { showLoginPopup } from '../../lib/popup';
+import { Spinner } from '../ReactIcons/Spinner.tsx';
+
+type GetMyRoadmapRatingResponse = {
+  id?: string;
+  rating: number;
+  feedback?: string;
+};
+
+type RateRoadmapFormProps = {
+  ratings: RoadmapDocument['ratings'];
+  roadmapSlug: string;
+  canManage?: boolean;
+};
+
+export function RateRoadmapForm(props: RateRoadmapFormProps) {
+  const { ratings, canManage = false, roadmapSlug } = props;
+  const { breakdown = {}, average: _average } = ratings || {};
+  const average = _average || 0;
+
+  const ratingsKeys = [5, 4, 3, 2, 1];
+  const totalRatings = ratingsKeys.reduce(
+    (total, rating) => total + breakdown?.[rating] || 0,
+    0,
+  );
+
+  // if no rating then only show the ratings breakdown if the user can manage the roadmap
+  const showRatingsBreakdown = average > 0 || canManage;
+
+  const toast = useToast();
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const [isRatingRoadmap, setIsRatingRoadmap] = useState(!showRatingsBreakdown);
+  const [userRatingId, setUserRatingId] = useState<string | undefined>();
+  const [userRating, setUserRating] = useState(0);
+  const [userFeedback, setUserFeedback] = useState('');
+
+  const loadMyRoadmapRating = async () => {
+    // user can't have the rating for their own roadmap
+    if (canManage) {
+      setIsLoading(false);
+      return;
+    }
+
+    const { response, error } = await httpGet<GetMyRoadmapRatingResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-my-roadmap-rating/${roadmapSlug}`,
+    );
+
+    if (!response || error) {
+      toast.error(error?.message || 'Something went wrong');
+      setIsLoading(false);
+      return;
+    }
+
+    setUserRatingId(response?.id);
+    setUserRating(response?.rating);
+    setUserFeedback(response?.feedback || '');
+    setIsLoading(false);
+  };
+
+  const submitMyRoadmapRating = async () => {
+    if (userRating <= 0) {
+      toast.error('At least give it a star');
+      return;
+    }
+
+    setIsSubmitting(true);
+    const path = userRatingId
+      ? 'v1-update-custom-roadmap-rating'
+      : 'v1-rate-custom-roadmap';
+    const { response, error } = await httpPost<{
+      id: string;
+    }>(`${import.meta.env.PUBLIC_API_URL}/${path}/${roadmapSlug}`, {
+      rating: userRating,
+      feedback: userFeedback,
+    });
+
+    if (!response || error) {
+      toast.error(error?.message || 'Something went wrong');
+      setIsSubmitting(false);
+      return;
+    }
+
+    window.location.reload();
+  };
+
+  useEffect(() => {
+    if (!isLoggedIn() || !roadmapSlug) {
+      setIsLoading(false);
+      return;
+    }
+
+    loadMyRoadmapRating().then();
+  }, [roadmapSlug]);
+
+  return (
+    <div className="flex flex-col gap-3">
+      {showRatingsBreakdown && !isRatingRoadmap && (
+        <>
+          <ul className="flex flex-col gap-1 rounded-lg bg-white p-5">
+            {ratingsKeys.map((rating) => {
+              const percentage =
+                totalRatings <= 0
+                  ? 0
+                  : ((breakdown?.[rating] || 0) / totalRatings) * 100;
+
+              return (
+                <li
+                  key={`rating-${rating}`}
+                  className="flex items-center gap-2 text-sm"
+                >
+                  <span className="shrink-0">{rating} star</span>
+                  <div className="relative h-8 w-full overflow-hidden rounded-md border">
+                    <div
+                      className="h-full bg-yellow-300"
+                      style={{ width: `${percentage}%` }}
+                    ></div>
+
+                    {percentage > 0 && (
+                      <span className="absolute right-3 top-1/2 flex -translate-y-1/2 items-center justify-center text-xs text-black">
+                        {formatCommaNumber(breakdown?.[rating] || 0)}
+                      </span>
+                    )}
+                  </div>
+
+                  <span className="w-[35px] shrink-0 text-xs text-gray-500">
+                    {parseInt(`${percentage}`, 10)}%
+                  </span>
+                </li>
+              );
+            })}
+          </ul>
+        </>
+      )}
+
+      {!canManage && !isRatingRoadmap && (
+        <div className="relative min-h-[100px] rounded-lg bg-white p-4">
+          {isLoading && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <Spinner isDualRing={false} className="h-5 w-5" />
+            </div>
+          )}
+
+          {!isLoading && !isRatingRoadmap && !userRatingId && (
+            <>
+              <p className="mb-2 text-center text-sm font-medium">
+                Rate and share your thoughts with the roadmap creator.
+              </p>
+              <button
+                className="flex h-10 w-full items-center justify-center rounded-full bg-black p-2.5 text-sm font-medium text-white disabled:opacity-60"
+                onClick={() => {
+                  if (!isLoggedIn()) {
+                    showLoginPopup();
+                    return;
+                  }
+
+                  setIsRatingRoadmap(true);
+                }}
+                disabled={isLoading}
+              >
+                {isLoading ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  'Rate Roadmap'
+                )}
+              </button>
+            </>
+          )}
+
+          {!isLoading && !isRatingRoadmap && userRatingId && (
+            <div>
+              <h3 className="mb-2.5 flex items-center justify-between text-base font-semibold">
+                Your Feedback
+                <button
+                  className="ml-2 text-sm font-medium text-blue-500 underline underline-offset-2"
+                  onClick={() => {
+                    setIsRatingRoadmap(true);
+                  }}
+                >
+                  Edit Rating
+                </button>
+              </h3>
+              <div className="flex items-center gap-2">
+                <Rating rating={userRating} starSize={19} readOnly /> (
+                {userRating})
+              </div>
+              {userFeedback && <p className="mt-2 text-sm">{userFeedback}</p>}
+            </div>
+          )}
+        </div>
+      )}
+
+      {!canManage && isRatingRoadmap && (
+        <div className="rounded-lg bg-white p-5">
+          <h3 className="font-semibold">Rate this roadmap</h3>
+          <p className="mt-1 text-sm">
+            Share your thoughts with the roadmap creator.
+          </p>
+
+          <form
+            className="mt-4"
+            onSubmit={(e) => {
+              e.preventDefault();
+              submitMyRoadmapRating().then();
+            }}
+          >
+            <Rating
+              rating={userRating}
+              onRatingChange={(rating) => {
+                setUserRating(rating);
+              }}
+              starSize={32}
+            />
+            <div className="mt-3 flex flex-col gap-1">
+              <label
+                htmlFor="rating-feedback"
+                className="block text-sm font-medium"
+              >
+                Feedback to Creator{' '}
+                <span className="font-normal text-gray-400">(Optional)</span>
+              </label>
+              <textarea
+                id="rating-feedback"
+                className="min-h-24 rounded-md border p-2 text-sm outline-none focus:border-gray-500"
+                placeholder="Share your thoughts with the roadmap creator"
+                value={userFeedback}
+                onChange={(e) => {
+                  setUserFeedback(e.target.value);
+                }}
+              />
+            </div>
+
+            <div className={cn('mt-4 grid grid-cols-2 gap-1')}>
+              <button
+                className="h-10 w-full rounded-full border p-2.5 text-sm font-medium disabled:opacity-60"
+                onClick={() => {
+                  setIsRatingRoadmap(false);
+                }}
+                type="button"
+                disabled={isSubmitting}
+              >
+                Cancel
+              </button>
+              <button
+                className="flex h-10 w-full items-center justify-center rounded-full bg-black p-2.5 text-sm font-medium text-white disabled:opacity-60"
+                type="submit"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : userRatingId ? (
+                  'Update Rating'
+                ) : (
+                  'Submit Rating'
+                )}
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/CustomRoadmap/RoadmapActionButton.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
-import { Lock, MoreVertical, Shapes, Trash2 } from 'lucide-react';
+import { Lock, MoreVertical, PenSquare, Shapes, Trash2 } from 'lucide-react';
 
 type RoadmapActionButtonProps = {
   onDelete?: () => void;
@@ -32,9 +32,23 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
       {isOpen && (
         <div
           ref={menuRef}
-          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]"
+          className="align-right absolute right-0 top-full z-[9999] mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
         >
           <ul>
+            {onCustomize && (
+              <li>
+                <button
+                  onClick={() => {
+                    setIsOpen(false);
+                    onCustomize();
+                  }}
+                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                >
+                  <PenSquare size={14} className="mr-2" />
+                  Edit
+                </button>
+              </li>
+            )}
             {onUpdateSharing && (
               <li>
                 <button
@@ -49,20 +63,6 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
                 </button>
               </li>
             )}
-            {onCustomize && (
-              <li>
-                <button
-                  onClick={() => {
-                    setIsOpen(false);
-                    onCustomize();
-                  }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
-                >
-                  <Shapes size={14} className="mr-2" />
-                  Customize
-                </button>
-              </li>
-            )}
             {onDelete && (
               <li>
                 <button

src/components/CustomRoadmap/RoadmapHeader.tsx

@@ -8,11 +8,9 @@ import { httpDelete, httpPut } from '../../lib/http';
 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';
 import { ShareRoadmapButton } from '../ShareRoadmapButton.tsx';
 import { CustomRoadmapAlert } from './CustomRoadmapAlert.tsx';
+import { CustomRoadmapRatings } from './CustomRoadmapRatings.tsx';
 
 type RoadmapHeaderProps = {};
 
@@ -28,10 +26,12 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
     creator,
     team,
     visibility,
+    ratings,
+    unseenRatingCount,
+    showcaseStatus,
   } = useStore(currentRoadmap) || {};
 
   const [isSharing, setIsSharing] = useState(false);
-  const [isSharingWithOthers, setIsSharingWithOthers] = useState(false);
   const toast = useToast();
 
   async function deleteResource() {
@@ -72,23 +72,6 @@ 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"
-        roadmapSlug={roadmapSlug}
-        roadmapId={roadmapId!}
-        description={description}
-        onClose={() => setIsSharingWithOthers(false)}
-        isSharingWithOthers={true}
-      />
-    </Modal>
-  );
-
   return (
     <div className="border-b">
       <div className="container relative py-5 sm:py-12">
@@ -127,11 +110,12 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
         <div className="flex justify-between gap-2 sm:gap-0">
           <div className="flex justify-stretch gap-1 sm:gap-2">
             <a
-              href="/roadmaps"
+              href="/community"
               className="rounded-md bg-gray-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-gray-600 sm:text-sm"
               aria-label="Back to All Roadmaps"
             >
-              &larr;<span className="hidden sm:inline">&nbsp;All Roadmaps</span>
+              &larr;
+              <span className="hidden sm:inline">&nbsp;Discover more</span>
             </a>
 
             <ShareRoadmapButton
@@ -166,26 +150,13 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
                   />
                 )}
 
-                <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
+                  onUpdateSharing={() => setIsSharing(true)}
+                  onCustomize={() => {
+                    window.location.href = `${
+                      import.meta.env.PUBLIC_EDITOR_APP_URL
+                    }/${$currentRoadmap?._id}`;
+                  }}
                   onDelete={() => {
                     const confirmation = window.confirm(
                       'Are you sure you want to delete this roadmap?',
@@ -201,17 +172,13 @@ export function RoadmapHeader(props: RoadmapHeaderProps) {
               </>
             )}
 
-            {!$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>
-              </>
+            {((ratings?.average || 0) > 0 || showcaseStatus === 'visible') && (
+              <CustomRoadmapRatings
+                roadmapSlug={roadmapSlug!}
+                ratings={ratings!}
+                canManage={$canManageCurrentRoadmap}
+                unseenRatingCount={unseenRatingCount || 0}
+              />
             )}
           </div>
         </div>

src/components/CustomRoadmap/SkeletonRoadmapHeader.tsx

@@ -17,9 +17,8 @@ export function SkeletonRoadmapHeader() {
             <div className="h-7 w-[35.04px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[85px]" />
           </div>
           <div className="flex items-center gap-2">
-            <div className="h-7 w-[60.52px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[139.71px]" />
-            <div className="h-7 w-[71.48px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[100.34px]" />
-            <div className="h-7 w-[32px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[89.73px]" />
+            <div className="h-7 w-[60.52px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[92px]" />
+            <div className="h-7 w-[71.48px] animate-pulse rounded-md bg-gray-300 sm:h-8 sm:w-[139px]" />
           </div>
         </div>
 

src/components/DiscoverRoadmaps/DiscoverError.tsx

@@ -0,0 +1,21 @@
+import { ErrorIcon } from '../ReactIcons/ErrorIcon';
+
+type DiscoverErrorProps = {
+  message: string;
+};
+
+export function DiscoverError(props: DiscoverErrorProps) {
+  const { message } = props;
+
+  return (
+    <div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl border px-5 py-3 sm:px-0 sm:py-20">
+      <ErrorIcon additionalClasses="mb-4 h-8 w-8 sm:h-14 sm:w-14" />
+      <h2 className="mb-1 text-lg font-semibold sm:text-xl">
+        Oops! Something went wrong
+      </h2>
+      <p className="mb-3 text-balance text-center text-xs text-gray-800 sm:text-sm">
+        {message}
+      </p>
+    </div>
+  );
+}

src/components/DiscoverRoadmaps/DiscoverRoadmapSorting.tsx

@@ -0,0 +1,77 @@
+import { ArrowDownWideNarrow, Check, ChevronDown } from 'lucide-react';
+import { useRef, useState } from 'react';
+import { useOutsideClick } from '../../hooks/use-outside-click';
+import type { SortByValues } from './DiscoverRoadmaps';
+
+const sortingLabels: { label: string; value: SortByValues }[] = [
+  {
+    label: 'Newest',
+    value: 'createdAt',
+  },
+  {
+    label: 'Oldest',
+    value: '-createdAt',
+  },
+  {
+    label: 'Highest Rated',
+    value: 'rating',
+  },
+  {
+    label: 'Lowest Rated',
+    value: '-rating',
+  },
+];
+
+type DiscoverRoadmapSortingProps = {
+  sortBy: SortByValues;
+  onSortChange: (sortBy: SortByValues) => void;
+};
+
+export function DiscoverRoadmapSorting(props: DiscoverRoadmapSortingProps) {
+  const { sortBy, onSortChange } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  const selectedValue = sortingLabels.find((item) => item.value === sortBy);
+
+  useOutsideClick(dropdownRef, () => {
+    setIsOpen(false);
+  });
+
+  return (
+    <div
+      className="min-auto relative flex flex-shrink-0 sm:min-w-[140px]"
+      ref={dropdownRef}
+    >
+      <button
+        className="py-15 flex w-full items-center justify-between gap-2 rounded-md border px-2 text-sm bg-white"
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <span>{selectedValue?.label}</span>
+
+        <span>
+          <ChevronDown className="ml-4 h-3.5 w-3.5" />
+        </span>
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 top-10 z-10 min-w-40 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg">
+          {sortingLabels.map((item) => (
+            <button
+              key={item.value}
+              className="flex w-full items-center gap-2 px-4 py-2 text-sm hover:bg-gray-100"
+              onClick={() => {
+                onSortChange(item.value);
+                setIsOpen(false);
+              }}
+            >
+              <span>{item.label}</span>
+              {item.value === sortBy && <Check className="ml-auto h-4 w-4" />}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/components/DiscoverRoadmaps/DiscoverRoadmaps.tsx

@@ -0,0 +1,271 @@
+import { Shapes } from 'lucide-react';
+import type { ListShowcaseRoadmapResponse } from '../../api/roadmap';
+import { Pagination } from '../Pagination/Pagination';
+import { SearchRoadmap } from './SearchRoadmap';
+import { EmptyDiscoverRoadmaps } from './EmptyDiscoverRoadmaps';
+import { Rating } from '../Rating/Rating';
+import { useEffect, useState } from 'react';
+import { deleteUrlParam, getUrlParams, setUrlParams } from '../../lib/browser';
+import { LoadingRoadmaps } from '../ExploreAIRoadmap/LoadingRoadmaps';
+import { httpGet } from '../../lib/http';
+import { useToast } from '../../hooks/use-toast';
+import { DiscoverRoadmapSorting } from './DiscoverRoadmapSorting';
+import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal.tsx';
+import { Tooltip } from '../Tooltip.tsx';
+
+type DiscoverRoadmapsProps = {};
+
+export type SortByValues = 'rating' | '-rating' | 'createdAt' | '-createdAt';
+
+type QueryParams = {
+  q?: string;
+  s?: SortByValues;
+  p?: string;
+};
+
+type PageState = {
+  searchTerm: string;
+  sortBy: SortByValues;
+  currentPage: number;
+};
+
+export function DiscoverRoadmaps(props: DiscoverRoadmapsProps) {
+  const toast = useToast();
+
+  const [pageState, setPageState] = useState<PageState>({
+    searchTerm: '',
+    sortBy: 'createdAt',
+    currentPage: 0,
+  });
+  const [isLoading, setIsLoading] = useState(true);
+  const [roadmapsResponse, setRoadmapsResponse] =
+    useState<ListShowcaseRoadmapResponse | null>(null);
+
+  useEffect(() => {
+    const queryParams = getUrlParams() as QueryParams;
+
+    setPageState({
+      searchTerm: queryParams.q || '',
+      sortBy: queryParams.s || 'createdAt',
+      currentPage: +(queryParams.p || '1'),
+    });
+  }, []);
+
+  useEffect(() => {
+    setIsLoading(true);
+    if (!pageState.currentPage) {
+      return;
+    }
+
+    // only set the URL params if the user modified anything
+    if (
+      pageState.currentPage !== 1 ||
+      pageState.searchTerm !== '' ||
+      pageState.sortBy !== 'createdAt'
+    ) {
+      setUrlParams({
+        q: pageState.searchTerm,
+        s: pageState.sortBy,
+        p: String(pageState.currentPage),
+      });
+    } else {
+      deleteUrlParam('q');
+      deleteUrlParam('s');
+      deleteUrlParam('p');
+    }
+
+    loadAIRoadmaps(
+      pageState.currentPage,
+      pageState.searchTerm,
+      pageState.sortBy,
+    ).finally(() => {
+      setIsLoading(false);
+    });
+  }, [pageState]);
+
+  const loadAIRoadmaps = async (
+    currPage: number = 1,
+    searchTerm: string = '',
+    sortBy: SortByValues = 'createdAt',
+  ) => {
+    const { response, error } = await httpGet<ListShowcaseRoadmapResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-list-showcase-roadmap`,
+      {
+        currPage,
+        ...(searchTerm && { searchTerm }),
+        ...(sortBy && { sortBy }),
+      },
+    );
+
+    if (error || !response) {
+      toast.error(error?.message || 'Something went wrong');
+      return;
+    }
+
+    setRoadmapsResponse(response);
+  };
+
+  const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);
+
+  const roadmaps = roadmapsResponse?.data || [];
+
+  const loadingIndicator = isLoading && <LoadingRoadmaps />;
+
+  return (
+    <>
+      {isCreatingRoadmap && (
+        <CreateRoadmapModal
+          onClose={() => {
+            setIsCreatingRoadmap(false);
+          }}
+        />
+      )}
+
+      <div className="border-b bg-white pt-10 pb-7">
+        <div className="container text-left">
+          <div className="flex flex-col items-start bg-white">
+            <h1 className="mb-1 text-2xl font-bold sm:text-4xl">
+              Community Roadmaps
+            </h1>
+            <p className="mb-3 text-base text-gray-500">
+              An unvetted, selected list of community-curated roadmaps
+            </p>
+            <div className="relative">
+              <div className="flex flex-col sm:flex-row items-center gap-1.5">
+                <span className="group relative normal-case">
+                  <Tooltip
+                    position={'bottom-left'}
+                    additionalClass={
+                      'translate-y-0.5 bg-yellow-300 font-normal !text-black'
+                    }
+                  >
+                    Ask us to feature it once you're done!
+                  </Tooltip>
+                  <button
+                    className="rounded-md bg-black px-3.5 py-1.5 text-sm font-medium text-white transition-colors hover:bg-black"
+                    onClick={() => {
+                      setIsCreatingRoadmap(true);
+                    }}
+                  >
+                    Create your own roadmap
+                  </button>
+                </span>
+                <span className="group relative normal-case">
+                  <Tooltip
+                    position={'bottom-left'}
+                    additionalClass={
+                      'translate-y-0.5 bg-yellow-300 font-normal !text-black'
+                    }
+                  >
+                    Up-to-date and maintained by the official team
+                  </Tooltip>
+                  <a
+                    href="/roadmaps"
+                    className="inline-block rounded-md bg-gray-300 px-3.5 py-1.5 text-sm text-black sm:py-1.5 sm:text-sm"
+                  >
+                    Visit our official roadmaps
+                  </a>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="bg-gray-50 py-3">
+        <section className="container mx-auto py-3">
+          <div className="mb-3.5 flex items-stretch justify-between gap-2.5">
+            <SearchRoadmap
+              total={roadmapsResponse?.totalCount || 0}
+              value={pageState.searchTerm}
+              isLoading={isLoading}
+              onValueChange={(value) => {
+                setPageState({
+                  ...pageState,
+                  searchTerm: value,
+                  currentPage: 1,
+                });
+              }}
+            />
+
+            <DiscoverRoadmapSorting
+              sortBy={pageState.sortBy}
+              onSortChange={(sortBy) => {
+                setPageState({
+                  ...pageState,
+                  sortBy,
+                });
+              }}
+            />
+          </div>
+
+          {loadingIndicator}
+          {roadmaps.length === 0 && !isLoading && <EmptyDiscoverRoadmaps />}
+          {roadmaps.length > 0 && !isLoading && (
+            <>
+              <ul className="mb-4 grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                {roadmaps.map((roadmap) => {
+                  const roadmapLink = `/r/${roadmap.slug}`;
+                  const totalRatings = Object.keys(
+                    roadmap.ratings?.breakdown || [],
+                  ).reduce(
+                    (acc: number, key: string) =>
+                      acc + roadmap.ratings.breakdown[key as any],
+                    0,
+                  );
+                  return (
+                    <li key={roadmap._id} className="h-full min-h-[175px]">
+                      <a
+                        key={roadmap._id}
+                        href={roadmapLink}
+                        className="flex h-full flex-col rounded-lg border bg-white p-3.5 transition-colors hover:border-gray-300 hover:bg-gray-50"
+                        target={'_blank'}
+                      >
+                        <div className="grow">
+                          <h2 className="text-balance text-base font-bold leading-tight">
+                            {roadmap.title}
+                          </h2>
+                          <p className="mt-2 text-sm text-gray-500">
+                            {roadmap.description}
+                          </p>
+                        </div>
+
+                        <div className="flex items-center justify-between gap-2">
+                          <span className="flex items-center gap-1 text-xs text-gray-400">
+                            <Shapes size={15} className="inline-block" />
+                            {Intl.NumberFormat('en-US', {
+                              notation: 'compact',
+                            }).format(roadmap.topicCount)}{' '}
+                          </span>
+
+                          <Rating
+                            rating={roadmap?.ratings?.average || 0}
+                            readOnly={true}
+                            starSize={16}
+                            total={totalRatings}
+                          />
+                        </div>
+                      </a>
+                    </li>
+                  );
+                })}
+              </ul>
+
+              <Pagination
+                currPage={roadmapsResponse?.currPage || 1}
+                totalPages={roadmapsResponse?.totalPages || 1}
+                perPage={roadmapsResponse?.perPage || 0}
+                totalCount={roadmapsResponse?.totalCount || 0}
+                onPageChange={(page) => {
+                  setPageState({
+                    ...pageState,
+                    currentPage: page,
+                  });
+                }}
+              />
+            </>
+          )}
+        </section>
+      </div>
+    </>
+  );
+}

src/components/DiscoverRoadmaps/EmptyDiscoverRoadmaps.tsx

@@ -0,0 +1,53 @@
+import { Map, Wand2 } from 'lucide-react';
+import { useState } from 'react';
+import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
+
+export function EmptyDiscoverRoadmaps() {
+  const [isCreatingRoadmap, setIsCreatingRoadmap] = useState(false);
+
+  const creatingRoadmapModal = isCreatingRoadmap && (
+    <CreateRoadmapModal
+      onClose={() => setIsCreatingRoadmap(false)}
+      onCreated={(roadmap) => {
+        window.location.href = `${
+          import.meta.env.PUBLIC_EDITOR_APP_URL
+        }/${roadmap?._id}`;
+      }}
+    />
+  );
+
+  return (
+    <>
+      {creatingRoadmapModal}
+
+      <div className="flex min-h-[250px] flex-col items-center justify-center rounded-xl border px-5 py-3 sm:px-0 sm:py-20 bg-white">
+        <Map className="mb-4 h-8 w-8 opacity-10 sm:h-14 sm:w-14" />
+        <h2 className="mb-1 text-lg font-semibold sm:text-xl">
+          No Roadmaps Found
+        </h2>
+        <p className="mb-3 text-balance text-center text-xs text-gray-800 sm:text-sm">
+          Try searching for something else or create a new roadmap.
+        </p>
+        <div className="flex flex-col items-center gap-1 sm:flex-row sm:gap-1.5">
+          <button
+            className="flex w-full items-center gap-1.5 rounded-md bg-gray-900 px-3 py-1.5 text-xs text-white sm:w-auto sm:text-sm"
+            type="button"
+            onClick={() => {
+              setIsCreatingRoadmap(true);
+            }}
+          >
+            <Wand2 className="h-4 w-4" />
+            Create your Roadmap
+          </button>
+          <a
+            href="/roadmaps"
+            className="flex w-full items-center gap-1.5 rounded-md bg-gray-300 px-3 py-1.5 text-xs text-black hover:bg-gray-400 sm:w-auto sm:text-sm"
+          >
+            <Map className="h-4 w-4" />
+            Visit Official Roadmaps
+          </a>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/DiscoverRoadmaps/SearchRoadmap.tsx

@@ -0,0 +1,76 @@
+import { Search } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { useDebounceValue } from '../../hooks/use-debounce';
+import { Spinner } from '../ReactIcons/Spinner';
+
+type SearchRoadmapProps = {
+  value: string;
+  total: number;
+  isLoading: boolean;
+  onValueChange: (value: string) => void;
+};
+
+export function SearchRoadmap(props: SearchRoadmapProps) {
+  const { total, value: defaultValue, onValueChange, isLoading } = props;
+
+  const [term, setTerm] = useState(defaultValue);
+  const debouncedTerm = useDebounceValue(term, 500);
+
+  useEffect(() => {
+    setTerm(defaultValue);
+  }, [defaultValue]);
+
+  useEffect(() => {
+    if (debouncedTerm && debouncedTerm.length < 3) {
+      return;
+    }
+
+    if (debouncedTerm === defaultValue) {
+      return;
+    }
+
+    onValueChange(debouncedTerm);
+  }, [debouncedTerm]);
+
+  return (
+    <div className="relative flex w-full items-center gap-3">
+      <form
+        className="relative flex w-full max-w-[310px] items-center"
+        onSubmit={(e) => {
+          e.preventDefault();
+          onValueChange(term);
+        }}
+      >
+        <label
+          className="absolute left-3 flex h-full items-center text-gray-500"
+          htmlFor="search"
+        >
+          <Search className="h-4 w-4" />
+        </label>
+        <input
+          id="q"
+          name="q"
+          type="text"
+          minLength={3}
+          placeholder="Type 3 or more characters to search..."
+          className="w-full rounded-md border border-gray-200 px-3 py-2 pl-9 text-sm transition-colors focus:border-black focus:outline-none"
+          value={term}
+          onChange={(e) => setTerm(e.target.value)}
+        />
+        {isLoading && (
+          <span className="absolute right-3 top-0 flex h-full items-center text-gray-500">
+            <Spinner isDualRing={false} className={`h-3 w-3`} />
+          </span>
+        )}
+      </form>
+      {total > 0 && (
+        <p className="hidden flex-shrink-0 text-sm text-gray-500 sm:block">
+          {Intl.NumberFormat('en-US', {
+            notation: 'compact',
+          }).format(total)}{' '}
+          result{total > 1 ? 's' : ''} found
+        </p>
+      )}
+    </div>
+  );
+}

src/components/ExploreAIRoadmap/LoadingRoadmaps.tsx

@@ -4,7 +4,7 @@ export function LoadingRoadmaps() {
       {new Array(21).fill(0).map((_, index) => (
         <li
           key={index}
-          className="h-[95px] animate-pulse rounded-md border bg-gray-100"
+          className="h-[175px] animate-pulse rounded-md border bg-gray-200"
         />
       ))}
     </ul>

src/components/FeatureAnnouncement.tsx

@@ -1,16 +1,20 @@
 type AIAnnouncementProps = {};
 
-export function AIAnnouncement(props: AIAnnouncementProps) {
+export function FeatureAnnouncement(props: AIAnnouncementProps) {
   return (
     <a
       className="rounded-md border border-dashed border-purple-600 px-3 py-1.5 text-purple-400 transition-colors hover:border-purple-400 hover:text-purple-200"
-      href="/ai"
+      href="/community"
     >
       <span className="relative -top-[1px] mr-1 text-xs font-semibold uppercase text-white">
         New
       </span>{' '}
-      <span className={'hidden sm:inline'}>Generate visual roadmaps with AI</span>
-      <span className={'inline text-sm sm:hidden'}>AI Roadmap Generator!</span>
+      <span className={'hidden sm:inline'}>
+        Explore community made roadmaps
+      </span>
+      <span className={'inline text-sm sm:hidden'}>
+        Community roadmaps explorer!
+      </span>
     </a>
   );
 }

src/components/HeroSection/EmptyProgress.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon } from '../ReactIcons/CheckIcon';
-import { AIAnnouncement } from '../AIAnnouncement.tsx';
+import { FeatureAnnouncement } from '../FeatureAnnouncement.tsx';
 
 type EmptyProgressProps = {
   title?: string;
@@ -23,7 +23,7 @@ export function EmptyProgress(props: EmptyProgressProps) {
       <p className={'text-sm text-gray-400 sm:text-base'}>{message}</p>
 
       <p className="mt-5">
-        <AIAnnouncement />
+        <FeatureAnnouncement />
       </p>
     </div>
   );

src/components/HeroSection/HeroRoadmaps.tsx

@@ -7,7 +7,7 @@ import { MapIcon, Users2 } from 'lucide-react';
 import { CreateRoadmapButton } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapButton';
 import { CreateRoadmapModal } from '../CustomRoadmap/CreateRoadmap/CreateRoadmapModal';
 import { type ReactNode, useState } from 'react';
-import { AIAnnouncement } from '../AIAnnouncement.tsx';
+import { FeatureAnnouncement } from '../FeatureAnnouncement.tsx';
 
 type ProgressRoadmapProps = {
   url: string;
@@ -97,7 +97,7 @@ export function HeroRoadmaps(props: ProgressListProps) {
   return (
     <div className="relative pb-12 pt-4 sm:pt-7">
       <p className="mb-7 mt-2 text-sm">
-        <AIAnnouncement />
+        <FeatureAnnouncement />
       </p>
       {isCreatingRoadmap && (
         <CreateRoadmapModal

src/components/HeroSection/HeroSection.astro

@@ -1,6 +1,6 @@
 ---
 import { FavoriteRoadmaps } from './FavoriteRoadmaps';
-import { AIAnnouncement } from "../AIAnnouncement";
+import { FeatureAnnouncement } from "../FeatureAnnouncement";
 ---
 
 <div
@@ -11,7 +11,7 @@ import { AIAnnouncement } from "../AIAnnouncement";
     id='hero-text'
   >
     <p class='-mt-4 mb-7 sm:-mt-10 sm:mb-4'>
-      <AIAnnouncement />
+      <FeatureAnnouncement />
     </p>
 
     <h1

src/components/Navigation/Navigation.astro

@@ -3,6 +3,7 @@ import { Menu } from 'lucide-react';
 import Icon from '../AstroIcon.astro';
 import { NavigationDropdown } from '../NavigationDropdown';
 import { AccountDropdown } from './AccountDropdown';
+import NewIndicator from './NewIndicator.astro';
 ---
 
 <div class='bg-slate-900 py-5 text-white sm:py-8'>
@@ -17,20 +18,20 @@ import { AccountDropdown } from './AccountDropdown';
       </a>
 
       <a
-          href='/teams'
-          class='group inline sm:hidden relative !mr-2 text-blue-300 hover:text-white'
+        href='/teams'
+        class='group relative !mr-2 inline text-blue-300 hover:text-white sm:hidden'
       >
         Teams
 
         <span class='absolute -right-[11px] top-0'>
-            <span class='relative flex h-2 w-2'>
-              <span
-                  class='absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75'
-              ></span>
-              <span class='relative inline-flex h-2 w-2 rounded-full bg-sky-500'
-              ></span>
-            </span>
+          <span class='relative flex h-2 w-2'>
+            <span
+              class='absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75'
+            ></span>
+            <span class='relative inline-flex h-2 w-2 rounded-full bg-sky-500'
+            ></span>
           </span>
+        </span>
       </a>
 
       <!-- Desktop navigation items -->
@@ -39,30 +40,27 @@ import { AccountDropdown } from './AccountDropdown';
         <a href='/get-started' class='text-gray-400 hover:text-white'>
           Start Here
         </a>
-        <a 
+        <a
           href='/teams'
-          class='group relative !mr-2 text-blue-300 hover:text-white'
+          class='group relative text-gray-400 hover:text-white'
         >
           Teams
-          <span class='absolute -right-[11px] top-0'>
-            <span class='relative flex h-2 w-2'>
-              <span
-                class='absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75'
-              ></span>
-              <span class='relative inline-flex h-2 w-2 rounded-full bg-sky-500'
-              ></span>
-            </span>
-          </span>
         </a>
+        <a href='/ai' class='text-gray-400 hover:text-white'> AI</a>
         <a
-          href='/ai' class='text-gray-400 hover:text-white'> AI Roadmaps</a>
-        <button
-          data-command-menu
-          class='hidden items-center rounded-md border border-gray-800 px-2.5 py-1.5 text-sm text-gray-400 hover:cursor-pointer hover:bg-gray-800 md:flex'
+          href='/community'
+          class='group relative !mr-2 text-blue-300 hover:text-white'
         >
-          <Icon icon='search' class='h-3 w-3' />
-          <span class='ml-2'>Search</span>
-        </button>
+          Community
+          <NewIndicator />
+        </a>
+        <!--<button-->
+        <!--  data-command-menu-->
+        <!--  class='hidden items-center rounded-md border border-gray-800 px-2.5 py-1.5 text-sm text-gray-400 hover:cursor-pointer hover:bg-gray-800 md:flex'-->
+        <!--&gt;-->
+        <!--  <Icon icon='search' class='h-3 w-3' />-->
+        <!--  <span class='ml-2'>Search</span>-->
+        <!--</button>-->
       </div>
     </div>
 

src/components/Navigation/NewIndicator.astro

@@ -0,0 +1,8 @@
+<span class='absolute -right-[11px] top-0'>
+  <span class='relative flex h-2 w-2'>
+    <span
+      class='absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75'
+    ></span>
+    <span class='relative inline-flex h-2 w-2 rounded-full bg-sky-500'></span>
+  </span>
+</span>

src/components/Rating/Rating.tsx

@@ -0,0 +1,121 @@
+import { useState } from 'react';
+import { cn } from '../../lib/classname';
+
+type RatingProps = {
+  rating?: number;
+  onRatingChange?: (rating: number) => void;
+  starSize?: number;
+  readOnly?: boolean;
+  className?: string;
+  total?: number;
+};
+
+export function Rating(props: RatingProps) {
+  const {
+    rating = 0,
+    starSize,
+    className,
+    onRatingChange,
+    readOnly = false,
+  } = props;
+
+  const [stars, setStars] = useState(Number(rating.toFixed(2)));
+  const starCount = Math.floor(stars);
+  const decimalWidthPercentage = Math.min((stars - starCount) * 100, 100);
+
+  return (
+    <div className={cn('flex', className)}>
+      {[1, 2, 3, 4, 5].map((counter) => {
+        const isActive = counter <= starCount;
+        const hasDecimal = starCount + 1 === counter;
+
+        return (
+          <RatingStar
+            key={`start-${counter}`}
+            starSize={starSize}
+            widthPercentage={
+              isActive ? 100 : hasDecimal ? decimalWidthPercentage : 0
+            }
+            onClick={() => {
+              if (readOnly) {
+                return;
+              }
+              
+              setStars(counter);
+              onRatingChange?.(counter);
+            }}
+            readOnly={readOnly}
+          />
+        );
+      })}
+      {(props.total || 0) > 0 && (
+        <span className="ml-1.5 text-xs text-gray-400">
+          ({Intl.NumberFormat('en-US').format(props.total!)})
+        </span>
+      )}
+    </div>
+  );
+}
+
+type RatingStarProps = {
+  starSize?: number;
+  onClick: () => void;
+  widthPercentage?: number;
+  readOnly: boolean;
+};
+
+function RatingStar(props: RatingStarProps) {
+  const { onClick, widthPercentage = 100, starSize = 20, readOnly } = props;
+
+  return (
+    <div
+      className="relative block cursor-pointer text-gray-300 disabled:cursor-default aria-disabled:cursor-default"
+      style={{
+        width: `${starSize}px`,
+        height: `${starSize}px`,
+      }}
+      onClick={onClick}
+      aria-disabled={readOnly}
+      role="button"
+    >
+      <span className="absolute inset-0">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="fill-none"
+          style={{
+            width: `${starSize}px`,
+            height: `${starSize}px`,
+          }}
+        >
+          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+        </svg>
+        <span
+          className="absolute inset-0 overflow-hidden"
+          style={{
+            width: `${widthPercentage}%`,
+          }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="fill-yellow-400 stroke-yellow-400"
+            style={{
+              width: `${starSize}px`,
+              height: `${starSize}px`,
+            }}
+          >
+            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
+          </svg>
+        </span>
+      </span>
+    </div>
+  );
+}

src/components/RelatedRoadmaps.astro

@@ -85,7 +85,7 @@ const relatedQuestionDetails = await getQuestionGroupsByIds(relatedQuestions);
               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'>
+              <span class='inline-block min-w-[170px] font-medium'>
                 {relatedRoadmap.frontmatter.briefTitle}
               </span>
               <span class='text-gray-500'>

src/components/ShareOptions/ShareFriendList.tsx

@@ -206,11 +206,11 @@ export function ShareFriendList(props: ShareFriendListProps) {
       {friends.length === 0 && !isLoading && (
         <div className="flex h-full flex-grow flex-col items-center justify-center rounded-md border bg-gray-50 text-center">
           <Users2 className="mb-3 h-10 w-10 text-gray-300" />
-          <p className="font-semibold text-gray-500">
+          <p className="font-medium text-gray-500">
             You do not have any friends yet. <br />{' '}
             <a
               target="_blank"
-              className="underline underline-offset-2"
+              className="underline underline-offset-2 text-sm"
               href={`/account/friends`}
             >
               Invite your friends to share roadmaps with.

src/components/ShareOptions/ShareOptionsModal.tsx

@@ -403,7 +403,7 @@ function DiscoveryCheckbox(props: DiscoveryCheckboxProps) {
         onChange={(e) => setIsDiscoverable(e.target.checked)}
       />
       <span className="text-sm text-gray-500 group-hover:text-gray-700">
-        Include on discovery page (when launched)
+        Include on discovery page
       </span>
     </label>
   );

src/components/TeamsList.tsx

@@ -11,7 +11,7 @@ export function TeamsList() {
   const toast = useToast();
   async function getAllTeam() {
     const { response, error } = await httpGet<UserTeamItem[]>(
-      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-teams`
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-user-teams`,
     );
     if (error || !response) {
       toast.error(error?.message || 'Something went wrong');
@@ -36,6 +36,7 @@ export function TeamsList() {
             Here are the teams you are part of
           </p>
         </div>
+
         <ul className="mb-3 flex flex-col gap-1">
           <li>
             <a

src/components/Tooltip.tsx

@@ -3,6 +3,7 @@ import { clsx } from 'clsx';
 
 type TooltipProps = {
   children: ReactNode;
+  additionalClass?: string;
   position?:
     | 'right-center'
     | 'right-top'
@@ -19,7 +20,7 @@ type TooltipProps = {
 };
 
 export function Tooltip(props: TooltipProps) {
-  const { children, position = 'right-center' } = props;
+  const { children, additionalClass = '', position = 'right-center' } = props;
 
   let positionClass = '';
   if (position === 'right-center') {
@@ -52,7 +53,8 @@ export function Tooltip(props: TooltipProps) {
     <span
       className={clsx(
         'pointer-events-none absolute z-10 block w-max transform rounded-md bg-gray-900 px-2 py-1 text-sm font-medium text-white opacity-0 shadow-sm duration-100 group-hover:opacity-100',
-        positionClass
+        positionClass,
+        additionalClass,
       )}
     >
       {children}

src/components/TopicDetail/TopicDetail.tsx

@@ -366,7 +366,7 @@ export function TopicDetail(props: TopicDetailProps) {
                         className="flex w-full items-center justify-center rounded-md bg-gray-800 p-2 text-sm text-white transition-colors hover:bg-black hover:text-white disabled:bg-green-200 disabled:text-black"
                       >
                         <GitHubIcon className="mr-2 inline-block h-4 w-4 text-white" />
-                        Add Learning Resources
+                        Help us Improve this Content
                       </a>
                     </div>
                   )}
@@ -448,9 +448,9 @@ export function TopicDetail(props: TopicDetailProps) {
                   </div>
 
                   <p className="mb-2 mt-2 leading-relaxed">
-                    Help us improve this introduction and submit a link to a
-                    good article, podcast, video, or any other self-vetted
-                    resource that helped you understand this topic better.
+                    This popup should be a brief introductory paragraph for the topic and a few links
+                    to good articles, videos, or any other self-vetted resources. Please consider
+                    submitting a PR to improve this content.
                   </p>
                   <a
                     href={contributionUrl}
@@ -458,7 +458,7 @@ export function TopicDetail(props: TopicDetailProps) {
                     className="flex w-full items-center justify-center rounded-md bg-gray-800 p-2 text-sm text-white transition-colors hover:bg-black hover:text-white disabled:bg-green-200 disabled:text-black"
                   >
                     <GitHubIcon className="mr-2 inline-block h-4 w-4 text-white" />
-                    Add Learning Resources
+                    Help us Improve this Content
                   </a>
                 </div>
               )}

src/components/UpdateProfile/ProfileUsername.tsx

@@ -57,6 +57,8 @@ export function ProfileUsername(props: ProfileUsernameProps) {
     setIsLoading(false);
   };
 
+  const USERNAME_REGEX = /^[a-zA-Z0-9]*$/;
+
   return (
     <div className="flex w-full flex-col">
       <label
@@ -88,7 +90,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
                   href={`${import.meta.env.DEV ? 'http://localhost:3000' : 'https://roadmap.sh'}/u/${username}`}
                   target="_blank"
                   className={
-                    'ml-0.5 rounded-md border border-purple-500 px-1.5 py-0.5 text-xs font-medium text-purple-700 transition-colors hover:bg-purple-500 hover:text-purple-800 hover:text-white'
+                    'ml-0.5 rounded-md border border-purple-500 px-1.5 py-0.5 text-xs font-medium text-purple-700 transition-colors hover:bg-purple-500 hover:text-white'
                   }
                 >
                   roadmap.sh/u/{username}
@@ -117,7 +119,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
               // only allow letters, numbers
               const keyCode = e.key;
               const validKey =
-                /^[a-zA-Z0-9]*$/.test(keyCode) && username.length < 10;
+                USERNAME_REGEX.test(keyCode) && username.length <= 10;
               if (
                 !validKey &&
                 !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(
@@ -127,7 +129,13 @@ export function ProfileUsername(props: ProfileUsernameProps) {
                 e.preventDefault();
               }
             }}
-            onChange={(e) => {
+            onInput={(e) => {
+              const value = (e.target as HTMLInputElement).value?.trim();
+              const isValid = USERNAME_REGEX.test(value) && value.length <= 10;
+              if (!isValid) {
+                return;
+              }
+
               setUsername((e.target as HTMLInputElement).value.toLowerCase());
             }}
             required={profileVisibility === 'public'}

src/data/guides/backend-developer-skills.md

@@ -6,7 +6,7 @@ excludedBySlug: '/backend/developer-skills'
 seo:
   title: '8 In-Demand Backend Developer Skills to Master'
   description: 'Learn what the essential backend developer skills are that you should learn and master to advance in your career.'
-  ogImageUrl: 'https://assets.roadmap.sh/guest/backend-developer-skills-30wwu.jpg'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/backend-developer-skills-ece68.jpg'
 isNew: false
 type: 'textual'
 date: 2024-02-27
@@ -19,6 +19,8 @@ tags:
   - 'guide-sitemap'
 ---
 
+![The best backend developer skills to learn.](https://assets.roadmap.sh/guest/backend-developer-skills-ece68.jpg)
+
 Whether your goal is to become a backend developer or to stay relevant as one, the goal itself requires adopting an eternal student mindset. The ever-evolving web development space demands continuous learning, regardless of the programming language you use. New frameworks, libraries, and methodologies emerge regularly, offering different solutions to old problems. To remain relevant as a [backend developer](/backend), you’ll have to stay updated by honing your core skills.
 
 In this article, we’ll cover the following set of backend developer skills we recommend you aim for:

src/data/guides/backend-developer-tools.md

@@ -6,7 +6,7 @@ excludedBySlug: '/backend/developer-tools'
 seo:
   title: '25 Essential Backend Development Tools for @currentYear@'
   description: 'Elevate your coding with backend developer tools that bring efficiency, scalability, and innovation to your projects. Improve your development process today!'
-  ogImageUrl: 'https://assets.roadmap.sh/guest/backend-development-tools-xa6xw.jpg'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/backend-development-tools-ou6el.jpg'
 isNew: false
 type: 'textual'
 date: 2024-03-19
@@ -19,6 +19,8 @@ tags:
   - 'guide-sitemap'
 ---
 
+![Must-have backend developer tools to use.](https://assets.roadmap.sh/guest/backend-development-tools-ou6el.jpg)
+
 As developers, we’re not just writing code on a text editor without any other external help. Whether we realize it or not, we’re constantly using different development tools to improve the way we work and the speed at which we can deliver our code.
 
 In this article, we’ll cover 25 backend development tools that are crucial in the web development industry, and as a [backend developer](/backend), you should be aware of them.

src/data/guides/backend-languages.md

@@ -6,7 +6,7 @@ excludedBySlug: '/backend/languages'
 seo:
   title: 'The 5 Best Backend Development Languages to Master (@currentYear@)'
   description: 'Discover the best backend development languages to learn right now for career development, with practical tips from an experienced developer.'
-  ogImageUrl: 'https://assets.roadmap.sh/guest/backend-development-languages-78dxq.jpg'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/backend-languages-2x930.jpg'
 isNew: false
 type: 'textual'
 date: 2024-01-18
@@ -19,6 +19,8 @@ tags:
   - 'guide-sitemap'
 ---
 
+![The best backend languages to learn.](https://assets.roadmap.sh/guest/backend-languages-2x930.jpg)
+
 Web development is typically divided into two main categories: [backend development](https://roadmap.sh/backend) and [frontend development](https://roadmap.sh/frontend). Frontend development focuses on the visible part of the application for end-users, i.e. the part that users interact with, while backend development involves writing code that remains unseen but is essential for the functioning of all applications—the business logic.
 
 Two of the key components when it comes to backend development are the programming language that you are going to code in and the database. In this article, we will be looking into a subset of programming languages that could be used for backend development. We will be discussing the pros and cons of each and the community to help you pick the best programming language for backend development.
@@ -59,7 +61,7 @@ Python's versatility is evident in its applicability across a spectrum of indust
 
 So, let's talk about Django – it's like the superhero of web frameworks, at least in the world of Python. This high-level powerhouse is all about that "batteries-included" style, giving you a whole package of tools and features that make development lightning-fast. It follows the [Model-View-Controller](https://www.crio.do/blog/understand-mvc-architecture/) (MVC) architecture that gives your web applications a solid structure, making them scalable and easy to keep up.
 
-Part of that whole “batteries-included” motto means that it comes with an admin panel, an [ORM](https://www.freecodecamp.org/news/what-is-an-orm-the-meaning-of-object-relational-mapping-database-tools/) (Object-Relational Mapping) for smooth data handling, and security features that make sure your project is secured out-of-the-box. All these goodies work together, making Django a top choice for projects, whether they're a walk in the park or a brain-bending challenge.
+Part of that whole “batteries-included” motto means that it comes with an admin panel, an ORM (Object-Relational Mapping) for smooth data handling, and security features that make sure your project is secured out-of-the-box. All these goodies work together, making Django a top choice for projects, whether they're a walk in the park or a brain-bending challenge.
 
 ##### Flask
 

src/data/guides/backend-project-ideas.md

@@ -6,7 +6,7 @@ excludedBySlug: '/backend/project-ideas'
 seo:
   title: '20 Backend Project Ideas to take you from Beginner to Pro'
   description: 'Seeking backend projects to enhance your skills? Explore our top 20 project ideas, from simple apps to complex systems. Start building today!'
-  ogImageUrl: 'https://assets.roadmap.sh/guest/backend-project-ideas-ovr48.jpg'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/backend-project-ideas-zxutw.jpg'
 isNew: false
 type: 'textual'
 date: 2024-05-09
@@ -19,6 +19,8 @@ tags:
   - 'guide-sitemap'
 ---
 
+![Fresh ideas for backend projects.](https://assets.roadmap.sh/guest/backend-project-ideas-zxutw.jpg)
+
 As backend developers, showcasing our work to others is not straightforward, given that what we do is not very visible.
 
 That said, having a project portfolio, even as backend developers, it’s very important, as it can lead to new job opportunities.

src/data/guides/devops-vs-sre.md

@@ -6,7 +6,7 @@ excludedBySlug: '/devops/devops-vs-sre'
 seo:
   title: 'DevOps vs SRE: Key Differences Explained'
   description: 'DevOps vs SRE: Discover which role suits your career best. Learn key differences, skills required, and career prospects in our detailed guide.'
-  ogImageUrl: 'https://assets.roadmap.sh/guest/devops-vs-sre-ofdcy.jpg'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/devops-vs-sre1-pfhzy.jpg'
 isNew: true
 type: 'textual'
 date: 2024-06-13
@@ -19,39 +19,55 @@ tags:
   - 'guide-sitemap'
 ---
 
+![Key differences between DevOps and SRE.](https://assets.roadmap.sh/guest/devops-vs-sre1-pfhzy.jpg)
+
 When it comes to managing and enhancing software development and operations, companies often adopt sets of practices and processes such as Development Operations (DevOps) or Site Reliability Engineering (SRE). These approaches increase their ability to deliver applications scalably and maintain a fast pace.
 
-In fact, companies and individuals seeking to deliver applications and services at a higher velocity are increasingly moving away from traditional software development and infrastructure management. They achieve this by either combining selected DevOps and SRE practices or opting for one over the other.
+In fact, companies and individuals seeking to deliver applications and services at a higher velocity are increasingly moving away from traditional software development and infrastructure management. They achieve this by either combining selected [DevOps](https://roadmap.sh/devops) and SRE practices or opting for one over the other.
 
 Despite their shared goal of improving the software delivery process, some nuances set DevOps and SRE apart.
 
-This article provides an in-depth discussion of the key differences between each approach, what they entail, similarities, and the tools and technologies involved. Finally, it offers roadmaps for your DevOps or SRE journey.
+This guide provides an in-depth discussion of the key differences between each approach, what they entail, similarities, and the tools and technologies involved.Finally, it offers roadmaps for your DevOps or SRE journey.
 
 ## Differences between DevOps and SRE
 
-The main difference between [DevOps](https://roadmap.sh/devops) and SRE lies in their primary **goals**. DevOps aims to improve the software development lifecycle (SDLC), while SRE **focuses** on maintaining stability and resilience after application deployment. In addition, they also differ in **scope**, **metrics**, and **team structure**. 
+The primary difference between DevOps and SRE lies in their primary **goals**. DevOps aims to improve the software development lifecycle (SDLC), while SRE **focuses** on maintaining stability and resilience after application deployment. In addition, they also differ in **scope**, **metrics**, and **team structure**.
 
 Let’s look at these points in detail:
 
-1. **Goals:** DevOps' primary goal is to improve the (SDLC) through process automation, enhance collaboration, and promote continuous improvement. SRE aims to create easily maintained systems by automating repetitive and manual tasks, implementing monitoring and alerting systems, and designing for scale and resilience.
+![DevOps vs SRE](https://assets.roadmap.sh/guest/the-difference-between-devops-and-sre-85kpt.JPG)
 
-2. **Roles and ownership:**  In DevOps, developers, and other related stakeholders are often involved in operational tasks, sharing ownership of the entire software delivery process from development through to production. In contrast, the SRE model promotes a clear separation between development and operations. The development team is focused on building and maintaining features, while the SRE team is responsible for the reliability and availability of services.
+### Goals
 
-3. **Scope and mindset:** DevOps is typically applied to self-contained applications or services, encouraging experimentation and innovation with opportunities to learn from failures. In contrast, SRE is applied to entire systems and platforms, primarily focusing on minimizing human errors and downtime.
+DevOps engineers' primary focus is to improve the (SDLC) through process automation, enhance collaboration, and promote continuous improvement. Site Reliability Engineers aims to create easily maintained systems by automating processes,  manual and repetitive tasks, implementing monitoring and alerting systems, and designing for scale and resilience.
 
-4. **Metrics:** In measuring success, DevOps tracks metrics such as the time from code commit to deployment, deployment frequency, failure rate, and overall system performance. On the other hand, SRE focuses on metrics related to service level objectives like Mean Time to Recover (MTTR), Mean Time Between Failures (MTBF), latency, traffic, and the frequency of errors occurring in the system.
+### Roles and ownership
 
-5. **Team structure and processes:** DevOps teams work more like an Agile development team, collaborating with members across development and operations. They often break projects into smaller features and use [continuous integration(CI) and continuous delivery (CD)](https://roadmap.sh/guides/ci-cd) to prioritize delivery based on business needs.
+In DevOps culture, developers, and other related stakeholders are often involved in operational tasks, sharing ownership of the entire software delivery process from development through to production.
 
-    In contrast, SRE teams are highly specialized teams as compared to DevOps. They see the production environment as a highly available service and implement measures to address threats and failures that may arise from deployed features and integrations.
+In contrast, the SRE model promotes a clear separation between development and operations. The development team is focused on building and maintaining features, while the SRE team is responsible for the reliability and availability of services.
 
-Both DevOps and SRE aim to enhance software development and operations. DevOps primarily focuses on software development and delivery, while SRE concentrates on software operations and maintenance after deployment, emphasizing reliability and scalability strongly.
+### Scope and mindset 
+
+DevOps is typically applied to self-contained applications or services, encouraging experimentation and innovation with opportunities to learn from failures. In contrast, SRE is applied to entire systems and platforms, primarily focusing on minimizing human error and downtime for the operations teams.
+
+### Metrics
+
+In measuring success, DevOps teams track metrics such as the time from code commit to deployment, deployment frequency, failure rate, and overall system performance. On the other hand, Site Reliability Engineers focus on metrics related to service level objectives like Mean Time to Recover (MTTR), Mean Time Between Failures (MTBF), latency, traffic, and the frequency of errors occurring in the system.
+
+### Team structure and processes
+
+DevOps teams work more like an Agile development team, ensuring collaboration between development and operations teams. They often break projects into smaller features and use [continuous integration(CI) / continuous delivery (CD)](https://roadmap.sh/guides/ci-cd) to prioritize delivery based on business needs.
+
+In contrast, SRE teams are highly specialized teams as compared to DevOps. They see the production environment as a highly available service and implement measures to address threats and failures that may arise from deployed features and integrations.
+
+Both DevOps and SRE aim to enhance the software development process and operations. DevOps primarily focuses on software development and delivery, while SRE concentrates on software operations and maintenance after deployment, emphasizing reliability and scalability strongly.
 
 ## Key components of DevOps
 
-According to [Statista](https://www.statista.com/statistics/1234098/software-development-process-changes/), DevOps adoption is expected to grow, with **21% of respondents having integrated it into their source code management**. Recruiters are also actively hiring for DevOps roles, [**with demand currently at 35.5%**](https://www.statista.com/statistics/1296668/top-in-demand-tech-skills-worldwide/)**.**
+According to [Statista](https://www.statista.com/statistics/1234098/software-development-process-changes/), DevOps adoption is expected to grow, with **21% of respondents having integrated it into their source code management**. Recruiters are also actively hiring for DevOps job roles, [**with demand currently at 35.5%**](https://www.statista.com/statistics/1296668/top-in-demand-tech-skills-worldwide/)**.**
 
-One core principle of DevOps is automating manual processes within the SDLC, focusing on reducing costs and minimizing errors. In addition, DevOps embraces continuous integration, enabling companies to adapt and accommodate changes to end-users' needs or business expansions.
+One core principle of DevOps is automating manual processes within the SDLC, focusing on reducing costs and minimizing errors. In addition, DevOps embraces continuous integration, enabling companies to adapt and accommodate changes to end-users' needs or business requirements.
 
 The following are key aspects of DevOps:
 
@@ -59,43 +75,53 @@ The following are key aspects of DevOps:
 
 One of the fundamental principles of DevOps is to facilitate faster release cycles for software. This is achieved by continuously integrating code into a repository and automatically deploying it to the required environment.
 
+![ci/cd](https://assets.roadmap.sh/guest/cicd-xrwy2.JPG)
+
 ### Automation
 
 Development processes such as testing, deployment, and infrastructural provisioning can be tedious, error-prone, and manual. DevOps addresses these challenges through automation.
 
+![automation](https://assets.roadmap.sh/guest/automation-mdtdr.jpeg)
+
 ### Monitoring
 
-Monitoring application performance, health, availability, and customer experience are some of the key principles of DevOps. With this capability, companies can identify issues quickly, iterate on solutions, and continuously improve.
+Proactive monitoring of application performance, health, availability, and customer experience are some of the key principles of DevOps. With this capability, companies can identify issues quickly, iterate on solutions, and continuously improve.
+
+![metric](https://assets.roadmap.sh/guest/monitoring-uyfmx.jpeg)
 
 ### Collaboration and communication
 
-The overall goal of shipping secure and reliable software involves stakeholders like the developments, operations, and other relevant teams to adhere to DevOps practices of collaborating and actively communicating throughout the SDLC.
+The overall goal of shipping secure and reliable software involves stakeholders like the development teams, operations teams, and other relevant teams to adhere to DevOps practices of collaborating and actively communicating throughout the SDLC.
+
+![collaboration & communication](https://assets.roadmap.sh/guest/collaboration-t3wa1.jpeg)
 
 ### Infrastructure as Code
 
 Using scripts or declarative definitions to provision and configure infrastructure is a key component in DevOps. This approach enables teams to be consistent, efficiently manage resources, and reproduce environment-specific bugs.
 
+![iac](https://assets.roadmap.sh/guest/infrastructure-as-code-gj75w.jpeg)
+
 ### Continuous learning and improvement
 
 In DevOps, teams are encouraged to share knowledge across teams, conduct service failure postmortem, and experiment with new ideas and potential solutions.
 
 ## Key components of SRE
 
-SRE can function as a tool, a set of best practices, or a strategy to automate IT operations tasks such as production system management, change management, and incident response. It empowers system administrators to manage large systems using code rather than manual methods.
+Site Reliability Engineering can function as a tool, a set of best practices, or a strategy to automate IT operations tasks such as production system management, change management, and incident response. It empowers system administrators to manage large systems using code rather than manual methods.
 
 The following are the key aspects of SRE:
 
 ### Automation
 
-One key principle followed by SRE is establishing a workflow to reduce manual and repetitive work related to operational tasks.
+One key principle followed by Site Reliability Engineering is establishing a workflow to reduce manual and repetitive work related to operational tasks. SRE ensures that every team member has access to updated automation tools and technologies.
 
 ### Monitoring and alerting
 
-A core principle of SRE is using real-time monitored metrics and alerts to detect and respond to issues promptly. With these systems in place, SRE teams can diagnose and resolve potential issues before they impact the system.
+A core principle of SRE is using real-time monitored metrics and alerts to detect and respond to issues promptly before they impact the development teams and end users. With these systems in place, SRE teams can diagnose and resolve potential issues before they impact the system.
 
 ### Forecast and planning
 
-Due to user traffic and workload, systems can experience increased demand and heavy resource usage. SRE implements measures to ensure that such demand is properly handled by forecasting resources and managing related infrastructure.
+Due to user traffic and workload, systems can experience increased demand and heavy resource usage. Site Reliability Engineering implements measures to ensure that such demand is properly handled by forecasting resources and managing related infrastructure.
 
 ### Incident management
 
@@ -103,64 +129,67 @@ SRE teams define clear processes for detecting, diagnosing, and resolving incide
 
 ### Service Level Objectives (SLOs)
 
-SRE aims to deliver higher availability percentages, uptime, and other metrics such as error rates and response time to system customers or users.
+Site Reliability Engineering aims to deliver higher availability percentages, uptime, and other metrics such as error rates and response time to system customers or users.
+
+These processes help software developers build and deliver software more efficiently. 
 
 ## Similarities between DevOps and SRE
+![Similarities](https://assets.roadmap.sh/guest/similarities-devops-sre-eqa7p.jpeg)
 
 DevOps and SRE principles have become popular and widely adopted by organizations because they create robust and bug-free systems with continuous improvement in mind. Below are some key similarities between DevOps and SRE:
 
-- Both advocate automating repetitive tasks like testing, deployment, monitoring, etc.
-- They promote the use of CI and CD for software releases
-- There is a strong emphasis on real-time monitoring and collection of metrics for diagnosis and performance monitoring
-- Both focus on collaboration and encourage a culture of continuous learning and improvement
-- They prioritize building systems with a great user experience, quick recovery from disruptions, and reliability.
+- Both advocate automating repetitive tasks like continuous testing, deployment, monitoring, etc.
+- They promote the use of CI and CD for software releases.
+- There is a strong emphasis on real-time monitoring and collection of metrics for diagnosis and performance monitoring.
+- Both focus on reducing organizational silos through collaboration and encourage a culture of continuous learning and improvement.
+- They prioritize building reliable systems with a great user experience, quick recovery from disruptions, reliability, and effective operations lifecycle management.
 
 ## What is the role of a DevOps engineer?
 
-[DevOps engineers](https://roadmap.sh/devops) are integral to any organization looking to bridge the gap between development and operations. They collaborate closely with developers, quality assurance teams, and other stakeholders to achieve this goal.  Here are some key responsibilities of a DevOps engineer:
+[DevOps engineers](https://roadmap.sh/devops) are integral to any organization looking to bridge the gap between development and operations teams. They collaborate closely with software engineers,  quality assurance teams, and other stakeholders to achieve this goal.  Here are some key responsibilities of a DevOps engineer:
 
-- Adopts the agile methodology and automation to remove bottlenecks in the SDLC
-- Set up monitoring and logging mechanisms to track the performance, availability, and health of systems
-- Provision resources, deploy, and manage applications on cloud platforms like [AWS](https://roadmap.sh/aws), Azure, Google Cloud, etc
-- Creates standards and manages configuration to enforce and maintain system integrity across multiple environments
-- Creates a plan to optimize system performance and resource utilization
-- Promotes knowledge sharing by carefully documenting processes, procedures, and best practices 
+- Adopts the agile methodology and automation to remove bottlenecks in the SDLC.
+- Set up monitoring and logging mechanisms to track the performance, availability, and health of systems.
+- Provision resources, deploy, and manage applications on cloud platforms like [AWS](https://roadmap.sh/aws), Azure, Google Cloud, etc.
+- Creates standards and manages configuration to enforce and maintain system integrity across multiple environments.
+- Creates a plan to optimize system performance and resource utilization.
+- Promotes knowledge sharing by carefully documenting processes, procedures, and best practices.
 
-To perform these responsibilities, the DevOps team uses many tools to automate and improve their workflow. Here are some of the tools commonly used:
+To perform these responsibilities, the DevOps team uses many tools to automate and improve their workflow. Here are some of the DevOps tools commonly used:
 
-- **Docker:** [Docker](https://roadmap.sh/docker) is an open-source platform that enables developers to build, deploy, and run containerized applications.
-- **Kubernetes:** [Kubernetes](https://roadmap.sh/kubernetes) is an open-source orchestration platform for automating the deployment, scaling, and managing containerized applications
-- **Jenkins:** Jenkins is an automation server used for performing CI and CD in a software project
-- **Git:** Git is a distributed version control system for tracking changes in source code during development
-- **Prometheus:** Prometheus is an open-source application for event monitoring and alerting.
-- **Grafana:** Grafana is an open-source analytics and visualization application
-- **Ansible:** Ansible is an open-source engine for automating resource provision, configuration management, application deployment, and other IT-related tasks
+- **Docker**: [Docker](https://roadmap.sh/docker) is an open-source platform that enables developers to build, deploy, and run containerized applications.
+- **Kubernetes**: [Kubernetes](https://roadmap.sh/kubernetes) is an open-source orchestration platform for automating the deployment processes, scaling, and managing containerized applications.
+- **Jenkins**: Jenkins is an automation server used for performing CI and CD in a software project.
+- **Git**: Git is a distributed version control system for tracking changes in source code during software development.
+- **Prometheus**: Prometheus is an open-source application for event monitoring and alerting.
+- **Grafana**: Grafana is an open-source analytics and visualization application that helps identify issues and improve the performance of software systems.
+- **Ansible**: Ansible is an open-source engine for automating resource provision, configuration management, application deployment, and other IT-related tasks.
 
 ## What is the role of an SRE engineer?
 
-Similar to the DevOps team, SRE engineers are also an integral part of any organization looking to build systems and services that are reliable, available, scalable, and performant.  Here are some key responsibilities of an SRE engineer:
+Similar to the DevOps engineers, SRE engineers are also an integral part of any organization looking to build systems and services that are reliable, available, scalable, and performant. SREs have a narrow focus on specific practices and metrics that allow for improved collaboration and service delivery. Here are some key responsibilities of an SRE engineer:
 
-- Responsible for maintaining and ensuring system reliability and uptime
-- Collaborate with the development team to design and architect applications
-- Automate tasks by developing tools and scripts for deployment, alerting, and incident response
-- Analyze and plan resources to cater for future growth and scale
-- Creates plans to mitigate or eliminate events or system failures
-- Promotes knowledge sharing by documenting system configuration, procedures, and best practices
+- Responsible for maintaining and ensuring system reliability and uptime.
+- Collaborate with the development team to design and architect applications.
+- Automate tasks by developing tools and scripts for deployment, alerting, and incident response.
+- Analyze and plan resources to cater for future growth and scale.
+- Creates plans to mitigate or eliminate events or system failures.
+- Promotes knowledge sharing by documenting system configuration, procedures, and best practices.
 
 To perform these responsibilities, the SRE team uses various tools to tackle infrastructure and operational problems. Here are some of the tools commonly used:
 
-- **Kibana:** Kibana is an open-source data visualization platform for monitoring metrics and events
-- **Datadog:** Datadog is a cloud monitoring tool for events, infrastructure hosts, and much more
-- **NetApp Cloud Insights:** NetApp Cloud Insights is a tool used to monitor IT infrastructure 
-- **Terraform:** Terraform is an infrastructure as code tool used to automate infrastructure tasks
-- **Ansible:** Ansible is an open-source engine for automating resource provision, configuration management, application deployment, and other IT-related tasks
-- **New Relic:** New Relic is a cloud-based full-stack observability platform for monitoring and analyzing metrics
-- **Opsgenie:** Opsgenie is an incident response solution with functionalities like on-call scheduling, reporting, analytics, and alerting
+- **Kibana**: Kibana is an open-source data visualization platform for monitoring metrics and events
+- **Datadog**: Datadog is a cloud monitoring tool for events, infrastructure hosts, and much more
+- **NetApp Cloud Insights**: NetApp Cloud Insights is a tool used to monitor IT infrastructure 
+- **Terraform**: Terraform is an infrastructure as code tool used to automate infrastructure tasks
+- **Ansible**: Ansible is an open-source engine for automating resource provision, configuration management, application deployment, and other IT-related tasks
+- **New Relic**: New Relic is a cloud-based full-stack observability platform for monitoring and analyzing metrics
+- **Opsgenie**: Opsgenie is an incident response solution with functionalities like on-call scheduling, reporting, analytics, and alerting
 
-In summary, DevOps focuses on developing and delivering software, and SRE works on the deployed software to ensure it functions as intended and is reliable. They both have similarities and differences that organizations actively adopt when building and maintaining scalable applications.
+In summary, [DevOps](https://roadmap.sh/devops) focuses on developing and delivering software, and SRE works on the deployed software to ensure it functions as intended and is reliable. They both have similarities and differences that organizations actively adopt when building and maintaining scalable applications.
 
 Whether you're an experienced developer aiming to improve your skills or a beginner exploring a career as a DevOps or SRE engineer, you might have seen tons of resources available online and maybe get overwhelmed without a clear path on the way to go. Well, not anymore, roadmap.sh provides a comprehensive guide on any of the career paths you choose to follow. You will be able to:
 
-- Stay updated with a new roadmap, track your progress, and share it on your roadmap.sh profile
-- Learn with like-minded individuals by joining a supportive community when you [sign up](https://roadmap.sh/signup) on roadmap.sh platform
-- [Generate a new roadmap](https://roadmap.sh/ai) with AI.
+- Stay updated with a new roadmap, track your progress, and share it on your roadmap.sh profile.
+- Learn with like-minded individuals by joining a supportive community when you [sign up](https://roadmap.sh/signup) on roadmap.sh platform.
+- [Generate a new roadmap with AI](https://roadmap.sh/ai).

src/data/guides/frontend-developer-skills.md

@@ -19,7 +19,7 @@ tags:
   - 'guide-sitemap'
 ---
 
-![12 In-Demand Front End Developer Skills to Master](https://assets.roadmap.sh/guest/frontend-developer-skills-zdpyd.jpg)
+![The best frontend developer skills to learn.](https://assets.roadmap.sh/guest/frontend-developer-skills-zdpyd.jpg)
 
 Front end development is probably one of the most dynamic fields in our industry, it’s constantly forcing developers to stay up-to-date with the latest trends and technologies. Either by learning about new frameworks or libraries, or simply by making them choose between their current stack and the hot new framework released every other month.
 

src/data/guides/frontend-languages.md

@@ -6,7 +6,7 @@ excludedBySlug: '/frontend/languages'
 seo:
   title: 'What Front End Programming Languages Should You Learn?'
   description: 'Get ahead in web development. Discover the essential frontend languages every pro developer uses!'
-  ogImageUrl: 'https://assets.roadmap.sh/guest/best-front-end-languages-exm6g.jpg'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/best-front-end-languages-gzngm.png'
 isNew: false
 type: 'textual'
 date: 2024-05-02
@@ -19,96 +19,221 @@ tags:
   - 'guide-sitemap'
 ---
 
+![The best frontend languages to learn.](https://assets.roadmap.sh/guest/best-front-end-languages-gzngm.png)
+
 Just starting out in web or mobile development? You may feel swamped by all the programming languages, libraries, and frameworks. With new options popping up daily, it's easy to get overwhelmed. This guide will help you navigate that initial confusion.
 
 As someone who's been through this process for over a decade, I’ve made this post to make your learning journey smoother.
 
-I'll focus on the essential front-end languages, libraries, and frameworks, equipping you with the knowledge you need to make informed decisions, a roadmap to help you focus on the right skills, and build a rewarding career in front-end development.
+I'll focus on the essential front-end languages and recommend a few important frameworks and libraries. This will equip you with the knowledge needed to make informed decisions, provide a roadmap to help you focus on the right skills, and help you build a rewarding career in [front](https://roadmap.sh/frontend)[-](https://roadmap.sh/frontend)[end](https://roadmap.sh/frontend) [development](https://roadmap.sh/frontend).
 
+## What are Languages, Libraries, and Frameworks?
 
-## Top front-end programming languages to learn in 2024
+Before we explore the front end languages, libraries, and frameworks to learn in 2024, it is important to understand what they are and the differences between them.
 
-Here are the front-end programming languages you should learn in 2024.
+**Languages**
+Languages are the core programming languages that developers use to write code. They have defined syntax, semantics, and rules for writing instructions that computers can execute and understand. Examples include: 
 
-For web front-end development:
+- JavaScript
+- TypeScript
+- Dart
+- Kotlin
+
+**Libraries**
+Libraries are collections of pre-written code that developers can use to perform specific tasks. They save time and improve productivity because developers don’t have to write code from scratch. Libraries extend the functionality of a programming language by providing functions, methods, and classes that can be imported and used. Examples include:
+
+- React
+- Anime.js
+- Chart.js
+- JQuery
+
+**Frameworks**
+Frameworks are more comprehensive than libraries as they provide a structure or skeleton with sets of rules for building applications. They enforce architecture and offer tools, libraries, and components to streamline developments. Examples include:
+
+- Vue
+- Angular
+- Flutter
+
+The major differences are that languages are used to write code, libraries provide reusable functions, and frameworks offer a structured approach to developing applications.
+
+## Top front-end languages to learn in 2024
+
+![frontend languages](https://assets.roadmap.sh/guest/top-frontend-languages-to-learn-pofrf.JPG)
+
+These are the best front-end languages you should learn in 2024: 
+
+**For web front-end development**:
 
 - HyperText Markup Language (HTML)
-- Cascading Style Sheet (CSS)
+- Cascading Style Sheets (CSS)
 - JavaScript
 - TypeScript
 
-For mobile front-end development:
+**For mobile front-end development**:
 
 - Dart
 - Swift
 - Kotlin
 
-## Front-end programming languages for web development
-
-Web development involves building websites, web applications, and web services that users interact with through web browsers. Front-end development focuses on the user interface (UI) and user experience (UX) aspects of web applications, ensuring that the content is visually appealing, interactive, and responsive.
-
 ### HyperText Markup Language (HTML)
-HTML serves as the backbone for building all web pages. It defines the structure and layout of content within a web browser, allowing for the display of text, images, videos, and more that users interact with. HTML is beginner-friendly, supported across multiple browsers, and fundamental to web development.
 
-HTML depends on languages like CSS and JavaScript to achieve full functionality, and it is mostly limited to web-based projects.
+![HTML HyperText Markup Language](https://assets.roadmap.sh/guest/html-bmvj9.png)
 
-### Cascading Style Sheet (CSS)
+HTML is the standard markup language for creating web pages. It defines the structure and layout of content within a web browser, allowing for the display of text, images, videos, and more that users interact with. HTML is beginner-friendly, supported across multiple browsers, and fundamental to web development. 
+
+HTML depends on languages like CSS and JavaScript to achieve full functionality, and it is mostly limited to web-based projects. Beyond being the backbone of web applications, it also plays an integral role in improving application accessibility, enhancing search engine optimization (SEO), and enabling assistive technologies to interpret and present content accurately.
+
+**Why is it important**
+
+- HTML is the foundational language for creating web pages. 
+- It defines the structure and content of the web pages.
+- It is widely accepted and quick to grasp.
+
+**Why you should learn it**
+
+- It is the starting point of anything web development.
+- It is the foundation for structuring content effectively.
+- Required for creating or understanding web content.
+- It is easy to test and debug.
+
+### Cascading Style Sheets (CSS)
+
+![CSS](https://assets.roadmap.sh/guest/css-logo-u45d6.png)
 
 CSS plays a crucial role in determining the appearance and organization of web content. When used in conjunction with HTML, it enhances the appearance and layout of web pages, enabling the creation of responsive designs that adapt to various screen sizes. CSS handles colors, fonts, spacing, and more, allowing developers to create visually appealing user interfaces.
 
-CSS has powerful styling options, is easy to start with, and has a great ecosystem of libraries and frameworks like Tailwind CSS, Bootstrap, Foundation, etc., to build aesthetically pleasing user interfaces.
+Despite advancements in web technologies, CSS remains a powerful styling tool that is easy to start with. It has a robust ecosystem of libraries and frameworks, such as Tailwind CSS, Bootstrap, and Foundation, which facilitate the creation of aesthetically pleasing user interfaces.
 
-CSS can present inconsistent designs, as browsers may interpret it differently. Additionally, managing CSS in a large project can be difficult, as there are no strict rules for writing it.
+**Why is it important**
+
+- It is crucial for styling and visually enhancing web pages.
+- It controls the overall appearance of the web by defining layouts, colors, and fonts.
+- It promotes consistency across platforms.
+
+**Why you should learn it**
+
+- It is an integral skill for front-end developers.
+- It helps you improve the application’s user experience (UX).
+- It enables the creation of visually appealing applications and websites.
 
 ### JavaScript
 
-[JavaScript](https://roadmap.sh/javascript) is a versatile programming language used in conjunction with HTML and CSS to enhance the interaction of web pages. With features like excellent speed and cross-browser compatibility, JavaScript enables developers to add dynamic elements such as content updates, animations, 2D/3D graphics, and other interactive features to web applications.
+![JavaScript](https://assets.roadmap.sh/guest/javascript-logo-vf4vv.png)
+
+JavaScript is a versatile front end language used in conjunction with HTML and CSS to enhance the interaction of web pages. With features like excellent speed and cross-browser compatibility, JavaScript enables developers to add dynamic elements such as form validation, animations, 2D/3D graphics, dynamic updates to web pages without requiring a page refresh, and other interactive features to web applications. 
 
 JavaScript is essential for web development and has a vast ecosystem of libraries and frameworks for building applications across multiple platforms.
 
 JavaScript implementation varies across different browsers, creating vulnerabilities for users. They may face threats such as unauthorized data access and system manipulation by injecting malicious code. Additionally, if JavaScript is disabled in a browser, certain features and functionality might not work, adversely affecting the user experience.
 
+**Why is it important**
+
+- It is a versatile scripting language for adding interaction and dynamism to web content.
+- It is widely supported by all modern web browsers.
+- Seamlessly integrate with other languages.
+
+**Why you should learn it**
+
+- It is essential for creating interactive web pages
+- Beyond the web, you can use it for mobile app and server-side development.
+- Foundation for various libraries and frameworks across all platforms.
+
+Want to get started with JavaScript or expand your current skills? [You can explore the complete JavaScript roadmap](https://roadmap.sh/javascript).
+
 ### TypeScript
 
-[TypeScript](https://roadmap.sh/typescript) is a robust and widely used programming language developed by Microsoft, which extends JavaScript by adding static typing and other advanced features. TypeScript code transpiles to JavaScript and can run seamlessly wherever JavaScript runs, making it a highly versatile programming language for front-end development.
+![TypeScript](https://assets.roadmap.sh/guest/image3-y7ryl.png)
 
-TypeScript enhances your developer experience by identifying errors during development and providing fixes, speeding up the development process.
+TypeScript is a robust and widely used front end language developed by Microsoft, which extends JavaScript by adding static typing and other advanced features. TypeScript code transpiles to JavaScript and can run seamlessly wherever JavaScript runs, making it a highly versatile programming language for front-end development.
 
-TypeScript has a steeper learning curve than JavaScript, and it reduces development speed because an additional compilation step is required.
+Web developers love TypeScript because it enhances their experience by identifying runtime errors during development and providing fixes, speeding up the development process.
 
-## Front-end programming languages for mobile development
+TypeScript has a steeper learning curve than JavaScript, and it reduces development speed because an additional compilation step is required. 
 
-Mobile development involves building applications for mobile devices such as smartphones and tablets. Front-end development for mobile applications focuses on creating user interfaces that are optimized for mobile platforms, ensuring a seamless user experience.
+**Why is it important**
+
+- Adds static types to your codebase.
+- Makes it easy to write and maintain large-scale applications.
+- Improves code quality as errors catch early.
+
+**Why you should learn it**
+
+- Increasingly adopted for building enterprise-level applications.
+- Enhances JavaScript with type safety and modern features
+
+Want to get started with TypeScript or expand your current skills? [You can explore the complete TypeScript roadmap](https://roadmap.sh/typescript).
 
 ### Dart
 
-Dart is a powerful, multi-purpose programming language designed for building high-quality applications on various platforms. It offers features such as sound null safety, object-oriented programming (OOP), pattern matching, and more, enabling developers to build and model robust software.
+![Dart](https://assets.roadmap.sh/guest/dart-logo-1yr28.png)
 
-Dart is the primary language for [Flutter](https://roadmap.sh/flutter), enabling compilation to native code and providing portability and speed for building applications across web and mobile platforms using a single codebase.
+Dart is a powerful, multi-purpose, and modern programming language designed for building high-quality applications on various platforms. It offers features such as sound null safety, object-oriented programming (OOP), pattern matching, and more, enabling developers to build and model robust software.
 
-Dart is strongly integrated with the Flutter framework, which may limit its support and resources outside of the framework. moreover, Dart has limited adoption compared to other programming languages, restricting its usage in other domains.
+Dart is the primary language for [Flutter](https://roadmap.sh/flutter), a cross-platform runtime environment that enables compilation to native code. Flutter provides portability and speed for building applications across web and mobile platforms using a single codebase.
+
+Dart is strongly integrated with the Flutter framework, which may limit its support and resources outside of the framework. Moreover, Dart has limited adoption compared to other front end languages, restricting its usage in other domains.
+
+**Why is it important**
+
+- It is optimized for web, mobile, and server applications.
+- It has a smooth developer experience and fast performance.
+
+**Why you should learn it**
+
+- It enables cross-platform development from a single codebase.
+- Gaining popularity and is widely adopted due to Flutter (Google’s UI Kit).
 
 ### Swift
 
-Swift is a high-level, multi-paradigm, compiled programming language developed for all Apple platforms. It was released in 2014 to replace Apple’s earlier programming language, Objective-C. Swift is known for its speed, modernity, and safety, making it ideal for building iOS (mobile) applications, macOS (desktop), and other Apple platforms.
+![Swift](https://assets.roadmap.sh/guest/swift-logo-5vk0f.jpg)
 
-Swift is fast, secure, and has a smaller memory footprint due to its standard libraries being integrated by default.
+Swift is a high-level, multi-paradigm, compiled programming language developed for all Apple platforms. It was released in 2014 to replace Apple’s earlier programming language, Objective-C. Swift is known for its speed, modernity, and safety, making it ideal for building iOS (mobile apps), macOS (desktop), and other Apple platforms.
+
+Swift is a fast, secure, and versatile language that offers automatic memory management and a smaller memory footprint due to its integrated standard libraries.
+
+Swift is primarily designed to support Apple's operating systems and has limited support for cross-platform development.
+
+**Why is it important**
+
+- It is the main language for iOS development.
+- It offers modern features, safety, and performance.
+
+**Why you should learn it**
+
+- It is essential for developing applications within Apple’s ecosystem.
+- Relatively easy to learn and use, yet powerful for professional native development.
 
-Swift is primarily designed to support the Apple platform and has limited support for cross-platform development.
 
 ### Kotlin
 
-Kotlin is a cross-platform, statically typed, general-purpose programming language renowned for building robust and scalable applications. It serves as Google’s preferred language for Android app development. Initially released in July 2011, Kotlin has rapidly expanded its adoption beyond mobile app development. It is now employed for server-side, full stack, and data science applications.
+![Kotlin](https://assets.roadmap.sh/guest/kotlin-logo-0fbjy.png)
 
-Kotlin is based on Java but with enhanced capabilities, reliability, and ease of maintenance. It is the go-to language for developing modern Android applications and is backed by major organizations.
+Kotlin is a cross-platform, statically typed, general-purpose programming language renowned for building robust and scalable applications. It serves as Google’s preferred language for Android app development. Initially released in July 2011, Kotlin has rapidly expanded its adoption beyond mobile app development. Thanks to its modern syntax and elegant design, it is now employed for server-side, full-stack, and data science applications.
+
+Kotlin draws inspiration from multiple programming languages, combining the best aspects of each. Based on Java but with enhanced capabilities, reliability, and ease of maintenance, Kotlin is the go-to language for developing modern Android applications and is backed by major organizations.
 
 However, it’s worth noting that compared to Java, job opportunities and adoption of Kotlin across software development are limited.
 
+**Why is it important**
+
+- It is the preferred language for Android app development.
+- It offers modern features, safety, and performance.
+
+**Why you should learn it**
+
+- It is becoming the standard for Android development.
+- It is concise, safe, and compatible with existing Java codes.
+- Can be used for both Android and server-side development.
+
+The table below shows a quick summary of each language’s use cases as a front end language.
+
+![use cases](https://assets.roadmap.sh/guest/use-cases-qwm5k.JPG)
+
 ## Top front-end frameworks and libraries to learn in 2024
 
-While programming languages are essential for creating robust applications that meet business needs, they can become burdensome when developing medium to large applications. Issues like lack of code reusability, maintainability challenges, time-consuming development, and repetition may arise.
+While front end languages are essential for creating robust applications that meet business needs, they can become burdensome when developing medium to large applications. Issues like lack of code reusability, maintainability challenges, time-consuming development, and repetition may arise.
 
-Frameworks and libraries offer a solution by providing a structured approach to application development. They offer pre-written code, reusable functions, coding standards, and architectural patterns that developers can leverage for common tasks, thus saving time and effort. Additionally, frameworks often have built-in security, scalability, and performance optimization features, enhancing overall software quality.
+Frameworks and libraries offer a solution by providing a structured approach to application development. They include pre-written code, reusable functions, coding standards, and architectural patterns that developers can leverage for common tasks, saving time and effort. Additionally, frameworks often have built-in security features that help JavaScript code execute safely on users' computers. They also enhance scalability and performance optimization, improving overall software quality.
 
 You should explore these frontend frameworks and libraries in 2024:
 
@@ -124,25 +249,31 @@ You should explore these frontend frameworks and libraries in 2024:
 
 ### React
 
-[React](https://roadmap.sh/react) is a widely adopted JavaScript library developed by Meta and a vibrant community of individual contributors. It empowers developers to construct interfaces by assembling individual pieces known as components. React provides a reusable modular architecture through reusable components and a sophisticated rendering engine, facilitating the creation and management of small- to large applications.
+React is a widely adopted JavaScript library developed by Meta and a vibrant community of individual contributors. It empowers developers to construct interactive user interfaces by assembling individual pieces known as components. React provides a reusable modular architecture through reusable components and a sophisticated rendering engine, facilitating the creation and management of small-to-large applications.
 
-Over the years, React has undergone technological advancements and has become the foundation for various frameworks such as Next.js, Gatsby, and Remix. These frameworks build upon React's core capabilities, offering additional features and functionalities to streamline the development of web applications.
+Over the years, React has undergone technological advancements and has become the foundation for various frameworks such as Next.js, Gatsby, and Remix. These frameworks build upon React's core capabilities, offering additional features and functionalities to streamline frontend development.
+
+You can learn more details by exploring the [React roadmap](https://roadmap.sh/react).
 
 ### Vue
 
-[Vue](https://roadmap.sh/vue) is a JavaScript framework designed for developing user interfaces, leveraging the model-view-view model (MVVM) architecture to separate the user interface from the application's business logic. Vue extends HTML elements to facilitate the creation of reusable code components. It provides several built-in features, including templating, reactivity, and transitions. Additionally, Vue offers support for various libraries, making it suitable for developing applications like Single-Page Applications (SPAs), desktop and mobile applications of various scales, from small projects to large enterprise applications.
+Vue is a progressive JavaScript framework designed for developing interactive web applications, leveraging the model-view-view model (MVVM) architecture to separate the user interface from the application's business logic. Vue extends HTML elements to facilitate the creation of reusable code components. It provides several built-in features, including templating, reactivity, and transitions. Additionally, Vue offers support for various libraries, making it suitable for developing applications like Single-Page Applications (SPAs), desktop and mobile applications of various scales, from small projects to large enterprise applications. 
 
-Vue has also become the foundation of frameworks like Nuxt.js, VuePress, and Vuetify, offering pre-built components, server-side rendering, themes, and much more for building complex websites and applications.
+Vue has also become the foundation of frameworks like Nuxt.js, VuePress, and Vuetify, offering pre-built components, server-side rendering, themes, and much more for building complex websites and applications. Its gentle learning curve makes it a popular choice for beginners starting front-end development.
+
+You can learn more details by exploring the [Vue roadmap](https://roadmap.sh/vue).
 
 ### Angular
 
-[Angular](https://roadmap.sh/angular) is an open-source front-end framework developed by the Angular team at Google, along with contributions from individual developers. Built on TypeScript, Angular provides a well-structured framework with features like two-way data binding, reactive programming, dependency injection, and modular architecture. These features are particularly beneficial and make Angular trusted for building enterprise-grade applications.
+Angular is an open source JavaScript framework developed by the Angular team at Google with contributions from individual developers. Built on TypeScript, Angular provides a well-structured framework with features like two-way data binding, reactive programming, dependency injection, and modular architecture. These features enable developers to build enterprise-grade applications.
 
-Notably, many other frameworks and open-source libraries have drawn inspiration from Angular's paradigm and architectural patterns, attesting to its influence and popularity within the web development community.
+Although Angular has a steep learning curve, it has significantly influenced the web development community. Many other frameworks and open-source libraries have drawn inspiration from Angular's paradigm and architectural patterns, attesting to its influence and popularity.
+
+You can learn more details by exploring the [Angular roadmap](https://roadmap.sh/angular).
 
 ### Svelte
 
-Svelte is an open-source component-based front-end framework for building web applications. It follows the paradigm of existing web frameworks but takes a unique approach with less code, no virtual Document Object Model (DOM), and reactivity. Svelte also powers frameworks like SvelteKit, a library for building production-ready applications.
+Svelte is an open-source component-based front-end framework for building web applications. It adheres to the paradigm of existing web frameworks but introduces a unique approach that involves less code, no virtual Document Object Model (DOM), and built-in reactivity. Svelte also serves as the foundation for frameworks like SvelteKit, which is a library for building user interfaces compatible with both legacy and modern web browsers.
 
 ### Solid.js
 
@@ -158,15 +289,17 @@ Like Next.js, Remix is a full-stack web development framework built on React’s
 
 ### Nuxt
 
-Nuxt is an open-source framework for building full-stack web applications powered by Vue. It comes with features like file-based routing, data fetching, server routes, TypeScript support, middleware, and more, making it ideal for building scalable applications.
+Nuxt is an open-source framework for building full-stack web applications powered by Vue. It comes with features like file-based routing, data fetching, server routes, TypeScript support, middleware, and more, making it ideal for building dynamic web pages.
 
 ### Astro
 
 Astro is an open-source web framework for building content-heavy websites like e-commerce platforms, blogs, and marketing websites. Compared to other frameworks, it reduces JavaScript overhead, loads faster, and has excellent SEO support. Additionally, it features Island, a component-based architecture optimized for content-driven websites. It is UI-agnostic, supporting other UI libraries such as Vue, Svelte, React, web components, etc.
 
-### Other innovative front-end languages and frameworks
+## Other innovative front-end languages and frameworks
 
-Web and mobile platforms become increasingly powerful as more use cases are unlocked. This trend has led to increased technology actively creating bridges to integrate front-end usage in libraries and frameworks, enhancing user experience. Below are some languages and frameworks bridging the gap to make front-end development even more accessible:
+Web and mobile platforms become increasingly powerful as more use cases are unlocked. This trend has led to increased technology actively creating bridges to integrate front-end usage in libraries and frameworks, enhancing user experience.
+
+These are some of the languages and frameworks bridging the gap to make front-end development even more accessible:
 
 ### HTMX
 
@@ -174,9 +307,12 @@ HTMX is a dependency-free UI library for the web, which can replace traditional
 
 ### React Native
 
-[React Native](https://roadmap.sh/react-native) enables the development of cross-platform mobile applications, such as Android and iOS, using React.js. It compiles to native mobile code, which allows you to “write once and ship everywhere.” Thanks to the complimentary React.js community, React Native also features a rich tooling and plugin ecosystem.
+React Native enables the development of cross-platform mobile applications, such as Android and iOS, using React.js. It compiles to native mobile code, which allows you to “write once and ship everywhere.” Thanks to the complimentary React.js community, React Native also features a rich tooling and plugin ecosystem.
+
+You can learn more details by exploring the [React Native roadmap](https://roadmap.sh/react-native).
 
 ### WebAssembly and front-end development
+![WebAssembly](https://assets.roadmap.sh/guest/webassembly-logo-lugnl.png)
 
 WebAssembly (or Wasm) is a binary instruction format serving as a compilation target for programming languages, enabling them to run efficiently in web browsers. It empowers developers to write high-performance code in languages like C, [C++](https://roadmap.sh/cpp), and [Rust](https://roadmap.sh/rust), which can then be seamlessly integrated into web applications, enhancing web front-end development capabilities.
 
@@ -184,10 +320,9 @@ Beyond the web, WebAssembly has also gained adoption in various domains, such as
 
 Companies like Figma, AutoCAD, and cloud-native companies actively leverage WebAssembly to meet their performance needs and contribute to the WebAssembly ecosystem by building libraries, tools, and packages that enhance its capabilities.
 
+## How do you select the right front-end language?
 
-## How do you select the right front-end programming language?
-
-Choosing the right front-end programming language to learn is an important decision. It shouldn’t be taken lightly, as it significantly impacts your career trajectory and success. This section examines some points to help you select a front-end programming language to learn in 2024.
+Choosing the right front end language to learn is an important decision. It shouldn’t be taken lightly, as it significantly impacts your career trajectory and success. This section examines some points to help you select a front end language to learn in 2024.
 
 The points are:
 
@@ -208,7 +343,9 @@ The answers will help narrow your options and focus on languages that suit the p
 
 ### Targeted platform
 
-The web, mobile, TV, and other screen-enabled electronic devices present users with interfaces they touch, see and interact with. Having a good understanding of the supported languages on such platforms is important. For example, building an application for the Apple platform involves using languages like Swift, Dart (via [Flutter](https://roadmap.sh/flutter)), and JavaScript (via [React Native](https://roadmap.sh/react-native)).
+The web, mobile, TV, and other screen-enabled electronic devices present users with interfaces they touch, see and interact with. It is important to have a good understanding of the supported languages on such platforms.
+
+For example, building an application for the Apple platform involves using languages like Swift, Dart (via [Flutter](https://roadmap.sh/flutter)), and JavaScript (via [React Native](https://roadmap.sh/react-native)). Additionally, it is essential to learn to use the associated frameworks and their application programming interfaces (APIs).
 
 ### Career trajectory and opportunity
 
@@ -226,5 +363,4 @@ Furthermore, users' evolving needs will continue to directly impact the approach
 
 Staying informed about these changes is critical, as is knowing the appropriate path to follow when learning or adopting new technology. The [front-end r](https://roadmap.sh/frontend)[oadmap](https://roadmap.sh/frontend) is a reliable source of truth for developers seeking to stay updated and informed about the changes that may arise in front-end development.
 
-Beyond having access to a reliable roadmap, an essential aspect of learning is monitoring your progress, demonstrating your skills to potential employers, and joining a supportive community. [Sign up to get started](https://roadmap.sh/signup) on the frontend roadmap while tracking your progress. 
-
+Beyond having access to a reliable roadmap, an essential aspect of learning is monitoring your progress, demonstrating your skills to potential employers, and joining a supportive community. [Sign up to get started](https://roadmap.sh/signup) on the frontend roadmap while tracking your progress.

src/data/guides/full-stack-developer-skills.md

@@ -19,7 +19,7 @@ tags:
   - 'guide-sitemap'
 ---
 
-![image](https://assets.roadmap.sh/guest/full-stack-developer-skills-abb38.jpg)
+![The best full stack developer skills to learn.](https://assets.roadmap.sh/guest/full-stack-developer-skills-abb38.jpg)
 
 It should be no surprise to anyone that given the fast pace of the web development industry, every type of developer, especially full stack developers, must stay ahead of the curve by continuously updating their skills.
 

src/data/guides/full-stack-vs-software-engineer.md

@@ -6,7 +6,7 @@ excludedBySlug: '/full-stack/vs-software-engineer'
 seo:
   title: 'Full Stack Developer or Software Engineer – Which Way to Go?'
   description: 'Unsure about your dev career path? Compare full stack developer and software engineer roles to make an informed decision.'
-  ogImageUrl: 'https://assets.roadmap.sh/guest/full-stack-developer-vs-software-engineer-yy0dk.jpg'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/full-stack-developer-vs-software-engineer-ol28u.png'
 isNew: false
 type: 'textual'
 date: 2024-05-02
@@ -19,66 +19,98 @@ tags:
   - 'guide-sitemap'
 ---
 
-Have you ever heard the saying that **all full-stack developers are software engineers, but not all software engineers are full-stack developers**?
+![Choosing between full stack developer or software engineer.](https://assets.roadmap.sh/guest/full-stack-developer-vs-software-engineer-ol28u.png)
 
-A full-stack developer is responsible for the user-facing side and the behind-the-scenes logic that makes everything work, while a software engineer may specialize in just one of these areas.
-Despite their differences, both roles require similar problem-solving skills, even though their toolkits may vary.
+Have you ever heard the saying that **all full stack developers are software engineers, but not all software engineers are full stack developers**?
 
-This article provides an in-depth discussion of what each role entails, their similarities and differences, the necessary skills, and the growth potential in these fields.
-It will also touch on salary ranges, help you determine which path fits you best, and provide roadmaps for your software engineering or full-stack development journey.
+A full stack developer is responsible for the user-facing side of web applications, user interfaces, and the behind-the-scenes logic and web architecture that makes everything work, while a software engineer may specialize in just one of these areas.
 
-The table below summarizes the major differences between a full stack developer and software engineer
+Despite the differences between full stack developers and software engineers, both roles require similar problem-solving skills, even though their toolkits may vary.
 
-| **Full-Stack Developer**                                                        | **Software Engineer**                                                                                                 |
-|---------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------|
-| Focuses on end-to-end development of applications (both front-end and back-end) | Specializes and practices in one domain and has a deep knowledge of it.                                               |
-| Mostly limited to just front-end and back-end development                       | There are a broad range of domain options to choose from. e.g front-end, back-end, mobile, desktop, embedded systems. |
+This guide provides a detailed explanation of the following:
 
-Here’s each role in detail.
+- Full stack development and software engineering roles.
+- Skills required to be a full stack developer and a software engineer.
+- Similarities and differences between a full stack developer and a software engineer.
+- Growth opportunities in full stack development and software engineering.
+- Average salary of a full stack developer and software engineer.
+- Guidance if you should go for full stack development or software engineering.
+- Provide full stack developer and software engineer roadmaps.
+
+The table below summarizes a full stack developer vs software engineer roles.
+
+| **Full Stack Developer**                                                                                                                                   | **Software Engineer**                                                                                                                                                        |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Full stack web developer also known as a full stack engineer work on end-to-end web development side of applications (both front-end and back-end web programming) | A software engineer specializes in new technologies and practices in one domain  or a particular project and has a deep knowledge of it.                                     |
+| A full stack developer role is mostly limited to just front-end(web design elements) and back-end                                                                  | A software engineer has a broader range of domain options to choose from. e.g front-end, back-end, web apps, mobile, desktop, embedded systems, native apps, web development |
+
+![Full stack developer vs Software engineer](https://assets.roadmap.sh/guest/full-stack-vs-software-engineer-e3ozc.jpg)
+
+Let me take you through each role so you see what they’re like and I’ll help you decide which is best suited to your ambitions and interest.
 
 ## Who is a full stack developer?
 
-A [full stack developer](https://roadmap.sh/full-stack) possesses the knowledge and technical skill sets to work proficiently in a software application's front-end and back-end. The application's front-end encompasses everything the user can see while interacting with it, i.e., the user interface. The back-end consists of the server-side logic, the database, and the server.
+A [full stack developer](https://roadmap.sh/full-stack) also known as a full stack programmer possesses the knowledge and technical skill sets to work proficiently in a software application's front-end and back-end.
 
-Let's take a look at front-end and back-end development in greater detail.
+An application's front-end encompasses everything the user can see while interacting with it, i.e., the user interface. The back-end of a web application consists of the server-side programming, the database, and the server.  Full stack developers typically are responsible for building the front-end and back-end of software applications.
 
+Let's take a look at both the front-end and back-end in greater detail.
 
-- **Front-end development** refers to everything a user can see and interact with. It is also known as the client side of an application. It is concerned primarily with the user interface (UI) and user experience (UX).
+### Front-end development
 
+It refers to everything a user can see and interact with. It is also known as the client side of an application. It is concerned primarily with the client-side development, user interface (UI) and user experience (UX).
 
-    The common languages used in front-end development include HTML, Cascading Style Sheets (CSS), and JavaScript. HTML defines the markup of the web page. CSS builds upon HTML and represents the style and format of the webpage. JavaScript is a programming language often used for front-end development and adds logic to your web page. You’ll find an excellent guide and roadmap to learning [JavaScript](https://roadmap.sh/javascript) on our platform.
-    
-    There are quite a few front-end frameworks out there. Some of the common ones are [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), and [Angular](https://roadmap.sh/angular). You can look at the [front-end beginners roadmap](https://roadmap.sh/frontend?r=frontend-beginner) or the [advanced front-end roadmap](https://roadmap.sh/frontend?r=frontend) for a more detailed guide.
+The common programming languages used in front-end development by a full stack developer include HTML, Cascading Style Sheets (CSS), and JavaScript. HTML defines the markup of the web page. CSS builds upon HTML and represents the style and format of the webpage. JavaScript is a programming language often used for front-end development and adds logic to your web page. You’ll find an excellent guide and roadmap to learning [JavaScript](https://roadmap.sh/javascript) on our platform.
 
-- **Back-end development** includes everything the user *cannot* see. It is sometimes referred to as the server side of an application. It focuses on the application's functionality and *business logic*. Examples of back-end components include data storage, security, and handling of business logic.
+There are quite a few front-end web development frameworks out there used by full stack developers. Some of the common ones are [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), and [Angular](https://roadmap.sh/angular). You can look at the [front-end beginners roadmap](https://roadmap.sh/frontend?r=frontend-beginner) or the [advanced front-end roadmap](https://roadmap.sh/frontend?r=frontend) for a more detailed guide.
 
-  Back-end development mainly involves creating API endpoints consumed by the application's front-end. Some common back-end programming languages include C#, Java, Rust, Golang, and Python. Check out the [back-end developer](https://roadmap.sh/backend) roadmap.
+### Back-end development
 
-## Skills required to be a full stack developer
+It includes everything the user *cannot* see. It is sometimes referred to as the server side of an application. It focuses on the application's functionality and *business logic*. Examples of back-end components include data storage, security, and handling of business logic.
+
+Back end development mainly involves creating API endpoints consumed by the application's front-end. Backend developers usually work with languages such as Python , Java , or Ruby , along with frameworks like Node.js , Django , or Ruby on Rails. Check out the [back-end developer](https://roadmap.sh/backend) roadmap.
+
+### Full stack developers' skills
 
 The necessary technical skills to be a full stack developer include:
 
 - Knowledge of HTML, CSS, and [JavaScript](https://roadmap.sh/javascript)/[TypeScript](https://roadmap.sh/typescript).
 - Knowledge of at least one JavaScript framework e.g. [React](https://roadmap.sh/react), [Vue js](https://roadmap.sh/vue), [Angular](https://roadmap.sh/angular).
-- Knowledge of at least one back-end language. You can transfer your knowledge of JavaScript to the back-end for back-end development with Node JS.
-- In-depth understanding of server-side rendering and web security.
+- Knowledge of at least one of the back-end programming languages. You can transfer your knowledge of JavaScript to the back-end with Node JS.
+- Solid understanding of server-side rendering and web security.
 - Knowledge of APIs.
 - Understanding of database management systems and database architecture.
+- Knowledge of data structures and algorithm
 - Basic knowledge of [DevOps](https://roadmap.sh/devops).
+- Project management skills.
+
+![Full stack developer skills](https://assets.roadmap.sh/guest/fullstack-developer-skills-gbnoy.jpg)
 
 ## Who is a software engineer?
 
-A software engineer is a specialist with a deep understanding of software development, computer systems, and programming languages. They design and create software programs and applications that solve real-world problems. Software engineers are specialists who focus on a specific aspect of software development. They produce high-quality software solutions.
+A software engineer is a specialist with a deep understanding of software development, computer systems, and programming languages. A software engineer designs and creates software programs and web applications that solve real-world problems.
+
+Software engineers are specialists who focus on a specific aspect of software development. A software engineer produces high quality software solutions and ensures high software performance. They can specialize in parts of development such as database management, web development, mobile development and more.
 
 There are two primary types of software engineers: applications and systems software engineers.
 
-**Application software engineers:** Client-focused software engineers design and develop software users interact with. They could be front-end, back-end, or full-stack developers. They also develop applications for operating systems such as iOS, Android, Windows, Linux, and many more.
+### Application software engineers
 
-**Systems software engineers:** These software engineers develop systems and networks that drive the user-facing applications developed by the application software engineers. They are specialists in either hardware or software engineering or both. They can also integrate different software products into a single platform; for example, [DevOps](https://roadmap.sh/devops) engineers can use tools like [Docker](https://roadmap.sh/docker) and [Kubernetes](https://roadmap.sh/kubernetes) to deploy and orchestrate applications.
+An application software engineer is also known as s client-focused software engineer. These software engineers design and develop software applications users interact with. 
 
-System software engineers often serve as IT or system architects who design and enforce industry tech standards. They are experts in software design and mostly design back-end systems that users do not directly interact with.
+An application software engineer could be a front-end engineer, a back-end engineer, or full-stack software engineer. They also develop applications for operating systems such as iOS, Android, Windows, Linux, and many more. 
 
-Software systems are complex, and much thought goes into building them. Software engineers use their broad knowledge to break down these complex systems, and the usual software development life cycle looks like the following.
+### Systems software engineers
+
+These software engineers develop systems and networks that drive the user-facing applications developed by the application software engineers. A system software engineer is a specialist in either hardware or software engineering or both.
+
+System software engineers can also integrate different software products into a single platform; for example, [DevOps](https://roadmap.sh/devops) engineers can use tools like [Docker](https://roadmap.sh/docker) and [Kubernetes](https://roadmap.sh/kubernetes) to deploy and orchestrate applications.
+
+System software engineers often serve as IT or system architects or backend software developers who design, test software and enforce industry tech standards. A system software engineer is an expert in software design and mostly design back-end systems and operating system that users do not directly interact with.
+ 
+Software systems are complex, and much thought goes into building them. Software engineers use their broad knowledge of coding languages and engineering principles to break down these complex systems and build software.
+
+The usual software project development and management life cycle looks like the following:
 
 - They design the whole system, typically employing the principles of [system design](https://roadmap.sh/system-design) and [software design architecture](https://roadmap.sh/software-design-architecture). They decide on the software architecture to use for the application by weighing the pros and cons of different system architectures that might be suitable. Some standard architectures are monolith architecture, micro-services architecture, event-driven architecture, etc.
 
@@ -88,65 +120,96 @@ Software systems are complex, and much thought goes into building them. Software
 
 - Building the system involves several iterations. Still, the target is usually to produce the minimum viable product (MVP), the application's basic functionalities. A lot of software testing is done by quality assurance personnel and the application's users.
 
-**It is important to note that this process is iterative.**
+**It is important to note that this entire process is iterative.**
 
-Full-stack developers and software engineers are in high demand in various sectors. According to the [U.S. Bureau of Labor Statistics](https://www.bls.gov/ooh/computer-and-information-technology/software-developers.htm), jobs in software development are expected to grow by 25% between 2022 and 2032.
+### Software engineers skills
 
-Also, according to [Statista](https://www.statista.com/statistics/1367003/in-demand-it-roles/), full-stack developers and software engineers are among the top technical positions demanded by recruiters worldwide in 2023. Indeed reported that the average software engineer's annual salary is $105,624, and that of a [full-stack software developer](https://www.indeed.com/career/full-stack-developer/salaries?from=top_sb) is $124,120.
-
-## Skills required to be a software engineer
-
-While software engineering requires a strong specialization in a domain, the following core skills are required for the role:
+The following core technical skills and soft skills are required for the software engineering role:
 
 - Knowledge of [computer science fundamentals](https://roadmap.sh/computer-science), software development, and [system design](https://roadmap.sh/system-design).
-- Knowledge of a programming language
+- Knowledge of at least one of the common programming languages
 - Strong analytical and problem-solving skills
 - Knowledge of operating systems
 - Understanding of networks and security
 - Knowledge of cloud platforms and DevOps systems
-- Knowledge of testing and debugging processes/systems
+- Knowledge of testing e.g. unit testing, integration test, end-to-end test
+- Well-versed in debugging processes/systems
+- Project management skills
+- Technical support skills
 
-## Choosing your path: Key differences to consider
+![Software engineer skills](https://assets.roadmap.sh/guest/software-engineer-skills.jpg)
 
-You might be wondering which specialization you should pursue. When choosing a path, consider the following points:
+## Full Stack Developer vs Software Engineer: Key differences to consider
 
-- **Focus and expertise**: Full-stack developers have broad expertise. They are experts in both front-end and back-end development. The opposite is the case for software engineers in practice. They specialize in a particular field and thus typically have a deeper, more specialized knowledge. For example, they could focus on only front-end development and have extensive knowledge of that aspect.
+You might be wondering which specialization you should pursue, either being a full stack developer or a software engineer. When choosing a path, consider the following points:
+
+- Focus and expertise
+- Accessibility and entry point
+
+### Focus and expertise
+
+Full-stack developers have broad expertise. Full-stack developers are experts in both front-end and back end development. The opposite is the case for software engineers in practice. Software engineers specialize in a particular field and thus typically have a deeper, more specialized knowledge.
+
+A software engineer could focus on only front-end development and have extensive knowledge of that aspect while a full-stack developer focuses on the overall software lifecycle.
  
-- **Accessibility and entry point**: Two major pathways exist to becoming a full-stack developer or software engineer: self-taught and a formal education with a degree.
+### Accessibility and entry point
 
-  For the formal pathway, you will be taught and develop a strong computer science
-  background, which is the core of software development. Self-taught developers learn specific, industry-relevant skills on their own time. One advantage of the formal education path is gaining hands-on experience while studying through internships.
+Two major pathways exist to becoming a full-stack developer or software engineer: self-taught and a formal education with a degree.
 
-Software development and engineering open the door to many employment opportunities. Individuals can work in other tech fields, such as data science and analytics, machine learning, and artificial intelligence. There are numerous opportunities for career growth in both fields, starting with internships and progressing to senior levels, which come with years of experience and expertise.
+For the formal pathway, you will be taught and develop a strong computer science background, which is the core of software development and web development. Self-taught full stack developers and software engineers learn specific, industry-relevant skills on their own time.
 
-## Common ground and shared skills
+One advantage of the formal education path is gaining hands-on full stack development and software engineering experience while studying through internships.
 
-Despite the differences between full-stack developers and software engineers, they share some common grounds and skills as they are both crucial in the software development lifecycle.
+## Common full stack developer and software engineer skills
 
-- **Collaboration and teamwork**: Full-stack developers and software engineers primarily work in a tech team comprising other developers and engineers, designers, product managers, QA testers, etc. They must collaborate with other team members to achieve a goal.
+Despite the differences between full-stack developers and software engineers, they share some common grounds and skills as they are both crucial in the software development lifecycle. They include:
 
-- **Technical knowledge**: Both specializations require a good understanding of core programming principles such as object-oriented programming (OOP), separation of concerns, clean code, SOLID principles, etc. They also require strong problem-solving and analytical skills, which are critical in the roles and in getting the job done.
+- Collaboration and teamwork
+- Technical knowledge
+- Lifelong learning
+- Job description
 
-- **Lifelong learning:** This is a common ground shared amongst all fields in tech. As tech continually and rapidly evolves, they must stay up to date, which involves continuous learning to stay ahead. They continually update their technical and soft skills to remain relevant in the tech industry.
+### Collaboration and teamwork
 
-- **Job description**: Full-stack developers and software engineers share some common responsibilities, which can be reflected in their job descriptions. Some of these responsibilities include:
+Full-stack developers and software engineers primarily work in collaborative environments. They work with a tech team comprising other developers and engineers, designers, product managers, QA testers, business analysts, etc. They must collaborate with other team members to achieve a goal.
 
-    - Collaborating with other front-end, back-end, and full-stack developers to improve efficiency and identify and resolve blockers.
-    - Collaborating with cross-functional teams.
-    - Implementing new software features.
-    - Conceptualizing and designing software architecture for the front-end and back-end.
-    - Documenting the software development process.
-    - Troubleshooting, debugging, and upgrading existing systems.
-    - Complying with project plans and industry standards.
+### Technical knowledge
+
+A full stack developer and software engineer require a good understanding of core programming principles such as object-oriented programming (OOP), separation of concerns, clean code, SOLID principles, etc. They also require strong problem-solving and analytical skills, which are critical in the roles and in getting the job done.
+
+### Lifelong learning
+
+This is a common ground shared amongst all fields in tech. As tech continually and rapidly evolves, a software engineer and full stack developer must stay up to date, which involves continuous learning to stay ahead. They continually update their technical and soft skills to remain relevant in the tech industry.
+
+### Job description
+
+Full-stack developers and software engineers share some common responsibilities, which can be reflected in their job descriptions. Some of these responsibilities include:
+
+- They both collaborate with front-end, back-end, full stack engineers and other team members to improve efficiency and identify and resolve blockers.
+- Full stack developers and software engineers collaborate with cross-functional teams.
+- Full stack developers and software engineers implement new software features.
+- A full stack developer and software developer conceptualizes and designs software architecture for the front-end and back-end.
+- A full stack developer and software engineer document the software development process.
+- A full stack developer and software engineer troubleshoots, debugs, and upgrades existing systems.
+- Full stack developers and software engineers comply with project plans and industry standards.
+
+## Full stack developer vs software engineer salaries
+
+Full-stack software developers and software engineers are in high demand in various sectors. According to the [U.S. Bureau of Labor Statistics](https://www.bls.gov/ooh/computer-and-information-technology/software-developers.htm), jobs in software development are expected to grow by 25% between 2022 and 2032.
+
+According to [Statista](https://www.statista.com/statistics/1367003/in-demand-it-roles/), full-stack software developers and software developers are among the top technical positions demanded by recruiters worldwide in 2023. Indeed reported that the average software engineer's annual salary is $105,624, and that of a [full-stack software developer](https://www.indeed.com/career/full-stack-developer/salaries?from=top_sb) is $124,120.
+
+Experience and expertise are key factors that determine the salaries of full stack developers and software engineers. The table below shows the difference in average salaries of [full stack developers](https://www.payscale.com/research/US/Job=Full_Stack_Software_Developer/Salary) and [software engineers](https://www.payscale.com/research/US/Job=Software_Engineer/Salary) based on their years of experience.
+
+![Full stack developer vs Software engineer salaries](https://assets.roadmap.sh/guest/full-stack-salaries-04wtl.jpg)
 
 ## How do I become a full stack developer or software engineer?
 
-As you’ve seen, becoming a full stack developer requires various skill sets. roadmap.sh provides a step-by-step guide on how to become a [f](https://roadmap.sh/full-stack)[ull](https://roadmap.sh/full-stack)[-](https://roadmap.sh/full-stack)[s](https://roadmap.sh/full-stack)[tack](https://roadmap.sh/full-stack) [d](https://roadmap.sh/full-stack)[eveloper](https://roadmap.sh/full-stack) and by signing up, you will be able to:
+As you’ve seen, becoming a full stack developer requires various skill sets. roadmap.sh provides a step-by-step guide on how to become a [full-stack programmer or developer](https://roadmap.sh/full-stack), and by signing up, you will be able to:
 
 - Keep track of your learning progress and share it on your public roadmap.sh profile.
 - Draw your roadmap, either as an individual learner or for [Dev](https://roadmap.sh/teams) [t](https://roadmap.sh/teams)[eams](https://roadmap.sh/teams).
-- [Generate new roadmaps](https://roadmap.sh/ai) with AI.
+- [Generate new roadmaps with AI](https://roadmap.sh/ai).
 - Collaborate on official roadmaps.
-
-Recall that a software engineer, as defined above, specializes in different areas in the software development cycle. roadmap.sh provides learning paths for various software engineering specializations. You can also sign up for the [computer science](https://roadmap.sh/computer-science), [data structures and algorithms,](https://roadmap.sh/datastructures-and-algorithms) [software design and architecture](https://roadmap.sh/software-design-architecture), and [system design](https://roadmap.sh/system-design) roadmaps.
-
+ 
+Recall that a software engineer, as defined above, specializes in different areas in the software development cycle and possesses a thorough knowledge of coding languages and engineering principles. roadmap.sh provides learning paths for various software engineering specializations. You can also sign up for [computer science](https://roadmap.sh/computer-science), [data structures and algorithms,](https://roadmap.sh/datastructures-and-algorithms) [software design and architecture](https://roadmap.sh/software-design-architecture), and [system design](https://roadmap.sh/system-design) roadmaps.

src/data/guides/how-to-become-devops-engineer.md

@@ -6,7 +6,7 @@ excludedBySlug: '/devops/how-to-become-devops-engineer'
 seo:
   title: 'How to become a DevOps Engineer in @currentYear@'
   description: 'Want to become a DevOps engineer? Our @currentYear@ guide covers skills, certifications, and expert career advice. Start your journey today!'
-  ogImageUrl: 'https://assets.roadmap.sh/guest/how-to-become-devops-engineer-3opju.jpg'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/become-devops-engineer-4x2p7.jpg'
 isNew: true
 type: 'textual'
 date: 2024-06-11
@@ -19,159 +19,191 @@ tags:
   - 'guide-sitemap'
 ---
 
-If you are trying to get into tech or are already in tech and have been exploring roles across the industry, you must have come across Development and Operations (DevOps). In fact, DevOps is one of the highest-paying roles in the tech industry. But **what is DevOps, and how is it different from other roles?**
+![How to become a DevOps engineer.](https://assets.roadmap.sh/guest/become-devops-engineer-4x2p7.jpg)
 
-**DevOps is a software engineering approach that combines development (Dev) and operations (Ops) to shorten the software development lifecycle** (feature development, bug fixes, updates) by embracing automation. It is a bridge between the development and the operations team. While the primary goal of a software engineer is to design and build software solutions, a DevOps engineer has a key role in streamlining the software delivery pipeline, automating infrastructure provisioning, and enhancing the deployment process.
+If you are trying to get into tech or are already in tech and have been exploring roles across the industry, you must have come across Development and Operations (DevOps). In fact, [DevOps](https://roadmap.sh/devops) is one of the highest-paying roles in the tech industry.
 
-This article provides in-depth knowledge on how to become a DevOps engineer, highlighting the mindset and technical skills(including DevOps tools) required to become one.
+But **what is DevOps, and how is it different from other roles?**
 
-**TL;DR:** DevOps combines development and operations to automate software delivery. To become a DevOps engineer, you should adopt a mindset of automation, risk awareness, systems thinking, and continuous learning. In addition to the mindset, follow the steps below:
+**DevOps is a software engineering approach that combines development (Dev) and operations (Ops) to shorten the software development lifecycle** by embracing automation. It is a bridge between the development and operations teams.
+
+While the primary goal of a software engineer is to design and build software solutions, a DevOps engineer has a key role in streamlining the software development and deployment pipeline, automating infrastructure provisioning, and enhancing the deployment process.
+
+This guide provides in-depth knowledge on how to become a DevOps engineer, highlighting the mindset of DevOps engineers and the technical skills(including DevOps tools) required to become one. It also guides you on how you can find DevOps engineer jobs.
+
+## **TL;DR:**
+
+DevOps combines development and operations to automate software delivery. To become a DevOps engineer, you should adopt a mindset of automation, risk awareness, systems thinking, and continuous learning. In addition to the mindset, follow the steps below:
 
 - Step 1: Learn a programming language
 - Step 2: Get comfortable with Linux and terminal
 - Step 3: Version control and code hosting platforms
 - Step 4: Networking fundamentals
 - Step 5: Containerization
-- Step 6: Cloud platform
+- Step 6: Cloud services
 - Step 7: Continuous integration and delivery
 
-Let’s dive into the essential skills required for a [DevOps engineer](https://roadmap.sh/devops).
+Let’s dive into the essential skills required for a DevOps engineer.
 
-## Skills required to become a DevOps Engineer
-
-### Operating system
+## Skills required to become a DevOps engineer
 
+### Operating system 
 A DevOps engineer should understand the operating system, especially Linux (distribution or any variant). This is because most of the servers in use are Linux-based, so having a solid foundation in the Linux OS is imperative for infrastructure management and troubleshooting.
 
 ### Solid programming fundamentals
+As a DevOps engineer, you will use your knowledge of programming languages and scripting languages (bash scripting, shell scripting, etc) to:
 
-As a DevOps engineer, you will use your knowledge of programming and scripting language to:
-
-- Automate frequent and boring tasks
+- Automate processes and frequent tasks
 - Patch a security bug exposing your internal application to outside users 
 - Create automation tools, monitoring tools, and logging tools
+- Create monitoring dashboards to visualize workload and resource usage
 
-Hence, hands-on experience with programming is crucial. 
+Hence, hands-on experience with programming is crucial to excel in your DevOps career. 
 
 ### Version control
-
-Knowledge of version control is essential in all software engineering roles. As a DevOps engineer, you will likely work in a team rather than alone. Version control systems like Git facilitate collaboration in a team while providing a centralized repository for the code.
+A basic understanding of version control is one of the essential DevOps skills required for DevOps engineer jobs. In your DevOps career, you will likely work in a team rather than alone. Systems like Git facilitate collaboration in a team while providing a centralized repository for the code.
 
 ### Networking fundamentals
-
 Many modern-day applications are distributed systems that rely on networking. For instance, a single application could be composed of a frontend, backend, database, file server, etc., each residing on a separate server. For a seamless user experience, these separate entities should be able to communicate smoothly.
 
 ### Containerization and orchestration
+Containerization (or container technology) and orchestration help solve the issues of software deployment and resource utilization. Knowledge of containerization and orchestration helps reduce deployment time and allows you to scale applications quickly without downtime, resulting in a better user experience.
 
-[Containerization](https://roadmap.sh/docker) and [orchestration](https://roadmap.sh/kubernetes) help solve the issues of software deployment and resource utilization. Knowledge of containerization and orchestration helps reduce deployment time and allows you to scale applications quickly without downtime, resulting in a better user experience.
-
-### Cloud platforms
-
-Procuring hardware to deploy the software is not always feasible and beneficial. Furthermore, once you purchase the hardware, you need more time and resources to manage the new hardware. Depending upon the complexity of the application, choosing cloud platforms instead of on-premise hardware can significantly reduce deployment time and cost.
+### Cloud deployment
+Procuring hardware to deploy the software is not always feasible and beneficial. Furthermore, once you purchase the hardware, you need more time and resources to manage the new hardware. Depending upon the complexity of the application, choosing the cloud instead of on-premise hardware can significantly reduce deployment time and cost.
 
 ### Infrastructure as Code (IaC)
-
 IaC can be seen as a superior form of automation for a DevOps engineer. IaC tools like Terraform and Amazon Cloud CDK allow the operations team to set up and manage infrastructure by simply changing a configuration file. This makes it easier to manage and scale the application.
 
-So, how do you learn these essential skills? In what sequence do you acquire these skills? The following section presents a complete roadmap on how you can learn these skills and become a DevOps engineer.
+So, how do you learn these essential skills? In what sequence do you acquire these skills? 
 
-## How to become a DevOps Engineer
+The following section presents a complete DevOps roadmap on how you can learn these skills and become a DevOps engineer.
 
-The internet is full of resources for learning DevOps and DevOps tools. Many of these guides lack structure and organization, resulting in a dilemma of where to start. To help beginners learn DevOps in a structured manner, [roadmap.sh](https://roadmap.sh) has a beginner-friendly [DevOps roadmap](https://roadmap.sh/devops?r=devops-beginner). 
+## How to become a DevOps engineer: the DevOps roadmap
 
-This section presents a concise version of the DevOps roadmap. It is recommended that you implement real-world projects recommended in each stage of the roadmap. In the end, you can publish these DevOps projects to GitHub as an open-source project repository, and the repository will act as your portfolio.
+The internet is full of resources for learning DevOps and DevOps tools. Many of these guides lack structure and organization, resulting in a dilemma of where to start. 
+
+To help beginners learn DevOps in a structured manner, [roadmap.sh](http://roadmap.sh/) has a beginner-friendly [DevOps engineer roadmap](https://roadmap.sh/devops?r=devops-beginner) that will help you land into DevOps engineer positions. 
+
+This section presents a concise version of the DevOps engineering roadmap. It is recommended that you implement real-world projects recommended in each stage of the roadmap. In the end, you can publish these DevOps projects to GitHub as an open-source project repository, and the repository will act as your portfolio and increase your exposure in the DevOps community.
 
 ### Step 1: Learn a programming language
 
-Programming language is essential to a DevOps engineer. I recommend you start with either Python or Go. [Python](https://roadmap.sh/python) is a popular programming language that is easier to learn and used in various projects involving [backend](https://roadmap.sh/backend) development, writing machine learning algorithms, automating everyday tasks, etc. 
+Programming language is essential to a DevOps engineer. I recommend you start with either Python or Go. [Python](https://roadmap.sh/python) is a popular language that is easier to learn and used in various projects involving [backend](https://roadmap.sh/backend) development, writing machine learning algorithms, automating everyday tasks, etc. 
 
-[Automate the Boring Stuff with Python](https://automatetheboringstuff.com/) is an excellent resource for learning Python and basic programming concepts. It will also come in handy when building automation tools. To demonstrate your understanding of Python, you can create a web scraper that extracts a list of hotels, their address, prices, reviews, and locations from a site like [booking.com](http://booking.com/).
+
+![Popular programming languages](https://assets.roadmap.sh/guest/learn-a-programming-language-he481.jpeg)
+
+
+[Automate the Boring Stuff with Python](https://automatetheboringstuff.com/) is an excellent resource for learning Python and basic programming concepts. It will also come in handy when building automation tools. 
+
+To demonstrate your understanding of Python, you can create a web scraper (or other coding projects) that extracts a list of hotels, their address, prices, reviews, and locations from a site like [booking.com](http://booking.com/).
 
 ### Step 2: Get comfortable with Linux and the terminal
 
-According to [Gitnux](https://gitnux.org/linux-statistics/), 92.4% of the world’s top 1 million servers run on Linux, and about 96.3% of the world’s top 1 million websites are powered by Unix-like operating systems, with Linux being the most popular. This makes Linux a popular tool for all software engineers.
+According to [Gitnux](https://gitnux.org/linux-statistics/), 92.4% of the world’s top 1 million servers run on Linux, and about 96.3% of the world’s top 1 million websites are powered by Unix-like operating systems, with Linux being one of the most widely used operating systems. This makes Linux a popular tool for all software engineers.
+
+![The most popular operating systems today](https://assets.roadmap.sh/guest/most-popular-operating-systems-exdwq.jpeg)
 
 Furthermore, you should make the terminal your best friend. Some programs and packages may not have a GUI counterpart, and even when they exist, using the CLI(Command Line Interface) alternative is faster and easier to automate. 
 
-An excellent way to practice Linux is to install it on a thumb drive and try to do everyday tasks like changing the directory, creating new files and folders, editing files, searching for files and folders, etc., using Linux commands instead of using the GUI interface.
+An excellent way to practice Linux for DevOps engineers is to install it on a thumb drive and try to do everyday tasks like changing the directory, creating new files and folders, editing files, searching for files and folders, etc., using Linux commands instead of using the GUI interface.
 
 ### Step 3: Version control and code hosting platforms
 
 Version control systems like Git make it easier for developers to track changes in their source code by maintaining a history of the changes. Combined with platforms like GitHub or Bitbucket, Git can facilitate developers to work collaboratively with each other.
 
-[This tutorial](https://www.atlassian.com/git) will help you learn Git basics and how to use Git for collaboration using Bitbucket, a code hosting platform. For advanced concepts on git branching, [refer this site.](https://learngitbranching.js.org) Once you go through the tutorial, you can easily switch from Bitbucket to GitHub and GitLab, which are more popular among developers.
+![Git and GitHub](https://assets.roadmap.sh/guest/git-and-github-kui4q.jpeg)
+
+[This tutorial](https://www.atlassian.com/git) will help you learn Git basics and how to use Git for collaboration using Bitbucket, a code hosting platform. 
+
+For advanced concepts on git branching, [refer to this site.](https://learngitbranching.js.org/) Once you go through the tutorial, you can easily switch from Bitbucket to GitHub and GitLab, which are more popular among developers.
 
 ### Step 4: Networking fundamentals
-
 Learning networking fundamentals becomes vital to the DevOps team when working with software components constantly communicating with other services. Knowledge of networks comes in handy when setting up resources in the public cloud. At a minimum, you should clearly understand standard protocols(TCP/IP, UDP), routing, IP addressing, subnetting, and ports. 
 
-A DevOps engineer should have a sound knowledge of web servers like Nginx. Nginx allows you to serve your application on the web while handling reverse proxy and load balancing. [Apache](https://httpd.apache.org) is another web server that provides similar features.
+A DevOps engineer should have a sound knowledge of web servers like Nginx. Nginx allows you to serve your application on the web while handling reverse proxy and load balancing. [Apache](https://httpd.apache.org/) is another web server that provides similar features.
+
+![Nginx and Apache](https://assets.roadmap.sh/guest/nginx-and-apache-psljm.jpeg)
 
 For your practice, you can create a simple frontend (or clone it from GitHub) and deploy it using Nginx or Apache.
 
 ### Step 5: Containerization
 
-An application developed by one developer may not work on other machines due to the difference in environment. To eliminate this issue, DevOps engineers use containerization tools like Docker. Docker allows engineers to create consistent development, testing, and production environments. It also ensures the developed application is portable across different platforms. 
+An application developed by one developer may not work on other machines due to the difference in environment. To eliminate this issue, DevOps engineers use containerization tools like Docker. 
+
+Docker allows engineers to create consistent development, testing, and production environments. It also ensures the developed application is portable across different platforms. 
+
+![Docker and Kubernetes](https://assets.roadmap.sh/guest/docker-and-kubernetes-fxplh.jpeg)
+
 
 Applications rely on multiple containers that communicate with each other. To facilitate the orchestration of these containers, you can use container orchestration tools like [Kubernetes](https://roadmap.sh/kubernetes). The [Docker Roadmap](https://roadmap.sh/docker) provides essential resources to help you master Docker and Kubernetes. 
 
-You can demonstrate your understanding of containerization tools by creating a simple project with frontend and back deployed as two separate containers. If you have already developed these components in the previous stages of the roadmap, re-use them to save time.
+You can demonstrate your understanding of containerization tools by creating a simple project with frontend and back deployed as two separate containers. If you have already developed these components in the previous stages of the roadmap, re-use them to save time. 
 
-### Step 6: Cloud platform
+Alternatively, certifications like Docker Certified Associate and Certified Kubernetes Administrator can help you prove your knowledge.
 
-Cloud platforms like [AWS](https://roadmap.sh/aws), Azure, and Google Cloud Platform are some popular cloud providers that allow you to deploy your projects without investing in expensive hardware. Many cloud services across these cloud platforms are analogous. So, if you are a beginner, start with AWS, as it is the most widely used cloud platform. Once you are comfortable with AWS’s services and key concepts, you can deploy the application created in earlier stages to the AWS. 
+### Step 6: Cloud services
 
-Alternatively, you could demonstrate your understanding by taking the [certification exam from AWS](https://aws.amazon.com/certification/).
+Cloud services like [AWS](https://roadmap.sh/aws), Azure, and Google Cloud Platform are some popular cloud providers that allow you to deploy your projects without investing in expensive hardware. Many cloud services across these cloud platforms are analogous. 
 
-Once comfortable launching your infrastructure using the GUI, you should learn about Infrastructure as Code(IaC). I recommend using [Terraform](https://www.terraform.io/) for IaC as it is cloud-agnostic. Terraform allows you to set up and make changes to infrastructure resources by editing a configuration file.
+If you are a beginner, start with AWS. It is the most widely used cloud platform. Once you are comfortable with AWS’s services and key concepts, you can deploy the application created in earlier stages to the AWS. 
+
+Alternatively, you could demonstrate your understanding by taking the [certification exam from AWS](https://aws.amazon.com/certification/?trk=dc557659-52ab-4a28-b2b8-0b1fb90235db&sc_channel=ps&ef_id=CjwKCAjw88yxBhBWEiwA7cm6pRXCRcI-uDNNigl81tPxsbbyV9RqT6MsdSM_x5EzoFnfxcr6N22rvBoCS7IQAvD_BwE:G:s&s_kwcid=AL!4422!3!465713397254!e!!g!!aws%20certification!11138243015!111694711080&gclid=CjwKCAjw88yxBhBWEiwA7cm6pRXCRcI-uDNNigl81tPxsbbyV9RqT6MsdSM_x5EzoFnfxcr6N22rvBoCS7IQAvD_BwE). Becoming an AWS certified DevOps engineer helps you gain credibility for your DevOps skills.
+
+![Top cloud providers](https://assets.roadmap.sh/guest/top-cloud-providers-76zj5.jpeg)
+
+
+Once comfortable launching your infrastructure using the GUI, you should learn about Infrastructure as Code(IaC). I recommend using [Terraform](https://www.terraform.io/) for IaC as it is cloud-agnostic and popular among software developers and operations teams. Terraform allows you to set up and make changes to infrastructure resources by editing a configuration file, resulting in infrastructure automation.
 
 ### Step 7: Continuous integration and delivery
+[Continuous Integration and Continuous Delivery](https://www.youtube.com/watch?v=nyKZTKQS_EQ) (or Continuous Deployment) (CI/CD) is a set of practices aimed at automating and streamlining software changes from development to production. 
 
-[Continuous Integration and Continuous Delivery](https://www.youtube.com/watch?v=nyKZTKQS_EQ) (or Continuous Deployment) (CI/CD) is a set of practices aimed at automating and streamlining software changes from development to production. Today, in practice, when you commit and push your changes to the remote repository (say GitHub), the tests kick off; if the tests pass successfully, your changes are merged and then deployed to the staging and production server.
+Today, in practice, when you commit and push your changes to the remote repository (say GitHub), the tests kick-off; if the tests pass successfully, your changes are merged and then deployed to the staging and production server.
+
+![CI/CD](https://assets.roadmap.sh/guest/ci-cd-hndye.jpeg)
 
 CI/CD is a combination of three skills: programming, writing configuration files, and Git. As such, you don’t need to learn new skills to implement CI/CD. However, some organizations use tools like CircleCI and Jenkins to simplify the process.
 
-You can practice CI/CD using GitHub actions. [GitHub provides a set of tutorials](https://docs.github.com/en/actions/learn-github-actions) for the same. You can follow along those tutorials to get a good grasp of Continuous Integration and Continuous Deployment. Then, you can implement CICD in one of your projects created while learning previous skills in this roadmap.
+You can practice CI/CD using GitHub actions. [GitHub provides a set of tutorials](https://docs.github.com/en/actions/learn-github-actions) for the same. You can follow along those tutorials to get a good grasp of Continuous Integration and Continuous Deployment. 
+
+Finally, you can implement CICD in one of your projects created while learning previous skills in this roadmap.
 
 Next, let’s discuss the mindset needed to become a DevOps engineer.
 
-## DevOps Engineer’s mindset
+## DevOps engineer’s mindset
 
-To become a successful DevOps engineer, you must orient your thoughts around the following:
+To become a successful DevOps engineer and successfully embrace the DevOps culture, you must orient your thoughts around the following:
 
 ### Automation
-
-Software products or systems are prone to various errors, including human errors. Stress during work and the race against deadlines can increase the frequency of these errors. Automation helps reduce human error and eliminate boring tasks.
+Software products or systems are prone to various errors, including human errors. Stress during work and the race against deadlines can increase the frequency of these errors. Automating processes helps reduce human error and eliminate boring tasks.
 
 ### Risk awareness
-
 DevOps engineers must understand the risks entangled with changes to a software system and deployment infrastructures. The risk should be minimized by utilizing automated testing, monitoring, and incremental changes.
 
 ### Systems thinking
-
-DevOps engineers must understand how different components within a system communicate and interact with each other to deliver the desired solution. A graphical representation of the system can come in handy when fixing issues or knowledge transfer.
+DevOps professionals or any member of the operations teams must understand how different components within a system communicate and interact with each other to deliver the desired solution. A graphical representation of the system can come in handy when fixing issues or knowledge transfer within the DevOps teams.
 
 ### Continuous learning
-
-A continuous learning and continuous improvement mindset is essential across all roles in software engineering, but its importance is amplified for a DevOps engineer. A DevOps engineer must continually learn about new technologies, tools, and best practices and implement the ones best suited to the project.
+A continuous learning and continuous improvement mindset is essential across all roles in software engineering, but its importance is amplified for a DevOps engineer. A DevOps engineer must continually learn about new technologies, tools, DevOps principles, and DevOps practices and implement the ones best suited to the project.
 
 You may not have the DevOps mindset, but that is okay. You can build this mindset as you learn and grow into the role. Let us look at some technical skills required to become a DevOps engineer.
 
-## Who can become a DevOps Engineer?
+## Who can become a DevOps engineer?
 
-Anyone with the right skillset can become a DevOps engineer. Typically, it is easier to transition into a DevOps role if you are a,
+Anyone with the right skillset can become a DevOps engineer. Typically, it is easier to transition into a DevOps engineer role if you are a,
 
 - Systems Engineer
 - Backend Engineer
 - Infrastructure Engineer
 
-If you are a newbie in software engineering, you are encouraged to learn the above skills and concepts. You can then apply for a DevOps intern position. You may look for vacancies in local companies or remote job boards.
+If you are one of the aspiring DevOps engineers, you are encouraged to learn the above skills and concepts. You can then apply for entry-level DevOps engineer jobs and intern DevOps positions. You may look for DevOps openings in local companies or remote job boards advertising DevOps engineer roles.
 
-Depending on your current skill set and practical experience, the time to transition into a DevOps role will vary. However, following a structured learning path will help you speed up and ease the process.
+Depending on your current skill set and practical experience, the time to transition into a DevOps role will vary. However, following a structured learning path will help you gain a head start in your DevOps career.
 
 ## What next?
 
-The [roadmap](https://roadmap.sh) simplifies the [DevOps](https://roadmap.sh/devops) journey by breaking it into learnable skills via the DevOps roadmap. To effectively use the site, I encourage you to [sign up](https://roadmap.sh/signup) on the platform and learn the desired skill by following the structured roadmap. You could explore additional roadmaps and advanced topics utilizing the search bar on the platform. The platform also allows you to:
+The roadmap simplifies the DevOps journey by breaking it into learnable skills via the [DevOps engineer roadmap](https://roadmap.sh/devops). To effectively use the site, I encourage you to [sign up](https://roadmap.sh/signup) on the platform and learn the desired skill by following the structured roadmap. You could explore additional roadmaps and advanced topics utilizing the search bar on the platform. The platform also allows you to:
 
 - Keep track of your journey as you progress through a roadmap
 - Draw your own roadmap or generate one using AI

src/data/guides/java-developer-skills.md

@@ -1,12 +1,12 @@
 ---
-title: 'Must-Have Java Full-stack Developer Skills in @currentYear@'
+title: '13 Must-Have Java Full-stack Developer Skills in @currentYear@'
 description: 'Master the essential skills every Java full stack developer needs. Boost your career with our expert tips!'
 authorId: william
 excludedBySlug: '/java/developer-skills'
 seo:
-  title: 'Must-Have Java Full-stack Developer Skills in @currentYear@'
+  title: '13 Must-Have Java Full-stack Developer Skills in @currentYear@'
   description: 'Master the essential skills every Java full stack developer needs. Boost your career with our expert tips!'
-  ogImageUrl: 'https://assets.roadmap.sh/guest/java-full-stack-developer-skills-sjzbd.png'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/java-full-stack-developer-skills-ft8ta.png'
 isNew: false
 type: 'textual'
 date: 2024-05-01
@@ -19,19 +19,39 @@ tags:
   - 'guide-sitemap'
 ---
 
-Java has been a popular programming language for the past 28 years and remains in the top four programming languages today. This is due to its use in many Java-based platforms and the growing demand for specialized Java developers in big data, machine learning, and financial services.
+![The best java full stack developer skills to learn.](https://assets.roadmap.sh/guest/java-full-stack-developer-skills-ft8ta.png)
+
+Java has been a popular programming language for the past 28 years and remains in the top four programming languages today. This is due to its use in many Java-based platforms and the growing demand for specialized [Java developers](https://roadmap.sh/java) in big data, machine learning, and financial services.
 
 If you are building web applications, the ability to work on both front-end and back-end development using Java is valuable. Fundamental and advanced Java skills such as multithreading, concurrency, JVM tuning, and object-oriented design are vital in enterprise environments.
 
-To remain competitive as a Java developer, you must continuously improve your skill sets to meet evolving industry demands.
+To remain competitive as a Java developer, you must continuously improve your skill sets to meet evolving industry demands. 
 
-This article will equip you with the skills required in 2024. You’ll understand the landscape of Java demand, adoption, diverse applications, and strategies for excelling as a Java developer. By the end of this article, you will be confident about pursuing a Java development career.
+This guide will equip you with the skills required in 2024. You’ll understand the landscape of Java demand, adoption, diverse applications, and strategies for excelling as a Java developer. By the end of this guide, you will be confident about pursuing a Java development career.
 
-## Who is a Java full stack developer?
+These are the skills we will cover in this guide:
 
-A full stack developer creates applications for software's [Front-End (client)](https://roadmap.sh/frontend) and [Back-End (server)](https://roadmap.sh/backend) development. They understand frameworks and tools for designing user interfaces (UIs) and managing application states, databases, and APIs.
+- HTML and CSS
+- JavaScript
+- TypeScript
+- Accessibility standards and compatibility
+- Java programming language
+- Database management system
+- Java frameworks
+- Version control
+- Version control providers
+- Deployment mechanism
+- Application Programming Interface (API)
+- Web Security
+- Caching
 
-### Required skills for front-end Java development
+Let’s look at these points in detail.
+
+## Top skills required as Java full stack developer
+
+The required skills can be classified into [front-end (client)](https://roadmap.sh/frontend) and [back-end (server)](https://roadmap.sh/backend) development. As a Java full stack developer, you will be required to build applications that run seamlessly on both the client and the server.
+
+## Required skills for front-end Java development
 
 Here are the front-end skills you should learn in 2024:
 
@@ -40,22 +60,41 @@ Here are the front-end skills you should learn in 2024:
 - TypeScript
 - Accessibility standards and compatibility
 
-1. **HTML and CSS:** HyperText Markup Language (HTML) is the building block for all web pages. It dictates users' content and structure when interacting with a website or application, including text, images, videos, and more. 
+![front end java development](https://assets.roadmap.sh/guest/front-end-java-development-m9zv6.JPG)
 
-   Whereas HTML provides the structure of web pages, Cascading Style Sheets (CSS) enhance their appearance and layout. CSS determines how the content on a web page is styled and presented, including aspects like colors, fonts, spacing, and more. Additionally, CSS helps you create responsive designs that adapt to various screen sizes.
+### HTML and CSS
 
-2. **JavaScript:** JavaScript is a programming language used alongside HTML and CSS to enhance the functionality and interactivity of web pages. Whereas HTML and CSS are responsible for creating the structure and design of web pages, [JavaScript](https://roadmap.sh/javascript) adds dynamic elements such as content updates, animations, 2D/3D graphics, and other interactive features. Over the years, JavaScript has evolved significantly, introducing powerful frameworks such as [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), and [Angular](https://roadmap.sh/angular), among others. These frameworks empower you to build software ranging from small applications to large-scale enterprise systems.
+HyperText Markup Language (HTML) is the building block for all web pages. It dictates users' content and structure when interacting with a website or application, including text, images, videos, and more.
 
-3. **TypeScript**: Typescript is an extension of JavaScript with static typing and other advanced features. [TypeScript](https://roadmap.sh/typescript) code transpiles to JavaScript and can run seamlessly wherever JavaScript runs, making it a highly versatile programming language for front-end development. The knowledge enhances your productivity by allowing you to build robust applications, detect errors, and catch issues as they happen.
+Whereas HTML provides the structure of web pages, Cascading Style Sheets (CSS) enhance their appearance and layout. CSS determines how the content on a web page is styled and presented, including aspects like colors, fonts, spacing, and more. Additionally, CSS helps you create responsive designs that adapt to various screen sizes.
 
-4. **Accessibility standards and compatibility:** As a Java full stack developer, having a solid understanding of accessibility and browser compatibility is important. The knowledge enables you to create web applications usable by people with disabilities, promoting inclusivity, complying with accessibility regulations, and ensuring a solid user experience.
+![HTML and CSS](https://assets.roadmap.sh/guest/html-and-css-kktts.JPG)
 
-### Required skills for back-end Java development
+### JavaScript
+
+JavaScript is a programming language used alongside HTML and CSS to enhance the functionality and interactivity of web pages. Whereas HTML and CSS are responsible for creating the structure and design of web pages, [JavaScript](https://roadmap.sh/javascript) adds dynamic elements such as content updates, animations, 2D/3D graphics, and other interactive features. Over the years, JavaScript has evolved significantly, introducing powerful frameworks such as [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), and [Angular](https://roadmap.sh/angular), among others. These frameworks empower you to build software ranging from small applications to large-scale enterprise systems.
+
+![JavaScript](https://jbstechinfo.com/wp-content/uploads/2023/08/JavaScript-Symbol.png)
+
+### TypeScript
+
+Typescript is an extension of JavaScript with static typing and other advanced features. [TypeScript](https://roadmap.sh/typescript) code transpiles to JavaScript and can run seamlessly wherever JavaScript runs, making it a highly versatile programming language for front-end development. The knowledge enhances your productivity by allowing you to build robust applications,  detect errors, and catch issues as they happen.
+
+![TypeScript](https://media.licdn.com/dms/image/D4D12AQHLiHtRbPUoAA/article-cover_image-shrink_600_2000/0/1696134741709?e=2147483647&v=beta&t=CajO9eTDp6iKznPn753F6ZUyTgaPf6DOzihN1AMMJew)
+
+### Accessibility standards and compatibility
+
+As a Java full-stack web developer, having a solid understanding of accessibility and browser compatibility is important. The knowledge enables you to create web applications usable by people with disabilities, promoting inclusivity, complying with accessibility regulations, and ensuring a solid user experience.
+
+![Accessibility](https://t3.ftcdn.net/jpg/05/42/09/62/360_F_542096212_pgNANUD1JMjdifjHQZ6LDK9s98TQENFP.jpg)
+
+## Required skills for back-end Java development
 
 Here are the back-end skills you should learn in 2024:
 
+- Java programming language
+- Database management system
 - Java frameworks
-- Database management
 - Version control
 - Version control providers
 - Deployment mechanism
@@ -63,23 +102,49 @@ Here are the back-end skills you should learn in 2024:
 - Web Security
 - Caching
 
-1. **Java frameworks:** Frameworks are pre-written and thoroughly tested collections of code, classes, components, templates, and other structures that you can utilize to streamline the development process of applications. They come equipped with standard functionalities such as security measures, data retrieval mechanisms, and predefined project structures. Leveraging frameworks allows you to build applications more efficiently without starting from scratch or recreating existing solutions. 
+### Java programming language: 
 
-    While Java has several frameworks for building full stack applications, it's crucial to consider each framework's associated pros and cons, adoption rates, and how effectively they address the intended business requirements. One particularly renowned framework is the Java [Spring Boot](https://roadmap.sh/spring-boot), celebrated for simplifying the development process for small-scale and enterprise-level Java applications. In addition to its user-friendliness, it boasts a vast ecosystem and a thriving community of developers.
+A deep understanding of Java fundamentals is essential to becoming a full stack developer. Having a strong grasp of Java's core concepts, such as classes, inheritance, abstraction, etc., is crucial for developing full stack applications running on the web or mobile platforms. Java's versatility and robustness make it a popular choice for backend development, and proficiency in Java allows developers to build scalable and secure server-side components for their applications. Some popular database management systems are MySQL, SQL, PostgreSQL, MongoDB, and Oracle.
 
-2. **Database management:** The choice of database and data storage methods significantly impacts how data is retrieved and utilized in applications. You must consider various factors, such as whether to use a NoSQL or SQL database, employ stored procedures or Object Relational Mapping (ORM), and opt for self-hosting or cloud-based hosting. It's essential to address these questions in your journey toward full stack development.
+### Database management system
 
-3. **Version control:** Version control facilitates teamwork by allowing you and your team members to collaborate on a project simultaneously. It enables the management of changes to code and files over time without disrupting the workflow. In your full stack journey, it's crucial to grasp version control features like branching, pull requests, merge requests, commits, commit history, and more.
+The choice of database and data storage methods significantly impacts how data is retrieved and utilized in applications. You must consider various factors, such as whether to use a NoSQL or SQL database, employ stored procedures or Object Relational Mapping (ORM), and opt for self-hosting or cloud-based hosting. It's essential to address these questions in your journey to become a full stack developer.
 
-4. **Version control providers**: Popular providers like [GitHub](http://github.com/) offer unique tools, such as user interfaces (UIs) and Command Line Interfaces (CLIs), for individuals and organizations to effectively manage and collaborate on code. Additionally, they offer a platform to search for and contribute to open-source projects, serving as a valuable resource for your learning and giving back to the community.
+### Java frameworks
 
-5. **Deployment mechanism:** The ultimate objective of application development is to deliver accessible solutions to end users. Deploying software involves various steps, such as packaging, configuring, releasing, and monitoring. Although these processes can overlap and business requirements may evolve, it is crucial to establish a reliable mechanism for building, testing, and deploying code to meet the desired objectives. In your journey as a full stack web developer, your responsibilities extend beyond creating applications. You must have a good understanding of tools such as [Docker](https://roadmap.sh/docker), [Kubernetes](https://roadmap.sh/kubernetes), and Jenkins and be proficient in [DevOps](https://roadmap.sh/devops) best practices. Additionally, familiarity with popular cloud platforms like Azure, [AWS](https://roadmap.sh/aws), and GCP is essential for efficient deployment and scalability of applications.
+Frameworks are pre-written and thoroughly tested collections of code, classes, components, templates, and other structures that you can utilize to streamline the development process of applications. They come equipped with standard functionalities such as security measures, data retrieval mechanisms, and predefined project structures. Leveraging frameworks allows you to build applications more efficiently without starting from scratch or recreating existing solutions.
 
-6. **Application Programming Interfaces (APIs)**: APIs are rules and protocols that allow different software applications to communicate with each other. They give access to services or functionality other software systems provide, enabling developers to integrate these capabilities into their applications without understanding the underlying implementation details. A solid understanding of how APIs work, the standards they follow, and how they are exposed for utilization is important in full stack development.
+While Java has several frameworks for building full stack applications, it's crucial to consider each framework's associated pros and cons, adoption rates, and how effectively they address the intended business requirements. One particularly renowned framework is the Java [Spring](https://roadmap.sh/spring-boot) framework, celebrated for simplifying the web development process for small-scale and enterprise-level Java applications. In addition to its user-friendliness, it boasts a vast ecosystem and a thriving community of developers.
 
-7. **Web security**: As a Java full-stack developer, a good understanding of protecting web resources is essential. Knowing when to utilize tools like JSON Web Token (JWT), OAuth, and [API security best practices](https://roadmap.sh/best-practices/api-security) is crucial. Knowing when to build solutions from scratch or leverage third-party offerings based on project requirements is key to successful development.
+### Version control 
 
-8. **Caching**: Caching is the process of storing data so that future requests for that same data can be served faster. It typically involves using temporary storage that sits between the front-end and the back-end. Caching speeds up application performance, increases efficiency, and enhances overall user experience. As a Java full-stack developer, having a solid understanding of caching techniques and technologies like Redis is crucial.
+Version control systems facilitates teamwork by allowing you and your team members to collaborate on a project simultaneously. It enables the management of changes to code and files over time without disrupting the workflow.
+
+In your full stack journey, it's crucial to grasp version control features like branching, pull requests, merge requests, commits, commit history, and more.
+
+### Version control providers
+
+One of the essential Java full stack developer skills is familiarity with popular providers like [GitHub](http://github.com/) offer unique tools, such as user interfaces (UIs) and Command Line Interfaces (CLIs), for individuals and organizations to effectively manage and collaborate on code. Additionally, they offer a platform to search for and contribute to open-source projects, serving as a valuable resource for your learning and giving back to the community.
+
+### Deployment mechanism
+
+The ultimate objective of application development is to deliver accessible solutions to end users. Deploying software involves various steps, such as packaging, configuring, releasing, and monitoring. Although these processes can overlap and business requirements may evolve, it is crucial to establish a reliable mechanism for building, testing, and deploying code to meet the desired objectives.
+
+In your journey as a full stack java developer, your responsibilities extend beyond creating applications. You must have a good understanding of tools such as [Docker](https://roadmap.sh/docker), [Kubernetes](https://roadmap.sh/kubernetes), and Jenkins and be proficient in [DevOps](https://roadmap.sh/devops) best practices. Additionally, familiarity with popular cloud platforms like Azure, [AWS](https://roadmap.sh/aws), and GCP is essential for efficient deployment and scalability of applications.
+
+### Application Programming Interfaces (APIs)
+
+APIs are rules and protocols that allow different software applications to communicate with each other. They give access to services or functionality other software systems provide, enabling developers to integrate these capabilities into their applications without understanding the underlying implementation details. A solid understanding of how APIs work, the standards they follow, and how they are exposed for utilization is important in full stack development.
+
+### Web security
+
+One of a Java developer's key skills is having a good understanding of how to protect web resources. Knowing when to utilize tools like JSON Web Token (JWT), OAuth, and [API security best practices](https://roadmap.sh/best-practices/api-security) is crucial. Deciding when to build solutions from scratch or leverage third-party offerings based on project requirements is key to successful development.
+
+![Web security](https://assets.roadmap.sh/guest/web-security-g8b4s.JPG)
+
+### Caching
+
+Caching is the process of storing data so that future requests for that same data can be served faster. It typically involves using temporary storage that sits between the front-end and the back-end. Caching speeds up application performance, increases efficiency, and enhances overall user experience. As a Java full-stack developer, having a solid understanding of caching techniques and technologies like Redis is crucial.
 
 ## How to stand out as a Java full stack developer
 
@@ -99,15 +164,19 @@ The JVM is a virtual machine that loads, verifies, and executes Java programs. I
 
 ### Jakarta Server Pages
 
-Jakarta Server Pages (JSP), previously known as Java Server Pages, is a suite of technologies that enables you to generate dynamic web pages. It facilitates the integration of Java code within static web markup, which is then compiled and executed on the server to deliver dynamic content.
+Jakarta Server Pages (JSP), previously known as Java Server Pages, is a suite of technologies that enables you to generate dynamic web pages. It facilitates the integration of Java code within static web markup, which is then compiled and executed on the server to deliver dynamic web applications.
+
+![Jakarta server pages](https://jakarta.ee/images/jakarta/jakarta-ee-logo-color.svg)
 
 ### Front-end frameworks
 
-While Java can work with HTML, CSS, and JavaScript, there are scenarios where businesses need a clear separation between front-end and back-end development. This requirement could arise from diverse factors such as deployment strategies, continuous delivery pipelines, virtual (2D/3D) rendering demands, and performance optimizations. Therefore, knowledge of popular front-end frameworks like [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), [Angular](https://roadmap.sh/angular), etc. is critical.
+While Java can work with HTML, CSS, and JavaScript, there are scenarios where businesses need a clear separation between front-end and back-end development. This requirement could arise from diverse factors such as deployment strategies, continuous delivery pipelines, virtual (2D/3D) rendering demands, dynamic user interfaces, and performance optimizations. Therefore, knowledge of popular JavaScript frameworks like [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), [Angular](https://roadmap.sh/angular), etc. is critical for building scalable user interfaces.
+
+![react, angular & vue logos](https://assets.roadmap.sh/guest/react-angular-vue-logos-se584.png)
 
 ### Design patterns
 
-Design patterns are proven approaches to solving specific design challenges and promoting code reusability, maintainability, and scalability. A solid understanding of patterns like dependency injection, factory method patterns, builder patterns, etc., will prove invaluable when addressing common software design problems encountered during application development. These patterns provide developers with established solutions and best practices for effectively structuring their code and solving recurring design issues.
+Design patterns are proven approaches to solving specific design challenges and promoting code reusability, maintainability, and scalability. A solid understanding of software architecture patterns like dependency injection, factory method patterns, builder patterns, etc., will prove invaluable when addressing common software design problems encountered during application development. These patterns provide developers with established solutions and best practices for effectively structuring their code and solving recurring design issues.
 
 ### Community
 
@@ -129,25 +198,27 @@ While staying informed about changes in the ecosystem can be overwhelming, espec
 
 Developed by James Gosling at [Sun Microsystems](https://en.wikipedia.org/wiki/Sun_Microsystems) in the 1990s, Java initially targeted interactive television but transitioned to Internet programming for its advanced features. The public release of Java 1.0 in 1996 introduced "[write once, run anywhere](https://en.wikipedia.org/wiki/Write_once,_run_anywhere)" (WORA), offering no-cost runtimes across platforms and revolutionizing software development. Since then, Java has evolved significantly with numerous versions, runtimes, and platform support.
 
-![Evolution of Java](https://assets.roadmap.sh/guest/evolution-of-java-xjbal.jpeg)
+![Java adoption](https://assets.roadmap.sh/guest/java-adoption-tq5x4.jpeg)
 
-The WORA mantra empowers developers to write Java programs capable of running on any device. These programs are compiled into standard bytecode, which allows them to execute on any device equipped with a [Java virtual machine](https://en.wikipedia.org/wiki/Java_virtual_machine). Due to its seamless cross-platform compatibility, Java has been widely adopted for building applications on various platforms, including web, mobile, and other digital devices. Below are some areas where Java has been massively adopted beyond its general usage:
+The WORA mantra empowers developers to write Java programs that are capable of running on any device. These programs are compiled into standard bytecode, which allows them to execute on any device equipped with a [Java virtual machine](https://en.wikipedia.org/wiki/Java_virtual_machine). Due to its seamless cross-platform compatibility, Java has been widely adopted for building applications on various platforms, including web, mobile, and other digital devices. Below are some areas where Java has been massively adopted beyond its general usage:
 
 ### Java in virtual reality, augmented reality, and mixed reality
 
 Java has also been widely adopted for building applications that support interactivity and immersive experiences, particularly in the realms of virtual reality (VR), augmented reality (AR), and mixed reality (XR).
 
-For example, in e-commerce, developers can use Java’s capabilities to create realistic and virtual environments that allow customers to visualize how different clothing items and footwear will look on them before making a purchase.
+For example, in e-commerce, full stack developers can use Java’s capabilities to create realistic and virtual environments that allow customers to visualize how different clothing items and footwear will look on them before making a purchase.
 
 ### Java in AI
 
 Another field in which Java is gaining adoption is AI. Java's maintainability, object-oriented approach, enhanced security, garbage collection, and platform independence have positioned it as a vital tool for modeling and powering AI applications. These features make Java well-suited for developing robust and scalable AI solutions that can effectively handle complex data processing and analysis tasks.
 
+![Java usage](https://assets.roadmap.sh/guest/java-usage-8bazm.JPG)
+
 ## What is the demand for Java developers?
 
 According to Statista, [Java is one of the most widely embraced programming languages among developers,](https://www.statista.com/statistics/793628/worldwide-developer-survey-most-used-languages/) owing to its speed, security, and reliability. Its versatility has led to widespread adoption across industries, including big data, banking, retail, and stock markets.
 
-![Most used programming language statistics](https://assets.roadmap.sh/guest/most-used-programming-languages.png)
+![Most used programming language statistics](https://assets.roadmap.sh/guest/most-used-programming-languages-lqmoo.png)
 
 Based on the recently concluded [Stack Overflow survey](https://survey.stackoverflow.co/2023/#technology), it was found that 30.49% of the respondents utilize Java in their professional endeavors, while 35.17% are in the process of adopting Java to fulfill their programming needs.
 

src/data/question-groups/backend/backend.md

@@ -222,6 +222,8 @@ questions:
       - 'Advanced'
 ---
 
+![The best backend interview questions to prepare for.](https://assets.roadmap.sh/guest/backend-developer-interview-questions-pm9jx.jpg)
+
 Getting ready for a software developer interview is never easy, especially if you’re new to the main tech stack of the company. This is why understanding the type of questions you might get asked during a technical interview is one of the keys to success.
 
 In this article, we’ll go over 50 popular backend interview questions ordered by experience level.

src/data/roadmaps/android/content/recycleview@xIvplWfe-uDr9iHjPT1Mx.md

@@ -0,0 +1,10 @@
+# RecyclerView
+
+RecyclerView is the most commonly used and powerful list management tool in Android development. Witch makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and the RecyclerView library dynamically creates the elements when they're needed.
+
+As the name implies, RecyclerView recycles those individual elements. When an item scrolls off the screen, RecyclerView doesn't destroy its view. Instead, RecyclerView reuses the view for new items that have scrolled onscreen. RecyclerView improves performance and your app's responsiveness, and it reduces power consumption.
+
+Learn more from the following resources:
+
+- [@article@Android Developers: Create dynamic lists with RecyclerView](https://developer.android.com/develop/ui/views/layout/recyclerview)
+

src/data/roadmaps/angular/angular.md

@@ -1,7 +1,8 @@
 ---
 jsonUrl: '/jsons/roadmaps/angular.json'
 pdfUrl: '/pdfs/roadmaps/angular.pdf'
-order: 3
+renderer: 'editor'
+order: 4
 briefTitle: 'Angular'
 briefDescription: 'Step by step guide to become a Angular Developer in 2024'
 title: 'Angular Developer'
@@ -9,7 +10,7 @@ description: 'Everything that is there to learn about Angular and the ecosystem
 hasTopics: true
 dimensions:
   width: 968
-  height: 2277.8
+  height: 3330
 schema:
   headline: 'Angular Developer Roadmap'
   description: 'Learn how to become a Angular Developer with this interactive step by step guide in 2024. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'

src/data/roadmaps/angular/content/100-typescript-basics/100-what-is-typescript.md

@@ -1,11 +0,0 @@
-# What is Typescript
-
-TypeScript is a strongly typed, object-oriented, compiled programming language that builds on JavaScript. It is a superset of the JavaScript language, designed to give you better tooling at any scale. TypeScript calls itself “JavaScript with syntax for types.” In short, it is JavaScript with some additional features. The secret to the success of TypeScript is in the type checking, ensuring that the data flowing through the program is of the correct kind of data.
-
-Visit the following resources to learn more:
-
-- [@article@What is TypeScript](https://thenewstack.io/what-is-typescript/)
-- [@article@W3Schools – TypeScript Tutorial](https://www.w3schools.com/typescript/)
-- [@article@Tutorials point – TypeScript Tutorial](https://www.tutorialspoint.com/typescript/index.htm)
-- [@video@TypeScript Crash Course for Beginners](https://www.youtube.com/watch?v=d56mG7DezGs)
-- [@feed@Explore top posts about TypeScript](https://app.daily.dev/tags/typescript?ref=roadmapsh)

src/data/roadmaps/angular/content/100-typescript-basics/101-why-use-typescript.md

@@ -1,15 +0,0 @@
-# Why use TypeScript
-
-TypeScript extends JavaScript, providing a better developer experience. The benefits of using TypeScript over JavaScript include:
-
-- **Static typing** – TypeScript comes with optional static typing and a type inference system, which means that a variable declared with no type may be inferred by TypeScript based on its value.
-- **Object-oriented programming** – TypeScript supports object-oriented programming concepts like classes, inheritance, etc.
-- **Compile time checks** – JavaScript is an interpreted programming language. There is no compilation involved. Hence, the errors get caught during the runtime. Since TypeScript compiles into JavaScript, errors get reported during the compile time rather than the runtime.
-- **Code editor support** – IDEs or code editors like VS Code support autocomplete for a TypeScript codebase. They also provide inline documentation and highlight the errors.
-- **Integration with existing JavaScript Packages** – You might want to use an npm package written in JavaScript. Since TypeScript is a superset of JavaScript, you can import and use that package. Moreover, the TypeScript community creates and maintains type definitions for popular packages that can be utilized in your project.
-
-Visit the following resources to learn more:
-
-- [@article@linguinecode - Reasons to use TypeScript](https://linguinecode.com/post/5-reasons-why-to-use-typescript)
-- [@article@Codemotion - Reasons to use TypeScript](https://www.codemotion.com/magazine/backend/why-you-should-use-typescript-for-your-next-project/)
-- [@feed@Explore top posts about TypeScript](https://app.daily.dev/tags/typescript?ref=roadmapsh)

src/data/roadmaps/angular/content/100-typescript-basics/102-structural-typing.md

@@ -1,11 +0,0 @@
-# Structural Typing
-
-Type compatibility in TypeScript is based on structural subtyping. `Structural typing` is a way of relating types based solely on their members. This is in contrast with nominal typing.
-
-TypeScript’s structural type system was designed based on how JavaScript code is typically written. Because JavaScript widely uses anonymous objects like function expressions and object literals, it’s much more natural to represent the relationships found in JavaScript libraries with a structural type system instead of a nominal one.
-
-Visit the following resources to learn more:
-
-- [@article@Structural typings — Medium](https://medium.com/redox-techblog/structural-typing-in-typescript-4b89f21d6004)
-- [@article@Structural typings — Typescriptlang](https://www.typescriptlang.org/docs/handbook/type-compatibility.html)
-- [@video@Structural typing video for Beginners](https://www.youtube.com/watch?v=kWtwsX_rT3k)

src/data/roadmaps/angular/content/100-typescript-basics/103-type-inference.md

@@ -1,8 +0,0 @@
-# Type Inference
-
-In TypeScript, several places where `type inference` is used to provide type information when there is no explicit type annotation. The type of the x variable is inferred to be a number. This inference occurs when variables and members are initialized, set parameter default values are, and determine function return types. For example, `let x: number`. In most cases, type inference is straightforward. In the following sections, we’ll explore some nuances in how types are inferred. For example, `let x: (number | null)[]`
-
-Visit the following resources to learn more:
-
-- [@article@Type Inference - typescriptlang](https://www.typescriptlang.org/docs/handbook/type-inference.html)
-- [@video@Type Inference video for Beginners](https://www.youtube.com/watch?v=3ui_st7rtfA)

src/data/roadmaps/angular/content/100-typescript-basics/104-union-types.md

@@ -1,9 +0,0 @@
-# Union Types
-
-In TypeScript, we can define a variable that can have multiple types of values. In other words, TypeScript can combine one or two types of data (i.e., number, string, etc.) in a single type, a union type. Union types are a powerful way to express a variable with multiple types. Two or more data types can be combined using the pipe ('|') symbol between the types. For example, `(type1 | type2 | type3 | .. | typeN)`.
-
-Visit the following resources to learn more:
-
-- [@article@Union Types - typescriptlang](https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html)
-- [@video@Union Type video for Beginners](https://www.youtube.com/watch?v=uxjpm4W5pCo)
-- [@article@Union Types - typescriptlang](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types)

src/data/roadmaps/angular/content/100-typescript-basics/105-builtin-types.md

@@ -1,8 +0,0 @@
-# Builtin Types
-
-The Builtin types represent the different types of values supported by the language. The builtin types check the validity of the supplied values before they are stored or manipulated by the program. This ensures that the code behaves as expected. The Builtin types further allow for richer code hinting and automated documentation too.
-
-Visit the following resources to learn more:
-
-- [@article@TypeScript Types - Tutorialspoint](https://www.tutorialspoint.com/typescript/typescript_types.htm)
-- [@video@Builtin Type video for Beginners](https://www.youtube.com/watch?v=Nt9ajBrqV_M)

src/data/roadmaps/angular/content/100-typescript-basics/106-type-guard.md

@@ -1,12 +0,0 @@
-# Type Guard
-
-A type guard is a TypeScript technique used to get information about the type of a variable, usually within a conditional block. Type guards are regular functions that return a boolean, taking a type and telling TypeScript if it can be narrowed down to something more specific. Type guards have the unique property of assuring that the value tested is of a set type depending on the returned boolean.
-
-TypeScript uses built-in JavaScript operators like `typeof`, `instanceof`, and the `in` operator, which is used to determine if an object contains a property. Type guards enable you to instruct the TypeScript compiler to infer a specific type for a variable in a particular context, ensuring that the type of an argument is what you say it is.
-
-Type guards are typically used for narrowing a type and are pretty similar to feature detection, allowing you to detect the correct methods, prototypes, and properties of a value. Therefore, you can quickly figure out how to handle that value.
-
-Visit the following resources to learn more:
-
-- [@article@Types Guards - Blog](https://blog.logrocket.com/how-to-use-type-guards-typescript/)
-- [@video@TypeScript Type Guards Explained](https://www.youtube.com/watch?v=FEeEItMtDwg)

src/data/roadmaps/angular/content/100-typescript-basics/index.md

@@ -1,9 +0,0 @@
-# Typescript Basics
-
-In order to enter into the world of Angular application development, typescript is necessary and it is the primary language here. Typescript is a superset of JavaScript. It comes with design-time support which is useful for type safety and tooling. Since, browsers cannot execute the TypeScript directly, it will be 'Transpiled' into JavaScript using the tsc compiler.
-
-Visit the following resources to learn more:
-
-- [@article@Typescript a Beginners Guide](https://medium.com/jspoint/typescript-a-beginners-guide-6956fe8bcf9e)
-- [@article@TypeScript Playground](https://www.typescriptlang.org/play)
-- [@feed@Explore top posts about TypeScript](https://app.daily.dev/tags/typescript?ref=roadmapsh)

src/data/roadmaps/angular/content/101-rxjs-basics/102-marble-diagrams.md

@@ -1,10 +0,0 @@
-# Marble Diagrams
-
-Marble testing allows you to test asynchronous RxJS code synchronously and step-by-step with the help of RxJS TestScheduler test utility and using virtual time steps.
-
-Visit the following resources to learn more:
-
-- [@article@Understanding Marble Diagrams for Reactive Streams](https://medium.com/@jshvarts/read-marble-diagrams-like-a-pro-3d72934d3ef5)
-- [@article@Interactive Diagrams](https://rxmarbles.com/#from)
-- [@video@How to Read RxJS Marble Diagrams](https://www.youtube.com/watch?v=m6jkzIHMEdg)
-- [@video@Observables Part 4 - Marble Diagrams](https://www.youtube.com/watch?v=wXcPenSfdo0)

src/data/roadmaps/angular/content/102-angular-basics/100-angularjs-vs-angular.md

@@ -1,9 +0,0 @@
-# AngularJS vs. Angular
-
-AngularJS was the older version of Angular, whose support officially ended in January 2022. Angular is a component-based front-end development framework built on TypeScript, which includes a collection of well-integrated libraries that include features like routing, forms management, client-server communication, and more.
-
-Visit the following resources to learn more:
-
-- [@official@AngularJS Website](https://angularjs.org/)
-- [@official@Official - Welcome to the Angular tutorial](https://angular.dev/tutorials/learn-angular)
-- [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)

src/data/roadmaps/angular/content/102-angular-basics/index.md

@@ -1,5 +0,0 @@
-# Angular Basics
-
-Angular is an strong front-end JavaScript framework which means that it enforces a certain style of application development and project structure that developers need to follow to develop apps with Angular. However, it also offers enough flexibility to allow you to structure your project in an understandable and manageable manner.
-
-In this module, we will have a look at some of the most basic concepts that you need to understand before diving into the framework with more advanced concepts.

src/data/roadmaps/angular/content/103-angular-cli/100-ng-build.md

@@ -1,8 +0,0 @@
-# Ng build
-
-The command can be used to build a project of type "application" or "library". When used to build a library, a different builder is invoked, and only the ts-config, configuration, and watch options are applied. All other options apply only to building applications.
-
-Visit the following resources to learn more:
-
-- [@official@Angular CLI - ng build](https://angular.dev/cli/build)
-- [@video@Building an Angular project](https://www.youtube.com/watch?v=VB6WuCPDwz0)

src/data/roadmaps/angular/content/103-angular-cli/101-ng-serve.md

@@ -1,8 +0,0 @@
-# Ng serve
-
-ng serve — This command builds, deploy, serves and every time watches your code changes. if find any change in code it builds and serves that code automatically. How do Angular builds? After coding our Angular apps using TypeScript, we use the Angular CLI command to build the app.
-
-Visit the following resources to learn more:
-
-- [@official@Angular CLI - ng serve](https://angular.dev/cli/serve)
-- [@video@Running a project with ng serve](https://www.youtube.com/watch?v=-w-RfHcLt5U)

src/data/roadmaps/angular/content/103-angular-cli/102-ng-generate.md

@@ -1,8 +0,0 @@
-# Ng generate
-
-ng generate is used to create the component in angular project. These are the two main ways to generate a new component in Angular: using ng g c <component_name>, and using ng generate component <component_name>. Using either of these two commands, the new component can be generated pretty easily and followed by the suitable component name of your choice.
-
-Visit the following resources to learn more:
-
-- [@official@Angular CLI - ng generate](https://angular.dev/cli/generate)
-- [@video@Angular cli generate component](https://www.youtube.com/watch?v=NlHlu_zzmo4)

src/data/roadmaps/angular/content/103-angular-cli/103-ng-test.md

@@ -1,10 +0,0 @@
-# Ng test
-
-ng test is used to runs unit tests in angular project.
-
-`ng test <project> [options]` | `ng t <project> [options]`
-
-Visit the following resources to learn more:
-
-- [@official@Angular CLI - ng test](https://angular.dev/cli/test)
-- [@video@Angular Ng test commands](https://www.youtube.com/watch?v=n1O_eRwzRKA)

src/data/roadmaps/angular/content/103-angular-cli/104-ng-e2e.md

@@ -1,9 +0,0 @@
-# Ng e2e
-
-End-to-end testing (E2E) of Angular applications is performed using the Protractor testing framework, which is created by the Angular team themselves. Protractor can perform end to end tests on Angular applications that are running in a real browser by interacting with it, similar to that of an end-user.
-
-Visit the following resources to learn more:
-
-- [@official@Angular CLI - ng e2e](https://angular.dev/cli/e2e)
-- [@video@Angular cli generate component](https://www.youtube.com/watch?v=3vFnhzEGfew)
-- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh)

src/data/roadmaps/angular/content/103-angular-cli/105-ng-new.md

@@ -1,12 +0,0 @@
-# Ng new
-
-`$ ng new [name]`
-
-That’s the default usage of the command and creating a new project folder with name. The project which is created in that folder is containing:
-
-The default Angular project, All dependencies installed in node_modules folder , Testing files for each components
-
-Visit the following resources to learn more:
-
-- [@official@Angular CLI - ng new](https://angular.dev/cli/new)
-- [@video@ng New command](https://www.youtube.com/watch?v=NdEpZezptkQ)

src/data/roadmaps/angular/content/104-templates/index.md

@@ -1,7 +0,0 @@
-# Templates
-
-A template is a form of HTML that tells Angular how to render the component.
-
-Visit the following resources to learn more:
-
-- [@official@Anatomy of a component](https://angular.dev/guide/components)

src/data/roadmaps/angular/content/105-rendering-topics/index.md

@@ -1 +0,0 @@
-# Rendering topics

src/data/roadmaps/angular/content/107-routing/index.md

@@ -1,8 +0,0 @@
-# Routing
-
-Routing in Angular allows the users to create a single-page application with multiple views and navigation between them. Users can switch between these views without losing the application state and properties.
-
-Visit the following resources to learn more:
-
-- [@official@Angular Routing](https://angular.dev/guide/routing)
-- [@video@Angular Tutorial - Routing and Navigation](https://www.youtube.com/watch?v=Nehk4tBxD4o)

src/data/roadmaps/angular/content/108-services-remote-data/100-dependency-injection.md

@@ -1,9 +0,0 @@
-# Dependency Injection
-
-Dependency Injection (DI) is a design pattern that creates the dependencies of a class and provides those objects to the class when required. Angular being a nice framework, provides a built-in dependency injection mechanism that creates and provides a runtime version of a dependency value using dependency injectors.
-
-Visit the following resources to learn more:
-
-- [@official@Understanding dependency injection](https://angular.dev/guide/di/dependency-injection)
-- [@video@Introduction of Dependency injection](https://www.youtube.com/watch?v=OFPIGlxunL0)
-- [@feed@Explore top posts about Dependency Injection](https://app.daily.dev/tags/dependency-injection?ref=roadmapsh)

src/data/roadmaps/angular/content/108-services-remote-data/index.md

@@ -1,8 +0,0 @@
-# Services
-
-Components shouldn't fetch or save data directly and shouldn't knowingly present fake data. They should focus on presenting data and delegate data access to a service. Service is where all the remote API calls exist to retrieve and provide data to components.
-
-Visit the following resources to learn more:
-
-- [@official@Creating an injectable service](https://angular.dev/guide/di/creating-injectable-service)
-- [@official@Understanding communicating with backend services using HTTP](https://angular.dev/guide/http)

src/data/roadmaps/angular/content/112-creating-a-custom-x/103-standalone-component.md

@@ -1,7 +0,0 @@
-# Standalone Component
-
-Standalone components provide a simplified way to build Angular applications. Standalone components, directives, and pipes aim to streamline the authoring experience by reducing the need for NgModules. Existing applications can optionally and incrementally adopt the new standalone style without any breaking changes.
-
-Visit the following resources to learn more:
-
-- [@official@Angular Website](https://angular.dev/guide/components/importing)

src/data/roadmaps/angular/content/112-creating-a-custom-x/index.md

@@ -1,3 +0,0 @@
-# Creating a custom X
-
-Learn how to create custom pipes, libraries and directives in Angular.

src/data/roadmaps/angular/content/113-angular-ssr/100-angular-universal.md

@@ -1,9 +0,0 @@
-# Angular universal
-
-Angular Universal also known as server-side rendering is tool which allows server to pre-render Angular application while user hits your website for first time.
-
-Visit the following resources to learn more:
-
-- [@official@Angular Website](https://angular.dev/guide/ssr)
-- [@opensource@Github Repository](https://github.com/angular/universal)
-- [@feed@Explore top posts about Angular](https://app.daily.dev/tags/angular?ref=roadmapsh)

src/data/roadmaps/angular/content/114-angular-ssg/100-scully.md

@@ -1,8 +0,0 @@
-# Scully
-
-Scully is the best static site generator for Angular projects looking to embrace the Jamstack. It will use your application and will create a static index. html for each of your pages/routes.
-
-Visit the following resources to learn more:
-
-- [@official@Scully Website](https://scully.io/)
-- [@opensource@Github Repository](https://github.com/scullyio/scully)

src/data/roadmaps/angular/content/accessibility@VNG9DdXlS6R1OJ6Lrn4Lt.md

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

src/data/roadmaps/angular/content/analogjs@kauQofxCmpktXPcnzid17.md

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

src/data/roadmaps/angular/content/angular-and-history@hpShWwL0M57ZAzqkB4I8t.md

@@ -0,0 +1 @@
+# Angular and History

src/data/roadmaps/angular/content/angular-architecture@DE3cMpeRYuUPw2ADtfS-3.md

@@ -0,0 +1 @@
+# Angular Architecture

src/data/roadmaps/angular/content/animation@rYJq59Q0YdfK6n3x740Em.md

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

src/data/roadmaps/angular/content/aot-compilation@MwtM1UAIfj4FJ-Y4CKDsP.md

@@ -0,0 +1 @@
+# AoT Compilation

src/data/roadmaps/angular/content/atributes@0FvH7KPs9ag02QkD1HEJ-.md

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

src/data/roadmaps/angular/content/attribute-directives@xvwby0FTdIolRrV2j88fY.md

@@ -0,0 +1 @@
+# Attribute Directives

src/data/roadmaps/angular/content/attributes-binding@FgsSyM6To7irpbivtOLEE.md

@@ -0,0 +1 @@
+# Attributes Binding

src/data/roadmaps/angular/content/build-environments@Ax-s_xw3FO3Ocv-AnLbQD.md

@@ -0,0 +1 @@
+# Build Environments

src/data/roadmaps/angular/content/case@cHC2MH50CbUSMRZV4QGJI.md

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

src/data/roadmaps/angular/content/changedetection@uYHy2yhtTm6fQkKpYx3lU.md

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

src/data/roadmaps/angular/content/cli-builders@TeWEy9I-hU6SH02Sy2S2S.md

@@ -0,0 +1 @@
+# CLI Builders

src/data/roadmaps/angular/content/code-coverage@bqA2bxPcZrqQ-6QE-YDK1.md

@@ -0,0 +1 @@
+# Code Coverage

src/data/roadmaps/angular/content/common-pipes@i2taHzQ5KLHjkkpbH4Ytd.md

@@ -0,0 +1 @@
+# Common Pipes

src/data/roadmaps/angular/content/communication@19c7D-fWIJ3vYFT6h8ZfN.md

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

src/data/roadmaps/angular/content/complex-sequences@Unjknmb4b2LY-nUVvvF7_.md

@@ -0,0 +1 @@
+# Complex Sequences