<h3><strong>What are the API Architectural Styles?</strong></h3>
<p>The diagram below shows the common API architectural styles at a glance.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzqy8hg5qdi5yrljrvf6.png" alt="API"></p>
<p>🚀Let's take a closer look at the different architectural styles.</p>
<p>🤔How often do you know what architectural patterns are available?👀</p>
<h4>🚀<strong>REST:</strong></h4>
<p>Proposed in 2000, REST is the most commonly used style. It is often used between frontend clients and backend services. It is compliant with 6 architectural constraints. The common payload formats can be JSON, XML, HTML, or plain text.</p>
<p>The six architectural constraints are:</p>
<ul>
<li>Uniform interface</li>
<li>Stateless</li>
<li>Cacheable</li>
<li>Code on demand</li>
<li>Layered system</li>
<li>Client-server</li>
</ul>
<h4>🚀<strong>GraphQL:</strong></h4>
<p>GraphQL was proposed in 2015 by Meta. It provides a schema-based and type system suitable for complex systems where the relationships between entities are graph-like.</p>
<p>Let's understand it through the diagram. GraphQL can retrieve user and order information in one request, whereas in REST, it requires multiple calls to get the information for user and order.</p>
<p>GraphQL is not a replacement for REST. It can be built upon existing REST services.</p>
<h4>🚀<strong>WebSockets:</strong></h4>
<p>WebSockets are a protocol that provides full-duplex communication over TCP. Clients establish WebSockets to receive real-time updates from the backend services.</p>
<p>Unlike REST, which always pulls data, WebSockets enable pushing.</p>
<h4>🚀<strong>Webhooks:</strong></h4>
<p>Webhooks are usually used for third-party asynchronous API calls.</p>
<p>Let's understand how it works under the hood.</p>
<p>As shown in the diagram, we use Stripe and PayPal for payment channels and register a Webhook for payment results. When a third-party payment service is done, it notifies the payment service if the payment is successful or failed. Webhook calls are usually part of the system's state machine.</p>
<h4>🚀<strong>gRPC:</strong></h4>
<p>Released in 2016, gRPC is used for communications among microservices. The gRPC library handles encoding/decoding and data transmission.</p>
<h4>🚀SOAP:</h4>
<p>SOAP stands for Simple Object Access Protocol. Its payload is XML only, suitable for communications between internal systems.</p>


<p>Next.js is a React framework that provides two ways of rendering React components into HTML pages - <strong>server-side rendering(SSR)</strong> and <strong>static site generation(SSG).</strong></p>
<p>In SSR, React components are rendered into HTML pages on the server after a page request comes from the browser, while in SSG, React components are rendered into HTML pages at build time.</p>
<p>Regardless of which method is used, the rendered HTML pages are sent to the browser, making the app behave like a single-page application(SPA). This is in contrast to client-side rendering, where components are rendered in the browser. With Next.js, you can enjoy the benefits of both SSG and SSR, such as improved performance and better SEO. In addition to these features, Next.js also offers Serverless Functions, which we’ll be covering in this article.</p>
<p>We'll cover the Next.js page and dynamic routes and learn about Next.js API and dynamic API routes, all while running Serverless Functions on Vercel, a platform designed specifically for Next.js applications.</p>
<h3><strong>💎Introduction to Serverless Functions in Next.js</strong></h3>
<p>The term “serverless functions” is just a naming convention. AWS calls it Lambda Functions, but Vercel calls them their Serverless Functions, they are the same thing.</p>
<p>Serverless Functions are not directly a part of the Next.js API. However, Next.js provides developers with API routes that can be deployed as Vercel Serverless Functions and this is the crux of this article.</p>
<h3><strong>💎Pre-requisites</strong></h3>
<p>To benefit the most from this article, the following pre-requisites are required:</p>
<ul>
<li>Basic understanding of JavaScript</li>
<li>Basic understanding of Next.js</li>
<li>Basic understanding of API design</li>
<li>The latest Node version is installed on your system.</li>
</ul>
<h3><strong>💎Setting up our application</strong></h3>
<p>We will start by bootstrapping the Next.js application and using <code>create-next-app</code> to automatically set everything up. To create a Next.js project, run the following command:</p>
<pre><code>yarn create-next-app
</code></pre>
<p>After the installation is complete, start your app by running <code>yarn dev</code>. When you visit <a href="http://localhost:3000">localhost:3000</a> you will get:</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eiowl91ea6tq74725cnu.png" alt="Image"></p>
<h3><strong>💎Page routes in Next.js</strong></h3>
<p>In Next.js, each page is driven by a component. For example, an “About” page will have an <code>About</code> component. Each page component has a file inside a <code>page</code> folder, thus, the file name and location of each page component are tied up to the particular page’s route.</p>
<p>To elaborate on this, navigate your browser to <a href="http://localhost:3000/about">localhost:3000/about</a> and you will get:</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2sosevrruqdcm055nf9.png" alt="Image"></p>
<p>The <code>404</code> page shown above simply shows that Next.js cannot find a component in the <code>page</code> folder called <code>about</code>. This is because we have not created an <code>About</code> component in the <code>pages</code> folder.</p>
<p>To resolve this, create an <code>about.js</code> file inside the <code>pages</code> directory and add the following code:</p>
<pre><code>const About = () => {
  return (
    &#x3C;div>
      &#x3C;h1>Hello World!&#x3C;/h1>
    &#x3C;/div>
  );
};
export default About;
</code></pre>
<p>Now, revisit to <a href="http://localhost:3000/about">localhost:3000/about</a> and you get:</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78artdnipioinba1bnln.png" alt="Image"></p>
<p>When we created the <code>About</code> component in the <code>pages</code> folder, Next.js automatically created a route to server the <code>About</code> component. Thus, the route name is tied to the filename.</p>
<h3><strong>💎Dynamic routes in Next.js</strong></h3>
<p>Next.js pages support <a href="https://nextjs.org/docs/routing/dynamic-routes">dynamic routes</a>. This is useful because complex applications require more than just defining routes by using predefined paths.</p>
<p>In Next.js, you can add brackets to a page component name, <code>[param.js]</code> to create a dynamic route for example. The page can be accessed via its dynamic route: <code>pages/users/[param].js</code>. Here, <code>[param]</code> is the page’s id, slug, pretty URLs, etc. Any route like <code>/users/1</code> or <code>/users/abcdef</code> can be matched.</p>
<p>Next.js will send the matched path parameter as a query parameter to the page and if there are other query parameters, Next.js will link the matched path parameter with them.</p>
<p>To elaborate on this, the matched route <code>/users/abcdef</code> of dynamic route <code>pages/users/[param].js</code>, will have the query object:</p>
<pre><code>{
        "param":"abcdef"
}
</code></pre>
<p>Similarly, the matched route <code>/users/abcdef?foo=bar</code> of a dynamic route, <code>pages/users[param].js</code>, will have the following query object:</p>
<pre><code>{
	"foo":"bar",
	"param":"abcdef"
}
</code></pre>
<p>In your application, create a <code>user</code> folder, and inside it create a component named <code>[username].js</code>. Add the following code:</p>
<pre><code>import { useRouter } from 'next/router';
const User = () => {
  const router = useRouter();
  const username = router.query['username'];
  return (
    &#x3C;div>
      &#x3C;h1>Hello! Welcome {username} &#x3C;/h1>
    &#x3C;/div>
  );
};
export default User;
</code></pre>
<p>Now, when you visit <a href="http://localhost:3000/users/ayushsoni1010">http://localhost:3000/users/ayushsoni1010</a>, you get the display content would be <code>Hello! Welcome ayushsoni1010</code>.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzab2gmroc2o9cj5vvhm.png" alt="Image"></p>
<p>From the above demonstration, you see that Next.js matched <code>/users/ayushsoni1010</code> with the dynamic route <code>pages/users/[username].js</code>. Thus whatever <code>username</code> is passed in the route will be displayed on the page. You can try out different usernames.</p>
<p>In addition to it, creating and serving pages with the page routes, Next.js can create APIs with the API routes. Based on our knowledge gained so far, let’s learn about Next.js API routes in the next section.</p>
<h3><strong>💎 API Routing with Next.js Serverless Functions</strong></h3>
<p><a href="https://nextjs.org/blog/next-9">API routes were introduced in Next.js v9</a>. They enable us to build backend application endpoints, leveraging hot reloading, and a unified build pipeline in the process.</p>
<p>What this means is that Next>v9 encapsulates both the frontend and backend. We can rapidly develop full-stack React and Node.js applications that scale effortlessly.</p>
<p>While the page routes serve Next.js pages as web pages, Next.js API routes are treated as an endpoint. The API routes live inside the <code>/pages/api</code> folder and Next.js maps any file inside the folder to <code>/api/*</code> as an endpoint.</p>
<p>This feature is very interesting because it enables Next.js to render data on the frontend that is sorted in the Next.js app or render data that is fetched using Next.js API routes.</p>
<p>By bootstrapping your application with <code>creat-next-app</code>, Next.js automatically creates an example API route, the <code>/pages/api/hello.js</code> file, for you. Inside <code>/pages/api/hello.js</code>, Next.js creates and exports a function named <code>handler</code> that returns a JSON object.</p>
<p>You can access this endpoint via the browser by navigating to <a href="http://localhost:3000/api/hello">http://localhost:3000/api/hello</a> and the following JSON is returned:</p>
<pre><code>{
	"name": "John Doe"
}
</code></pre>
<h3><strong>💎The request handler function</strong></h3>
<p>As seen above, to create a Next.js API route, you need to export a request handler function as default. The request handler function receives two parameters:</p>
<ul>
<li><code>req</code>: an object that is an instance of <code>http.IncomingMessage</code>, and some <a href="https://nextjs.org/docs/api-routes/request-helpers">prebuilt middlewares</a>.</li>
<li><code>res</code>: an object that is an instance of <code>http.ServerResponse</code>, and some <a href="https://nextjs.org/docs/api-routes/response-helpers">helper functions</a>.</li>
</ul>
<p>To build an API with the API route, create a folder called <code>data</code> in the root directory. Create a <code>post.json</code> file inside the data folder with the following code:</p>
<pre><code>[
  {
    id: 1,
    title: 'I am title 1',
    body: 'Hello from post 1',
  },
  {
    id: 2,
    title: 'I am title 2',
    body: 'Hello from post 2',
  },
  {
    id: 3,
    title: 'I am title 3',
    body: 'Hello from post 3',
  },
  {
    id: 4,
    title: 'I am title 4',
    body: 'Hello from post 4',
  },
  {
    id: 5,
    title: 'I am title 5',
    body: 'Hello from post 5',
  },
];
</code></pre>
<p>Now, in the <code>pages/api</code> folder, create a new file called posts.js with the following code:</p>
<pre><code>// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import posts from '../../data/posts.json';
export default function handler(req, res) {
  res.status(200).json(posts);
}
</code></pre>
<p>In the API route above, the handler function imports the JSON data posts and returns them as a response to a <code>GET</code> request. When you query for this data by visiting <a href="http://localhost:3000/api/posts">http://localhost:3000/api/posts</a> from the browser, you get:</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13p5l3prqj9c4rbwoef0.png" alt="Image"></p>
<p>You can use the <code>request.method</code> object as seen below to handle other HTTP requests:</p>
<pre><code>export default (req, res) => {
  switch (req.method) {
    case 'GET':
      //...
      break;
    case 'POST':
      //...
      break;
    case 'PUT':
      //...
      break;
    case 'DELETE':
      //...
      break;
    default: // Method not allowed
      res.status(405).end();
      break;
  }
};
</code></pre>
<h3><strong>💎Dynamic API routes</strong></h3>
<p>Like page routes, Next.js API routes support dynamic routes and dynamic API routes follows the same file naming conventions and rules as page routes.</p>
<p>To elaborate more on this, create a <code>posts</code> folder inside the <code>pages/api</code> folder. Create a file named <code>[postid].js</code> inside the <code>posts</code> folder and paste the following code to it:</p>
<pre><code>// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import posts from '../../../data/posts.json';
export default function handler(req, res) {
  const { postid } = req.query;
  const post = posts.find((post) => post.id === parseInt(postid));
  res.status(200).json(post);
}
</code></pre>
<p>In the above code, Next.js automatically matched the <code>/posts/2</code> with the dynamic route <code>pages/api/posts/[postid].js</code>. Whichever post <code>id</code> is passed to the route <code>/posts/[postid]</code>: <code>/post/2</code>, <code>/post/3</code>, <code>/post/4</code>, etc. will be available in the <code>req.query</code> object.</p>
<p>The request handler function above retrieves the passed post <code>id</code> from the <code>req.query</code> object, finds the post in the <code>posts</code> array, and sends it to the client.</p>
<p>So to get the post with an <code>id</code> of <code>2</code>, navigate your browser to <a href="http://localhost:3000/api/posts/2"><code>http://localhost:3000/api/posts/2</code></a>. You will get:</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d205qnr9xad9hf5kqe83.png" alt="Image"></p>
<h3>💎Advantages of API routes</h3>
<p>Next.js API routes are deployed as Serverless Functions in Vercel. This means they can be deployed to many regions across the world to improve latency and availability.</p>
<p>Also, as Serverless Functions, they are cost-effective and enable you to run your code on demand. This removes the need to manage infrastructure, provision servers, or upgrade hardware.</p>
<p>Another benefit of API routes is that they scale very well. Finally, they do not specify CORS by default because they are <code>same-origin</code>, however, you can customize this behavior by using the <a href="https://github.com/vercel/next.js/blob/canary/examples/api-routes-cors/pages/api/cors.ts">CORS request helper</a>.</p>
<h3>💎Over to you</h3>
<p>Which APIs have you built with Next.js API routes?</p>
<h3>💎Conclusion</h3>
<p>In this article, we learned about an interesting and powerful Next.js feature — API routes. We began by learning about the Next.js page route and delved into API routes. We also learned how to build an API using Next API routes, deployed as Vercel’s Serverless Functions.</p>
<p>I do hope that at the end of this article, you can build APIs using Next.js APIs Route.</p>
<p> 
 </p>
<hr>
<p> 
 </p>
<p>That's all for today.</p>


<h3>💡<strong>Introduction</strong></h3>
<p>Error messages are a common part of our online experience. Whenever a server is down, we lose an internet connection, or we forget to fill out the information on a form, we receive an error message. However, the classic "Something went wrong" message is not very informative. What exactly went wrong?</p>
<p>It's important to understand what happened and how to fix it. Therefore, in chaos engineering, error messages should be more meaningful and provide clear instructions on how to resolve the issue.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdok9fr0r0k0te4t3sax.png" alt="Image"></p>
<h3>💡<strong>What makes a bad error message?</strong></h3>
<p>Error messages are part of our daily lives online. They inform us when something goes wrong, and help us understand what happened and how to fix it. However, not all error messages are created equal. A bad error message can leave us frustrated, confused, and unable to resolve the issue at hand.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/giniabj0z2z0zwykbvy0.png" alt="Image"></p>
<h4>💡Here are some common characteristics:</h4>
<ul>
<li><strong>Uninformative</strong>: Error messages that simply state "Something went wrong" or "Error 404" without any further explanation or context are not helpful. They don't tell us what went wrong or how to fix it.</li>
<li><strong>Technical jargon</strong>: Error messages that are full of technical terms or jargon that the user may not be familiar with can be intimidating and confusing. Users shouldn't need a degree in computer science to understand what went wrong.</li>
<li><strong>Blaming</strong>: Error messages that blame the user for the issue can be frustrating and unhelpful. Instead of pointing fingers, error messages should focus on providing solutions and clear next steps.</li>
<li><strong>Inconsistent</strong>: Error messages that look different from the rest of the website or application, or that are poorly designed, can be confusing and unprofessional. They should be consistent in style and design and should be easy to read and understand.</li>
</ul>
<p>By avoiding these common pitfalls, we can create error messages that are clear, informative, and helpful for users.</p>
<h3>💡<strong>What makes a good error message?</strong></h3>
<p>A good error message should be clear and concise, explaining what went wrong in a way that the user can understand. It should also suggest a solution or actions the user can take to resolve the issue. Additionally, a good error message should be friendly and not use technical jargon that the user may not be familiar with.</p>
<p>When crafting error messages, it's important to consider the context in which they will be displayed. For example, an error message displayed to a client user may need to be worded differently than an error message displayed to a developer.</p>
<p>By carefully considering the content and tone of error messages, we can create a better user experience and help users troubleshoot issues more effectively.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0skmqazi4pktzspeyvo.png" alt="Image"></p>
<h4>💡Here are some common characteristics:</h4>
<ul>
<li><strong>Clarify what happened and why:</strong> Make it super clear what did or didn’t happen. This can be done with a combination of visuals and text to explain errors and their causes.</li>
<li><strong>Reassure users:</strong> Let them know what was not affected by the error, such as saved drafts.</li>
<li><strong>Be empathetic:</strong> Use "please" when appropriate to show understanding.</li>
<li><strong>Help users fix the issue:</strong> Give them clear instructions for fixing the issue or direct them to a knowledge base resource or article with a descriptive link like, “Learn how to resolve this” or “How do I fix this?”</li>
<li><strong>Always give way out:</strong> If the problem persists or could reoccur, give them a Customer Care contact option.</li>
</ul>
<h3>💡<strong>Over to you</strong></h3>
<p>What's the best and worst error message you've seen?👀</p>
<p>Wrong answers only🫠</p>
<p>Let me know in the comments😀</p>
<p> 
 </p>
<blockquote>
<p>🎯Article Reference: <a href="https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f">https://wix-ux.com/when-life-gives-you-lemons-write-better-error-messages-46c5223e1a2f</a></p>
</blockquote>
<p> 
 </p>
<hr>
<p> 
 </p>


<p>After gaining experience in creating React apps, it's time to explore various deployment options available to showcase your work to the world. We have been using Create React App to develop our React applications, so let’s see what it has to offer for our deployment process.</p>
<h3>📌Introduction</h3>
<p>React is a powerful JavaScript library for building interactive user interfaces. Once you have created your React app, the next step is to deploy it to a server so that it can be accessed by the users.</p>
<p>Assuming you have built a React app and are now searching for a means to share it with the rest of the world, there are numerous options available to deploy a React app and it’s always good to try something new. One popular and feasible option is to make use of GitHub Pages.</p>
<p>GitHub Pages is a free hosting service that allows you to easily deploy and share your web projects. So, why not take advantage of this option and give it a shot?</p>
<p>In this blog post, we will go through several steps to deploy your React app using Github Pages.</p>
<h3>📌Prerequisites</h3>
<ul>
<li>GitHub account</li>
<li>Install Git on your machine and set up Git.</li>
<li>Install Node.js</li>
</ul>
<h3>📌Step 1: Creating the repository</h3>
<p>The first step is to create a new repository on GitHub for your React app. Once you have created your repository, clone it on your local machine using the Git command line tool for a Git GUI client.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntqn8waru8eb5dhu0oiz.png" alt="Image"></p>
<h3>📌Step 2: Create your React app</h3>
<p>After cloning your empty git repository, create a react app in the working of your git repository by the following command:</p>
<pre><code>npx create-react-app ./
</code></pre>
<h3>📌Step 3: Add the dependencies to your app</h3>
<p>Install the following package in your React app:</p>
<pre><code>npm install gh-pages --save-dev
</code></pre>
<h3>📌*<strong>*Step 4: Add configs to your react app**</strong></h3>
<p>Normally, our app will be deployed on a subdomain with our username on <code>github.io</code> like any other app, so to keep our app well-informed about our root URL, we need to add a <code>homepage</code> attribute to our <code>package.json</code> file and assign the URL to it.</p>
<pre><code>"homepage": "https://{user-name}.github.io/{repo-name}",
</code></pre>
<h3>📌Step 5: Build your React app</h3>
<p>Before you can deploy your React app to GitHub pages, you need to build it. In your <code>package.json</code> file, add the <code>predeploy</code> and <code>deploy</code> keys under scripts to create a production-ready build of your app. This will create a <code>build</code> directory in your project directory that contains the optimized and minified production build of your React app.</p>
<pre><code>"predeploy": "npm run build",
"deploy": "gh-pages -d build",
</code></pre>
<p>Your <code>package.json</code> file should be similar to this:</p>
<pre><code>{
  "homepage": "https://ayushsoni1010.github.io/test-react-app-deploy",
  "name": "test-react-app-deploy",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^5.0.0"
  }
}
</code></pre>
<h3>📌Step 6: Deploy your React app</h3>
<p>Now, all we need is to run <code>npm run deploy</code> command in the terminal every time we make changes and want to deploy our app with the latest changes and it will be up and running on the server.</p>
<pre><code>npm run deploy
</code></pre>
<p>This command will create a branch named <code>gh-pages</code>. After the build finishes, it pushes the changes to the <code>gh-pages</code> branch on the remote repository and hosts your app.</p>
<p>Now, it should be deployed to your GitHub repository after some time. To acquire the URL, go to your repository and click on <strong>Settings</strong> and go to <strong>Pages</strong>.</p>
<p>Boom! Your site is live on GitHub Pages.</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/un94xuk86yp1cbbs6p1o.png" alt="Image"></p>
<h3>📌Step 7: Commit and Push your changes to GitHub</h3>
<p>Once you committed the changes, you need to push your changes to GitHub.</p>
<p>Run the following commands to push your changes to the remote repository.</p>
<pre><code>git add .
git commit -m "your commit message"
git push origin main
</code></pre>
<h3>📌Conclusion</h3>
<p>Deploying your React app to GitHub Pages is a simple and easy way to share your app with the world. By following these steps, you can quickly deploy your app and make it available to anyone with an internet connection. GitHub Pages is a great option for small projects, personal websites, or demo sites. If you have a complex app or need more control over your hosting environment, you may want to consider other hosting options. But for simpler React apps, GitHub Pages is an excellent choice that is both free and easy to use.</p>
<h3>📌Over to you</h3>
<p>Have you used <code>github-pages</code> to host your React applications?</p>
<p>Let me know in the comments😄</p>
<p> 
 </p>
<hr>
<p> 
 </p>
<p>That's all for today.</p>


<h3><strong>🚀Getting started with the Strapi</strong></h3>
<p>It is often confusing, how to deploy your strapi app by using cloud providers but we could not deploy it using static site hosting platforms such as <strong><a href="http://vercel.com">Vercel</a>, <a href="http://netlify.com">Netlify</a>, <a href="https://www.notion.so/How-to-deploy-the-Headless-CMS-Strapi-app-on-Heroku-7f40b8f2d8414f3f81e8a0caccf9c1f1">Github Pages</a>,</strong> etc. because strapi runs an HTTP server based on Koa, a backend javascript framework. However, these are not that trivial for someone who is not into DevOps. I will walk you through how to install your Strapi instance on Heroku. In this article, I will demystify it through examples and code blocks.</p>
<h3><strong>🤩Introduction to Strapi</strong></h3>
<p>Strapi is one of the best and leading open-source headless CMS based on Node.js and is used in designing API’s and managing content. It’s 100% JavaScript and fully customizable. Strapi helps us scaffold our backend and provide admin tools to create an API both Restful and GraphQL quickly and consume the API’s from the client side.</p>
<p>Strapi contains both a server and a database. The server hosts the API’s and the database is used to store the applicant’s content. Strapi uses the Koa.js backend javascript framework to run the server.</p>
<p>In strapi, the API’s are created using the Strapi admin panel in which respective content-type maps and access by its endpoint.</p>
<ul>
<li>GET</li>
<li>POST</li>
<li>PUT</li>
<li>DELETE</li>
</ul>
<h3><strong>🫣Introduction to Heroku</strong></h3>
<p>Heroku is a container-based cloud platform as a service (PaaS) that enables developers to run, build and operate applications entirely on the cloud and supports several programming languages like Java, Nodejs, PHP, Go, Python, Clojure, Ruby, and Scala. Heroku is part of the Salesforce platform and it is so easy to use that’s a top choice for many deployment projects. Heroku is managed on containers called dynos within the Heroku paradigm system.</p>
<h3><strong>✍️Prerequisites</strong></h3>
<p>To get started, we need to have the following in place:</p>
<ul>
<li>You should have a GitHub account</li>
<li>You should have a Heroku account</li>
<li>Open any code editor for your repository</li>
<li>Git installed on your machine</li>
<li>Node.js v16+ installed</li>
<li>Strapi installed locally</li>
</ul>
<h3><strong>🎯Goal</strong></h3>
<p>In this guide, we are going to:</p>
<ul>
<li>Create a new GitHub repository</li>
<li>Create a new Strapi proejct</li>
<li>Configure the Heroku CLI login with your GitHub repository</li>
<li>Connect the Postgres add-on database with your Strapi project provided by Heroku</li>
<li>Configure PostgreSQL for the production environment</li>
</ul>
<h3><strong>📝Installing Strapi locally</strong></h3>
<p>To install Strapi locally, run this command in your GitHub repository.</p>
<p>💡 npx create-strapi-app@latest my-project --quickstart</p>
<p>💡 yarn create strapi-app my-project --quickstart</p>
<p>When the dependencies are installed and the local setup completes, it will create a project my-project, then you should be redirected to admin access <a href="http://localhost:1337/admin"><strong>http://localhost:1337/admin</strong></a> register an admin user using the form which opens in the browser.</p>
<p>If you’re redirecting for the first time then you’re redirecting to <a href="http://localhost:1337/admin/auth/register-admin"><strong>http://localhost:1337/admin/auth/register-admin</strong></a>. This is because we have no super admin yet in the database. By default, Strapi uses SQLite as a file-based database.</p>
<p>When you are registered successfully, you’re the super admin of your app. You can invite other folks through email to get access to the super admin, author, and editor roles.</p>
<blockquote>
<p>Available commands in your project:</p>
</blockquote>
<ul>
<li>yarn develop (Start Strapi in watch mode)</li>
</ul>
<p> 
 </p>
<p><strong>🛠️Under Construction</strong></p>


<h3><strong>What are the most common HTTP status codes?</strong></h3>
<p>HTTP status codes are essential in understanding the response returned by a server after making an HTTP request. They provide the information about the status of the request and response from the server.</p>
<h3>🎯HTTP response codes are categorized into five groups:</h3>
<p>Informational (100-199)</p>
<p>Success (200-299)</p>
<p>Redirection (300-399)</p>
<p>Client Error (400-499)</p>
<p>Server Error (500-599)</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewwmocekdo8mme6dbi2a.png" alt="Image"></p>
<h3>🎯Here are some of the most common HTTP status codes:</h3>
<ul>
<li>200 OK: This status code indicates that the request was successful.</li>
<li>404 Not Found: This status code indicates that the requested resource could not be found on the server.</li>
<li>500 Internal Server Error: This status code indicates that there was an error on the server that prevented the request from being fulfilled.</li>
<li>401 Unauthorized: This status code indicates that the client is not authorized to access the requested resource.</li>
<li>403 Forbidden: This status code indicates that the client does not have permission to access the requested resource.</li>
</ul>
<p>These codes are just a few examples of the many HTTP status codes that exist. The exact list of most common HTTP status codes can vary depending on the context and the specific application.</p>
<h3>🤔<strong>Over to you:</strong></h3>
<p>HTTP status code 401 is for Unauthorized. Can you explain the difference between authentication and authorization, and which one code 401 check for?👀</p>
<p>Let me know in the comments😀</p>
<h3>🎯<strong>Conclusion</strong></h3>
<p>HTTP status codes are essential in understanding the response returned by a server after making an HTTP request. By categorizing the codes and having a clear set of definitions for each, developers can quickly identify and troubleshoot issues with their applications.</p>
<p> 
 </p>
<hr>
<p> 
 </p>
<p>That's all for today.</p>


<h3><strong>Let's Grow with LetsGrowMore</strong></h3>
<p>Learning Web Development is never been an easy task for me until I get some real hands-on experience. It all started in June 2021, I was exploring an open-source program on google, and I was also using LinkedIn for finding such technically experienced people. Suddenly, a post comes into my feed and that was about LetsGrowMore. And, then I was come to know that day LetsGrowMore is not just providing open-source enthusiasts a platform to showcase their skills in a different field but also provides an opportunity to undergraduates to work together with them as an intern in various fields.</p>
<p>I grabbed the opportunity with both hands and applied and thus opening the gateway to the Open Source world!</p>
<p>So, Now let's talk about What community is this and how they help beginner to boost their skills. For beginners, I would first like to clear some things. Here we go 🚀</p>
<h3><strong>🤔What is Open Source?</strong></h3>
<p>I think you might’ve studied about this. There are generally two types of software that programmers code closed source software, and open-source software. open-source software is the one for which the source code is made freely available and may be redistributed and modified. This is done to accept bugs, issues, and other features from around the world helping the open-source software community. So next time when you’re on a website like Github, working on a project (repository), and contributing your code to it, consider yourself to be a lucky person because you’re now an open-source contributor, Open source has become a movement and a way of working that reaches beyond software production. The open-source movement uses the values and decentralized production model of open-source software to find new ways to solve problems in their communities and industries.</p>
<h3><strong>🚀What is LetsGrowMore?</strong></h3>
<p>LetsGrowMore is a ground-based organization that aims at building the future through nourishing the present. LetsGrowMore believes in making our youth, especially the students self-aware and exploring the untouched world of technology and tremendous growth-making fields and our belief finally took us where we are standing today. Today LetsGrowMore is an officially MSME-registered start-up with nearly 100+ people working under the same establishment.</p>
<p>Well, this is not what LetsGrowMore aims for, their plans are much higher and they are working for it. Soon they are coming up with new projects which target future building.</p>
<h3><strong>🎯What are the main missions of LetsGrowMore?</strong></h3>
<ol>
<li>
<p><strong>Help Everyone To Grow :</strong>
Learning is a never-ending process! To make sure everyone will learn new things in the right way LetsGrowMore provides a healthy community where everyone can share.</p>
</li>
<li>
<p><strong>Provide Learning Opportunity :</strong></p>
<p>At LetsGrowMore they aim to provide as many opportunities as possible.</p>
<p>For now, they are offering many free opportunities such as :</p>
<ul>
<li><a href="https://letsgrowmore.in/vip">LGMVIP</a></li>
<li><a href="https://letsgrowmore.in/soc">LGMSoC'21</a></li>
<li><a href="https://forms.gle/vi5YgBREv5LQ6CMw9">LGMWEP(For Girls-Only)</a></li>
<li><a href="https://letsgrowmore.in/vip/">Web Development</a></li>
<li><a href="https://letsgrowmore.in/vip/">Tech Intern</a></li>
<li><a href="https://docs.google.com/forms/d/1kfEcNyxKit0Ib8xV5sU4c4KI2fY9JcK8DvYklfQuOz0/viewform?edit_requested=true">Campus Ambassador</a></li>
<li><a href="https://docs.google.com/forms/d/1ZnAdbukXaTVj_S0sgn6PfJh1UwKlpX4tuD87mdRhO_8/viewform?edit_requested=true">Social Media Marketing</a></li>
<li><a href="https://docs.google.com/forms/d/12VyIWPh3bmE8SfkhOy7JrYWZjclzCOP_Gp4Tn4zFVZo/viewform?edit_requested=true">Content Writing Intern</a></li>
<li><a href="https://docs.google.com/forms/d/e/1FAIpQLSdXeL_soItd5fFZQByZeQyaceYPbEJoSf5Hx2W9XmAo0_m_sg/viewform?usp=sf_link">Graphic Designer</a></li>
</ul>
</li>
<li>
<p><strong>Build a better tomorrow</strong></p>
<p>By investing in students, they not only provide students a platform, but they also focus on how students get all the in free of cost.</p>
</li>
<li>
<p><strong>Knowledge grows by sharing</strong></p>
<p>Creating an educational open-source community will help beginners to build a solid network with more experienced individuals and under their guidance, they can pave their path in the field of development.</p>
</li>
</ol>
<h3><strong>🛡How this community helps you?</strong></h3>
<ol>
<li>They enhance your understanding and appreciation of diversity.</li>
<li>They provide various services within the community</li>
<li>They allow members to gain personal and professional skills in the area of leadership and development.</li>
<li>You can also grow within the community to become a mentor in the organization.</li>
<li>They support and encourage students to explore their multiple identities.</li>
<li>They provide convenient, up-to-date services to meet the current needs of the community.</li>
<li>They provide leisure learning and continuing education courses for the campus and community.</li>
</ol>
<h3><strong>🧾What I have learned from this program?</strong></h3>
<p>Although I have learned many things but will emphasize some important points here. Having a huge team is a fantastic experience for me, more than 500+ contributors are working on several projects, which invokes teamwork within us which is a very important soft skill a student much have I'm also an introvert before joining this awesome community but after joining I learned many things like how to express my views with others, solving problems, helping new programmers, managing projects. Apart from the art of taking help from others, the art of helping others is also a silent feature of this program.</p>
<p>Please forgive me if I have done any grammatical errors in this article as I’m yet to improve my English.</p>
<p>📢 “If everyone is moving forward together, then success takes care of itself.”</p>
<p>  - Henry Ford</p>
<p>Good luck to everyone who’s about to decide between contributing to this amazing and open world of coders🙌</p>
<p> 
 </p>
<hr>
<p> 
 </p>
<p>That's all for today.</p>


<h3><strong>Introduction</strong></h3>
<p>When it comes to software development, choosing the right architecture pattern can make a huge difference in the quality and maintainability of the codebase. There are several architecture patterns to choose from, including MVC, MVP, MVVM, MVVM-C, and VIPER. While all of these patterns share some similarities, they each have their own unique characteristics and are best suited for different types of applications. These architectural patterns are among the most commonly used in development.</p>
<p>Developers have introduced them to overcome the limitations of earlier patterns. So how do they differ?🤔</p>
<p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/it8fqk85nzhobvnnlbjc.png" alt="MVC"></p>
<h3>⚡<strong>MVC (Model-View-Controller)</strong></h3>
<p>MVC is one of the most well-known and widely used architectural patterns. It separates the application into three main components: the model, the view, and the controller. The model represents the data and the business logic, the view is responsible for rendering the user interface, and the controller acts as the intermediary between the model and the view.</p>
<h3>⚡<strong>MVP (Model-View-Presenter)</strong></h3>
<p>MVP is similar to MVC, but with a slightly different approach. In MVP, the presenter acts as an intermediary between the model and the view, rather than the controller. The presenter is responsible for updating the view with data from the model, and for handling user input and events.</p>
<h3>⚡<strong>MVVM (Model-View-ViewModel)</strong></h3>
<p>MVVM is another architectural pattern that is gaining popularity. It is similar to MVP, but with the addition of a view model. The view model is responsible for managing the state of the view, as well as providing data from the model to the view. This pattern is often used in applications that require complex user interfaces.</p>
<h3>⚡<strong>MVVM-C (Model-View-ViewModel-Coordinator)</strong></h3>
<p>MVVM-C is a variation of MVVM that adds a coordinator to the mix. The coordinator is responsible for handling navigation between different screens or views within the application. This pattern is useful for applications that have multiple screens or views that need to be managed.</p>
<h3>⚡<strong>VIPER (View-Interactor-Presenter-Entity-Router)</strong></h3>
<p>VIPER is a relatively new architectural pattern that has gained popularity in recent years. It is similar to MVC, but with the addition of several new components, including the interactor, entity, and router. The interactor is responsible for handling business logic, the entity represents the data, and the router handles navigation between different screens or views.</p>
<h3>🫡<strong>Common points to remember:</strong></h3>
<ul>
<li>MVC, the oldest pattern, dates back almost 50 years</li>
<li>Every pattern has a “view” (V) responsible for displaying the user content interface and receiving the user input</li>
<li>Most patterns include a “model” (M) to manage the business data and logic</li>
<li>“Controller”, “Presenter”, and the “View-Model” are translators that mediate between the views and the model. Other than this, the VIPER pattern contains the “entity” and “router” translator which represents the data and network routing.</li>
<li>These translators can be quite complex to write, so various patterns have been proposed to make them more maintainable.</li>
</ul>
<h3>🤔<strong>Self Activity:</strong></h3>
<p>Over to you: keep in mind that this is not an exhaustive list of architectural patterns. Other notable patterns include Flux and Redux. How do they compare to the ones mentioned here?👀</p>
<h3><strong>Conclusion</strong></h3>
<p>In conclusion, while all of these architectural patterns share some similarities, they each have their own unique characteristics and are best suited for different types of applications. Choosing the right architecture pattern can make a huge difference in the quality and maintainability of the codebase, so it's important to take the time to understand the pros and cons of each pattern before making a decision.</p>
<p> 
 </p>
<hr>
<p> 
 </p>
<p>That's all for today.</p>


<h3>🚩Introduction</h3>
<p>As a developer, you might find it challenging to handle error cases while writing code. Fetching and caching data efficiently is essential for improving app performance and reducing loading time. Whether you are working with APIs, remote data fetching, or from other sources, getting data into your app quickly and reliably can be a major challenge. In this blog, we will explore how to use <strong>useSWR</strong>, compare its existing hooks, and show why it's better.</p>
<h3>🚩Pre-requisites</h3>
<p>This article assumes that you are familiar with JavaScript, React, and Next.js. It would be helpful to have a good understanding of hooks, asynchronous JavaScript, and creating custom hooks. Let's dive straight in!</p>
<h3>🚩How useSWR works</h3>
<p>The <strong>useSWR</strong>
hook takes two parameters: key and fetcher. The key is something that uniquely identifies the data to be fetched, usually the API URL, while the fetcher is a function that returns the data. The hook returns two values: data and error, representing the request's status. These two values can be used to set a loading state and an error fallback, respectively. The significant perk of the <strong>useSWR</strong>
hook offers is how it simplifies the data fetching logic, delivering API data or returning an error response with just two lines of code. Furthermore, for each request made, a cached version is first returned while the server revalidates the request and returns updated data immediately after revalidation, helping optimize the web app and improve speed.</p>
<h3>🚩Getting started with useSWR</h3>
<p>The name <strong>SWR</strong> is derived from the concept called "stale-while-revalidate," which is an HTTP cache invalidation strategy popularized by HTTP RFC 5861. It performs data fetching in 3 steps:</p>
<ul>
<li>Returns cached data first (stale)</li>
<li>Sends the fetch request (revalidate)</li>
<li>Returns the up-to-date data</li>
</ul>
<p>The hook comes with a display of benefits which includes:</p>
<ul>
<li>Simplicity of Logic</li>
<li>Lightweight</li>
<li>Offers revalidation</li>
<li>Easy pagination</li>
<li>Supports TypeScript and a host of other perks.</li>
</ul>
<p>To get started with <strong>useSWR,</strong> you first need to install it as a dependency in your React or Next project:</p>
<pre><code>yarn add swr
or
npm install swr
</code></pre>
<p>Once installed, you can import the <strong>useSWR</strong> hook and use it in your components to fetch and cache data.</p>
<p>Let’s understand it through an example:</p>
<pre><code>import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/data');

  if (error) return &#x3C;div>Error fetching data&#x3C;/div>;
  if (!data) return &#x3C;div>Loading data...&#x3C;/div>;

  return (
    &#x3C;div>
      &#x3C;h1>{data.title}&#x3C;/h1>
      &#x3C;p>{data.description}&#x3C;/p>
    &#x3C;/div>
  );
}
</code></pre>
<p>As you can see, useSWR provides a more straightforward and concise way to fetch and cache data in React. It handles caching and error handling automatically and provides options for polling and deduplication.</p>
<h3>🚩Pagination</h3>
<p>Pagination is a crucial feature of modern web applications. It helps users to navigate through large amounts of data with ease. In React, the SWR library provides an API called useSWRInfinite for implementing complex pagination patterns. However, for common pagination patterns, useSWR is sufficient.</p>
<p>Let’s take an example below:</p>
<pre><code>function Page({ index }) {
  const { data, error } = useSWR(`/api/data?page=${index}`, fetcher);

  // ... handle loading and error states

  return data.map((item) => &#x3C;div key={item.id}>{item.name}&#x3C;/div>);
}

function Pagination() {
  const [pageIndex, setPageIndex] = useState(0);

  // The API URL includes the page index, which is a React state.
  const { data, error } = useSWR(`/api/data?page=${pageIndex}`, fetcher);

  // ... handle loading and error states

  return (
    &#x3C;div>
      {data.map((item) => (
        &#x3C;div key={item.id}>{item.name}&#x3C;/div>
      ))}
      &#x3C;button onClick={() => setPageIndex(pageIndex - 1)}>Previous&#x3C;/button>
      &#x3C;button onClick={() => setPageIndex(pageIndex + 1)}>Next&#x3C;/button>
    &#x3C;/div>
  );
}
</code></pre>
<p>Of course, this works if the API has a provision for pagination. Also, since SWR provides caching, the preceding and previous pages are pre-fetched or preloaded when rendered in the abstracted div element. Other types of pagination such as Infinite Loading can also be achieved easily using SWR.</p>
<h3>🚩Comparing useSWR and existing hooks</h3>
<p>One common approach to fetching and caching remote data in React and Next is to use <strong>useEffect</strong> and <strong>useState</strong> hooks.</p>
<p>Let’s understand it through an example:</p>
<pre><code>import { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then((response) => response.json())
      .then(setData)
      .catch(setError);
  }, []);

  if (error) return &#x3C;div>Error fetching data&#x3C;/div>;
  if (!data) return &#x3C;div>Loading data...&#x3C;/div>;

  return (
    &#x3C;div>
      &#x3C;h1>{data.title}&#x3C;/h1>
      &#x3C;p>{data.description}&#x3C;/p>
    &#x3C;/div>
  );
}
</code></pre>
<p>While this approach works, it has some limitations. For example, it requires more code to handle caching and error handling. It also doesn't provide options for polling or deduplication.</p>
<p>Now let’s compare this with <strong>useSWR</strong>:</p>
<pre><code>import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/data');

  if (error) return &#x3C;div>Error fetching data&#x3C;/div>;
  if (!data) return &#x3C;div>Loading data...&#x3C;/div>;

  return (
    &#x3C;div>
      &#x3C;h1>{data.title}&#x3C;/h1>
      &#x3C;p>{data.description}&#x3C;/p>
    &#x3C;/div>
  );
}
</code></pre>
<p>As you can see that useSWR provides a simpler and more concise way to fetch and cache data in React or Next. It handles caching and error handling automatically and provides options for polling and deduplication.</p>
<h3>🚩Performance comparison</h3>
<p>To compare the performance of UseSWR with <code>useEffect</code> and <code>useState</code>, we'll use the same API endpoint for both approaches: <strong><a href="https://jsonplaceholder.typicode.com/todos">jsonplaceholder.typicode.com/todos</a></strong>. We'll measure the time it takes to fetch and display 100 to-do items from the API.</p>
<p>Here's the code for fetching and displaying todo items using <code>useEffect</code> and <code>useState</code>:</p>
<pre><code>import { useEffect, useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then((response) => response.json())
      .then((data) => setTodos(data.slice(0, 100)))
      .catch((error) => console.error(error));
  }, []);

  return (
    &#x3C;ul>
      {todos.map((todo) => (
        &#x3C;li key={todo.id}>
          &#x3C;input type='checkbox' checked={todo.completed} />
          &#x3C;span>{todo.title}&#x3C;/span>
        &#x3C;/li>
      ))}
    &#x3C;/ul>
  );
}
</code></pre>
<p>Using this approach, it took an average of 150-200 milliseconds to fetch and display the 100 to-do items.</p>
<p>Now let's compare this with UseSWR:</p>
<pre><code>import useSWR from 'swr';

function TodoList() {
  const { data, error } = useSWR('https://jsonplaceholder.typicode.com/todos');

  if (error) return &#x3C;div>Error fetching data&#x3C;/div>;
  if (!data) return &#x3C;div>Loading data...&#x3C;/div>;

  const todos = data.slice(0, 100);

  return (
    &#x3C;ul>
      {todos.map((todo) => (
        &#x3C;li key={todo.id}>
          &#x3C;input type='checkbox' checked={todo.completed} />
          &#x3C;span>{todo.title}&#x3C;/span>
        &#x3C;/li>
      ))}
    &#x3C;/ul>
  );
}
</code></pre>
<p>Using UseSWR, it took an average of 100-150 milliseconds to fetch and display the same 100 to-do items.</p>
<p>As you can see, UseSWR performs better than <code>useEffect</code> and <code>useState</code> in terms of speed, even though it handles caching and error handling automatically.</p>
<h3>Over to you</h3>
<p>Have you used the <strong>useSWR</strong> hook before?</p>
<p>Let me know in the comments😄</p>
<h3>🚩Conclusion</h3>
<p>The SWR hook saves us the stress of writing our own logic for data fetching, making our code a lot cleaner and simpler. A better option is to use the <code>useEffect</code> hook which perfects for static generated sites. Furthermore, it offers revalidation, and even more advanced options such as custom caching, middleware, and TypeScript support. Feel free to check out the <strong><a href="https://swr.vercel.app/docs/getting-started">official documentation</a></strong> to learn more.</p>
<p> 
 </p>
<hr>
<p> 
 </p>
<p>That's all for today.</p>


<h3>🔥<strong>Introduction</strong></h3>
<p>Nginx is a highly performant, scalable, and reliable open-source web server software that is frequently utilized as a "reverse proxy.” But why is it labeled as a "reverse" proxy which raises the question?</p>
<p>Many companies use proxy servers to route and secure traffic between networks. There is often confusion, however, on how this differs from a reverse proxy. In this blog, we will be exploring the origins of the term “reverse” and “forward” proxy and understanding how Nginx functions as a reverse proxy.</p>
<h3>🔥<strong>Overview of Forward and Reverse Proxy</strong></h3>
<p>First, let's start with the basics of what a proxy server is. A proxy server, sometimes referred to as a “forward” proxy, is a server that acts as an intermediary between clients and other servers on the network. When a client makes a request, the forward proxy intercepts the request and forwards it to the appropriate server on behalf of the client. By doing so, the client’s identity and location are hidden, convert and mask IP addresses, block unknown traffic from the server and the server’s response is sent back to the forward proxy, which in turn forwards it back to the client.</p>
<p>Now, let's dive into the concept of a "reverse" proxy. A reverse proxy is a type of proxy server. Unlike a traditional proxy server, which is used to protect clients, a reverse proxy is used to protect servers. A reverse proxy is not used to serve client requests directly. Instead, it acts as a gateway to servers that are behind it, allowing those servers to receive client requests without directly exposing them to the internet.</p>
<p>The diagram below shows the differences between a <strong>forward proxy</strong> and a <strong>reverse proxy.</strong></p>
<p><img src="https://user-images.githubusercontent.com/76895975/228149345-fdbee27e-5628-40a9-9798-83663af68055.png" alt="image"></p>
<p><strong>A forward proxy is commonly used for:</strong></p>
<ul>
<li>Avoid browser restrictions</li>
<li>Block access to certain content</li>
<li>Protect clients</li>
</ul>
<p><strong>A reverse proxy is good for:</strong></p>
<ul>
<li>Protect servers</li>
<li>Load balancing</li>
<li>Caching static contents</li>
<li>Encrypt and Decrypt SSL communications</li>
</ul>
<p>In addition to its HTTP server capabilities, NGINX can also function as a proxy server for email (IMAP, POP3, and SMTP) and a reverse proxy and load balancer for HTTP/2, TCP, and UDP protocols.</p>
<h3>🔥<strong>Why is Nginx called a “reverse” proxy?</strong></h3>
<p>Nginx is called a reverse proxy because it acts as an intermediary server between clients and backend servers, intercepting responses from the backend servers and forwarding them to the appropriate clients. In this way, Nginx functions as a reverse proxy.</p>
<p><img src="https://user-images.githubusercontent.com/76895975/228149289-7627a407-ef54-497c-bd43-b037dd00a19b.png" alt="image"></p>
<h3>🔥Benefits of using Nginx as a reverse proxy:</h3>
<ol>
<li><strong>Enhanced security:</strong> Nginx can act as a firewall, blocking malicious traffic and protecting backend servers from attack.</li>
<li><strong>High availability:</strong> Nginx can be configured to distribute traffic among multiple backend servers, ensuring high availability and reducing the risk of downtime.</li>
<li><strong>Simplified management:</strong> Nginx can be used to serve multiple domains or applications from a single server and making it a highly efficient solution for managing complex web environments.</li>
<li><strong>Load balancing:</strong> Nginx can distribute incoming traffic across multiple backend servers, which can improve performance and ensure high availability.</li>
<li><strong>SSL/TLS termination:</strong> Nginx can terminate SSL/TLS connections, which can offload processing from backend servers and improve performance.</li>
</ol>
<h3>🔥Over to you:</h3>
<p>Which proxy you will use: Reverse proxy or HAProxy?</p>
<p>Let me know in the comments: which and why🤔</p>
<p> 
 </p>
<hr>
<p> 
 </p>
<p>That's all for today.</p>


API Architectural Styles

Build an API with Serverless Functions in Next.js

Crafting Effective Chaos Error Messages

Deploy your React app using GitHub pages

How to deploy the Headless CMS Strapi app on Heroku

HTTP Status Codes

Lets Grow with LetsGrowMore

MVC, MVP, MVVM, MVVM-C, and VIPER architecture patterns

Supercharge your React app with useSWR

Why is Nginx called a “reverse” proxy?