From a4155c0a29f97b2dd86601ca54056cf61702a6f1 Mon Sep 17 00:00:00 2001
From: "Restyled.io" <commits@restyled.io>
Date: Thu, 22 Aug 2024 08:29:18 +0000
Subject: [PATCH 1/2] Restyled by prettier-markdown

---
 ...00\231s Guide to the Top 5 React Hooks.md" |  84 +--
 blog/Cybersecurity-in-Cloud-Computing.md      |  24 +
 blog/DOM manipulation in JavaScript.md        | 114 ++-
 .../index.md                                  |  23 +-
 blog/Getting started with PostgreSQL.md       | 308 +++++---
 blog/Getting-started-with-nextJS.md           |  63 +-
 blog/Introduction in Python Development.md    |   6 +-
 ...ion to Cyber Security and Web Explosion.md |   2 +-
 blog/JavaScript ES6 features.md               |  10 +-
 ...l for Natural Language Processing Tasks.md |   4 +-
 blog/Mastering Data Structures in Python.md   |   3 +-
 blog/Mastering Design Patterns in Java.md     |  27 +-
 blog/Mastering OOP concepts in JAVA.md        | 152 ++--
 blog/Mastering SOLID principles in Java.md    |  41 +-
 .../Quantum computing and it's application.md |   8 +-
 blog/Web-Development-with-Django.md           |  83 ++-
 blog/ai-in-healthcare.md                      |   7 +-
 blog/automating-tasks-with-python.md          |   2 +-
 ...ding-and-deploying-progressive-web-apps.md |  59 +-
 ...pment with-microservices-and-kubernetes.md |  15 +-
 blog/composable-architecture.md               |   7 +-
 ...ainerization-with-docker-and-kubernetes.md |  27 +-
 blog/debugging.md                             |  26 +-
 blog/developing-cross-platform-apps.md        |  23 +-
 .../index.md                                  |  13 +-
 blog/from-ftp-client-to-github-action.md      |   4 +-
 blog/getting-started-with-mern/index.md       | 702 +++++++++---------
 .../index.md                                  |   6 +-
 blog/getting-started-with-nlp.md              |   8 +-
 ...ng-started-with-serverless-architecture.md |  38 +-
 blog/getting-started-with-vite/index.md       |   2 +-
 blog/git-best-practicies.md                   |   4 +-
 blog/install-mongodb-linux.md                 |   2 +-
 blog/install-mongodb-windows.md               |   2 +-
 ...he-Linux-development-and-cyber-security.md |   7 +-
 blog/introduction-to-web-assembly.md          |   6 +-
 ...integration-and-application-development.md |  33 +-
 ...everaging-gpt-models-for-microfrontends.md |   3 +-
 blog/microservices-architecture.md            |  19 +-
 blog/piracy-preserving-ai.md                  |  32 +-
 blog/react-js.md                              |  59 +-
 blog/reactjs-mongodb-chrome-extension.md      |  80 +-
 blog/sed-normalize-md-file-with-regex.md      |   6 +-
 blog/sql.md                                   |  45 +-
 .../data-types/primitive-types/string.md      |  33 +-
 .../data-types/primitive-types/undefined.md   |  12 +-
 46 files changed, 1290 insertions(+), 944 deletions(-)

diff --git "a/blog/Beginner\342\200\231s Guide to the Top 5 React Hooks.md" "b/blog/Beginner\342\200\231s Guide to the Top 5 React Hooks.md"
index 937914baa..44d17cf88 100644
--- "a/blog/Beginner\342\200\231s Guide to the Top 5 React Hooks.md"	
+++ "b/blog/Beginner\342\200\231s Guide to the Top 5 React Hooks.md"	
@@ -1,5 +1,5 @@
 ---
-title: 'A Beginner’s Guide to the Top 5 React Hooks'
+title: "A Beginner’s Guide to the Top 5 React Hooks"
 sidebar_label: React hooks
 authors: [dharshibalasubramaniyam]
 tags: [react.js, react-hooks]
@@ -36,7 +36,7 @@ In this beginner’s guide, we’ll explore the top 5 React hooks that every Rea
 ### Importing useState hook from react:
 
 ```js
-import { useState } from 'react';
+import { useState } from "react";
 ```
 
 ### Declaring a state variable named count with an initial value of 0,
@@ -61,6 +61,7 @@ const Counter = () => {
   );
 };
 ```
+
 - In above example, when the button is clicked, the onClick event handler calls the setCount function with the updated value of count (count + 1), causing the component to re-render with the new state value.
 
 - Note: We cannot update a state variable like, count = count +1
@@ -71,29 +72,26 @@ const Counter = () => {
 
 ```js
 const Counter = () => {
-  const [person, setPerson] = useState({id: '1', name: 'John', age: 25});
+  const [person, setPerson] = useState({ id: "1", name: "John", age: 25 });
 
   const updateName = (newName) => {
-    setPerson(prevState => {
+    setPerson((prevState) => {
       return { ...prevState, name: newName };
     });
   };
 
   const updateAge = (newAge) => {
-    setPerson(prevState => {
+    setPerson((prevState) => {
       return { ...prevState, age: newAge };
     });
   };
 
-  return (
-    <div>
-      {/* form to update name and age */}
-    </div>
-  );
+  return <div>{/* form to update name and age */}</div>;
 };
 ```
 
 ## 2. ‘useEffect’ hook
+
 - The useEffect hook in React enables functional components to perform side effects, such as data fetching, DOM manipulation, or subscriptions. It replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
 
 ### componentDidMount
@@ -105,7 +103,7 @@ const Counter = () => {
 ```js
 useEffect(() => {
   // Perform initialization or side effects
-  console.log("The component is rendered initially.")
+  console.log("The component is rendered initially.");
 }, []);
 ```
 
@@ -118,7 +116,7 @@ useEffect(() => {
 ```js
 useEffect(() => {
   // Effect runs after every render
-  console.log("The component is rendered.")
+  console.log("The component is rendered.");
 });
 ```
 
@@ -127,7 +125,7 @@ useEffect(() => {
 ```js
 useEffect(() => {
   // Perform side effects after state or props update
-  console.log("dependency1 or dependency2 have updated.")
+  console.log("dependency1 or dependency2 have updated.");
 }, [dependency1, dependency2]);
 ```
 
@@ -140,10 +138,10 @@ useEffect(() => {
 ```js
 useEffect(() => {
   // Perform side effects
-  console.log("dependency is updated.")
+  console.log("dependency is updated.");
   return () => {
     // Cleanup tasks
-    console.log("The component is unmounted.")
+    console.log("The component is unmounted.");
   };
 }, [dependency]);
 ```
@@ -158,7 +156,7 @@ useEffect(() => {
 
 ```js
 // themeContext.js
-import React, { createContext } from 'react';
+import React, { createContext } from "react";
 
 export const ThemeContext = createContext(null);
 ```
@@ -169,11 +167,11 @@ export const ThemeContext = createContext(null);
 
 ```js
 function App() {
-  const theme = 'dark';
+  const theme = "dark";
 
   return (
     <ThemeContext.Provider value={theme}>
-      <MyComponent/>
+      <MyComponent />
     </ThemeContext.Provider>
   );
 }
@@ -184,20 +182,21 @@ function App() {
 - Now, any component within the provider can access the context using the useContext hook.
 
 ```js
-import React, { useContext } from 'react';
-import ThemeContext from './ThemeContext';
+import React, { useContext } from "react";
+import ThemeContext from "./ThemeContext";
 
 function MyComponent() {
   const theme = useContext(ThemeContext);
 
-  return <div 
-            style={{
-               background: theme === 'dark' ?
-                    '#222' : '#fff' }
-            }
-         >
-            Content
-         </div>;
+  return (
+    <div
+      style={{
+        background: theme === "dark" ? "#222" : "#fff",
+      }}
+    >
+      Content
+    </div>
+  );
 }
 ```
 
@@ -218,25 +217,21 @@ const Counter = () => {
   // Step 1: Define initial state
   const initialState = { count: 0 };
 
-  return (
-    <div>
-      content
-    </div>
-  );
+  return <div>content</div>;
 };
 ```
 
 ### Reducer Function
 
 - You define a reducer function. This function takes two arguments: the current state and an action, and returns the new state based on the action. The reducer function is responsible for updating the state.
-  
+
 ```js
 // Step 2: Define reducer function
 const reducer = (state, action) => {
   switch (action.type) {
-    case 'increment':
+    case "increment":
       return { count: state.count + 1 };
-    case 'decrement':
+    case "decrement":
       return { count: state.count - 1 };
     default:
       throw new Error();
@@ -251,15 +246,15 @@ const reducer = (state, action) => {
 ```js
 const Counter = () => {
   const initialState = { count: 0 };
-  
+
   // Step 3: Use useReducer hook
   const [state, dispatch] = useReducer(reducer, initialState);
 
   return (
     <div>
       Count: {state.count}
-      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
-      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
+      <button onClick={() => dispatch({ type: "increment" })}>+</button>
+      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
     </div>
   );
 };
@@ -276,7 +271,7 @@ const Counter = () => {
 Example 1
 
 ```js
-import React, { useRef } from 'react';
+import React, { useRef } from "react";
 
 function MyComponent() {
   // Create a ref to store a DOM element
@@ -305,7 +300,7 @@ In this example, myInputRef is created using useRef, and it's attached to the in
 Example 2
 
 ```js
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef } from "react";
 
 function Counter() {
   // State for storing the count
@@ -320,10 +315,10 @@ function Counter() {
     if (intervalIdRef.current !== null) {
       return; // If already running, do nothing
     }
-    
+
     // Start the counter
     intervalIdRef.current = setInterval(() => {
-      setCount(prevCount => prevCount + 1);
+      setCount((prevCount) => prevCount + 1);
     }, 1000);
   };
 
@@ -333,7 +328,7 @@ function Counter() {
     if (intervalIdRef.current === null) {
       return; // If not running, do nothing
     }
-    
+
     // Stop the counter
     clearInterval(intervalIdRef.current);
     intervalIdRef.current = null;
@@ -350,6 +345,7 @@ function Counter() {
 
 export default Counter;
 ```
+
 - We have a state variable count that stores the current count.
 - We create a ref named intervalIdRef using useRef(null). This ref will be used to store the ID returned by setInterval so that we can later clear the interval.
 - startCounter function starts a timer using setInterval and increments the count every second. It first checks if the counter is already running to avoid starting multiple timers simultaneously.
diff --git a/blog/Cybersecurity-in-Cloud-Computing.md b/blog/Cybersecurity-in-Cloud-Computing.md
index c44bfa756..bca73d018 100644
--- a/blog/Cybersecurity-in-Cloud-Computing.md
+++ b/blog/Cybersecurity-in-Cloud-Computing.md
@@ -11,89 +11,113 @@ In this guide, we will explore the key aspects of cybersecurity in cloud computi
 <!-- truncate -->
 
 ## Overview
+
 Cloud computing offers scalable resources and convenience, but it also introduces unique cybersecurity challenges. This guide covers key aspects of cybersecurity in cloud computing, including common threats, best practices, and security frameworks.
 
 ## Table of Contents
 
 ## 1. Introduction to Cloud Computing
+
 Cloud computing provides on-demand delivery of computing resources over the internet, enabling businesses to scale and innovate quickly. However, this flexibility comes with cybersecurity challenges that need to be addressed to protect sensitive data and applications.
 
 ## 2. Common Cloud Security Threats
 
 ### Data Breaches
+
 Data breaches in the cloud can occur due to misconfigured storage, weak authentication, or vulnerabilities in the cloud infrastructure.
 
 ### Insider Threats
+
 Insider threats involve malicious activities by employees or other trusted individuals who have access to sensitive data.
 
 ### Account Hijacking
+
 Attackers can gain unauthorized access to cloud accounts through phishing, brute force attacks, or exploiting vulnerabilities.
 
 ### Denial of Service (DoS) Attacks
+
 DoS attacks overwhelm cloud services with traffic, causing disruptions and potentially leading to data loss.
 
 ## 3. Cloud Security Models
 
 ### Shared Responsibility Model
+
 The shared responsibility model divides security responsibilities between the cloud provider and the customer. Providers secure the infrastructure, while customers are responsible for securing their data and applications.
 
 ### Security as a Service (SECaaS)
+
 SECaaS delivers security services through the cloud, offering solutions like antivirus, intrusion detection, and security monitoring.
 
 ## 4. Best Practices for Cloud Security
 
 ### Data Encryption
+
 Encrypt data both in transit and at rest to protect it from unauthorized access.
 
 ### Identity and Access Management (IAM)
+
 Implement strong IAM practices, including multi-factor authentication (MFA) and least privilege access, to control who can access cloud resources.
 
 ### Regular Audits and Compliance
+
 Conduct regular security audits and ensure compliance with relevant standards and regulations.
 
 ### Secure Application Development
+
 Follow secure coding practices and regularly update applications to fix security vulnerabilities.
 
 ## 5. Cloud Security Frameworks and Standards
 
 ### NIST Cloud Computing Security
+
 The National Institute of Standards and Technology (NIST) provides guidelines and best practices for securing cloud environments.
 
 ### ISO/IEC 27017
+
 This international standard offers guidelines for information security controls specific to cloud services.
 
 ### CSA Cloud Controls Matrix
+
 The Cloud Security Alliance (CSA) provides a framework of security controls tailored to cloud computing environments.
 
 ## 6. Implementing Cloud Security
 
 ### Choosing a Secure Cloud Provider
+
 Select a cloud provider with strong security measures, certifications, and a proven track record.
 
 ### Configuring Security Settings
+
 Properly configure security settings, such as firewalls, encryption, and access controls, to protect cloud resources.
 
 ### Monitoring and Incident Response
+
 Implement continuous monitoring and establish an incident response plan to quickly detect and respond to security incidents.
 
 ## 7. Case Studies of Cloud Security Breaches
 
 ### Analysis of Major Incidents
+
 Examine major cloud security breaches to understand how they occurred and the impact they had.
 
 ### Lessons Learned
+
 Learn from past incidents to improve security measures and prevent similar breaches in the future.
 
 ## 8. Future Trends in Cloud Security
 
 ### AI and Machine Learning
+
 Artificial intelligence and machine learning can enhance cloud security by detecting and responding to threats in real-time.
 
 ### Quantum Computing
+
 Quantum computing poses new challenges and opportunities for cloud security, particularly in the field of encryption.
 
 ### Zero Trust Architecture
+
 Zero trust architecture assumes that threats can come from both outside and inside the network, and it implements strict access controls and continuous monitoring.
 
 ## 9. Conclusion
+
 Securing cloud environments is crucial for protecting sensitive data and maintaining trust. By understanding the unique challenges of cloud security and implementing best practices, organizations can leverage the benefits of cloud computing while minimizing risks.
diff --git a/blog/DOM manipulation in JavaScript.md b/blog/DOM manipulation in JavaScript.md
index 61adde58e..3a93c3b75 100644
--- a/blog/DOM manipulation in JavaScript.md	
+++ b/blog/DOM manipulation in JavaScript.md	
@@ -1,5 +1,5 @@
 ---
-title: 'DOM manipulation in JavaScript'
+title: "DOM manipulation in JavaScript"
 sidebar_label: DOM-manipulation-in-JavaScript
 authors: [dharshibalasubramaniyam]
 tags: [dom, javascript]
@@ -17,30 +17,30 @@ In web development, the Document Object Model (DOM) is a crucial aspect of creat
 
 - This model allows developers to interact with the document programmatically via scripting languages like JavaScript.
 
-- When a web page is loaded, the browser parses the HTML and creates the DOM. 
+- When a web page is loaded, the browser parses the HTML and creates the DOM.
 
 - The DOM represents the document as a tree of nodes, where each node is an object representing a part of the document:
 
-*Document Node*: Represents the entire document.
+_Document Node_: Represents the entire document.
 
-*Element Nodes*: Represent HTML elements like `<div>`, `<p>`, `<a>`, etc.
+_Element Nodes_: Represent HTML elements like `<div>`, `<p>`, `<a>`, etc.
 
-*Text Nodes*: Contain the text content within elements.
+_Text Nodes_: Contain the text content within elements.
 
-*Attribute Nodes*: Represent the attributes of HTML elements (`class`, `id`, `src` etc.).
+_Attribute Nodes_: Represent the attributes of HTML elements (`class`, `id`, `src` etc.).
 
 For example, consider the following HTML:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
+  <head>
     <title>Example with Attributes</title>
-</head>
-<body>
+  </head>
+  <body>
     <h1 class="header" id="main-title" data-info="example">Hello, World!</h1>
     <p>This is a paragraph.</p>
-</body>
+  </body>
 </html>
 ```
 
@@ -62,7 +62,7 @@ Document
   │           └── "This is a paragraph."
 ```
 
-The DOM plays a central role in web development by enabling developers to create dynamic and interactive web pages. 
+The DOM plays a central role in web development by enabling developers to create dynamic and interactive web pages.
 
 - Access and manipulate elements: Developers can use JavaScript to select, modify, and create HTML elements.
 
@@ -70,7 +70,7 @@ The DOM plays a central role in web development by enabling developers to create
 
 - Modify styles: Through the DOM, developers can change the CSS styles of elements dynamically.
 
-## 2. DOM Manipulation 
+## 2. DOM Manipulation
 
 ### 2.1. Accessing Elements
 
@@ -80,16 +80,15 @@ The DOM plays a central role in web development by enabling developers to create
 <div id="title">Hello, World!</div>
 ```
 
-
 ```js
 // Get the element with the ID 'myElement'
-const element = document.getElementById('myElement');
+const element = document.getElementById("myElement");
 
 // Log the element to the console
 console.log(element);
 ```
 
-- To get elements by their class, we can use the `getElementsByClassName` method. This method returns a live HTMLCollection of elements with the specified class name. 
+- To get elements by their class, we can use the `getElementsByClassName` method. This method returns a live HTMLCollection of elements with the specified class name.
 
 ```html
 <div class="myClass">First Element</div>
@@ -99,14 +98,14 @@ console.log(element);
 
 ```js
 // Get the elements with the class name 'myClass'
-const elements = document.getElementsByClassName('myClass');
+const elements = document.getElementsByClassName("myClass");
 
 // Log the elements to the console
 console.log(elements);
 
 // Optionally, you can iterate over the elements as well
 for (let i = 0; i < elements.length; i++) {
-    console.log(elements[i])
+  console.log(elements[i]);
 }
 ```
 
@@ -116,8 +115,8 @@ for (let i = 0; i < elements.length; i++) {
 <h1>Hello, World!</h1>
 <p>This is a paragraph.</p>
 <div>
-    <p>Another paragraph inside a div.</p>
-    <p>Second paragraph inside a div.</p>
+  <p>Another paragraph inside a div.</p>
+  <p>Second paragraph inside a div.</p>
 </div>
 ```
 
@@ -127,7 +126,7 @@ const paragraphs = document.getElementsByTagName("p");
 
 // Loop through and log the text content of each <p> element
 for (let i = 0; i < paragraphs.length; i++) {
-    console.log(paragraphs[i].textContent);
+  console.log(paragraphs[i].textContent);
 }
 ```
 
@@ -150,7 +149,6 @@ const paragraphInDiv = document.querySelector("div p");
 - The `querySelectorAll` method in JavaScript allows you to select and retrieve a list (or NodeList) of all elements that match a specified CSS selector within the document or within a specific element. Unlike `querySelector`, which returns only the first matching element, `querySelectorAll` returns a NodeList containing all matching elements.
 
 ```js
-
 // Select all <p> elements in the document
 const paragraphs = document.querySelectorAll("p");
 
@@ -162,8 +160,8 @@ const introElements = document.querySelectorAll(".intro");
 
 // Select all <li> elements inside the <ul>
 const listItems = document.querySelectorAll("ul li");
-
 ```
+
 ### 2.2. Modifying Content
 
 - `innerHTML` allows you to get or set the HTML markup inside an element.
@@ -221,19 +219,19 @@ spanElement.innerText = "Updated inner text.";
 
 ```js
 // Get the element with the ID 'myElement'
-const element = document.getElementById('myElement');
+const element = document.getElementById("myElement");
 
 // Get the value of an attribute
-const classValue = element.getAttribute('class');
-console.log('Class:', classValue); // Output: Class: myClass
+const classValue = element.getAttribute("class");
+console.log("Class:", classValue); // Output: Class: myClass
 
 // Set a new value for an attribute
-element.setAttribute('class', 'newClass');
-console.log('Updated Class:', element.getAttribute('class')); // Output: Updated Class: newClass
+element.setAttribute("class", "newClass");
+console.log("Updated Class:", element.getAttribute("class")); // Output: Updated Class: newClass
 
 // Remove an attribute
-element.removeAttribute('class');
-console.log(element.hasAttribute('class')); // Output: false
+element.removeAttribute("class");
+console.log(element.hasAttribute("class")); // Output: false
 ```
 
 ### 2.4. Creating and Inserting Elements
@@ -253,34 +251,34 @@ console.log(element.hasAttribute('class')); // Output: false
 ```
 
 ```js
-const container = document.getElementById('container');
-const todolist = document.querySelector('.todo-list');
+const container = document.getElementById("container");
+const todolist = document.querySelector(".todo-list");
 
 // Create a new element
-const newToDo = document.createElement('li');
-newToDo.setAttribute("class", "todo-item")
-newToDo.textContent = 'Buy fruits.';
+const newToDo = document.createElement("li");
+newToDo.setAttribute("class", "todo-item");
+newToDo.textContent = "Buy fruits.";
 
 // Append the new element as the last child
 todolist.appendChild(newToDo);
 
 // Create another new element
-const title = document.createElement('h2');
-newToDo.textContent = 'My tasks';
+const title = document.createElement("h2");
+newToDo.textContent = "My tasks";
 
 // Insert the title before the list
 container.insertBefore(title, todolist);
 
 // Create yet another new element
-const lastElement = document.createElement('div');
-lastElement.textContent = 'Last Element';
+const lastElement = document.createElement("div");
+lastElement.textContent = "Last Element";
 
 // Append yet another element as the last child
 container.append(lastElement);
 
 // Create and prepend a new element
-const firstElement = document.createElement('div');
-firstElement.textContent = 'First Element';
+const firstElement = document.createElement("div");
+firstElement.textContent = "First Element";
 
 // Prepend the new element as the first child
 container.prepend(firstElement);
@@ -294,28 +292,28 @@ container.prepend(firstElement);
 
 ```html
 <div id="container">
-    <div id="childElement">Child Element</div>
-    <div id="anotherChildElement">Another Child Element</div>
+  <div id="childElement">Child Element</div>
+  <div id="anotherChildElement">Another Child Element</div>
 </div>
 ```
 
 ```js
 // Get the container element
-const container = document.getElementById('container');
+const container = document.getElementById("container");
 
 // Get the child element to be removed
-const childElement = document.getElementById('childElement');
+const childElement = document.getElementById("childElement");
 
 // Remove the child element using removeChild
 container.removeChild(childElement);
 
 // Get another child element to be removed
-const anotherChildElement = document.getElementById('anotherChildElement');
+const anotherChildElement = document.getElementById("anotherChildElement");
 
 // Remove the element using remove()
 anotherChildElement.remove();
-
 ```
+
 ### 2.6. Modifying Styles
 
 - The `style` property allows to set or get inline styles for an element. This directly modifies the style attribute of the element in the DOM.
@@ -326,27 +324,27 @@ anotherChildElement.remove();
 
 ```js
 // Get the element
-const element = document.getElementById('myElement');
+const element = document.getElementById("myElement");
 
 // Change the background color and font size using the style property
-element.style.backgroundColor = 'blue';
-element.style.fontSize = '20px';
+element.style.backgroundColor = "blue";
+element.style.fontSize = "20px";
 ```
 
 - The `classList` property provides methods to add, remove, and toggle CSS classes on an element. This is a more flexible way to manage an element's classes compared to directly setting the `class` attribute.
 
 ```js
 // Get the element
-const element = document.getElementById('myElement');
+const element = document.getElementById("myElement");
 
 // Add a new class to the element
-element.classList.add('newClass');
+element.classList.add("newClass");
 
 // Remove an existing class from the element
-element.classList.remove('initialClass');
+element.classList.remove("initialClass");
 
 // Toggle a class on the element (add it if it doesn't exist, remove it if it does)
-element.classList.toggle('toggledClass');
+element.classList.toggle("toggledClass");
 ```
 
 ### 2.7. Event Handling
@@ -360,20 +358,20 @@ element.classList.toggle('toggledClass');
 ```js
 // Define the event handler function
 function handleClick() {
-    alert('Button was clicked!');
+  alert("Button was clicked!");
 }
 
 // Get the button element
-const button = document.getElementById('myButton');
+const button = document.getElementById("myButton");
 
 // Add a click event listener
-button.addEventListener('click', handleClick);
+button.addEventListener("click", handleClick);
 ```
 
 - The `removeEventListener()` method removes an event handler that was added with `addEventListener()`.
 
 ```js
-button.removeEventListener('click', handleClick);
+button.removeEventListener("click", handleClick);
 ```
 
 ## Conclusion
diff --git a/blog/Dockerize Spring-boot with Github-Actions/index.md b/blog/Dockerize Spring-boot with Github-Actions/index.md
index 1547c1534..975326ce2 100644
--- a/blog/Dockerize Spring-boot with Github-Actions/index.md	
+++ b/blog/Dockerize Spring-boot with Github-Actions/index.md	
@@ -1,5 +1,5 @@
 ---
-title: 'Dockerize Spring-boot with Github-Actions'
+title: "Dockerize Spring-boot with Github-Actions"
 sidebar_label: Dockerize Spring-boot with Github-Actions
 authors: [DharshiBalasubramaniyam]
 tags: [docker, githubactions, springboot, ci-cd]
@@ -32,7 +32,6 @@ Benefits of Using Docker:
 - This ensures that the application behaves the same way in development, testing, and production environments.
 
 - With Docker, dependencies required for an application to run are packaged within the container. This eliminates conflicts between dependencies on the host system and allows different versions of dependencies to coexist peacefully.
-  
 - With Docker, dependencies required for an application to run are packaged within the container. This eliminates conflicts between dependencies on the host system and allows different versions of dependencies to coexist peacefully.
 
 - Docker supports microservices-based applications, where each service can be packaged and deployed independently in its own container.
@@ -173,7 +172,6 @@ Requests to `localhost:8080` on your host machine are forwarded to port `9000` i
 
 Now, you can access this application from your web browser on `http://localhost:8080`.
 
-
 To Verify that your application is running inside a Docker container, run docker ps command, which lists all running containers.
 
 ```
@@ -183,7 +181,7 @@ docker ps
 To list all the containers (Running and Stopped), run below command.
 
 ```
-docker ps -a 
+docker ps -a
 ```
 
 ### 3.5. Pushing Docker Images to Docker Hub
@@ -226,21 +224,19 @@ docker run -p 8080:9000 yourusername/spring-boot-docker-example-repo:v1.0
 
 Open your web browser and navigate to http://localhost:8080 to access your Spring Boot application running inside the Docker container.
 
-
 ## ⚡ 4. Continuous Integration and Deployment (CI/CD) with Docker and GitHub actions.
 
 ### 4.1. Understanding CI/CD
 
 ![image](./images/image03.png)
 
-
 1. **Continuous Integration**: CI is a practice in software development where developers frequently integrate (merge) their code changes into a shared repository.
 
 - You write new code for a feature.
 - You push your code to the shared repository.
 - Automated tests run to check if your code works.
 - If tests pass, the code is merged. If not, you fix the issues and push again.
-  
+
 2. **Continuous Deployment**: CD is a practice where code changes are automatically deployed (released) to a production environment after they pass CI stage.
 
 - Once the code is merged and all tests pass, the CI system builds a new version of the application.
@@ -294,7 +290,7 @@ Runners are servers that run your workflows when they’re triggered.
 jobs:
   build: #Job 1
     runs-on: ubuntu-latest # Runner for Job 1
-  
+
   test: # Job 2
     runs-on: ubuntu-latest # Runner for Job 2
     needs: build #test will only run if the build job completes successfully.
@@ -314,12 +310,12 @@ Each step runs in its own process.
 jobs:
   build: #Job 1
     runs-on: ubuntu-latest # Runner for Job 1
-    
-    steps: 
+
+    steps:
     # Step 1
     - name: Checkout code
       uses: actions/checkout@v2
-    
+
     # Step 2
     - name: Set up JDK 11
       uses: actions/setup-java@v2
@@ -360,7 +356,7 @@ Secrets are accessed in workflows using the secrets context.
 
 ```
 - name: Login to dockerhub
-  run: docker login -u ${{secrets.DOCKER_USERNAME}} -p ${{secrets.DOCKER_PASSWORD}} 
+  run: docker login -u ${{secrets.DOCKER_USERNAME}} -p ${{secrets.DOCKER_PASSWORD}}
 ```
 
 ### 4.3. Writing GitHub Actions Workflow for Dockerization
@@ -412,7 +408,7 @@ jobs:
         run: mvn clean install # Run the Maven clean and install commands
 
       - name: Login to Docker Hub # Step to log in to Docker Hub
-        run: docker login -u ${{secrets.DOCKER_USERNAME}} -p ${{secrets.DOCKER_PASSWORD}}  # Login with secrets 
+        run: docker login -u ${{secrets.DOCKER_USERNAME}} -p ${{secrets.DOCKER_PASSWORD}}  # Login with secrets
 
       - name: Build Docker image # Step to build the Docker image
         run: docker build -t yourusername/spring-boot-docker-example-repo:v1.0 . # Build the Docker image with the specified tag
@@ -460,5 +456,4 @@ With GitHub Actions, you no longer need to manually build and push your Docker i
 
 The workflow you set up automates the entire process. Every time you push code to the repository, GitHub Actions will build the Docker image and push it to Docker Hub for you.
 
-
 We are done 🎉!
diff --git a/blog/Getting started with PostgreSQL.md b/blog/Getting started with PostgreSQL.md
index 1ab2d0ef8..d07d08539 100644
--- a/blog/Getting started with PostgreSQL.md	
+++ b/blog/Getting started with PostgreSQL.md	
@@ -1,6 +1,6 @@
 ---
-title: 'Getting Started with PostgreSQL'
-sidebar_label: PostgreSQL principles 
+title: "Getting Started with PostgreSQL"
+sidebar_label: PostgreSQL principles
 authors: [nayanikamukherjee]
 tags: [principles, postgreSQL, best-practices]
 date: 2024-06-23
@@ -22,7 +22,7 @@ PostgreSQL, often referred to as Postgres, is a powerful, open-source object-rel
 - SQL Standards Compliance: PostgreSQL supports a wide range of SQL standards, providing a rich set of SQL capabilities.
 - Extensibility: Users can define their own data types, operators, index methods, and even procedural languages. Extensions like PostGIS add additional functionality for specific use cases.
 - Concurrency and Performance: Utilizing Multi-Version Concurrency Control (MVCC), PostgreSQL handles multiple transactions concurrently without locking, ensuring high performance and scalability.
-- Replication and High Availability: Supports various replication methods, including streaming replication and logical replication, ensuring data  availability and redundancy.
+- Replication and High Availability: Supports various replication methods, including streaming replication and logical replication, ensuring data availability and redundancy.
 - Advanced Data Types: Offers support for advanced data types such as JSON, XML, and arrays, allowing for more flexible and complex data models.
 - Full-Text Search: Built-in support for full-text search capabilities enables efficient text searching and indexing.
 - Community and Support: Backed by a strong community and a wealth of documentation, tutorials, and third-party tools, making it easier for users to get support and resources.
@@ -73,55 +73,61 @@ psql
 ```
 \q
 ```
+
 ### Installing PostgreSQL on Windows
 
 - Download the PostgreSQL installer:
-Visit the official PostgreSQL website and download the installer for your version of Windows.
+  Visit the official PostgreSQL website and download the installer for your version of Windows.
 
 - Run the installer:
-Double-click the downloaded file to start the installation process.
+  Double-click the downloaded file to start the installation process.
 
 - Follow the installation steps:
 
   - Choose the installation directory.
-Select components to install (typically, you'll want to include pgAdmin).
+    Select components to install (typically, you'll want to include pgAdmin).
   - Set the password for the PostgreSQL superuser (postgres).
   - Select the port number (default is 5432).
   - Choose the locale.
   - Complete the installation:
-Finish the installation and optionally launch Stack Builder to install additional tools and drivers.
+    Finish the installation and optionally launch Stack Builder to install additional tools and drivers.
 
 - Access PostgreSQL:
-Use the pgAdmin GUI or the psql command-line tool to interact with your PostgreSQL instance.
+  Use the pgAdmin GUI or the psql command-line tool to interact with your PostgreSQL instance.
 
 ### Installing PostgreSQL on MacOS
 
 - Install Homebrew (if not already installed):
-Homebrew is a package manager for macOS. You can install it using:
+  Homebrew is a package manager for macOS. You can install it using:
 
 ```
 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
 ```
+
 - Update Homebrew:
 
 ```
 brew update
 ```
+
 - Install PostgreSQL:
 
 ```
 brew install postgresql
 ```
+
 - Start PostgreSQL services:
 
 ```
 brew services start postgresql
 ```
+
 - Initialize the database (if not automatically done):
 
 ```
 initdb /usr/local/var/postgres
 ```
+
 - Access PostgreSQL:
 
 ```
@@ -137,100 +143,127 @@ To verify that PostgreSQL is installed correctly, you can perform a few simple c
 ```
 psql -U postgres
 ```
+
 - Create a test database:
 
 ```
 CREATE DATABASE testdb;
 ```
+
 - Connect to a test database:
 
 ```
 \c testdb
 ```
+
 - Create a Test Table:
 
 ```
 CREATE TABLE test_table (id SERIAL PRIMARY KEY, name VARCHAR(50));
 ```
+
 - Create data into a test table:
 
 ```
 INSERT INTO test_table (name) VALUES ('Test Name');
 ```
+
 - Insert data into test table:
 
 ```
 INSERT INTO test_table (name) VALUES ('Test Name');
 ```
+
 - Query the test table:
 
 ```
 SELECT * FROM test_table;
 ```
+
 If you see the inserted data, your PostgreSQL installation is working correctly.
 
 ## Basic PostgreSQL Configuration
 
 Locate the configuration files:
+
 - postgresql.conf: Main configuration file for database settings.
 - pg_hba.conf: Client authentication configuration file.
-These files are typically located in /etc/postgresql/[version]/main/ on Debian-based systems or /var/lib/pgsql/data/ on RedHat-based systems.
+  These files are typically located in /etc/postgresql/[version]/main/ on Debian-based systems or /var/lib/pgsql/data/ on RedHat-based systems.
 
 - Edit postgresql.conf:
-Open the file in a text editor:
+  Open the file in a text editor:
 
 ```
 sudo nano /etc/postgresql/[version]/main/postgresql.conf  # Debian/Ubuntu
 sudo nano /var/lib/pgsql/data/postgresql.conf  # CentOS/RHEL
 ```
+
 ### Some basic settings to configure:
 
 - Listen addresses: Set the IP addresses on which the server listens for connections.
+
 ```
 listen_addresses = '*'
 ```
+
 - Port: The port PostgreSQL server listens on.
+
 ```
 port = 5432
 ```
+
 - Shared Buffers: Memory allocated for database caching.
+
 ```
 shared_buffers = 128MB
 ```
+
 - Logging: Set logging parameters for troubleshooting.
+
 ```
 logging_collector = on
 log_directory = 'pg_log'
 log_filename = 'postgresql-%Y-%m-%d_%H%M%S.log'
 ```
+
 Edit `pg_hba.conf`:
 This file controls client authentication.
+
 ```
 sudo nano /etc/postgresql/[version]/main/pg_hba.conf  # Debian/Ubuntu
 sudo nano /var/lib/pgsql/data/pg_hba.conf  # CentOS/RHEL
 ```
+
 Add a line to allow connections:
+
 ```
 # TYPE  DATABASE        USER            ADDRESS                 METHOD
 host    all             all             0.0.0.0/0               md5
 ```
+
 ### Restart PostgreSQL
 
 After making changes, restart the PostgreSQL service:
+
 ```
 sudo systemctl restart postgresql
 ```
+
 ### Verify the Configuration
 
 Check the status of the PostgreSQL service:
+
 ```
 sudo systemctl status postgresql
 ```
+
 - Test the connection:
-Use psql or a GUI tool like pgAdmin to connect to the database with the new user:
+  Use psql or a GUI tool like pgAdmin to connect to the database with the new user:
+
 ```
 psql -h localhost -U myuser -d mydb
 ```
+
 You've now installed and configured PostgreSQL for basic use, created a database and user, and set up basic configuration parameters. For more advanced configurations and optimizations, refer to the PostgreSQL official documentation.
 
 ## Basic SQL Commands in PostgreSQL
@@ -238,90 +271,128 @@ You've now installed and configured PostgreSQL for basic use, created a database
 Here are some basic SQL commands you can use in PostgreSQL to interact with your databases:
 
 1. Connecting to PostgreSQL:
+
 ```
 psql -h localhost -U myuser -d mydb
 ```
+
 2. Basic SQL Commands:
- - Creating a Database:
- ```
- CREATE DATABASE mydb;
- ```
- - Creating a Table:
- ```
- CREATE TABLE employees (
-    id SERIAL PRIMARY KEY,
-    name VARCHAR(100),
-    position VARCHAR(50),
-    salary NUMERIC
-   );
- ```
- - Inserting Data:
- ```
- INSERT INTO employees (name, position, salary) VALUES ('John Doe', 'Manager', 60000);
+
+- Creating a Database:
+
+```
+CREATE DATABASE mydb;
+```
+
+- Creating a Table:
+
+```
+CREATE TABLE employees (
+   id SERIAL PRIMARY KEY,
+   name VARCHAR(100),
+   position VARCHAR(50),
+   salary NUMERIC
+  );
+```
+
+- Inserting Data:
+
+```
+INSERT INTO employees (name, position, salary) VALUES ('John Doe', 'Manager', 60000);
 INSERT INTO employees (name, position, salary) VALUES ('Jane Smith', 'Developer', 50000);
- ```
- - Querying Data:
- ```
- SELECT * FROM employees;
+```
+
+- Querying Data:
+
+```
+SELECT * FROM employees;
 SELECT name, salary FROM employees WHERE position = 'Developer';
- ```
- - Updating Data:
- ```
- UPDATE employees SET salary = 65000 WHERE name = 'John Doe';
- ```
- - Deleting Data:
- ```
- DELETE FROM employees WHERE name = 'Jane Smith';
- ```
- - Adding a Column:
- ```
- ALTER TABLE employees ADD COLUMN hire_date DATE;
- ```
- - Removing a Column:
- ```
- ALTER TABLE employees DROP COLUMN hire_date;
- ```
- - Dropping a Table:
- ```
- DROP TABLE employees;
- ```
+```
+
+- Updating Data:
+
+```
+UPDATE employees SET salary = 65000 WHERE name = 'John Doe';
+```
+
+- Deleting Data:
+
+```
+DELETE FROM employees WHERE name = 'Jane Smith';
+```
+
+- Adding a Column:
+
+```
+ALTER TABLE employees ADD COLUMN hire_date DATE;
+```
+
+- Removing a Column:
+
+```
+ALTER TABLE employees DROP COLUMN hire_date;
+```
+
+- Dropping a Table:
+
+```
+DROP TABLE employees;
+```
+
 3. User and Permission Management:
- - Creating a User:
- ```
- CREATE USER myuser WITH ENCRYPTED PASSWORD 'mypassword';
- ```
- - Granting Privileges:
- ```
- GRANT ALL PRIVILEGES ON DATABASE mydb TO myuser;
- ```
+
+- Creating a User:
+
+```
+CREATE USER myuser WITH ENCRYPTED PASSWORD 'mypassword';
+```
+
+- Granting Privileges:
+
+```
+GRANT ALL PRIVILEGES ON DATABASE mydb TO myuser;
+```
+
 4. Indexes:
- - Creating an Index:
- ```
- CREATE INDEX idx_name ON employees (name);
- ```
- - Dropping an Index:
- ```
- DROP INDEX idx_name;
- ```
+
+- Creating an Index:
+
+```
+CREATE INDEX idx_name ON employees (name);
+```
+
+- Dropping an Index:
+
+```
+DROP INDEX idx_name;
+```
+
 5. Joins:
- - Inner Join:
- ```
- SELECT a.name, b.department
+
+- Inner Join:
+
+```
+SELECT a.name, b.department
 FROM employees a
 INNER JOIN departments b ON a.department_id = b.id;
- ```
- - Left Join:
- ```
- SELECT a.name, b.department
+```
+
+- Left Join:
+
+```
+SELECT a.name, b.department
 FROM employees a
 LEFT JOIN departments b ON a.department_id = b.id;
- ```
- - Right Join:
- ```
- SELECT a.name, b.department
+```
+
+- Right Join:
+
+```
+SELECT a.name, b.department
 FROM employees a
 RIGHT JOIN departments b ON a.department_id = b.id;
- ```
+```
+
 These commands provide a basic foundation for working with PostgreSQL.
 
 ## Advanced SQL Features
@@ -329,27 +400,32 @@ These commands provide a basic foundation for working with PostgreSQL.
 Advanced SQL features in PostgreSQL provide powerful tools for complex data manipulation, analysis, and performance optimization. Here are some key advanced features:
 
 1. Common Table Expressions (CTEs)
-CTEs allow you to define temporary result sets that can be referenced within a SELECT, INSERT, UPDATE, or DELETE statement.
+   CTEs allow you to define temporary result sets that can be referenced within a SELECT, INSERT, UPDATE, or DELETE statement.
 
 Example:
+
 ```
 WITH sales AS (
     SELECT date, amount FROM transactions WHERE type = 'sale'
 )
 SELECT date, SUM(amount) FROM sales GROUP BY date;
 ```
+
 2. Window Functions
-Window functions perform calculations across a set of table rows related to the current row.
+   Window functions perform calculations across a set of table rows related to the current row.
 
 Example:
+
 ```
 SELECT name, salary, AVG(salary) OVER (PARTITION BY department) AS avg_department_salary
 FROM employees;
 ```
+
 3. Recursive Queries
-Recursive CTEs allow you to query hierarchical data, such as organizational structures or graphs.
+   Recursive CTEs allow you to query hierarchical data, such as organizational structures or graphs.
 
 Example:
+
 ```
 WITH RECURSIVE employee_hierarchy AS (
     SELECT id, name, manager_id FROM employees WHERE manager_id IS NULL
@@ -360,10 +436,12 @@ WITH RECURSIVE employee_hierarchy AS (
 )
 SELECT * FROM employee_hierarchy;
 ```
+
 4. JSON and JSONB
-PostgreSQL provides extensive support for JSON data types, allowing you to store and query JSON data efficiently.
+   PostgreSQL provides extensive support for JSON data types, allowing you to store and query JSON data efficiently.
 
 Example:
+
 ```
 CREATE TABLE products (
     id SERIAL PRIMARY KEY,
@@ -374,10 +452,12 @@ INSERT INTO products (data) VALUES ('{"name": "Widget", "price": 25, "tags": ["s
 
 SELECT data->>'name' AS name, data->>'price' AS price FROM products;
 ```
+
 5. Full-Text Search
-Full-text search capabilities allow you to perform complex text searches.
+   Full-text search capabilities allow you to perform complex text searches.
 
 Example:
+
 ```
 CREATE TABLE documents (
     id SERIAL PRIMARY KEY,
@@ -390,10 +470,12 @@ CREATE INDEX idx_gin_content ON documents USING GIN (to_tsvector('english', cont
 
 SELECT * FROM documents WHERE to_tsvector('english', content) @@ to_tsquery('powerful & open-source');
 ```
+
 5. Full-Text Search
-Full-text search capabilities allow you to perform complex text searches.
+   Full-text search capabilities allow you to perform complex text searches.
 
 Example:
+
 ```
 CREATE TABLE documents (
     id SERIAL PRIMARY KEY,
@@ -406,10 +488,12 @@ CREATE INDEX idx_gin_content ON documents USING GIN (to_tsvector('english', cont
 
 SELECT * FROM documents WHERE to_tsvector('english', content) @@ to_tsquery('powerful & open-source');
 ```
+
 6. Table Partitioning
-Table partitioning improves performance and manageability by dividing large tables into smaller, more manageable pieces.
+   Table partitioning improves performance and manageability by dividing large tables into smaller, more manageable pieces.
 
 Example:
+
 ```
 CREATE TABLE sales (
     id SERIAL PRIMARY KEY,
@@ -420,10 +504,12 @@ CREATE TABLE sales (
 CREATE TABLE sales_2023 PARTITION OF sales FOR VALUES FROM ('2023-01-01') TO ('2024-01-01');
 CREATE TABLE sales_2024 PARTITION OF sales FOR VALUES FROM ('2024-01-01') TO ('2025-01-01');
 ```
+
 7. Foreign Data Wrappers (FDW)
-FDWs allow you to access and manipulate data from external data sources as if they were local tables.
+   FDWs allow you to access and manipulate data from external data sources as if they were local tables.
 
 Example:
+
 ```
 CREATE EXTENSION postgres_fdw;
 
@@ -441,17 +527,21 @@ CREATE FOREIGN TABLE foreign_table (
 ) SERVER foreign_server
 OPTIONS (schema_name 'public', table_name 'foreign_table');
 ```
+
 8. Advanced Indexing
-PostgreSQL supports a variety of indexing methods, including B-tree, Hash, GIN, and GiST indexes.
+   PostgreSQL supports a variety of indexing methods, including B-tree, Hash, GIN, and GiST indexes.
 
 Example:
+
 ```
 CREATE INDEX idx_gin_data ON products USING GIN (data jsonb_path_ops);
 ```
+
 9. Materialized Views
-Materialized views store the result of a query physically and can be refreshed as needed, improving query performance for complex operations.
+   Materialized views store the result of a query physically and can be refreshed as needed, improving query performance for complex operations.
 
 Example:
+
 ```
 CREATE MATERIALIZED VIEW sales_summary AS
 SELECT date_trunc('month', sale_date) AS month, SUM(amount) AS total_sales
@@ -460,10 +550,12 @@ GROUP BY month;
 
 REFRESH MATERIALIZED VIEW sales_summary;
 ```
+
 10. Advanced Transaction Management
-PostgreSQL supports advanced transaction control features such as savepoints, two-phase commit, and more.
+    PostgreSQL supports advanced transaction control features such as savepoints, two-phase commit, and more.
 
 Savepoints Example:
+
 ```
 BEGIN;
 SAVEPOINT my_savepoint;
@@ -476,14 +568,17 @@ ROLLBACK TO SAVEPOINT my_savepoint;
 -- Commit the transaction
 COMMIT;
 ```
+
 11. Extensions
-PostgreSQL has a rich ecosystem of extensions that add new functionality to the database.
+    PostgreSQL has a rich ecosystem of extensions that add new functionality to the database.
 
 Example:
+
 ```
 CREATE EXTENSION pg_trgm;  -- Enables fuzzy string matching
 CREATE EXTENSION postgis;  -- Adds spatial data support
 ```
+
 These advanced features of PostgreSQL can help you handle complex data processing and optimization tasks effectively.
 
 ## Security and User Management
@@ -510,6 +605,7 @@ GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only;
 -- Apply the same permissions to any new tables created in the schema
 ALTER DEFAULT PRIVILEGES IN SCHEMA public GRANT SELECT ON TABLES TO read_only;
 ```
+
 In this example, a user `new_user` is created with a specific password, assigned a role `read_only`, and granted permissions to connect to the database, use the schema, and select data from all tables within the schema. This approach ensures that users have only the necessary access, adhering to the principle of least privilege, thereby enhancing the database's overall security.
 
 ## Extensions and Customization
@@ -520,21 +616,24 @@ PostgreSQL's extensibility and customization capabilities allow it to be tailore
 
 PostgreSQL comes with a collection of extensions that can be easily installed to extend its functionality. Some popular extensions include:
 
-  - PostGIS: Adds support for geographic objects, enabling location-based queries.
-  - pg_trgm: Provides functions and operators for determining the similarity of text based on trigram matching.
-  - hstore: Allows for the storage of key-value pairs within a single PostgreSQL value.
-  - uuid-ossp: Generates universally unique identifiers (UUIDs).
+- PostGIS: Adds support for geographic objects, enabling location-based queries.
+- pg_trgm: Provides functions and operators for determining the similarity of text based on trigram matching.
+- hstore: Allows for the storage of key-value pairs within a single PostgreSQL value.
+- uuid-ossp: Generates universally unique identifiers (UUIDs).
 
 - Installing an Extension
-To install an extension, you can use the CREATE EXTENSION command. For example, to install the pg_trgm extension:
+  To install an extension, you can use the CREATE EXTENSION command. For example, to install the pg_trgm extension:
+
 ```
 CREATE EXTENSION pg_trgm;
 ```
+
 ### Custom Functions and Stored Procedures
 
 Custom functions and stored procedures allow for encapsulating logic that can be reused across queries. They can be written in various procedural languages. Here's an example of a custom function written in PL/pgSQL:
 
 Example: Custom Function
+
 ```
 CREATE OR REPLACE FUNCTION calculate_discount(price NUMERIC, discount_rate NUMERIC) RETURNS NUMERIC AS $$
 BEGIN
@@ -542,6 +641,7 @@ BEGIN
 END;
 $$ LANGUAGE plpgsql;
 ```
+
 This function, calculate_discount, takes a price and a discount rate as input and returns the discounted price.
 
 ### Custom Data Types
@@ -549,6 +649,7 @@ This function, calculate_discount, takes a price and a discount rate as input an
 PostgreSQL allows for the creation of custom data types, which can be useful for representing complex data structures.
 
 Example: Custom Data Type
+
 ```
 CREATE TYPE address AS (
     street VARCHAR,
@@ -557,7 +658,9 @@ CREATE TYPE address AS (
     zip_code VARCHAR
 );
 ```
+
 This custom type `address` can then be used as a column type in a table:
+
 ```
 CREATE TABLE employees (
     id SERIAL PRIMARY KEY,
@@ -565,11 +668,14 @@ CREATE TABLE employees (
     home_address address
 );
 ```
+
 ### Custom Operators
+
 Custom operators can be created to define new operations on existing data types.
 
 Example: Custom Operator
 First, create a function that defines the operation:
+
 ```
 CREATE FUNCTION add_years(date, integer) RETURNS date AS $$
 BEGIN
@@ -577,7 +683,9 @@ BEGIN
 END;
 $$ LANGUAGE plpgsql;
 ```
+
 Next, create the operator that uses this function:
+
 ```
 CREATE OPERATOR + (
     LEFTARG = date,
@@ -585,11 +693,13 @@ CREATE OPERATOR + (
     PROCEDURE = add_years
 );
 ```
+
 Now you can use the `+` operator to add years to a date:
+
 ```
 SELECT '2024-06-23'::date + 5;  -- Returns '2029-06-23'
 ```
 
 ## Conclusion
 
-PostgreSQL stands out as a robust, versatile, and highly extensible open-source relational database system that meets the needs of both small-scale applications and large, complex systems. With its rich set of features including advanced SQL capabilities, comprehensive security and user management, extensive support for extensions, and the ability to create custom functions, data types, and operators, PostgreSQL empowers developers and administrators to tailor the database to their specific requirements. Its commitment to standards compliance, coupled with continuous innovation and community support, ensures that PostgreSQL remains a top choice for organizations seeking a reliable and powerful database solution.
\ No newline at end of file
+PostgreSQL stands out as a robust, versatile, and highly extensible open-source relational database system that meets the needs of both small-scale applications and large, complex systems. With its rich set of features including advanced SQL capabilities, comprehensive security and user management, extensive support for extensions, and the ability to create custom functions, data types, and operators, PostgreSQL empowers developers and administrators to tailor the database to their specific requirements. Its commitment to standards compliance, coupled with continuous innovation and community support, ensures that PostgreSQL remains a top choice for organizations seeking a reliable and powerful database solution.
diff --git a/blog/Getting-started-with-nextJS.md b/blog/Getting-started-with-nextJS.md
index d34724170..d47ab4fbb 100644
--- a/blog/Getting-started-with-nextJS.md
+++ b/blog/Getting-started-with-nextJS.md
@@ -1,6 +1,6 @@
 ---
-title: 'Getting Started with NextJS'
-slidebar_label: 'Getting Started with NextJS'
+title: "Getting Started with NextJS"
+slidebar_label: "Getting Started with NextJS"
 authors: [mohitmuktikant]
 tags: [NextJS, Node, JS]
 date: 2024-07-13
@@ -10,27 +10,27 @@ hide_table_of_contents: true
 Next.js is a popular React framework that enables server-side rendering and static site generation, offering an optimized, flexible approach to building modern web applications.
 
 <!-- truncate -->
-  
+
 ### What is Next.js?
-  
+
 - Next.js is a powerful framework built on top of React, designed to provide the best developer experience with features such as:
 - **Server-Side Rendering** (SSR)
 - **Static Site Generation** (SSG)
 - **API Routes**
 - **Incremental Static Regeneration** (ISR)
 - **File-based routing**
-  
+
 ### Why Use Next.js?
 
 - **Performance:** Automatically optimizes the performance of your application.
 - **SEO:** Enhances SEO with server-side rendering.
 - **Flexibility:** Offers a hybrid approach allowing SSR and SSG.
 - **Developer Experience:** Simplifies development with built-in CSS and Sass support, fast refresh, and API routes.
-  
+
 ## Setting Up a Next.js Project
 
 **Prerequisites**
- Make sure that you have `Node.js` and `npm` installed. You can check this by running:
+Make sure that you have `Node.js` and `npm` installed. You can check this by running:
 
 ```
 node -v
@@ -40,20 +40,26 @@ npm -v
 ### Step 1: Create a `Next.js` App
 
 You can quickly create a new Next.js application using the following command:
+
 ```
 npx create-next-app@latest my-nextjs-app
 cd my-nextjs-app
 ```
+
 ### Step 2: Run the Development Server
 
- Start the development server with:
+Start the development server with:
+
 ```
 npm run dev
 ```
- Navigate to `http://localhost:3000` to see your `Next.js` app in action.
+
+Navigate to `http://localhost:3000` to see your `Next.js` app in action.
 
 ### Step 3: Project Structure
- A basic Next.js project includes the following structure:
+
+A basic Next.js project includes the following structure:
+
 ```
 my-nextjs-app/
   ├── node_modules/
@@ -68,8 +74,9 @@ my-nextjs-app/
 - `pages/`: Contains all the routes for your application.
 - `public/`: Static files like images.
 - `styles/`: Global styles and CSS modules.
-  
+
 ### Step 4: Creating Pages
+
 Create a new page by adding a file to the pages directory. For example, create `pages/about.js`:
 
 ```javascript
@@ -84,9 +91,10 @@ Navigate to `http://localhost:3000/about` to see the new page.
 
 ### Adding CSS and Styling
 
-`Next.js` supports *global styles* and *CSS modules* out of the box.
+`Next.js` supports _global styles_ and _CSS modules_ out of the box.
 
 #### Global Styles
+
 Edit the `styles/globals.css` file to add global styles:
 
 ```css
@@ -94,9 +102,11 @@ body {
   font-family: Arial, sans-serif;
 }
 ```
+
 These styles will apply to the entire application.
 
 #### CSS Modules
+
 Create a `CSS module` in the styles directory:
 
 ```css
@@ -111,7 +121,7 @@ Use this `module` in a component:
 
 ```javascript
 // pages/index.js
-import styles from '../styles/Home.module.css';
+import styles from "../styles/Home.module.css";
 
 const Home = () => {
   return (
@@ -127,12 +137,13 @@ export default Home;
 ## Fetching Data in Next.js
 
 #### Server-Side Rendering (SSR)
+
 Fetch data on each request with `getServerSideProps`:
 
 ```javascript
 // pages/index.js
 export async function getServerSideProps() {
-  const res = await fetch('https://api.example.com/data');
+  const res = await fetch("https://api.example.com/data");
   const data = await res.json();
 
   return { props: { data } };
@@ -146,12 +157,13 @@ export default Home;
 ```
 
 #### Static Site Generation (SSG)
+
 Fetch data at build time with `getStaticProps`:
 
 ```javascript
 // pages/index.js
 export async function getStaticProps() {
-  const res = await fetch('https://api.example.com/data');
+  const res = await fetch("https://api.example.com/data");
   const data = await res.json();
 
   return { props: { data } };
@@ -165,30 +177,35 @@ export default Home;
 ```
 
 ## API Routes
+
 Next.js allows you to create API endpoints inside the `pages/api` directory.
 
 #### Example API Route
-Create `pages/api/hello.js`:
 
+Create `pages/api/hello.js`:
 
 ```javascript
 export default function handler(req, res) {
-  res.status(200).json({ message: 'Hello, world!' });
+  res.status(200).json({ message: "Hello, world!" });
 }
 ```
+
 Access this endpoint at `http://localhost:3000/api/hello`.
 
 ## Deployment
-Deploy your `Next.js` application easily with platforms like *Vercel*, which offers seamless integration with Next.js.
+
+Deploy your `Next.js` application easily with platforms like _Vercel_, which offers seamless integration with Next.js.
 
 #### Deploy to Vercel
+
 1. Push your code to GitHub, GitLab, or Bitbucket.
 2. Import your repository into Vercel.
 3. Follow the prompts to deploy.
-   
-Your *Next.js* application is now live!
+
+Your _Next.js_ application is now live!
 
 ### Conclusion:
-- Next.js is a powerful and *flexible framework* that simplifies the development of modern web applications with React. 
-- By leveraging its built-in features like *SSR*, *SSG*, and *API routes*, you can create **high-performance**, **SEO-friendly applications** with ease.
-- Start your Next.js journey today and unlock the potential of *server-side* rendering and *static site generation* for your projects.
+
+- Next.js is a powerful and _flexible framework_ that simplifies the development of modern web applications with React.
+- By leveraging its built-in features like _SSR_, _SSG_, and _API routes_, you can create **high-performance**, **SEO-friendly applications** with ease.
+- Start your Next.js journey today and unlock the potential of _server-side_ rendering and _static site generation_ for your projects.
diff --git a/blog/Introduction in Python Development.md b/blog/Introduction in Python Development.md
index 87fd111c1..e6bf32f56 100644
--- a/blog/Introduction in Python Development.md	
+++ b/blog/Introduction in Python Development.md	
@@ -1,11 +1,11 @@
 ---
-title: 'Comprehensive Documentation on Linux Development and Cybersecurity'
+title: "Comprehensive Documentation on Linux Development and Cybersecurity"
 sidebar_label: Linux development and cyber security
 authors: [pujan-sarkar]
-tags: [cyber security, python , internet, technology]
+tags: [cyber security, python, internet, technology]
 date: 2024-07-11
 hide_table_of_contents: true
---- 
+---
 
 Python, renowned for its simplicity, readability, and versatility, is a popular programming language used across various domains, including web development, data science, machine learning, and automation. This documentation explores the essential aspects of Python development, including its ecosystem, tools, libraries, and best practices.
 
diff --git a/blog/Introduction to Cyber Security and Web Explosion.md b/blog/Introduction to Cyber Security and Web Explosion.md
index 86a40886b..45b028148 100644
--- a/blog/Introduction to Cyber Security and Web Explosion.md	
+++ b/blog/Introduction to Cyber Security and Web Explosion.md	
@@ -1,5 +1,5 @@
 ---
-title: 'Cyber Security and the Web Explosion'
+title: "Cyber Security and the Web Explosion"
 sidebar_label: Cyber Security and Web Explosion
 authors: [pujan-sarkar]
 tags: [cyber security, web explosion, internet, technology]
diff --git a/blog/JavaScript ES6 features.md b/blog/JavaScript ES6 features.md
index 5e345fec8..e75f0bca5 100644
--- a/blog/JavaScript ES6 features.md	
+++ b/blog/JavaScript ES6 features.md	
@@ -1,5 +1,5 @@
 ---
-title: 'Unveiling the Significance of JS ES6 features'
+title: "Unveiling the Significance of JS ES6 features"
 sidebar_label: Design-Patterns
 authors: [dharshibalasubramaniyam, ajay-dhangar]
 tags: [ES6, javascript, best-practices]
@@ -32,7 +32,7 @@ Arrow functions are especially useful when working with higher-order functions l
 Template literals are a new way to create strings in JavaScript. They allow you to embed expressions and multiline strings directly within the string using backticks (\`\`). Here's an example of a template literal:
 
 ```javascript title="app.js"
-const name = 'Alice';
+const name = "Alice";
 const greeting = `Hello, ${name}!`;
 
 console.log(greeting); // Output: Hello, Alice!
@@ -59,13 +59,13 @@ Destructuring assignment can also be used with objects to extract properties int
 Default parameters allow you to specify default values for function parameters in case no argument is provided. This feature simplifies the process of handling missing arguments and provides a more robust way to define function behavior. Here's an example of default parameters:
 
 ```javascript title="app.js"
-function greet(name = 'World') {
+function greet(name = "World") {
   console.log(`Hello, ${name}!`);
 }
 
 greet(); // Output: Hello, World!
 
-greet('Alice'); // Output: Hello, Alice!
+greet("Alice"); // Output: Hello, Alice!
 ```
 
 Default parameters make functions more flexible and self-contained by providing sensible defaults for missing arguments. They enhance code clarity and reduce the need for explicit parameter checks.
@@ -86,4 +86,4 @@ Rest parameters enable functions to accept any number of arguments without expli
 
 ## Conclusion
 
-ES6 introduced several new features and enhancements that have revolutionized the way developers write JavaScript code. Arrow functions, template literals, destructuring assignment, default parameters, and rest parameters are just a few of the key features that have improved the developer experience and made JavaScript more expressive and efficient. By leveraging these features, developers can write cleaner, more readable, and more maintainable code, ultimately enhancing the quality and performance of their JavaScript applications.
\ No newline at end of file
+ES6 introduced several new features and enhancements that have revolutionized the way developers write JavaScript code. Arrow functions, template literals, destructuring assignment, default parameters, and rest parameters are just a few of the key features that have improved the developer experience and made JavaScript more expressive and efficient. By leveraging these features, developers can write cleaner, more readable, and more maintainable code, ultimately enhancing the quality and performance of their JavaScript applications.
diff --git a/blog/Leveraging GPT model for Natural Language Processing Tasks.md b/blog/Leveraging GPT model for Natural Language Processing Tasks.md
index 779271af0..e941f7ac6 100644
--- a/blog/Leveraging GPT model for Natural Language Processing Tasks.md	
+++ b/blog/Leveraging GPT model for Natural Language Processing Tasks.md	
@@ -1,5 +1,5 @@
 ---
-title: 'Leveraging GPT Model for Natural Language Processing Tasks'
+title: "Leveraging GPT Model for Natural Language Processing Tasks"
 sidebar_label: GPT for NLP
 authors: [pujan-sarkar]
 tags: [NLP, GPT, AI, machine learning, technology]
@@ -111,4 +111,4 @@ Highlighting successful implementations of GPT:
 
 ## Conclusion
 
-GPT's versatility and power make it a valuable tool for a wide range of NLP tasks. By understanding its architecture, capabilities, and best practices, developers can harness GPT to build innovative and efficient NLP solutions. This documentation serves as a comprehensive guide to leveraging GPT for various applications, ensuring optimal performance and ethical use.
\ No newline at end of file
+GPT's versatility and power make it a valuable tool for a wide range of NLP tasks. By understanding its architecture, capabilities, and best practices, developers can harness GPT to build innovative and efficient NLP solutions. This documentation serves as a comprehensive guide to leveraging GPT for various applications, ensuring optimal performance and ethical use.
diff --git a/blog/Mastering Data Structures in Python.md b/blog/Mastering Data Structures in Python.md
index 164eb84cf..d9fbc43dc 100644
--- a/blog/Mastering Data Structures in Python.md	
+++ b/blog/Mastering Data Structures in Python.md	
@@ -1,5 +1,5 @@
 ---
-title: 'Mastering Data Structures in Python'
+title: "Mastering Data Structures in Python"
 sidebar_label: Data Structures
 authors: [santhosh-siddhardha]
 tags: [data-structures, python, best-practices]
@@ -16,6 +16,7 @@ Data structures are essential components in computer science, enabling efficient
 ### Types of Data Structures
 
 1. **Primitive Data Structures**
+
    - Integers
    - Floats
    - Strings
diff --git a/blog/Mastering Design Patterns in Java.md b/blog/Mastering Design Patterns in Java.md
index a4f42f680..b103053a4 100644
--- a/blog/Mastering Design Patterns in Java.md	
+++ b/blog/Mastering Design Patterns in Java.md	
@@ -1,5 +1,5 @@
 ---
-title: 'Mastering Design Patterns in Java'
+title: "Mastering Design Patterns in Java"
 sidebar_label: Design-Patterns
 authors: [dharshibalasubramaniyam]
 tags: [design-patterns, java, best-practices]
@@ -58,7 +58,7 @@ public class Clipboard {
     private String value;
 
     private static Clipboard clipboard = null;
-  
+
     // Private constructor to prevent instantiation from outside
     private Clipboard() {}
 
@@ -85,7 +85,7 @@ public class Clipboard {
 ```
 public class Main {
     public static void main(String[] args) {
-        
+
         // Getting the singleton instances
         Clipboard clipboard1 = Clipboard.getInstance();
         Clipboard clipboard2 = Clipboard.getInstance();
@@ -102,6 +102,7 @@ public class Main {
 - Now, both clipboard1 and clipboard2 reference the same instance of the Clipboard class, ensuring consistency across the application.
 
 ## 2. Factory Design pattern
+
 - The Factory Design Pattern is a creational design pattern that provides an interface for creating objects in a super class but allows subclasses to decide which class to instantiate. In other words, it provides a way to delegate the instantiation logic to child classes.
 
 - Imagine you’re building a program that simulates a simple console based calculator. You have different types of operations like addition, subtraction, multiplication, division etc. Each operation has its own unique behavior. Now, you want to create these operation objects in your program based on customer choice.
@@ -195,23 +196,23 @@ public static void main(String[] args) {
  Output output = new ConsoleOutput();
 
  try {
- 
+
    System.out.println("\n1. Addition(+)\n2. Subtraction(-)\n3. Multiplication(*)\n4. Division(/)");
-   
+
    // getting choice from user
    System.out.println("\n\nSelect your operation (1-4): ");
    int choice = scan.nextInt()
-  
+
    // getting 2 operands from user
    System.out.println("Enter first operand: ");
    double operand1 = scan.nextDouble();
    System.out.println("Enter second operand: ");
    double operand2 = scan.nextDouble();
-   
+
    // create opeartion instance based on user choice
    OperationFactory operationFactory = new OperationFactoryImpl();
    Operation operation = operationFactory.getInstance(choice);
-   
+
    // printing result
    System.out.println("\nThis result is " + operation.calculate(operand1, operand2) + ".");
  }
@@ -226,7 +227,7 @@ public static void main(String[] args) {
 }
 ```
 
-- Here the Main class demonstrates the usage of the factory to create different operation objects without knowing their specific implementation classes (Loose coupling). 
+- Here the Main class demonstrates the usage of the factory to create different operation objects without knowing their specific implementation classes (Loose coupling).
 - It only interacts with the factory interface. Not only that, but we can also easily add new types of operations without changing existing client code. We are just needed to create a new concrete product and update the factory if necessary.
 
 ## 3. Builder pattern
@@ -267,7 +268,7 @@ public class User {
                 ", city: '" + city + '\'' +
                 " }";
     }
-    
+
     // builder class
     public static class UserBuilder {
         private String name; // required field
@@ -523,7 +524,6 @@ public class DecoratorMain {
 }
 ```
 
-
 - DecoratorMain Class: Contains the main() method where the decorator pattern is demonstrated. It creates a circle, decorates it with a border, and then further decorates it with a color. Finally, it calls the draw() method to visualize the decorated shape.
 - Now, with the implementation of the Decorator Pattern, our drawing application gains the remarkable ability to embellish not only circles but also a plethora of geometric shapes such as rectangles, triangles, and beyond. Moreover, the extensibility of this pattern enables us to seamlessly integrate additional decorators, offering features like transparency, diverse border styles (solid, dotted), and much more. This dynamic enhancement capability, achieved without altering the core structure of the shapes, underscores the pattern’s prowess in promoting code reusability, flexibility, and scalability.
 
@@ -620,9 +620,8 @@ public class YoutubeChannel implements Subject{
 }
 ```
 
-
 - Concrete Subject: The YoutubeChannel class implements the Subject interface. It maintains a list of subscribers and notifies them when a new event occurs.
-package observer;
+  package observer;
 
 ```
 public class YoutubeSubscriber implements Observer{
@@ -647,7 +646,6 @@ public class YoutubeSubscriber implements Observer{
 }
 ```
 
-
 - Concrete Observer: The YoutubeSubscriber class implements the Observer interface. It defines the behavior to be performed when notified by a subject.
 
 ```
@@ -688,4 +686,5 @@ Dear Bob, Notification from MyChannel: LIVE_STREAM on JAVA for beginners
 - By using the Observer design pattern, the YouTube channel can easily notify all its subscribers whenever a new video is uploaded without tightly coupling the channel and its subscribers. This promotes a more flexible and maintainable design.
 
 ## Conclusion
+
 In conclusion, design patterns are indispensable tools for Java developers, offering proven solutions to recurring design problems and promoting code reusability, maintainability, and scalability. By understanding and implementing these patterns effectively, developers can craft robust, flexible, and easily maintainable software solutions. While mastering design patterns requires practice and experience, the benefits they bring to software development are invaluable. Whether you’re working on a small project or a large-scale enterprise application, leveraging design patterns empowers you to write cleaner, more efficient code and ultimately become a more proficient Java developer.
diff --git a/blog/Mastering OOP concepts in JAVA.md b/blog/Mastering OOP concepts in JAVA.md
index 6d36956d0..94045373c 100644
--- a/blog/Mastering OOP concepts in JAVA.md	
+++ b/blog/Mastering OOP concepts in JAVA.md	
@@ -1,5 +1,5 @@
 ---
-title: 'Mastering OOP concepts in JAVA'
+title: "Mastering OOP concepts in JAVA"
 sidebar_label: OOP
 authors: [dharshibalasubramaniyam]
 tags: [oop, java, best-practices]
@@ -7,7 +7,7 @@ date: 2024-06-18
 hide_table_of_contents: true
 ---
 
-Programing paradigms are approaches to write code, each with its own principles, concepts and guidelines. These paradigms guide how developers structure and organize their programs, as well as how they think about problem-solving. 
+Programing paradigms are approaches to write code, each with its own principles, concepts and guidelines. These paradigms guide how developers structure and organize their programs, as well as how they think about problem-solving.
 
 <!-- truncate -->
 
@@ -56,27 +56,27 @@ public class Student {
     private String name;
     private int age;
     private String major;
-    
+
     // Method to study
     public void study() {
         System.out.println(name + " is studying " + major + ".");
     }
-    
+
     // Method to attend class
     public void attendClass() {
         System.out.println(name + " is attending class.");
     }
-    
+
     // Method to take an exam
     public void takeExam() {
         System.out.println(name + " is taking an exam.");
     }
-    
+
     // Method to submit assignment
     public void submitAssignment() {
         System.out.println(name + " is submitting an assignment.");
     }
-    
+
 }
 ```
 
@@ -93,7 +93,8 @@ public class Student {
 - To create a new student object, we use the ‘new’ keyword followed by the class name, along with any required arguments for the constructor.
 - There are different types of constructors:
 
-### Default Constructor: 
+### Default Constructor:
+
 - If a class does not explicitly define any constructors, Java provides a default constructor with no arguments. The default constructor initializes the object’s attributes to default values (e.g., numeric types to 0, object references to null).
 
 ```
@@ -103,7 +104,7 @@ public class Student {
     private String name;
     private int age;
     private String major;
-    
+
     // Default Constructor
     // (will discuss about `this` keyword later in this aricle)
     public Student() {
@@ -113,13 +114,14 @@ public class Student {
     }
 
     // Other methods...
-    
+
 }
 // Creating a student object using the default constructor
 Student john = new Student();
 ```
 
-### Parameterized Constructors: 
+### Parameterized Constructors:
+
 - Constructors can accept parameters to initialize the object with specific values. You can define multiple constructors with different parameter lists, allowing for constructor overloading.
 
 ```
@@ -127,7 +129,7 @@ public class Student {
     private String name;
     private int age;
     private String major;
-    
+
     // Parameterized Constructor
     public Student(String name, int age, String major) {
         this.name = name;
@@ -141,7 +143,8 @@ public class Student {
 Student alice = new Student("Alice", 20, "Computer Science");
 ```
 
-### Copy constructor: 
+### Copy constructor:
+
 - A copy constructor creates a new object by copying the values of another object. It’s used to create a new object that is a copy of an existing one.
 
 ```
@@ -149,7 +152,7 @@ public class Student {
     private String name;
     private int age;
     private String major;
-    
+
     // Copy Constructor
     public Student(Student otherStudent) {
         this.name = otherStudent.name;
@@ -248,14 +251,13 @@ public class Student {
 - They determine which parts of your code can be accessed or modified from other parts of your program, as well as from external code.
 - Java has four main access modifiers:
 
-   1. public: The public access modifier makes the class, method, or variable accessible from any other class.
+  1.  public: The public access modifier makes the class, method, or variable accessible from any other class.
 
-   2. protected: The protected access modifier allows access to the member within the same package or by subclasses (will discuss later about subclasses), even if they are in a different package. It restricts access to classes outside the package unless they are subclasses of the class containing the protected member.
+  2.  protected: The protected access modifier allows access to the member within the same package or by subclasses (will discuss later about subclasses), even if they are in a different package. It restricts access to classes outside the package unless they are subclasses of the class containing the protected member.
 
-   3. default (no modifier): If no access modifier is specified, the default access level is package-private. Members with default access are accessible only within the same package. They cannot be accessed from outside the package, even by subclasses.
-
-   4. private: The private access modifier restricts access to the member only within the same class. It is the most restrictive access level and prevents access from outside the class, including subclasses.
+  3.  default (no modifier): If no access modifier is specified, the default access level is package-private. Members with default access are accessible only within the same package. They cannot be accessed from outside the package, even by subclasses.
 
+  4.  private: The private access modifier restricts access to the member only within the same class. It is the most restrictive access level and prevents access from outside the class, including subclasses.
 
 let’s demonstrate the use of access modifiers with the Student class we used earlier.
 
@@ -263,16 +265,16 @@ let’s demonstrate the use of access modifiers with the Student class we used e
 public class Student {
     // Public access modifier
     public String name;
-    
+
     // Protected access modifier
     protected int age;
-    
+
     // Default (package-private) access modifier
     String major;
-    
+
     // Private access modifier
     private double gpa;
-    
+
     // Constructor
     public Student(String name, int age, String major, double gpa) {
         this.name = name;
@@ -280,7 +282,7 @@ public class Student {
         this.major = major;
         this.gpa = gpa;
     }
-    
+
     // Public method
     public void displayInfo() {
         System.out.println("Name: " + name);
@@ -288,17 +290,17 @@ public class Student {
         System.out.println("Major: " + major);
         System.out.println("GPA: " + gpa);
     }
-    
+
     // Protected method
     protected void study() {
         System.out.println(name + " is studying.");
     }
-    
+
     // Default method (package-private)
     void attendClass() {
         System.out.println(name + " is attending class.");
     }
-    
+
     // Private method
     private void calculateGPA() {
         // GPA calculation logic
@@ -307,14 +309,15 @@ public class Student {
 ```
 
 ## Encapsulation
+
 - Encapsulation refers to the bundling of data (attributes) and methods (functions) that operate on an object into a single unit, often referred to as a class.
 - Encapsulation hides the internal state and implementation details of an object from the outside world, providing controlled access to the object’s properties and behaviors.
 - The primary goal of encapsulation is to restrict access to some of the object’s components, while exposing only what is necessary and safe for the outside world.
 - In Java, encapsulation is achieved using access modifiers (public, private, protected, and default) to control the visibility and accessibility of class members (attributes and methods).
 - key principles and practices related to encapsulation in Java:
-    1. Declare the attributes (fields) of a class as private.
-    2. Provide public methods (getters and setters) to access and manipulate the private fields. Getters allow read-only access, and setters allow modification, ensuring controlled access to the data.
-    3. Let’s achieve encapsulation in previously discussed Car class by declaring attributes as private and providing getters and setters .
+  1. Declare the attributes (fields) of a class as private.
+  2. Provide public methods (getters and setters) to access and manipulate the private fields. Getters allow read-only access, and setters allow modification, ensuring controlled access to the data.
+  3. Let’s achieve encapsulation in previously discussed Car class by declaring attributes as private and providing getters and setters .
 
 ```
 public class Student {
@@ -399,6 +402,7 @@ public class Main {
 - Encapsulation is a key principle in Java and other object-oriented languages that promotes data integrity, code maintainability, and code security by controlling access to the internal state of objects. It is an essential practice for creating well-structured and robust Java programs.
 
 ## Inheritance
+
 - Inheritance is a key concept in object-oriented programming (OOP) that allows a new class (called a subclass or derived class) to inherit attributes and methods from an existing class (called a superclass or base class).
 - The subclass can then extend or modify the behavior of the superclass while also inheriting its properties.
 - Superclass (Base Class): The class whose members (attributes and methods) are inherited by another class is known as the superclass or base class.
@@ -491,14 +495,14 @@ public class Main {
 
         // Accessing properties of the superclass (Student)
         System.out.println("Student Information:");
-        System.out.println("Name: " + gradStudent.getName()); 
-        System.out.println("Age: " + gradStudent.getAge()); 
-        System.out.println("Major: " + gradStudent.getMajor()); 
+        System.out.println("Name: " + gradStudent.getName());
+        System.out.println("Age: " + gradStudent.getAge());
+        System.out.println("Major: " + gradStudent.getMajor());
 
         // Accessing properties of the subclass (GraduateStudent)
         System.out.println("\nGraduate Student Information:");
-        System.out.println("Advisor: " + gradStudent.getAdvisor()); 
-        System.out.println("Research Topic: " + gradStudent.getResearchTopic()); 
+        System.out.println("Advisor: " + gradStudent.getAdvisor());
+        System.out.println("Research Topic: " + gradStudent.getResearchTopic());
 
         // Calling methods of the superclass
         System.out.println("\nDisplaying student information:");
@@ -512,46 +516,54 @@ public class Main {
 ```
 
 ### Types of inheritance
+
 1. Single inheritance
+
 - In single inheritance, a subclass inherits from only one superclass.
 - Java supports single inheritance, where a class can have only one direct superclass.
 - Example: Class Dog inherits from class Animal.
 
 2. Multilevel Inheritance
+
 - In multilevel inheritance, a subclass inherits from another subclass, forming a chain of inheritance.
 - Each subclass in the chain inherits properties and behaviors from its immediate superclass.
 - Example: Class GrandChild inherits from class Child, which in turn inherits from class Parent.
 
 3. Hierarchical Inheritance
+
 - In hierarchical inheritance, multiple subclasses inherit from a single superclass.
 - Each subclass shares common properties and behaviors inherited from the same superclass.
 - Example: Classes Cat, Dog, and Rabbit all inherit from class Animal.
 
 4. Multiple Inheritance (Not Supported in Java)
+
 - Multiple inheritance allows a subclass to inherit from multiple superclasses.
 - While Java doesn’t support multiple inheritance of classes, it supports multiple inheritance of interfaces through interface implementation.
 - Example: Class Student inherits from both class Person and class Scholar.
 
 5. Hybrid Inheritance (Not Supported in Java)
+
 - Hybrid inheritance is a combination of two or more types of inheritance.
 - It can involve single, multilevel, and hierarchical inheritance, along with multiple inheritance if supported by the programming language.
 - Java doesn’t directly support hybrid inheritance due to the absence of multiple inheritance of classes.
 
 ## Polymorphism
+
 - The word “poly” means many and “morphs” means forms, so it means many forms. we can define Java Polymorphism as the ability of a message to be displayed in more than one form. It allows us to perform a single action in different ways.
 - In Java, polymorphism is primarily achieved through method overriding and method overloading.
 
 ### Compile-Time Polymorphism (Static Binding or Early Binding) — Method overloading.
+
 - Compile-time polymorphism occurs when the compiler determines which method or operation to execute at compile time based on the method signature (method overloading)
-Method overloading allows multiple methods with the same name, but different parameter lists within the same class.
+  Method overloading allows multiple methods with the same name, but different parameter lists within the same class.
 
 ```
 public class Box {
-    
+
     public double calculateVolume(double sideLength) {
         return sideLength * sideLength * sideLength;
     }
-    
+
     public double calculateArea(double length, double width, double height) {
         return length * width * height;
     }
@@ -561,7 +573,7 @@ public class Box {
 ### Run-Time Polymorphism (Dynamic Binding or Late Binding) — Method overriding.
 
 - Run-time polymorphism occurs when the JVM determines which method or operation to execute at runtime based on the actual object type (method overriding).
-Method overriding allows a subclass to provide a specific implementation of a method that is already defined in its superclass.
+  Method overriding allows a subclass to provide a specific implementation of a method that is already defined in its superclass.
 
 ```
 class Shape {
@@ -573,11 +585,11 @@ class Shape {
 
 class Circle extends Shape {
     private double radius;
-    
+
     public Circle(double radius) {
         this.radius = radius;
     }
-    
+
     @Override
     public double calculateArea() {
         return Math.PI * radius * radius; // Override to calculate the area of a circle
@@ -587,12 +599,12 @@ class Circle extends Shape {
 class Triangle extends Shape {
     private double base;
     private double height;
-    
+
     public Triangle(double base, double height) {
         this.base = base;
         this.height = height;
     }
-    
+
     @Override
     public double calculateArea() {
         return 0.5 * base * height; // Override to calculate the area of a triangle
@@ -601,10 +613,12 @@ class Triangle extends Shape {
 ```
 
 ## Abstraction
+
 - Abstraction involves hiding the unnecessary details while exposing only what is relevant and important.
 - In Java, abstraction is primarily achieved through abstract classes and interfaces.
 
 ### Abstract classes
+
 - An abstract class is a class that cannot be instantiated on its own and is meant to be extended by other classes.
 - It may contain abstract methods (methods without a body) that are meant to be implemented by its subclasses.
 - Abstract classes can also have concrete (implemented) methods.
@@ -623,11 +637,11 @@ abstract class Shape {
 
 class Circle extends Shape {
     private double radius;
-    
+
     public Circle(double radius) {
         this.radius = radius;
     }
-    
+
     @Override
     public double calculateArea() {
         return Math.PI * radius * radius; // Override to calculate the area of a circle
@@ -637,12 +651,12 @@ class Circle extends Shape {
 class Triangle extends Shape {
     private double base;
     private double height;
-    
+
     public Triangle(double base, double height) {
         this.base = base;
         this.height = height;
     }
-    
+
     @Override
     public double calculateArea() {
         return 0.5 * base * height; // Override to calculate the area of a triangle
@@ -652,14 +666,14 @@ public class Main {
     public static void main(String[] args) {
         // Create a Shape object
         Shape shape = new Shape(); // Compilation Error: Cannot instantiate the abstract class Shape
-        
+
         // Create a Circle object
         Shape circle = new Circle(5.0);
-        
+
         // Calculate and print the area of the circle
         double circleArea = circle.calculateArea();
         System.out.println("Area of the circle: " + circleArea);
-        
+
         // Set the color of the circle
         circle.setColor("Red");
     }
@@ -680,17 +694,17 @@ public class Main {
 public interface Shape {
     // Abstract method to calculate the area
     double calculateArea();
-    
+
 }
 
 // Circle class implementing the Shape interface
 public class Circle implements Shape {
     private double radius;
-    
+
     public Circle(double radius) {
         this.radius = radius;
     }
-    
+
     @Override
     public double calculateArea() {
         return Math.PI * radius * radius;
@@ -701,12 +715,12 @@ public class Circle implements Shape {
 public class Triangle implements Shape {
     private double base;
     private double height;
-    
+
     public Triangle(double base, double height) {
         this.base = base;
         this.height = height;
     }
-    
+
     @Override
     public double calculateArea() {
         return 0.5 * base * height;
@@ -716,22 +730,22 @@ public class Triangle implements Shape {
     public static void main(String[] args) {
         // Create a Circle object
         Shape circle = new Circle(5.0);
-        
+
         // Calculate and print the area of the circle
         double circleArea = circle.calculateArea();
         System.out.println("Area of the circle: " + circleArea);
-        
+
         // Create a Triangle object
         Shape triangle = new Triangle(4.0, 3.0);
-        
+
         // Calculate and print the area of the triangle
         double triangleArea = triangle.calculateArea();
         System.out.println("Area of the triangle: " + triangleArea);
     }
 }
 ```
-- Abstract classes and Interfaces are used to define a generic template for other classes to follow. They define a set of rules and guidelines that their subclasses must follow. By providing an abstract class, we can ensure that the classes that extend it have a consistent structure and behavior. This makes the code more organized and easier to maintain.
 
+- Abstract classes and Interfaces are used to define a generic template for other classes to follow. They define a set of rules and guidelines that their subclasses must follow. By providing an abstract class, we can ensure that the classes that extend it have a consistent structure and behavior. This makes the code more organized and easier to maintain.
 
 ### Up casting and Down casting in Abstraction
 
@@ -743,13 +757,13 @@ public class Triangle implements Shape {
 public interface Shape {
     // Abstract method to calculate the area
     double calculateArea();
-    
+
 }
 
 // Circle class implementing the Shape interface
 public class Circle implements Shape {
     private double radius;
-    
+
     public Circle(double radius) {
         this.radius = radius;
     }
@@ -758,7 +772,7 @@ public class Circle implements Shape {
     public double getRadius() {
         return this.radius;
     }
-    
+
     @Override
     public double calculateArea() {
         return Math.PI * radius * radius;
@@ -769,7 +783,7 @@ public class Main {
    public static void main(String[] args) {
         // Implicit Upcasting
         Shape circle = new Circle(5.0);
-        
+
         // We have access to calculate area, since it is overridden from the Shape interface (Parent)
         double circleArea = circle.calculateArea();
         System.out.println("Area of the circle: " + circleArea);
@@ -777,20 +791,21 @@ public class Main {
         // compilation error, because it's not part of the Shape interface (Parent)
         System.out.println(circle.getRadius());
 
-        // Implicit down casting: compilation error 
+        // Implicit down casting: compilation error
         Circle circle2 = new Shape();
 
-        // Explicit down casting        
+        // Explicit down casting
         Circle circle2 = (Circle) circle;
-      
-        // We have access, because the reference variable circle2 is of type sub class, which has this method 
+
+        // We have access, because the reference variable circle2 is of type sub class, which has this method
         System.out.println(circle2.getRadius());
-        
+
    }
 }
 ```
 
 ## Conclusion
+
 - In conclusion, Object-Oriented Programming (OOP) is a powerful paradigm that promotes code organization, reusability, and maintainability by modeling real-world entities as objects with properties and behaviors. Throughout this article, we’ve explored the four main concepts of OOP: encapsulation, inheritance, polymorphism, and abstraction, and how they can be applied in various scenarios to improve software design and development.
 
 - Encapsulation allows us to hide the internal details of an object and expose only the necessary functionalities through well-defined interfaces, enhancing security and modularity.
@@ -800,4 +815,3 @@ public class Main {
 - Polymorphism allows us to perform a single action in different ways.
 
 - Abstraction simplifies complex systems by focusing on essential features and hiding implementation details, promoting clarity and maintainability.
-
diff --git a/blog/Mastering SOLID principles in Java.md b/blog/Mastering SOLID principles in Java.md
index 5ce4d8dbd..0d6d93f97 100644
--- a/blog/Mastering SOLID principles in Java.md	
+++ b/blog/Mastering SOLID principles in Java.md	
@@ -1,6 +1,6 @@
 ---
-title: 'Mastering SOLID principles in Java'
-sidebar_label: SOLID principles 
+title: "Mastering SOLID principles in Java"
+sidebar_label: SOLID principles
 authors: [dharshibalasubramaniyam]
 tags: [solid-principles, java, best-practices]
 date: 2024-06-18
@@ -30,7 +30,7 @@ public class BankAccount {
      this.accountNo = accountNo;
      this.accountType = accountType;
   }
-  
+
   public void deposit() {
      //code to deposit amount
   }
@@ -99,7 +99,6 @@ public class NotificationService {
 }
 ```
 
-
 ## 2. Open closed principle (OCP)
 
 - OCP states that, software entities (such as classes, modules, functions, etc.) should be open for extension but closed for modification.
@@ -123,7 +122,7 @@ public class BankAccount {
      this.sqlBankAccountRepository = sqlBankAccountRepository;
      this.notificationService = notificationService;
   }
-  
+
   public void deposit() {
     //code to deposit amount
   }
@@ -135,14 +134,14 @@ public class BankAccount {
   public double calculateInterest() {
     if(this.accountType.equals(‘Savings’))
      return this.balance * 0.03;
-  
+
     else if(this.accountType.equals(‘Checking’))
      return this.balance * 0.01;
-  
+
     else if(this.accountType.equals(‘FixedDeposit’))
      return this.balance * 0.05;
   }
-  
+
 }
 ```
 
@@ -162,7 +161,7 @@ public class SavingsBankAccount implements BankAccount {
   public double calculateInterest() {
     return this.balance * 0.03;
   }
-  
+
 }
 public class CheckingBankAccount implements BankAccount {
   // attributes and constructor
@@ -172,7 +171,7 @@ public class CheckingBankAccount implements BankAccount {
   public double calculateInterest() {
     return this.balance * 0.01;
   }
-  
+
 }
 public class FixedDepositBankAccount implements BankAccount {
   // attributes and constructor
@@ -182,20 +181,20 @@ public class FixedDepositBankAccount implements BankAccount {
   public double calculateInterest() {
     return this.balance * 0.05;
   }
-  
+
 }
 ```
 
 - With new implementation, we can calculate interest by implementing BankAccount without modifying underlying logic. The class is open for extension (new account classes can be added) but closed for modification (existing calculateInterest methods remain untouched).
 
 ```
-BankAccount savingsBankAccount = new SavingsBankAccount(); 
+BankAccount savingsBankAccount = new SavingsBankAccount();
 double savingsBankAccountInterest = savingsBankAccount. calculateInterest();
 
-BankAccount checkingBankAccount = new CheckingBankAccount(); 
+BankAccount checkingBankAccount = new CheckingBankAccount();
 double checkingBankAccountInterest = checkingBankAccount. calculateInterest();
 
-BankAccount fixedDepositBankAccount = new FixedDepositBankAccount(); 
+BankAccount fixedDepositBankAccount = new FixedDepositBankAccount();
 double fixedDepositBankAccountInterest = fixedDepositBankAccount. calculateInterest();
 ```
 
@@ -262,11 +261,10 @@ class Penguin extends Bird{
 }
 ```
 
-
 ## 4. Interface segregation principle (ISP)
 
 - ISP states that, clients should not be forced to depend on interfaces they do not use.
-This principle encourages you to create specific, fine-grained interfaces rather than large, monolithic ones, to avoid forcing clients to implement methods they don’t need.
+  This principle encourages you to create specific, fine-grained interfaces rather than large, monolithic ones, to avoid forcing clients to implement methods they don’t need.
 - For an example consider the withdraw method of LoanBankAccount class that implements previously discussed BankAccount class.
 
 ```
@@ -281,10 +279,10 @@ public class SavingsBankAccount implements BankAccount {
   // deposit and calculateInterest method declarations
 
   public void withdraw(double amount) {
-    if (this.balance < double amount) 
+    if (this.balance < double amount)
         this.balance-=amount;
   }
-  
+
 }
 
 public class CheckingBankAccount implements BankAccount {
@@ -292,10 +290,10 @@ public class CheckingBankAccount implements BankAccount {
   // deposit and withdraw method declarations
 
   public void withdraw(double amount) {
-    if (this.balance < double amount) 
+    if (this.balance < double amount)
         this.balance-=amount;
   }
-  
+
 }
 public class LoanBankAccount implements BankAccount {
   // attributes and constructor
@@ -304,7 +302,7 @@ public class LoanBankAccount implements BankAccount {
   public double withdraw() {
     //empty method – cannot withdraw from loan accounts
   }
-  
+
 }
 ```
 
@@ -335,7 +333,6 @@ public class LoanBankAccount implements BankAccount {
 
 - Here, we created BankAccount interface for deposit and calculateInterest and Withdrawable interface for withdraw. So that implementation classes can implement necessary interfaces according to its need.
 
-
 ## 5. Dependency inversion principle (DIP)
 
 - The principle states that we must use abstraction (abstract classes and interfaces) instead of concrete implementations. The DIP states that:
diff --git a/blog/Quantum computing and it's application.md b/blog/Quantum computing and it's application.md
index 1db91c15b..fd9fbd82c 100644
--- a/blog/Quantum computing and it's application.md	
+++ b/blog/Quantum computing and it's application.md	
@@ -65,30 +65,36 @@ Quantum machine learning combines quantum computing and classical machine learni
 ## Resources for Further Learning
 
 ### Books
+
 1. **"Quantum Computing: A Gentle Introduction" by Eleanor Rieffel and Wolfgang Polak**
+
    - A comprehensive introduction to the principles and applications of quantum computing.
 
 2. **"Quantum Computation and Quantum Information" by Michael A. Nielsen and Isaac L. Chuang**
    - Often considered the definitive textbook on quantum computing, covering a wide range of topics in depth.
 
 ### Papers
+
 1. **"Simulating Physics with Computers" by Richard Feynman**
+
    - One of the foundational papers in quantum computing, introducing the concept of using quantum systems for simulation.
 
 2. **"Shor's Algorithm for Quantum Factoring" by Peter Shor**
    - The seminal paper that introduced Shor's algorithm, demonstrating the potential of quantum computers to solve certain problems exponentially faster than classical computers.
 
 ### Online Courses
+
 1. **"Quantum Computing for the Very Curious" by Michael Nielsen**
+
    - A free, interactive online book that provides a hands-on introduction to quantum computing.
 
 2. **Coursera: "Quantum Computing" by University of Toronto**
    - A comprehensive course covering the basics of quantum computing, quantum algorithms, and quantum hardware.
 
 ### Tutorials and Blogs
+
 1. **Qiskit Tutorials**
    - IBM's open-source quantum computing framework provides extensive tutorials and resources for learning quantum programming.
-   
 2. **Quantum Computing Report**
    - A blog that keeps up with the latest news, developments, and insights in the field of quantum computing.
 
diff --git a/blog/Web-Development-with-Django.md b/blog/Web-Development-with-Django.md
index 7e72e87df..c9133c6bf 100644
--- a/blog/Web-Development-with-Django.md
+++ b/blog/Web-Development-with-Django.md
@@ -5,18 +5,21 @@ Django is a high-level Python web framework that encourages rapid development an
 <!-- truncate -->
 
 ## 1. Introduction to Django
+
 Django is a powerful and flexible framework that follows the "batteries-included" philosophy. It provides many built-in features such as an ORM, authentication, and an admin panel, which make it an excellent choice for web development.
 
 ## 2. Setting Up the Development Environment
 
 ### Installing Python and Django
+
 Download and install Python from the official website. Use `pip` to install Django:
+
 ```bash
 pip install django
 ```
 
-
 ## Setting Up a Virtual Environment
+
 Create a virtual environment to manage your project's dependencies:
 
 ```bach
@@ -24,8 +27,8 @@ python -m venv myenv
 source myenv/bin/activate  # On Windows, use `myenv\Scripts\activate`
 ```
 
-
 ## Creating a New Django Project
+
 Start a new Django project using the django-admin command:
 
 ```bash
@@ -34,24 +37,30 @@ cd myproject
 ```
 
 ## 3. Understanding the Django Project Structure
+
 ### Project vs. App
+
 A Django project is a collection of settings and configurations for an instance of Django, while an app is a web application that does something, like a blog or a poll system. A project can contain multiple apps.
 
 ### Key Files and Directories
+
 manage.py: A command-line utility for interacting with your project.
 settings.py: Configuration settings for your project.
 urls.py: URL declarations for your project.
 wsgi.py and asgi.py: Entry points for WSGI/ASGI-compatible web servers.
 
-
 ## 4. Building Your First Django App
+
 ### Creating a New App
+
 Create a new app within your project:
+
 ```bash
 python manage.py startapp myapp
 ```
 
 ### Defining Models
+
 Models are Python classes that define the structure of your database tables. Define a model in models.py:
 
 ```python
@@ -64,13 +73,16 @@ class Post(models.Model):
 ```
 
 ### Creating and Applying Migrations
+
 Generate and apply database migrations to create the tables:
+
 ```bash
 python manage.py makemigrations
 python manage.py migrate
 ```
 
 ### Registering Models in Admin
+
 Register your models to be managed via the Django admin interface:
 
 ```python
@@ -82,10 +94,10 @@ admin.site.register(Post)
 ```
 
 ## 5. Django Views and Templates
+
 Creating Views
 Views handle the logic of your application and return responses. Define a view in views.py:
 
-
 ```python
 from django.shortcuts import render
 from .models import Post
@@ -96,7 +108,9 @@ def index(request):
 ```
 
 ### URL Routing
+
 Map URLs to views in urls.py:
+
 ```python
 from django.urls import path
 from . import views
@@ -105,60 +119,64 @@ urlpatterns = [
     path('', views.index, name='index'),
 ]
 ```
+
 ### Using Templates
+
 Create HTML templates in the templates directory. For example, index.html:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
+  <head>
     <title>My Blog</title>
-</head>
-<body>
+  </head>
+  <body>
     <h1>Posts</h1>
     <ul>
-        {% for post in posts %}
-            <li>{{ post.title }}</li>
-        {% endfor %}
+      {% for post in posts %}
+      <li>{{ post.title }}</li>
+      {% endfor %}
     </ul>
-</body>
+  </body>
 </html>
-
 ```
 
 ### Template Inheritance
+
 Use template inheritance to avoid redundancy. Create a base template base.html:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
+  <head>
     <title>{% block title %}My Site{% endblock %}</title>
-</head>
-<body>
+  </head>
+  <body>
     {% block content %}{% endblock %}
-</body>
+  </body>
 </html>
 ```
+
 Extend it in index.html:
 
 ```html
-{% extends 'base.html' %}
-
-{% block title %}Home{% endblock %}
-
-{% block content %}
+{% extends 'base.html' %} {% block title %}Home{% endblock %} {% block content
+%}
 <h1>Posts</h1>
 <ul>
-    {% for post in posts %}
-        <li>{{ post.title }}</li>
-    {% endfor %}
+  {% for post in posts %}
+  <li>{{ post.title }}</li>
+  {% endfor %}
 </ul>
 {% endblock %}
 ```
+
 ## 6. Working with Forms
+
 ### Creating Forms
+
 Define a form in forms.py:
+
 ```python
 from django import forms
 from .models import Post
@@ -168,8 +186,10 @@ class PostForm(forms.ModelForm):
         model = Post
         fields = ['title', 'content']
 ```
+
 Handling Form Submissions
 Handle form submissions in a view:
+
 ```python
 from django.shortcuts import render, redirect
 from .forms import PostForm
@@ -184,6 +204,7 @@ def create_post(request):
         form = PostForm()
     return render(request, 'create_post.html', {'form': form})
 ```
+
 Form Validation
 Django forms automatically handle validation, but you can add custom validation methods to your form fields if needed.
 
@@ -193,35 +214,45 @@ Django forms can be used directly with models to simplify data handling and vali
 ## 7. Deploying Django Applications
 
 ### Preparing for Deployment
+
 Configure your Django settings for production, including setting `DEBUG = False` and configuring allowed hosts.
 
 ### Using Gunicorn and Nginx
+
 Deploy your Django application using Gunicorn as the application server and Nginx as the reverse proxy.
 
 ### Deploying on Popular Platforms (Heroku, AWS, etc.)
+
 Deploy your Django application on popular platforms like Heroku and AWS, using their specific deployment guides.
 
 ## 8. Advanced Django Features
 
 ### Django REST Framework for APIs
+
 Use Django REST Framework (DRF) to build RESTful APIs with Django.
 
 ### Caching in Django
+
 Implement caching to improve the performance of your Django application.
 
 ### Internationalization and Localization
+
 Add internationalization (i18n) and localization (l10n) support to your Django application to handle multiple languages and regional settings.
 
 ## 09. Best Practices and Tips
 
 ### Code Organization
+
 Organize your code using best practices for maintainability and readability.
 
 ### Security Best Practices
+
 Follow Django's security best practices to protect your application from common vulnerabilities.
 
 ### Performance Optimization
+
 Optimize your Django application for better performance, including database indexing and query optimization.
 
 ## 10. Conclusion
+
 Django is a powerful and versatile framework that simplifies web development. By following best practices and leveraging Django's built-in features, you can build scalable, secure, and maintainable web applications.
diff --git a/blog/ai-in-healthcare.md b/blog/ai-in-healthcare.md
index 5f37c4056..bee043e01 100644
--- a/blog/ai-in-healthcare.md
+++ b/blog/ai-in-healthcare.md
@@ -1,5 +1,5 @@
 ---
-title: 'Artificial Intelligence in Healthcare: Innovations and Ethical Considerations'
+title: "Artificial Intelligence in Healthcare: Innovations and Ethical Considerations"
 sidebar_label: AI in Healthcare
 authors: [nayanika-mukherjee]
 tags: [AI, healthcare, machine learning, medical devices, ethics, case studies]
@@ -72,10 +72,11 @@ print(f'Accuracy: {accuracy}')
 ```
 
 ## AI-Powered Medical Devices
+
 AI-powered medical devices enhance patient care and operational efficiency:
 
 - **Wearables:** Devices that monitor vital signs and alert patients and doctors to potential issues.
-Robotics: Surgical robots that assist in precision surgeries.
+  Robotics: Surgical robots that assist in precision surgeries.
 - **Diagnostic Tools:** AI-driven tools that provide real-time diagnostic support to clinicians.
 
 ### Example: Using AI in Wearables
@@ -141,4 +142,4 @@ AI is a powerful tool in healthcare, offering numerous benefits from improved di
 
 - **Books:** "Deep Medicine" by Eric Topol, "Artificial Intelligence in Healthcare" by Adam Bohr and Kaveh Memarzadeh.
 - **Online Courses:** Coursera, edX, and Udacity offer courses on AI in healthcare.
-- **Communities:** Join AI and healthcare communities to stay updated and collaborate with peers.
\ No newline at end of file
+- **Communities:** Join AI and healthcare communities to stay updated and collaborate with peers.
diff --git a/blog/automating-tasks-with-python.md b/blog/automating-tasks-with-python.md
index 359323497..36c8365dd 100644
--- a/blog/automating-tasks-with-python.md
+++ b/blog/automating-tasks-with-python.md
@@ -1,5 +1,5 @@
 ---
-title: 'Automating Tasks with Python: Using the OS and Subprocess Modules'
+title: "Automating Tasks with Python: Using the OS and Subprocess Modules"
 sidebar_label: Automating Tasks with Python
 authors: [nayanika-mukherjee]
 tags: [automation, Python, OS module, Subprocess module, technology]
diff --git a/blog/building-and-deploying-progressive-web-apps.md b/blog/building-and-deploying-progressive-web-apps.md
index 954a17580..220792bc6 100644
--- a/blog/building-and-deploying-progressive-web-apps.md
+++ b/blog/building-and-deploying-progressive-web-apps.md
@@ -1,5 +1,5 @@
 ---
-title: 'Building and Deploying Progressive Web Apps'
+title: "Building and Deploying Progressive Web Apps"
 sidebar_label: Progressive Web Apps
 authors: [nayanika-mukherjee]
 tags: [progressive web apps, pwa, web development, technology]
@@ -30,6 +30,7 @@ Progressive Web Apps (PWAs) are web applications that provide a native app-like
 ### Step 3: Add a Web App Manifest
 
 - Create manifest.json: Add a web app manifest to define how your app appears on a user's device.
+
 ```json
 {
   "name": "My PWA",
@@ -56,47 +57,51 @@ Progressive Web Apps (PWAs) are web applications that provide a native app-like
 ### Step 4: Implement Service Workers
 
 - Register Service Worker: Add a service worker to cache assets and enable offline functionality.
+
 ```javascript
-if ('serviceWorker' in navigator) {
-  window.addEventListener('load', () => {
-    navigator.serviceWorker.register('/service-worker.js')
-      .then(registration => {
-        console.log('Service Worker registered with scope:', registration.scope);
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker
+      .register("/service-worker.js")
+      .then((registration) => {
+        console.log(
+          "Service Worker registered with scope:",
+          registration.scope,
+        );
       })
-      .catch(error => {
-        console.error('Service Worker registration failed:', error);
+      .catch((error) => {
+        console.error("Service Worker registration failed:", error);
       });
   });
 }
 ```
 
 - Create Service Worker: Write the logic for caching and fetching resources in `service-worker.js`.
+
 ```javascript
-const CACHE_NAME = 'my-pwa-cache-v1';
+const CACHE_NAME = "my-pwa-cache-v1";
 const urlsToCache = [
-  '/',
-  '/index.html',
-  '/styles.css',
-  '/app.js',
-  '/icon-192x192.png',
-  '/icon-512x512.png'
+  "/",
+  "/index.html",
+  "/styles.css",
+  "/app.js",
+  "/icon-192x192.png",
+  "/icon-512x512.png",
 ];
 
-self.addEventListener('install', event => {
+self.addEventListener("install", (event) => {
   event.waitUntil(
-    caches.open(CACHE_NAME)
-      .then(cache => {
-        return cache.addAll(urlsToCache);
-      })
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(urlsToCache);
+    }),
   );
 });
 
-self.addEventListener('fetch', event => {
+self.addEventListener("fetch", (event) => {
   event.respondWith(
-    caches.match(event.request)
-      .then(response => {
-        return response || fetch(event.request);
-      })
+    caches.match(event.request).then((response) => {
+      return response || fetch(event.request);
+    }),
   );
 });
 ```
@@ -129,7 +134,7 @@ self.addEventListener('fetch', event => {
 - Pinterest: Pinterest's PWA improved user engagement and performance, especially on mobile devices.
 - Forbes: Forbes' PWA provides a fast, app-like reading experience for users.
 
-## Future Trends in PWAs 
+## Future Trends in PWAs
 
 - Advancements in Web Capabilities: Ongoing improvements in web technologies will enhance PWA capabilities.
 - Increased Adoption: More businesses and developers are adopting PWAs for their versatility and performance benefits.
@@ -142,5 +147,5 @@ self.addEventListener('fetch', event => {
 - PWA.rocks: Collection of PWA examples and inspiration.
 
 ## Conclusion
-Progressive Web Apps offer a powerful way to build modern web applications that provide a native app-like experience. By following best practices and leveraging modern web technologies, developers can create high-performance, secure, and accessible PWAs. This documentation provides a comprehensive guide to building and deploying PWAs, ensuring you have the tools and knowledge to succeed.
 
+Progressive Web Apps offer a powerful way to build modern web applications that provide a native app-like experience. By following best practices and leveraging modern web technologies, developers can create high-performance, secure, and accessible PWAs. This documentation provides a comprehensive guide to building and deploying PWAs, ensuring you have the tools and knowledge to succeed.
diff --git a/blog/cloud-native-development with-microservices-and-kubernetes.md b/blog/cloud-native-development with-microservices-and-kubernetes.md
index 2f8811f96..8e72d3761 100644
--- a/blog/cloud-native-development with-microservices-and-kubernetes.md	
+++ b/blog/cloud-native-development with-microservices-and-kubernetes.md	
@@ -1,6 +1,6 @@
 ---
-title: 'Cloud-Native Development with Microservices and Kubernetes'
-slidebar_label: 'Cloud-Native Development with Microservices and Kubernetes'
+title: "Cloud-Native Development with Microservices and Kubernetes"
+slidebar_label: "Cloud-Native Development with Microservices and Kubernetes"
 authors: [nayanika-mukherjee]
 tags: [Cloud-Native, Microservices, Kubernetes, Istio, Linkerd]
 date: 2024-07-31
@@ -61,13 +61,14 @@ spec:
         app: my-microservice
     spec:
       containers:
-      - name: my-microservice
-        image: my-microservice-image:latest
-        ports:
-        - containerPort: 80
+        - name: my-microservice
+          image: my-microservice-image:latest
+          ports:
+            - containerPort: 80
 ```
 
 ## Service Meshes (Istio, Linkerd)
+
 Service meshes provide advanced networking features for microservices, such as traffic management, security, and observability.
 
 ### Istio:
@@ -97,7 +98,7 @@ Effective monitoring and management are crucial for maintaining the health and p
 global:
   scrape_interval: 15s
 scrape_configs:
-  - job_name: 'kubernetes'
+  - job_name: "kubernetes"
     kubernetes_sd_configs:
       - role: pod
     relabel_configs:
diff --git a/blog/composable-architecture.md b/blog/composable-architecture.md
index 066d3fbe0..83e57e972 100644
--- a/blog/composable-architecture.md
+++ b/blog/composable-architecture.md
@@ -1,8 +1,9 @@
 ---
-title: 'Composable Architecture: Building Modular and Scalable Applications'
+title: "Composable Architecture: Building Modular and Scalable Applications"
 sidebar_label: Composable Architecture
 authors: [nayanika-mukherjee]
-tags: [architecture, microservices, modularity, scalability, software development]
+tags:
+  [architecture, microservices, modularity, scalability, software development]
 date: 2024-08-01
 hide_table_of_contents: true
 ---
@@ -153,4 +154,4 @@ Composable architecture is an evolving field. Continuous learning, experimentati
 
 ## Conclusion
 
-Composable architecture offers a powerful approach to building modular, scalable applications. By adopting its principles and best practices, developers can create flexible, resilient systems that adapt to changing needs. 
\ No newline at end of file
+Composable architecture offers a powerful approach to building modular, scalable applications. By adopting its principles and best practices, developers can create flexible, resilient systems that adapt to changing needs.
diff --git a/blog/containerization-with-docker-and-kubernetes.md b/blog/containerization-with-docker-and-kubernetes.md
index a37d6d436..88c76c893 100644
--- a/blog/containerization-with-docker-and-kubernetes.md
+++ b/blog/containerization-with-docker-and-kubernetes.md
@@ -1,5 +1,5 @@
 ---
-title: 'Containerization with Docker and Kubernetes'
+title: "Containerization with Docker and Kubernetes"
 sidebar_label: Containerization Basics
 authors: [nayanika-mukherjee]
 tags: [containerization, docker, kubernetes, devops, ci/cd]
@@ -60,7 +60,7 @@ Docker Compose is a tool for defining and running multi-container Docker applica
 ### Example: Docker Compose for a Web Application and Database
 
 ```yaml
-version: '3'
+version: "3"
 services:
   web:
     image: myapp:latest
@@ -85,6 +85,7 @@ docker network create my_network
 ```
 
 ## Docker Volumes and Storage
+
 Docker volumes are used to persist data generated by and used by Docker containers.
 
 ### Example: Creating and Using a Docker Volume
@@ -120,10 +121,10 @@ spec:
         app: myapp
     spec:
       containers:
-      - name: myapp
-        image: myapp:latest
-        ports:
-        - containerPort: 3000
+        - name: myapp
+          image: myapp:latest
+          ports:
+            - containerPort: 3000
 ```
 
 ## Kubernetes Networking
@@ -213,18 +214,18 @@ kind: Role
 metadata:
   name: pod-reader
 rules:
-- apiGroups: [""]
-  resources: ["pods"]
-  verbs: ["get", "watch", "list"]
+  - apiGroups: [""]
+    resources: ["pods"]
+    verbs: ["get", "watch", "list"]
 ---
 apiVersion: rbac.authorization.k8s.io/v1
 kind: RoleBinding
 metadata:
   name: read-pods
 subjects:
-- kind: User
-  name: jane
-  apiGroup: rbac.authorization.k8s.io
+  - kind: User
+    name: jane
+    apiGroup: rbac.authorization.k8s.io
 roleRef:
   kind: Role
   name: pod-reader
@@ -278,4 +279,4 @@ Advanced topics in Docker and Kubernetes include service mesh (e.g., Istio), ser
 
 ## Conclusion
 
-Containerization with Docker and Kubernetes streamlines the development, deployment, and scaling of applications. By understanding the core concepts and leveraging best practices, you can build and manage robust containerized applications.
\ No newline at end of file
+Containerization with Docker and Kubernetes streamlines the development, deployment, and scaling of applications. By understanding the core concepts and leveraging best practices, you can build and manage robust containerized applications.
diff --git a/blog/debugging.md b/blog/debugging.md
index b31db1a82..4940f611a 100644
--- a/blog/debugging.md
+++ b/blog/debugging.md
@@ -7,7 +7,7 @@ description: Step-by-Step Guide Debugging Tests in Create React App
 draft: false
 ---
 
-Debugging tests in a React application can be challenging, but fear not! We've got you covered with this step-by-step guide to help you overcome the common hurdles and make your tests shine. 
+Debugging tests in a React application can be challenging, but fear not! We've got you covered with this step-by-step guide to help you overcome the common hurdles and make your tests shine.
 
 <!-- truncate -->
 
@@ -27,7 +27,7 @@ cd my-app
 Create a simple React component (e.g., a Button) in a separate file and write a test for it. For example:
 
 ```jsx title="src/Button.js"
-import React from 'react';
+import React from "react";
 
 const Button = () => {
   return <button>Click Me</button>;
@@ -37,13 +37,13 @@ export default Button;
 ```
 
 ```jsx title="src/Button.test.js"
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import Button from './Button';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Button from "./Button";
 
-test('renders the button', () => {
+test("renders the button", () => {
   render(<Button />);
-  const buttonElement = screen.getByText('Click Me');
+  const buttonElement = screen.getByText("Click Me");
   expect(buttonElement).toBeInTheDocument();
 });
 ```
@@ -73,10 +73,10 @@ Now, let's employ some debugging techniques to resolve the issue:
 Place `console.log` statements at different points in your test to check the values of variables or components. For example:
 
 ```jsx
-test('renders the button', () => {
+test("renders the button", () => {
   render(<Button />);
-  console.log(screen.getByRole('button').outerHTML);
-  const buttonElement = screen.getByText('Click Me');
+  console.log(screen.getByRole("button").outerHTML);
+  const buttonElement = screen.getByText("Click Me");
   console.log(buttonElement); // Check the button element in the console
   expect(buttonElement).toBeInTheDocument();
 });
@@ -87,10 +87,10 @@ test('renders the button', () => {
 You can use the `debugger` keyword to pause test execution at a specific point. Open your browser's developer tools to inspect variables and the call stack. For example:
 
 ```jsx
-test('renders the button', () => {
+test("renders the button", () => {
   render(<Button />);
   debugger; // Execution will pause here, and you can inspect the app and test code.
-  const buttonElement = screen.getByText('Click Me');
+  const buttonElement = screen.getByText("Click Me");
   expect(buttonElement).toBeInTheDocument();
 });
 ```
@@ -117,4 +117,4 @@ npm test
 
 **Step 9: Celebrate Success!**
 
-Congratulations! You've successfully debugged your test and conquered the Bug Monsters. Repeat these steps whenever you encounter testing issues in your React applications.
\ No newline at end of file
+Congratulations! You've successfully debugged your test and conquered the Bug Monsters. Repeat these steps whenever you encounter testing issues in your React applications.
diff --git a/blog/developing-cross-platform-apps.md b/blog/developing-cross-platform-apps.md
index 52490e994..6aa007da4 100644
--- a/blog/developing-cross-platform-apps.md
+++ b/blog/developing-cross-platform-apps.md
@@ -1,5 +1,5 @@
 ---
-title: 'Developing Cross-Platform Apps Using Flutter and Dart'
+title: "Developing Cross-Platform Apps Using Flutter and Dart"
 sidebar_label: Flutter and Dart Development
 authors: [nayanika-mukherjee]
 tags: [flutter, dart, cross-platform, mobile development, technology]
@@ -32,13 +32,15 @@ Dart is a client-optimized programming language for apps on multiple platforms.
 1. **Install Flutter:**
    ```bash
    flutter doctor
-```
+   ```
+
+````
 
 2. **Create a New Flutter Project:**
    ```bash
 flutter create my_app
 cd my_app
-```
+````
 
 ## Flutter Architecture and Components
 
@@ -51,6 +53,7 @@ Flutter's architecture is based on reactive programming. It uses a widget tree t
 ## UI Design in Flutter
 
 Flutter provides a wide array of widgets for building UIs. Example:
+
 ```dart
 import 'package:flutter/material.dart';
 
@@ -80,6 +83,7 @@ State management is crucial in Flutter. Popular approaches include:
 ## Working with APIs
 
 To make network requests in Flutter:
+
 ```dart
 import 'package:http/http.dart' as http;
 import 'dart:convert';
@@ -101,7 +105,8 @@ Flutter supports various database solutions:
 
 - SQLite: Using sqflite package.
 - Firebase: Using cloud_firestore package.
-Example using SQLite:
+  Example using SQLite:
+
 ```dart
 import 'package:sqflite/sqflite.dart';
 import 'package:path/path.dart';
@@ -122,6 +127,7 @@ void initDatabase() async {
 ## Animations and Advanced UI Techniques
 
 Flutter provides powerful animation capabilities:
+
 ```dart
 import 'package:flutter/material.dart';
 
@@ -161,6 +167,7 @@ class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with SingleTickerPr
   }
 }
 ```
+
 ## Testing and Debugging
 
 Testing in Flutter includes:
@@ -168,7 +175,8 @@ Testing in Flutter includes:
 - Unit Testing: Using flutter_test package.
 - Widget Testing: Ensures widgets render correctly.
 - Integration Testing: Tests the complete app.
-Example of a unit test:
+  Example of a unit test:
+
 ```dart
 import 'package:flutter_test/flutter_test.dart';
 
@@ -182,6 +190,7 @@ int addOne(int value) => value + 1;
 ```
 
 ## Deploying Flutter Applications
+
 Deploying to different platforms:
 
 - Android: `flutter build apk`
@@ -199,6 +208,7 @@ To optimize performance:
 ## Community and Resources
 
 Engage with the Flutter community:
+
 - Flutter Community
 - Stack Overflow
 - Medium Articles
@@ -206,10 +216,11 @@ Engage with the Flutter community:
 ## Case Studies and Real-World Examples
 
 Explore real-world applications built with Flutter:
+
 - Google Ads: High-performance app for managing ad campaigns.
 - Reflectly: Personal journaling app with rich UI and smooth animations.
 - Alibaba: Large-scale e-commerce app.
 
 ## Conclusion
 
-Flutter and Dart provide a powerful platform for developing cross-platform applications with a single codebase. This documentation covers the essential aspects of Flutter development, from setting up the environment to deploying applications and optimizing performance.
\ No newline at end of file
+Flutter and Dart provide a powerful platform for developing cross-platform applications with a single codebase. This documentation covers the essential aspects of Flutter development, from setting up the environment to deploying applications and optimizing performance.
diff --git a/blog/dockerizing-a-rust-application-with-multi-stage-builds/index.md b/blog/dockerizing-a-rust-application-with-multi-stage-builds/index.md
index 0c6b3f73a..819d2aa93 100644
--- a/blog/dockerizing-a-rust-application-with-multi-stage-builds/index.md
+++ b/blog/dockerizing-a-rust-application-with-multi-stage-builds/index.md
@@ -1,7 +1,7 @@
 ---
-title: 'Dockerizing a Rust application with Multi-Stage Builds'
+title: "Dockerizing a Rust application with Multi-Stage Builds"
 authors: [abhijith-m-s, ajay-dhangar]
-tags: 
+tags:
   - Rust
   - Docker
   - Microservice Architecture
@@ -52,10 +52,10 @@ Don’t worry 😙, you aren’t alone…
 Here, I am going to be talking specifically about building a lightweight image for your Rust Application. Will be releasing for other applications in the (not so distant 😅) future…
 
 > _According to AWS,_
-> 
+>
 > _Docker is a software platform that allows you to build, test, and deploy applications quickly. Docker packages software into standardized units called containers that have everything the software needs to run including libraries, system tools, code, and runtime. Using Docker, you can quickly deploy and scale applications into any environment and know your code will run._
-> 
-> _Chill_😄 _It’s basically solves the problem of “It RUNS of my MACHINE”. It allows you to run your application as a container on any OS having the Docker Daemon ( right now which is practically any OS )_
+>
+> *Chill*😄 _It’s basically solves the problem of “It RUNS of my MACHINE”. It allows you to run your application as a container on any OS having the Docker Daemon ( right now which is practically any OS )_
 
 Let’s talk about methods that can be used to make your image as light as possible:
 
@@ -72,7 +72,6 @@ That can make quite a lot of difference when dealing with an actual infrastructu
 
 <hr/>
 
-
 ## Create an Image with a Simple Dockerfile
 
 ### Prerequisites:
@@ -213,4 +212,4 @@ Stay tuned and Do make sure to check out my articles [@ams_132](https://medium.c
 
 So always remember _keeping your Dockerfile minimal will keep your Docker image maximum_.😉
 
-_Sayonara until next time…_![alt text](output1.png) ![alt text](output2.png) ![alt text](rust-docker.png)
\ No newline at end of file
+_Sayonara until next time…_![alt text](output1.png) ![alt text](output2.png) ![alt text](rust-docker.png)
diff --git a/blog/from-ftp-client-to-github-action.md b/blog/from-ftp-client-to-github-action.md
index aa32f693c..7f5fc45ef 100644
--- a/blog/from-ftp-client-to-github-action.md
+++ b/blog/from-ftp-client-to-github-action.md
@@ -1,5 +1,5 @@
 ---
-title: 'CI evolution: From FTP client to GitHub Action'
+title: "CI evolution: From FTP client to GitHub Action"
 author: Ajay Dhangar
 tags: [ftp, sftp, GitHub Action, ftp deploy]
 date: 2024-03-15 11:37:46
@@ -27,4 +27,4 @@ One of the most popular CI/CD solutions for web development is GitHub Actions. G
 
 ## Conclusion
 
-The evolution of remote file management has come a long way since the days of using FTP clients to manually upload files to remote servers. With the introduction of CI/CD pipelines and tools like GitHub Actions, web developers now have powerful, automated solutions for building and deploying web applications. These tools make it faster, easier, and more reliable to deploy websites, and they help ensure that your websites are always up-to-date and error-free. If you're still using an FTP client to deploy your websites, it's time to consider upgrading to a more modern, automated solution like GitHub Actions.
\ No newline at end of file
+The evolution of remote file management has come a long way since the days of using FTP clients to manually upload files to remote servers. With the introduction of CI/CD pipelines and tools like GitHub Actions, web developers now have powerful, automated solutions for building and deploying web applications. These tools make it faster, easier, and more reliable to deploy websites, and they help ensure that your websites are always up-to-date and error-free. If you're still using an FTP client to deploy your websites, it's time to consider upgrading to a more modern, automated solution like GitHub Actions.
diff --git a/blog/getting-started-with-mern/index.md b/blog/getting-started-with-mern/index.md
index dcc08e925..21aab8da1 100644
--- a/blog/getting-started-with-mern/index.md
+++ b/blog/getting-started-with-mern/index.md
@@ -1,7 +1,7 @@
 ---
-title: 'Getting started with MERN'
+title: "Getting started with MERN"
 authors: [abhijith-m-s, ajay-dhangar]
-tags: 
+tags:
   - MERN Stack
   - MongoDB
   - Express.js
@@ -53,20 +53,19 @@ Have you ever heard of the MERN stack? If you are a web developer or aspiring to
 
 In this blog post, we will cover the basics of the MERN stack and walk you through the process of building a simple MERN application. We will start by setting up a MongoDB Atlas cluster, building an API with Express.js, creating a React app, and connecting the frontend to the backend. We will also cover styling and making requests from the frontend.
 
-
 :::info
 If you prefer to jump straight to the code, you can find the GitHub repository for this project [here](https://github.com/AMS003010/SimpleMernApp) and star the repo to show your support. Feel free to fork the repository and experiment with the code.
 :::
 
 **What we’re covering**
 
- - Prerequisites
- - What a Web Framework is?
- - Configuring a _MongoDB Atlas_ Cluster
- - Building a API with _Express.js_
- - Creating a React App
- - Setting a Proxy from your Backend API server to the Frontend React App
- - Styling and making Requests from the frontend
+- Prerequisites
+- What a Web Framework is?
+- Configuring a _MongoDB Atlas_ Cluster
+- Building a API with _Express.js_
+- Creating a React App
+- Setting a Proxy from your Backend API server to the Frontend React App
+- Styling and making Requests from the frontend
 
 ## Prerequisites
 
@@ -108,14 +107,13 @@ In the context of the MERN stack, each technology plays a specific role:
 
 You might have heard of Unintelligible acronyms like MERN, MEVN, MEAN, LAMP, PERN etc. These are examples of some of the most popular web frameworks. Each of these frameworks has its own set of technologies and tools that work together to build web applications.
 
-| Framework | Technologies | Description |
-| :--- | :--- | :--- |
-| MERN | MongoDB, Express.js, React.js, Node.js | A full-stack development framework for building modern web applications. |
-| MEVN | MongoDB, Express.js, Vue.js, Node.js | A full-stack development framework similar to MERN, but with Vue.js instead of React.js. |
-| MEAN | MongoDB, Express.js, Angular, Node.js | A full-stack development framework with Angular instead of React.js or Vue.js. |
-| LAMP | Linux, Apache, MySQL, PHP | A traditional web development stack that uses Linux as the operating system, Apache as the web server, MySQL as the database, and PHP as the server-side scripting language. |
-| PERN | PostgreSQL, Express.js, React.js, Node.js | A full-stack development framework similar to MERN, but with PostgreSQL instead of MongoDB. |
-
+| Framework | Technologies                              | Description                                                                                                                                                                  |
+| :-------- | :---------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| MERN      | MongoDB, Express.js, React.js, Node.js    | A full-stack development framework for building modern web applications.                                                                                                     |
+| MEVN      | MongoDB, Express.js, Vue.js, Node.js      | A full-stack development framework similar to MERN, but with Vue.js instead of React.js.                                                                                     |
+| MEAN      | MongoDB, Express.js, Angular, Node.js     | A full-stack development framework with Angular instead of React.js or Vue.js.                                                                                               |
+| LAMP      | Linux, Apache, MySQL, PHP                 | A traditional web development stack that uses Linux as the operating system, Apache as the web server, MySQL as the database, and PHP as the server-side scripting language. |
+| PERN      | PostgreSQL, Express.js, React.js, Node.js | A full-stack development framework similar to MERN, but with PostgreSQL instead of MongoDB.                                                                                  |
 
 :::info
 **Fun fact:** HTMX has been making waves in the community due to its ability to be written in a hypertext format (that is what HTML is 😌) and being able to give you access to AJAX, CSS Transitions, WebSockets, and Server-Sent Events directly in HTML, using attributes.
@@ -149,24 +147,24 @@ To get started with MongoDB Atlas, follow these steps:
 11. **Connect to Your Cluster**: Use the connection string to connect to your MongoDB Atlas cluster from your application. You can use the MongoDB Node.js driver to connect to your cluster and perform database operations. Here is an example of how you can connect to your cluster using the Node.js driver:
 
     ```js title="app.js"
-    const { MongoClient } = require('mongodb');
+    const { MongoClient } = require("mongodb");
 
-    const uri = 'mongodb+srv://<username>:<password>@cluster0.tpgdder.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0';
+    const uri =
+      "mongodb+srv://<username>:<password>@cluster0.tpgdder.mongodb.net/?retryWrites=true&w=majority&appName=Cluster0";
 
     const client = new MongoClient(uri);
 
     async function run() {
-        try {
-            await client.connect();
-
-            const database = client.db('mydatabase');
-            const collection = database.collection('mycollection');
+      try {
+        await client.connect();
 
-            // Perform database operations here
+        const database = client.db("mydatabase");
+        const collection = database.collection("mycollection");
 
-        } finally {
-            await client.close();
-        }
+        // Perform database operations here
+      } finally {
+        await client.close();
+      }
     }
 
     run().catch(console.dir);
@@ -182,111 +180,112 @@ Let's get to building an API with Express.js. Follow these steps to create a sim
 
 1. **Create a Project Folder**: Create a new folder for your project and navigate to it in your terminal.
 
-    ```bash
-    mkdir SimpleMernApp
-    cd SimpleMernApp
-    ```
+   ```bash
+   mkdir SimpleMernApp
+   cd SimpleMernApp
+   ```
 
 2. **Initialize a New Node.js Project**: Run `npm init -y` to initialize a new Node.js project with default settings.
 
-    ```bash
-    npm init -y
-    ```
+   ```bash
+   npm init -y
+   ```
 
 3. **Install Express.js**: Run `npm install express` to install Express.js as a dependency for your project.
 
-    ```bash
-    npm install express
-    ```
+   ```bash
+   npm install express
+   ```
 
 4. **Create an `app.js` File**: Create a new file called `app.js` in your project folder and add the following code to create a simple Express.js server.
 
-    ```js title="app.js"
-    const express = require('express');
-    const app = express();
-    const PORT = process.env.PORT || 4000;
+   ```js title="app.js"
+   const express = require("express");
+   const app = express();
+   const PORT = process.env.PORT || 4000;
 
-    app.get('/', (req, res) => {
-        res.send('Hello, World!');
-    });
+   app.get("/", (req, res) => {
+     res.send("Hello, World!");
+   });
 
-    app.listen(PORT, () => {
-        console.log(`Server is running on http://localhost:${PORT}`);
-    });
-    ```
+   app.listen(PORT, () => {
+     console.log(`Server is running on http://localhost:${PORT}`);
+   });
+   ```
 
 5. **Start the Express.js Server**: Run `node app.js` to start the Express.js server.
 
-    ```bash
-    node app.js
-    ```
+   ```bash
+   node app.js
+   ```
 
 6. **Test the API Endpoint**: Open [http://localhost:4000/](http://localhost:4000/) in your browser to see the message "Hello, World!" displayed. This confirms that your Express.js server is running successfully.
 7. **Create Additional Routes**: You can create additional routes and API endpoints by adding more `app.get()` or `app.post()` methods to handle different requests.
 
-    ```js title="app.js"
-    app.get('/api/books', (req, res) => {
-        res.json({ message: 'Get all books' });
-    });
+   ```js title="app.js"
+   app.get("/api/books", (req, res) => {
+     res.json({ message: "Get all books" });
+   });
 
-    app.post('/api/books', (req, res) => {
-        res.json({ message: 'Add a new book' });
-    });
+   app.post("/api/books", (req, res) => {
+     res.json({ message: "Add a new book" });
+   });
 
-    app.put('/api/books/:id', (req, res) => {
-        res.json({ message: 'Update a book' });
-    });
+   app.put("/api/books/:id", (req, res) => {
+     res.json({ message: "Update a book" });
+   });
+
+   app.delete("/api/books/:id", (req, res) => {
+     res.json({ message: "Delete a book" });
+   });
+   ```
 
-    app.delete('/api/books/:id', (req, res) => {
-        res.json({ message: 'Delete a book' });
-    });
-    ```
 8. **Install Additional Dependencies**: You can install additional dependencies like `mongoose` for MongoDB integration, `cors` for enabling CORS, and `dotenv` for managing environment variables.
 
-    ```bash
-    npm install mongoose cors dotenv
-    ```
+   ```bash
+   npm install mongoose cors dotenv
+   ```
 
 9. **Create a `.env` File**: Create a new file called `.env` in your project folder and add your environment variables.
 
-    ```plaintext
-    PORT=4000
-    MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.tpgdder.mongodb.net/mydatabase
-    ```
+   ```plaintext
+   PORT=4000
+   MONGODB_URI=mongodb+srv://<username>:<password>@cluster0.tpgdder.mongodb.net/mydatabase
+   ```
 
 10. **Update the `app.js` File**: Update your `app.js` file to use the environment variables from the `.env` file.
 
     ```js title="app.js"
-    require('dotenv').config();
-    const express = require('express');
-    const mongoose = require('mongoose');
-    const cors = require('cors');
+    require("dotenv").config();
+    const express = require("express");
+    const mongoose = require("mongoose");
+    const cors = require("cors");
     const app = express();
     const PORT = process.env.PORT || 4000;
     const MONGODB_URI = process.env.MONGODB_URI;
 
     mongoose.connect(MONGODB_URI, {
-        useNewUrlParser: true,
-        useUnifiedTopology: true,
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
     });
 
     try {
-        mongoose.connection.on('connected', () => {
-            console.log('Connected to MongoDB');
-        });
+      mongoose.connection.on("connected", () => {
+        console.log("Connected to MongoDB");
+      });
     } catch (error) {
-        console.log('Error connecting to MongoDB:', error);
+      console.log("Error connecting to MongoDB:", error);
     }
 
     app.use(cors());
     app.use(express.json());
 
-    app.get('/', (req, res) => {
-        res.send('Hello, World!');
+    app.get("/", (req, res) => {
+      res.send("Hello, World!");
     });
 
     app.listen(PORT, () => {
-        console.log(`Server is running on http://localhost:${PORT}`);
+      console.log(`Server is running on http://localhost:${PORT}`);
     });
     ```
 
@@ -295,16 +294,17 @@ Let's get to building an API with Express.js. Follow these steps to create a sim
     ```bash
     mkdir models
     ```
+
 12. **Create a `Book` Model**: Create a new file called `Book.js` in the `models` folder and define your MongoDB model.
 
     ```js title="models/Book.js"
-    const mongoose = require('mongoose');
+    const mongoose = require("mongoose");
 
     const bookSchema = new mongoose.Schema({
-        name: { type: String, required: true },
+      name: { type: String, required: true },
     });
 
-    const Book = mongoose.model('Book', bookSchema);
+    const Book = mongoose.model("Book", bookSchema);
 
     module.exports = Book;
     ```
@@ -312,60 +312,61 @@ Let's get to building an API with Express.js. Follow these steps to create a sim
 13. **Update the `app.js` File**: Update your `app.js` file to use the `Book` model.
 
     ```js title="app.js"
-    const express = require('express');
-    const mongoose = require('mongoose');
-    const cors = require('cors');
-    const Book = require('./models/Book');
+    const express = require("express");
+    const mongoose = require("mongoose");
+    const cors = require("cors");
+    const Book = require("./models/Book");
     const app = express();
     const PORT = process.env.PORT || 4000;
     const MONGODB_URI = process.env.MONGODB_URI;
 
     mongoose.connect(MONGODB_URI, {
-        useNewUrlParser: true,
-        useUnifiedTopology: true,
+      useNewUrlParser: true,
+      useUnifiedTopology: true,
     });
 
     try {
-        mongoose.connection.on('connected', () => {
-            console.log('Connected to MongoDB');
-        });
+      mongoose.connection.on("connected", () => {
+        console.log("Connected to MongoDB");
+      });
     } catch (error) {
-        console.log('Error connecting to MongoDB:', error);
+      console.log("Error connecting to MongoDB:", error);
     }
 
     app.use(cors());
     app.use(express.json());
 
-    app.get('/', (req, res) => {
-        res.send('Hello, World!');
+    app.get("/", (req, res) => {
+      res.send("Hello, World!");
     });
 
-    app.get('/api/books', async (req, res) => {
-        try {
-            const books = await Book.find();
-            res.json(books);
-        } catch (error) {
-            res.status(500).json({ message: error.message });
-        }
+    app.get("/api/books", async (req, res) => {
+      try {
+        const books = await Book.find();
+        res.json(books);
+      } catch (error) {
+        res.status(500).json({ message: error.message });
+      }
     });
 
-    app.post('/api/books', async (req, res) => {
-        const book = new Book({
-            name: req.body.name,
-        });
-
-        try {
-            const newBook = await book.save();
-            res.status(201).json(newBook);
-        } catch (error) {
-            res.status(400).json({ message: error.message });
-        }
+    app.post("/api/books", async (req, res) => {
+      const book = new Book({
+        name: req.body.name,
+      });
+
+      try {
+        const newBook = await book.save();
+        res.status(201).json(newBook);
+      } catch (error) {
+        res.status(400).json({ message: error.message });
+      }
     });
 
     app.listen(PORT, () => {
-        console.log(`Server is running on http://localhost:${PORT}`);
+      console.log(`Server is running on http://localhost:${PORT}`);
     });
     ```
+
 14. **Test the API Endpoints**: Use Postman or a similar tool to test your API endpoints. You can send GET and POST requests to `/api/books` to get all books and add a new book, respectively. Make sure to check the response status codes and messages to ensure that your API is working correctly.
 15. **Create Additional Models and Routes**: You can create additional models and routes for your API by following the same steps as above. Make sure to define your models, create routes to handle different requests, and test your API endpoints to ensure they are working as expected.
 16. **Deploy Your API**: You can deploy your Express.js API to a cloud platform like Heroku, AWS, or Google Cloud Platform to make it accessible to the public. Make sure to configure your deployment settings, set up environment variables, and test your API in a production environment.
@@ -374,12 +375,12 @@ Let's get to building an API with Express.js. Follow these steps to create a sim
 
 **Top Free Hosting Platforms for Node.js**
 
-- [Heroku](https://www.heroku.com/) *(Free tier available)*
-- [Glitch](https://glitch.com/) *(Free tier available)*
-- [Vercel](https://vercel.com/) *(Free tier available)*
-- [Netlify](https://www.netlify.com/) *(Free tier available)*
-- [GitHub Pages](https://pages.github.com/) *(Free for static sites)*
-- [Render](https://render.com/) *(Free for static sites)*
+- [Heroku](https://www.heroku.com/) _(Free tier available)_
+- [Glitch](https://glitch.com/) _(Free tier available)_
+- [Vercel](https://vercel.com/) _(Free tier available)_
+- [Netlify](https://www.netlify.com/) _(Free tier available)_
+- [GitHub Pages](https://pages.github.com/) _(Free for static sites)_
+- [Render](https://render.com/) _(Free for static sites)_
 
 If you are new to Express.js, MongoDB, or Mongoose, I recommend checking out the official documentation for each technology to learn more about their features, capabilities, and best practices.
 
@@ -406,7 +407,6 @@ If you are new to Express.js, MongoDB, or Mongoose, I recommend checking out the
 
 Congratulations! You have successfully built an API with Express.js and connected it to a MongoDB database. You are now ready to create a frontend application using React.js.
 
-
 ## Creating a React App
 
 > React.js is a JavaScript library for building user interfaces and single-page applications. It is widely used in the industry due to its component-based architecture, virtual DOM, and declarative syntax.
@@ -415,89 +415,90 @@ Let's get started with creating a React app. Follow these steps to create a simp
 
 1. **Create a New React App**: Run `npx create-react-app frontend` to create a new React app named `frontend`.
 
-    ```bash
-    npx create-react-app frontend
-    ```
+   ```bash
+   npx create-react-app frontend
+   ```
 
 2. **Navigate to the React App**: Run `cd frontend` to navigate to the React app folder.
 
-    ```bash
-    cd frontend
-    ```
+   ```bash
+   cd frontend
+   ```
+
 3. **Start the React App**: Run `npm start` to start the React app in development mode.
 
-    ```bash
-    npm start
-    ```
+   ```bash
+   npm start
+   ```
 
 4. **Open the React App**: Open [http://localhost:3000/](http://localhost:3000/) in your browser to see the React app running.
 
-    <BrowserWindow>
-        <div style={{textAlign: 'center'}}>
-          <header style={{display:' flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontSize: 'calc(10px + 2vmin)'}}>
-            <img src='/img/docs/react/logo.svg' className="App-logo" alt="logo" />
-            <br/>
-            <p>
-              Edit src/App.js and save to reload.
-            </p> 
-            <a
-              style={{color: '#61dafb'}}
-              href="https://reactjs.org"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Learn React
-            </a>
-          </header>
-        </div>
-    </BrowserWindow>
+<BrowserWindow>
+    <div style={{textAlign: 'center'}}>
+      <header style={{display:' flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', fontSize: 'calc(10px + 2vmin)'}}>
+        <img src='/img/docs/react/logo.svg' className="App-logo" alt="logo" />
+        <br/>
+        <p>
+          Edit src/App.js and save to reload.
+        </p> 
+        <a
+          style={{color: '#61dafb'}}
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+      </header>
+    </div>
+</BrowserWindow>
 
 5. **Create Additional Components**: You can create additional components in the `src/components` folder to organize your code and reuse components across your app.
 
-    ```bash
-    mkdir src/components
-    ```
+   ```bash
+   mkdir src/components
+   ```
 
-7. Now, create a new file called `Home.js` in the `src/components` folder and add the following code to create a simple home component.
+6. Now, create a new file called `Home.js` in the `src/components` folder and add the following code to create a simple home component.
 
-    ```js title="src/components/Home.js"
-    import React from 'react';
+   ```js title="src/components/Home.js"
+   import React from "react";
 
-    const Home = () => {
-        return (
-            <div>
-                <h2>Welcome to the Home Page</h2>
-            </div>
-        );
-    };
+   const Home = () => {
+     return (
+       <div>
+         <h2>Welcome to the Home Page</h2>
+       </div>
+     );
+   };
 
-    export default Home;
-    ```
+   export default Home;
+   ```
 
-8. **Update the `App.js` File**: Update your `App.js` file to use the `Home` component.
-
-    ```js title="src/App.js"
-    import React from 'react';
-    import Home from './components/Home';
-    
-    function App() {
-        return (
-            <div>
-                <Home />
-            </div>
-        );
-    }
+7. **Update the `App.js` File**: Update your `App.js` file to use the `Home` component.
 
-    export default App;
-    ```
+   ```js title="src/App.js"
+   import React from "react";
+   import Home from "./components/Home";
+
+   function App() {
+     return (
+       <div>
+         <Home />
+       </div>
+     );
+   }
+
+   export default App;
+   ```
 
-9. Now, you can see the `Home` component displayed on browser window.
+8. Now, you can see the `Home` component displayed on browser window.
 
-    <BrowserWindow minHeight={200}>
-        <div>
-          <h2>Welcome to the Home Page</h2>
-        </div>
-    </BrowserWindow>
+<BrowserWindow minHeight={200}>
+    <div>
+      <h2>Welcome to the Home Page</h2>
+    </div>
+</BrowserWindow>
 
 ## Setting a Proxy from your Backend API server to the Frontend React App
 
@@ -507,104 +508,109 @@ To set up a proxy, follow these steps:
 
 1. **Update the `package.json` File**: Update the `package.json` file in your React app to include a proxy setting that points to your backend API server.
 
-    ```json title="frontend/package.json"
-    {
-        "name": "frontend",
-        "version": "0.1.0",
-        "private": true,
-        "proxy": "http://localhost:4000"
-    }
-    ```
+   ```json title="frontend/package.json"
+   {
+     "name": "frontend",
+     "version": "0.1.0",
+     "private": true,
+     "proxy": "http://localhost:4000"
+   }
+   ```
+
 2. **Restart the React App**: Run `npm start` to restart the React app with the new proxy setting.
 
-    ```bash
-    npm start
-    ```
+   ```bash
+   npm start
+   ```
+
 3. **Test the Proxy**: Make a request to your backend API server from your frontend React app using the proxy setting.
 
-    ```js title="src/components/Home.js"
-    import React, { useEffect } from 'react';
-
-    const Home = () => {
-        useEffect(() => {
-            fetch('/api/books')
-                .then(response => response.json())
-                .then(data => console.log(data))
-                .catch(error => console.error(error));
-        }, []);
-
-        return (
-            <div>
-                <h2>Welcome to the Home Page</h2>
-            </div>
-        );
-    };
-
-    export default Home;
-    ```
+   ```js title="src/components/Home.js"
+   import React, { useEffect } from "react";
+
+   const Home = () => {
+     useEffect(() => {
+       fetch("/api/books")
+         .then((response) => response.json())
+         .then((data) => console.log(data))
+         .catch((error) => console.error(error));
+     }, []);
+
+     return (
+       <div>
+         <h2>Welcome to the Home Page</h2>
+       </div>
+     );
+   };
+
+   export default Home;
+   ```
 
 4. **Check the Console**: Open the browser console to see the data fetched from your backend API server. This confirms that the proxy is working correctly.
 
-    ```plaintext
-    [ { id: 1, title: 'Book 1' }, { id: 2, title: 'Book 2' }, { id: 3, title: 'Book 3' } ]
-    ```
+   ```plaintext
+   [ { id: 1, title: 'Book 1' }, { id: 2, title: 'Book 2' }, { id: 3, title: 'Book 3' } ]
+   ```
+
 5. **Update the API Endpoints**: Update your API endpoints in the Express.js server to return data in JSON format.
 
-    ```js title="app.js"
-    app.get('/api/books', async (req, res) => {
-        try {
-            const books = [
-                { id: 1, title: 'Book 1' },
-                { id: 2, title: 'Book 2' },
-                { id: 3, title: 'Book 3' },
-            ];
-            res.json(books);
-        } catch (error) {
-            res.status(500).json({ message: error.message });
-        }
-    });
-    ```
+   ```js title="app.js"
+   app.get("/api/books", async (req, res) => {
+     try {
+       const books = [
+         { id: 1, title: "Book 1" },
+         { id: 2, title: "Book 2" },
+         { id: 3, title: "Book 3" },
+       ];
+       res.json(books);
+     } catch (error) {
+       res.status(500).json({ message: error.message });
+     }
+   });
+   ```
+
 6. **Test the API Endpoints**: Make a request to the `/api/books` endpoint from your frontend React app to fetch the data and display it on the browser window.
 
-    ```js title="src/components/Home.js"
-    import React, { useEffect, useState } from 'react';
-
-    const Home = () => {
-        const [books, setBooks] = useState([]);
-
-        useEffect(() => {
-            fetch('/api/books')
-                .then(response => response.json())
-                .then(data => setBooks(data))
-                .catch(error => console.error(error));
-        }, []);
-
-        return (
-            <div>
-                <h2>Welcome to the Home Page</h2>
-                <ul>
-                    {books.map(book => (
-                        <li key={book.id}>{book.title}</li>
-                    ))}
-                </ul>
-            </div>
-        );
-    };
-
-    export default Home;
-    ```
+   ```js title="src/components/Home.js"
+   import React, { useEffect, useState } from "react";
+
+   const Home = () => {
+     const [books, setBooks] = useState([]);
+
+     useEffect(() => {
+       fetch("/api/books")
+         .then((response) => response.json())
+         .then((data) => setBooks(data))
+         .catch((error) => console.error(error));
+     }, []);
+
+     return (
+       <div>
+         <h2>Welcome to the Home Page</h2>
+         <ul>
+           {books.map((book) => (
+             <li key={book.id}>{book.title}</li>
+           ))}
+         </ul>
+       </div>
+     );
+   };
+
+   export default Home;
+   ```
+
 7. **Check the Browser Window**: Open the browser window to see the list of books fetched from your backend API server and displayed on the screen.
 
-    <BrowserWindow minHeight={200}>
-        <div>
-          <h2>Welcome to the Home Page</h2>
-          <ul>
-            <li>Book 1</li>
-            <li>Book 2</li>
-            <li>Book 3</li>
-          </ul>
-        </div>
-    </BrowserWindow>
+<BrowserWindow minHeight={200}>
+    <div>
+      <h2>Welcome to the Home Page</h2>
+      <ul>
+        <li>Book 1</li>
+        <li>Book 2</li>
+        <li>Book 3</li>
+      </ul>
+    </div>
+</BrowserWindow>
 
 By setting up a proxy from your backend API server to your frontend React app, you can avoid issues related to cross-origin requests during development. This allows you to focus on building your application without worrying about the underlying infrastructure.
 
@@ -616,87 +622,89 @@ Here is a simple guide to styling and making requests from the frontend:
 
 1. **Create a `styles.css` File**: Create a new file called `styles.css` in the `src` folder of your React app to add custom styles.
 
-    ```css title="src/styles.css"
-    body {
-        font-family: 'Arial', sans-serif;
-        background-color: #f0f0f0;
-        margin: 0;
-        padding: 0;
-    }
+   ```css title="src/styles.css"
+   body {
+     font-family: "Arial", sans-serif;
+     background-color: #f0f0f0;
+     margin: 0;
+     padding: 0;
+   }
+
+   .container {
+     max-width: 800px;
+     margin: 0 auto;
+     padding: 20px;
+   }
+
+   .heading {
+     font-size: 24px;
+     font-weight: bold;
+     margin-bottom: 20px;
+   }
+
+   .list {
+     list-style-type: none;
+     padding: 0;
+   }
+
+   .item {
+     background-color: #fff;
+     border: 1px solid #ccc;
+     margin-bottom: 10px;
+     padding: 10px;
+   }
+   ```
 
-    .container {
-        max-width: 800px;
-        margin: 0 auto;
-        padding: 20px;
-    }
-
-    .heading {
-        font-size: 24px;
-        font-weight: bold;
-        margin-bottom: 20px;
-    }
-
-    .list {
-        list-style-type: none;
-        padding: 0;
-    }
-
-    .item {
-        background-color: #fff;
-        border: 1px solid #ccc;
-        margin-bottom: 10px;
-        padding: 10px;
-    }
-    ```
 2. **Update the `App.js` File**: Update your `App.js` file to include the custom styles.
 
-    ```js title="src/App.js"
-    import React, { useEffect, useState } from 'react';
-    import './styles.css';
-
-    const App = () => {
-        const [books, setBooks] = useState([]);
-
-        useEffect(() => {
-            fetch('/api/books')
-                .then(response => response.json())
-                .then(data => setBooks(data))
-                .catch(error => console.error(error));
-        }, []);
-
-        return (
-            <div className="container">
-                <h1 className="heading">Book List</h1>
-                <ul className="list">
-                    {books.map(book => (
-                        <li key={book.id} className="item">{book.title}</li>
-                    ))}
-                </ul>
-            </div>
-        );
-    };
-
-    export default App;
-    ```
+   ```js title="src/App.js"
+   import React, { useEffect, useState } from "react";
+   import "./styles.css";
+
+   const App = () => {
+     const [books, setBooks] = useState([]);
+
+     useEffect(() => {
+       fetch("/api/books")
+         .then((response) => response.json())
+         .then((data) => setBooks(data))
+         .catch((error) => console.error(error));
+     }, []);
+
+     return (
+       <div className="container">
+         <h1 className="heading">Book List</h1>
+         <ul className="list">
+           {books.map((book) => (
+             <li key={book.id} className="item">
+               {book.title}
+             </li>
+           ))}
+         </ul>
+       </div>
+     );
+   };
+
+   export default App;
+   ```
 
 3. **Check the Browser Window**: Open the browser window to see the list of books displayed with the custom styles applied.
 
-    <BrowserWindow minHeight={200}>
-        <div style={{maxWidth: '800px', margin: '0 auto', padding: '20px'}}>
-          <h1 style={{fontSize: '24px', fontWeight: 'bold', marginBottom: '20px'}}>Book List</h1>
-          <ul style={{listStyleType: 'none', padding: '0'}}>
-            <li style={{backgroundColor: '#fff', border: '1px solid #ccc', marginBottom: '10px', padding: '10px', color: '#000'}}>Book 1</li>
-            <li style={{backgroundColor: '#fff', border: '1px solid #ccc', marginBottom: '10px', padding: '10px', color: '#000'}}>Book 2</li>
-            <li style={{backgroundColor: '#fff', border: '1px solid #ccc', marginBottom: '10px', padding: '10px', color: '#000'}}>Book 3</li>
-          </ul>
-        </div>
-    </BrowserWindow>
+<BrowserWindow minHeight={200}>
+    <div style={{maxWidth: '800px', margin: '0 auto', padding: '20px'}}>
+      <h1 style={{fontSize: '24px', fontWeight: 'bold', marginBottom: '20px'}}>Book List</h1>
+      <ul style={{listStyleType: 'none', padding: '0'}}>
+        <li style={{backgroundColor: '#fff', border: '1px solid #ccc', marginBottom: '10px', padding: '10px', color: '#000'}}>Book 1</li>
+        <li style={{backgroundColor: '#fff', border: '1px solid #ccc', marginBottom: '10px', padding: '10px', color: '#000'}}>Book 2</li>
+        <li style={{backgroundColor: '#fff', border: '1px solid #ccc', marginBottom: '10px', padding: '10px', color: '#000'}}>Book 3</li>
+      </ul>
+    </div>
+</BrowserWindow>
 
 By adding custom styles to your React app and making requests to the API endpoints, you can create a visually appealing and interactive user interface. You can experiment with different styles, layouts, and components to enhance the user experience and make your app more engaging.
 
 Once you have styled your app and made requests to the API endpoints, you can continue to add more features, functionality, and components to build a full-fledged web application. You can also explore other libraries, frameworks, and tools to further enhance your app and take it to the next level.
 
-
 :::tip
 **Key Takeaways**
 
diff --git a/blog/getting-started-with-microservices/index.md b/blog/getting-started-with-microservices/index.md
index 43390f140..9e485427b 100644
--- a/blog/getting-started-with-microservices/index.md
+++ b/blog/getting-started-with-microservices/index.md
@@ -688,9 +688,9 @@ Then check the endpoints using postman to ensure that everything is working cool
 - There will be no changes in the eureka dashboard. It will be display same as before.
 - Let’s check the add expense endpoint from frontend.
 
-    ![img10](./images/image10.png)
+  ![img10](./images/image10.png)
 
-    ![img11](./images/image11.png)
+  ![img11](./images/image11.png)
 
 - In wrapping up our discussion on microservices, there’s one critical aspect left to address: the challenge of accessing microservices individually via their own port numbers. This approach becomes impractical as the number of microservices, or instances thereof increases. That’s precisely where an API gateway steps in.
 
@@ -783,7 +783,7 @@ Now let’s see how we can develop an Api-gateway for our application.
 - It matches the incoming request against the defined routes based on the configured predicates. In this case, it identifies that the request path starts with “/expense-service/”, indicating that it should be directed to the expense service.
 - Before forwarding the request to the expense service, the API gateway rewrites the URI to match the expected format of the microservice. Since the expense service expects requests without the “/expense-service” prefix, the API gateway removes this prefix from the URI.
 - Once the URI is properly formatted, the API gateway forwards the request to the identified microservice. In this example, it sends the request to the expense service, ensuring that it reaches the correct endpoint (“/expense/all”).
-  
+
   Let’s check this in post man.
 
   ![img13](./images/image13.png)
diff --git a/blog/getting-started-with-nlp.md b/blog/getting-started-with-nlp.md
index 2504a9782..b2019b59f 100644
--- a/blog/getting-started-with-nlp.md
+++ b/blog/getting-started-with-nlp.md
@@ -1,11 +1,10 @@
 ---
-title: 'Getting Started with Natural Language Processing (NLPs)'
+title: "Getting Started with Natural Language Processing (NLPs)"
 sidebar_label: NLP Basics
 authors: [nayanika-mukherjee]
 tags: [natural language processing, nlp, machine learning, technology]
 date: 2024-07-27
 hide_table_of_contents: true
-
 ---
 
 Natural Language Processing (NLP) is a field of artificial intelligence that focuses on the interaction between computers and humans through natural language. The goal of NLP is to enable computers to understand, interpret, and generate human language in a way that is valuable. This documentation provides an introduction to NLP, its basic concepts, techniques, tools, and practical applications.
@@ -32,6 +31,7 @@ Text preprocessing is a crucial step in NLP, involving cleaning and preparing te
 - **Stemming and Lemmatization:** Reducing words to their base forms.
 
 Example of text preprocessing in Python:
+
 ```python
 import nltk
 from nltk.corpus import stopwords
@@ -76,6 +76,7 @@ To build a simple NLP model, follow these steps:
 6. **Evaluation:** Evaluate the model's performance using appropriate metrics.
 
 Example of text classification using scikit-learn:
+
 ```python
 from sklearn.feature_extraction.text import CountVectorizer
 from sklearn.naive_bayes import MultinomialNB
@@ -140,10 +141,11 @@ Future trends in NLP include:
 - **Human-AI Collaboration:** Combining human expertise with AI for better results.
 
 :::tip
+
 - Start Simple: Begin with basic NLP tasks and gradually move to complex ones.
 - Experiment: Try different preprocessing techniques, models, and libraries.
 - Stay Updated: Follow the latest advancements in NLP through research papers and conferences.
-:::
+  :::
 
 ## Resources for Further Learning
 
diff --git a/blog/getting-started-with-serverless-architecture.md b/blog/getting-started-with-serverless-architecture.md
index 37f1b1286..7bf09adf0 100644
--- a/blog/getting-started-with-serverless-architecture.md
+++ b/blog/getting-started-with-serverless-architecture.md
@@ -1,5 +1,5 @@
 ---
-title: 'Getting Started with Serverless Architecture Using AWS Lambda'
+title: "Getting Started with Serverless Architecture Using AWS Lambda"
 sidebar_label: Serverless Architecture and AWS Lambda
 authors: [nayanika-mukherjee]
 tags: [serverless, AWS Lambda, cloud computing, Python, technology]
@@ -42,7 +42,9 @@ Before creating a Lambda function, you need an IAM role that Lambda assumes when
 ```bash
 aws iam create-role --role-name lambda-execution-role --assume-role-policy-document file://trust-policy.json
 ```
+
 `trust-policy.json`:
+
 ```json
 {
   "Version": "2012-10-17",
@@ -57,7 +59,9 @@ aws iam create-role --role-name lambda-execution-role --assume-role-policy-docum
   ]
 }
 ```
+
 Attach the necessary policies to the role:
+
 ```bash
 aws iam attach-role-policy --role-name lambda-execution-role --policy-arn arn:aws:iam::aws:policy/service-role/AWSLambdaBasicExecutionRole
 ```
@@ -65,9 +69,11 @@ aws iam attach-role-policy --role-name lambda-execution-role --policy-arn arn:aw
 ## Writing and Deploying Lambda Functions
 
 ### Basic Lambda Function
+
 Here is a simple Python function that returns a greeting.
 
 `lambda_function.py`:
+
 ```python
 def lambda_handler(event, context):
     return {
@@ -77,12 +83,15 @@ def lambda_handler(event, context):
 ```
 
 ### Creating and Deploying the Function
+
 - Create a ZIP file containing your code:
+
 ```bash
 zip function.zip lambda_function.py
 ```
 
 - Deploy the Lambda Function:
+
 ```bash
 aws lambda create-function --function-name HelloWorldFunction \
 --zip-file fileb://function.zip --handler lambda_function.lambda_handler \
@@ -98,34 +107,44 @@ Lambda functions have an execution model that includes:
 - Execution Duration: You can configure the timeout for your function (default is 3 seconds, maximum is 15 minutes).
 
 ## Managing Lambda Functions
+
 - Updating a Function
-To update the function code:
+  To update the function code:
+
 ```bash
 zip function.zip lambda_function.py
 aws lambda update-function-code --function-name HelloWorldFunction --zip-file fileb://function.zip
 ```
 
 - Monitoring and Logging
-AWS Lambda integrates with Amazon CloudWatch to provide monitoring and logging. You can view logs by navigating to the CloudWatch Logs in the AWS Management Console.
+  AWS Lambda integrates with Amazon CloudWatch to provide monitoring and logging. You can view logs by navigating to the CloudWatch Logs in the AWS Management Console.
 
 ## Advanced Topics
 
 ### Environment Variables
+
 You can use environment variables to pass configuration settings to your Lambda function.
+
 ```bash
 aws lambda update-function-configuration --function-name HelloWorldFunction \
 --environment "Variables={ENV_VAR1=value1,ENV_VAR2=value2}"
 ```
+
 ### Layers
+
 Lambda layers allow you to package libraries and other dependencies separately from your function code.
 
 - Create a layer:
+
 ```bash
 zip -r myLayer.zip python/
 aws lambda publish-layer-version --layer-name myLayer --zip-file fileb://myLayer.zip
 ```
+
 ### VPC Integration
+
 You can configure your Lambda function to access resources in a VPC.
+
 ```bash
 aws lambda update-function-configuration --function-name HelloWorldFunction \
 --vpc-config SubnetIds=subnet-abc123,SecurityGroupIds=sg-abc123
@@ -134,26 +153,34 @@ aws lambda update-function-configuration --function-name HelloWorldFunction \
 ## Performance and Scaling
 
 ### Cold Starts
+
 A cold start occurs when a new instance of the function is invoked after being idle. To mitigate cold starts:
 
 - Optimize initialization code.
 - Use Provisioned Concurrency for predictable performance.
 
 ### Concurrency Limits
+
 You can configure reserved concurrency to limit the number of concurrent executions:
+
 ```bash
 aws lambda put-function-concurrency --function-name HelloWorldFunction --reserved-concurrent-executions 10
 ```
+
 ## Testing and Debugging
 
 ### Local Testing
+
 Use the AWS SAM CLI to test Lambda functions locally:
+
 ```bash
 sam local invoke HelloWorldFunction -e event.json
 ```
 
 ### Debugging
+
 Utilize CloudWatch Logs to debug issues by adding log statements in your code:
+
 ```python
 import logging
 logger = logging.getLogger()
@@ -166,10 +193,13 @@ def lambda_handler(event, context):
         'body': 'Hello, World!'
     }
 ```
+
 ## Real-World Examples
 
 ### S3 Event Trigger
+
 Trigger a Lambda function when an object is uploaded to an S3 bucket:
+
 ```python
 import json
 
@@ -186,7 +216,9 @@ def lambda_handler(event, context):
 ```
 
 ### DynamoDB Stream
+
 Process DynamoDB stream events:
+
 ```python
 import json
 
diff --git a/blog/getting-started-with-vite/index.md b/blog/getting-started-with-vite/index.md
index 105461d91..bb8d8e6a1 100644
--- a/blog/getting-started-with-vite/index.md
+++ b/blog/getting-started-with-vite/index.md
@@ -134,4 +134,4 @@ To learn more about Vite, visit the official [Vite documentation](https://vitejs
 
 ## Conclusion
 
-In this blog post, we learned how to get started with React by creating a new app using Vite. We followed the steps to set up our development environment and build our first React application. We explored the advantages of using Vite for React development and discussed its features, benefits, and community support. We also learned about the project structure of a new React application created with Vite and how to build our first React application. We hope this blog post has provided you with valuable insights into using Vite for React development and has inspired you to explore the possibilities of building modern web applications with Vite and React.
\ No newline at end of file
+In this blog post, we learned how to get started with React by creating a new app using Vite. We followed the steps to set up our development environment and build our first React application. We explored the advantages of using Vite for React development and discussed its features, benefits, and community support. We also learned about the project structure of a new React application created with Vite and how to build our first React application. We hope this blog post has provided you with valuable insights into using Vite for React development and has inspired you to explore the possibilities of building modern web applications with Vite and React.
diff --git a/blog/git-best-practicies.md b/blog/git-best-practicies.md
index d5c4f6bca..7ed547f33 100644
--- a/blog/git-best-practicies.md
+++ b/blog/git-best-practicies.md
@@ -1,5 +1,5 @@
 ---
-title: ' Git Best Practices: Commit Often, Perfect Later, Publish Once'
+title: " Git Best Practices: Commit Often, Perfect Later, Publish Once"
 sidebar_label: Git Best Practicies
 authors: [ajay-dhangar]
 tags: [git, best practicies]
@@ -41,4 +41,4 @@ When you're collaborating with others, it's important to communicate effectively
 
 ## Conclusion
 
-Git is a powerful tool for managing the development of software projects, but it can be challenging to use effectively. By following best practices for using Git, such as committing often, structuring your commits, managing your branches, and collaborating with others, you can make your development process more efficient and less error-prone. By doing this, you can make it easier to understand the evolution of your codebase, to track down bugs, and to collaborate with others. Happy coding! 
\ No newline at end of file
+Git is a powerful tool for managing the development of software projects, but it can be challenging to use effectively. By following best practices for using Git, such as committing often, structuring your commits, managing your branches, and collaborating with others, you can make your development process more efficient and less error-prone. By doing this, you can make it easier to understand the evolution of your codebase, to track down bugs, and to collaborate with others. Happy coding!
diff --git a/blog/install-mongodb-linux.md b/blog/install-mongodb-linux.md
index 8f9db2710..4d856397a 100644
--- a/blog/install-mongodb-linux.md
+++ b/blog/install-mongodb-linux.md
@@ -77,4 +77,4 @@ sudo apt install -y mongosh
 
 ## Conclusion
 
-Congratulations! You have successfully installed MongoDB and `mongosh` on your Debian Bullseye system. You can now start using MongoDB to store and manage your data. If you have any questions or run into any issues, feel free to consult the official [MongoDB documentation](https://docs.mongodb.com/). Happy coding!
\ No newline at end of file
+Congratulations! You have successfully installed MongoDB and `mongosh` on your Debian Bullseye system. You can now start using MongoDB to store and manage your data. If you have any questions or run into any issues, feel free to consult the official [MongoDB documentation](https://docs.mongodb.com/). Happy coding!
diff --git a/blog/install-mongodb-windows.md b/blog/install-mongodb-windows.md
index e96633c5f..63f180752 100644
--- a/blog/install-mongodb-windows.md
+++ b/blog/install-mongodb-windows.md
@@ -60,4 +60,4 @@ mongosh
 
 This will open the mongosh shell, and you can start interacting with the MongoDB server using JavaScript-like syntax.
 
-Congratulations! You have successfully installed MongoDB and mongosh on your Windows system. You are now ready to start building powerful applications with MongoDB as your database. Happy coding!
\ No newline at end of file
+Congratulations! You have successfully installed MongoDB and mongosh on your Windows system. You are now ready to start building powerful applications with MongoDB as your database. Happy coding!
diff --git a/blog/introduction-to-the-Linux-development-and-cyber-security.md b/blog/introduction-to-the-Linux-development-and-cyber-security.md
index 3ddcab9cf..bb96ec9bf 100644
--- a/blog/introduction-to-the-Linux-development-and-cyber-security.md
+++ b/blog/introduction-to-the-Linux-development-and-cyber-security.md
@@ -1,12 +1,11 @@
-
 ---
-title: 'Comprehensive Documentation on Linux Development and Cybersecurity'
+title: "Comprehensive Documentation on Linux Development and Cybersecurity"
 sidebar_label: Linux development and cyber security
 authors: [pujan-sarkar]
-tags: [cyber security, Linux , internet, technology]
+tags: [cyber security, Linux, internet, technology]
 date: 2024-06-23
 hide_table_of_contents: true
---- 
+---
 
 Linux, renowned for its stability, security, and open-source nature, plays a pivotal role in modern computing environments, particularly in development and cybersecurity. This documentation explores how Linux facilitates software development processes and serves as a secure foundation for cybersecurity operations.
 
diff --git a/blog/introduction-to-web-assembly.md b/blog/introduction-to-web-assembly.md
index e3b16e424..b2985043c 100644
--- a/blog/introduction-to-web-assembly.md
+++ b/blog/introduction-to-web-assembly.md
@@ -1,5 +1,5 @@
 ---
-title: 'Introduction to WebAssembly: Enhancing Web Performance'
+title: "Introduction to WebAssembly: Enhancing Web Performance"
 sidebar_label: WebAssembly and Web Performance
 authors: [nayanika-mukherjee]
 tags: [webassembly, wasm, web performance, technology]
@@ -50,10 +50,12 @@ To compile your code to WebAssembly, follow these steps:
    ```bash
    emcc your_code.c -o your_code.wasm
    ```
-For Rust:
+   For Rust:
+
 ```
 rustc --target wasm32-unknown-unknown -O your_code.rs
 ```
+
 ## Interfacing with JavaScript
 
 WebAssembly can interact with JavaScript, enabling you to call Wasm functions from JavaScript and vice versa. Use the JavaScript WebAssembly API to load and instantiate Wasm modules.
diff --git a/blog/iot-integration-and-application-development.md b/blog/iot-integration-and-application-development.md
index ceb48121c..3f758c03b 100644
--- a/blog/iot-integration-and-application-development.md
+++ b/blog/iot-integration-and-application-development.md
@@ -1,6 +1,6 @@
 ---
-title: 'IoT (Internet of Things): Integration and Application Development'
-slidebar_label: 'IoT: Integration and Application Development'
+title: "IoT (Internet of Things): Integration and Application Development"
+slidebar_label: "IoT: Integration and Application Development"
 authors: [nayanika-mukherjee]
 tags: [IoT, Internet of Things, Sensors, Actuators, Cloud, Edge Computing]
 date: 2024-07-31
@@ -23,7 +23,7 @@ The Internet of Things (IoT) is a transformative technology that connects physic
   - **Network Layer**: Transmits data between devices and the cloud.
   - **Data Layer**: Manages data storage, processing, and analytics.
   - **Application Layer**: Interfaces where users interact with the IoT system.
-  
+
 ### Example: Simple IoT Architecture Diagram
 
 ```plaintext
@@ -41,18 +41,18 @@ The Internet of Things (IoT) is a transformative technology that connects physic
 ### Example: Basic MQTT Communication
 
 ```javascript
-const mqtt = require('mqtt');
-const client = mqtt.connect('mqtt://broker.hivemq.com');
+const mqtt = require("mqtt");
+const client = mqtt.connect("mqtt://broker.hivemq.com");
 
-client.on('connect', () => {
-  client.subscribe('sensor/data', (err) => {
+client.on("connect", () => {
+  client.subscribe("sensor/data", (err) => {
     if (!err) {
-      client.publish('sensor/data', 'Temperature: 22°C');
+      client.publish("sensor/data", "Temperature: 22°C");
     }
   });
 });
 
-client.on('message', (topic, message) => {
+client.on("message", (topic, message) => {
   console.log(message.toString());
 });
 ```
@@ -134,15 +134,16 @@ print(f'Encrypted data: {encrypted}')
 
 ```javascript
 // Example: Sending sensor data to a server
-const axios = require('axios');
+const axios = require("axios");
 const data = { temperature: 22, humidity: 55 };
 
-axios.post('https://example.com/api/sensor-data', data)
-  .then(response => {
-    console.log('Data sent successfully:', response.data);
+axios
+  .post("https://example.com/api/sensor-data", data)
+  .then((response) => {
+    console.log("Data sent successfully:", response.data);
   })
-  .catch(error => {
-    console.error('Error sending data:', error);
+  .catch((error) => {
+    console.error("Error sending data:", error);
   });
 ```
 
@@ -196,4 +197,4 @@ axios.post('https://example.com/api/sensor-data', data)
 
 ## Conclusion
 
-The IoT landscape is vast and ever-evolving, offering exciting opportunities to innovate across various industries. By understanding the architecture, communication protocols, and security challenges, you can develop robust IoT applications that can make a real-world impact.
\ No newline at end of file
+The IoT landscape is vast and ever-evolving, offering exciting opportunities to innovate across various industries. By understanding the architecture, communication protocols, and security challenges, you can develop robust IoT applications that can make a real-world impact.
diff --git a/blog/leveraging-gpt-models-for-microfrontends.md b/blog/leveraging-gpt-models-for-microfrontends.md
index 7d76a0e93..98890e998 100644
--- a/blog/leveraging-gpt-models-for-microfrontends.md
+++ b/blog/leveraging-gpt-models-for-microfrontends.md
@@ -1,5 +1,5 @@
 ---
-title: 'Leveraging GPT Model for Microfrontends: Architecting Front-End at Scale'
+title: "Leveraging GPT Model for Microfrontends: Architecting Front-End at Scale"
 sidebar_label: Microfrontends and GPT
 authors: [nayanika-mukherjee]
 tags: [microfrontends, GPT, front-end, architecture, technology]
@@ -114,4 +114,3 @@ For further learning and exploration, consider the following resources:
 ## Conclusion
 
 Leveraging GPT models for microfrontends offers a scalable, flexible approach to frontend development. By understanding the principles and best practices outlined in this documentation, developers can architect robust, maintainable front-end applications that meet the demands of modern web development.
-
diff --git a/blog/microservices-architecture.md b/blog/microservices-architecture.md
index ed4fde11a..6316d70e0 100644
--- a/blog/microservices-architecture.md
+++ b/blog/microservices-architecture.md
@@ -1,5 +1,5 @@
 ---
-title: 'Microservices Architecture: Design, Implementation, and Monitoring'
+title: "Microservices Architecture: Design, Implementation, and Monitoring"
 sidebar_label: Microservices Basics
 authors: [nayanika-mukherjee]
 tags: [microservices, architecture, spring boot, docker, kubernetes, monitoring]
@@ -42,6 +42,7 @@ public class ExampleController {
     }
 }
 ```
+
 ### Example: Dockerizing a Spring Boot Application
 
 ```dockerfile
@@ -57,6 +58,7 @@ COPY target/myapp.jar /app/myapp.jar
 # Run the application
 ENTRYPOINT ["java", "-jar", "myapp.jar"]
 ```
+
 ### Example: Deploying to Kubernetes
 
 ```yaml
@@ -75,10 +77,10 @@ spec:
         app: myapp
     spec:
       containers:
-      - name: myapp
-        image: myapp:latest
-        ports:
-        - containerPort: 8080
+        - name: myapp
+          image: myapp:latest
+          ports:
+            - containerPort: 8080
 ```
 
 ## Monitoring and Managing Microservices
@@ -137,6 +139,7 @@ spec:
 ## Real-World Examples and Performance Considerations
 
 ### Choosing the Right Tools and Frameworks
+
 Selecting the appropriate tools and frameworks depends on factors like:
 
 - **Language Preferences:** Spring Boot for Java, Flask for Python, Express for Node.js.
@@ -144,6 +147,7 @@ Selecting the appropriate tools and frameworks depends on factors like:
 - **Orchestration Requirements:** Kubernetes for managing containerized applications.
 
 ### Monitoring and Managing Microservices
+
 To ensure reliability and performance:
 
 - **Health Checks:** Regularly check the health of services using Kubernetes liveness and readiness probes.
@@ -151,16 +155,19 @@ To ensure reliability and performance:
 - **Circuit Breakers:** Implement fault tolerance with tools like Hystrix.
 
 ### Real-World Examples
+
 Several companies have successfully implemented microservices:
 
 - **Netflix:** Uses microservices to handle massive traffic and deliver streaming content.
 - **Amazon:** Migrated from a monolithic architecture to microservices to improve scalability and resilience.
 
 They have faced challenges such as:
+
 - **Complexity:** Managing numerous services can be complex.
 - **Data Consistency:** Ensuring consistency across distributed services.
 
 ### Performance Considerations
+
 Scaling microservices involves:
 
 - **Load Balancing:** Distributing traffic evenly across services using tools like NGINX or Kubernetes Ingress.
@@ -178,4 +185,4 @@ For further learning:
 
 - **Books:** "Building Microservices" by Sam Newman, "Microservices Patterns" by Chris Richardson.
 - **Online Courses:** Udemy, Coursera, and Pluralsight offer courses on microservices.
-- **Communities:** Join microservices communities and forums to connect with other practitioners.
\ No newline at end of file
+- **Communities:** Join microservices communities and forums to connect with other practitioners.
diff --git a/blog/piracy-preserving-ai.md b/blog/piracy-preserving-ai.md
index d2a4eb785..9956c4aaa 100644
--- a/blog/piracy-preserving-ai.md
+++ b/blog/piracy-preserving-ai.md
@@ -1,11 +1,11 @@
 ---
-title: 'Privacy-Preserving AI: Techniques and Applications'
+title: "Privacy-Preserving AI: Techniques and Applications"
 sidebar_label: Privacy-Preserving AI
 authors: [nayanika-mukherjee]
 tags: [AI, privacy, technology, machine learning]
 date: 2024-08-01
 hide_table_of_contents: true
---- 
+---
 
 Privacy-Preserving AI is an emerging field focused on protecting individuals' privacy while enabling the use of AI for data analysis and decision-making. This documentation covers various techniques and applications, exploring how AI can be developed and deployed without compromising data privacy.
 
@@ -14,72 +14,89 @@ Privacy-Preserving AI is an emerging field focused on protecting individuals' pr
 ## Differential Privacy
 
 ### Overview
+
 Differential privacy ensures that the output of an algorithm does not reveal whether any individual’s data was included in the input. It adds noise to the data, providing privacy guarantees while retaining the data's utility.
 
 ### Applications
+
 - **Data Analysis:** Used in statistical analysis to protect individual records.
 - **Machine Learning:** Applied to training data to prevent model inversion attacks.
 
 ## Homomorphic Encryption
 
 ### Overview
+
 Homomorphic encryption allows computations to be performed on encrypted data without decrypting it. The results, when decrypted, match the output of operations performed on the plaintext.
 
 ### Applications
+
 - **Secure Data Processing:** Enables computation on sensitive data without exposure.
 - **Cloud Computing:** Allows cloud providers to process encrypted data without accessing the raw data.
 
 ## Federated Learning
 
 ### Overview
+
 Federated learning trains machine learning models across multiple decentralized devices or servers while keeping the data localized. This approach enhances privacy by ensuring data never leaves its source.
 
 ### Applications
+
 - **Healthcare:** Aggregating patient data from multiple hospitals for model training.
 - **Mobile Devices:** Training models across users' devices without data centralization.
 
 ## Privacy-Preserving Data Sharing
 
 ### Overview
+
 Techniques for privacy-preserving data sharing include anonymization, pseudonymization, and secure multi-party computation. These methods allow data to be shared and analyzed without compromising individual privacy.
 
 ### Applications
+
 - **Collaborative Research:** Sharing data between institutions while maintaining privacy.
 - **Public Data Releases:** Releasing datasets for public use with privacy protections.
 
 ## AI Model Privacy Attacks and Defenses
 
 ### Overview
+
 AI models can be vulnerable to privacy attacks such as membership inference and model inversion. Defenses include differential privacy, secure enclaves, and adversarial training.
 
 ### Applications
+
 - **Model Security:** Enhancing the robustness of AI models against privacy attacks.
 - **Data Protection:** Ensuring sensitive information is not leaked through model outputs.
 
 ## Ethical Considerations in Privacy-Preserving AI
 
 ### Overview
+
 Ethical considerations involve balancing the benefits of AI with the need to protect individual privacy. This includes transparency, consent, and fairness in AI applications.
 
 ### Applications
+
 - **Regulatory Compliance:** Ensuring AI systems comply with privacy laws and regulations.
 - **Trust Building:** Enhancing user trust in AI systems by prioritizing privacy.
 
 ## Privacy-Preserving AI in Various Fields
 
 ### Healthcare
+
 Privacy-preserving techniques are critical in healthcare for protecting patient data while enabling research and personalized medicine.
 
 ### Finance
+
 In finance, these techniques allow for secure transactions and fraud detection without exposing sensitive financial data.
 
 ### Social Media
+
 Protecting user data on social media platforms while enabling personalized content and advertising.
 
 ## Tools and Frameworks for Privacy-Preserving AI
 
 ### Overview
+
 There are several tools and frameworks designed to facilitate privacy-preserving AI, including:
+
 - **PySyft:** A Python library for secure and private deep learning.
 - **TF Encrypted:** TensorFlow library for encrypted machine learning.
 - **OpenMined:** An open-source community focused on privacy-preserving AI.
@@ -87,43 +104,52 @@ There are several tools and frameworks designed to facilitate privacy-preserving
 ## Future Trends in Privacy-Preserving AI
 
 ### Overview
+
 Future trends include advancements in federated learning, improved encryption techniques, and the integration of privacy-preserving methods into AI development pipelines.
 
 ### Applications
+
 - **Smart Cities:** Enabling data-driven urban planning without compromising privacy.
 - **Personal Assistants:** Developing AI that respects user privacy while providing personalized services.
 
 ## Challenges and Limitations
 
 ### Overview
+
 Challenges include computational overhead, scalability issues, and the complexity of implementing privacy-preserving techniques.
 
 ### Applications
+
 - **Performance Trade-offs:** Balancing privacy with the efficiency of AI models.
 - **Complexity:** Navigating the technical complexities of advanced privacy techniques.
 
 ## Case Studies and Real-World Applications
 
 ### Healthcare
+
 Case studies on how privacy-preserving AI is being used to aggregate and analyze patient data while maintaining privacy.
 
 ### Finance
+
 Examples of privacy-preserving AI in fraud detection and secure financial transactions.
 
 ### Social Media
+
 How social media platforms implement privacy-preserving techniques to protect user data.
 
 ## Resources
 
 ### Books
+
 - "Privacy-Preserving Machine Learning" by J. Smith
 - "Introduction to Differential Privacy" by C. Dwork
 
 ### Online Courses
+
 - "Privacy in Machine Learning" by Coursera
 - "Federated Learning and Differential Privacy" by edX
 
 ### Research Papers
+
 - "The Algorithmic Foundations of Differential Privacy" by C. Dwork and A. Roth
 - "Federated Learning: Challenges, Methods, and Future Directions" by Q. Yang et al.
-
diff --git a/blog/react-js.md b/blog/react-js.md
index 163eed6eb..fc499227e 100644
--- a/blog/react-js.md
+++ b/blog/react-js.md
@@ -1,8 +1,8 @@
 ---
-title: 'React JS'
+title: "React JS"
 sidebar_label: React JS
 authors: [hitesh-gahanolia]
-tags: [javascript , framework , frontend , react , node ]
+tags: [javascript, framework, frontend, react, node]
 date: 2024-06-13 12:29
 hide_table_of_contents: true
 ---
@@ -14,6 +14,7 @@ React is a JavaScript library primarily used for building user interfaces in sin
 React offers various extensions for entire application architectural support, such as Flux and React Native, beyond mere UI.
 
 ## Why React?
+
 - Declarative Nature: React's declarative approach allows developers to describe the desired UI state, and React handles the rendering efficiently. This simplifies the development process by abstracting away the manual DOM manipulation.
 
 - Improved Performance: React uses Virtual DOM, a lightweight representation of the actual DOM. By comparing the previous and current states of this Virtual DOM, React determines the minimal set of DOM operations needed to update the UI, resulting in faster rendering and better performance.
@@ -26,54 +27,66 @@ React offers various extensions for entire application architectural support, su
 
 - Developer Tools: React is supported by dedicated developer tools like the React Developer Tools extension for Chrome. These tools facilitate debugging by providing insights into component hierarchies, state changes, and performance optimizations.
 
-
-
 ## ReactJS History
+
 When compared to other technologies on the market, React is a new technology. React was created by Jordan Walke, a software engineer at Facebook, in 2011.Initially implemented in Facebook's News Feed, its success quickly led to its adoption in Instagram, showcasing its power and versatility in building dynamic user interfaces.
 
 ## React Features
+
 Currently, ReactJS gaining quick popularity as the best JavaScript framework among web developers. It is playing an essential role in the front-end ecosystem. The important features of ReactJS are as following.
 
 ![image](https://static.javatpoint.com/tutorial/reactjs/images/reactjs-features.png)
 
- ### JSX
+### JSX
+
 JSX is a syntax extension for JavaScript that allows developers to write HTML-like code within JavaScript. This makes it easier to create and understand the structure of React components, as it closely resembles the final output in the browser. While not mandatory, using JSX is recommended in React development because it enhances readability and simplifies the creation of user interfaces.
 
 ### Components
+
 React components enable reusability and encapsulation by breaking down UIs into self-contained pieces with their own structure, style, and behavior. This promotes code reuse, as components can be used across different parts of the application, enhancing maintainability and reducing bugs, while ensuring a clean separation of concerns.
 
 ### One-way Data Binding
- One-way data binding is a pattern where data flows in a single direction, typically from the model to the view. This ensures that the state of an application is predictable and easier to manage. In the context of JavaScript frameworks, Flux and Redux are popular architectures that facilitate one-way data binding and state management.
+
+One-way data binding is a pattern where data flows in a single direction, typically from the model to the view. This ensures that the state of an application is predictable and easier to manage. In the context of JavaScript frameworks, Flux and Redux are popular architectures that facilitate one-way data binding and state management.
 
 #### Flux
+
 Flux is an architecture pattern created by Facebook for building client-side web applications. It emphasizes unidirectional data flow and is composed of four key components:
 
 ##### Action:
+
 - Actions are plain JavaScript objects or functions that contain the type of event and any associated data (payload). Actions are the only source of information for the store.
 
 ##### Dispatcher:
+
 - The dispatcher is a central hub that manages all the data flow in a Flux application. When an action is created, it is dispatched to all stores that have registered with the dispatcher. The dispatcher’s role is to handle these actions and ensure they reach the appropriate store.
 
 ##### Store:
+
 - Stores hold the application state and logic. They listen for actions from the dispatcher and update their state accordingly. Stores then emit a change event to notify the view layer to re-render. Each store manages a specific portion of the application's state.
 
 ##### View:
+
 - The view is the presentation layer, typically composed of React components. Views listen to changes from the stores and re-render themselves accordingly. They can also generate new actions based on user interactions and send them to the dispatcher.
 
 ### Virtual DOM
+
 A virtual DOM object is a representation of the original DOM object. It works like a one-way data binding. Whenever any modifications happen in the web application, the entire UI is re-rendered in virtual DOM representation. Then it checks the difference between the previous DOM representation and new DOM. Once it has done, the real DOM will update only the things that have actually changed. This makes the application faster, and there is no wastage of memory.
 
 ### Simplicity
+
 ReactJS uses JSX file which makes the application simple and to code as well as understand. We know that ReactJS is a component-based approach which makes the code reusable as your need. This makes it simple to use and learn.
 
 ### Performance
-ReactJS is known to be a great performer. This feature makes it much better than other frameworks out there today. The reason behind this is that it manages a virtual DOM. The DOM is a cross-platform and programming API which deals with HTML, XML or XHTML. The DOM exists entirely in memory. Due to this, when we create a component, we did not write directly to the DOM. Instead, we are writing virtual components that will turn into the DOM leading to smoother and faster performance.
 
+ReactJS is known to be a great performer. This feature makes it much better than other frameworks out there today. The reason behind this is that it manages a virtual DOM. The DOM is a cross-platform and programming API which deals with HTML, XML or XHTML. The DOM exists entirely in memory. Due to this, when we create a component, we did not write directly to the DOM. Instead, we are writing virtual components that will turn into the DOM leading to smoother and faster performance.
 
 ## React Ecosystem
+
 The React ecosystem is vast and diverse, encompassing a wide range of libraries and tools that enhance and extend the capabilities of React. These tools help in state management, routing, form handling, styling, and more, making React a robust framework for building complex and feature-rich applications. Here are some of the most popular libraries and tools commonly used with React:
 
 ### State Management
+
 #### Redux
 
 Description: Redux is a state management library that provides a predictable state container for JavaScript apps. It helps manage application state and enables powerful debugging capabilities through tools like the Redux DevTools.
@@ -93,12 +106,15 @@ Description: Recoil is a state management library for React developed by Faceboo
 Key Features: Atoms, selectors, asynchronous state management.
 
 ### Routing
+
 #### React Router
+
 Description: React Router is the most widely used routing library for React. It allows for dynamic routing in a web application, enabling navigation between different components and views.
 
 Key Features: Nested routes, dynamic routing, query parameters.
 
 ### Form Handling
+
 #### Formik
 
 Description: Formik is a library that simplifies form management in React applications. It helps with form validation, error handling, and form submission.
@@ -112,6 +128,7 @@ Description: React Hook Form is a performant, flexible library for managing form
 Key Features: Minimal re-renders, easy integration with UI libraries, built-in validation support.
 
 ### Styling
+
 #### Styled Components
 
 Description: Styled Components is a library for styling React applications using tagged template literals. It allows for writing actual CSS to style components, keeping styles scoped and maintaining a clean component structure.
@@ -125,6 +142,7 @@ Description: Emotion is a flexible and powerful library for writing CSS styles w
 Key Features: Performant styles, server-side rendering, powerful theming capabilities.
 
 ### Testing
+
 #### Jest
 
 Description: Jest is a JavaScript testing framework developed by Facebook, designed to ensure correctness of any JavaScript codebase. It works seamlessly with React, providing a simple and efficient way to test components and applications.
@@ -138,6 +156,7 @@ Description: React Testing Library is a testing utility that encourages testing
 Key Features: Lightweight, integrates with Jest, emphasizes testing UI from the user’s perspective.
 
 ### Build and Tooling
+
 #### Create React App
 
 Description: Create React App (CRA) is a CLI tool that sets up a new React project with a sensible default configuration. It handles configuration for tools like Webpack, Babel, ESLint, and more.
@@ -153,14 +172,19 @@ Key Features: Server-side rendering, static site generation, API routes, fast re
 The React ecosystem is continuously evolving, with new tools and libraries emerging to address various needs and challenges in modern web development. These tools help streamline the development process, enhance performance, and ensure maintainability of React applications.
 
 ## Pros and Cons of ReactJS
+
 Today, ReactJS is the highly used open-source JavaScript Library. It helps in creating impressive web apps that require minimal effort and coding. The main objective of ReactJS is to develop User Interfaces (UI) that improves the speed of the apps. There are important pros and cons of ReactJS given as following:
 
 Advantage of ReactJS
+
 ### Easy to Learn and Use
+
 ReactJS is much easier to learn and use. It comes with a good supply of documentation, tutorials, and training resources. Any developer who comes from a JavaScript background can easily understand and start creating web apps using React in a few days. It is the V(view part) in the MVC (Model-View-Controller) model, and referred to as ?one of the JavaScript frameworks.? It is not fully featured but has the advantage of open-source JavaScript User Interface(UI) library, which helps to execute the task in a better manner.
 
 ### Creating Dynamic Web Applications Becomes Easier
-#### JSX for Readability and Maintainability: 
+
+#### JSX for Readability and Maintainability:
+
 - JSX (JavaScript XML) allows developers to write HTML elements in JavaScript. This mixture of HTML and JavaScript makes the code more readable and maintainable. For example, instead of splitting code between HTML and JavaScript files, JSX enables developers to write them together, making it easier to understand and work with the code.
 
 ### Reusable Components
@@ -170,7 +194,9 @@ A ReactJS web application is made up of multiple components, and each component
 ### Performance Enhancement
 
 #### Virtual DOM vs. Real DOM:
--  React uses a virtual DOM to optimize updates and rendering. When the state of a component changes, React first updates the virtual DOM, a lightweight copy of the real DOM. It then compares this virtual DOM with a snapshot of the real DOM before applying only the necessary changes to the real DOM.Instead of re-rendering the entire DOM tree, React only updates the parts that have changed, which significantly boosts performance, especially in complex applications.
+
+- React uses a virtual DOM to optimize updates and rendering. When the state of a component changes, React first updates the virtual DOM, a lightweight copy of the real DOM. It then compares this virtual DOM with a snapshot of the real DOM before applying only the necessary changes to the real DOM.Instead of re-rendering the entire DOM tree, React only updates the parts that have changed, which significantly boosts performance, especially in complex applications.
+
 ### Known to be SEO Friendly
 
 Traditional JavaScript frameworks have an issue in dealing with SEO. The search engines generally having trouble in reading JavaScript-heavy applications. Many web developers have often complained about this problem. ReactJS overcomes this problem that helps developers to be easily navigated on various search engines. It is because React.js applications can run on the server, and the virtual DOM will be rendering and returning to the browser as a regular web page.
@@ -179,27 +205,32 @@ Traditional JavaScript frameworks have an issue in dealing with SEO. The search
 
 Today, ReactJS is choosing by most of the web developers. It is because it is offering a very rich JavaScript library. The JavaScript library provides more flexibility to the web developers to choose the way they want.
 
-
 ## Disadvantage of ReactJS
+
 ### The high pace of development
+
 #### Continuous Learning and Updates:
+
 - The React ecosystem evolves rapidly, with frequent updates and new releases. While these updates bring improvements and new features, they also mean developers need to constantly learn and adapt. For example, React Hooks, introduced in version 16.8, brought a significant change in how state and side effects are handled.
 
 Developers had to quickly learn and integrate this new feature, which can be challenging and time-consuming.
 
 ### Poor Documentation
+
 #### Rapid Updates Leading to Outdated Information:
- - While the official React documentation has improved, the rapid pace of updates can sometimes lead to outdated or incomplete information. For example, when new features like Concurrent Mode or Suspense are introduced, documentation might lag behind, making it difficult for developers to find accurate and up-to-date information.
 
- Developers might need to rely on community forums, blog posts, or other unofficial sources to fill in the gaps, which can be frustrating and time-consuming.
+- While the official React documentation has improved, the rapid pace of updates can sometimes lead to outdated or incomplete information. For example, when new features like Concurrent Mode or Suspense are introduced, documentation might lag behind, making it difficult for developers to find accurate and up-to-date information.
+
+Developers might need to rely on community forums, blog posts, or other unofficial sources to fill in the gaps, which can be frustrating and time-consuming.
 
 ### View Part
+
 ReactJS Covers only the UI Layers of the app and nothing else. So you still need to choose some other technologies to get a complete tooling set for development in the project.
 
 ### JSX as a barrier
 
 ReactJS uses JSX. It's a syntax extension that allows HTML with JavaScript mixed together. This approach has its own benefits, but some members of the development community consider JSX as a barrier, especially for new developers. Developers complain about its complexity in the learning curve.
 
+### Official Documentation
 
-### Official Documentation 
- - https://react.dev/
\ No newline at end of file
+- https://react.dev/
diff --git a/blog/reactjs-mongodb-chrome-extension.md b/blog/reactjs-mongodb-chrome-extension.md
index 6e928c991..e5195f681 100644
--- a/blog/reactjs-mongodb-chrome-extension.md
+++ b/blog/reactjs-mongodb-chrome-extension.md
@@ -1,5 +1,5 @@
 ---
-title: 'Chrome Extension Using MERN'
+title: "Chrome Extension Using MERN"
 sidebar_label: Chrome Extension Using MERN
 authors: [khushi-kalra]
 tags: [chrome extension, web dev, React, Express, MongoDB, Node, UI]
@@ -18,6 +18,7 @@ Here's a step-by-step guide based on my experience:
 ## Creating Frontend of the Extension
 
 ### Step 1: Create a React App
+
 First, you'll need to set up a basic React application. You can do this using Create React App:
 
 ```bash
@@ -26,25 +27,25 @@ cd my-chrome-extension
 ```
 
 ### Step 2: Change the Manifest JSON File
+
 The manifest.json file is crucial for Chrome extensions as it contains metadata about your extension. Update the manifest.json file in the public folder with the following content:
 
 ```json
 {
-  "manifest_version":3,
-  "name":"Chrome Extension", 
-  "version":"1.0.0",
-  "description":"My First Chrome Extension Using MERN", 
+  "manifest_version": 3,
+  "name": "Chrome Extension",
+  "version": "1.0.0",
+  "description": "My First Chrome Extension Using MERN",
   "action": {
     "default_popup": "index.html",
     "default_title": "Open"
   },
-  "permissions":[
-    "scripting"
-  ]
+  "permissions": ["scripting"]
 }
 ```
 
 ### Step 3: Add Height and Width
+
 To ensure your extension has the proper dimensions, update the index.css file in the src folder and add height and width:
 
 ```css
@@ -55,7 +56,9 @@ body {
 ```
 
 ### Check Point
-To check if you have followed all the steps properly. You can go try to run the extension in browser. 
+
+To check if you have followed all the steps properly. You can go try to run the extension in browser.
+
 1. Run `npm build` in the terminal.
 2. Open Chrome and go to chrome://extensions/.
 3. Enable "Developer mode" in the top right corner.
@@ -63,7 +66,9 @@ To check if you have followed all the steps properly. You can go try to run the
 5. See if can see the default React page in the height and width you gave.
 
 ### Step 4: Change Rendering to MemoryRouter
+
 This is the most crucial step. BrowserRouter is not supported for the Chrome Extensions, which is default in React applications. We are going to change that too MemoryRouter.
+
 1. Install React Router:
 
 ```bash
@@ -73,26 +78,28 @@ npm install react-router-dom
 2. Update index.js to include routes:
 
 ```jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
 
-import { MemoryRouter as Router } from 'react-router-dom';
+import { MemoryRouter as Router } from "react-router-dom";
 
 ReactDOM.render(
-    <React.StrictMode>
-        <Router>
-            <App />
-        </Router>
-    </React.StrictMode>,
-    document.querySelector('#root')
+  <React.StrictMode>
+    <Router>
+      <App />
+    </Router>
+  </React.StrictMode>,
+  document.querySelector("#root"),
 );
 ```
 
 ### Step 5: Adding Routing
+
 1. We will make a "Components" folder in src and a Home.jsx.
+
 ```jsx
-import React from 'react';
+import React from "react";
 
 function Home() {
   return (
@@ -107,10 +114,11 @@ export default Home;
 ```
 
 2. We will update our App.js as:
+
 ```js
-import React from 'react';
-import { Routes, Route } from 'react-router-dom';
-import Home from './Components/Home.jsx';
+import React from "react";
+import { Routes, Route } from "react-router-dom";
+import Home from "./Components/Home.jsx";
 
 function App() {
   return (
@@ -124,11 +132,13 @@ function App() {
 
 export default App;
 ```
+
 **Note: You can run "npm build" again and reload the build folder to see the changes made.**
- 
+
 ## Adding Backend to the Extension
 
 ### Step 1: Create a Backend Folder
+
 In your project root, create a new folder called backend:
 
 ```bash
@@ -137,24 +147,29 @@ cd backend
 ```
 
 ### Step 2: Add server.js
+
 Create a server.js file in the backend folder:
 
 ```javascript
-const express = require('express');
-const mongoose = require('mongoose');
-const cors = require('cors');
+const express = require("express");
+const mongoose = require("mongoose");
+const cors = require("cors");
 
 const app = express();
 
 app.use(cors());
 app.use(express.json());
 
-mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
-  .then(() => console.log('MongoDB connected'))
-  .catch(err => console.log(err));
+mongoose
+  .connect(process.env.MONGO_URI, {
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+  })
+  .then(() => console.log("MongoDB connected"))
+  .catch((err) => console.log(err));
 
-app.get('/', (req, res) => {
-  res.send('Hello, world!');
+app.get("/", (req, res) => {
+  res.send("Hello, world!");
 });
 
 const PORT = process.env.PORT || 5000;
@@ -162,6 +177,7 @@ app.listen(PORT, () => {
   console.log(`Server is running on port ${PORT}`);
 });
 ```
+
 ### Step 3: Add a .env file
 
 ```env
diff --git a/blog/sed-normalize-md-file-with-regex.md b/blog/sed-normalize-md-file-with-regex.md
index 88fd726cb..fbda35899 100644
--- a/blog/sed-normalize-md-file-with-regex.md
+++ b/blog/sed-normalize-md-file-with-regex.md
@@ -1,5 +1,5 @@
 ---
-title: 'Sed: Normalize markdown file with Regex'
+title: "Sed: Normalize markdown file with Regex"
 author: ajay-dhangar
 tags: [sed, regex, web clipper]
 date: 2024-03-15 14:37:46
@@ -15,7 +15,7 @@ One of the common issues I encounter is inconsistent formatting of the front mat
 
 ```markdown
 ---
-title: 'Sed: Normalize markdown file with Regex'
+title: "Sed: Normalize markdown file with Regex"
 author: Ajay Dhangar
 tags: [sed, regex, web clipper]
 date: 2020-11-26 21:13:28
@@ -41,4 +41,4 @@ Let's break down the regular expression:
 
 When I run this command on a markdown file, it removes the existing front matter and leaves me with just the content of the file. This is exactly what I want, as I can then manually add a consistent front matter to the file.
 
-I hope this example gives you an idea of how powerful regular expressions can be when used with command-line utilities like `sed`. With a little bit of practice, you can write regular expressions to perform complex text manipulations with ease. If you're interested in learning more about regular expressions, I highly recommend checking out the [RegexOne](https://regexone.com/) interactive tutorial, which is a great resource for beginners.
\ No newline at end of file
+I hope this example gives you an idea of how powerful regular expressions can be when used with command-line utilities like `sed`. With a little bit of practice, you can write regular expressions to perform complex text manipulations with ease. If you're interested in learning more about regular expressions, I highly recommend checking out the [RegexOne](https://regexone.com/) interactive tutorial, which is a great resource for beginners.
diff --git a/blog/sql.md b/blog/sql.md
index 6fb6da295..394cdbe29 100644
--- a/blog/sql.md
+++ b/blog/sql.md
@@ -1,8 +1,8 @@
 ---
-title: 'SQL'
+title: "SQL"
 sidebar_label: SQL - Structured Query Language
 authors: [hitesh-gahanolia]
-tags: [sql , databases , data]
+tags: [sql, databases, data]
 date: 2024-06-12 5:17
 hide_table_of_contents: true
 ---
@@ -16,13 +16,15 @@ Structured query language (SQL) is a programming language for storing and proces
 Structured query language (SQL) is a popular query language that is frequently used in all types of applications. Data analysts and developers learn and use SQL because it integrates well with different programming languages. For example, they can embed SQL queries with the Java programming language to build high-performing data processing applications with major SQL database systems such as Oracle or MS SQL Server. SQL is also fairly easy to learn as it uses common English keywords in its statements
 
 ### History
-SQL was invented in the 1970s based on the relational data model. It was initially known as the structured English query language (SEQUEL). The term was later shortened to SQL. Oracle, formerly known as Relational Software, became the first vendor to offer a commercial SQL relational database management system.
 
+SQL was invented in the 1970s based on the relational data model. It was initially known as the structured English query language (SEQUEL). The term was later shortened to SQL. Oracle, formerly known as Relational Software, became the first vendor to offer a commercial SQL relational database management system.
 
 ## Process of SQL
+
 When we are executing the command of SQL on any Relational database management system, then the system automatically finds the best routine to carry out our request, and the SQL engine determines how to interpret that particular command.
 
 Structured Query Language contains the following four components in its process:
+
 - Query Dispatcher
 - Optimization Engines
 - Classic Query Engine
@@ -32,16 +34,18 @@ A classic query engine allows data professionals and users to maintain non-SQL q
 ![image](https://static.javatpoint.com/sqlpages/images/sql-process.png)
 
 ## What are the components of a SQL system?
-Relational database management systems use structured query language (SQL) to store and manage data. The system stores multiple database tables that relate to each other. MS SQL Server, MySQL, or MS Access are examples of relational database management systems. The following are the components of such a system. 
+
+Relational database management systems use structured query language (SQL) to store and manage data. The system stores multiple database tables that relate to each other. MS SQL Server, MySQL, or MS Access are examples of relational database management systems. The following are the components of such a system.
 
 ### SQL table
+
 A SQL table is the basic element of a relational database. The SQL database table consists of rows and columns. Database engineers create relationships between multiple database tables to optimize data storage space.
 
-For example, the database engineer creates a SQL table for products in a store: 
+For example, the database engineer creates a SQL table for products in a store:
 ![image](https://media.geeksforgeeks.org/wp-content/uploads/20230405171604/Screenshot-from-2023-04-05-17-15-53.png)
 
-
 ### SQL statements
+
 SQL statements, or SQL queries, are valid instructions that relational database management systems understand. Software developers build SQL statements by using different SQL language elements. SQL language elements are components such as identifiers, variables, and search conditions that form a correct SQL statement.
 
 For example, the following SQL statement uses a SQL INSERT command to store Mattress Brand A, priced $499, into a table named Mattress_table, with column names brand_name and cost:
@@ -51,39 +55,51 @@ INSERT INTO Mattress_table (brand_name, cost)
 `VALUES(‘A’,’499’);`
 
 ### Stored procedures
-Stored procedures are a collection of one or more SQL statements stored in the relational database. Software developers use stored procedures to improve efficiency and performance. For example, they can create a stored procedure for updating sales tables instead of writing the same SQL statement in different applications. 
+
+Stored procedures are a collection of one or more SQL statements stored in the relational database. Software developers use stored procedures to improve efficiency and performance. For example, they can create a stored procedure for updating sales tables instead of writing the same SQL statement in different applications.
 
 ## What are SQL commands?
+
 Structured query language (SQL) commands are specific keywords or SQL statements that developers use to manipulate the data stored in a relational database. You can categorize SQL commands as follows.
 
-### Data definition language 
+### Data definition language
+
 Data definition language (DDL) refers to SQL commands that design the database structure. Database engineers use DDL to create and modify database objects based on the business requirements. For example, the database engineer uses the CREATE command to create database objects such as tables, views, and indexes.
 
 ### Data query language
-Data query language (DQL) consists of instructions for retrieving data stored in relational databases. Software applications use the SELECT command to filter and return specific results from a SQL table. 
+
+Data query language (DQL) consists of instructions for retrieving data stored in relational databases. Software applications use the SELECT command to filter and return specific results from a SQL table.
 
 ### Data manipulation language
+
 Data manipulation language (DML) statements write new information or modify existing records in a relational database. For example, an application uses the INSERT command to store a new record in the database.
 
 ### Data control language
-Database administrators use data control language (DCL) to manage or authorize database access for other users. For example, they can use the GRANT command to permit certain applications to manipulate one or more tables. 
+
+Database administrators use data control language (DCL) to manage or authorize database access for other users. For example, they can use the GRANT command to permit certain applications to manipulate one or more tables.
 
 ### Transaction control language
-The relational engine uses transaction control language (TCL) to automatically make database changes. For example, the database uses the ROLLBACK command to undo an erroneous transaction. 
+
+The relational engine uses transaction control language (TCL) to automatically make database changes. For example, the database uses the ROLLBACK command to undo an erroneous transaction.
 
 ## What is MySQL?
-MySQL is an open-source relational database management system offered by Oracle. Developers can download and use MySQL without paying a licensing fee. They can install MySQL on different operating systems or cloud servers. MySQL is a popular database system for web applications. 
+
+MySQL is an open-source relational database management system offered by Oracle. Developers can download and use MySQL without paying a licensing fee. They can install MySQL on different operating systems or cloud servers. MySQL is a popular database system for web applications.
 
 ### SQL vs. MySQL
+
 Structured query language (SQL) is a standard language for database creation and manipulation. MySQL is a relational database program that uses SQL queries. While SQL commands are defined by international standards, the MySQL software undergoes continual upgrades and improvements.
 
 ## What is NoSQL?
+
 NoSQL refers to non-relational databases that don't use tables to store data. Developers store information in different types of NoSQL databases, including graphs, documents, and key-values. NoSQL databases are popular for modern applications because they are horizontally scalable. Horizontal scaling means increasing the processing power by adding more computers that run NoSQL software.
 
 ### SQL vs. NoSQL
-Structured query language (SQL) provides a uniform data manipulation language, but NoSQL implementation is dependent on different technologies. Developers use SQL for transactional and analytical applications, whereas NoSQL is suitable for responsive, heavy-usage applications. 
+
+Structured query language (SQL) provides a uniform data manipulation language, but NoSQL implementation is dependent on different technologies. Developers use SQL for transactional and analytical applications, whereas NoSQL is suitable for responsive, heavy-usage applications.
 
 ## Advantages of SQL
+
 SQL provides various advantages which make it more popular in the field of data science. It is a perfect query language which allows data professionals and users to communicate with the database. Following are the best advantages or benefits of Structured Query Language:
 
 1. No programming needed
@@ -111,6 +127,7 @@ We can easily learn and understand the SQL language. We can also use this langua
 The SQL language also helps in making the multiple views of the database structure for the different database users.
 
 ## Disadvantages of SQL
+
 With the advantages of SQL, it also has some disadvantages, which are as follows:
 
 1. Cost
@@ -123,4 +140,4 @@ Another big disadvantage is that the interface of Structured query language is d
 
 3. Partial Database control
 
-The business rules are hidden. So, the data professionals and users who are using this query language cannot have full database control.
\ No newline at end of file
+The business rules are hidden. So, the data professionals and users who are using this query language cannot have full database control.
diff --git a/docs/javascript/data-types/primitive-types/string.md b/docs/javascript/data-types/primitive-types/string.md
index 1e231b99d..39e728e48 100644
--- a/docs/javascript/data-types/primitive-types/string.md
+++ b/docs/javascript/data-types/primitive-types/string.md
@@ -16,18 +16,17 @@ In JavaScript, a string is a sequence of characters enclosed within single or do
 You can create strings in JavaScript using single quotes (`'`), double quotes (`"`), or backticks (`` ` ``). Here are examples of each:
 
 ```javascript title="app.js"
-let singleQuoted = 'Hello, World!';
+let singleQuoted = "Hello, World!";
 let doubleQuoted = "Hello, World!";
 let backticks = `Hello, World!`;
 ```
 
-
 ### Single Quotes
 
 Strings enclosed within single quotes are the most common way to create strings in JavaScript. You can use single quotes to represent text data:
 
 ```javascript title="app.js"
-let singleQuoted = 'Hello, World!';
+let singleQuoted = "Hello, World!";
 
 console.log(singleQuoted); // Output: Hello, World!
 ```
@@ -61,11 +60,11 @@ Strings in JavaScript support various operations, such as concatenation, interpo
 String concatenation is the process of combining two or more strings into a single string. You can use the `+` operator or template literals for string concatenation:
 
 ```javascript title="app.js"
-let firstName = 'John';
-let lastName = 'Doe';
+let firstName = "John";
+let lastName = "Doe";
 
 // Using the + operator
-let fullName = firstName + ' ' + lastName;
+let fullName = firstName + " " + lastName;
 console.log(fullName); // Output: John Doe
 
 // Using template literals
@@ -78,7 +77,7 @@ console.log(fullNameTemplate); // Output: John Doe
 String interpolation allows you to embed expressions within a string. You can use template literals to interpolate variables and expressions directly within the string:
 
 ```javascript title="app.js"
-let name = 'Alice';
+let name = "Alice";
 let greeting = `Hello, ${name}!`;
 
 console.log(greeting); // Output: Hello, Alice!
@@ -111,20 +110,20 @@ JavaScript provides built-in methods for working with strings. Here are some com
 Here's an example using some of these string methods:
 
 ```javascript title="app.js"
-let text = 'Hello, World!';
+let text = "Hello, World!";
 let substring = text.substring(0, 5); // Extracts 'Hello'
 let uppercaseText = text.toUpperCase(); // Converts text to uppercase
-let replacedText = text.replace('World', 'JavaScript'); // Replaces 'World' with 'JavaScript'
-let splitText = text.split(','); // Splits text into an array ['Hello', ' World!']
-let includesText = text.includes('Hello'); // Checks if text contains 'Hello' (returns true)
-let indexOfText = text.indexOf('World'); // Returns the index of 'World' (returns 7)
+let replacedText = text.replace("World", "JavaScript"); // Replaces 'World' with 'JavaScript'
+let splitText = text.split(","); // Splits text into an array ['Hello', ' World!']
+let includesText = text.includes("Hello"); // Checks if text contains 'Hello' (returns true)
+let indexOfText = text.indexOf("World"); // Returns the index of 'World' (returns 7)
 let length = text.length; // Returns the length of the text (returns 13)
 let charAt = text.charAt(7); // Returns the character at index 7 (returns 'W')
-let startsWith = text.startsWith('Hello'); // Checks if text starts with 'Hello' (returns true)
-let endsWith = text.endsWith('World!'); // Checks if text ends with 'World!' (returns true)
+let startsWith = text.startsWith("Hello"); // Checks if text starts with 'Hello' (returns true)
+let endsWith = text.endsWith("World!"); // Checks if text ends with 'World!' (returns true)
 let repeatText = text.repeat(2); // Repeats text twice ('Hello, World!Hello, World!')
-let paddedText = text.padStart(20, '*'); // Pads text with '*' until it reaches a length of 20 from the start
-let trimmedText = '  Hello, World!  '.trim(); // Removes whitespace from the beginning and end of the text
+let paddedText = text.padStart(20, "*"); // Pads text with '*' until it reaches a length of 20 from the start
+let trimmedText = "  Hello, World!  ".trim(); // Removes whitespace from the beginning and end of the text
 
 console.log(substring);
 console.log(uppercaseText);
@@ -151,4 +150,4 @@ Strings are versatile and powerful data types in JavaScript, and mastering strin
 
 ## Conclusion
 
-Strings are a fundamental data type in JavaScript used to represent text data. You can create strings using single quotes, double quotes, or backticks. Strings support various operations such as concatenation, interpolation, and methods for manipulating string data.
\ No newline at end of file
+Strings are a fundamental data type in JavaScript used to represent text data. You can create strings using single quotes, double quotes, or backticks. Strings support various operations such as concatenation, interpolation, and methods for manipulating string data.
diff --git a/docs/javascript/data-types/primitive-types/undefined.md b/docs/javascript/data-types/primitive-types/undefined.md
index de8ff26e0..f48b0b90b 100644
--- a/docs/javascript/data-types/primitive-types/undefined.md
+++ b/docs/javascript/data-types/primitive-types/undefined.md
@@ -41,7 +41,7 @@ You can also use the `typeof` operator to check if a variable is `undefined`. Th
 
 ```javascript title="app.js"
 let undefinedValue;
-console.log(typeof undefinedValue === 'undefined'); // Output: true
+console.log(typeof undefinedValue === "undefined"); // Output: true
 ```
 
 ## Common Operations with Undefined Values
@@ -73,7 +73,7 @@ console.log(noReturnValue()); // Output: undefined
 You can delete properties from an object using the `delete` operator. After deleting a property, accessing the property will return `undefined`. Here's an example:
 
 ```javascript title="app.js"
-let person = { name: 'Alice', age: 30 };
+let person = { name: "Alice", age: 30 };
 
 delete person.age;
 
@@ -85,9 +85,9 @@ console.log(person.age); // Output: undefined
 You can check if an object has a property with an `undefined` value using the `in` operator. The `in` operator returns `true` if the property exists in the object, even if its value is `undefined`. Here's an example:
 
 ```javascript title="app.js"
-let person = { name: 'Alice', age: undefined };
+let person = { name: "Alice", age: undefined };
 
-console.log('age' in person); // Output: true
+console.log("age" in person); // Output: true
 ```
 
 ### Passing Undefined Arguments
@@ -99,7 +99,7 @@ function greet(name, message) {
   console.log(`Hello, ${name}! ${message}`);
 }
 
-greet('Alice'); // Output: Hello, Alice! undefined
+greet("Alice"); // Output: Hello, Alice! undefined
 ```
 
 In this example, the `greet` function is called with one argument (`'Alice'`) instead of two. The `message` parameter is assigned the value `undefined` because it is missing in the function call.
@@ -108,4 +108,4 @@ Understanding the `undefined` data type and how it behaves in JavaScript is esse
 
 ## Conclusion
 
-In this tutorial, you learned about the `undefined` data type in JavaScript, how to create `undefined` values, and common operations with `undefined` values. You also explored various scenarios where `undefined` values are used and how to handle them effectively in your JavaScript code.
\ No newline at end of file
+In this tutorial, you learned about the `undefined` data type in JavaScript, how to create `undefined` values, and common operations with `undefined` values. You also explored various scenarios where `undefined` values are used and how to handle them effectively in your JavaScript code.

From 7af1bcec8752482f869e605bc25fd5ef60f77912 Mon Sep 17 00:00:00 2001
From: "Restyled.io" <commits@restyled.io>
Date: Thu, 22 Aug 2024 08:29:18 +0000
Subject: [PATCH 2/2] Restyled by whitespace

---
 blog/getting-started-with-mern/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/blog/getting-started-with-mern/index.md b/blog/getting-started-with-mern/index.md
index 21aab8da1..37e4f2e8d 100644
--- a/blog/getting-started-with-mern/index.md
+++ b/blog/getting-started-with-mern/index.md
@@ -440,7 +440,7 @@ Let's get started with creating a React app. Follow these steps to create a simp
         <br/>
         <p>
           Edit src/App.js and save to reload.
-        </p> 
+        </p>
         <a
           style={{color: '#61dafb'}}
           href="https://reactjs.org"