Building high-performance web applications today means striking a balance between speed, SEO, scalability, and data freshness. The Next.js framework, built on top of React, provides developers with multiple rendering strategies to achieve this balance — namely:

• Server-Side Rendering (SSR)

• Static Site Generation (SSG)

• Incremental Static Regeneration (ISR)

• Client-Side Rendering (CSR)

Each of these methods determines how and when your webpage’s HTML is generated, directly impacting load time, SEO performance, and user experience.

In this blog, we’ll delve into each rendering method, examine how it works under the hood, discuss its pros and cons, and identify the best scenarios for using each one.

🧩 What is Rendering in Next.js?

Before diving into the differences, let’s understand what rendering means.

Rendering is the process of transforming your React components into actual HTML that the browser can display.
In Next.js, this rendering can happen at different stages:

1. Build Time – Pages are generated once during deployment.

2. Request Time – HTML is generated for every user request.

3. Client-Side – HTML is built dynamically inside the user’s browser after the page loads.

4. Incremental Regeneration – Pages are re-rendered periodically in the background.

Each rendering method affects SEO, performance, and scalability differently — and choosing the right one can make or break your app’s user experience.

⚙️ 1. Server-Side Rendering (SSR)

🧠 What is SSR?

Server-Side Rendering (SSR) means that every time a user requests a page, Next.js runs the necessary code on the server, fetches data, and renders the page on demand. The server then sends a fully rendered HTML page to the browser.

This ensures that search engines and users receive fully populated HTML content.

⚡ How SSR Works

1. A user visits a Next.js page with getServerSideProps().

2. The Next.js server fetches required data (e.g., from an API or database).

3. HTML is generated with the latest data.

4. The browser receives the rendered HTML, improving SEO and load perception.

🧩 Code Example

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/posts');
  const data = await res.json();

  return { props: { data } };
}

export default function Blog({ data }) {
  return (
    <div>
      <h1>Latest Posts</h1>
      {data.map(post => <p key={post.id}>{post.title}</p>)}
    </div>
  );
}

✅ Advantages

• Always Fresh: Data is fetched and rendered at every request.

• SEO Friendly: Since HTML is generated on the server, crawlers see full content.

• Great for Dynamic Content: Perfect for dashboards, news, or stock updates.

❌ Disadvantages

• Performance Cost: Rendering on every request increases server load.

• Slower Initial Load: Each request requires a round-trip to the server.

• Higher Hosting Costs: Requires a server to handle every request.

🧭 Best Use Cases

• Personalized pages (user dashboards, account pages)

• Real-time applications (stock tickers, sports scores)

• Frequently updated data (news, social feeds)

📦 2. Static Site Generation (SSG)

🧠 What is SSG?

Static Site Generation (SSG) pre-renders HTML pages at build time. This means your content is fetched once when you build your application, and the generated HTML files are stored and served via a CDN.

Users receive instant-loading, cached pages — perfect for content that doesn’t change frequently.

⚡ How SSG Works

1. During build (next build), Next.js runs getStaticProps() for each page.

2. The fetched data is compiled into static HTML.

3. When users visit your site, these HTML files are served directly from the CDN.

🧩 Code Example

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/products');
  const products = await res.json();

  return { props: { products } };
}

✅ Advantages

• Blazing Fast: Pages are pre-built and cached, loading instantly.

• SEO Optimized: Fully rendered HTML available to crawlers.

• Cost-Efficient: No runtime server needed; can be hosted on static hosting.

❌ Disadvantages

• Stale Data: Once built, content remains the same until redeployment.

• Not Suitable for Frequently Changing Data.

🧭 Best Use Cases

• Blogs and documentation sites

• Marketing or landing pages

• Product or portfolio sites with rarely changing data

🔁 3. Incremental Static Regeneration (ISR)

🧠 What is ISR?

Incremental Static Regeneration (ISR) is a hybrid approach that allows you to update static pages after deployment, without rebuilding your entire site.

ISR combines the speed of SSG with the freshness of SSR.

⚡ How ISR Works

1. A page is initially generated at build time (like SSG).

2. You define a revalidate time (in seconds).

3. After that time passes, the next request triggers background regeneration.

4. The old page is served until the new one is ready — seamless and efficient.

🧩 Code Example

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/news');
  const news = await res.json();

  return { 
    props: { news },
    revalidate: 60 // Rebuild every 60 seconds
  };
}

✅ Advantages

• Best of Both Worlds: Static performance + fresh content.

• Automatic Updates: No need to rebuild or redeploy manually.

• SEO Friendly: Still pre-rendered HTML.

❌ Disadvantages

• Potentially Stale Data: Content might be slightly outdated before regeneration.

• Complexity: Managing caching and validation requires careful setup.

🧭 Best Use Cases

• E-commerce product listings

• News and article feeds

• Event or course directories

💻 4. Client-Side Rendering (CSR)

🧠 What is CSR?

Client-Side Rendering (CSR) shifts rendering responsibility to the browser.
The server sends a bare HTML shell and JavaScript bundles, which React uses to fetch data and render content dynamically.

CSR is the default behavior of standard React apps created with create-react-app.

⚡ How CSR Works

1. The server sends an almost-empty HTML file.

2. The browser downloads and executes JavaScript.

3. React fetches data (using fetch or axios) and updates the UI.

🧩 Code Example

import { useEffect, useState } from 'react';

export default function Dashboard() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/current-user')
      .then(res => res.json())
      .then(setUser);
  }, []);

  if (!user) return <p>Loading...</p>;
  return <h1>Welcome, {user.name}!</h1>;
}

✅ Advantages

• Highly Interactive: Ideal for apps needing instant state updates.

• Real-Time Data: Perfect for user dashboards or live data apps.

• Reduced Server Load: Rendering happens on the client, not the server.

❌ Disadvantages

• Poor SEO: HTML is mostly empty initially, which can harm indexing.

• Slower First Load: Users wait for JavaScript and data to load.

• Requires JavaScript: Non-JS browsers can’t view the page content.

🧭 Best Use Cases

• Single-page applications (SPAs)

• User dashboards and admin panels

• Authenticated content or real-time apps

📊 Summary Table

🏷️ Additional SEO Tips

• Use next/head to include meta tags for title, description, and canonical URLs.

• Enable image optimization with Next.js <Image /> component.

• Use getStaticPaths for dynamic routes with SSG or ISR.

• Combine ISR + CDN caching for global scalability.

🎯 Conclusion

Next.js offers unmatched flexibility when it comes to rendering strategies. The right approach depends entirely on your data freshness, SEO goals, and performance needs.

• 🧠 Use SSR when content changes on every request (e.g., user dashboards).

• ⚡ Use SSG for static pages with rarely changing content.

• 🔄 Use ISR when you need static speed but periodic updates.

• 💻 Use CSR for interactive UIs or user-specific pages.

By blending these strategies, you can build fast, scalable, and SEO-friendly Next.js applications that deliver a seamless user experience.

Picture this: Your frontend is calling a public API endpoint. No authentication barriers, no token requirements—just a simple, open endpoint. Everything should work smoothly, right?

Wrong.

I spent over 2 hours pulling my hair out because my cookies weren't being sent with the requests. The API was public, my code looked fine, but the browser simply refused to include the cookies I needed.

After diving deep into browser behavior, CORS policies, and cookie attributes, I finally understood what was happening. Here's everything I learned so you don't have to waste your afternoon debugging the same issue.

The Big Misconception: Public ≠ Cookie Freedom

Here's the crucial insight that took me way too long to understand:

Just because an endpoint is public doesn't mean the browser will freely send cookies to it.

A "public API" simply means there's no authentication barrier blocking access. But whether cookies are included in requests depends on an entirely different set of rules around:

• Cookie attributes

• Cross-origin request policies

• CORS configuration

The browser doesn't care if the endpoint is "public" or "private"—it cares about security, and it enforces strict rules to protect users from attacks like CSRF (Cross-Site Request Forgery).

The Three Factors That Control Cookie Transmission

After hours of debugging and reading documentation, I identified three critical factors that determine whether cookies are sent with cross-origin requests:

1. SameSite Attribute: The Gatekeeper

The SameSite An attribute is the first line of defense. It tells the browser when a cookie should be included:

SameSite=Strict

• Cookie is ONLY sent on same-site requests

• Cross-site requests? Forget about it—no cookies for you

• Most secure, but breaks legitimate cross-site use cases

SameSite=Lax (default in modern browsers)

• Cookie sent on same-site requests

• Also sent on top-level navigations (like clicking a link)

• NOT sent on cross-site API calls (like fetch or axios requests)

SameSite=None; Secure

• Allows cookies on cross-site requests

• MUST be paired with the Secure flag

• Required for cookies to work in cross-origin API scenarios

Key takeaway: If your backend sets cookies without SameSite=None; Secure, they won't be sent in cross-origin API calls, period.

2. Client-Side Configuration: Ask for Credentials

Even with the right cookie attributes, you need to explicitly tell the browser to include cookies in cross-origin requests.

With Fetch API:

javascript

fetch(`{your_endpoint}`, {
  credentials: 'include'  // This is the magic line
})

With Axios:

javascript

axios.get(`{your_endpoint}`, {
  withCredentials: true  // Enable cookie transmission
})

Without these flags, the browser assumes you don't want cookies sent cross-origin, and it won't include them—even if everything else is configured correctly.

3. Server-Side CORS Headers: The Final Permission

Here's where my 2-hour bug was hiding: the server must explicitly allow credentialed requests with proper CORS headers.

Required headers:

Access-Control-Allow-Credentials: true

Critical rules:

• You CANNOT use Access-Control-Allow-Origin: * with credentials

• The origin must be specific

• Both headers must be present for cookies to be sent

In my case, the frontend had withCredentials: true, but the backend team hadn't configured these CORS headers. The browser saw the mismatch and silently blocked the cookies.

Other Cookie Flags Worth Understanding

While debugging, I also learned about two other important cookie attributes:

HttpOnly

• Prevents JavaScript from accessing the cookie via document.cookie

• Does NOT prevent the browser from sending it in HTTP requests

• Great for security (prevents XSS attacks from stealing session cookies)

Secure

• Cookie will ONLY be sent over HTTPS connections

• Essential for production environments

• Required when using SameSite=None

My Debugging Story: What Went Wrong

Here's exactly what happened in my case:

1. Frontend setup: I was using axios with withCredentials: true ✅

2. Cookie attributes: Backend was setting cookies, but without proper SameSite attributes ❌

3. CORS headers: The public API team hadn't configured Access-Control-Allow-Credentials or a specific Access-Control-Allow-Origin ❌

The result? The browser looked at this mismatched configuration and said, "Nope, not sending those cookies."

Once the backend team added:

• SameSite=None; Secure to the cookies

• Access-Control-Allow-Credentials: true

Everything worked perfectly.

The Complete Checklist for Cross-Origin Cookies

Before you waste hours debugging like I did, check these three things:

✅ Backend Cookie Configuration

• Cookies set with SameSite=None; Secure

• Secure flag present (requires HTTPS)

• HttpOnly flag if you don't need JS access

✅ Frontend Request Configuration

• withCredentials: true (Axios) or credentials: 'include' (Fetch)

• Requests are going to the correct domain

✅ Server CORS Headers

• Access-Control-Allow-Credentials: true

• Access-Control-Allow-Origin set to a specific origin (NOT *)

• Headers present on both preflight and actual responses

All three must align perfectly, or cookies won't be sent.

Pro Debugging Tips

Chrome DevTools is your friend:

1. Open DevTools → Network tab

2. Click on the failed request

3. Go to the "Cookies" tab

4. Look for blocked cookies and the reason why

The browser will tell you exactly why cookies were blocked—you just need to know where to look!

The Bigger Picture: Why Browsers Are So Strict

You might wonder: "Why make this so complicated? Why not just send cookies everywhere?"

The answer is security. These restrictions exist to protect users from:

• CSRF attacks: Malicious sites make requests on your behalf to legitimate sites where you're logged in

• Data leakage: Third-party sites accessing your cookies and session data

• Privacy violations: Tracking users across different websites

The browser assumes cookies contain sensitive data (like session tokens), so it requires explicit permission from both the client AND server before allowing cross-origin transmission.

Yes, it makes development harder. But it also keeps users safe.

Key Takeaways

After spending 2 hours on this bug, here's what I want you to remember:

1. "Public endpoint" doesn't mean "free cookie access"—browsers enforce strict security rules regardless of API accessibility

2. Three things must align:

   • Cookie attributes (SameSite=None; Secure)

   • Client configuration (withCredentials: true)

   • Server CORS headers (Allow-Credentials + specific Allow-Origin)

3. Silent failures are the worst—browsers often block cookies without obvious error messages, so know how to use DevTools to debug

4. This is a backend AND frontend problem—you can't fix it from just one side

5. Security over convenience—these restrictions exist for good reasons, even if they complicate development

Final Thoughts

Cross-origin cookie handling is one of those topics that seems simple until you actually need to implement it. The combination of cookie attributes, CORS policies, and browser security rules creates a complex system that's easy to misconfigure.

But once you understand the rules, debugging becomes much easier. Instead of randomly trying different configurations, you can systematically check each requirement and identify exactly what's missing.

I hope this post saves you from the 2 hours of frustration I went through. If you're working with public APIs and need to send cookies cross-origin, bookmark this checklist—you'll thank yourself later!

#WebDevelopment #CORS #Cookies #Frontend #Backend #Debugging #WebSecurity

What is Keycloak?

Keycloak is a powerful IAM solution that allows you to add authentication and authorization to your applications with minimal effort. It centralizes authentication, eliminating the need to build custom login forms and security mechanisms within each application. Here's a breakdown of its core capabilities:

• Single Sign-On (SSO): Users only need to authenticate once to access multiple applications, improving user experience and reducing password fatigue.

• Authentication and Authorization: Supports various authentication protocols like OpenID Connect (OIDC), OAuth 2.0, and SAML 2.0. Provides fine-grained authorization based on roles, groups, and policies.

• User Management: Offers a user-friendly interface for managing users, groups, and roles. Allows for self-registration, password resets, and account management.

• Identity Brokering: Integrates with existing identity providers (IdPs) like Google, Facebook, Twitter, and LDAP directories, allowing users to authenticate using their existing accounts.

• Centralized Security Management: Provides a centralized console for managing all aspects of security, including realms, clients, users, roles, and policies.

• Customization and Extensibility: Highly customizable through themes, event listeners, and user federation providers. Allows you to tailor Keycloak to meet your specific security needs.

Why Choose Keycloak?

• Open-Source and Free: Keycloak is an open-source project, meaning it's free to use and modify.

• Standards-Based: Adheres to industry standards like OIDC, OAuth 2.0, and SAML 2.0, ensuring interoperability with other systems.

• Scalable and Performant: Designed for high-performance and scalability, making it suitable for large enterprise deployments.

• Easy Integration: Provides libraries and adapters for various programming languages and frameworks, including Spring Boot.

• Community Support: Backed by a vibrant community of developers and users, offering ample support and resources.

Key Concepts in Keycloak:

Before we jump into the integration, let's understand some fundamental Keycloak concepts:

• Realm: A realm represents a security domain. It's like a container for managing users, roles, clients, and identity providers. You can have multiple realms in a Keycloak instance, allowing you to isolate security for different applications or groups of users. Think of it as a tenant.

• Client: Represents an application or service that wants to access resources secured by Keycloak. Each client has its own configuration, including client ID, client secret, and redirect URIs.

• User: Represents a person or entity that can authenticate with Keycloak. Users can belong to one or more groups and have assigned roles.

• Role: A named permission that grants access to specific resources or functionalities. Roles can be assigned to users directly or inherited through group membership. Examples include "admin," "user," or "developer."

• Group: A collection of users that share common characteristics or permissions. Roles can be assigned to groups, simplifying the management of permissions for multiple users.

• Client Scope: Defines the information (claims) that a client can request from Keycloak during the authentication process. Examples include "profile," "email," or "address."

• Authenticator: Defines the authentication flow for a realm. This includes the types of factors for authentication, such as password, OTP, etc.

Keycloak Endpoints Explained:

When integrating Keycloak with a Spring Boot application using OAuth 2.0 / OIDC, certain Keycloak endpoints play a crucial role. Understanding these endpoints is key to troubleshooting and customizing your integration.

Authorization Endpoint (/auth/realms/{realm}/protocol/openid-connect/auth):

• • Purpose: This is where the authentication process begins. When a user tries to access a protected resource in your Spring Boot application, they're redirected to this endpoint. This is where Keycloak presents the login page.

    • Parameters: This endpoint expects several parameters, including:

      • client_id: The ID of the client application (your Spring Boot app).

      • response_type: Usually code (for the authorization code grant type).

      • redirect_uri: The URI to which Keycloak will redirect the user after successful authentication.

      • scope: The requested scopes (e.g., openid, profile, email).

      • state: A random string used to prevent cross-site request forgery (CSRF). Spring Security automatically handles this.

    • Response:

      • If authentication is successful, Keycloak redirects the user back to the redirect_uri with an authorization code in the URL (e.g., http://localhost:8081/login/oauth2/code/keycloak?code=AUTH_CODE&state=STATE).

      • If authentication fails, Keycloak might redirect with an error parameter.

Token Endpoint (/auth/realms/{realm}/protocol/openid-connect/token):

• • Purpose: This endpoint is used to exchange the authorization code obtained from the authorization endpoint for an access token and, optionally, a refresh token and an ID token.

    • Parameters: This is a POST request that requires the following parameters in the request body (using application/x-www-form-urlencoded content type):

      • grant_type: Must be authorization_code for this flow.

      • code: The authorization code received from the authorization endpoint.

      • redirect_uri: The same redirect URI used in the authorization request.

      • client_id: The ID of the client application.

      • client_secret: The secret of the client application (required for confidential clients).

    • Response: A JSON response containing:

      • access_token: The token used to access protected resources.

      • refresh_token: A token used to obtain new access tokens without requiring the user to re-authenticate.

      • id_token: A JSON Web Token (JWT) containing information about the authenticated user.

      • expires_in: The lifetime of the access token in seconds.

      • refresh_expires_in: The lifetime of the refresh token in seconds.

      • token_type: The type of token (usually bearer).

User Info Endpoint (/auth/realms/{realm}/protocol/openid-connect/userinfo):

• • Purpose: This endpoint allows you to retrieve information about the authenticated user.

    • Authentication: Requires a valid access token (usually passed in the Authorization header as a Bearer token).

    • Response: A JSON response containing user attributes, such as:

      • sub: The user's unique identifier (subject).

      • name: The user's full name.

      • given_name: The user's first name.

      • family_name: The user's last name.

      • email: The user's email address.

      • email_verified: A boolean indicating whether the email address has been verified.

Logout Endpoint (/auth/realms/{realm}/protocol/openid-connect/logout):

• • Purpose: This endpoint allows you to log the user out of Keycloak. This is important to ensure that the user is completely logged out of all applications using Keycloak.

    • Parameters:

      • client_id: The ID of the client application.

      • refresh_token: The refresh token. This is the preferred method for logging out.

      • id_token_hint: Optional, the ID token.

    • Logging Out in Spring Boot: To properly log out the user, you can invalidate the Spring Security session and also redirect the user to the Keycloak logout endpoint. You can use Spring Security's logout functionality and configure a logoutSuccessHandler to redirect to Keycloak's logout endpoint.

Token Introspection Endpoint (/auth/realms/{realm}/protocol/openid-connect/token/introspect):

• • Purpose: Allows a resource server (e.g., your Spring Boot API) to verify the validity of an access token. This is useful when the resource server needs to independently confirm that a token is still active and has not been revoked.

    • Parameters: This is a POST request with the following parameters in the request body (using application/x-www-form-urlencoded):

      • token: The access token to be introspected.

      • client_id: The ID of the client application (resource server).

      • client_secret: The secret of the client application (resource server - if it's a confidential client).

    • Response: A JSON response containing:

      • active: A boolean indicating whether the token is active (true) or not (false).

      • If active is true, the response may also include other token metadata, such as the subject (sub), scopes (scope), expiration time (exp), and issuer (iss).

Public Keys Endpoint (/auth/realms/{realm}/protocol/openid-connect/certs):

• • Purpose: This endpoint provides the public keys that Keycloak uses to sign JWTs (JSON Web Tokens), such as access tokens and ID tokens.

    • Usage: Resource servers can use these public keys to verify the signature of JWTs and ensure that they were issued by Keycloak and haven't been tampered with.

    • Response: A JSON response containing a set of JSON Web Keys (JWKs).

How to Create a Realm, User, and Client in Keycloak:

Let's go through the steps involved in creating these essential Keycloak entities. These steps are performed through the Keycloak Admin Console (accessible at http://localhost:8080 by default).

1. Creating a Realm:

• Login to the Admin Console: Log in to the Keycloak Admin Console using the administrator account you created during Keycloak setup.

• Navigate to Realms: In the top-left corner, you'll see a dropdown that likely says "Master". This represents the "master" realm.

• Create Realm: Click the dropdown and select "Create realm".

• Enter Realm Name: Enter a descriptive name for your realm (e.g., my-app-realm) and click "Create".

• Realm Settings (Optional): After creating the realm, you'll be taken to the realm settings page. You can configure various settings, such as:

  • Login Theme: Customize the login page appearance.

  • Email Settings: Configure email settings for sending password reset emails.

  • Security Defenses: Enable security features like brute-force detection.

2. Creating a User:

• Select Your Realm: Make sure you've selected the realm you created (e.g., my-app-realm) in the top-left corner.

• Navigate to Users: In the left-hand menu, click "Users".

• Add User: Click the "Add user" button.

• Enter User Details: Enter the user's details:

  • Username: A unique username for the user.

  • Email: The user's email address (optional but recommended).

  • First Name: The user's first name (optional).

  • Last Name: The user's last name (optional).

  • Enabled: Make sure the user is enabled.

• Click "Create".

• Set Password: After creating the user, you'll be taken to the user's details page. Go to the "Credentials" tab.

  • New Password: Enter a password for the user.

  • Password Confirmation: Confirm the password.

  • Temporary: Set "Temporary" to "Off" if you want the user to use this password permanently. If set to "On," the user will be forced to change the password on their first login.

  • Click "Set Password".

• Optional: Add Attributes: You can add custom attributes to the user profile in the "Attributes" tab.

3. Creating a Client:

• Select Your Realm: Ensure you're in the correct realm (e.g., my-app-realm).

• Navigate to Clients: In the left-hand menu, click "Clients".

• Create Client: Click the "Create client" button.

• Enter Client ID: Enter a unique ID for your client application (e.g., my-spring-boot-app).

• Select Client Type: Select "Regular web application" or "Confidential" if you want client secret. Otherwise, choose "Public". Click "Save".

• Configure Client Settings: After creating the client, you'll be taken to the client settings page. Configure the following important settings:

  • Client ID: (Already set) The unique identifier for the client.

  • Client Protocol: Usually openid-connect.

  • Root URL: The base URL of your Spring Boot application (e.g., http://localhost:8081).

  • Valid Redirect URIs: The URIs to which Keycloak will redirect after successful authentication. Use wildcards for development (e.g., http://localhost:8081/*). For production, be specific. The Spring Security default is usually ${baseUrl}/login/oauth2/code/{registrationId} or, in your application.yml file, "{baseUrl}/login/oauth2/code/{registrationId}"

  • Web Origins: The origins from which your application can make cross-origin requests to Keycloak. Use wildcards for development (e.g., *).

  • Access Type:

    • Confidential: Suitable for server-side applications that can securely store a client secret. Requires a client secret for authentication.

    • Public: Suitable for client-side applications (e.g., JavaScript applications) where the client secret cannot be securely stored.

  • Service Accounts Enabled: Enable if you need to use the client's credentials to access resources on behalf of the client itself (client credentials grant).

• Credentials Tab (If Access Type is Confidential):

  • If you selected "Confidential" access type, go to the "Credentials" tab to obtain the client secret. You'll need this in your Spring Boot application's configuration.

• Roles Tab: * Manage default client roles here. Also map the roles of users who log in into the client.

Integrating Keycloak with Spring Boot: Step-by-Step Guide

Now, let's walk through the steps to integrate Keycloak with your Spring Boot application.

1. Setting up Keycloak:

• Download and Install Keycloak: Download the latest version of Keycloak from the official website (https://www.keycloak.org/downloads). Extract the archive to a directory of your choice.

• Start Keycloak: Navigate to the bin directory within the Keycloak installation folder and run the appropriate script for your operating system:

  • Linux/macOS: ./kc.sh start-dev

  • Windows: kc.bat start-dev

This starts Keycloak in developer mode, which is suitable for testing and development. For production deployments, you'll need to configure Keycloak with a database and appropriate security settings.

• Access the Keycloak Admin Console: Open your web browser and navigate to http://localhost:8080. You'll be prompted to create an administrator account. Create a username and password.

• Create a Realm: Log in to the Keycloak admin console with the administrator account you just created. By default, you'll be in the "master" realm, which is used for managing Keycloak itself. It's best practice to create a separate realm for your application. Click the "Create realm" button and enter a name for your realm (e.g., "my-app-realm").

• Create a Client: Within your newly created realm, click on "Clients" in the left-hand menu and then click "Create client." Enter a client ID (e.g., "my-spring-boot-app"). For "Client type," select "Regular web application" or "Confidential". Click "Save".

• Configure the Client: On the client details page, configure the following:

  • Root URL: The base URL of your Spring Boot application (e.g., http://localhost:8081).

  • Valid Redirect URIs: The URIs to which Keycloak will redirect after successful authentication. Include a wildcard URI for development (e.g., http://localhost:8081/*). For production, specify the exact redirect URIs. A common URI is http://localhost:8081/login/oauth2/code/keycloak.

  • Web Origins: The origins from which your application can make cross-origin requests to Keycloak. For development, use a wildcard (e.g., *). For production, specify the exact origins.

  • Access Type: "confidential" - This provides enhanced security, requiring a client secret.

• Retrieve Client Credentials: If you selected "confidential" access type, you'll need the client secret. Go to the "Credentials" tab of your client configuration and copy the "Secret".

• Create a User (Optional): You can create a test user within your realm to test the authentication flow. Go to the "Users" menu and click "Add user." Enter the user's details and set a password.

2. Setting up Your Spring Boot Application:

• Create a New Spring Boot Project: Use Spring Initializr (https://start.spring.io/) to create a new Spring Boot project with the following dependencies:

  • Spring Web: For building web applications.

  • Spring Security: For securing your application.

  • OAuth2 Client: For OAuth2/OIDC integration.

  • Thymeleaf (Optional): For creating dynamic web pages.

  • Lombok (Optional): For reducing boilerplate code.

Add Keycloak Dependencies: Add the following dependencies to your pom.xml file:

•   <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-oauth2-client</artifactId>
    </dependency>
  
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>
  
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
  
    <dependency>
        <groupId>org.thymeleaf</groupId>
        <artifactId>thymeleaf-spring5</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
  

• Configure application.properties or application.yml: Add the following Keycloak configuration properties to your application configuration file:

    spring:
      security:
        oauth2:
          client:
            registration:
              keycloak:
                client-id: my-spring-boot-app # Your Client ID from Keycloak
                client-secret: YOUR_CLIENT_SECRET # Your Client Secret from Keycloak
                provider: keycloak
                authorization-grant-type: authorization_code
                redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}" #Important for the redirect URI. Replace "{baseUrl}" to your application's URL. e.g. http://localhost:8081
            provider:
              keycloak:
                issuer-uri: http://localhost:8080/realms/my-app-realm #  Your Keycloak Realm URL
  
    server:
        port: 8081
  

  Important: Replace the placeholders (my-spring-boot-app, YOUR_CLIENT_SECRET, my-app-realm, and port number) with your actual Keycloak client ID, client secret, realm name, and your application's port number.

• Create a Security Configuration Class: Create a class that extends WebSecurityConfigurerAdapter to configure Spring Security.

    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.security.config.annotation.web.builders.HttpSecurity;
    import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
    import org.springframework.security.web.SecurityFilterChain;
  
    import static org.springframework.security.config.Customizer.withDefaults;
  
    @Configuration
    @EnableWebSecurity
    public class SecurityConfig {
  
        @Bean
        public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
            http
                    .authorizeHttpRequests(authorize -> authorize
                            .mvcMatchers("/public/**").permitAll() // Allow public access to /public/**
                            .anyRequest().authenticated() // Require authentication for all other requests
                    )
                    .oauth2Login(withDefaults()); // Enable OAuth2 login
  
            return http.build();
        }
    }
  

  Explanation:

  • @Configuration: Indicates that this class is a configuration class.

  • @EnableWebSecurity: Enables Spring Security.

  • SecurityFilterChain: Defines a chain of filters used for security.

  • .authorizeHttpRequests(): Configures authorization rules.

  • .mvcMatchers("/public/**").permitAll(): Allows access to all URLs starting with /public/ without authentication. This is useful for static resources or publicly accessible pages.

  • .anyRequest().authenticated(): Requires authentication for all other requests.

  • .oauth2Login(withDefaults()): Enables OAuth 2.0 login. Spring Security will automatically configure the OAuth 2.0 client based on the properties defined in application.properties or application.yml.

Create a Controller: Create a simple controller to demonstrate the protected and public endpoints.

•   import org.springframework.security.core.Authentication;
    import org.springframework.security.core.context.SecurityContextHolder;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.GetMapping;
  
    @Controller
    public class MyController {
  
        @GetMapping("/public")
        public String publicEndpoint() {
            return "public"; // public.html
        }
  
        @GetMapping("/secured")
        public String securedEndpoint(Model model) {
             Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
                if (authentication != null && authentication.isAuthenticated()) {
                    model.addAttribute("username", authentication.getName());
                    return "secured";
                }
  
            return "redirect:/oauth2/authorization/keycloak"; // Redirect to Keycloak login if not authenticated
        }
  
        @GetMapping("/")
            public String indexPage() {
                return "redirect:/secured";
        }
    }
  

Create Thymeleaf Templates (Optional): Create simple Thymeleaf templates for public.html and secured.html.

• public.html:

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Public Page</title>
    </head>
    <body>
        <h1>Public Page</h1>
        <p>This page is accessible without authentication.</p>
        <a href="/secured">Go to Secured Page</a>
    </body>
    </html>
  

  secured.html:

    <!DOCTYPE html>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Secured Page</title>
    </head>
    <body>
        <h1>Secured Page</h1>
        <p>Welcome, <span th:text="${username}"></span>!</p>
        <p>This page is accessible only to authenticated users.</p>
         <form th:action="@{/logout}" method="post">
            <input type="submit" value="Sign Out"/>
        </form>
    </body>
    </html>
  

3. Running the Application:

• Start Your Spring Boot Application: Run your Spring Boot application using your IDE or the command line (./mvnw spring-boot:run).

• Access the Application: Open your web browser and navigate to http://localhost:8081/.

  • You will be redirected to the Keycloak login page.

  • Enter the credentials of the user you created in Keycloak (or the admin user if you haven't created a separate user).

  • After successful authentication, you will be redirected back to your Spring Boot application, and you should see the content of the /secured page, including the username.

• Test Public Endpoint: Navigate to http://localhost:8081/public. You should be able to access this page without being redirected to the Keycloak login page.

Explanation of the Integration:

1. When you access the /secured endpoint, Spring Security intercepts the request and checks if the user is authenticated.

2. If the user is not authenticated, Spring Security redirects the user to the Keycloak authorization endpoint (configured in application.properties or application.yml).

3. Keycloak authenticates the user based on the configured authentication methods (e.g., username/password).

4. After successful authentication, Keycloak redirects the user back to the redirect-uri of your application, along with an authorization code.

5. Spring Security's OAuth 2.0 client exchanges the authorization code for an access token and a refresh token from Keycloak.

6. The access token is used to authenticate subsequent requests to the /secured endpoint.

7. Spring Security stores the user's authentication information (including the access token) in the SecurityContextHolder.

8. The controller retrieves the authentication information from the SecurityContextHolder and displays the username on the /secured page.

Important Considerations:

• Security: Protect your client secrets and configure redirect URIs carefully to prevent security vulnerabilities.

• Scope: Use scopes to limit the information that your application can access from Keycloak.

• User Roles: Use Keycloak roles to implement fine-grained authorization in your Spring Boot application. Map client roles of the user to spring security roles.

• Logging: Enable logging in Keycloak to monitor authentication activity and troubleshoot issues.

Further Considerations and Advanced Features:

• Roles and Permissions: You can configure Keycloak roles and map them to Spring Security authorities to implement fine-grained authorization. You can use @PreAuthorize annotations in your controllers to restrict access to specific endpoints based on roles.

• User Federation: You can configure Keycloak to federate with existing user directories, such as LDAP or Active Directory, so you don't need to manage users in Keycloak itself.

• Custom Authentication Flows: Keycloak allows you to customize the authentication flow to meet your specific requirements, such as adding multi-factor authentication (MFA) or custom authentication providers.

• Token Introspection: If your application needs to validate the access token, you can use Keycloak's token introspection endpoint.

• Keycloak Admin REST API: You can programmatically interact with Keycloak using its REST API to automate tasks such as user management, client configuration, and realm management.

• Keycloak Client Adapters: Keycloak provides client adapters for various programming languages and frameworks, including Spring Boot, which simplify the integration process. While we used Spring Security's built-in OAuth2 client support in this example, you can also use the Keycloak Spring Boot adapter for more advanced features.

• Security Best Practices: Always follow security best practices when configuring Keycloak and your Spring Boot application, such as using strong passwords, enabling HTTPS, and regularly updating your dependencies.

• Session Management: Keycloak manages user sessions. You can configure session timeouts and other session-related settings in the Keycloak admin console. Spring Security integrates with Keycloak's session management, ensuring consistent session handling across your application and Keycloak.

By understanding these Keycloak endpoints, mastering the creation of realms, users, and clients, and following the integration steps, you'll be well-equipped to integrate Keycloak with your Spring Boot applications and build secure, robust solutions. Remember to always follow security best practices to protect your applications and user data. Embrace Keycloak to build secure and scalable applications in today's dynamic world.

Amazon Machine Images (AMI) are the fundamental building blocks for creating virtual machines (EC2 instances) in the Amazon Web Services (AWS) cloud. An AMI is essentially a snapshot or template of a virtual machine that includes the operating system, software, and configurations required to launch an instance. Think of it as a pre-configured "golden image" that you can use to quickly spin up new EC2 instances, saving you time and effort.

🛠️ Step 2: Customizing Your AMI

The real power of AMIs lies in their ability to be customized to your specific needs. Instead of starting from scratch each time you need to launch a new instance, you can create an AMI that includes all the necessary software, configurations, and even your own custom applications. This way, when you launch a new instance from your AMI, everything is already set up and ready to go.

Example: Deploying a React Application

Let's say you have a React application that you want to deploy on AWS. You could create an AMI that includes the necessary dependencies, such as Node.js and your application code, pre-installed and configured. Then, whenever you need to launch a new instance for your application, you can use this custom AMI, and your app will be ready to run without any additional setup.

🛠️ Step 3: Creating Your Own AMI

There are a few ways to create a custom AMI, but the simplest method is to start with an existing EC2 instance, configure it to your liking, and then create an AMI from that instance. Here's how you can do it:

Step 3.1: Launch an EC2 Instance

First, launch an EC2 instance using an existing base image (e.g., Amazon Linux, Ubuntu, Windows Server) that aligns with your requirements.

Step 3.2: Customize the Instance

Once your instance is running, connect to it and start customizing it. Install any necessary software, configure settings, and deploy your applications. This is the step where you'll make your instance unique and tailored to your needs.

Step 3.3: Create an AMI from the Instance

After you've finished customizing the instance, you can create an AMI from it. In the AWS Management Console, locate the instance, right-click on it, and select "Image" and then "Create Image." This will capture the current state of your instance, including all the software and configurations you've added, and save it as a new AMI.

🚀 Step 4: Launching Instances from Your Custom AMI

Now that you have your custom AMI, you can use it to launch new EC2 instances whenever you need them. Simply navigate to the AMIs section in the AWS Management Console, select your custom AMI, and click "Launch Instance." All the software and configurations you've set up will be automatically applied to the new instance, saving you time and ensuring consistency across your deployments.

🌟 Conclusion

Creating custom AMIs in AWS is a powerful way to streamline your infrastructure and ensure consistency across your deployments. By pre-configuring your instances with the necessary software, dependencies, and even your own applications, you can launch new resources quickly and with confidence. Embrace the flexibility and efficiency of AWS AMIs to take your cloud-based applications to the next level!

If you want to connect with me,

• LinkedIn

• Twitter / X

• GitHub

What is Next.js?

Next.js is an open source JavaScript framework that is built on top of React.js. It is designed to make it easier to create server-side React applications with a focus on developer productivity, performance, and SEO (search engine optimization). Next.js provides a set of tools and conventions that simplify various aspects of building web applications.

Why should you care about Next.js?

If you have just learned React.js, you might be wondering why you should also learn Next.js. The answer is simple: Next.js is the superpower of React.js. By using Next.js, you can improve the performance of your application, optimize it for search engines, and simplify your development process.

The Key Features of Next.js

Next.js offers several key features that make it a powerful framework for building web applications:

Server-Side Rendering (SSR)

Next.js allows you to render React components on the server side before sending them to the client. This can improve page load time and SEO, as search engines can easily index the content.

Static Site Generation (SSG)

Next.js supports static site generation, where you can pre-render pages at build time. This approach is great for content-heavy websites and can offer better performance and SEO benefits.

API Routes

Next.js provides a built-in API routes feature that allows you to create serverless API endpoints within your project. This makes it easier to handle backend logic.

Full Stack Framework

Next.js is a full stack framework that offers both frontend and backend capabilities. It provides server components and client components, which you will learn about in depth throughout this course.

Getting Started with Next.js

To get started with Next.js, you will need to install it on your machine. Here are the steps: 1. Open your terminal and navigate to the desired directory where you want to create your Next.js project. 2. Run the following command: npx create-next-app your-project-name 3. Replace your-project-name with the desired name for your project. 4. Press enter and wait for the installation process to complete. 5. Once the installation is complete, navigate to the project directory by running cd your-project-name. 6. Run the development server by running the command npm run dev or yarn dev. 7. Open your browser and navigate to http://localhost:3000 to see your Next.js application running.

Creating Routes in Next.js

In Next.js, creating routes is simple. You just need to create a folder with the desired route name and a file called page.js inside it. For example, if you want to create a route for the about page, create a folder called about and inside it, create a file called page.js. In this file, you can define the content for that specific route. You can also create nested routes by creating nested folders. For example, if you want a nested route for user information inside the about page, create a folder called users inside the about folder, and inside the users folder, create a file called page.js.

Linking Pages in Next.js

Next.js provides a Link component that allows you to create links to navigate between pages in your application. To use the Link component, import it from next/link and specify the path you want to navigate to using the href prop. For example, About will create a link to the about page.

Programmatic Navigation with useRouter Hook

Next.js also provides a useRouter hook that allows you to access the router object and its properties within your component. This hook gives you programmatic control over the router and allows you to navigate to different pages or perform other routing-related actions in response to user interactions or events. To use the useRouter hook, import it from next/router. You can then create an instance of the router object and use its push method to navigate to a specific page. For example, router.push('/about') will navigate the user to the about page.

Data Fetching Fundamentals

Fetching Data on the Server

Next JS allows us to fetch data on the server using server components. By doing so, we can pre-render the data and improve the performance of our web application. This is achieved by using server-side rendering (SSR) and pre-rendering.

Fetching Data in Parallel

To minimize loading times, it is recommended to fetch data in parallel. This means fetching multiple sets of data simultaneously, rather than waiting for one request to finish before starting another. By doing this, we can optimize the loading process and provide a better user experience.

Fetching Data Where It's Used

Next JS allows us to fetch data where it's used, which means we can request data on a specific page or component. This helps to reduce unnecessary requests and improve performance. Next JS automatically deduplicates requests, so even if the same data is requested multiple times, it will only be fetched once.

Using Loading UI and Error Boundaries

To enhance the user experience, it is recommended to use loading UI and error boundaries. Loading UI provides visual feedback to the user while data is being fetched, ensuring that they know the application is working. Error boundaries help to handle and display errors gracefully, preventing the application from crashing and providing the user with options to recover or try again.

Styling in Next.js

Styling is an important aspect of any web application, and Next.js provides several options for styling your application. In this chapter, we'll cover how to add global CSS styles, as well as how to use CSS modules and Tailwind CSS in Next.js.

To add global CSS styles, you can create a file called "Global CSS" in the app/ui folder and import it in your layout component. This file can contain CSS rules that will be applied to all routes in your application. Additionally, you can use CSS modules to scope CSS to specific components, and Tailwind CSS for utility-based styling.

Optimizing Fonts and Images in Next.js

Fonts and images play a crucial role in the design and performance of a website. In this chapter, we'll explore how to optimize fonts and images in Next.js to improve performance and user experience.

Next.js provides an automatic font optimization feature through the Next Font module. This module downloads font files at build time and serves them as static assets, reducing the need for additional network requests. To add custom fonts to your application, you can import them in the app/ui/fonts.js file and apply them to the body element in your layout component.

Next.js also offers the Next Image component, which optimizes images by resizing them based on the device viewport, lazy loading images outside the viewport, and serving images in modern formats like WebP and AVIF. To add images to your application, you can use the Next Image component and specify the image source, width, height, and other attributes.

Conclusion

Next.js is a powerful framework that extends the functionality of React.js and makes it easier to build server-side React applications. With features like server-side rendering, static site generation, and built-in API routes, Next.js offers developers a productive and efficient way to create high-performance web applications. Whether you are a beginner or an experienced React developer, learning Next.js can take your skills to the next level. So why wait? Start exploring Next.js today and unlock the full potential of React.js!

As a developer, our primary goal is to build the software that works.

To ensure the software is working perfectly, we tests it using different softwares. In testing we check whether the software is working perfectly or not using different test cases.

What is testing actually?

Testing is the process of evaluating a system or component to identify any discrepancies between expected and actual behavior. In software development, testing is crucial for ensuring the reliability, correctness, and performance of the software. Testing helps identify bugs, errors, and potential issues in the code, allowing developers to fix them before the software is deployed to production.

Why we need it?

Testing is essential in the MERN stack to ensure the functionality, reliability, and security of the software. It helps identify and rectify bugs, defects, and performance issues, ensuring that the application behaves as expected. Through systematic testing, developers can validate business logic, secure sensitive data, and maintain the integrity of the codebase. Testing also supports ongoing development by facilitating regression testing, safeguarding existing features as new functionalities are added. Ultimately, testing builds confidence in the application's quality, contributing to a positive user experience and overall success of the MERN stack project.

Manual Testing

An individual will open the website, interact with the website and ensure everything works as intended. If a new features is released, you repeat the same stpes. You may need to test the whole software when the new features is added.

There are some drawbacks of manual testing.

Drawbacks of Manual Testing

1. Time consuming.

2. complex repetitive tasks has a risk of human errors.

3. You may not get a chance to test the entire application every time due to not having the sufficient time.

The solution is automated testing.

Automated testing

Automated testing is a software testing technique where the execution of test cases is performed automatically by using specialized testing tools and scripts. Instead of manually executing each test scenario, automated testing relies on automation scripts to carry out pre-defined actions, check expected results, and report outcomes. The primary goal of automated testing is to enhance the efficiency, repeatability, and accuracy of the testing process, particularly in complex or large-scale software projects.

• Automated tests are programs that automate the task of testing your software

• write code to test the software code

• additional effort required when you develop a feature

Advantages of automated testing

1. Not time consuming

2. Reliable, consistent and not error prone

3. easy to identify and fix the features that break the test

4. gives confidence when shipping software

Types of testing

1. Units Test

2. integration Test

3. E2E test

Unit Testing

Focus is on testing the individual building blocks of an applications such as a class or a function or a component. Each unit or building block is tested in isolation, independent of other units Dependencies are mocked Run in a short amount of time and make it very easy to pinpoint failure. Relatively easier to write and maintain.

Integration Testing

Focus is on testing a combination of units and ensuring they work together. Take longer than unit tests

E2E test - End to End testing

Focus is on testing the entire application flow and ensuring it works as designed from start to finish involves in a real UI, a real backend and real databases are connected and real services etc. Take the longest time to complete because it cover the all most all amount of code Have a cost implication as you interact with the real UI, APIs that may charge based on the number of requests.

Testing pyramid

• E2E test - more time, more code, less test

• Integration test - medium test, medium length of code, medium amount of test

• Unit test - less time, less code, more code

Jest and RTL

Jest

Jest is a JavaScript testing framework created by Facebook, known for its simplicity and speed. It requires minimal configuration, offers built-in mocking and assertions, and is commonly used for testing JavaScript and React applications. Jest provides features like snapshot testing, parallel test execution, and code coverage reporting to enhance the efficiency of the testing process.

Jest is a open-source JavaScript testing framework that find tests, runs the tests, determines whether the tests passed or fails and reports it back in the human readable manner.

RTL - React Testing Library

RTL, or React Testing Library, is a lightweight testing library for React. It emphasizes testing components based on user interactions and behavior rather than internal implementation details. RTL provides simple utilities for querying and interacting with rendered components, making it a popular choice for user-centric testing in React applications.

RTL is a JavaScript testing utility that provides virtual DOM for testing react components.

React Testing library provides a virtual DOM which we can use to interact with and verify the behaviour of a react component. Testing library is infact a family of packages which helps to test the UI components. The core library is called DOM testing library and RTL is simply a wrapper around this core library to test react applications in an easier way.

The RTL Philosophy

"The more your tests resemble the way your software is used, the more confidence they can give you."

• Tests we are going to learn to write in this series strike a balance between unit tests in the sense they are at a component level and easy to write and maintain and E2E tests in the sense they resemble the way a user would interact with the component.

• With RTL, we are not concerned about the implementation details of a component.

• Like how it is handing click event, or how it is updating the text.

• instead we are testing how the components behaves when a user interacts with it.

• Refactoring will not affect your test as long as the end result is the same.

Code with Jest and RTL

1. Create new project with React

npx create-react-app my-jest-rtl-app
cd my-jest-rtl-app

1. Install Jest and RTL

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

1. Create Jest Configuration

Create a basic Jest configuration file in the project's root folder. Add a jest.config.js file:

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ["@testing-library/react/cleanup-after-each"],
};

1. Update Scripts inpackage.json

// package.json
{
  "scripts": {
    "test": "jest"
  }
}

or

// package.json
{
  "scripts": {
    "test": "react-scripts test"
  }
}

1. Create a Simple Componen

// TextComponent.jsx
import React from "react";

const TextComponent = ({ text }) => {
  return <div>{text}</div>;
};

export default TextComponent;

1. Write a Simple Test

create the TextComponent.test.js file right after creating the TextComponent.jsx file.

// TextComponent.test.js
import React from "react";
import { render, screen } from "@testing-library/react";
import TextComponent from "./TextComponent";

test("renders text component with given text", () => {
  render(<TextComponent text="Hello, Jest and RTL!" />);
  const textElement = screen.getByText(/hello, jest and rtl/i);
  expect(textElement).toBeInTheDocument();
});

1. Run the test

npm test

or

jest

This should execute the test for the TextComponent, checking if it renders the text "Hello, Jest and RTL!" correctly.

This is a basic setup to get you started with Jest and RTL in a Create React App project. As your project evolves, you can explore more advanced testing scenarios and features provided by Jest and React Testing Library.

Test function in Jest

By default, the test function has three parameters

1. name - the name of the test that user want to give

2. function - which contains actual logic or the actual output that user want to test.

time_duration - After how many second user want to terminate the test If it will not giving the output.

Syntax of test function

test("name", () => {
    //logic
}, time_duration)

The Watch mode in Jest

Watch mode is an option that we can pass to jest asking to watch files that have changed since the last commit and execute tests related only to those changed files.

An optimization designed to make your tests run fast regardless of how many tests you have.

It will first see the which file is changed then it will just test those files which is changed.

This will help when we have a thousands of lines of code and just we have to test those files which has been changed recently.

So, we have to make sure which file has been changed since last edit.

If you want to test with Jest's watch mode then write this in terminal:

jest --watch //runs jest -o by default
jest --watchAll //runs all tests

test.only method

test.only method will help if we want to test only that part of logic in application. It will help when we have a multiple test function in one file.

test.skip method

It will skip that test and other logic will be tested. This is helpful when we know that some of the test will automatically passed.

Conclusion

In conclusion, delving into the testing cosmos of React unveils the efficiency of automation, the simplicity of Jest, and the user-centric approach of React Testing Library (RTL). Together, these tools empower developers to build more resilient applications with comprehensive test coverage. As we journey beyond Jest and RTL, the broader React testing ecosystem awaits exploration, offering endless possibilities for fortifying code and ensuring high-quality software in a dynamic testing landscape.

If you want to connect with me,

• GitHub

• LinkedIn

• Twitter / X

Redux is a state management library for JavaScript applications, commonly employed with frameworks like React. It centralizes the application state in a single store, accessible through actions dispatched by components. Actions that describe state changes are processed by pure functions called reducers that update the state. The store, acting as a container for the state, ensures a predictable flow, and middleware can be employed for additional functionalities like handling asynchronous operations. With the principles of immutability and unidirectional data flow, Redux provides a structured and scalable approach to managing the complex state of web applications, enhancing maintainability and development efficiency.

What is the Redux Toolkit?

Redux Toolkit is an official package that simplifies the process of working with Redux by providing a set of conventions and utility functions. It includes utilities like createSlice for defining reducers and actions more concisely, configureStore for setting up the Redux store with sensible defaults, and createAsyncThunk for handling asynchronous logic. The toolkit aims to streamline common Redux patterns, reduce boilerplate code, and enhance developer productivity, making it easier for developers to adopt and maintain Redux in their applications.

Why redux toolkit is needed, If there is multiple hooks are available in React?

Redux Toolkit was introduced to streamline and simplify the process of managing state in React applications using Redux. While React's built-in useState and useReducer hooks provide a local state management solution, they are primarily designed for managing component-level states. Redux, on the other hand, is geared towards managing global state and can be particularly useful in larger applications with complex state interactions.

Redux Toolkit aims to address some of the boilerplate and setup complexities traditionally associated with Redux. It provides convenient functions like createSlice for defining reducers and actions more concisely, configureStore for setting up the Redux store with sensible defaults, and createAsyncThunk for handling asynchronous logic.

The decision to use Redux Toolkit versus useState or useReducer often depends on the scale and complexity of the application. For smaller projects, the built-in React hooks might be sufficient. However, as an application grows, Redux Toolkit can offer a more organized and maintainable approach to handling global states, providing a standardized structure that can be beneficial for large and complex React applications.

Setting up the Redux Toolkit

Installing Redux and Redux Toolkit

Open your terminal and run the following command to install Redux and Redux Toolkit using npm:

npm install @reduxjs/toolkit react-redux

Setting up the Redux Store

In your React application, create a new file named store.js to configure the Redux store. Use the configureStore function from the Redux Toolkit:

// store.js
import { configureStore } from '@reduxjs/toolkit';

const store = configureStore({
  reducer: {
    // Add your reducers here
  }
});

export default store;

Configuring Redux Toolkit

Adding Middleware

Middleware enhances the functionality of Redux. You can add middleware during the store configuration. For example, adding the redux-logger middleware for logging:

// store.js
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import logger from 'redux-logger';

const store = configureStore({
  reducer: {
    // your reducers go here
  },
  middleware: [...getDefaultMiddleware(), logger],
});

export default store;

Enabling Redux DevTools Extension

To enable the Redux DevTools Extension, modify the store configuration:

// store.js
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import logger from 'redux-logger';

const store = configureStore({
  reducer: {
    // your reducers go here
  },
  middleware: [...getDefaultMiddleware(), logger],
  devTools: process.env.NODE_ENV !== 'production',
});

export default store;

This configuration ensures that the DevTools Extension is only enabled in development.

Creating Redux Slices

In the Redux Toolkit, a slice is a portion of the Redux store that is managed by a reducer and its actions. Let's create a simple counter slice:

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

Now, include this slice in your store configuration:

// store.js
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import logger from 'redux-logger';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  middleware: [...getDefaultMiddleware(), logger],
  devTools: process.env.NODE_ENV !== 'production',
});

export default store;

Integrating Redux with React

Connecting the Redux Store to React

Wrap your main application component with the Provider from react-redux to make the Redux store available to all components:

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Accessing State and Dispatching Actions

Now, in your React components, you can use the useSelector hook to access the state and the useDispatch hook to dispatch actions:

// CounterComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

const CounterComponent = () => {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

Advanced Concepts

Handling Asynchronous Actions with Redux Thunk

Redux Toolkit provides middleware for handling asynchronous actions. Let's extend our counter slice to include an asynchronous action:

// counterSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

const fakeApiCall = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(42);
    }, 1000);
  });
};

export const fetchAsyncData = createAsyncThunk('counter/fetchAsyncData', async () => {
  const data = await fakeApiCall();
  return data;
});

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0, status: 'idle' },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchAsyncData.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchAsyncData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.value += action.payload;
      });
  },
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

In this example, we've added an asynchronous action fetchAsyncData that simulates fetching data from an API. The extraReducers field in the slice handles the different states of the asynchronous action.

Now, you can use this asynchronous action in your components:

// CounterComponent.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, fetchAsyncData } from './counterSlice';

const CounterComponent = () => {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchAsyncData());
  }, [dispatch]);

  return (
    <div>
      <p>Counter: {counter.value}</p>
      <p>Status: {counter.status}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

Benefits of Redux

There are several benefits to using Redux in your applications:

1. Synchronized Data

With Redux, you can keep different parts of the UI in sync by storing all the application states in a central repository. This eliminates the need for individual components to manage their state and ensures that all parts of the UI have access to the same data.

1. Transparent Data Flow

Redux makes it easy to understand how data changes in your application. If something goes wrong, you can quickly see how the data changed, why it changed, and where it came from. This makes debugging and troubleshooting much easier.

1. Debugging Tools

Redux provides powerful debugging tools that allow you to track and inspect the state of your application in real-time. You can easily go back to previous actions and restore the UI to a specific state. This makes it much easier to reproduce and fix bugs.

1. Cacheable State

With Redux, you can easily cache or preserve the state of your application. This allows you to optimize performance by avoiding unnecessary data fetching and rendering. It also enables features like undo and redo.

1. Integration with Other Libraries

Redux works seamlessly with a wide range of libraries for building user interfaces. Whether you're using React, Angular, Ember, or even plain JavaScript, Redux can be easily integrated into your project. There is also a large and growing ecosystem of add-ons and plugins available for Redux.

Conclusion

Redux toolkit is a powerful tool for managing the state in your React applications. It provides a simplified API and includes useful packages by default, making it easier and faster to set up Redux. With the Redux toolkit, you can create a store, add reducers, and dispatch actions with ease. Incorporating the Redux toolkit into your project will help you write cleaner and more maintainable code.

In this blog post, we've covered the installation, configuration, and implementation of Redux and Redux Toolkit in a React application. From setting up the store to creating slices and handling asynchronous actions, you now have a comprehensive understanding of how to efficiently manage state in your React projects. Remember to explore the official documentation for Redux and Redux Toolkit for further details and advanced features.

References

• Redux Toolkit Documentation

• React Redux Documentation

If you want to connect with me...

• LinkedIn

• GitHub

• Twitter / X

Happy Coding...🧑‍💻🫡

Behind the Scenes: Issues That Complicate Software Bug Resolution

The software industry faces significant challenges with rising bug counts due to increasing system complexity, rapid development cycles, inadequate testing practices, ineffective bug tracking, communication gaps, insufficient training, overreliance on manual testing, limited use of static code analysis tools, inadequate user feedback mechanisms, and an underestimation of bug impact. Addressing these issues requires robust testing, effective bug tracking, open communication, training, automation, and active user feedback to reduce bug prevalence and deliver high-quality software.

In the software industry, addressing and managing software bugs and issues is an ongoing challenge. Some current problems and challenges in this area include:

1. Complex Software Ecosystems: Modern software often relies on complex ecosystems with numerous dependencies. When an issue arises, it can be challenging to identify the root cause among multiple interconnected components.

2. Testing Across Multiple Platforms and Devices: Ensuring that software works correctly on various platforms, devices, and browsers presents a significant testing challenge. It's crucial to detect and fix issues specific to different environments.

3. Security Vulnerabilities: Cybersecurity threats are constantly evolving. Developers must identify and fix security vulnerabilities promptly to protect users' data and privacy.

4. Scalability and Performance: As software systems scale, performance bottlenecks and scalability issues may emerge. Addressing these concerns requires careful monitoring and optimization.

5. Real-Time and Concurrent Systems: Real-time systems and applications that handle concurrent processes can be prone to complex issues like deadlocks, race conditions, and timing problems.

There are many more challenges. Addressing these challenges requires a multi-faceted approach that involves implementing robust testing practices, adopting effective bug-tracking systems, fostering open communication between teams, investing in training and automation tools, and actively seeking user feedback.

The cost is also increasing day by day to find and then solve those bugs. Just see the graph...

Comprehensive Introduction to Bug Tracking

A bug tracking system (BTS), also known as an issue tracking system (ITS) or a defect tracking system (DTS), is a software tool or platform that is used in software development and quality assurance to track, manage, and resolve issues, bugs, or defects in a software project.

These systems play a crucial role in the software development and testing process by providing a structured way to identify, report, prioritize, assign, and monitor issues that can affect the quality and functionality of the software.

Key characteristics and functions of a bug-tracking system include:

1. Issue Reporting: Users, testers, or developers can report issues they encounter in the software, including bugs, errors, crashes, and feature requests.

2. Issue Tracking: Each reported issue is assigned a unique identifier and is logged into the system, allowing for easy tracking and reference.

3. Assignment: Issues are assigned to responsible team members, such as developers or quality assurance testers, for resolution.

4. Prioritization: Issues are categorized and prioritized based on their severity and impact on the software's functionality and quality.

5. Workflow Management: Bug tracking systems often support customizable workflows, enabling teams to define how issues progress from creation to resolution.

Bug tracking systems are widely used in various software development methodologies, including Agile, Scrum, and DevOps. They help teams maintain software quality, improve collaboration, and ensure that issues are addressed in a systematic and timely manner. Common bug-tracking system tools include Jira, Bugzilla, Mantis, and Redmine, among others.

Features and Importance

Bug Tracking Systems (BTS) typically offer a set of common features and functionalities that help development teams identify, track, manage, and resolve issues in their software projects. These features include:

1. Issue Creation: Users, whether they are team members, testers, or customers, can create new issues in the system. This includes bug reports, feature requests, and other types of issues.

2. Issue Tracking: Each issue is assigned a unique identifier and is logged in the system. This identifier is used for easy reference and tracking.

3. Assignment: Issues can be assigned to specific team members or developers responsible for resolving them. This feature ensures that issues are not overlooked.

4. Prioritization: Issues can be categorized and prioritized based on their severity, impact, and urgency. This helps in deciding which issues should be addressed first.

5. Status Tracking: BTS allows tracking the status of each issue, from its creation to resolution. Common statuses include "New," "In Progress," "Resolved," and "Closed."

6. Workflow Management: BTS often supports customizable workflows. Teams can define how issues progress from one status to another, ensuring that the process aligns with their development methodology.

7. Comments and Updates: Users and team members can add comments, attachments, and updates to issues. This feature facilitates communication, collaboration, and the sharing of additional information.

8. Attachments: Users can attach screenshots, log files, or other relevant documents to provide additional context for the reported issues.

9. Version Control Integration: Integration with version control systems and code repositories allows for associating issues with specific code changes. This helps in identifying when an issue was introduced or resolved.

10. Search and Filtering: Users can search for specific issues using keywords, filters, or advanced search criteria. This simplifies issue retrieval and analysis.

11. Notifications: Automated email notifications keep relevant team members informed about issue updates, assignments, and status changes.

There are many more features and importance of a bug tracking system.

Types of bugs

In software development, various types of bugs or defects can occur, each with its characteristics and impact on the software's functionality and quality. Here are some common types of bugs:

1. Syntax Errors: These are the simplest types of bugs and occur when the code violates the programming language's syntax rules. Syntax errors prevent the code from being compiled or executed.

2. Logic Errors: Logic errors, also known as bugs in the algorithm, occur when the code functions as intended but produces incorrect results due to a flaw in the logical flow or calculations.

3. Runtime Errors: Runtime errors, also called exceptions, happen during program execution. They can include division by zero, null pointer references, or out-of-bounds array access.

4. Interface Errors: Interface bugs occur when different software components or systems fail to communicate properly, leading to data exchange problems or integration issues.

5. Performance Issues: These bugs affect the software's speed and efficiency. Common examples include slow response times, high resource consumption, and memory leaks.

6. Security Vulnerabilities: Security bugs can lead to vulnerabilities that could be exploited by attackers. These include issues like SQL injection, cross-site scripting (XSS), and authentication weaknesses.

7. Concurrency Bugs: Concurrency issues, such as race conditions and deadlocks, occur in multi-threaded or parallel applications when multiple threads access shared resources simultaneously.

Difference between bug and error

In software development, errors are mistakes made during development, while bugs are manifestations of those errors in the functioning of the software.

• Error

  A mistake was made by the developer while writing the code. Errors can be more conceptual or logical.

• Bug

  A defect in the code that causes the software to produce an incorrect or unexpected result. Bugs can be temporary or permanent.

• Differences

  • Nature: Errors are temporary, while bugs can be permanent.

  • Cause: Errors are caused by incorrect input, while bugs are caused by the software.

  • Impact: Errors can cause compilation and execution to fail, while bugs can cause minor inconveniences or more severe issues like data loss, security breaches, or functional limitations.

Bug Lifecycle

How the bug tracking system works

A software bug occurs when an application or program doesn’t work the way it is designed to function. Most errors are faults or mistakes made by system architects, designers, or developers. Testing teams use bug tracking to monitor and report on errors that occur as an application is developed and tested.

“A major component of a bug tracking system is a database that records facts about known bugs,” says Wikipedia. “Facts may include the time a bug was reported, its severity, the erroneous program behavior, and details on how to reproduce the bug, as well as the identity of the person who reported it and any programmers who may be fixing it.” ²

During its lifetime, a single defect may go through several stages or states. They include:

• Active: Investigation is underway

• Test: Fixed and ready for testing

• Verified: Retested and verified by quality assurance (QA)

• Closed: Can be closed after QA retesting or if it is not considered to be a defect

• Reopened: Not fixed and reactivated ³

Bugs are managed based on priority and severity. Severity levels help to identify the relative impact of a problem on a product release. These classifications may vary in number, but they generally include some form of the following:

• Catastrophic: causes total failure of the software or unrecoverable data loss. There is no workaround, and the product can’t be released.

• Impaired functionality: A workaround may exist, but it is unsatisfactory. The software can’t be released.

• Failure of non-critical systems: A reasonably satisfactory workaround exists. The product may be released if the bug is documented.

• Very minor: There is a workaround, or the issue can be ignored. It does not impact a product release.

In most cases, states and severity levels are monitored in a bug-tracking database. A good tracking platform also ties into larger software development and management systems, making it easier to assess error status and the potential impact on overall production and timelines.

Issues with the bug-tracking system

While bug tracking systems (BTS) offer numerous benefits, they are not without their challenges and issues. Some of the common issues associated with bug tracking systems available on the market include:

1. Complexity and Overhead: Some bug tracking systems can be overly complex, especially for small teams or projects. They may introduce unnecessary overhead in terms of setup and maintenance.

2. Learning Curve: BTS tools can have a steep learning curve, making it challenging for new team members to use the system effectively.

3. Customization Challenges: Configuring and customizing the BTS to match the specific needs and workflows of a team can be time-consuming and require technical expertise.

4. Over-Reliance on Technology: Teams may become overly reliant on the BTS, neglecting other essential aspects of communication and issue management.

5. Information Overload: A high volume of issues, especially in larger projects, can lead to information overload, making it difficult to prioritize and address issues effectively.

6. Lack of Integration: Some BTS tools do not integrate well with other development tools, leading to a disconnected development environment.

7. Poor Reporting and Analytics: Inadequate reporting and analytics features can limit a team's ability to track project progress, identify trends, and make data-driven decisions.

Popular bug-tracking tools in the market

There are several popular and widely used bug-tracking tools available in the market. The popularity of these tools may vary based on user requirements and specific use cases. Here are some of the top bug-tracking tools:

1. Jira: Jira, developed by Atlassian, is one of the most widely used bug-tracking and project management tools. It offers extensive customization and integration and supports agile methodologies.

2. Bugzilla: Bugzilla is an open-source bug-tracking tool developed by Mozilla. It is known for its simplicity and robust bug-tracking capabilities.

3. MantisBT: Mantis Bug Tracker (MantisBT) is an open-source tool that is easy to use and offers features for bug tracking, issue management, and project collaboration.

4. Redmine: Redmine is an open-source project management and bug-tracking tool that is highly customizable. It supports issue tracking, time tracking, and source code management.

5. Trello: Trello is a visual project management tool that can be adapted for bug tracking and issue management. It is known for its user-friendly interface.

Bug tracking in Agile and DevOps

Bug tracking in Agile and DevOps methodologies is an integral part of the software development and delivery process. In Agile, bugs are reported as work items and addressed during sprint planning and execution. Agile teams prioritize bug fixes alongside new features, aiming for a prompt resolution to maintain a working product. In DevOps, bug tracking is highly automated, with a focus on early detection through continuous testing and monitoring in production. Collaboration between development and operations teams is crucial for fast bug resolution. Both methodologies emphasize quick identification, prioritization, and collaboration to maintain software quality and deliver value to users.

Future trends

The future of bug-tracking systems in the software industry holds a promising landscape. Expect to see increased integration of AI and machine learning for automated issue classification and predictive analysis, along with advanced automation throughout the bug-tracking process. Collaboration features will be enhanced to facilitate seamless communication among cross-functional teams and blockchain technology may be utilized to bolster issue data security. Tight integration with DevOps and CI/CD pipelines, real-time monitoring, and robust mobile and remote access options will become standard. Bug tracking systems will also offer improved analytics, while cloud and SaaS adoption continues to rise. Cross-platform compatibility, user-friendly interfaces, and compliance with data privacy regulations will be the norm, reflecting the evolving needs and challenges of the software industry.

Conclusion

In conclusion, bug-tracking systems are indispensable tools in the software development world, ensuring the quality and reliability of software products. They streamline issue identification, tracking, resolution, and reporting. With the advent of AI and automation, bug-tracking systems are poised to become even more efficient, capable of predictive analysis and enhanced collaboration.

If you want to connect with me, the links are given below...

• LinkedIn

• Twitter

• GitHub

Many people think that Node.js is a framework and other new students who are new beginners understand it as a library. But wait my friends, Node is neither a framework nor a library.

Node.js is a cross-platform, open-source server environment that can run on Windows, Linux, Unix, macOS, and more. Node.js is a back-end JavaScript runtime environment, that runs on the V8 JavaScript engine and executes JavaScript code outside a web browser. Node is built using programming languages like C, C++, and JavaScript.

You can explore more about NodeJs from their official documentation or Wikipedia.

The V8 Engine - the backbones of Node applications

V8 is a free and open-source JavaScript and WebAssembly engine developed by the Chromium Project for Chromium and Google Chrome web browsers. The project's creator is Lars Bak. V8 Engine is built using JavaScript, C++, ECMAScript, and Assembly languages.

V8 is the name of the JavaScript engine that powers Google Chrome. It's the thing that takes our JavaScript and executes it while browsing with Chrome. V8 provides the runtime environment in which JavaScript executes. V8 is written in C++, and it's continuously improved. It is portable and runs on Mac, Windows, Linux, and several other systems.

You can explore more about the V8 Engine from official documentation or Wikipedia.

Performance Myth - Internal Working of NodeJs

Many people are still not able to understand the internal workings of NodeJs because it's doing non-blocking and asynchronous execution of programs makes it very complex to understand. Especially the internal working of NodeJs which is Event Loop.

Now, many people have questioned what is asynchronous programming. So, let's understand what is Synchronous and Asynchronous Programming.

What is Synchronous and Asynchronous Programming?

Synchronous programming means that the code runs in the sequence it is defined. When a function is called and has returned some value in a synchronous program, only then will the next line be executed.

In simple words, synchronous programming means the execution of a program happens line by line. If one line is taking so much time to execute then the execution of the program will not go in the next line. It waits for that line to execute and then It will go in the next line. And If one line takes so much time to execute then the UI will be frozen.

Asynchronous programming, on the other hand, refers to code that doesn't execute in sequence. These functions are performed not according to the sequence they are defined inside a program but only when certain conditions are met.

In simple words, Asynchronous means the environment doesn't wait for the specific line to execute. It will start executing that line and put it into the background and when the output of that line comes It will print it to the console. This way the UI will not be frozen only that part will be frozen whose going to fetch the data from the actual application server.

Example:

JavaScript

Plain Text

Plain Text

console.log("Hello world!")

setTimeout(()=>{
    console.log('set timeout function')
}, 2000)

console.log('I am Parmesh Bhatt.')

Output:

Hello world!
I am Parmesh Bhatt.
set timeout function

Now, let's understand about Event Loop in NodeJs.

Event Loop

An event loop is an endless loop, that waits for tasks, executes them, and then sleeps until it receives more tasks. Node handles requests using an Event loop inside the NodeJS environment.

NodeJs has mainly three parts in the backend Call Stack, Call Back Queue, and Node APIs. The combination of all these three is called an Event Loop.

Let's have an example and understand it simply:

Suppose we have a code like below,

let a = 2;
let b = 3;
const sum = a + b;
console.log(sum);

For this, the output will be,

5

When we write a simple code like the above, the first execution will start and the main function goes into the Call stack.

Now you all have a question in JavaScript, we are not writing any main function as we write in C++ and Java. So, from where this main function comes in the Call stack.

My friends, JavaScript is internally built When It starts executing it will automatically put all of the code in the main function and then start its actual execution.

After the main function goes into the Call stack, the console.log function goes into the Call stack and the Call stack executes it, and the output prints on the screen.

Call Stack has an internal building like It follows the LIFO property. LIFO means Last In First Out. This means whichever function comes last will execute first and that's why the main function comes first and gets out of the stack at last.

Another example:

console.log('one');

setTimeout(()=>{
    console.log("Settimeout 1")
}, 2000)

setTimeout(()=>{
    console.log("Settimeout 2")
}, 0)

console.log('Two');

Output of the above code is:

one
Two
Settimeout 2
Settimeout 1

It's really interesting. Let's understand it...

We all know now that in NodeJs, there are three things first is the Call stack, second is Node APIs and third is the call-back queue.

When we start executing the above code, as usual, the main function goes into the Call stack and the console.log function will also go into the Call stack.

But from the setTimeout function, the setTimeout function will not go into the Call stack directly but it goes into the Node API.

Now you all have a question Why does it go into the node API directly Why does it not go into the Call stack?

Let's understand it,

The setTimeout function goes into the node API directly because the set timeout function is inherited from C++ and every function that inherits from C++ will always go into the node API directly and it will not be executed until it goes into the call stack.

There are many more functions like setTimeout in C++. You may explore it on the Internet.

So the setTimeout 1st function goes into the Node API first and the set timeout 2 function goes into the Node API 2nd.

Then the last console.log will go into the call stack and the call stack will execute it and print the output. Now the output is one and Two. After the execution of the last console, every function present in the Call stack will come out from the Call stack including the main And the Call stack is now empty.

When the call stack is empty, the functions that are present in the Node API will go into the Callback Queue one by one.

The functions that have a lower priority will go first into the callback queue. When multiple functions are present in the node API, every function will go one by one into the Callback Queue And then into the Call Stack.

Every function that is present in the Callback Queue will only go into the Call stack when the Call stack is empty. If the Call stack is not empty, the functions will not go into the call stack from the Callback Queue.

After going into the Call stack the Call stack executes the functions one by one and prints the output on the console. And that's why the output is like,

one
Two
Settimeout 2
Settimeout 1

This is how the node works internally and the combination of the call stack, Node API, and the Callback Queue is known as an Event Loop.

NodeJs Architecture

Features of Event Loop

1. An event loop is an endless loop, that waits for tasks, executes them, and then sleeps until it receives more tasks.

2. The event loop executes tasks from the event queue only when the call stack is empty i.e. there is no ongoing task.

3. The event loop allows us to use callbacks and promises.

4. The event loop executes the tasks starting from the oldest first.

The Myth and Facts of NodeJs

Conclusion

The event loop allows Node. js to perform non-blocking I/O operations even though JavaScript is single-threaded.

Since most modern kernels are multi-threaded, they can handle multiple operations executing in the background. When one of these operations completes, the kernel tells Node.js so that the appropriate callback may be added to the poll queue to eventually be executed.

Now you should understand why the two-second time delay function does not block the rest of the program from executing...

So, I end my conversation here but if anybody wants to connect with me then the links are below...

• LinkedIn

• Twitter or X

• GitHub

"An internship is a chance to dive into the ocean of possibilities, discovering the pearls of wisdom along the way."

Significance of an internship in the student life

Internships are of utmost importance in an engineering student's life as they provide practical experience, skill development, and networking opportunities. Through internships, students gain hands-on exposure to real-world engineering projects, enhancing their technical and soft skills. Additionally, they get insights into various industries and career paths, while also building valuable connections with professionals that can benefit their future careers. Internships bolster resumes, boost confidence, and act as a pathway to potential job opportunities. Moreover, students stay abreast of industry advancements, making them well-prepared for the transition from academia to the professional world.

Howdy👋, y'all! I am Parmesh Bhatt🙏. I just completed my first 2-month internship as an AWS and web developer intern.

I had the amazing opportunity to be the FIRST intern ever on the AWS tools + I worked specifically work with the cloud team, as a AWS and web development intern.

A little bit about me...

I am Parmesh Bhatt. I am currently pursuing my B. Tech from Charusat University with an interest in learning Web Development, Cloud Computing, and DevOps. I am currently in 3rd year and I am from Navsari, Gujarat. I am a MERN stack developer and presently learning and exploring cloud computing and DevOps.

Now let me tell you about my first summer internship!

The Beginning: Joining the team as an intern...

In my college, every 4th-semester student must go to the company as an intern and learn new technical skills and gain experience in the industry. So at the start of May 2023, I got the official internship call from 2 or 3 well-known companies and I accept that. And I am started working with the cloud team as an intern. The company offered me a hybrid model. This means that If I want to come to the office then I can also do that or else I can also work from home. And I choose to start working from home because since October 2021, I stayed in a hostel and my home is far away from my college. So, I am not able to spend that much time with my family for the last one and a half years.

Learning and Contribution: Tasks, Challenges, and Growth

• The First Week - Challenge and Learning

In the first week of the internship, The HR of my team introduced me to the team. And then started learning about MERN stack development and how the team works on a large project. I learn about PHP development, learn about WordPress. I learn how WordPress makes the life of a developer very easy.

Then I made some projects using PHP and know PHP works as a synchronous programming language which means If in the large code base, one line takes too much time to execute then PHP will not go to the next line like JavaScript. And I faced this issue when I was working on the project. Then the team suggests I start learning and making projects on React using Bootstrap.

Then I came to know about this👇,

• Learning React and Bootstrap

After facing a large issue in the project because of language, I understand that being a developer is not an easy task because before this I thought that the best life of an engineer was to be just a developer.

Then I started learning about the Bootstrap. But in between the company told me that I have also worked with the cloud team. So, that I can learn the maximum from this internship.

So, After completing the 10 days of internship, I started learning about different AWS services and the basics of cloud computing, How virtualization works, and other things. But now I want to learn the MERN stack.

During the daytime when my official internship hours were going, I learn about AWS services and contributed to the cloud team. And in the night, I learned about the world of React and Bootstrap.

• World of React and Bootstrap

I learn about React and Bootstrap in my summer internship was going. In React, I learned about the difference between stateless and stateful components. I learned about React is the most effective JS library to build the UI using Bootstrap.

I also learned about the component life cycle methods in React which is only supported in the class components of React. But in the functional component, there are hooks to handle the state. Also, we can handle the routing in React and there are many more things in React that one developer can do with Bootstrap.

Using Bootstrap, we can also include CSS in the responsive web design in the UI. Because Responsive Web Design is one of the toughest challenges for UI/UX designers.

• World of AWS

Cloud Computing is one of the most important parts of software development now in days. During the internship period, I learned about the various AWS services that are most important to know.

Starting with the EC2 instances which is the virtual machine that provides lots of benefits over the implementation of the actual machine. There is also the EC2 instances auto-scaling which automatically increase the number of EC2 instance when the number of users increases.

There are also many more computing services, database services, storage services, container services, security services, and many more services are there.

I have also written one blog on the AWS marketplace during the internship.

Insights of AWS Marketplace

Diverse Project Experiences: Tech Stack, Cross-Team Collaboration, and High-Scale

I learned about AWS, Cloud Computing, React, and Bootstrap during the internship. Also, I have built and worked on live projects in the internship.

I build the chat application, and many more projects during the internship.

Exploring Beyond Tech: Fun, Games, and Quizzing

When I was working as an AWS and web developer intern, I remember that in the last week of May-2023, the company organized one event for freshers and interns.

At that event, I meet my whole Cloud and another team member. In that event, I learn one time, we all are freshers and don't hesitate to ask our seniors about problem or error that is coming in our code or life. And from that event, I came to know about the importance of networking and how networking is very important in the tech industry. From that event, I also came to know that👇

"The best way to get started is just to get started."

In that event, all teams participated in the game. Unfortunately, our team was not able to win the game but I enjoyed the whole 2-hours event and also network myself at a very high level.

One thing that I also came to know about from my communities and internship is that👇

"DON'T WAIT FOR THE CHANGE,

LET'S B THE CHANGE..."😉

An Enriching Journey: Accelerated Learning and Gratitude

Overall, the internship journey was amazing and lots of new things learn from my seniors as well as my community juniors. I missed those days right now in the hostel life.

I came to know about React, Bootstrap, and the importance of Networking yourself. And also came to know about having a family and being with the family.

From my internship experience, I would like to advise my junior and not especially to juniors, It is for everyone that If you want to learn something from the tech industry. So, only you need to do is "Be patient, and just be in the tech, be with the tech..." and you will automatically learn about it.

So, I end up my conversation here but if anybody wants to connect with me then the links are below...

• LinkedIn

• Twitter

• GitHub

CMD's full form is Command Prompt.

Command Prompt, also known as cmd.exe or cmd, is the default command-line interpreter for the OS/2, eComStation, ArcaOS, Microsoft Windows, and ReactOS operating systems. On Windows CE .NET 4.2, Windows CE 5.0, and Windows Embedded CE 6.0 it is referred to as the Command Processor Shell.

It provides a text-based interface for users to interact with the operating system through a series of commands. Command-line interfaces are also called command-line user interfaces, console user interfaces and character user interfaces.

CMD allows users to execute various commands to perform tasks such as managing files and directories, configuring system settings, running programs, and troubleshooting network issues, among other things. It operates based on a specific syntax, where commands are entered in the format of command [options] [arguments].

Developer

Microsoft Corporation and IBM.

Programming Language

C++

Command Prompt Interface,

CMD features

1. Command History

2. Command Completion

3. Command Line Editing

4. List of Commands

5. Complete Command Syntax

6. Escape Key

Typing a command and pressing ESC key clears the current line of text and returns to TL1 Prompt

Here are the commands for CMD-CLI

-To make a new File

MKDIR File_Name

-To make a new File with some text

echo sentence > File_Name

-To make a new File without any text

type nul > File_Name

-To delete the folder that contains nothing

RMDIR File_Name

-To delete any File

del File_Name

-To see the content of the directory

dir

-To copy the File

copy

-To move the File

move

-Rename the file to new_File_Name from Old_File_Name

ren Old_File_Name New_File_Name

-To see the IP configuration

ipconfig

-To go to the previous directory

cd..

-To go into the parent directory

cd\

-To go to a particular directory

cd directory_name

-To see the currently running services that are open in the background on our pc with a .exe extension

tasklist

-To stop a particular running service

tasklist /PID PID-ID

Note: PID-ID=relace with particular service's PID in our pc

-To show the running application behind in OS

net start

-To stop the service that is running

net stop service_name

-To start the service that is stopped

net start service_name

-To show the installed driver queries in our pc with their properties

driverquery

-To clear the screen

cls

-To see the version of the pc

ver

-To see the details of our device disks

diskpart

-To see the list of the disk in our pc

In diskpart type the bellow command

list disk

-To select the disk that number from 1 to 5

select disk disk_number

-To see the information about the selected disk

details disk

-To check the status of the selected disk

chkdsk

-Give the Mac address of our device

getmac

-Give the all information about our system

systeminfo

-Give all the account information or list that are running on our pc

net user

-To add the account to our system

net user useraccount_name /add password

-To delete the account in our system

net user /del useraccount_name

-To active the administrator account

net user administrator _/active:yes

-To not active the administrator account

net user administrator _/active:no

-To hide all files

attrib +h +r +s

-To unhide the all hide files

attrib -h -r -s

-To encrypt the files

cipher /e

-To decrypt the encrypted files

cipher /d

-Updating the EFS key from files in folders

cipher /rekey

-Display date

date

-Display time

time

-Show the subfolder details in tree format

tree

-Give all the information about the network

inconfig /all

-The Windows Management Instrumentation Command-line is a software utility that allows users to perform Windows Management Instrumentation(WMI) operations with a Command Prompt.

wmic

What is WMI in Windows?

• WMI is the infrastructure for the management of data and operations on Windows-based OS.

-Get the product details

/output:c:\destination_File_Name product get name,version

In wmic type this command

-When we are in wmic write cpu and this will show the CPU and processor details

CPU

-Exit from it.

exit

-Give the file extension

assoc.File_extension

-Generate a file with information on tasks that are going on in the background

tasklist > file_name

-Create the file with some text

echo text(That you want to put in file) > File_Name

-To see the content of the file

type File_Name

-It will open the file

File_Name

-Create the primary partition of the disk

create primary partition

-It will select the partition number from the selected disk

select primary partition_number

-Format the disk that you selected

format fs = ntfs quick

-Active the specific disk

active

-Assign the partition

assign

-A new name for the disk that you selected

label disk_name

-Show the executed command history

doskey/history

-Shutdown the pc immediately

shutdown -s

-After how many times do you want to shut downtimes the pc

shutdown -s -t time_after_shutdown

-Restart the pc

shutdown -r

-After how many times you want to restart the pc

shutdown -r -t time_after_shutdown

-Check the NTFS(new technology file system) status

chkntfs disk_name

-It will open the control panel

control

-Show all the tasks that are scheduled in OS.

schtasks

-It will generate the file and put all the information in it.

schtasks > file_name

-Show the shared files through the network and how many people are using it.

openfiles

-Generate the file with config data

ipconfig > file_name

-Refresh the IP address or resolve the IP conflict

ipconfig /renew

-Display the content of the domain name system(DNS)

ipconfig /displaydns

-It will flush the DNS cache and refresh it

ipconfig /flushdns

-Show or ping the pc with another pc

ping ip_address

-Show all the options that we can use with ping

ping -?

-Send the packets to the destination pc again and again

ping -t ip_address

-Saw pc name with other details

ping -a ip_address

-Only send the number of packets to the destination pc

ping -n count ip_address

Why we should use cmd in Windows instead of GUI?

Using the command-line interface (CLI) or Command Prompt (CMD) in Windows instead of the graphical user interface (GUI) offers several advantages:

• Automation and scripting: CLI allows you to automate repetitive tasks by writing scripts. With commands and batch files, you can create powerful automation workflows, saving time and effort. This is particularly useful for system administrators and developers.

• Efficiency: For certain tasks, using the CLI can be faster and more efficient than navigating through multiple GUI menus. Command-line tools often provide concise and direct ways to perform specific tasks without the need to search for options within a graphical interface.

• Remote management: When managing remote computers or servers, the CLI becomes essential as it allows you to connect and control them via remote terminal sessions or SSH. This is particularly valuable for system administrators who need to manage multiple machines or work on headless systems.

• Resource consumption: GUI applications tend to consume more system resources (CPU and memory) compared to their command-line counterparts. By using the CLI, you can free up system resources and allocate them to other important tasks.

• Troubleshooting and diagnostics: When encountering issues or errors, CLI tools often provide more detailed error messages and logs than GUI applications. This additional information can be valuable for troubleshooting and diagnosing problems.

While the CLI offers numerous advantages, it's important to note that GUI interfaces are generally more user-friendly, especially for casual users or those who prefer visual interaction. The choice between CLI and GUI depends on the specific task, user expertise, and personal preference.

References

Microsoft Official - CMD

My GitHub repository of CMD commands

If you want to follow me,

• LinkedIn

• Twitter

• GitHub

AWS Marketplace is an online store provided by Amazon Web Services (AWS) that enables customers to find, purchase, and deploy a wide variety of software products and services. It is a platform where third-party software vendors can list and sell their products to AWS customers.

You can use AWS Marketplace as a buyer (subscriber) a seller (provider), or both. Anyone with an AWS account can use AWS Marketplace as a consumer and can register to become a seller. A seller can be an independent software vendor (ISV), value-added reseller, or individual with something that works with AWS products and services.

Keywords

AWS, AWS Marketplace, Cloud Computing, Software Production, and Development.

Introduction

You can quickly launch pre-configured software with just a few clicks, and choose software solutions in Amazon Machine Images (AMIs) and software as a service (SaaS) formats and other formats. Additionally, you can browse and subscribe to data products. Flexible pricing options include free trial, hourly, monthly, annual, multi-year, and a Bring Your License (BYOL) model. All of these pricing options are billed from one source. AWS handles billing and payments, and charges appear on your AWS bill.

Features of AWS Marketplace

Wide Range of Software

AWS Marketplace provides a vast selection of software products and services across various categories, including machine learning, security, databases, networking, analytics, developer tools, and more. Customers can find solutions that meet their specific business and technical requirements.

One-Stop Shop

AWS Marketplace serves as a centralized store where customers can discover, compare, and purchase software products directly from AWS. It eliminates the need to visit multiple websites or engage in separate procurement processes.

Pre-Configured for AWS

The software products listed on AWS Marketplace are pre-configured to work seamlessly with AWS infrastructure and services. This makes it easier for customers to deploy and integrate the software into their existing AWS environments.

Flexible Pricing Models

AWS Marketplace supports various pricing models, including free trials, hourly or monthly usage-based pricing, and annual subscriptions. Customers can choose the pricing model that best suits their needs and pay for software usage directly through their AWS account.

Customer Reviews and Ratings

Customers can benefit from the ratings and reviews provided by other users of the software products on AWS Marketplace. These reviews help customers make informed decisions and gain insights into the quality and performance of the products.

Private Marketplace

AWS Marketplace offers private marketplace capabilities for enterprise customers. This feature enables organizations to create a customized catalog of approved software products that meet their specific compliance and security requirements. It gives organizations greater control over software procurement and deployment within their environments.

Consolidated Billing

AWS Marketplace supports consolidated billing, allowing customers to receive a single invoice for all their AWS usage, including purchases made through the marketplace. This simplifies the billing process and provides a unified view of costs.

This is how AWS billing is counted...

These features make AWS Marketplace a valuable platform for customers to discover, procure, and deploy software products that are optimized for the AWS ecosystem. It simplifies the software procurement process and provides customers with a wide range of options to meet their business needs.

Marketplace Services and Guides

There are mainly five types that are provided by the AWS marketplace.

Seller Guide

Buyer Guide

AWS Marketplace Metering Service API Reference

AWS Marketplace Entitlement Service API Reference

AWS Marketplace Catalog API Reference

Seller Guide

The process for selling a software product in AWS Marketplace involves the following seven steps.

TABLE 1

SELLER PROCESS

As a seller, go to the AWS Marketplace Management Portal to register. If you’re charging for the use of your product, you must also provide tax and banking information as part of your registration. When you register, you create a profile for your company or yourself that is discoverable in AWS Marketplace. You also use the AWS Marketplace Management Portal to create and manage product pages for your products.

Contract structure for AWS Marketplace

The contract structure for AWS Marketplace can vary depending on the specific agreements between AWS (Amazon Web Services) and the sellers offering their products and services on the marketplace. However, I can provide you with a general overview of the typical elements that are included in a contract for AWS Marketplace.

Terms and Conditions

The contract will include the terms and conditions that govern the relationship between AWS, the seller, and the customers who purchase products or services through the AWS Marketplace. This section will outline the rights and obligations of each party.

Product Listing Agreement

Sellers on the AWS Marketplace typically sign a separate product listing agreement, which outlines the specific terms and conditions related to listing their products or services on the marketplace. This agreement may include information about pricing, revenue sharing, and any specific requirements or guidelines for product listings.

Pricing and Payment

The contract will specify the pricing structure for the products or services offered on the AWS Marketplace. It may include details about the seller's pricing model, such as fixed pricing, usage-based pricing, or tiered pricing. Additionally, the contract may outline the payment terms, including how and when the seller will receive payments from AWS for sales made through the marketplace.

Intellectual Property Rights

The contract will address the ownership and protection of intellectual property rights related to the products or services offered on the AWS Marketplace. It may include provisions regarding the licensing of intellectual property and any restrictions or permissions related to the use of trademarks, copyrights, or patents.

Usage of the software, services, and data products sold in AWS Marketplace is governed by agreements between buyers and sellers. AWS is not a party to these agreements.

Pricing of products in the AWS Marketplace

In AWS Marketplace, products can be free to use or can have associated charges. The charge becomes part of the buyer's AWS bill, and after the buyer pays, AWS pays the seller. Products can take many forms. For example, a product can be an Amazon Machine Image (AMI) that is instantiated using a buyer's AWS account. Products can also be configured to use CloudFormation templates for delivery to the buyer. Products can also be SaaS offerings from an ISV, web access control lists (web ACL), sets of rules, or conditions for AWS WAF. Products can also be professional services from an ISV, channel partners, or MSP.

Buying Guide

Steps

Creating an AWS account

Choosing your software

Configuring your software

Launching your software on Amazon EC2

Managing your software

Terminating your instance

Software Procurement with AWS Marketplace

Discover Software

Visit the AWS Marketplace website (https://aws.amazon.com/marketplace) and browse through the available software products. You can search for specific categories, keywords, or vendors to find the software that meets your requirements.

Product Details

Each software listing provides detailed information about the product, including pricing, usage instructions, system requirements, and customer reviews. You can evaluate the product features, pricing models (such as hourly, monthly, or annual subscriptions), and user feedback to make an informed decision.

Pricing Models

AWS Marketplace offers various pricing models depending on the software vendor's preferences. Some products may charge on an hourly basis, while others may require a monthly or annual subscription. The pricing information is mentioned on the product listing page.

Free Trials

Many software products on AWS Marketplace offer free trials, allowing you to test the software before making a purchase. Free trials enable you to evaluate the functionality, performance, and compatibility of the software with your AWS environment and many more.

Cloud Cost Management Tools with AWS Marketplace

AWS Marketplace offers a variety of cloud cost management tools that can help you optimize and manage your AWS spending. These tools provide visibility into your cloud costs, offer cost analysis and forecasting, and help you identify opportunities to save money. Here are a few popular cost management tools available on AWS Marketplace:

CloudHealth by VMware

CloudHealth provides comprehensive cost management and optimization capabilities. It offers cost visibility, budgeting, cost allocation, and reporting. You can analyze costs, track spending, and optimize resource utilization to reduce wastage and save money.

CloudCheckr

CloudCheckr offers cost optimization, billing, and invoicing features. It provides detailed insights into AWS costs, identifies unused or idle resources, and recommends cost-saving measures. It also offers security and compliance monitoring capabilities.

Apptio Cloud ability

Cloud ability helps you track and analyze your AWS costs. It provides visibility into spending, budgeting, and forecasting. You can allocate costs to different teams or projects, set budget alerts, and optimize resource usage to control costs.

Turbonomic

It is an AI-powered cloud optimization tool that helps you maximize resource utilization and minimize costs. It provides real-time recommendations for resource allocation, resizing, and rightsizing to ensure efficient resource utilization and cost savings.

AWS Cost Explorer

While not available on AWS Marketplace, AWS Cost Explorer is a native AWS service that helps you analyze and visualize your AWS costs. It provides cost breakdowns, historical data, and forecasting capabilities. You can also create custom reports and set cost alerts.

Software Governance and Entitlement with AWS Marketplace

AWS Marketplace provides features for software governance and entitlement to help organizations manage software usage, licenses, and entitlements effectively. These features allow you to maintain control over software procurement, distribution, and compliance within your AWS environment. Here are some key aspects of software governance and entitlement in AWS Marketplace:

Private Marketplace

AWS Marketplace offers a Private Marketplace, which enables you to create a customized catalog of approved software products for your organization. With Private Marketplace, you can curate a selection of software listings that meet your organization's policies, compliance requirements, and preferred vendors.

Software Subscriptions and Licenses

When you purchase software through AWS Marketplace, you obtain a subscription or license to use the software. These subscriptions and licenses can have different terms and entitlements, such as the number of users, instances, or features available. It's important to review and understand the specific licensing terms for each software product you procure.

Software Entitlements and Usage Tracking

AWS Marketplace provides tools to help you track and manage software entitlements within your AWS account. You can monitor the consumption and usage of software subscriptions and licenses to ensure compliance with vendor agreements. This can help you avoid any unauthorized usage or overages.

AWS Marketplace Management Portal (AMP)

The AWS Marketplace Management Portal (AMP) is a web-based interface that provides visibility and control over your software subscriptions and licenses acquired through AWS Marketplace. AMP allows you to view, manage, and track your software entitlements, usage, and associated costs in a centralized manner.

AWS Marketplace Product categories

The AWS Marketplace website is organized into primary categories, with subcategories under each. You can search and filter based on the categories and subcategories.

Topics

Infrastructure Software

DevOps

Business Applications

Machine Learning

IoT

Professional Services

Desktop applications

Data Products

Industries

Product Type

AWS Marketplace includes popular open-source and commercial software, as well as free and paid data products. These products are available in different ways: as individual Amazon Machine Images (AMIs), as a cluster of AMIs deployed through an AWS CloudFormation template, as software as a service (SaaS), as professional services, and as AWS Data Exchange data products. For more details about these product types, see the following topics:

AMI-based server products

Container Products

ML Products

Professional Service Products

SaaS Products

Key categories and several registered services of the AWS Marketplace

Infrastructure Software -3188

DevOps- 2543

Business Applications- 1131

Machine Learning -3541

Data Products -1706

IoT -211

Industry -433

Total ---7213

Various delivery methods are

Amazon Machine Image(8324)

Professional Services(4553)

Data Exchange(3850)

SaaS(2843)

SageMaker Model(803)

Container Image(515)

CloudFormation Template(504)

SageMaker Algorithm(139)

Helm Chart(39)

Conclusion

AWS Marketplace is a valuable platform for both buyers and sellers in the cloud computing industry. AWS Marketplace offers a wide range of software products and services, making it a convenient one-stop shop for businesses looking to find and deploy the tools they need in their AWS environment.

For buyers, AWS Marketplace provides a diverse selection of third-party software solutions, allowing them to easily discover, compare, and purchase the products that best suit their needs. The platform offers a user-friendly interface, transparent pricing, and flexible deployment options, enabling customers to quickly integrate new software into their existing AWS infrastructure. AWS Marketplace is a really useful product of AWS.

References

https://aws.amazon.com/marketplace

https://aws.amazon.com/mp/marketplace-service/overview/

https://docs.aws.amazon.com/marketplace/index.html

https://docs.aws.amazon.com/marketplace/latest/userguide/what-is-marketplace.html

https://docs.aws.amazon.com/marketplace/latest/buyerguide/what-is-marketplace.html

If you would like to contact me,

• LinkedIn

• Twitter

• GitHub

Here is everything you need to know about our project. The project consists of a website divided into two sections. The first section is designed for users and the general public who wish to report any instances of mismanagement by the government.

The second section is where the admin comes into play. The admin will have full access to view the complaints filed by users. They can delete or update the progress of users' requests. Our project is a small component of what the actual government site has already established. This was our initial step to provide the citizens with a better way to address their daily issues, in which the government also plays a role.

Here is our Indian government complaint management site from which we got the idea for our project.

Government Website

Working

Our project prompts users to provide details about their complaints, such as the main issue, any sub-issues, and, if possible, an image related to their concerns. This allows government officers to easily identify the problem and assist users in resolving the issue.

On the admin side, user details will be collected, and as soon as an officer processes the user's request, the user's profile will automatically be updated with the current progress of the request they have made. Furthermore, the admin can easily identify the issue, as we have currently limited requests to cities only.

Main motive

Our primary objective when we undertook this project was to simplify the lives of civilians and educate those who are disconnected from the digital world, often ending up going from one government office to another to address their everyday issues in their neighborhoods, communities, or homes. Additionally, working on such a project boosts our confidence, as it aids the government in reducing the problems faced by the very people who elected them.

Future improvements

Currently, our project is limited to cities, but we plan to expand its reach to cover every corner of the country, including towns and villages. In the future, we aim to acquire the necessary knowledge to make life easier for our country's people who face issues for which the government is responsible. Furthermore, with proper guidance and maintenance, this project will flourish in the coming years. We believe that this project will assist the government as we initially anticipated.

Conclusion

This entire website is designed to save time and reduce stress for our country's people. Our goal is for the government to inspect and properly maintain public places in every region of India. By doing so, we can ensure a clean and well-maintained nation, proudly showcasing India as a strong and modern country to the rest of the world.

If you would like to contact me,

• LinkedIn

• Twitter

• GitHub

• Portfolio

• Linktree

So, a chatbot is a software that stimulates or makes a human-like conversational environment. Let me tell you that everyone in their life has interacted with chatbots whether one knows or not. As an example let us say you are doing your work on a computer some research on it, and a window pops up that says if you need help. Or while you are going to a good restaurant and ask your google assistant or Siri about which hotel will suit you. So these are scenarios in which you are having an encounter with a chatbot.

Medical chatbot:-

So now since chatbots are going to make our future easy there are certain fields in which chatbots are very necessary to be in. Like in the business sector and medical sector. In the medical sector, healthcare chatbots have started to slowly flourish. Healthcare chatbots offer a more personalized approach to every user in more convenient ways that can surpass human capabilities.

All healthcare service providers are willing to give their time to their patients but the overwhelming load doesn't always let them provide their best service. In such cases or then the chatbots come into the scene. This 21st century is of course now a modern era and has a digital future so A 21st medical practice can now rely on chatbots to ensure 24/7 assistance, and availability, answer any repetitive questions or what else can a chatbot not do in this 21st century.

Examples of Chatbot:-

Since we have been talking about medical chatbots to slowly furnish here are some of them which already have gained their attention in today's market.

1)OneRemission

2)Babylon Health

3)Healthily

4)Sensely

5)Youper

How do I come to know about Chatbot?

It always amazes me how new technology is introduced day by day. I was always fascinated with robots and their working functionality. I always wanted to know about AI and ML fields. So I decided the same come up with an Idea that excites me the most so here is the brief info about my Chatbot.

Working:-

Basically, this chatbot works the same as any other chatbot.

1->Firstly the user inputs the query.

2->Then the user's query is analyzed.

3->In this step there is identifying the user's query intents and entities.

4->This is the last in which the bot responds giving the proper reply to the query.

FlowChart:-

Implementation Strategy:-

As you can see in the above figure the bot asks a series of questions and according to the given answers, input by the user the bot comes up with the best advice.

Future Scope:-

In the upcoming future, as we all know AI is going to be in each and every corner of the world, so after the successful completion of this bot, this will ease lives and will be a great help to healthcare services as well as the people who might not be able to reach to the healthcare services.

In the future world, these chatbots will be a great help to everyone in the world. They will even be able to solve those queries even though the doctors might not be able to. I believe that even starting to point to minor things like appointments in hospitals to scheduling appointments of doctors till solving and curing diseases and in each and every sector of the field.

Conclusion:-

This whole ChatBot we created to learn and our main motive is to digitalize the medical field because India is very behind in medical technologies. The big cities have that many kinds of facilities but small village people cannot able to go to big cities and afford the cost. With the use of these ChatBots, if they have small smartphones they can easily get the solution and get the answer from their home.

If you want to connect with me on Linkedin or Twitter.