Fix UI of the discover page

* Added Tanstack Router

* Added Jotai JS to react roadmap

* Added MobX(React State Management Library) to React roadmap

---------

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

.astro/settings.json

@@ -3,6 +3,6 @@
 		"enabled": false
 	},
 	"_variables": {
-		"lastUpdateCheck": 1720119515249
+		"lastUpdateCheck": 1722461514438
 	}
 }

.github/ISSUE_TEMPLATE/05-project-contribution.yml

@@ -0,0 +1,35 @@
+name: "🙏 ​ ​Submit a Project Idea"
+description: Help us add project ideas to roadmaps.
+labels: [project contribution]
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to submit a project idea! Please fill out the information below and we'll get back to you as soon as we can.
+  - type: input
+    id: roadmap-title
+    attributes:
+      label: What Roadmap is this project for?
+      placeholder: e.g. Backend Roadmap
+    validations:
+      required: true
+  - type: select
+    id: project-difficulty
+    attributes:
+      label: Project Difficulty
+      options:
+        - Beginner
+        - Intermediate
+        - Advanced
+    validations:
+      required: true
+  - type: textarea
+    id: roadmap-description
+    attributes:
+      label: Add Project Details
+      description: Please write a detailed description of the project in 3rd person e.g. "You are required to build a..."
+      placeholder: |
+          e.g. You are required to build a RESTful API...
+    validations:
+      required: true

astro.config.mjs

@@ -11,9 +11,6 @@ import react from '@astrojs/react';
 // https://astro.build/config
 export default defineConfig({
   site: 'https://roadmap.sh/',
-  experimental: {
-    rewriting: true,
-  },
   markdown: {
     shikiConfig: {
       theme: 'dracula',

contributing.md

@@ -4,6 +4,7 @@ First of all thank you for considering to contribute. Please look at the details
 
 - [New Roadmaps](#new-roadmaps)
 - [Existing Roadmaps](#existing-roadmaps)
+- [Adding Projects](#adding-projects)
 - [Adding Content](#adding-content)
 - [Guidelines](#guidelines)
 
@@ -22,6 +23,10 @@ For the existing roadmaps, please follow the details listed for the nature of co
 
 **Note:** Please note that our goal is <strong>not to have the biggest list of items</strong>. Our goal is to list items or skills most relevant today.
 
+## Adding Projects
+
+If you have a project idea that you think we should add to the roadmap, feel fre to open an issue with as much details about the project as possible and the roadmap you think it should be added to.
+
 ## Adding Content
 
 Find [the content directory inside the relevant roadmap](https://github.com/kamranahmedse/developer-roadmap/tree/master/src/data/roadmaps). Please keep the following guidelines in mind when submitting content:
@@ -76,8 +81,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

@@ -28,53 +28,53 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@astrojs/node": "^8.2.5",
-    "@astrojs/react": "^3.4.0",
-    "@astrojs/sitemap": "^3.1.5",
+    "@astrojs/node": "^8.3.2",
+    "@astrojs/react": "^3.6.1",
+    "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
-    "@fingerprintjs/fingerprintjs": "^4.3.0",
+    "@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.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.9.1",
+    "astro": "^4.13.0",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "dom-to-image": "^2.6.0",
     "dracula-prism": "^2.1.16",
     "gray-matter": "^4.0.3",
     "htm": "^3.1.1",
     "image-size": "^1.1.1",
-    "jose": "^5.3.0",
+    "jose": "^5.6.3",
     "js-cookie": "^3.0.5",
-    "lucide-react": "^0.378.0",
+    "lucide-react": "^0.419.0",
     "nanoid": "^5.0.7",
     "nanostores": "^0.10.3",
     "node-html-parser": "^6.1.13",
-    "npm-check-updates": "^16.14.20",
-    "playwright": "^1.44.0",
+    "npm-check-updates": "^17.0.0",
+    "playwright": "^1.45.3",
     "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.26.4",
-    "reactflow": "^11.11.3",
+    "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.3",
-    "unified": "^11.0.4",
-    "zustand": "^4.5.2"
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss": "^3.4.7",
+    "unified": "^11.0.5",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
-    "@playwright/test": "^1.44.0",
+    "@playwright/test": "^1.45.3",
     "@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.47.1",
-    "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.13.0",
-    "prettier-plugin-tailwindcss": "^0.5.14",
-    "tsx": "^4.10.5"
+    "openai": "^4.53.2",
+    "prettier": "^3.3.3",
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "tsx": "^4.16.5"
   }
 }

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/Badge.tsx

@@ -0,0 +1,27 @@
+type BadgeProps = {
+  variant: 'blue' | 'green' | 'red' | 'yellow' | 'grey' | 'white';
+  text: string;
+};
+
+export function Badge(type: BadgeProps) {
+  const { variant, text } = type;
+
+  const colors = {
+    blue: 'bg-blue-100 text-blue-700 border-blue-200',
+    green: 'bg-green-100 text-green-700 border-green-200',
+    red: 'bg-red-100 text-red-700 border-red-200',
+    yellow: 'bg-yellow-100 text-yellow-700 border-yellow-200',
+    grey: 'bg-gray-100 text-gray-700 border-gray-200',
+    white: 'bg-white text-black border-gray-200',
+    teal: 'bg-teal-100 text-teal-700 border-teal-200',
+    black: 'bg-gray-500 text-white border-gray-500',
+  };
+
+  return (
+    <span
+      className={`rounded-md border capitalize ${colors[variant]} px-1 py-0.5 text-xs tracking-wide`}
+    >
+      {text}
+    </span>
+  );
+}

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/FlowRoadmapRenderer.tsx

@@ -62,7 +62,10 @@ export function FlowRoadmapRenderer(props: FlowRoadmapRendererProps) {
   }
 
   const handleTopicRightClick = useCallback((e: MouseEvent, node: Node) => {
-    const target = e?.currentTarget as HTMLDivElement;
+    const target =
+      node?.type === 'todo'
+        ? document.querySelector(`[data-id="${node.id}"]`)
+        : (e?.currentTarget as HTMLDivElement);
     if (!target) {
       return;
     }

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-2 text-3xl font-bold sm:text-4xl">
+              Community Roadmaps
+            </h1>
+            <p className="mb-5 text-base text-gray-500">
+              A selected list of community-created 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/DownloadRoadmapButton.tsx

@@ -0,0 +1,40 @@
+import { Download } from 'lucide-react';
+import { isLoggedIn } from '../lib/jwt.ts';
+import { useEffect, useState } from 'react';
+import { showLoginPopup } from '../lib/popup.ts';
+
+type DownloadRoadmapButtonProps = {
+  roadmapId: string;
+};
+
+export function DownloadRoadmapButton(props: DownloadRoadmapButtonProps) {
+  const { roadmapId } = props;
+
+  const [url, setUrl] = useState<string>('#');
+
+  useEffect(() => {
+    if (isLoggedIn()) {
+      setUrl(`/pdfs/roadmaps/${roadmapId}.pdf`);
+    }
+  }, []);
+
+  return (
+    <a
+      className="inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm"
+      aria-label="Download Roadmap"
+      target="_blank"
+      href={url}
+      onClick={(e) => {
+        if (isLoggedIn()) {
+          return;
+        }
+
+        e.preventDefault();
+        showLoginPopup();
+      }}
+    >
+      <Download className="h-4 w-4" />
+      <span className="ml-2 hidden sm:inline">Download</span>
+    </a>
+  );
+}

src/components/EditorRoadmap/EditorRoadmap.tsx

@@ -68,14 +68,13 @@ export function EditorRoadmap(props: EditorRoadmapProps) {
             : undefined
         }
         className={
-          'flex aspect-[var(--aspect-ratio)] w-full flex-col justify-center'
+          'mt-5 flex aspect-[var(--aspect-ratio)] w-full flex-col justify-center'
         }
       >
         <div className="flex w-full justify-center">
           <Spinner
-            innerFill="#2563eb"
-            outerFill="#E5E7EB"
             className="h-6 w-6 animate-spin sm:h-12 sm:w-12"
+            isDualRing={false}
           />
         </div>
       </div>

src/components/EditorRoadmap/EditorRoadmapRenderer.css

@@ -42,6 +42,10 @@ svg > g[data-type='topic'].done > rect + text {
   fill: black;
 }
 
+svg .done text[fill='#ffffff'] {
+  fill: black;
+}
+
 svg > g[data-type='subtipic'].done > rect + text,
 svg > g[data-type='subtipic'].learning > rect + text {
   fill: #cbcbcb;

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/FeaturedItems/MarkFavorite.tsx

@@ -103,7 +103,7 @@ export function MarkFavorite({
         className || 'absolute right-1.5 top-1.5 z-30 focus:outline-0'
       }`}
     >
-      {isLoading ? <Spinner /> : <FavoriteIcon isFavorite={isFavorite} />}
+      {isLoading ? <Spinner isDualRing={false} /> : <FavoriteIcon isFavorite={isFavorite} />}
     </button>
   );
 }

src/components/FrameRenderer/FrameRenderer.astro

@@ -1,7 +1,8 @@
 ---
 import Loader from '../Loader.astro';
 import './FrameRenderer.css';
-import { ProgressNudge } from "./ProgressNudge";
+import { Spinner } from '../ReactIcons/Spinner';
+import { ProgressNudge } from './ProgressNudge';
 
 export interface Props {
   resourceType: 'roadmap' | 'best-practice';
@@ -16,6 +17,7 @@ const { resourceId, resourceType, dimensions = null } = Astro.props;
 ---
 
 <div
+  class='mt-3.5'
   id='resource-svg-wrap'
   style={dimensions
     ? `--aspect-ratio:${dimensions.width}/${dimensions.height}`
@@ -28,6 +30,10 @@ const { resourceId, resourceType, dimensions = null } = Astro.props;
   </div>
 </div>
 
-<ProgressNudge resourceId={resourceId} resourceType={resourceType} client:only="react" />
+<ProgressNudge
+  resourceId={resourceId}
+  resourceType={resourceType}
+  client:only='react'
+/>
 
 <script src='./renderer.ts'></script>

src/components/FrameRenderer/renderer.ts

@@ -152,6 +152,10 @@ export class Renderer {
       return;
     }
 
+    if (/^check:/.test(topicId)) {
+      topicId = topicId.replace('check:', '');
+    }
+
     pageProgressMessage.set('Updating progress');
     updateResourceProgress(
       {

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/Projects/EmptyProjects.tsx

@@ -0,0 +1,60 @@
+import { Bell, Check, FolderKanbanIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { cn } from '../../lib/classname.ts';
+import { Spinner } from '../ReactIcons/Spinner.tsx';
+import { isLoggedIn } from '../../lib/jwt.ts';
+import { showLoginPopup } from '../../lib/popup.ts';
+
+export function EmptyProjects() {
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setIsSubscribed(isLoggedIn());
+    setIsLoading(false);
+  }, []);
+
+  return (
+    <div className="relative my-2.5 flex min-h-[400px] flex-col items-center justify-center rounded-lg border bg-white">
+      <FolderKanbanIcon className="h-14 w-14 text-gray-300" strokeWidth={1.5} />
+      <h2 className="mb-0.5 mt-2 text-center text-base font-medium text-gray-900 sm:text-xl">
+        <span className="hidden sm:inline">Projects are coming soon!</span>
+        <span className="inline sm:hidden">Coming soon!</span>
+      </h2>
+      <p className="mb-3 text-balance text-center text-sm text-gray-500 sm:text-base">
+        Sign up to get notified when projects are available.
+      </p>
+
+      <button
+        onClick={() => {
+          if (isSubscribed) {
+            return;
+          }
+
+          showLoginPopup();
+        }}
+        className={cn(
+          'flex items-center rounded-md bg-gray-800 py-1.5 pl-3 pr-4 text-xs text-white opacity-0 transition-opacity duration-500 hover:bg-black sm:text-sm',
+          {
+            'cursor-default bg-gray-300 text-black hover:bg-gray-300':
+              isSubscribed,
+            'opacity-100': !isLoading,
+          },
+        )}
+      >
+        {!isSubscribed && (
+          <>
+            <Bell className="mr-2 h-4 w-4" />
+            Signup to get Notified
+          </>
+        )}
+        {isSubscribed && (
+          <>
+            <Check className="mr-2 h-4 w-4" />
+            We will notify you by email
+          </>
+        )}
+      </button>
+    </div>
+  );
+}

src/components/Projects/ProjectCard.tsx

@@ -0,0 +1,38 @@
+import { Badge } from '../Badge.tsx';
+import type {
+  ProjectDifficultyType,
+  ProjectFileType,
+} from '../../lib/project.ts';
+
+type ProjectCardProps = {
+  project: ProjectFileType;
+};
+
+const badgeVariants: Record<ProjectDifficultyType, string> = {
+  beginner: 'yellow',
+  intermediate: 'green',
+  advanced: 'blue',
+};
+
+export function ProjectCard(props: ProjectCardProps) {
+  const { project } = props;
+
+  const { frontmatter, id } = project;
+
+  return (
+    <a
+      href={`/projects/${id}`}
+      className="flex flex-col rounded-md border bg-white p-3 transition-colors hover:border-gray-300 hover:bg-gray-50"
+    >
+      <span className="flex justify-between gap-1.5">
+        <Badge
+          variant={badgeVariants[frontmatter.difficulty] as any}
+          text={frontmatter.difficulty}
+        />
+        <Badge variant={'grey'} text={frontmatter.nature} />
+      </span>
+      <span className="mb-1 mt-2.5 font-medium">{frontmatter.title}</span>
+      <span className="text-sm text-gray-500">{frontmatter.description}</span>
+    </a>
+  );
+}

src/components/Projects/ProjectsList.tsx

@@ -0,0 +1,133 @@
+import { ProjectCard } from './ProjectCard.tsx';
+import { HeartHandshake, Trash2 } from 'lucide-react';
+import { cn } from '../../lib/classname.ts';
+import { useMemo, useState } from 'react';
+import {
+  projectDifficulties,
+  type ProjectDifficultyType,
+  type ProjectFileType,
+} from '../../lib/project.ts';
+import {
+  deleteUrlParam,
+  getUrlParams,
+  setUrlParams,
+} from '../../lib/browser.ts';
+
+type DifficultyButtonProps = {
+  difficulty: ProjectDifficultyType;
+  isActive?: boolean;
+  onClick?: () => void;
+};
+
+function DifficultyButton(props: DifficultyButtonProps) {
+  const { difficulty, onClick, isActive } = props;
+
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        'rounded-md border bg-white px-3 py-1 text-sm capitalize transition-colors hover:border-gray-300 hover:bg-gray-100',
+        {
+          'border-black bg-gray-100 hover:border-black hover:bg-gray-100 hover:text-black':
+            isActive,
+        },
+      )}
+    >
+      {difficulty}
+    </button>
+  );
+}
+
+type ProjectsListProps = {
+  projects: ProjectFileType[];
+};
+
+export function ProjectsList(props: ProjectsListProps) {
+  const { projects } = props;
+
+  const { difficulty: urlDifficulty } = getUrlParams();
+  const [difficulty, setDifficulty] = useState<
+    ProjectDifficultyType | undefined
+  >(urlDifficulty);
+
+  const projectsByDifficulty: Map<ProjectDifficultyType, ProjectFileType[]> =
+    useMemo(() => {
+      const result = new Map<ProjectDifficultyType, ProjectFileType[]>();
+
+      for (const project of projects) {
+        const difficulty = project.frontmatter.difficulty;
+
+        if (!result.has(difficulty)) {
+          result.set(difficulty, []);
+        }
+
+        result.get(difficulty)?.push(project);
+      }
+
+      return result;
+    }, [projects]);
+
+  const matchingProjects = difficulty
+    ? projectsByDifficulty.get(difficulty) || []
+    : projects;
+
+  return (
+    <div className="flex flex-col">
+      <div className="my-2.5 flex items-center justify-between">
+        <div className="flex flex-wrap gap-1">
+          {projectDifficulties.map((projectDifficulty) => (
+            <DifficultyButton
+              onClick={() => {
+                setDifficulty(projectDifficulty);
+                setUrlParams({ difficulty: projectDifficulty });
+              }}
+              difficulty={projectDifficulty}
+              isActive={projectDifficulty === difficulty}
+            />
+          ))}
+          {difficulty && (
+            <button
+              onClick={() => {
+                setDifficulty(undefined);
+                deleteUrlParam('difficulty');
+              }}
+              className="flex items-center gap-1.5 rounded-md border border-red-500 bg-transparent px-2 py-0.5 text-sm text-red-500 transition-colors hover:bg-red-500 hover:text-white"
+            >
+              <Trash2 className="h-3.5 w-3.5" strokeWidth={2.25} />
+              Clear
+            </button>
+          )}
+        </div>
+        <a
+          href={''}
+          className="hidden items-center gap-2 rounded-md border border-transparent px-2 py-0.5 text-sm underline underline-offset-2 hover:bg-black hover:text-white hover:no-underline sm:flex"
+        >
+          <HeartHandshake className="h-4 w-4" />
+          Submit a Project Idea
+        </a>
+      </div>
+      <div className="mb-24 grid grid-cols-1 gap-1.5 sm:grid-cols-2 lg:grid-cols-3">
+        {matchingProjects.length === 0 && (
+          <div className="col-span-3 rounded-md border bg-white p-4 text-left text-sm text-gray-500">
+            <p>No matching projects found.</p>
+          </div>
+        )}
+
+        {matchingProjects
+          .sort((project) => {
+            return project.frontmatter.difficulty === 'beginner'
+              ? -1
+              : project.frontmatter.difficulty === 'intermediate'
+                ? 0
+                : 1;
+          })
+          .sort((a, b) => {
+            return a.frontmatter.sort - b.frontmatter.sort;
+          })
+          .map((matchingProject) => (
+            <ProjectCard project={matchingProject} />
+          ))}
+      </div>
+    </div>
+  );
+}

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/ResourceProgressStats.astro

@@ -5,45 +5,28 @@ import { ProgressShareButton } from './UserProgress/ProgressShareButton';
 export interface Props {
   resourceId: string;
   resourceType: ResourceType;
-  hasSecondaryBanner?: boolean;
 }
 
-const { hasSecondaryBanner = false, resourceId, resourceType } = Astro.props;
+const { resourceId, resourceType } = Astro.props;
 ---
 
 <div
   data-progress-nums-container
   class:list={[
-    'hidden sm:flex justify-between px-2 bg-white items-center py-1.5 relative striped-loader bg-white',
-    {
-      'rounded-tl-md rounded-tr-md': hasSecondaryBanner,
-      'rounded-md': !hasSecondaryBanner,
-    },
+    'striped-loader relative flex items-center justify-between rounded-md bg-white px-2 sm:px-2.5 py-2 sm:py-2.5',
   ]}
 >
   <p
-    class='flex text-sm opacity-0 transition-opacity duration-300'
+    class='flex text-xs sm:text-sm opacity-0 transition-opacity duration-300'
     data-progress-nums
   >
     <span
-      class='mr-2.5 rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900'
+      class='mr-2.5 hidden rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900 sm:block'
     >
       <span data-progress-percentage>0</span>% Done
     </span>
 
-    <span class='itesm-center hidden md:flex'>
-      <span><span data-progress-done>0</span> completed</span><span
-        class='mx-1.5 text-gray-400'>&middot;</span
-      >
-      <span><span data-progress-learning>0</span> in progress</span><span
-        class='mx-1.5 text-gray-400'>&middot;</span
-      >
-      <span><span data-progress-skipped>0</span> skipped</span><span
-        class='mx-1.5 text-gray-400'>&middot;</span
-      >
-      <span><span data-progress-total>0</span> Total</span>
-    </span>
-    <span class='md:hidden'>
+    <span>
       <span data-progress-done>0</span> of <span data-progress-total>0</span> Done
     </span>
   </p>
@@ -55,11 +38,11 @@ const { hasSecondaryBanner = false, resourceId, resourceType } = Astro.props;
     <ProgressShareButton
       resourceId={resourceId}
       resourceType={resourceType}
-      client:only="react"
+      client:only='react'
     />
     <button
       data-popup='progress-help'
-      class='flex items-center gap-1 text-sm font-medium text-gray-500 opacity-0 transition-opacity hover:text-black'
+      class='hidden items-center gap-1 text-sm font-medium text-gray-500 opacity-0 transition-opacity hover:text-black sm:flex'
       data-progress-nums
     >
       <AstroIcon icon='question' />
@@ -67,26 +50,3 @@ const { hasSecondaryBanner = false, resourceId, resourceType } = Astro.props;
     </button>
   </div>
 </div>
-
-<div
-  data-progress-nums-container
-  class='striped-loader relative -mb-2 flex items-center justify-between rounded-md border bg-white px-2 py-1.5 text-sm text-gray-700 sm:hidden'
->
-  <span
-    data-progress-nums
-    class='text-gray-500 opacity-0 transition-opacity duration-300'
-  >
-    <span data-progress-done>0</span> of <span data-progress-total>0</span> Done
-  </span>
-
-  <div
-    class='flex items-center gap-2 opacity-0 transition-opacity duration-300'
-    data-progress-nums
-  >
-    <ProgressShareButton
-      resourceId={resourceId}
-      resourceType={resourceType}
-      client:only="react"
-    />
-  </div>
-</div>

src/components/RoadmapHeader.astro

@@ -1,18 +1,17 @@
 ---
-import Icon from './AstroIcon.astro';
+import {
+  ArrowLeftIcon,
+  FolderKanbanIcon,
+  MapIcon,
+  MessageCircle,
+} from 'lucide-react';
+import { TabLink } from './TabLink';
 import LoginPopup from './AuthenticationFlow/LoginPopup.astro';
-import RoadmapHint from './RoadmapHint.astro';
-import RoadmapNote from './RoadmapNote.astro';
-import TopicSearch from './TopicSearch/TopicSearch.astro';
-import YouTubeAlert from './YouTubeAlert.astro';
 import ProgressHelpPopup from './ProgressHelpPopup.astro';
 import { MarkFavorite } from './FeaturedItems/MarkFavorite';
-import { TeamVersions } from './TeamVersions/TeamVersions';
-import { CreateVersion } from './CreateVersion/CreateVersion';
 import { type RoadmapFrontmatter } from '../lib/roadmap';
 import { ShareRoadmapButton } from './ShareRoadmapButton';
-import { Share2 } from 'lucide-react';
-import ShareIcons from './ShareIcons/ShareIcons.astro';
+import { DownloadRoadmapButton } from './DownloadRoadmapButton';
 
 export interface Props {
   title: string;
@@ -22,9 +21,11 @@ export interface Props {
   roadmapId: string;
   isUpcoming?: boolean;
   hasSearch?: boolean;
+  projectCount?: number;
   question?: RoadmapFrontmatter['question'];
   hasTopics?: boolean;
   isForkable?: boolean;
+  activeTab?: 'roadmap' | 'projects';
 }
 
 const {
@@ -33,15 +34,13 @@ const {
   roadmapId,
   tnsBannerLink,
   isUpcoming = false,
-  hasSearch = false,
   note,
   hasTopics = false,
+  projectCount = 0,
   question,
-  isForkable = false,
+  activeTab = 'roadmap',
 } = Astro.props;
 
-const isRoadmapReady = !isUpcoming;
-
 const roadmapTitle =
   roadmapId === 'devops'
     ? 'DevOps'
@@ -53,143 +52,11 @@ const hasTnsBanner = !!tnsBannerLink;
 <LoginPopup />
 <ProgressHelpPopup />
 
-<div class='relative border-b'>
-  <div
-    class:list={[
-      'container relative py-5',
-      {
-        'sm:py-16': hasTnsBanner,
-        'sm:py-12': !hasTnsBanner,
-      },
-    ]}
-  >
-    <div class='mb-3 mt-0 sm:mb-4'>
-      {
-        isForkable && (
-          <div class='mb-2'>
-            <CreateVersion client:load roadmapId={roadmapId} />
-          </div>
-        )
-      }
-
-      <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-4xl'>
-        {title}
-        <span class='relative top-0 sm:-top-1'>
-          <MarkFavorite
-            resourceId={roadmapId}
-            resourceType='roadmap'
-            className='relative ml-1.5 text-gray-500 !opacity-100 hover:text-gray-600 focus:outline-0 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:stroke-gray-400 [&>svg]:stroke-[0.4] hover:[&>svg]:stroke-gray-600 sm:[&>svg]:h-4 sm:[&>svg]:w-4'
-            client:only='react'
-          />
-        </span>
-      </h1>
-      <p class='text-sm text-gray-500 sm:text-lg'>{description}</p>
-    </div>
-
-    <div class='flex justify-between gap-2 sm:gap-0'>
-      <div class='flex gap-1 sm:gap-2'>
-        {
-          !hasSearch && (
-            <>
-              <a
-                href='/roadmaps'
-                class='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 class='hidden sm:inline'>&nbsp;All Roadmaps</span>
-              </a>
-
-              <ShareRoadmapButton
-                description={description}
-                pageUrl={`https://roadmap.sh/${roadmapId}`}
-                client:idle
-              />
-
-              {isRoadmapReady && (
-                <>
-                  <button
-                    data-guest-required
-                    data-popup='login-popup'
-                    class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
-                    aria-label='Download Roadmap'
-                  >
-                    <Icon icon='download' />
-                    <span class='ml-2 hidden sm:inline'>Download</span>
-                  </button>
-
-                  <a
-                    data-auth-required
-                    class='inline-flex hidden items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm'
-                    aria-label='Download Roadmap'
-                    target='_blank'
-                    href={`/pdfs/roadmaps/${roadmapId}.pdf`}
-                  >
-                    <Icon icon='download' />
-                    <span class='ml-2 hidden sm:inline'>Download</span>
-                  </a>
-                </>
-              )}
-            </>
-          )
-        }
-
-        {
-          hasSearch && (
-            <a
-              href={`/${roadmapId}`}
-              class='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 Visual Roadmap'
-            >
-              &larr;
-              <span class='inline'>&nbsp;Visual Roadmap</span>
-            </a>
-          )
-        }
-      </div>
-
-      <div class='flex items-center gap-1 sm:gap-2'>
-        <TeamVersions
-          resourceType='roadmap'
-          resourceId={roadmapId}
-          client:only='react'
-        />
-
-        {
-          isRoadmapReady && (
-            <a
-              href={`https://github.com/kamranahmedse/developer-roadmap/issues/new/choose`}
-              target='_blank'
-              class='inline-flex items-center justify-center 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='Suggest Changes'
-            >
-              <Icon icon='comment' class='h-3 w-3' />
-              <span class='ml-2 hidden sm:inline'>Suggest Changes</span>
-              <span class='ml-2 inline sm:hidden'>Suggest</span>
-            </a>
-          )
-        }
-      </div>
-    </div>
-
-    <!-- Desktop: Roadmap Resources - Alert -->
-    {
-      hasTopics && (
-        <RoadmapHint
-          tnsBannerLink={tnsBannerLink}
-          titleQuestion={question?.title}
-          titleAnswer={question?.description}
-          roadmapId={roadmapId}
-        />
-      )
-    }
-
-    {hasSearch && <TopicSearch />}
-  </div>
-
+<div class='container mt-0 flex flex-col gap-2.5 px-0 sm:mt-3 sm:px-4'>
   {
     tnsBannerLink && (
-      <div class='absolute left-0 right-0 top-0 hidden border-b border-b-gray-200 px-2 py-1.5 sm:block'>
-        <p class='py-0.5 text-center text-sm'>
+      <div class='hidden rounded-md border bg-white px-2 py-1.5 sm:block'>
+        <p class='py-0.5 text-left text-sm'>
           <span class='badge mr-1'>Partner</span>
           Get the latest {roadmapTitle} news from our sister site{' '}
           <a href={tnsBannerLink} target='_blank' class='font-medium underline'>
@@ -199,6 +66,76 @@ const hasTnsBanner = !!tnsBannerLink;
       </div>
     )
   }
-</div>
 
-{note && <RoadmapNote text={note} />}
+  <div
+    class='relative rounded-none border bg-white px-5 pb-0 pt-4 sm:rounded-lg'
+  >
+    <div class='flex items-start justify-between'>
+      <a
+        class='inline-flex items-center justify-center rounded-md bg-gray-300 px-2 py-1.5 text-xs font-medium hover:bg-gray-400 sm:hidden sm:text-sm'
+        aria-label='Back to roadmaps'
+        href={'/roadmaps'}
+      >
+        <ArrowLeftIcon className='h-4 w-4' />
+      </a>
+
+      <a
+        href='/roadmaps'
+        class='hidden rounded-md text-sm font-medium text-gray-500 transition-all hover:text-black focus:outline-0 sm:block'
+        aria-label='Back to All Roadmaps'
+      >
+        &larr;&nbsp;<span>&nbsp;All Roadmaps</span>
+      </a>
+      <div
+        class='relative right-0 top-0 flex items-center gap-1 sm:-right-2 sm:-top-0.5'
+      >
+        <MarkFavorite
+          resourceId={roadmapId}
+          resourceType='roadmap'
+          className='relative top-px mr-2 text-gray-500 !opacity-100 hover:text-gray-600 focus:outline-0 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:stroke-gray-400 [&>svg]:stroke-[0.4] hover:[&>svg]:stroke-gray-600 sm:[&>svg]:h-4 sm:[&>svg]:w-4'
+          client:only='react'
+        />
+        <DownloadRoadmapButton roadmapId={roadmapId} client:idle />
+        <ShareRoadmapButton
+          description={description}
+          pageUrl={`https://roadmap.sh/${roadmapId}`}
+          client:idle
+        />
+      </div>
+    </div>
+    <div class='mb-5 mt-5 sm:mb-8 sm:mt-5'>
+      <h1 class='mb-0.5 text-2xl font-bold sm:mb-2 sm:text-3xl'>
+        {title}
+      </h1>
+      <p class='text-balance text-sm text-gray-500 sm:text-base'>
+        {description}
+      </p>
+    </div>
+
+    <div class='flex justify-between gap-2 sm:gap-0'>
+      <div class='relative top-px flex gap-1 sm:gap-3'>
+        <TabLink
+          url={`/${roadmapId}`}
+          icon={MapIcon}
+          isActive={activeTab === 'roadmap'}
+          text='Roadmap'
+        />
+        <TabLink
+          url={`/${roadmapId}/projects`}
+          icon={FolderKanbanIcon}
+          text='Projects'
+          isActive={activeTab === 'projects'}
+          badgeText={projectCount > 0 ? '' : 'soon'}
+        />
+      </div>
+
+      <TabLink
+        url={`https://github.com/kamranahmedse/developer-roadmap/issues/new/choose`}
+        icon={MessageCircle}
+        text='Suggest Changes'
+        isExternal={true}
+        hideTextOnMobile={true}
+      />
+    </div>
+  </div>
+</div>

src/components/RoadmapHint.astro

@@ -1,7 +1,6 @@
 ---
 import AstroIcon from './AstroIcon.astro';
 import Icon from './AstroIcon.astro';
-import { RoadmapTitleQuestion } from './RoadmapTitleQuestion.tsx';
 import ResourceProgressStats from './ResourceProgressStats.astro';
 
 export interface Props {
@@ -11,47 +10,13 @@ export interface Props {
   titleAnswer?: string;
 }
 
-const {
-  roadmapId,
-  titleQuestion = '',
-  titleAnswer = '',
-  tnsBannerLink,
-} = Astro.props;
-const hasTitleQuestion = titleQuestion && titleAnswer;
+const { roadmapId, tnsBannerLink } = Astro.props;
 const hasTnsBanner = !!tnsBannerLink;
 ---
 
-<div
-  class:list={[
-    'mb-0 mt-4 rounded-md border-0 bg-white sm:mt-7 sm:border',
-    ...(hasTnsBanner
-      ? [
-          {
-            'sm:-mb-[110px]': hasTitleQuestion,
-            'sm:-mb-[81px]': !hasTitleQuestion,
-          },
-        ]
-      : [
-          {
-            'sm:-mb-[88px]': hasTitleQuestion,
-            'sm:-mb-[65px]': !hasTitleQuestion,
-          },
-        ]),
-  ]}
->
+<div class:list={['mb-0 rounded-md border mt-2 bg-white']}>
   <ResourceProgressStats
     resourceId={roadmapId}
     resourceType='roadmap'
-    hasSecondaryBanner={Boolean(hasTitleQuestion)}
   />
-
-  {
-    hasTitleQuestion && (
-      <RoadmapTitleQuestion
-        client:load
-        question={titleQuestion}
-        answer={titleAnswer}
-      />
-    )
-  }
 </div>

src/components/RoadmapTitleQuestion.tsx

@@ -1,4 +1,10 @@
-import { ChevronDown, ChevronUp, GraduationCap } from 'lucide-react';
+import {
+  ChevronDown,
+  ChevronUp,
+  CircleHelp,
+  GraduationCap,
+  Info,
+} from 'lucide-react';
 import { useRef, useState } from 'react';
 import { useOutsideClick } from '../hooks/use-outside-click';
 import { markdownToHtml } from '../lib/markdown';
@@ -19,23 +25,23 @@ export function RoadmapTitleQuestion(props: RoadmapTitleQuestionProps) {
   });
 
   return (
-    <div className="relative hidden border-t text-sm font-medium sm:block">
+    <div className="relative hidden rounded-b-[5px] border-t bg-white text-sm font-medium hover:bg-gray-50 sm:block">
       {isAnswerVisible && (
         <div className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"></div>
       )}
       <h2
-        className="z-50 flex cursor-pointer items-center px-2 py-2.5 text-base font-medium"
+        className="z-50 flex cursor-pointer select-none items-center px-2 py-2 text-sm font-medium"
         aria-expanded={isAnswerVisible ? 'true' : 'false'}
         onClick={(e) => {
           e.preventDefault();
           setIsAnswerVisible(!isAnswerVisible);
         }}
       >
-        <span className="flex flex-grow items-center">
-          <GraduationCap className="mr-2 inline-block h-6 w-6" />
+        <span className="flex flex-grow select-none items-center">
+          <Info className="mr-1.5 inline-block h-4 w-4" strokeWidth={2.5} />
           {question}
         </span>
-        <span className="flex-shrink-0 text-gray-400">
+        <span className="relative -top-px flex-shrink-0 text-gray-400">
           <ChevronDown className={`inline-block h-5 w-5`} />
         </span>
       </h2>
@@ -48,14 +54,14 @@ export function RoadmapTitleQuestion(props: RoadmapTitleQuestionProps) {
       >
         {isAnswerVisible && (
           <h2
-            className="flex cursor-pointer items-center border-b px-[7px] py-[9px] text-base font-medium"
+            className="flex cursor-pointer select-none items-center border-b px-[7px] py-[9px] text-base font-medium"
             onClick={() => setIsAnswerVisible(false)}
           >
             <span className="flex flex-grow items-center">
-              <GraduationCap className="mr-2 inline-block h-6 w-6" />
+              <Info className="mr-2 inline-block h-4 w-4" strokeWidth={2.5} />
               {question}
             </span>
-            <span className="flex-shrink-0 text-gray-400">
+            <span className="relative -top-px flex-shrink-0 text-gray-400">
               <ChevronUp className={`inline-block h-5 w-5`} />
             </span>
           </h2>

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/ShareRoadmapButton.tsx

@@ -70,7 +70,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
       </button>
 
       {isDropdownOpen && (
-        <div className="absolute left-0 z-[999] mt-1 w-48 rounded-md bg-slate-800 text-sm text-white shadow-lg ring-1 ring-black ring-opacity-5">
+        <div className="absolute right-0 z-[999] mt-1 w-40 rounded-md bg-slate-800 text-sm text-white shadow-lg ring-1 ring-black ring-opacity-5">
           <div className="flex flex-col px-1 py-1">
             <button
               onClick={() => {

src/components/TabLink.tsx

@@ -0,0 +1,69 @@
+import type { LucideIcon } from 'lucide-react';
+import { cn } from '../lib/classname.ts';
+
+type TabLinkProps = {
+  icon: LucideIcon;
+  text: string;
+  isActive: boolean;
+  isExternal?: boolean;
+  badgeText?: string;
+  hideTextOnMobile?: boolean;
+  url: string;
+};
+
+export function TabLink(props: TabLinkProps) {
+  const {
+    icon: Icon,
+    badgeText,
+    isExternal = false,
+    url,
+    text,
+    isActive,
+    hideTextOnMobile = false,
+  } = props;
+
+  const className = cn(
+    'inline-flex group transition-colors items-center gap-1.5 border-b-2 px-2 pb-2.5 text-sm',
+    {
+      'cursor-default border-b-black font-medium text-black': isActive,
+      'border-b-transparent font-normal text-gray-400 hover:text-gray-700':
+        !isActive,
+      'font-medium hover:text-black text-gray-500 px-0': isExternal,
+    },
+  );
+
+  const textClass = cn({
+    'hidden sm:inline': hideTextOnMobile,
+  });
+
+  const badgeNode = badgeText && (
+    <span className="ml-0.5 hidden items-center gap-0.5 rounded-full bg-yellow-200 px-2 py-0.5 text-xs font-medium text-black transition-colors group-hover:bg-yellow-300 sm:flex">
+      <span className="relative -top-px">{badgeText}</span>
+    </span>
+  );
+
+  if (isActive) {
+    return (
+      <span className={className}>
+        <Icon className="h-4 w-4 flex-shrink-0" />
+        <span className={textClass}>{text}</span>
+        {badgeNode}
+      </span>
+    );
+  }
+
+  return (
+    <a
+      target={isExternal ? '_blank' : undefined}
+      onClick={(e) => {
+        e.preventDefault();
+      }}
+      href={url}
+      className={className}
+    >
+      <Icon className="h-4 w-4 flex-shrink-0" />
+      <span className={textClass}>{text}</span>
+      {badgeNode}
+    </a>
+  );
+}

src/components/TeamMembers/TeamMembersPage.tsx

@@ -44,7 +44,7 @@ export interface TeamMemberItem extends TeamMemberDocument {
   hasProgress: boolean;
 }
 
-const MAX_MEMBER_COUNT = 100;
+const MAX_MEMBER_COUNT = 200;
 
 export function TeamMembersPage() {
   const { t: teamId } = getUrlParams();

src/components/TeamProgress/MemberCustomProgressModal.tsx

@@ -161,7 +161,10 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
       return;
     }
 
-    const target = e?.currentTarget as HTMLDivElement;
+    const target =
+      node?.type === 'todo'
+        ? document.querySelector(`[data-id="${node.id}"]`)
+        : (e?.currentTarget as HTMLDivElement);
     if (!target) {
       return;
     }
@@ -237,7 +240,6 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
             <div className="px-4 pb-2">
               <ReadonlyEditor
                 variant="modal"
-                hasMinimap={false}
                 roadmap={roadmap!}
                 className="min-h-[400px]"
                 onRendered={() => {

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

@@ -30,6 +30,7 @@ import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
 import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
 import { YouTubeIcon } from '../ReactIcons/YouTubeIcon.tsx';
 import { resourceTitleFromId } from '../../lib/roadmap.ts';
+import { lockBodyScroll } from '../../lib/dom.ts';
 
 type TopicDetailProps = {
   resourceTitle?: string;
@@ -262,6 +263,8 @@ export function TopicDetail(props: TopicDetailProps) {
 
   useEffect(() => {
     if (isActive) topicRef?.current?.focus();
+
+    lockBodyScroll(isActive);
   }, [isActive]);
 
   if (!isActive) {
@@ -366,7 +369,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 +451,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 +461,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>
               )}
@@ -525,4 +528,4 @@ export function TopicDetail(props: TopicDetailProps) {
       <div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
     </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/components/UserProgress/ProgressShareButton.tsx

@@ -52,7 +52,7 @@ export function ProgressShareButton(props: ProgressShareButtonProps) {
   return (
     <button
       className={cn(
-        'flex items-center gap-1 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-70',
+        'flex items-center gap-1 text-xs sm:text-sm font-medium disabled:cursor-not-allowed disabled:opacity-70',
         isCopied ? 'text-green-500' : 'text-gray-500 hover:text-black',
         className
       )}

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

@@ -0,0 +1,261 @@
+---
+title: '12 In-Demand Front End Developer Skills to Master'
+description: 'Master these 12 in-demand front end developer skills and become a standout candidate in the web development field.'
+authorId: fernando
+excludedBySlug: '/frontend/developer-skills'
+seo:
+  title: '12 In-Demand Front End Developer Skills to Master'
+  description: 'Master these 12 in-demand front end developer skills and become a standout candidate in the web development field.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/frontend-developer-skills-zdpyd.jpg'
+isNew: true
+type: 'textual'
+date: 2024-07-04
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![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.
+
+While working as a front end developer can be headache-inducing sometimes, it’s also a great field for those who love to constantly learn new technologies. Given how active and dynamic the frontend community is.
+
+In this article, we’ll try to help guide you through the constantly growing front end ecosystem and we’re going to cover 12 essential front end development skills that every front end dev should master to remain competitive and effective in their role.
+
+## Understanding Front End Development
+
+But before we move forward, let’s first understand what front end development is.
+
+Front end development involves creating the parts of a website or application that users interact with directly. This includes designing layouts, implementing visual elements, and ensuring a seamless user experience by coding the interactions through the use of three basic technologies: HTML, CSS, and JavaScript.
+
+Unlike backend development, which deals with server-side logic, front end development focuses exclusively on client-side logic.
+
+With that said, HTML, CSS, and JavaScript aren’t the only three front end developer skills you should be focusing on, in fact, there are many others that are just as important, so let’s take a quick look at them.
+
+## 1. HTML/CSS/JavaScript
+
+![html css and javascript layers](https://assets.roadmap.sh/guest/html-css-javascript-layers-7agjb.png)
+
+HTML, CSS, and JavaScript are the foundational technologies for front end development. Mind you, they’re not the only skills that matter, but they’re definitely the three skills you should focus on first.
+
+### HTML (HyperText Markup Language):
+
+- **Role**: HTML is the backbone of any web page, providing the basic structure and content. It defines elements like headings, paragraphs, links, images, and other multimedia.
+- **Key Features**: Semantic HTML5 elements (like `<header>`, `<footer>`, `<article>`, and `<section>`) improve accessibility and SEO. Proper use of these elements makes the content more understandable for both users, search engines and even accessibility devices (like screen readers).
+
+### CSS (Cascading Style Sheets):
+
+- **Role**: CSS is responsible for the visual presentation of the web page. It controls the layout, colors, fonts, and overall style. While HTML lays out the foundational work for the page, CSS is a big component in making it look “good” for the users.
+- **Key Features**: CSS3 introduces features like Flexbox, Grid Layout, animations, and transitions, which enable complex designs with less code. While trying to build responsive designs (which everyone should be doing by now), media queries, flexbox and grid are your friends, making web pages look good on all devices.                                                                                            
+### JavaScript:
+
+- **Role**: JavaScript adds interactivity and dynamic behavior to web pages. It enables features like form validation, content updates without page reloads, and interactive elements like sliders and carousels. In other words, while CSS makes it look “good”, JavaScript makes it interactive and reactive to the user’s actions.
+- **Key Features**: Modern JavaScript (ES6+) introduces features like arrow functions, template literals, destructuring, modules, and promises. These features make the code more concise and readable. Whether you’re an old developer looking to become a front end developer, or a new one just getting started, adopting these features is key to your success as a JavaScript developer.
+
+Mastering these three key front end developer skills is not just about knowing the syntax but also understanding how to use these technologies together to create responsive, interactive, and accessible web pages. 
+
+## 2. Accessibility
+
+Accessibility ensures that websites are usable by people with various disabilities (from being sight-challenged to having other types of mobility-related disabilities).
+
+In the end, the web should be accessible to everyone, and knowing and understanding about accessibility allows you to make your web-based products something that everyone can use.
+
+This practice includes practices that range from implementing proper HTML tags, ARIA roles, all the way up to proper keyboard navigations. Accessible websites are not only compliant with legal standards but also offer a better user experience for a broader audience. Tools like screen readers and voice recognition software rely on well-structured, accessible content to function correctly.
+
+You can read more about Accessibility in the web space by [listening to this interview I did](https://www.youtube.com/watch?v=chEEnz0MJ10) with an accessibility expert.
+
+## 3. Version Control
+
+![git flow](https://assets.roadmap.sh/guest/gitflow-example-j1iu3.png)
+
+Version control is an essential skill for any front end developer, as it allows you to manage and track changes to your codebase efficiently. It provides a structured way to collaborate with other developers, maintain a history of changes, and ensure the integrity of your code. Here’s a more detailed look at why this skill is crucial and how to use it effectively:
+
+- **Collaboration**: When working on a project with a team, version control systems (VCS) enable multiple developers to work on the same codebase without conflicts. Each developer can create their own branches, make changes, and then merge their work into the main codebase.
+- **History and Documentation**: These systems maintain a history of all changes made to the code. This is invaluable for tracking when and why changes were made, which helps in debugging and understanding the evolution of the project.
+- **Backup and Recovery**: Version control acts as a backup system. If something goes wrong with the current code, developers can revert to previous versions without losing their work. This is a massive benefit for teams and honestly, for solo developers as well.
+
+### Popular Version Control Systems
+
+While the de-facto standard is Git, it’s also interesting to learn that Git is not the only VCS option out there (even though it’s the recommended option):
+
+- **Git**: The most widely used version control system. Git is a distributed VCS, meaning every developer has a complete copy of the repository. This allows for offline work and provides redundancy.
+- **Subversion (SVN)**: A centralized VCS where the repository is stored on a server, and developers check out the latest version to work on. This option is slowly fading out, and is mostly in use only by teams that inherit it as a company-wide standard.
+
+### Best Practices
+
+Regardless of the solution you use for this, try to keep in mind these best practices that will make your life (and your teammate’s life) a lot easier:
+
+- **Frequent Commits**: Make small, frequent commits with clear, descriptive messages. This makes it easier to track changes and debug issues.
+- **Branching Strategy**: Use a branching strategy that fits your workflow. Common strategies include [Git Flow](https://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow) and [GitHub Flow](https://docs.github.com/en/get-started/using-github/github-flow).
+- **Code Reviews**: Use pull requests to facilitate code reviews. This helps maintain code quality and fosters collaboration.
+
+## 4. Responsive Web Design
+
+![responsive design example](https://assets.roadmap.sh/guest/responsive-design-example-6j7wq.png)
+
+Responsive web design ensures that a website looks and functions well on different devices and screen sizes.  With the increasing use of mobile devices, responsive design is key for providing a consistent user experience across desktops, tablets, and smartphones.
+
+From the implementation side, one of the key elements to achieve responsive web design, are media queries. Through the use of media queries, developers can test for multiple screens and viewport sizes and style different sections of the page accordingly.
+
+That said, if media queries sound too complex or just not flexible enough (given that testing for every screen size can be too much nowadays), the alternative is to create a “flexible grid”, in other words, a layout that by definition, can adapt to the current screen size automatically.
+
+The main responsive design techniques to use for these flexible grids are: [multi-column layouts, flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) and [grid](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids). Either way, whatever you decide to go with, they will all provide you with a flexible layout right off the bat.
+
+## 5. Basics of UX
+
+As a front end developer, you are not strictly in charge of designing and defining the user experience standards, however, in some team compositions (especially when they work for smaller companies), the front end developers are also in charge of defining aspects of the user experience.
+
+Understanding the basics of user experience (UX) design helps developers create websites that are not only functional but also intuitive and enjoyable to use. This includes, in theory,  knowledge of design principles, user research, and usability testing. However,  front end developers, given their partial contact and responsibility over the UX, don’t usually go deep into UX, but rather, take a more practical approach, learning from experts or from their own past experience.
+
+A solid grasp of UX principles allows developers to build interfaces that meet users' needs and expectations, leading to higher satisfaction and engagement.
+
+- **Enhanced User Satisfaction**: Good UX design leads to higher user satisfaction by making interfaces intuitive and enjoyable to use. Users are more likely to return to and recommend a product that provides a positive experience.
+- **Improved Engagement and Retention**: A well-designed UX keeps users engaged and encourages them to spend more time on a site or app. This can lead to higher retention rates and better overall performance metrics.
+- **Competitive Advantage**: In a crowded market, products with superior UX stand out. Investing in UX design can provide a competitive edge by attracting and retaining more users compared to products with poor UX.
+- **Alignment with Business Goals**: Good UX design aligns with business objectives by enhancing user satisfaction, which can lead to increased conversions, sales, and customer loyalty. It ensures that the product meets both user needs and business goals effectively.
+
+## 6. Basics of SEO
+
+![SERP results](https://assets.roadmap.sh/guest/serp-results-rny9a.jpg)
+
+Search Engine Optimization (SEO) is essential for ensuring that a website is discoverable by search engines. This involves optimizing the site's content, structure, and performance to rank higher in search engine results.
+
+Key aspects of SEO include using relevant keywords, creating high-quality content, optimizing meta tags, and ensuring fast load times. Effective SEO practices can significantly increase organic traffic to a website.
+
+With that said, why should this be of interest to a front end developer? Shouldn’t there be an SEO expert taking care of all of this?
+
+The answer to that question is “yes, there should be”, however, as a front end developer, you do benefit from having some basic understanding of how SEO works:
+
+- **Increased visibility and traffic**: Good SEO practices improve a website’s ranking on search engine results pages (SERPs). As a front end developer you have control over how the page is rendered, including how fast it does it and the information that is provided to search engines In other words, you have full control over the traffic and visibility of the project you’re working on.
+- **Career advancement**: As businesses increasingly recognize the importance of online presence, the demand for developers with SEO expertise is growing. Front End developers who can implement SEO best practices are more valuable to employers and clients, leading to better - job opportunities and career growth.
+- **Improved code quality**: SEO-friendly code is usually cleaner, more organized, and easier to maintain (there are no guarantees though). By adhering to SEO best practices, front end developers tend to produce code that is well-structured and follows industry standards, leading to fewer bugs and more scalable projects.
+			
+## 7. RESTful APIs
+
+![RESTful API](https://assets.roadmap.sh/guest/restfulapi-from-frontend-dev-8msjn.png)
+
+RESTful APIs are a key piece of technology for front end developers to master. Mind you, not from the POV of creating them, but rather, understanding how to use and interact with them.
+
+These APIs are used to connect the front end of a web application to its backend services. Understanding how to work with APIs, including making HTTP requests and handling responses, is essential for integrating dynamic data into your web applications (i.e. data from your database, data from a third party API, etc).
+
+Familiarity with REST principles and tools like [Postman](https://postman.com) can help developers efficiently test and debug API integrations. As a front end developer, by understanding how RESTful APIs work, you gain the following “superpowers”:
+
+- **Dynamic Content**: RESTful APIs allow front end applications to request and receive data from servers dynamically. This enables the development of interactive and responsive applications that can update content without requiring a full page reload.
+- **Separation of Concerns**: By using RESTful APIs, front end developers can separate the user interface from the backend logic (dumping the responsibility of creating the backend logic on backend developers). This division allows each part of the application to be developed, tested, and maintained independently, leading to cleaner and more manageable codebases.
+- **Scalability and Flexibility**: RESTful APIs provide a standardized way to interact with backend services. This standardization makes it easier to scale applications and integrate with various third-party services. Front End developers can easily connect to different data sources and services as needed.
+- **Improved Collaboration**: Working with RESTful APIs improves collaboration between front end and backend teams. Clear API documentation and standardized endpoints enable teams to work in parallel without dependencies, speeding up the development process.
+
+## 8. Testing and Debugging
+
+![breakpoint debugging](https://assets.roadmap.sh/guest/breakpoint-debugging-izun3.jpg)
+
+Testing and debugging are crucial for ensuring that your code is functional and free of errors. While this applies to both front end and backend development alike, we tend to oversimplify the complexity of the front end logic (in our minds) and, usually, we try to avoid writing tests for it.
+
+However, there is a reason why so many testing frameworks exist for the front end: because front end logic is just as complex and requires just as much care and attention as backend logic.
+
+Now, keep in mind that familiarity with testing frameworks like Jest and debugging tools in modern browser DevTools will help you maintain high-quality code standards. However, keep in mind these are not magical tools, and they will not automatically make your code better, you still have to put in the effort.
+
+Unit testing, integration testing, and end-to-end testing are all important practices to ensure that different parts of the application work correctly both individually and together.
+
+As front end developers, you’ll want to focus on debugging and testing to ensure:
+
+- **Improved Code Quality**: Regular testing helps identify and fix bugs early in the development process, resulting in cleaner and more reliable code. This, as you’ve probably guessed by now, reduces the likelihood of errors in production, ensuring a smoother user experience. 
+- **Increased Developer Efficiency**: By using debugging tools and techniques, developers can quickly pinpoint and resolve issues, ideally,  saving time and effort.
+- **Easier Maintenance**: Well-tested code is easier to maintain and extend, period. Test suites act as a safety net around your code, and as new features are added, existing functionality remains stable (and safe), reducing the risk of introducing new bugs. This makes it easier to scale applications over time.
+
+## 9. Browser DevTools
+
+![chrome devtools](https://assets.roadmap.sh/guest/chrome-dev-tools-ef41z.jpg)
+
+Browser DevTools are essential for inspecting, debugging, and profiling your web applications. Directly built-in to browsers such as Chrome, Firefox and Safari, these tools provide a suite of features for diagnosing and fixing issues in your code. Developers can use these tools to inspect HTML elements, modify CSS styles in real-time, monitor network requests, and analyze performance bottlenecks.
+
+If you’re still wondering why a front end developer should focus on browser DevTools, these are the main reasons:
+
+- **Immediate Feedback**: Browser DevTools allow developers to inspect and modify HTML, CSS, and JavaScript in real 
+time. This immediate feedback is crucial for quickly diagnosing and fixing issues without the need to reload the page.
+- **Enhanced Debugging Capabilities**: DevTools provide powerful debugging features, such as setting breakpoints, stepping through code, and inspecting variables. These capabilities make it easier to identify and resolve bugs in complex applications.
+- **Performance Optimization**: Performance tabs in DevTools enable developers to analyze the loading and runtime performance of their applications. Tools like the Lighthouse audit and the Network panel help identify bottlenecks and optimize resource loading, leading to faster and more efficient web applications.
+- **Responsive Design Testing**: DevTools offer features for testing responsive designs across different screen sizes and devices. The device toolbar allows developers to simulate various mobile and tablet environments, ensuring that applications provide a consistent experience across all platforms.
+- **Detailed Network Analysis**: The Network panel provides insights into all network requests made by the application, including fetches, XHRs, and resource loading. This information is crucial for debugging network issues, understanding load times, and optimizing the overall performance of the application.
+- **CSS and Style Debugging**: The Elements panel allows developers to inspect and manipulate the DOM and CSS. It provides tools to edit styles, view CSS rules, and understand the computed styles for any element, making it easier to fine-tune the visual aspects of an application.
+
+## 10. At Least One Framework (React, Vue, Angular)
+
+![react, angular & vue logos](https://assets.roadmap.sh/guest/react-angular-vue-logos-se584.png)
+
+While in theory, all you need to be a front end developer is JavaScript + HTML + CSS, in practice, there are tools available (i.e. frameworks and libraries) that will help you speed up your dev process and produce much cleaner and maintainable code than what you would normally produce on your own.
+
+And in fact, those tools will also let you focus on the actual application you’re building, leaving the extra, presentation-related logic to the framework.
+
+We are, of course, talking about modern front end frameworks (or libraries) such as React, Vue, or Angular.
+
+Of course, there are other options out there, such as Svelte, Solid, or even just the native Web Components that all major browsers support nowadays. However, while those are very valid options, the main 3 still remain the most used options and if you’re looking to become a front end developer, you’ll want to first focus on one of them.
+
+Each framework has its own strengths and use cases, so understanding their core concepts and ecosystems can significantly enhance a developer's productivity. 
+
+Now the question remains: which one is the right one for you? That’s entirely up to you to decide, but here are some of the highlights of each framework:
+
+### Highlights about React
+
+- **Component-Based Architecture**: React's component-based structure promotes reusability and maintainability. Components encapsulate logic, styles, and behavior, making the code more modular and easier to manage.
+- **Virtual DOM**: React’s use of a virtual DOM improves performance by minimizing direct manipulations of the real DOM. This approach results in faster updates and a smoother user experience.
+- **Large Ecosystem and Community**: React has a huge ecosystem of libraries, tools, and a strong community. This support makes it easier to find solutions, share knowledge, and access a wide range of third-party integrations.
+- **Flexibility**: Contrary to popular belief, React is not a full-fledged framework but a library, providing flexibility in choosing additional tools and libraries for routing, state management, and other functionalities.
+
+### Highlights about Angular
+
+- **Full-Featured Framework**: Angular provides a complete solution with built-in tools for routing, state management, form handling, and HTTP requests. This reduces the need for third-party libraries and offers a cohesive development experience.
+- **Two-Way Data Binding**: Angular’s two-way data binding simplifies the synchronization between the model and the view, reducing the amount of boilerplate code needed for updates.
+- **Comprehensive Documentation and Community Support**: Angular has extensive documentation and a supportive community, making it easier to find resources and get help.
+
+### Highlights about Vue
+
+- **Progressive Framework**: Vue is designed to be incrementally adoptable. Developers can start with a small part of the application and progressively integrate Vue’s features as needed.
+- **Simplicity and Ease of Learning**: Vue’s syntax and design are straightforward, making it easier for new developers to learn and start building applications quickly.
+- **Flexibility**: Vue allows for extensive customization and can be integrated with other projects or libraries. It offers both a simple core library and advanced features for larger applications.
+
+## 11. Web Performance
+
+Web performance is a key aspect of front end development because it affects many areas around the product. And not only on the technical side, but also from the business side as well, considering how performance affects the way users experience and interact with your app.
+
+In simple terms, optimizing web performance involves making your website load faster and run more efficiently. In the space of front end development, performance optimization techniques include minimizing HTTP requests, optimizing images (as in reducing their size without losing quality), using lazy loading (async loading of portions of your app or specific components), and leveraging browser caching.
+
+### Why should you care about web performance as a front end developer?
+
+As a front end developer, the performance of your user interface is your responsibility, however, here are other reasons in case that’s not enough:
+
+- **User Experience**: As already mentioned, fast-loading websites provide a better user experience. Users are more likely to stay on a site and interact with it if pages load quickly and smoothly.
+- **SEO Benefits**: Another way to focus on SEO as a front end developer, is to focus on the performance of your app. Search engines like Google consider page speed as a ranking factor. Faster websites are more likely to rank higher in search results, driving more organic traffic.
+- **Conversion Rates**: [Studies show](https://www.speedsense.com/insights/web-performance-impact-ecommerce-revenue) that even a small delay in page load time can significantly reduce conversion rates. Improving performance can directly impact the bottom line by increasing sales and sign-ups.
+- **Mobile Performance**: With the increasing use of mobile devices, optimizing performance for mobile users is essential. Mobile networks can be slower in some parts of the world, making performance optimizations even more critical.
+
+## 12. TypeScript
+
+![typescript logo](https://assets.roadmap.sh/guest/image3-y7ryl.png)
+
+TypeScript is a superset of JavaScript that adds static typing (amongst other things). It helps catch errors early during development and helps to make your code more maintainable.
+
+As a front end developer, learning TypeScript can enhance your JavaScript skills and improve the quality of your code by giving you both types and higher-level OOP constructs (such as interfaces) to add more structure to your written logic.
+
+By providing these extra tools, TypeScript enables developers to write more predictable and robust code.
+
+Is your code going to be automatically better because of this? No, it’s not. You will still have to pay attention to what you’re writing and building, and you will still have to apply many of the concepts mentioned throughout this article.
+
+### Getting started with TypeScript
+
+- **Official Documentation**: The TypeScript Handbook is an excellent resource for learning the basics and advanced features of TypeScript.
+- **Check out the TypeScript Roadmap**: If you’re wondering what steps to take on your way to learning TypeScript, take a look at the TypeScript Roadmap to learn exactly what you need.
+- **Community Resources**: The TypeScript community is active and supportive. Joining forums, participating in discussions on platforms like Stack Overflow, and following TypeScript-related blogs can provide valuable insights and help.
+
+## Conclusion
+
+Understanding the importance and relevance of these 12 essential front end developer skills can equip front end developers with the tools and knowledge needed to create high-quality, performant, and accessible web applications.
+
+That said, this is only a high-level overview of these skills, if you want to know more about how to tackle each of every one of these skills, check out this front end roadmap.
+
+In the end, staying updated with these core skills ensures developers can effectively tackle new challenges while remaining competitive in the industry.

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

@@ -0,0 +1,264 @@
+---
+title: '8 In-Demand Full Stack Developer Skills to Master'
+description: 'Master these 8 in-demand full stack developer skills and become a standout candidate for your next job application.'
+authorId: fernando
+excludedBySlug: '/full-stack/developer-skills'
+seo:
+  title: '8 In-Demand Full Stack Developer Skills to Master'
+  description: 'Master these 8 in-demand full stack developer skills and become a standout candidate for your next job application.'
+  ogImageUrl: 'https://assets.roadmap.sh/guest/full-stack-developer-skills-abb38.jpg'
+isNew: true
+type: 'textual'
+date: 2024-07-05
+sitemap:
+  priority: 0.7
+  changefreq: 'weekly'
+tags:
+  - 'guide'
+  - 'textual-guide'
+  - 'guide-sitemap'
+---
+
+![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.
+
+Full-stack web developers share a unique blend of expertise that allows them to independently build and maintain entire web applications. However, this mix of skills is a double-edged sword because it makes staying up-to-date harder for them.
+In this article, we will explore the 8 essential full stack developer skills that you need to master and thrive in your career.
+
+Remember that you have more details about the different technologies and topics to cover in our [full stack developer roadmap](https://roadmap.sh/full-stack).
+
+## Understanding full-stack development
+
+Full stack development involves both frontend and backend work. It means you're not just limited to designing the parts of a website or application that users interact with (frontend), but also managing the server, database, and application logic that power those interactions (backend).
+
+Plus, full-stack developers need to be proficient in working with both relational and non-relational databases, setting up and maintaining infrastructure, and ensuring that their applications are scalable and secure. In other words, if they need to, full-stack developers can be the equivalent of a one-man army. Is this an ideal situation? No, it isn’t. In fact, a better way to look at a full stack developer is to think of them as a wildcard that can be placed in any team, and they’ll consistently add value to it, with minimum ramp-up time needed.
+
+With that foundation in mind, let's dive into the specific skills you need to master.
+
+## 1. Basic understanding of HTTP
+
+![basic understand of HTTP](https://assets.roadmap.sh/guest/understanding-http-pct23.png)
+
+Let’s start with the basics: understanding HTTP. HTTP, or HyperText Transfer Protocol, is the foundation of any interaction on the web. It’s what allows clients (like your web browser) and servers to communicate with each other. As a full-stack developer, having a solid grasp of HTTP is crucial for building, debugging, and maintaining web applications. It’s your bread and butter, and you’ll need to internalize it if you hope to become great at your job.
+
+### Why HTTP Matters for Full Stack Developers?
+Without HTTP, the internet as we know it wouldn’t function, it’s that simple. For a full-stack developer, understanding HTTP means you can effectively manage how your frontend communicates with your backend.
+
+### Key Concepts to understand in HTTP
+
+- **HTTP Methods**: These are the actions that can be performed on a resource. The most common methods are GET (to retrieve data), POST (to send data to the server), PUT (to update data), and DELETE (to remove data). Each method has a specific purpose and knowing when to use each one is essential for building efficient APIs. You can read the [full list of verbs here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods).
+- **Status Codes**: HTTP status codes are responses from the server to the client's request. They indicate whether the request was successful, if there was an error, or if further action is needed. Common status codes include 200 (OK), 404 (Not Found), 500 (Internal Server Error), and 403 (Forbidden). Understanding these codes helps in debugging and improving user experience. Here’s the [full list of status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status) in case you’re wondering.
+- **Headers**: HTTP headers are key-value pairs sent between the client and server. They carry essential information like content type, authorization information (in some cases even credentials), and cache control. Familiarity with headers allows you to manage security, content negotiation, and request-response flow more effectively. While you can create your own, here’s a list of the [standard set of HTTP headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers).
+
+## 2. HTML/CSS/JavaScript
+
+![html, css & javascript](https://assets.roadmap.sh/guest/html-css-javascript-layers-7agjb.png)
+
+For full-stack developers, a solid grasp of HTML, CSS, and JavaScript is essential. These technologies are the building blocks of the visual side of the web, enabling you to create an engaging and functional user interface. While you'll need many other coding skills, mastering these three should be your first priority.
+
+### HTML (HyperText Markup Language)
+
+HTML forms the backbone of any web page, providing structure and content. It defines elements like headings, paragraphs, links, images, and multimedia components.
+
+**Key Features**:
+
+- **Semantic Elements**: Elements like `<header>`, `<footer>`, `<article>`, and `<section>` enhance accessibility and SEO. Properly using these elements makes your content more understandable for users, search engines, and accessibility devices like screen readers.
+- **Foundational**: Understanding HTML is crucial for laying the foundation of any web application, making it an essential skill for full stack developers.
+
+### CSS (Cascading Style Sheets)
+
+CSS is responsible for the visual presentation of a web page. It controls layout, colors, fonts, and overall style, making your web pages visually appealing.
+
+**Key Features**:
+
+- **Rich visual elements**: Features like Flexbox, Grid Layout, animations, and transitions allow you to create complex designs with minimal code.
+- **Responsive Design**: Media queries, Flexbox, and Grid are vital for creating web pages that look great on all devices, from desktops to smartphones.
+
+### JavaScript
+
+JavaScript adds interactivity and dynamic behavior to web pages. In other words, it makes the webpage come to life.
+
+**Key Features**:
+
+- **Modern JavaScript**: Features like arrow functions, template literals, destructuring, modules, and promises make your code more concise and readable.
+- **Interactive Elements**: JavaScript makes your web pages interactive, responding to user actions in real time.
+
+## 3. Writing Modern JavaScript
+
+![modern javascript](https://assets.roadmap.sh/guest/modern-javascript-js84y.jpg)
+
+Modern JavaScript is a key element for full stack development, bringing not just new syntax but powerful tools that make development more efficient and scalable. Mastering this involves understanding how to stay up-to-date with the latest developments in the JS-world, and it also involves technologies such as: npm, build-tools, and bundlers that streamline the development process.
+
+### What is “modern JavaScript”?
+
+The term “Modern JavaScript” can be a bit ambiguous, considering how every new feature or syntax update will directly affect your experience as a developer.
+Some of those “key modern features” are:
+
+- **Arrow Functions**: Offer a shorthand for writing functions and lexical scoping of the this keyword.
+- **Template Literals**: Provide an easier way to create strings with embedded expressions.
+- **Destructuring**: Simplifies the extraction of values from arrays or properties from objects.
+- **Modules**: Enable better code organization and reuse.
+- **Promises and Async/Await**: Facilitate asynchronous programming by providing cleaner and more intuitive ways to handle async operations.
+
+### npm (Node Package Manager)
+
+For those who don’t yet know, [npm](https://www.npmjs.com/) is a critical tool for managing JavaScript libraries and dependencies. It allows you to easily install, update, and manage packages, ensuring your projects stay up-to-date with the latest versions and features.
+
+### Build Tools and Bundlers
+
+Build tools and bundlers to automate many repetitive tasks, optimize performance, and ensure code is production-ready. Let’s take a look at some key tools:
+
+- **Webpack**: [Webpack](https://webpack.js.org/) is a robust module bundler that processes and bundles JavaScript files along with assets like images and stylesheets. It has an ecosystem of plugins and loaders, making it highly configurable and suitable for complex applications. 
+- **Parcel 2**: [Parcel](https://parceljs.org/) simplifies the bundling process with zero configuration out of the box. It automatically handles code splitting hot module replacement and supports a variety of file types.
+- **Vite**: [Vite](https://vitejs.dev/) is designed for speed, leveraging native ES modules to deliver lightning-fast development builds and optimized production builds using Rollup. It’s particularly ideal for modern frameworks like Vue, React, and Svelte. Vite’s configuration is straightforward, and it supports an extensive plugin system for additional functionality.
+
+## 4. At least One Frontend Framework (React, Vue, Angular)
+
+![react, angular & vue](https://assets.roadmap.sh/guest/react-angular-vue-logos-se584.png)
+
+Although HTML, CSS, and JavaScript form the core of front-end development, there are many frameworks and libraries that can significantly enhance your development workflow. Among the most popular front-end frameworks and libraries are React, Vue, and Angular.
+
+Mind you, there are quite a lot of other options out there. However, React, Vue, and Angular remain the primary choices for most developers due to their widespread use and strong community support. 
+
+### React
+
+Developed by Facebook, React is a powerful JavaScript library for building user interfaces, especially for single-page applications.
+
+- **Component-Based Architecture**: React’s structure is built around components that encapsulate their own logic, styles, and behaviors. This modular approach promotes reusability and maintainability, making it easier to manage complex applications.
+- **Virtual DOM**: React uses a virtual DOM to optimize performance. This technique reduces the need for direct DOM manipulation, which translates into faster updates and a smoother user experience.
+- **Large Ecosystem and Community**: With a large ecosystem of libraries and tools, plus a strong community, React provides lots of resources for problem-solving and third-party integrations.
+
+### Angular
+
+Developed and maintained by Google, Angular is a full framework for building dynamic web applications
+
+- **Full-Featured Framework**: Angular offers a “complete” solution with built-in support for routing, state management, form handling, and HTTP requests. This approach minimizes the need for additional third-party libraries.
+- **Two-Way Data Binding**: Angular’s two-way data binding simplifies the synchronization between the model and the view (the data and its representation), making updates more efficient.
+- **Extensive Documentation and Community Support**: Angular has excellent documentation and a very active community, providing a wealth of resources for learning and troubleshooting.
+
+### Vue
+
+Vue.js, created by Evan You after working for Google, is known for its progressive framework design, making it easy to integrate into projects incrementally.
+
+- **Progressive Framework**: Vue is designed to be incrementally adoptable, allowing developers to start with a small part of their application and gradually integrate more features as needed.
+- **Simplicity and Ease of Learning**: Vue’s straightforward syntax and design make it easier for new developers to learn and start building applications quickly.
+- **Flexibility**: Vue offers extensive customization options and can be easily integrated with other projects or libraries. It combines a simple core library with advanced features suitable for larger applications.
+
+Each of these frameworks has its own set of strengths and use cases. The right choice depends on your specific project requirements and personal preference.
+
+## 5. Backend Programming Language
+
+![backend programming languages](https://assets.roadmap.sh/guest/ruby-python-javascript-java-code-h3wyj.jpg)
+
+Choosing the right backend programming language is crucial for building robust and efficient server-side applications. Here are some of the most popular languages used in backend development, each with its own unique features and benefits. You can read this detailed guide for more options and a complete description of each one: [The best backend languages to master](https://roadmap.sh/backend/languages).
+
+**JavaScript (Node.js)**: JavaScript, primarily known for front-end development, extends to the backend through Node.js. Node.js allows for server-side scripting, enabling full stack developers to use the same language for both client-side and server-side development. When it comes to picking a single language for full stack development, JavaScript definitely takes the lead.
+
+**Python**: Python is well known for its simplicity and readability, making it a favorite among developers. Its vast ecosystem of libraries and frameworks, such as Django and Flask, streamlines backend development and makes full stack web development very straightforward. Python's versatility and ease of use make it suitable for both beginners and experienced developers.
+
+**Java**: Java is a highly popular, class-based, object-oriented programming language that’s designed to have as few implementation dependencies as possible. Java is commonly used in large-scale enterprise applications. Frameworks like Spring and Hibernate further enhance its capabilities.
+
+**Ruby**: Ruby is known for its elegant syntax that is natural to read and easy to write. Ruby on Rails, a powerful web application framework, simplifies the process of building web applications by providing default structures for a database, a web service, and web pages. Its convention-over-configuration approach makes development faster and easier.
+
+There are many more options, and as a full stack developer, you’ll need to understand the type of technologies you feel more comfortable with, before choosing the language for your backend.
+
+## 6. Consuming and Creating RESTful APIs
+
+![restful apis](https://assets.roadmap.sh/guest/restful-apis-q1gvl.png)
+
+For full stack developers, working with RESTful APIs is a fundamental skill that bridges the front-end and back-end of web applications. APIs (Application Programming Interfaces) allow different software systems to communicate with each other, enabling your front-end to interact seamlessly with server-side logic and data.
+
+### Consuming RESTful APIs
+
+Consuming APIs involves making HTTP requests from your front-end application to retrieve or send data to the server. Here are the key concepts:
+
+- **HTTP Methods**: Understanding the different HTTP methods is crucial. We’ve already mentioned them above when describing HTTP itself, so make sure to check out the links listed there for more details.
+- **Endpoints and Routes**: An API endpoint is a specific path where your API can be accessed by a client. Each endpoint corresponds to a route in your back-end server, handling specific requests. In the case of RESTful APIs, these routes refer to resources in your system.
+- **Request and Response**: When consuming an API, the front-end sends a request to the server and receives a response. The request typically includes headers (metadata about the request) and a body (data sent to the server), while the response contains the status code, headers, and data.
+- **Fetching Data**: In JavaScript, you can use the native fetch API or libraries like Axios to make HTTP requests.
+
+### Creating RESTful APIs
+
+Creating APIs involves setting up server-side routes and handling requests. Here’s how to get started:
+
+- **Define Routes**: In your back-end framework (like Express for Node.js or Django for Python), define routes that correspond to different endpoints. Each route should handle a specific HTTP method.
+- **Handle Requests and Responses**: For each route, write logic to handle incoming requests and send appropriate responses. Use status codes to indicate the outcome of the request (e.g., 200 for success, 404 for not found, 500 for server errors).
+- **Middleware**: Middleware functions in frameworks like Express can process requests before they reach the endpoint handlers. They’re useful for tasks like authentication, logging, and data validation.
+- **Database Integration**: Often, your API will interact with a database. Use an ORM (Object-Relational Mapping) tool like Sequelize for SQL databases or Mongoose for MongoDB to manage database operations.
+- **REST Principles**: Ensure your API follows REST principles, such as statelessness (each request is independent), resource-based URLs (use nouns for endpoints), and appropriate use of HTTP methods. You can [read here](https://ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm) the full details about REST from the paper that defined the concept.
+
+## 7. Databases
+
+![relational databases](https://assets.roadmap.sh/guest/relational-cb-vs-non-relational-db-9r4m5.png)
+
+Understanding both relational and non-relational databases is crucial for managing and storing data effectively in your applications. Each type of database has its own strengths and use cases, and knowing when to use each is essential for building robust and scalable applications.
+
+### Relational Databases
+
+Relational databases store data in structured tables with predefined schemas. They use SQL (Structured Query Language) for querying and managing data. Here are some key relational databases:
+
+- **MySQL**: MySQL is one of the most popular open-source relational databases. It's known for its ease of use (a common choice for new developers) and performance.
+- **PostgreSQL**: PostgreSQL is a powerful, open-source relational database system known for its advanced features and compliance with SQL standards. It supports complex queries, transactions, and extensibility, making it suitable for a wide range of applications.
+- **SQLite**: SQLite is a lightweight, disk-based database that's easy to set up and use. It's often used in embedded systems and applications that require a simple, self-contained database engine. You’re not going to see big systems using SQLite for its main database, but it’s very common in small projects.
+
+### Non-Relational Databases
+
+Non-relational databases, also known as NoSQL databases, store data in various formats such as documents, key-value pairs, graphs, or wide-column stores. They are designed to handle large volumes of unstructured or semi-structured data. Here are some popular non-relational databases:
+
+- **MongoDB**: MongoDB is a document-oriented database that stores data in JSON-like documents. It’s highly flexible and scalable, making it ideal for applications that require quick iterations and schema flexibility.
+- **Redis**: Redis is an in-memory key-value store known for its high performance and speed. It’s commonly used for caching, real-time analytics, and as a message broker.
+- **Cassandra**: Cassandra is a distributed, wide-column store designed for handling large amounts of data across many commodity servers without any single point of failure. It's highly scalable and suitable for applications that require high availability and performance.
+
+In the end, like with many other technologies, there is not one single option that’s better than the others. It’s more about your particular needs and the features of each database. When having to decide on a specific database option, try to understand their capabilities and try to match them to your particular context.
+
+## 8. Hosting and Infrastructure
+
+![deployment insfrastructure](https://assets.roadmap.sh/guest/deployment-infrastructures-jrvr9.png)
+
+For full stack developers, understanding hosting and infrastructure is essential for deploying and managing their web applications. This involves knowing where to host your applications, how to set up servers, and how to ensure your application runs smoothly and efficiently. Here’s a breakdown of key concepts and services in this area:
+
+### Cloud Hosting Providers
+
+Cloud hosting providers offer scalable and flexible solutions for hosting web applications. They provide various services including virtual machines, storage, databases, and more. Some of the most popular providers are:
+
+- **Amazon Web Services (AWS)**: AWS offers a comprehensive suite of cloud services, including EC2 for virtual servers, S3 for storage, and RDS for managed databases. Its scalability and range of services make it a go-to choice for many developers.
+- **Google Cloud Platform (GCP)**: GCP provides robust cloud computing services, including Compute Engine for virtual machines, Cloud Storage, and Cloud SQL for managed databases. 
+- **Microsoft Azure**: Azure offers a wide range of cloud services similar to AWS and GCP. It includes Azure Virtual Machines, Blob Storage, and Azure SQL Database. Azure integrates well with Microsoft’s other products, making it ideal for enterprise applications.
+
+### Web Hosting Services
+
+For simpler or smaller-scale projects, traditional web hosting services might be more than enough. These services typically offer easy setup and management for hosting websites and web applications:
+
+- **Heroku**: Heroku is a platform-as-a-service (PaaS) that makes it easy to deploy, manage, and scale applications. It supports several programming languages and provides a straightforward way to deploy applications directly from your code repository.
+- **Netlify**: Netlify specializes in hosting static websites and front-end applications. It provides continuous deployment from Git repositories, built-in SSL, and a global CDN, making it a popular choice for modern web development workflows.
+- **Vercel**: Vercel is optimized for Next.js. It offers seamless deployment, serverless functions, and a global CDN, ensuring fast and reliable performance for web applications.
+
+### Containers and Orchestration
+
+Containers allow developers to package applications with all their dependencies, ensuring consistency across different environments (this simplifies deployment processes by ensuring your app always gets deployed into the same system). Orchestration tools manage and scale these containers:
+
+- **Docker**: Docker is a platform that allows developers to create, deploy, and run applications in containers. Containers are lightweight and portable, making it easier to manage application dependencies and environments.
+- **Kubernetes**: Kubernetes is an open-source orchestration tool for managing containerized applications at scale. It automates deployment, scaling, and operations of application containers, providing a solid infrastructure for large-scale applications.
+
+### Serverless Architecture
+
+If you just don’t want to think about the server, at all (configuration, specs, resource requirements, etc), then you probably want a serverless architecture.
+
+Serverless architecture allows developers to build and run applications without managing server infrastructure (the servers are there, you just don’t interact directly with them). Key benefits include automatic scaling and pay-per-use billing.
+
+- **AWS Lambda**: AWS Lambda lets you run code without provisioning or managing servers. It executes code in response to events and automatically scales based on the number of requests, making it ideal for microservices and real-time data processing.
+- **Google Cloud Functions**: Google Cloud Functions is a serverless execution environment for building and connecting cloud services. It allows you to write simple, single-purpose functions that are triggered by events.
+- **Azure Functions**: Azure Functions provides a serverless compute service that enables you to run event-triggered code. It integrates with other Azure services, offering a seamless development and deployment experience.
+
+### Infrastructure as Code (IaC)
+
+IaC allows developers to manage and provision computing infrastructure through machine-readable configuration files rather than physical hardware configuration or interactive configuration tools. This is a great option if you’re looking to version your infrastructure configuration.
+
+- **Terraform**: Terraform is an IaC tool that allows you to define and provision data center infrastructure using a high-level configuration language. It supports multiple cloud providers, making it a versatile choice for managing infrastructure. While not fully open-source, Terraform offers a paid version called Terraform Cloud. If you’re looking for a fully open-source version, you can look into OpenTofu, which is an open-source fork from Terraform under the Mozilla Public License 2.0.
+- **Ansible**: Ansible is an open-source automation tool for configuration management, application deployment, and task automation. It uses YAML and doesn’t require agent software on the target nodes, making it easy to use and manage.
+
+##Conclusion 
+Keeping up-to-date with the full set of skills any full stack web developer will need for their job is not easy, given how varied their work might be. That said, the 8 full stack developer skills listed here are more than enough to get you started, and you can keep adding more as you see the need for them.
+
+Remember that if you want more details about the roadmap to become a great full stack developer, you have a great resource here: [Full stack developer roadmap](https://roadmap.sh/full-stack).

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/projects/blogging-platform-api.md

@@ -0,0 +1,216 @@
+---
+title: 'Blogging Platform API'
+description: 'Build a RESTful API for a personal blogging platform'
+isNew: false
+sort: 7
+difficulty: 'beginner'
+nature: 'API'
+skills:
+  - 'Programming Language'
+  - 'CRUD'
+  - 'RESTful API'
+  - 'Database'
+seo:
+  title: 'Blogging Platform API Project Idea'
+  description: 'Build a RESTful API for a personal blogging platform. Users can create, read, update, and delete blog posts using the API.'
+  keywords:
+    - 'blogging platform api'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+You are required to create a simple RESTful API with basic CRUD operations for a personal blogging platform. CRUD stands for Create, Read, Update, and Delete. 
+
+## Goals
+
+The goals of this project are to help you:
+
+- Understand what the RESTful APIs are including best practices and conventions
+- Learn how to create a RESTful API
+- Learn about common HTTP methods like GET, POST, PUT, PATCH, DELETE
+- Learn about status codes and error handling in APIs
+- Learn how to perform CRUD operations using an API
+- Learn how to work with databases
+
+## Requirements
+
+You should create a RESTful API for a personal blogging platform. The API should allow users to perform the following operations:
+
+- Create a new blog post
+- Update an existing blog post
+- Delete an existing blog post
+- Get a single blog post
+- Get all blog posts
+- Filter blog posts by a search term
+
+Given below are the details for each API operation.
+
+### Create Blog Post
+
+Create a new blog post using the `POST` method
+
+```plaintext
+POST /posts
+{
+  "title": "My First Blog Post",
+  "content": "This is the content of my first blog post.",
+  "category": "Technology",
+  "tags": ["Tech", "Programming"]
+}
+```
+
+Each blog post should have the following fields:
+
+```json
+{
+  "title": "My First Blog Post",
+  "content": "This is the content of my first blog post.",
+  "category": "Technology",
+  "tags": ["Tech", "Programming"]
+}
+```
+
+The endpoint should validate the request body and return a `201 Created` status code with the newly created blog post i.e.
+
+```json
+{
+  "id": 1,
+  "title": "My First Blog Post",
+  "content": "This is the content of my first blog post.",
+  "category": "Technology",
+  "tags": ["Tech", "Programming"],
+  "createdAt": "2021-09-01T12:00:00Z",
+  "updatedAt": "2021-09-01T12:00:00Z"
+}
+```
+
+or a `400 Bad Request` status code with error messages in case of validation errors.
+
+## Update Blog Post
+
+Update an existing blog post using the `PUT` method
+
+```plaintext
+PUT /posts/1
+{
+  "title": "My Updated Blog Post",
+  "content": "This is the updated content of my first blog post.",
+  "category": "Technology",
+  "tags": ["Tech", "Programming"]
+}
+```
+
+The endpoint should validate the request body and return a `200 OK` status code with the updated blog post i.e.
+
+```json
+{
+  "id": 1,
+  "title": "My Updated Blog Post",
+  "content": "This is the updated content of my first blog post.",
+  "category": "Technology",
+  "tags": ["Tech", "Programming"],
+  "createdAt": "2021-09-01T12:00:00Z",
+  "updatedAt": "2021-09-01T12:30:00Z"
+}
+```
+
+or a `400 Bad Request` status code with error messages in case of validation errors. It should return a `404 Not Found` status code if the blog post was not found.
+
+### Delete Blog Post
+
+Delete an existing blog post using the `DELETE` method
+
+```plaintext
+DELETE /posts/1
+```
+
+The endpoint should return a `204 No Content` status code if the blog post was successfully deleted or a `404 Not Found` status code if the blog post was not found.
+
+### Get Blog Post
+
+Get a single blog post using the `GET` method
+
+```plaintext
+GET /posts/1
+```
+
+The endpoint should return a `200 OK` status code with the blog post i.e.
+
+```json
+{
+  "id": 1,
+  "title": "My First Blog Post",
+  "content": "This is the content of my first blog post.",
+  "category": "Technology",
+  "tags": ["Tech", "Programming"],
+  "createdAt": "2021-09-01T12:00:00Z",
+  "updatedAt": "2021-09-01T12:00:00Z"
+}
+```
+
+or a `404 Not Found` status code if the blog post was not found.
+
+### Get All Blog Posts
+
+Get all blog posts using the `GET` method
+
+```plaintext
+GET /posts
+```
+
+The endpoint should return a `200 OK` status code with an array of blog posts i.e.
+
+```json
+[
+  {
+    "id": 1,
+    "title": "My First Blog Post",
+    "content": "This is the content of my first blog post.",
+    "category": "Technology",
+    "tags": ["Tech", "Programming"],
+    "createdAt": "2021-09-01T12:00:00Z",
+    "updatedAt": "2021-09-01T12:00:00Z"
+  },
+  {
+    "id": 2,
+    "title": "My Second Blog Post",
+    "content": "This is the content of my second blog post.",
+    "category": "Technology",
+    "tags": ["Tech", "Programming"],
+    "createdAt": "2021-09-01T12:30:00Z",
+    "updatedAt": "2021-09-01T12:30:00Z"
+  }
+]
+```
+
+You don't have to implement pagination, authentication or authorization for this project. You can focus on the core functionality of the API.
+
+While retrieving posts, user can also filter posts by a search term. You should do a wildcard search on the title, content or category fields of the blog posts. For example:
+
+```plaintext
+GET /posts?term=tech
+```
+
+This should return all blog posts that have the term "tech" in their title, content or category. You can use a simple SQL query if you are using a SQL database or a similar query for a NoSQL database.
+
+<hr />
+
+## Tech Stack
+
+Feel free to use any programming language, framework, and database of your choice for this project. Here are some suggestions:
+
+- If you are using JavaScript, you can use Node.js with Express.js
+- If you are using Python, you can use Flask or Django
+- If you are using Java, you can use Spring Boot
+- If you are using Ruby, you can use Ruby on Rails
+
+For databases, you can use:
+
+- MySQL if you are using SQL
+- MongoDB if you are using NoSQL

src/data/projects/broadcast-server.md

@@ -0,0 +1,59 @@
+---
+title: 'Broadcast Server'
+description: 'Build a server that can broadcast messages to connected clients.'
+isNew: false
+sort: 12
+difficulty: 'intermediate'
+nature: 'CLI'
+skills:
+  - 'Programming Language'
+  - 'Networking'
+  - 'Websockets'
+  - 'HTTP'
+seo:
+  title: 'Broadcast Server Project Idea'
+  description: 'Build a server that can broadcast messages to connected clients.'
+  keywords:
+    - 'broadcast server'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+You are required to create a simple broadcast server that will allow clients to connect to it, send messages that will be broadcasted to all connected clients.
+
+## Goal
+
+The goal of this project is to help you understand how to work with websockets and implement real-time communication between clients and servers. This will help you understand how the real-time features of applications like chat applications, live scoreboards, etc., work.
+
+## Requirements
+
+You are required to build a CLI based application that can be used to either start the server or connect to the server as a client. Here are the sample commands that you can use:
+
+- `broadcast-server start` - This command will start the server.
+- `broadcast-server connect` - This command will connect the client to the server.
+
+When the server is started using the `broadcast-server start` command, it should listen for client connections on a specified port (you can configure that using command options or hardcode for simplicity). When a client connects and sends a message, the server should broadcast this message to all connected clients.
+
+The server should be able to handle multiple clients connecting and disconnecting gracefully.
+
+## Implementation
+
+You can use any programming language to implement this project. Here are some of the steps that you can follow to implement this project:
+
+1. Create a server that listens for incoming connections.
+2. When a client connects, store the connection in a list of connected clients.
+3. When a client sends a message, broadcast this message to all connected clients.
+4. Handle client disconnections and remove the client from the list of connected clients.
+5. Implement a client that can connect to the server and send messages.
+6. Test the server by connecting multiple clients and sending messages.
+7. Implement error handling and graceful shutdown of the server.
+
+<hr />
+
+This project will help you understand how to work with websockets and implement real-time communication between clients and servers. You can extend this project by adding features like authentication, message history, etc.

src/data/projects/database-backup-utility.md

@@ -0,0 +1,75 @@
+---
+title: 'Database Backup Utility'
+description: 'Build a database backup utility that can backup and restore any DB'
+isNew: false
+sort: 18
+difficulty: 'advanced'
+nature: 'CLI'
+skills:
+  - 'Programming Language'
+  - 'Databases'
+  - 'CLI'
+seo:
+  title: 'Database Backup Utility Project Idea'
+  description: ''
+  keywords:
+    - 'multiplayer game server'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+You are required to build a command-line interface (CLI) utility for backing up any type of database. The utility will support various database management systems (DBMS) such as MySQL, PostgreSQL, MongoDB, SQLite, and others. The tool will feature automatic backup scheduling, compression of backup files, storage options (local and cloud), and logging of backup activities.
+
+## Project Requirements
+
+The CLI tool should support the following features:
+
+### Database Connectivity
+
+- **Support for Multiple DBMS:** Provide support for connecting to various types of databases (e.g., MySQL, PostgreSQL, MongoDB).
+- **Connection Parameters:** Allow users to specify database connection parameters. Parameters may include host, port, username, password, and database name.
+- **Connection Testing:** Validate credentials based on the database type before proceeding with backup operations.
+- **Error Handling:** Implement error handling for database connection failures.
+
+### Backup Operations
+
+- **Backup Types:** Support full, incremental, and differential backup types based on the database type and user preference.
+- **Compression:** Compress backup files to reduce storage space.
+
+### Storage Options
+
+- **Local Storage:** Allow users to store backup files locally on the system.
+- **Cloud Storage:** Provide options to store backup files on cloud storage services like AWS S3, Google Cloud Storage, or Azure Blob Storage.
+
+### Logging and Notifications
+
+- **Logging:** Log backup activities, including start time, end time, status, time taken, and any errors encountered.
+- **Notifications:** Optionally send slack notification on completion of backup operations.
+
+### Restore Operations
+
+- **Restore Backup:** Implement a restore operation to recover the database from a backup file.
+- **Selective Restore:** Provide options for selective restoration of specific tables or collections if supported by the DBMS.
+
+## Constraints
+
+Feel free to use any programming language or framework of your choice to implement the database backup utility. Ensure that the tool is well-documented and easy to use. You can leverage existing libraries or tools for database connectivity and backup operations.
+
+- The tool should be designed to handle large databases efficiently.
+- Ensure that the backup and restore operations are secure and reliable.
+- The utility should be user-friendly and provide clear instructions for usage (e.g., help command).
+- Consider the performance implications of backup operations on the database server.
+- Implement proper error handling and logging mechanisms to track backup activities.
+- Ensure compatibility with different operating systems (Windows, Linux, macOS).
+
+
+<hr />
+
+Working on this project will help you gain a deeper understanding of database management systems, backup strategies, command-line interface development, and error handling. You will also learn about cloud storage integration and logging mechanisms. This project will enhance your skills in programming, database management, and system administration.
+

src/data/projects/ecommerce-api.md

@@ -0,0 +1,54 @@
+---
+title: 'E-Commerce API'
+description: 'E-Commerce platform with cart and payment gateway integration.'
+isNew: false
+sort: 13
+difficulty: 'intermediate'
+nature: 'API'
+skills:
+  - 'Programming Language'
+  - 'Database'
+  - 'Payment Gateway'
+  - 'Inventory Management'
+seo:
+  title: 'E-Commerce API Project Idea'
+  description: 'E-Commerce platform with cart and payment gateway integration.'
+  keywords:
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+You are required to build an API for an e-commerce platform. If you have developed the other projects in this roadmap, you will have to keep in mind everything you have learned so far:
+
+- JWT authentication to ensure many users can interact with it.
+- Implementing simple CRUD operations.
+- Interaction with external services. Here you’ll be integrating with payment gateways such as Stripe.
+- A complex data model that can handle products, shopping carts, and more.
+
+The goal of this project is to help you understand how to build a logic-heavy application with complex data models. You will also learn how to interact with external services and handle user authentication.
+
+![E-Commerce API](https://assets.roadmap.sh/guest/simple-ecommerce-api-thzqo.png)
+
+## Requirements
+
+Here is a rough list of requirements for this project:
+
+- Ability for users to sign up and log in.
+- Ability to add products to a cart.
+- Ability to remove products from a cart.
+- Ability to view and search for products.
+- Ability for users to checkout and pay for products.
+
+You should also have some sort of admin panel where only you can add products, set the prices, manage inventory, and more.
+
+Start with building the API first and then frontend; you can use tools like Postman to interact with your API. Alternatively, build a simple frontend with HTML, CSS and some templating engine like Jinja or EJS.
+
+<hr />
+
+This project is a great way to learn how to build a complex application with a lot of moving parts. I will highly recommend you to complete this project before moving on to more advanced projects.

src/data/projects/expense-tracker-api.md

@@ -0,0 +1,64 @@
+---
+title: 'Expense Tracker API'
+description: 'Build an API for an expense tracker application.'
+isNew: false
+sort: 9
+difficulty: 'beginner'
+nature: 'API'
+skills:
+  - 'Programming Language'
+  - 'Data modeling'
+  - 'User Authentication'
+seo:
+  title: 'Expense Tracker API Project Idea'
+  description: 'Build an API for an expense tracker application.'
+  keywords:
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+Build an API for an expense tracker application. This API should allow users to create, read, update, and delete expenses. Users should be able to sign up and log in to the application. Each user should have their own set of expenses.
+
+![Expense Tracker API](https://assets.roadmap.sh/guest/expense-tracker-api-m72p5.png)
+
+## Features
+
+Here are the features that you should implement in your Expense Tracker API:
+
+- Sign up as a new user.
+- Generate and validate JWT tokens for handling authentication and user session.
+- List and filter your past expenses. You can add the following filters:
+  - Past week
+  - Past month
+  - Last 3 months
+  - Custom (to specify a start and end date of your choosing).
+- Add a new expense
+- Remove existing expenses
+- Update existing expenses
+
+## Constraints
+
+You can use any programming language and framework of your choice. You can use a database of your choice to store the data. You can use any ORM or database library to interact with the database.
+
+Here are some constraints that you should follow:
+
+- You’ll be using [JWT (JSON Web Token)](https://itnext.io/demystifying-jwt-a-guide-for-front-end-developers-ead6574531c3) to protect the endpoints and to identify the requester.
+- For the different expense categories, you can use the following list (feel free to decide how to implement this as part of your data model):
+  - Groceries
+  - Leisure
+  - Electronics
+  - Utilities
+  - Clothing
+  - Health
+  - Others
+
+<hr />
+
+This is the last "beginner" project in the backend roadmap. If you have completed all the projects in the backend roadmap, you should have a good understanding of how to build a backend application. You can now move on to the "intermediate" projects in the backend roadmap.
+

src/data/projects/expense-tracker.md

@@ -0,0 +1,85 @@
+---
+title: 'Expense Tracker'
+description: 'Build a simple expense tracker to manage your finances.'
+isNew: false
+sort: 3
+difficulty: 'beginner'
+nature: 'CLI'
+skills:
+  - 'Programming Language'
+  - 'CLI'
+  - 'Filesystem'
+  - 'Logic Building'
+seo:
+  title: 'Expense Tracker'
+  description: 'Build a simple expense tracker application to manage your finances.'
+  keywords:
+    - 'expense tracker cli'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+Build a simple expense tracker application to manage your finances. The application should allow users to add, delete, and view their expenses. The application should also provide a summary of the expenses.
+
+## Requirements
+
+Application should run from the command line and should have the following features:
+
+- Users can add an expense with a description and amount.
+- Users can update an expense.
+- Users can delete an expense.
+- Users can view all expenses.
+- Users can view a summary of all expenses.
+- Users can view a summary of expenses for a specific month (of current year).
+
+Here are some additional features that you can add to the application:
+
+- Add expense categories and allow users to filter expenses by category.
+- Allow users to set a budget for each month and show a warning when the user exceeds the budget.
+- Allow users to export expenses to a CSV file.
+
+The list of commands and their expected output is shown below:
+
+```bash
+$ expense-tracker add --description "Lunch" --amount 20
+# Expense added successfully (ID: 1)
+
+$ expense-tracker add --description "Dinner" --amount 10
+# Expense added successfully (ID: 2)
+
+$ expense-tracker list
+# ID  Date       Description  Amount
+# 1   2024-08-06  Lunch        $20
+# 2   2024-08-06  Dinner       $10
+
+$ expense-tracker summary
+# Total expenses: $30
+
+$ expense-tracker delete --id 1
+# Expense deleted successfully
+
+$ expense-tracker summary
+# Total expenses: $20
+
+$ expense-tracker summary --month 8
+# Total expenses for August: $20
+```
+
+## Implementation
+
+You can implement the application using any programming language of your choice. Here are some suggestions:
+
+- Use any programming language for any available module for parsing command arguments (e.g. python with the `argparse`, node.js with `commander` etc).
+- Use a simple text file to store the expenses data. You can use JSON, CSV, or any other format to store the data.
+- Add error handling to handle invalid inputs and edge cases (e.g. negative amounts, non-existent expense IDs, etc).
+- Use functions to modularize the code and make it easier to test and maintain.
+
+<hr />
+
+This project idea is a great way to practice your logic building skills and learn how to interact with the filesystem using a CLI application. It will also help you understand how to manage data and provide useful information to users in a structured way.

src/data/projects/fitness-workout-tracker.md

@@ -0,0 +1,69 @@
+---
+title: 'Workout Tracker'
+description: 'App to let users track their workouts and progress.'
+isNew: false
+sort: 14
+difficulty: 'intermediate'
+nature: 'API'
+skills:
+  - 'Programming Language'
+  - 'Date and Time'
+  - 'Database'
+  - 'Seeder'
+  - 'OpenAPI'
+seo:
+  title: 'Workout Tracker Project Idea'
+  description: 'App to let users track their workouts and progress.'
+  keywords:
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+This project involves creating a backend system for a workout tracker application where users can sign up, log in, create workout plans, and track their progress. The system will feature JWT authentication, CRUD operations for workouts, and generate reports on past workouts.
+
+## Requirements
+
+You are required to develop an API for a workout tracker application that allows users to manage their workouts and track their progress. Your first task is to think about the database schema and the API endpoints that will be needed to support the application's functionality. Here are some of the key features you should consider:
+
+### Exercise Data
+
+You should write a data seeder to populate the database with a list of exercises. Each exercise should have a name, description, and category (e.g., cardio, strength, flexibility) or muscle group (e.g., chest, back, legs). Exercises will be used to create workout plans.
+
+### User Authentication and Authorization
+
+Users will be able to sign up, log in, and log out of the application. You should use JWT tokens for authentication and authorization. Only authenticated users should be able to create, update, and delete workout plans. Needless to say, users should only be able to access their own workout plans.
+
+- **Sign-Up**: Allow users to create an account.
+- **Login**: Allow users to log in to their account.
+- **JWT**: Use JSON Web Tokens for authentication.
+
+### Workout Management
+
+Users will be able to create their workout plans. Workout plans should consist of multiple exercises, each with a set number of repetitions, sets, and weights. Users should be able to update and delete their workout plans. Additionally, users should be able to schedule workouts for specific dates and times.
+
+- Create Workout: Allow users to create workouts composed of multiple exercises.
+- Update Workout: Allow users to update workouts and add comments.
+- Delete Workout: Allow users to delete workouts.
+- Schedule Workouts: Allow users to schedule workouts for specific dates and times.
+- List Workouts: List active or pending workouts sorted by date and time.
+- Generate Reports: Generate reports on past workouts and progress.
+
+## Constraints
+
+You are free to choose the programming language and database of your choice. Actual decisions for the database schema, API endpoints, and other implementation details are up to you. However, you should consider the following constraints:
+
+- **Database**: Use a relational database to store user data, workout plans, and exercise data.
+- **API**: Develop a RESTful API to interact with the database.
+- **Security**: Implement JWT authentication to secure the API endpoints.
+- **Testing**: Write unit tests to ensure the correctness of your code.
+- **Documentation**: Learn about OpenAPI Specs. Document your API endpoints and provide examples of how to use them.
+
+<hr />
+
+This project is a great way to practice building a backend system for a real-world application. You will learn how to design a database schema, implement user authentication, and create RESTful API endpoints. Additionally, you will gain experience in writing unit tests and documenting your code.

src/data/projects/github-user-activity.md

@@ -0,0 +1,56 @@
+---
+title: 'GitHub User Activity'
+description: 'Use GitHub API to fetch user activity and display it in the terminal.'
+isNew: false
+sort: 2
+difficulty: 'beginner'
+nature: 'CLI'
+skills:
+  - 'Programming Language'
+  - 'API Consumption'
+seo:
+  title: 'GitHub User Activity CLI'
+  description: 'Build a command line interface (CLI) to fetch and display GitHub user activity.'
+  keywords:
+    - 'github user activity cli'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+In this project, you will build a simple command line interface (CLI) to fetch the recent activity of a GitHub user and display it in the terminal. This project will help you practice your programming skills, including working with APIs, handling JSON data, and building a simple CLI application.
+
+## Requirements
+
+The application should run from the command line, accept the GitHub username as an argument, fetch the user's recent activity using the GitHub API, and display it in the terminal. The user should be able to:
+
+- Provide the GitHub username as an argument when running the CLI.
+  ```bash
+  github-activity <username>
+  ```
+- Fetch the recent activity of the specified GitHub user using the GitHub API. You can use the following endpoint to fetch the user's activity:
+  ```
+  # https://api.github.com/users/<username>/events
+  # Example: https://api.github.com/users/kamranahmedse/events
+  ```
+- Display the fetched activity in the terminal.
+  ```
+  Output:
+  - Pushed 3 commits to kamranahmedse/developer-roadmap
+  - Opened a new issue in kamranahmedse/developer-roadmap
+  - Starred kamranahmedse/developer-roadmap
+  - ...
+  ```
+  You can [learn more about the GitHub API here](https://docs.github.com/en/rest/activity/events?apiVersion=2022-11-28).
+- Handle errors gracefully, such as invalid usernames or API failures.
+- Use a programming language of your choice to build this project.
+- Do not use any external libraries or frameworks to fetch the GitHub activity.
+
+<hr />
+
+If you are looking to build a more advanced version of this project, you can consider adding features like filtering the activity by event type, displaying the activity in a more structured format, or caching the fetched data to improve performance. You can also explore other endpoints of the GitHub API to fetch additional information about the user or their repositories.

src/data/projects/image-processing-service.md

@@ -0,0 +1,152 @@
+---
+title: 'Image Processing Service'
+description: 'Build a service that allows users to upload and process images.'
+isNew: false
+sort: 15
+difficulty: 'intermediate'
+nature: 'API'
+skills:
+  - 'Programming Language'
+  - 'Image Processing'
+  - 'Database'
+  - 'Queues'
+seo:
+  title: 'Image Processing Service Project Idea'
+  description: 'Build a service that allows users to upload and process images.'
+  keywords:
+    - 'image processing service'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+This project involves creating a backend system for an image processing service similar to Cloudinary. The service will allow users to upload images, perform various transformations, and retrieve images in different formats. The system will feature user authentication, image upload, transformation operations, and efficient retrieval mechanisms.
+
+## Requirements
+
+Here is the list of features that you should implement in this project:
+
+### User Authentication
+
+- **Sign-Up**: Allow users to create an account.
+- **Log-In**: Allow users to log into their account.
+- **JWT Authentication**: Secure endpoints using JWT tokens for authenticated access.
+
+### Image Management
+
+- **Upload Image**: Allow users to upload images.
+- **Transform Image**: Allow users to perform various transformations (resize, crop, rotate, watermark etc.).
+- **Retrieve Image**: Allow users to retrieve a saved image in different formats.
+- **List Images**: List all uploaded images by the user with metadata.
+
+### Image Transformation
+
+Here is the list of transformations that you can implement:
+
+- Resize
+- Crop
+- Rotate
+- Watermark
+- Flip
+- Mirror
+- Compress
+- Change format (JPEG, PNG, etc.)
+- Apply filters (grayscale, sepia, etc.)
+
+Feel free to add more transformations based on your interest and expertise.
+
+## How to Implement
+
+Here is the list of endpoints that you can implement for this project:
+
+### Authentication Endpoints
+
+Register a new user:
+
+```
+POST /register
+{
+  "username": "user1",
+  "password": "password123"
+}
+```
+Response should be the user object with a JWT token.
+
+Log in an existing user:
+
+```
+POST /login
+{
+  "username": "user1",
+  "password": "password123"
+}
+```
+Response should be the user object with a JWT token.
+
+### Image Management Endpoints
+
+#### Upload an image:
+
+```
+POST /images
+Request Body: Multipart form-data with image file
+Response: Uploaded image details (URL, metadata).
+```
+
+#### Apply transformations to an image:
+
+```
+POST /images/:id/transform
+{
+  "transformations": {
+    "resize": {
+      "width": "number",
+      "height": "number"
+    },
+    "crop": {
+      "width": "number",
+      "height": "number",
+      "x": "number",
+      "y": "number"
+    },
+    "rotate": "number",
+    "format": "string",
+    "filters": {
+      "grayscale": "boolean",
+      "sepia": "boolean"
+    }
+  }
+}
+```
+User can apply one or more transformations to the image. Response should be the transformed image details (URL, metadata).
+
+#### Retrieve an image:
+
+```
+GET /images/:id
+```
+Response should be the image actual image detail.
+
+#### Get a paginated list of images:
+
+```
+GET /images?page=1&limit=10
+```
+
+## Tips
+
+- Use a cloud storage service like AWS S3, Cloudflare R2, or Google Cloud Storage to store images.
+- Use some image processing libraries to apply transformations.
+- Put a rate limit on image transformations to prevent abuse.
+- Consider caching transformed images to improve performance.
+- Implement error handling and validation for all endpoints.
+- Optionally use a message queue like RabbitMQ or Kafka to process image transformations asynchronously.
+
+<hr />
+
+This project will help you understand how to build a scalable image processing service with user authentication and image transformation capabilities. You can use this project to showcase your backend development skills and learn about image processing techniques.

src/data/projects/markdown-note-taking-app.md

@@ -0,0 +1,42 @@
+---
+title: 'Markdown Note-taking App'
+description: 'Build a note-taking app that uses markdown for formatting.'
+isNew: false
+sort: 10
+difficulty: 'intermediate'
+nature: 'API'
+skills:
+  - 'Programming Language'
+  - 'Text Processing'
+  - 'Markdown libraries'
+  - 'File Uploads'
+seo:
+  title: 'Markdown Note-taking App Project Idea'
+  description: 'Build an API for an expense tracker application.'
+  keywords:
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+You are required to build a simple note-taking app that lets users upload markdown files, check the grammar, save the note, and render it in HTML. The goal of this project is to help you learn how to handle file uploads in a RESTful API, parse and render markdown files using libraries, and check the grammar of the notes.
+
+![Markdown Note-taking App](https://assets.roadmap.sh/guest/markdown-note-taking-app-tymi3.png)
+
+## Features
+
+You have to implement the following features:
+
+- You’ll provide an endpoint to check the grammar of the note.
+- You’ll also provide an endpoint to save the note that can be passed in as Markdown text.
+- Provide an endpoint to list the saved notes (i.e. uploaded markdown files).
+- Return the HTML version of the Markdown note (rendered note) through another endpoint.
+
+## Tips to Get Started
+
+Feel free to use any programming language and framework of your choice. Use the package manager of the chosen language to install the required libraries for parsing and rendering markdown files.

src/data/projects/movie-reservation-system.md

@@ -0,0 +1,70 @@
+---
+title: 'Movie Reservation System'
+description: 'Build a system that allows users to reserve movie tickets.'
+isNew: false
+sort: 16
+difficulty: 'advanced'
+nature: 'API'
+skills:
+  - 'Programming Language'
+  - 'Database'
+  - 'Scheduling'
+  - 'Authentication'
+seo:
+  title: 'Movie Reservation System Project Idea'
+  description: 'Build a system that allows users to reserve movie tickets.'
+  keywords:
+    - 'movie reservation system'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+You are required to build backend system for a movie reservation service. The service will allow users to sign up, log in, browse movies, reserve seats for specific showtimes, and manage their reservations. The system will feature user authentication, movie and showtime management, seat reservation functionality, and reporting on reservations.
+
+## Goal
+
+The goal of this project is to help you understand how to implement complex business logic i.e. seat reservation and scheduling, thinking about the data model and relationships, and complex queries.
+
+## Requirements
+
+We have intentionally left out the implementation details to encourage you to think about the design and implementation of the system. However here are some requirements that you can consider:
+
+### User Authentication and Authorization
+
+- Users should be able to sign up and log in.
+- You also need roles for users, such as admin and regular user. Admins should be able to manage movies and showtimes.
+- Regular users should be able to reserve seats for a showtime.
+
+> You can create the initial admin using seed data. Only admins should be able to promote other users to admin and be able to do things related to movie management, reporting, etc.
+
+### Movie Management
+
+- Admins should be able to add, update, and delete movies.
+- Each movie should have a title, description, and poster image.
+- Movies should be categorized by genre.
+- Movies should have showtimes.
+
+### Reservation Management
+
+- Users should be able to get the movies and their show times for a specific date.
+- Users should be able to reserve seats for a showtime, see the available seats, and select the seats they want.
+- Users should be able to see their reservations and cancel them (only upcoming ones).
+- Admins should be able to see all reservations, capacity, and revenue.
+
+## Implementation Considerations
+
+- Think about the data model and relationships between entities.
+- Think about how you will avoid overbooking, and how you will handle seat reservations.
+- Think about how you will handle the scheduling of showtimes.
+- Think about how you will handle the reporting of reservations.
+- Think about how you will handle the authentication and authorization of users.
+
+<hr />
+
+This project is quite complex and will require you to think about the design and implementation of the system. You can use any programming language and database of your choice. I would recommend using a relational database such as MySQL or PostgreSQL. Once you have finished this project, you will have a good understanding of how to implement complex business logic, think about the data model and relationships, and complex queries. You can also extend this project by adding more features such as payment processing, email notifications, etc.

src/data/projects/personal-blog.md

@@ -0,0 +1,74 @@
+---
+title: 'Personal Blog'
+description: 'Build a personal blog to write and publish articles on various topics.'
+isNew: false
+sort: 5
+difficulty: 'beginner'
+nature: 'Web App'
+skills:
+  - 'Programming Language'
+  - 'Basic Authentication'
+  - 'Markdown'
+  - 'Filesystem'
+  - 'Libraries'
+seo:
+  title: 'Personal Blog Project Idea'
+  description: 'Build a personal blog to write and publish articles on various topics. Learn how to create a blog using a programming language and frontend technologies.'
+  keywords:
+    - 'personal blog project'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+You are required to build a personal blog where you can write and publish articles. The blog will have two sections: a guest section and an admin section.
+
+**Guest Section** — A list of pages that can be accessed by anyone:
+
+- **Home Page:** This page will display the list of articles published on the blog.
+- **Article Page:** This page will display the content of the article along with the date of publication.
+
+**Admin Section** — are the pages that only you can access to publish, edit, or delete articles.
+
+- **Dashboard:** This page will display the list of articles published on the blog along with the option to add a new article, edit an existing article, or delete an article.
+- **Add Article Page:** This page will contain a form to add a new article. The form will have fields like title, content, and date of publication.
+- **Edit Article Page:** This page will contain a form to edit an existing article. The form will have fields like title, content, and date of publication.
+
+Here are the mockups to give you an idea of the different pages of the blog.
+
+Pages that anyone can access
+
+![Personal Blog](https://assets.roadmap.sh/guest/blog-guest-pages.png)
+
+Pages that only the admin can access
+
+![Personal Blog](https://assets.roadmap.sh/guest/blog-admin-pages.png)
+
+## How to Implement
+
+Here are some guidelines to help you implement the personal blog:
+
+### Storage
+
+To keep things simple for now, you can use the filesystem to store the articles. Each article will be stored as a separate file in a directory. The file will contain the title, content, and date of publication of the article. You can use JSON or Markdown format to store the articles. 
+
+### Backend
+
+You can use any programming language to build the backend of the blog. You don't have to make it as an API for this project, we have other projects for that. You can have pages that render the HTML directly from the server and forms that submit data to the server.
+
+### Frontend
+
+For the frontend, you can use HTML and CSS (no need for JavaScript for now). You can use any templating engine to render the articles on the frontend.
+
+### Authentication
+
+You can implement basic authentication for the admin section. You can either use the [standard HTTP basic authentication](https://youtu.be/mwccHwUn7Gc?t=20) or simply hardcode the username and password in the code for now and create a simple login page that will create a session for the admin.
+
+<hr />
+
+After completing this project, you will have practised templating, filesystem operations, basic authentication, form handling, and rendering HTML pages from the server. You can extend this project further by adding features like comments, categories, tags, search functionality, etc. Make sure to check the other backend projects that go into more advanced topics like databases, APIs, security best practices etc.

src/data/projects/realtime-leaderboard-system.md

@@ -0,0 +1,48 @@
+---
+title: 'Real-time Leaderboard'
+description: 'Create a real-time leaderboard system for ranking and scoring.'
+isNew: false
+sort: 17
+difficulty: 'advanced'
+nature: 'API'
+skills:
+  - 'Programming Language'
+  - 'Database'
+  - 'Scheduling'
+  - 'Authentication'
+seo:
+  title: 'Real-time Leaderboard System Idea'
+  description: 'Create a real-time leaderboard system that updates scores in real-time.'
+  keywords:
+    - 'movie reservation system'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+This project involves creating a backend system for a real-time leaderboard service. The service will allow users to compete in various games or activities, track their scores, and view their rankings on a leaderboard. The system will feature user authentication, score submission, real-time leaderboard updates, and score history tracking. Redis sorted sets will be used to manage and query the leaderboards efficiently.
+
+## Project Requirements
+
+You are to build an imaginary real-time leaderboard system that ranks users based on their scores in various games or activities. The system should meet the following requirements:
+
+1. **User Authentication**: Users should be able to register and log in to the system.
+2. **Score Submission**: Users should be able to submit their scores for different games or activities.
+3. **Leaderboard Updates**: Display a global leaderboard showing the top users across all games.
+4. **User Rankings**: Users should be able to view their rankings on the leaderboard.
+5. **Top Players Report:** Generate reports on the top players for a specific period.
+
+## Tip - Use Redis Sorted Sets
+
+- **Leaderboard Storage:** Use Redis sorted sets to store and manage leaderboards.
+- **Real-Time Updates:** Utilize Redis sorted sets for efficient real-time updates and queries.
+- **Rank Queries:** Use Redis commands to query user ranks and leaderboard positions.
+
+<hr />
+
+After finishing this project, you will have a good understanding of how to create a real-time leaderboard system that updates scores in real-time. You will also gain experience working with Redis sorted sets and implementing user authentication and score submission features.

src/data/projects/task-tracker.md

@@ -0,0 +1,124 @@
+---
+title: 'Task Tracker'
+description: 'Build a CLI app to track your tasks and manage your to-do list.'
+isNew: false
+sort: 1
+difficulty: 'beginner'
+nature: 'CLI'
+skills:
+  - 'Programming Language'
+  - 'CLI'
+  - 'Filesystem'
+seo:
+  title: 'Task Tracker CLI'
+  description: 'Build a command line interface (CLI) to track your tasks and manage your to-do list.'
+  keywords:
+    - 'task tracker cli'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+Task tracker is a project used to track and manage your tasks. In this task, you will build a simple command line interface (CLI) to track what you need to do, what you have done, and what you are currently working on. This project will help you practice your programming skills, including working with the filesystem, handling user inputs, and building a simple CLI application.
+
+## Requirements
+
+The application should run from the command line, accept user actions and inputs as arguments, and store the tasks in a JSON file. The user should be able to:
+
+- Add, Update, and Delete tasks
+- Mark a task as in progress or done
+- List all tasks
+- List all tasks that are done
+- List all tasks that are not done
+- List all tasks that are in progress
+
+Here are some constraints to guide the implementation:
+
+- You can use any programming language to build this project.
+- Use positional arguments in command line to accept user inputs.
+- Use a JSON file to store the tasks in the current directory.
+- The JSON file should be created if it does not exist.
+- Use the native file system module of your programming language to interact with the JSON file.
+- Do not use any external libraries or frameworks to build this project.
+- Ensure to handle errors and edge cases gracefully.
+
+### Example
+
+The list of commands and their usage is given below:
+
+```bash
+# Adding a new task
+task-cli add "Buy groceries"
+# Output: Task added successfully (ID: 1)
+
+# Updating and deleting tasks
+task-cli update 1 "Buy groceries and cook dinner"
+task-cli delete 1
+
+# Marking a task as in progress or done
+task-cli mark-in-progress 1
+task-cli mark-done 1
+
+# Listing all tasks
+task-cli list
+
+# Listing tasks by status
+task-cli list done
+task-cli list todo
+task-cli list in-progress
+```
+
+### Task Properties
+
+Each task should have the following properties:
+
+- `id`: A unique identifier for the task
+- `description`: A short description of the task
+- `status`: The status of the task (`todo`, `in-progress`, `done`)
+- `createdAt`: The date and time when the task was created
+- `updatedAt`: The date and time when the task was last updated
+
+Make sure to add these properties to the JSON file when adding a new task and update them when updating a task.
+
+<hr />
+
+## Getting Started
+
+Here are a few steps to help you get started with the Task Tracker CLI project:
+
+### Set Up Your Development Environment
+
+- Choose a programming language you are comfortable with (e.g., Python, JavaScript, etc.).
+- Ensure you have a code editor or IDE installed (e.g., VSCode, PyCharm).
+
+### Project Initialization
+
+- Create a new project directory for your Task Tracker CLI.
+- Initialize a version control system (e.g., Git) to manage your project.
+
+### Implementing Features
+
+- Start by creating a basic CLI structure to handle user inputs.
+- Implement each feature one by one, ensuring to test thoroughly before moving to the next e.g. implement adding task functionality first, listing next, then updating, marking as in progress, etc.
+
+### Testing and Debugging
+
+- Test each feature individually to ensure they work as expected. Look at the JSON file to verify that the tasks are being stored correctly.
+- Debug any issues that arise during development.
+
+### Finalizing the Project
+
+- Ensure all features are implemented and tested.
+- Clean up your code and add comments where necessary.
+- Write a good readme file on how to use your Task Tracker CLI.
+
+<hr />
+
+By the end of this project, you will have developed a practical tool that can help you or others manage tasks efficiently. This project lays a solid foundation for more advanced programming projects and real-world applications.
+
+Happy coding!

src/data/projects/todo-list-api.md

@@ -0,0 +1,211 @@
+---
+title: 'Todo List API'
+description: 'Build a RESTful API to allow users to manage their to-do list.'
+isNew: false
+sort: 7
+difficulty: 'beginner'
+nature: 'API'
+skills:
+  - 'RESTful API'
+  - 'Database'
+  - 'CRUD Operations'
+  - 'Data Modeling'
+  - 'Authentication'
+seo:
+  title: 'Todo List API Project Idea'
+  description: 'Build a RESTful API to allow users to manage their to-do list.'
+  keywords:
+    - 'todo list api'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+In this project you are required to develop a RESTful API to allow users to manage their to-do list. The previous backend projects have only focused on the CRUD operations, but this project will require you to implement user authentication as well.
+
+![Todo List API](https://assets.roadmap.sh/guest/todo-list-api-bsrdd.png)
+
+## Goals
+
+The skills you will learn from this project include:
+
+- User authentication
+- Schema design and Databases
+- RESTful API design
+- CRUD operations
+- Error handling
+- Security
+
+## Requirements
+
+You are required to develop a RESTful API with following endpoints
+
+- User registration to create a new user
+- Login endpoint to authenticate the user and generate a token
+- CRUD operations for managing the to-do list
+- Implement user authentication to allow only authorized users to access the to-do list
+- Implement error handling and security measures
+- Use a database to store the user and to-do list data (you can use any database of your choice)
+- Implement proper data validation
+- Implement pagination and filtering for the to-do list
+
+Given below is a list of the endpoints and the details of the request and response:
+
+### User Registration
+
+Register a new user using the following request:
+
+```
+POST /register
+{
+  "name": "John Doe",
+  "email": "john@doe.com"
+  "password": "password"
+}
+```
+
+This will validate the given details, make sure the email is unique and store the user details in the database. Make sure to hash the password before storing it in the database. Respond with a token that can be used for authentication if the registration is successful.
+
+```json
+{
+  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"
+}
+```
+
+The token can either be a JWT token or a random string that can be used for authentication. We leave it up to you to decide the implementation details.
+
+### User Login
+
+Authenticate the user using the following request:
+
+```
+POST /login
+{
+  "email": "john@doe.com",
+  "password": "password"
+}
+```
+
+This will validate the given email and password, and respond with a token if the authentication is successful.
+
+```json
+{
+  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9"
+}
+```
+
+### Create a To-Do Item
+
+Create a new to-do item using the following request:
+
+```
+POST /todos
+{
+  "title": "Buy groceries",
+  "description": "Buy milk, eggs, and bread"
+}
+```
+
+User must send the token received from the login endpoint in the header to authenticate the request. You can use the `Authorization` header with the token as the value. In case the token is missing or invalid, respond with an error and status code 401.
+
+```json
+{
+  "message": "Unauthorized"
+}
+```
+
+Upon successful creation of the to-do item, respond with the details of the created item.
+
+```json
+{
+  "id": 1,
+  "title": "Buy groceries",
+  "description": "Buy milk, eggs, and bread"
+}
+```
+
+### Update a To-Do Item
+
+Update an existing to-do item using the following request:
+
+```
+PUT /todos/1
+{
+  "title": "Buy groceries",
+  "description": "Buy milk, eggs, bread, and cheese"
+}
+```
+
+Just like the create todo endpoint, user must send the token received. Also make sure to validate the user has the permission to update the to-do item i.e. the user is the creator of todo item that they are updating. Respond with an error and status code `403` if the user is not authorized to update the item.
+
+```json
+{
+  "message": "Forbidden"
+}
+```
+
+Upon successful update of the to-do item, respond with the updated details of the item.
+
+```json
+{
+  "id": 1,
+  "title": "Buy groceries",
+  "description": "Buy milk, eggs, bread, and cheese"
+}
+```
+
+### Delete a To-Do Item
+
+Delete an existing to-do item using the following request:
+
+```
+DELETE /todos/1
+```
+
+User must be authenticated and authorized to delete the to-do item. Upon successful deletion, respond with the status code `204`.
+
+### Get To-Do Items
+
+Get the list of to-do items using the following request:
+
+```
+GET /todos?page=1&limit=10
+```
+
+User must be authenticated to access the tasks and the response should be paginated. Respond with the list of to-do items along with the pagination details.
+
+```json
+{
+  "data": [
+    {
+      "id": 1,
+      "title": "Buy groceries",
+      "description": "Buy milk, eggs, bread"
+    },
+    {
+      "id": 2,
+      "title": "Pay bills",
+      "description": "Pay electricity and water bills"
+    }
+  ],
+  "page": 1,
+  "limit": 10,
+  "total": 2
+}
+```
+
+## Bonus
+
+- Implement filtering and sorting for the to-do list
+- Implement unit tests for the API
+- Implement rate limiting and throttling for the API
+- Implement refresh token mechanism for the authentication
+
+<hr />
+
+This project will help you understand how to design and implement a RESTful API with user authentication. You will also learn how to work with databases, handle errors, and implement security measures.

src/data/projects/unit-converter.md

@@ -0,0 +1,52 @@
+---
+title: 'Unit Converter'
+description: 'Unit converter to convert between different units of measurement.'
+isNew: false
+sort: 4
+difficulty: 'beginner'
+nature: 'Web App'
+skills:
+  - 'Programming Language'
+  - 'HTML'
+  - 'Server'
+  - 'Logic Building'
+seo:
+  title: 'Unit Converter'
+  description: 'Build a Unit Converter to convert between different units of measurement.'
+  keywords:
+    - 'unit converter'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+You are required to build a simple web app that can convert between different units of measurement. It can convert units of length, weight, volume, area, temperature, and more. The user can input a value and select the units to convert from and to. The application will then display the converted value.
+
+## Requirements
+
+Build a simple web page that will have different sections for different units of measurement. The user can input a value to convert, select the units to convert from and to, and view the converted value.
+
+- The user can input a value to convert.
+- The user can select the units to convert from and to.
+- The user can view the converted value.
+- The user can convert between different units of measurement like length, weight, temperature, etc (more given below).
+
+You can include the following units of measurement to convert between:
+
+- Length: millimeter, centimeter, meter, kilometer, inch, foot, yard, mile.
+- Weight: milligram, gram, kilogram, ounce, pound.
+- Temperature: Celsius, Fahrenheit, Kelvin.
+
+## How it works
+
+You don't need to use any database for this project. There will be a simple webpage that will submit the form to the server and get the converted value back and display it on the webpage.
+
+![Unit Converter](https://assets.roadmap.sh/guest/unit-converter-be-project.png)
+
+You can have 3 webpages for each type of unit conversion (length, weight, temperature) with forms to input the value and select the units to convert from and to. Submitting a form will submit the data to the current page (i.e. `target="_self"`) and display the converted value. You can do this using the backend programming language of your choice i.e. check if the form is submitted and then calculate the converted value and display it on the webpage, if not submitted then display the form.
+

src/data/projects/url-shortening-service.md

@@ -0,0 +1,168 @@
+---
+title: 'URL Shortening Service'
+description: 'Build a URL Shortener API that helps shorten long URLs.'
+isNew: false
+sort: 11
+difficulty: 'intermediate'
+nature: 'API'
+skills:
+  - 'Programming Language'
+  - 'Database Indexing'
+  - 'HTTP Redirects'
+seo:
+  title: 'URL Shortening Service Project Idea'
+  description: 'Build a URL Shortener API that helps shorten long URLs.'
+  keywords:
+    - 'url shortening service'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+You are required to create a simple RESTful API that allows users to shorten long URLs. The API should provide endpoints to create, retrieve, update, and delete short URLs. It should also provide statistics on the number of times a short URL has been accessed.
+
+![URL Shortening Service](https://assets.roadmap.sh/guest/url-shortener-architecture-u72mu.png)
+
+## Requirements
+
+You should create a RESTful API for a URL shortening service. The API should allow users to perform the following operations:
+
+- Create a new short URL
+- Retrieve an original URL from a short URL
+- Update an existing short URL
+- Delete an existing short URL
+- Get statistics on the short URL (e.g., number of times accessed)
+
+You can optionally setup a minimal frontend to interact with the API and setup redirects for the short URLs to the original URLs.
+
+## API Endpoints
+
+Given below are the details for each API operation.
+
+### Create Short URL
+
+Create a new short URL using the `POST` method
+
+```plaintext
+POST /shorten
+{
+  "url": "https://www.example.com/some/long/url"
+}
+```
+
+The endpoint should validate the request body and return a `201 Created` status code with the newly created short URL i.e.
+
+```json
+{
+  "id": "1",
+  "url": "https://www.example.com/some/long/url",
+  "shortCode": "abc123",
+  "createdAt": "2021-09-01T12:00:00Z",
+  "updatedAt": "2021-09-01T12:00:00Z"
+}
+```
+
+or a `400 Bad Request` status code with error messages in case of validation errors. Short codes must be unique and should be generated randomly.
+
+## Retrieve Original URL
+
+Retrieve the original URL from a short URL using the `GET` method
+
+```plaintext
+GET /shorten/abc123
+```
+
+The endpoint should return a `200 OK` status code with the original URL i.e.
+
+```json
+{
+  "id": "1",
+  "url": "https://www.example.com/some/long/url",
+  "shortCode": "abc123",
+  "createdAt": "2021-09-01T12:00:00Z",
+  "updatedAt": "2021-09-01T12:00:00Z"
+}
+```
+
+or a `404 Not Found` status code if the short URL was not found. Your frontend should be responsible for retrieving the original URL using the short URL and redirecting the user to the original URL.
+
+## Update Short URL
+
+Update an existing short URL using the `PUT` method
+
+```plaintext
+PUT /shorten/abc123
+{
+  "url": "https://www.example.com/some/updated/url"
+}
+```
+
+The endpoint should validate the request body and return a `200 OK` status code with the updated short URL i.e.
+
+```json
+{
+  "id": "1",
+  "url": "https://www.example.com/some/updated/url",
+  "shortCode": "abc123",
+  "createdAt": "2021-09-01T12:00:00Z",
+  "updatedAt": "2021-09-01T12:30:00Z"
+}
+```
+
+or a `400 Bad Request` status code with error messages in case of validation errors. It should return a `404 Not Found` status code if the short URL was not found.
+
+### Delete Short URL
+
+Delete an existing short URL using the `DELETE` method
+
+```plaintext
+DELETE /shorten/abc123
+```
+
+The endpoint should return a `204 No Content` status code if the short URL was successfully deleted or a `404 Not Found` status code if the short URL was not found.
+
+### Get URL Statistics
+
+Get statistics for a short URL using the `GET` method
+
+```plaintext
+GET /shorten/abc123/stats
+```
+
+The endpoint should return a `200 OK` status code with the statistics i.e.
+
+```json
+{
+  "id": "1",
+  "url": "https://www.example.com/some/long/url",
+  "shortCode": "abc123",
+  "createdAt": "2021-09-01T12:00:00Z",
+  "updatedAt": "2021-09-01T12:00:00Z",
+  "accessCount": 10
+}
+```
+
+or a `404 Not Found` status code if the short URL was not found.
+
+<hr />
+
+## Tech Stack
+
+Feel free to use any programming language, framework, and database of your choice for this project. Here are some suggestions:
+
+- If you are using JavaScript, you can use Node.js with Express.js
+- If you are using Python, you can use Flask or Django
+- If you are using Java, you can use Spring Boot
+- If you are using Ruby, you can use Ruby on Rails
+
+For databases, you can use:
+
+- MySQL if you are using SQL
+- MongoDB if you are using NoSQL
+
+Your job is to implement the core functionality of the API, focusing on creating, retrieving, updating, and deleting short URLs, as well as tracking and retrieving access statistics. You don't have to implement authentication or authorization for this project.

src/data/projects/weather-api-wrapper-service.md

@@ -0,0 +1,50 @@
+---
+title: 'Weather API'
+description: 'Build a weather API that fetches and returns weather data.'
+isNew: false
+sort: 7
+difficulty: 'beginner'
+nature: 'API'
+skills:
+  - 'Programming Language'
+  - '3rd Party APIs'
+  - 'Caching'
+  - 'Environment Variables'
+seo:
+  title: 'Weather API Project Idea'
+  description: 'Build a weather API that fetches and returns weather data from a 3rd party API.'
+  keywords:
+    - 'weather api'
+    - 'backend project idea'
+roadmapIds:
+  - 'backend'
+  - 'nodejs'
+  - 'python'
+  - 'java'
+  - 'golang'
+  - 'spring-boot'
+---
+
+In this project, instead of relying on our own weather data, we will build a weather API that fetches and returns weather data from a 3rd party API. This project will help you understand how to work with 3rd party APIs, caching, and environment variables.
+
+![Weather API](https://assets.roadmap.sh/guest/weather-api-f8i1q.png)
+
+As for the actual weather API to use, you can use your favorite one, as a suggestion, here is a link to [Visual Crossing’s API](https://www.visualcrossing.com/weather-api), it’s completely FREE and easy to use.
+
+Regarding the in-memory cache, a pretty common recommendation is to use [Redis](https://redis.io/), you can read more about it [here](https://redis.io/docs/manual/client-side-caching/), and as a recommendation, you could use the city code entered by the user as the key, and save there the result from calling the API.
+
+At the same time, when you “set” the value in the cache, you can also give it an expiration time in seconds (using the `EX` flag on the `SET` command). That way the cache (the keys) will automatically clean itself when the data is old enough (for example, giving it a 12-hours expiration time).
+
+<hr />
+
+## Some Tips
+
+Here are some tips to help you get started:
+
+- Start by creating a simple API that returns a hardcoded weather response. This will help you understand how to structure your API and how to handle requests.
+- Use environment variables to store the API key and the Redis connection string. This way, you can easily change them without having to modify your code.
+- Make sure to handle errors properly. If the 3rd party API is down, or if the city code is invalid, make sure to return the appropriate error message.
+- Use some package or module to make HTTP requests e.g. if you are using Node.js, you can use the `axios` package, if you are using Python, you can use the `requests` module.
+- Implement rate limiting to prevent abuse of your API. You can use a package like `express-rate-limit` if you are using Node.js or `flask-limiter` if you are using Python.
+
+This project will help you understand how to work with 3rd party APIs, caching, and environment variables. It will also help you understand how to structure your API and how to handle requests.

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/ai-data-scientist/ai-data-scientist.md

@@ -2,6 +2,7 @@
 jsonUrl: '/jsons/roadmaps/ai-data-scientist.json'
 pdfUrl: '/pdfs/roadmaps/ai-data-scientist.pdf'
 order: 4
+renderer: 'editor'
 briefTitle: 'AI and Data Scientist'
 briefDescription: 'Step by step guide to becoming an AI and Data Scientist in 2024'
 title: 'AI and Data Scientist Roadmap'
@@ -10,7 +11,7 @@ hasTopics: true
 isNew: false
 dimensions:
   width: 968
-  height: 2243.96
+  height: 2140
 schema:
   headline: 'AI and Data Scientist Roadmap'
   description: 'Learn how to become an AI and Data Scientist with this interactive step by step guide in 2023. We also have resources and short descriptions attached to the roadmap items so you can get everything you want to learn in one place.'

src/data/roadmaps/ai-data-scientist/content/coding@XLDWuSt4tI4gnmqMFdpmy.md

@@ -0,0 +1,3 @@
+# Coding
+
+Programming is a fundamental skill for data scientists. You need to be able to write code to manipulate data, build models, and deploy solutions. The most common programming languages used in data science are Python and R. Python is a general-purpose programming language that is easy to learn and has a large number of libraries for data manipulation and machine learning. R is a programming language and free software environment for statistical computing and graphics. It is widely used for statistical analysis and data visualization.

src/data/roadmaps/ai-data-scientist/content/deep-learning@cjvVLN0XjrKPn6o20oMmc.md

@@ -0,0 +1,3 @@
+## Deep Learning
+
+Deep learning is a subset of machine learning that deals with algorithms inspired by the structure and function of the brain called artificial neural networks. Deep learning is a key technology behind driverless cars, enabling them to recognize a stop sign, or to distinguish a pedestrian from a lamppost. It is the key to voice control in consumer devices like phones, tablets, TVs, and hands-free speakers. Deep learning is getting lots of attention lately and for good reason. It’s achieving results that were not possible before.