DEV Community: Bojan Jagetic

Navigating the Web with NGINX

Bojan Jagetic — Mon, 16 Feb 2026 17:34:55 +0000

Introduction

This is just short lets call it cheat code for NGINX, here we will not bother with configuration (it will be much more wider post on how to use it in your project).
In the vast landscape of web servers, NGINX stands as a powerful and versatile solution, serving much more than just static content. Let's unravel the layers of NGINX, understanding its capabilities and exploring why it's a go-to choice for many developers.

NGINX, pronounced "engine-x," is an open-source web server that has evolved beyond its initial role. Originally designed as a high-performance HTTP server, NGINX has grown to become a robust reverse proxy server, load balancer, and even a content cache.

Key Features

1. High Performance

NGINX is renowned for its exceptional performance and efficiency. It excels in handling a large number of concurrent connections with minimal resource usage, making it an ideal choice for high-traffic websites.

2. Reverse Proxy

NGINX acts as a reverse proxy, sitting between the client and the application server. This setup enhances security, load balances incoming traffic, and simplifies the management of multiple application servers.

3. Load Balancing

For distributing incoming network traffic across multiple servers, NGINX offers efficient load balancing. This ensures optimal resource utilization and prevents any single server from becoming a bottleneck.

4. SSL/TLS Termination

NGINX can handle SSL/TLS termination, relieving the backend servers from the computational overhead of encryption and decryption. This improves overall system performance.

5. Content Caching

With built-in caching capabilities, NGINX can store and serve static content directly, reducing the load on application servers and improving response times for users.

When to Use NGINX

NGINX is a versatile tool, and here are some scenarios where it shines:

1. High-Traffic Websites

NGINX's efficient handling of concurrent connections makes it a top choice for websites experiencing high traffic volumes. Its low resource usage ensures stability even during traffic spikes.

2. Load Balancing

When you need to distribute incoming traffic across multiple application servers, NGINX's load balancing capabilities come into play. This ensures even distribution, preventing any single server from becoming a bottleneck.

3. Reverse Proxy

NGINX excels as a reverse proxy, providing an additional layer of security and simplifying the management of backend servers. This is especially useful in microservices architectures.

4. SSL/TLS Termination

NGINX is a great choice for handling SSL/TLS termination, freeing up application servers from the computational overhead of encryption. This is crucial for securing data in transit.

5. Static Content Serving

The built-in caching and efficient handling of static content make NGINX an excellent choice for serving static files directly to users, reducing the load on backend servers.

Getting Started with NGINX

Installing NGINX is straightforward and varies depending on your operating system. For example, on Ubuntu, you can use:

sudo apt-get update
sudo apt-get install nginx

Strategies

Round Robin (round-robin)

Algorithm: Requests are distributed in a circular order to each server.

Use Case: It provides a simple and fair distribution of requests across servers but doesn't take server load or response times into account.

IP Hash (ip_hash)

Algorithm: Assigns requests to upstream servers based on the client's IP address. This ensures that requests from the same IP address are consistently routed to the same server.

Use Case: Useful when maintaining session state on the server is important, such as for applications with user sessions.

Weighted Round Robin (weight)

Algorithm: Servers are assigned weights that determine the proportion of requests they receive. Servers with higher weights get more requests.

Use Case: Use this when you want to distribute the load unevenly based on server capacity. For example, a server with higher capacity gets a higher weight.

Weighted Least Connections (least_conn with weights)

Algorithm: Similar to least_conn, but servers are assigned weights to account for their capacity. It combines least connections with a weighted approach.

Use Case: Suitable when you want to distribute the load based on both server capacity and current connections.

Least Time (least_time)

Algorithm: Routes requests to the server with the lowest average response time. It considers server response times when distributing traffic.

Use Case: Ideal for applications where server response time is a critical factor in load balancing.

Random (random)

Algorithm: Selects an upstream server randomly for each request.

Use Case: Random load balancing can be useful in scenarios where you don't require specific distribution patterns, and you want a simple way to distribute requests across servers.

Hash (hash)

Algorithm: Requests are consistently routed to specific servers based on a hash of the request, such as the URL or another attribute.

Use Case: Useful for maintaining session affinity or distributing traffic based on specific characteristics of the request.

Conclusion

NGINX's versatility, performance, and scalability make it an invaluable tool in the toolkit of web developers and system administrators. Whether you need a robust web server, a reverse proxy, or a load balancer, NGINX has you covered. Dive into the NGINX documentation to explore its full range of features and unleash the power of this open-source powerhouse.

If you found this post useful, check out more articles on my personal blog where I write about Nodejs, React, TypeScript, and web development in general!

You can also check out my GitHub for more projects and open source contributions.

From Portfolio Widget to npm Package: Building a Spotify Now Playing Card

Bojan Jagetic — Mon, 16 Feb 2026 17:24:56 +0000

Introduction

In my personal website I had a small Spotify "Now Playing" widget in the footer, I find it usefull to have it there so I can show which music I am currently listening on Spotify and who knows, maybe some uknown visitor likes the song so at least I can do in this case is recommend some good music :)

It was working fine, but had two issues:

It was tightly coupled to the project (Next.js API + Tailwind classes)
I couldn't easily share or reuse it as I wanted to use it in my other projects, it was not really practical to copy and paste the code into each project especially when I wanted to make some changes.

So I came to the conclusion that I need to create a npm package that I can use in my other projects and that I can easily share or reuse. Anyway maybe someone else would find it usefull so that was one more plus for this idea.
In the worst case scenario I can use it without any effort in other projects and that's the main reason why I decided to create a npm package and make my life easierr.

In this post I will go through the entire process:

how I extracted the widget into a **pure React + TypeScript component** so its reusable
how I created the **Spotify API layer** that I can use in multiple projects
how I packaged everything into an **npm package** with better DX (CSS, TypeScript types, setup CLI)

The goal is that by the end you can install the package with less code and less effort and do:

import { SpotifyCard } from "spotify-now-playing-card"
import "spotify-now-playing-card/dist/styles.css"

export default function Footer() {
  return <SpotifyCard apiUrl="/api/spotify" />
}

API layer – without it there is no music 🎧

The first part is the standard Spotify API flow with a refresh token.
First and foremost we need to get the access token from Spotify, sou you should have a Spotify account and you should be able to get your credentials from Spotify developer portal.
After that we have credentials we can start with the API layer.

For Next.js App Router (app/api/spotify/route.ts) it looks like this:

import { NextResponse } from "next/server"

const SPOTIFY_CLIENT_ID = process.env.SPOTIFY_CLIENT_ID
const SPOTIFY_CLIENT_SECRET = process.env.SPOTIFY_CLIENT_SECRET
const SPOTIFY_REFRESH_TOKEN = process.env.SPOTIFY_REFRESH_TOKEN

let accessToken: string | null = null
let tokenExpiry = 0

async function getAccessToken(): Promise<string> {
  if (accessToken && Date.now() < tokenExpiry) return accessToken

  if (!SPOTIFY_CLIENT_ID || !SPOTIFY_CLIENT_SECRET || !SPOTIFY_REFRESH_TOKEN) {
    throw new Error("Spotify credentials not configured")
  }

  const response = await fetch("https://accounts.spotify.com/api/token", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      Authorization:
        "Basic " +
        Buffer.from(`${SPOTIFY_CLIENT_ID}:${SPOTIFY_CLIENT_SECRET}`).toString("base64"),
    },
    body: new URLSearchParams({
      grant_type: "refresh_token",
      refresh_token: SPOTIFY_REFRESH_TOKEN,
    }),
  })

  if (!response.ok) {
    throw new Error(`Failed to get access token: ${await response.text()}`)
  }

  const data = await response.json()
  accessToken = data.access_token
  tokenExpiry = Date.now() + 55 * 60 * 1000 // ~55 min

  return accessToken!
}

After that we need to return the format that the package expects:

export async function GET() {
  try {
    const token = await getAccessToken()

    const response = await fetch("https://api.spotify.com/v1/me/player/currently-playing", {
      headers: { Authorization: `Bearer ${token}` },
    })

    if (response.status === 204 || !response.ok) {
      return NextResponse.json({ isPlaying: false })
    }

    const data = await response.json()
    if (!data.item) return NextResponse.json({ isPlaying: false })

    return NextResponse.json({
      isPlaying: data.is_playing,
      title: data.item.name,
      artist: data.item.artists.map((a: any) => a.name).join(", "),
      album: data.item.album.name,
      albumImageUrl: data.item.album.images[0]?.url,
      songUrl: data.item.external_urls.spotify,
    })
  } catch (error) {
    console.error("Spotify API error:", error)
    return NextResponse.json({ isPlaying: false })
  }
}

This API endpoint is the only dependency that the package has from your project.

React + TypeScript component

You can see the full implementation and more details on my personal blog post. In the package the component looks like this:

export interface SpotifyCardProps {
  apiUrl?: string
  fallbackUrl?: string
  className?: string
  styles?: {
    container?: string
    link?: string
    image?: string
    title?: string
    artist?: string
    album?: string
    icon?: string
  }
  showAlbum?: boolean
  notPlayingText?: string
  refreshInterval?: number
}

const SpotifyCard: React.FC<SpotifyCardProps> = ({
  apiUrl = "/api/spotify",
  fallbackUrl = "https://open.spotify.com",
  className = "",
  styles = {},
  showAlbum = true,
  notPlayingText = "Currently not listening",
  refreshInterval = 30000,
  ...props
}) => {
  const { data, error } = useSWR<SpotifyData>(apiUrl, fetcher, {
    refreshInterval,
    revalidateOnFocus: true,
  })

  const defaultStyles = {
    container: "spotify-card-container",
    link: "spotify-card-link",
    image: "spotify-card-image",
    title: "spotify-card-title",
    artist: "spotify-card-artist",
    album: "spotify-card-album",
    icon: "spotify-card-icon",
  }

  const merged = { /* merging default + custom styles */ }

  const isPlaying = data?.isPlaying
  const titleClass = isPlaying ? "spotify-card-title-gradient" : ""

  return (
    <div className={merged.container} {...props}>{/* ... image, title, album, icon, gradient title ... */}</div>
  )
}

Important decisions:

SWR for caching + polling
TypeScript types (`SpotifyCardProps`, `SpotifyData`) are exported to `dist/index.d.ts`
props for styles so people can customize it with Tailwind or plain CSS

CSS that works everywhere (without Tailwind)

The original widget was pure Tailwind and i find it not really practical as my other project were not using Tailwind so there were no benefits in using it. You can see the original implementation in footer of my website.
For the npm package this is not desirable so I decided to use plain CSS as it can be used more easily in variety of projects.

So the solution was a small CSS file in the package:

.spotify-card-container {
  color: #94a3b8;
  border: 1px solid #262626;
  border-radius: 0.5rem;
  width: 100%;
  margin: 0.5rem 1.25rem;
}

In the Rollup configuration I just copy src/styles.css to dist/styles.css and the user can import it like this:

import "spotify-now-playing-card/dist/styles.css"

If you want full Tailwind control – simply pass your classes through the styles prop.

Packaging with Rollup + TypeScript setup

Short, rollup.config:

export default {
  input: "src/index.ts",
  output: [
    { file: packageJson.main, format: "cjs", sourcemap: true, exports: "named" },
    { file: packageJson.module, format: "esm", sourcemap: true },
  ],
  plugins: [
    resolve({ browser: true }),
    commonjs(),
    typescript({
      tsconfig: "./tsconfig.json",
      declaration: true,
      declarationDir: "./dist",
    }),
    copy({ targets: [{ src: "src/styles.css", dest: "dist" }] }),
  ],
  external: ["react", "react-dom", "react/jsx-runtime", "axios", "swr", "react-icons/si"],
}

This gives:

dist/index.js (CJS)
dist/index.esm.js (ESM)
dist/index.d.ts + SpotifyCard.d.ts (tipovi)
dist/styles.css

Small CLI for easier setup

For better DX I added a bin script:

  "bin": {
  "spotify-card-setup": "bin/setup.js"
}

The user can then run:

npx spotify-now-playing-card-setup

The script:

asks for clientId, clientSecret, refreshToken
creates the corresponding API endpoint (App router or Pages router)
writes the values to .env.local

Less copy/paste, less errors.

Usage in the application

Minimal code example in Next.js app:

import { SpotifyCard } from "spotify-now-playing-card"
import "spotify-now-playing-card/dist/styles.css"

export default function Footer() {
  return (
    <footer>
      <SpotifyCard apiUrl="/api/spotify" />
    </footer>
  ) 
}

With custom styles:


<SpotifyCard
  apiUrl="/api/spotify"
  styles={{
    container: "bg-gray-900/80 rounded-2xl border border-gray-700",
    title: "text-white text-lg font-semibold",
    artist: "text-gray-300",
  }}
  showAlbum
  notPlayingText="Currently off Spotify"
/>

Conclusion

If you have some custom widget in your project that you want to share with others, probably someone else would find it useful. I write more about similar topics on my personal blog where I share my experiences building web applications.
And if you don't want to share it, at least you can use it in your other projects without any effort I highly recommend you to do it.
With a little extra effort around the API, DX and packaging, you can turn it into a real npm package that lives outside of one project.
In my case it was the Spotify card – in your case it can be anything: GitHub card, Dev.to feed, custom loader…
Please let me know if you have any questions or suggestions on how to improve the package or the code, as well as how to make it more usefull to the masses.
Hope you enjoyed and plese check it out on npm :)

Check out the package on npm

If you found this post useful, you can check original post, check out more articles on my personal blog where I write about Nodejs, React, TypeScript, and web development in general!

You can also check out my GitHub for more projects and open source contributions.

How to embed link with preview in React Application

Bojan Jagetic — Sun, 13 Oct 2024 10:39:56 +0000

Introduction

When building a web application, it's often useful to show a preview of a link's content—like how social media platforms show link previews when you share a URL. So instead of just url text you can show og informations like pictures and desccription as well, beside url.

In this post, I'll walk you through embedding links in a React app, while fetching Open Graph metadata (such as title, image, and description) using axios and cheerio for scraping the target page's HTML.

We’ll create a simple EmbeddedLink component that fetches and displays Open Graph metadata for any provided URL.

Prerequisites

Before we start, make sure you have the following installed:

React – Set up a React project using Create React App or any method you prefer.
Axios – For making HTTP requests.
Cheerio – For parsing and scraping HTML (a server-side jQuery-like library usually used for scraping).

You can install Axios and Cheerio using the following commands:

npm install axios cheerio

Step 1: Creating the EmbeddedLink Component

We'll create a new EmbeddedLink component that takes in a url as a prop and fetches the Open Graph metadata from that link which we will use later on. Here's the full code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import cheerio from 'cheerio';

const EmbeddedLink = ({ url }) => {
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [imageUrl, setImageUrl] = useState('');
    const [title, setTitle] = useState('');
    const [description, setDescription] = useState('');

    useEffect(() => {
        const fetchOGData = async () => {
            try {
                const response = await axios.get(url, {
                    headers: {
                        'origin': 'https://mysite.com'
                    }
                });
                const html = response.data;

                // Parse HTML content using Cheerio
                const $ = cheerio.load(html);
                const ogImage = $('meta[property="og:image"]').attr('content');
                const ogTitle = $('meta[property="og:title"]').attr('content');
                const ogDesc = $('meta[property="og:description"]').attr('content');

                setImageUrl(ogImage || '');
                setTitle(ogTitle || '');
                setDescription(ogDesc || '');
                setLoading(false);
            } catch (error) {
                setError(error);
                setLoading(false);
            }
        };

        fetchOGData();
    }, [url]);

    if (loading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div className="embedded-link border-2 p-5 my-3 border-neutral-800">
            {imageUrl && <img src={imageUrl} alt={title} className="cover-image max-w-50 w-auto h-auto" />}
            <a href={url} target="_blank" rel="noopener noreferrer" className="text-indigo-500 underline font-bold text-2xl">
                {title && <h3>{title}</h3>}
            </a>
            {!imageUrl && !title && <p>No preview available</p>}
            <p className="my-3">{description}</p>
            <p className="text-slate-500">{url}</p>
        </div>
    );
};

export default EmbeddedLink;

Step 2: Using the EmbeddedLink Component

You can now use the EmbeddedLink component in your React app like this:

import React from 'react';
import EmbeddedLink from './EmbeddedLink';

function App() {
    return (
        <div className="App">
            <h1>Link Preview Example</h1>
            <EmbeddedLink url="https://example.com" />
        </div>
    );
}

export default App;

This will render a preview of the URL provided, with its image, title, and description.

Handling Errors and Loading States

We handle potential errors and loading states by showing appropriate messages to the user:

While the metadata is being fetched, a simple "Loading..." message is shown or you can use some animation spinner or whatever.
If something goes wrong during the fetch (e.g., a network issue), the error message is displayed.

Conclusion

When you are done, you should be able to see result like on the picture below.

I prefer this dev.to embedded link style, but you can style it whatever you like and prefer.

Update JSON file using Terminal or bash script

Bojan Jagetic — Sat, 12 Oct 2024 10:40:07 +0000

Introduction

When working with JSON files in a Linux or OS X environments, there are many times you need to automate updates to these files, you really dont have to but it makes your life easier. Whetheru you're dealing with configuration files, API data, or just plain old structured data, learning how to automate JSON file updates using Bash can save a lot of manual effort.

In this guide, we’ll walk through how to automate JSON updates using Bash scripts. We’ll use tools like jq and shell scripting to make this process efficient and easy to use.

Why Automate JSON File Updates?

Automation becomes crucial when:

You need to update multiple JSON files frequently.
You're working on a deployment pipeline that requires dynamic JSON values.
Configuration changes need to be applied in various environments.
why not? everything is easier when automated :)

How many times you wanted to alter some field in JSON from Jenkins for example. Let’s say you need to update a configuration file's field, such as modifying a version number, or injecting dynamic values from a CI/CD pipeline. Doing this manually is error-prone and time-consuming, which is where a Bash script becomes helpful.

Installation

jq: A lightweight and flexible command-line JSON processor.

Install using your package manager:

 sudo apt-get install jq -y    # Ubuntu/Debian
 sudo yum install jq        # RHEL/CentOS
 brew install jq            # macOS

Bash: Your Linux or macOS environment already has Bash installed by default.

Sample JSON File

Let’s say we have the following config.json file, open it with nano, vim or any text editor you prefer.

{
  "name": "my-project",
  "version": "1.0.0",
  "dependencies": {
    "express": "^4.17.1",
    "lodash": "^4.17.21",
    "typescript": "^5.3.3"
  }
}

You want to automate updating the version and adding a new dependency.

Step 1: Use jq to Read JSON Files

Before updating the JSON, it’s useful to know how to read JSON values using jq. For example, to read the version field:

jq '.version' config.json

The output will be:

"1.0.0"

You can also filter nested fields. For example, to read the express dependency version:

jq '.dependencies.express' config.json

The output will be:

"^4.17.1"

Step 2: Update JSON Values with jq

Now when we know how to read property values from JSON file, we can now update it.
To automate the process of updating JSON values, we can use the jq command with the --arg or --argjson options to update fields dynamically.

If we need to update the version from 1.0.0 to 1.1.0, we can do so by running:

jq '.version = "1.1.0"' config.json > tmp.json && mv tmp.json config.json

Let’s say you want to add a new dependency axios to the dependencies section which is nested:

jq '.dependencies.typescript = "^0.1.1"' config.json > temp.json && mv temp.json config.json

If you want to write new property to the root you can do it with ease.

jq '.author = "Bojan Jagetic"' config.json > temp.json && mv temp.json config.json

Finally after these changes, when we read our config.json we should be able to see changes.

{12:07}~ ➭ cat config.json
{
  "name": "my-project",
  "version": "1.1.0",
  "dependencies": {
    "express": "^4.17.1",
    "lodash": "^4.17.21",
    "typescript": "^0.1.1"
  },
  "author": "Bojan Jagetic"
}

Step 3: Create a Bash Script to Automate Updates

Now that we know how to read and update JSON , we can make a bash script which wil make our live easier and which will update mulitple fields at once.

#!/bin/bash

# Variables
VERSION="1.2.0"
NEW_DEP="axios"
NEW_DEP_VERSION="^0.21.1"

# Update version
jq --arg version "$VERSION" '.version = $version' config.json > tmp.json && mv tmp.json config.json

# Add a new dependency
jq --arg dep "$NEW_DEP" --arg ver "$NEW_DEP_VERSION" '.dependencies[$dep] = $ver' config.json > temp.json && mv temp.json config.json

echo "Updated config.json successfully!"

This script updates the version and adds a new dependency axios. You can add this script to your CI/CD pipeline or run it whenever you need to automate JSON updates.

Make the Script Executable
To use the script, save it as update-config.sh and make it executable:

chmod +x update_config.sh

Now, running ./update_config.sh or bash update_config.sh will update the JSON file automatically.

End results are like following:

{12:09}~ ➭ nano update_script.sh
{12:16}~ ➭ chmod +x update_script.sh        
{12:16}~ ➭ bash update_script.sh 
Updated config.json successfully!
{12:16}~ ➭ cat config.json          
{
  "name": "my-project",
  "version": "1.2.0",
  "dependencies": {
    "express": "^4.17.1",
    "lodash": "^4.17.21",
    "typescript": "1.1.0",
    "axios": "^0.21.1"
  },
  "author": "Bojan Jagetic"
}

Step 4: Automate version increase via script

Some of most used cases where would you find upating JSON usefull, is when you need to increase version automatically. Now we will add functionality to our script that will increase version as well so we do not need to manually add version, it will read current and increase minor version by one (0.0.1 -> 0.0.2).

So we will alter existing script, remove VERSION variable as we will not need it anymore, our bash script will read version by itself so no need to pass version.

#!/bin/bash

# Variables
NEW_DEP="axios"
NEW_DEP_VERSION="^0.21.1"

# Update version

# Add a new dependency
jq --arg dep "$NEW_DEP" --arg ver "$NEW_DEP_VERSION" '.dependencies[$dep] = $ver' config.json > temp.json && mv temp.json config.json

echo "Updated config.json successfully with new "$NEW_DEP"!"


CURRENT_VERSION=$(jq -r '.version' config.json)
# Split version into major, minor, and patch components
IFS='.' read -r major minor patch <<< "$CURRENT_VERSION"

patch=$((patch + 1))

# Combine into new version
NEW_VERSION="$major.$minor.$patch"

# Update version in config.json
jq --arg version "$NEW_VERSION" '.version = $version' config.json > tmp.json && mv tmp.json config.json

# Add a new dependency
jq --arg dep "$NEW_DEP" --arg ver "$NEW_DEP_VERSION" '.dependencies[$dep] = $ver' config.json > temp.json && mv temp.json config.json

echo "Updated config.json successfully! New version is $NEW_VERSION"

You should see output :

{12:30}~ ➭ bash update_script.sh
Updated config.json successfully with new axios!
Updated config.json successfully! New version is 1.2.1

Step 5: Automate JSON Updates via CI/CD (Optional)

If you’re using tools like Jenkins, GitLab CI, or GitHub Actions, you can add this script to your pipeline to automate configuration updates before deployment. Simply add a step that runs your Bash script.

Example (GitHub Actions):

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Update JSON Config
      run: ./update_config.sh

This will automatically update your JSON configuration file as part of the pipeline process.

Conclusion

Automating JSON file updates with Bash and jq is a powerful technique for handling configuration files or dynamic data, it can save a lot of time and headache by doing it manually. Whether you’re managing simple changes or complex updates, this process can streamline your workflow and reduce manual intervention.
Have in mind that this is simple example, you can make changes and make it better and suits your needs.

Give it a try and see how much time you save by automating JSON file updates!
Feel free to check original post

Update JSON file via Terminal or bash script

When working with JSON files in a Linux environment, there are many times you need to automate updates to these files. Whether you're dealing with configuration files, API data, or just plain old structured data, learning how to automate JSON file updates using Bash can save a lot of manual effort.

jageticbojan.com

Building a Powerful AI Chatbot with OpenAI&LangChain Part 1

Bojan Jagetic — Wed, 11 Sep 2024 15:00:00 +0000

Introduction

Chatbots are essential tools in various industries, providing automated interaction with users. There is no person in the world these days that have not tried at least once Chat GPT (or any other AI powered chatbot). Using OpenAI’s GPT models and the LangChain library, we can build a chatbot that handles sessions and processes user messages through a streaming response system, as in later post we will comunicate with our API's and make agents which will be specialized for certain things.

Here’s what we’ll cover:

Setting up an Express server with middleware.
Creating an `AgentManager` to handle chatbot agents.
Creating an ChatAgent to handle chatbot agents.
Streaming chatbot responses back to users in real-time.

Setting Up the Environment

First, we need a few key dependencies:

Express for handling API requests.
LangChain to manage GPT models and tools.
OpenAI for GPT model interaction. We need to obtain token from Open AI in order to use spawn sessions and interact with chatbot

Install Dependencies

First thing we do is to initialize new project and install neccessarry modules which we will use.

npm init -Y
npm install express langchain openai uuid class-validator class-transformer mutex

Setting Up Express Routes

To begin, we'll define two main routes:

First route will create a new chat session, whereas second one will send messages to an existing session.

router.post('/session', APIKeyMiddleware, createSession);
router.post('/session/:id/message', APIKeyMiddleware, postMessage);

The APIKeyMiddleware ensures that only authenticated requests access these routes. Note that you can implement middleware which suits yours needs.

Creating Agent Manager

We’ll create an AgentManager class to handle chat agents. This class is responsible for creating new agents and managing active sessions, so imagine this class as the main entrypoint for our API's as it will hadle agents which will be responsible for chat. First user will need to create session and later on that session will be used for chatting.

export class AgentManager {
    private __lock = new Mutex();
    private __agents: Map<string, AgentInstance> = new Map();

    async createAgent(authorization: string): Promise<string> {
        const uuid = uuidv4();
        const release = await this.__lock.acquire();
        try {
            this.__deleteExpiredAgentsLockless();
            let agent: ChatAgent | null = agent = new GeneralChatAgent(authorization);
            this.__agents.set(uuid, { agent, createdAt: Date.now() });
            return uuid;
        } finally {
            release();
        }
    }

    async getAgent(uuid: string): Promise<ChatAgent | null> {
        const release = await this.__lock.acquire();
        try {
            this.__deleteExpiredAgentsLockless();
            const agentInstance = this.__agents.get(uuid);
            return agentInstance ? agentInstance.agent : null;
        } finally {
            release();
        }
    }

    private __deleteExpiredAgentsLockless(): void {}
}

Creating General Agent

Now we need to create general chat agent, which will get parameters with lets say for example auth or any other you need and can be able to communicate with API, but for now we will extend existing ChatAgent and nothing more for this step.

export class GeneralChatAgent extends ChatAgent {
    constructor() {
        super();
    }
}

The createAgent method initializes an agent, locks the process, and assigns it to a unique session ID. Agents expire after a specified session duration, which is handled by the __deleteExpiredAgentsLockless method but we will implement it in the next itteration you can avoid it for now.

Handling Sessions and Messages

Next, let's define our session creation and message handling routes:

export const createSession = async (req: Request, res: Response): Promise<void> => {
    const authorization = req.headers['authorization'] as string;
    try {
        const sessionId = await agentManager.createAgent(authorization, AgentType.WEB);
        res.json({ sessionId });
    } catch (err) {
        if (err instanceof Error) {
            res.status(400).json({ error: err.message });
        } else {
            res.status(500).json({ error: 'An unknown error occurred' });
        }
    }
}

export const postMessage = async (req: Request, res: Response): Promise<void> => {
    const { id } = req.params;
    const { message } = req.body;

    if (!id || !message) {
        return res.status(400).json({ error: 'Bad request. Missing session ID or message' });
    }

    try {
        const agent = await agentManager.getAgent(id);
        if (!agent) {
            return res.status(400).json({ error: `No agent found with id ${id}` });
        }

        const iterable = await agent.invoke(message);
        await streamResponse(res, iterable);
    } catch (err) {
        res.status(500).json({ error: err instanceof Error ? err.message : 'An unknown error occurred' });
    }
}

Here, createSession sets up a new session and postMessage sends a user’s message to the agent. If no session or message is provided, it returns a 400 Bad Request error.
Streaming Responses

Now, the key to making our chat bot feel responsive and interactive: streaming the response.

async invoke(input: string): Promise<AsyncIterable<Chunk>> {
    const release = await this.__lock.acquire();
    try {
        const tool = this.determineTool(input);
        if (tool) {
            const toolOutput = await tool.call(input);
            this.callbackQueue.enqueue({ type: ChunkType.TOKEN, value: toolOutput });
            this.callbackQueue.enqueue({ type: ChunkType.FINISH, value: '' });
        } else {
            await this.chat.invoke([new HumanMessage(input)], {
                callbacks: [
                    {
                        handleLLMNewToken: (token: string) => {
                            this.callbackQueue.enqueue({ type: ChunkType.TOKEN, value: token });
                        },
                        handleLLMEnd: () => {
                            this.callbackQueue.enqueue({ type: ChunkType.FINISH, value: '' });
                        },
                        handleLLMError: (error: Error) => {
                            this.callbackQueue.enqueue({ type: ChunkType.ERROR, value: error.message });
                        }
                    }
                ]
            });
        }
        return this.createAsyncIterable(this.callbackQueue);
    } finally {
        release();
    }
}

private createAsyncIterable(callbackQueue: AgentCallbackQueue): AsyncIterable<Chunk> {
    return {
        [Symbol.asyncIterator]: async function* () {
            let finished = false;
            while (!finished) {
                const chunk = await callbackQueue.dequeue();
                if (chunk) {
                    yield chunk;
                    if (chunk.type === ChunkType.FINISH || chunk.type === ChunkType.ERROR) {
                        finished = true;
                    }
                } else {
                    await new Promise(resolve => setTimeout(resolve, 100));
                }
            }
        }
    };
}

In the invoke method, the agent processes the user’s input and streams back the response in chunks. Each chunk is either a token from the model or a message indicating the end of the stream.

The createAsyncIterable method allows us to generate these chunks one by one and stream them back to the client.

Streaming response

In the end, we want to stream response to client as we recieve it, dont want to wait for some time until completes and return the whole response, better solution is to stream response in chunks.


const delay = (ms: number): Promise<void> => new Promise(resolve => setTimeout(resolve, ms));

export async function streamResponse(res: Response, iterable: AsyncIterable<Chunk>) {
    res.setHeader('Content-Type', 'application/x-ndjson');
    res.setHeader('Transfer-Encoding', 'chunked');

    try {
        let buffer = '';
        for await (const chunk of iterable) {
            switch (chunk.type) {
                case ChunkType.TOKEN:
                    buffer += chunk.value; 
                    res.write(buffer);
                    if (res.flush) res.flush();
                    buffer = '';
                    break;

                case ChunkType.ERROR:
                    console.error('Error chunk:', chunk.value);
                    if (!res.headersSent) {
                        res.status(500).json({ error: 'Streaming failed.' });
                    }
                    return;

                case ChunkType.FINISH:
                    if (buffer.trim()) {
                        res.write(`${buffer.trim()}\n`);
                    }
                    return;
            }
        }
    } catch (err) {
        console.error('Error during streaming:', err);
        if (!res.headersSent) {
            res.status(500).json({ error: 'Streaming failed.' });
        }
    } finally {
        res.end();
    }
}

Conclusion

Congratulations! You now have a basic chatbot that handles chat sessions and streams responses back to the client. This architecture can be easily extended with additional tools, more sophisticated logic, or different GPT models, but for now we have skeleton for more complex chatbot.

By using OpenAI’s powerful language models and LangChain’s tool management, you can create more advanced and interactive chatbots for various domains.You can expand the chatbots capabilities and make it in a way that you want but on the other hand you dont need to use Langchain , you can use OpenAI and make even more simpler chat bot if you prefer that way.

Stay tuned for more , in next post we will talk about building tools for chat agent we made
Happy coding!

Feel free to check original post

Building a Powerful Chatbot with OpenAI and LangChain

In this post, we'll walk through how to create a basic but powerful chatbot using OpenAI and LangChain

jageticbojan.com

Sending Emails Using Node.js

Bojan Jagetic — Thu, 25 Apr 2024 09:34:43 +0000

Introduction

In this guide, we'll explore how to send emails using Node.js with the help of Nodemailer, a module for Node.js applications to allow easy email sending.

Prerequisites

Before we dive into the code, ensure you have the following prerequisites:

Node.js installed on your system
An understanding of JavaScript and Node.js basics
An email account for sending emails
Basic knowledge of Express.js (optional)

Setting Up Nodemailer

First, install the Nodemailer package in your Node.js project using npm or yarn:

npm install nodemailer
npm install multer

Setting environment variables

Then, create a .env file in your project directory to store sensitive information like email credentials:

EMAIL_HOST=your_email_host
EMAIL_PORT=your_email_port
EMAIL_USERNAME=your_email_username
EMAIL_PASSWORD=your_email_password

Replace your_email_host, your_email_port, your_email_username, and your_email_password with your email provider's SMTP details.

Writing the Code

As in this example I am using Express.js we should make router and controller for our API. Lets start with router which will

Setting up Express Router

Now, let's write the Node.js code to send emails. Here's an example function using Express.js for handling email sending requests. In more advanced example I added middelware for validation and token verification, but we can skip it for now. If we want user to be able to attach files when sending email, we can use multer for easy file uploading.

// emailRoutes.js

const express = require('express');
const router = express.Router();
require('dotenv').config();
const verifyToken = require('../../middleware/verifyToken');
const upload = require('../../libs/multer');
const { emailSenderValidation, emailContactValidation } = require('../../middleware/mailerValidation');
const { sendNotifyPlainEmail } = require('../../controllers/email/emailController');

// POST route for sending notification emails with plain text
router.post('/notify/plain', upload.any('files'), verifyToken, emailSenderValidation, sendNotifyPlainEmail);

module.exports = router;

Controller Functions

Now, let's define the controller functions for handling email sending in emailController.js:

const nodemailer = require("nodemailer");
require('dotenv').config();
const path = require('path');
const { validationResult } = require('express-validator');
const { generateSimpleEmail, generateContactEmail } = require('./emailGenerator');

async function sendNotifyPlainEmail(req, res) {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
        return res.status(400).json({ errors: errors.array() });
    }
    const { to, cc, subject, content } = req.body;

    try {
        const transporter = nodemailer.createTransport({
            host: process.env.EMAIL_HOST,
            port: process.EMAIL_PORT,
            secure: true,
            auth: {
                user: process.env.EMAIL_USERNAME,
                pass: process.env.EMAIL_PASSWORD,
            },
            tls: {
                rejectUnauthorized: true,
            },
        });
        const haveAttachments = req?.files ? req.files.map(file => {
            return {
                filename: file?.originalname,
                path: path.join('uploads', file?.originalname),
                cid: file?.filename
            }
        }) : false;

        const info = await transporter.sendMail({
            from: '"Admin Test 🚀" <office@mail.com>',
            to: to,
            cc: cc,
            subject: subject,
            text: content,
            html: content,
            attachments: haveAttachments ? haveAttachments : ''
        });
        console.log(info.envelope);
        console.log("Message sent: %s", info);
        res.send({ data: `Email sent to ${to}`, messageId: info.messageId }).status(200);
    } catch (exc) {
        console.error('error happened', exc);
        res.status(400).send({ message: `Message was not delivered to ${to}`, error: exc });
    }
}

module.exports = { sendNotifyPlainEmail };

Testing API

Ok now we have our API so we want to test it , easiest way to do is with postman or curl, here is the example for curl :

curl --location 'http://localhost:3000/email/notify/plain' \
--header 'x-api-key: 1111111-1111-111-1111-11111' \
--form 'to="jagetic.bojan@testmail.com"' \
--form 'content="Test 123"' \
--form 'subject="Test Subject"'

After successfully calling our new API we should be able to see response

{"data":"Email sent to jagetic.bojan@testmail.com","messageId":"<2c9cbf8e-25db-e329-11111-1111111@test.com>"}%

Conclusion

With this code, you can easily send emails using Node.js and Nodemailer. Remember to handle errors gracefully and secure your email credentials properly.

Feel free to customize the code according to your specific requirements and integrate it into your Node.js applications for sending emails effortlessly.

Please leave your comments if you want part 2 where we will be sending email templates using mailer and be sure to checkout original post

Sending Emails Using Node.js

With Node.js, developers have a powerful tool at their disposal for automating tasks, including sending emails.

jageticbojan.com

Embark on a UI Odyssey: 5 Spectacular Libraries to Explore

Bojan Jagetic — Tue, 16 Apr 2024 16:00:00 +0000

Introduction

In the ever-evolving landscape of web development, thousands of websites are being made everyday, with existing . With the rise of modern UI libraries, developers now have access to powerful tools and components that can transform their projects from mundane to mesmerizing.

In this post, we'll embark on an exhilarating journey through five exceptional modern UI libraries: Radix, Shadcn, Aceternity, Ripple UI, and Mantine. Each library brings its own unique flair and features to the table, catering to the diverse needs of developers and designers alike.

Radix

Radix UI

Components, icons, and colors for building high‑quality, accessible UI. Free and open-source.

radix-ui.com

Elevating UI Component Composition

Radix takes a revolutionary approach to UI component composition, offering a flexible and composable system that empowers developers to build complex interfaces with ease. With Radix, you can create truly modular UI components that are highly customizable and reusable across projects. Whether you're designing a simple button or a sophisticated dropdown menu, Radix provides the building blocks you need to bring your vision to life.

Shadcn

ui.shadcn.com

Embracing the Shadows of Design

Shadcn is a cutting-edge UI library that puts shadows at the forefront of design. With its extensive collection of shadow presets and utilities, Shadcn enables developers to add depth and dimension to their interfaces with just a few lines of code. Whether you're crafting a sleek card layout or a dynamic navigation bar, Shadcn's shadows will elevate your design to new heights, creating a visually stunning experience for users.

Aceternity

ui.aceternity.com

The Age of Accessibility

Aceternity is a forward-thinking UI library that prioritizes accessibility in every aspect of design. From color contrast ratios to keyboard navigation, Aceternity ensures that your interfaces are inclusive and user-friendly for all. With its robust accessibility features and guidelines, Aceternity empowers developers to create interfaces that are not only beautiful but also accessible to everyone, regardless of their abilities or disabilities.

Ripple UI

RippleUI | TailwindCSS Components

Cleanest, modern and beatifull Tailwind CSS components, Ripple UI is a collection of components that can be easily integrated into your project to provide a consistent, responsive design and improve the user experience of your application.

ripple-ui.com

Making Waves in UI Design

Ripple UI is a versatile UI library that brings motion and interactivity to the forefront of design. With its intuitive motion presets and dynamic animations, Ripple UI adds a touch of magic to every interaction, delighting users and creating memorable experiences. Whether you're designing a playful loading spinner or an engaging hover effect, Ripple UI's animations will captivate your audience and leave a lasting impression.

Mantine

Liquid error: internal

Empowering Developers with Essential Tools

Mantine is a comprehensive UI library that provides developers with a wide range of essential tools and components for building modern interfaces. From form elements to layout utilities, Mantine offers everything you need to streamline your development workflow and accelerate your project's progress. With its intuitive API and extensive documentation, Mantine makes it easy to create polished and professional interfaces without breaking a sweat.

Conclusion

The world of modern UI libraries is vast and vibrant, offering a wealth of options for developers seeking to create extraordinary user experiences. Whether you're drawn to Radix's modular approach, Shadcn's emphasis on shadows, Aceternity's focus on accessibility, Ripple UI's dynamic animations, or Mantine's comprehensive toolkit, there's a library out there that's perfect for your next project.

So why wait? Dive into the world of modern UI design and unleash your creativity with Radix, Shadcn, Aceternity, Ripple UI, Mantine, and beyond. Your users will thank you for it.

Umami: Best free Go-To Google Analytics Alternative

Bojan Jagetic — Thu, 11 Apr 2024 14:21:38 +0000

Introduction

Are you tired of relying solely on Google Analytics to track your website's performance? Look no further! Introducing Umami , a powerful and privacy-focused alternative that puts you in control of your analytics data. Umami was founded by three brothers, Mike, Brian and Francis Cao as they were frustarted with using Google Analytics, which dominated and still does the industry of analytics despite of privacy concerns. As it is open-source, Umami quickly started being popular open-source project while still respecting privacy of users. My personal opinion, is that Umami is really easy to setup and use, for smaller projects as my personal website it is of great use. It does not many tracking as GA but it really does its job.

In this post, we'll explore the benefits of using Umami over Google Analytics, how to set it up, and some catchy variations for its name.

Why you should choose Umami

Privacy: As I mentioned in the introduction section, unlike Google Analytics, which collects and stores user data on Google's servers, Umami can be self-hosted, giving you full ownership and control of your data. Say goodbye to third-party tracking and privacy concerns! You can host umami on your servers and really be owner of analytics data.
Open Source: Umami is open-source software, meaning you can inspect, modify, and customize it to suit your needs. No more black-box analytics solutions—take control of your analytics stack.
This can be real advantage as you can tailor Umami for your needs, as well as I did with dockerizing Umami. If you are interested in self hosting Umami which unlocks you many more possibilites than free plan you can check my post on

bojanjagetic.com / libary/umami-dockerized
Simplicity: Umami provides a clean, intuitive and modern interface for analyzing your website traffic without overwhelming you with unnecessary features. I dont say it is useless, but many thing from GA I personally dont use and havent used at least once. It's lightweight, fast, and focused on delivering actionable insights.
Real-Time Tracking: With Umami, you can monitor your website traffic in real-time, gaining instant visibility into visitor behavior and trends as they unfold. Say hello to up-to-the-second analytics reporting! You can track real time user activity, views and events.

Setting Up Umami

As mention above you can use Umami on two ways, Cloud (umami cloud free plan) and Self-hosted (hosted on your machine).

Umami Cloud

Visit Umami website and Sign Up or Login if you already have account.
After you login you should be able to see screen like this
Click on + Add Website and you will be prompted to enter websites Name and Domain.
After entering go to Save and you will be able to see your newly made website under Websites Menu.
Now when we have website created we must add tracking code we get from Umami for our website and add it in our applications header. It is important to add to our header in order to Umami be able to stream statistics data to Umami cloud. Go to Edit and you will see Tracking code tab click on that and you will get script code which you need to add in your application.

You should be able to see somthing like this

<script defer src="https://eu.umami.is/script.js" data-website-id="XXXXXX-XXXX-XXXX-XXX-XXXXX"></script>

Copy that code provided by Umami and paste in your application <header>, in this example I am using Next.js so i added it into _document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
    static async getInitialProps(ctx) {
        const initialProps = await Document.getInitialProps(ctx)
        return { ...initialProps }
    }

    render() {
        return (
            <Html lang="en">
                <Head>
                    <script defer src="https://analytics.eu.umami.is/script.js" data-website-id="XXXXX-XXXX-XXXX-XXXX-XXXXX"></script>
                </Head>
                <body>
                    <div id={'globalLoader'} >
                    </div>
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }

}
export default MyDocument

or if you want in plain html, you should add it like following

<head>
  <script defer src="https://analytics.eu.umami.is/script.js" data-website-id="XXXXX-XXXX-XXXX-XXXX-XXXXX"></script>
</head>

Now that we have tracking script in our application we are ready to deploy it (in my case that is on Vercel). After deploy is done we should be able to see data streamed to our Umami Analytics.

You are able to track events as well in Umami and it is pretty straight forward, just add it to desired button, link, etc. like in example below

<button id="signup-button" data-umami-event="Signup button">Sign up</button>

Self-Hosted

If you want to host Umami on your machines, you are free to do so. Easisest way which i used many times is that I use dockerized Umami and run it in docker containers on my desired machine.
Easiest way to do so is to go to the so is to follow this guide Dockerizing Umami .
Basically, you need docker compose file, and Docker installed on your machine. When you have all prerequisites you can run

docker compose up -d

This will start docker server in one container and database in the other which is needed in order to Umami stores data of your analytics.
Pretty straight forward steps and you are ready to go, visit specified port for Umami you set and thats it. Afterwards you can host it on your server wherever you want.

Conclusion

In conclusion, Umami offers a refreshing alternative to Google Analytics, providing privacy, openness, simplicity, and real-time tracking—all while putting you in control of your analytics destiny. Give Umami a try today and unlock the true potential of your website analytics.

Keep in mind that you dont have to option only one analytics tool, you have options and ability to use multiple analytics for the same website for whatever purpose you choose. On my website, I personally use Umami, Google Analytics, Vercel Analytics and Splitbee (later aquired by Vercel).

Note: Remember to always comply with applicable data protection laws and regulations when collecting
and processing user data.

Feel free to checkout my original post

bojanjagetic.com / post/umami

Sending Telegram Messages using Node.js and the Telegram API

Bojan Jagetic — Wed, 13 Mar 2024 12:25:07 +0000

Introduction

Telegram is a popular messaging app that allows users to send messages, photos, videos, and other types of media to other Telegram users. Me personally use it almost everyday as a way to communicate with family and friends, in short words I really prefer it to some more popular ones as Viber and Whatsapp. One of the great features of Telegram is that it also has an API that allows developers to interact with Telegram's servers and send messages to Telegram users programmatically so your possibilities are infinity. In this blog post, I will keep it short, we will learn how to send Telegram messages via the Telegram API using Node.js.

Setting up a Telegram Bot

Before we can start sending messages, we need to set up a Telegram bot. To create a new Telegram bot, we need to talk to the BotFather on Telegram. The BotFather is a Telegram bot that helps you create and manage your Telegram bots, so its like spawning point for bots. To start a conversation with the BotFather, open Telegram and search for BotFather. Once you have started a conversation, you can use the following commands to create a new bot:

/newbot
/mybots
/myapps
/token
/revoke
.
.
.

What is @botfather

As we already mentioned, BotFather is a bot on Telegram that manages all the bots that you create via your account on Telegram. You can reach him by searching @botfather on Telegram and you should see this profile. To see what he can do, send /start or /help in the chat with BotFather, and you should see a list of commands that he has

/newbot

It should look something like this

Follow the instructions provided by the BotFather to set a name and username for your bot. Once you have created your bot, the BotFather will give you a token that you can use to authenticate with Telegram's servers. Make sure to save your bot's token somewhere safe, as you will need it later.

Installing the node-telegram-bot-api package

To send messages to Telegram users using Node.js, we will use the node-telegram-bot-api package. You can install this package by running the following command in your terminal:

npm install node-telegram-bot-api

Sending a message

Once we have the package installed, we can use the following code to send a message to a Telegram user:

const TelegramBot = require('node-telegram-bot-api');
const token = 'YOUR_BOT_TOKEN';
const bot = new TelegramBot(token, {polling: true});

bot.sendMessage('USER_CHAT_ID', 'Hello, this is a message from your Telegram bot.');

Make sure to replace YOUR_BOT_TOKEN with your actual bot token, and USER_CHAT_ID with the chat ID of the Telegram user you want to send the message to.

You can also send more complex messages like photos, videos, documents, etc.

Conclusion

In this blog post, we have learned how to send Telegram messages via the Telegram API using Node.js. We have seen how to create a Telegram bot, install the node-telegram-bot-api package, and send messages to Telegram users. Telegram's API is a powerful tool that can be used to create all sorts of interesting projects, from chatbots to automated news bots. By following the steps outlined in this blog post, you should now be able to send messages to Telegram users using Node.js and the Telegram API.

Please do refer node-telegram-bot-api for more details and examples.
Also you can check original post:

Sending Telegram Messages using Node.js and the Telegram API

One of the great features of Telegram is that it also has an API that allows developers to interact with Telegram's servers and send messages to Telegram users programmatically.

jageticbojan.com

Creating modern Landing page with Particles and React

Bojan Jagetic — Tue, 12 Mar 2024 13:20:48 +0000

Introduction

In this tutorial, we'll explore how to create a modern landing page using React and a particle effect background. We'll use the react-tsparticles library to add a dynamic and interactive particle effect to our landing page background.

Particle Background Component

Prerequisite

As always first thing we need to do is to install dependencies necessary for particles to work. We need react-tsparticles as well as tsparticles-slim on which react-tsparticles is dependent on.

npm install react-tsparticles
npm i tsparticles-slim

Setting up Particle background component

First, let's create a reusable component for the particle background, so we can use it in multiple places not just landing page. We'll use the Particles component from the react-tsparticles library. Here's how you can set up the Particle Background component:

// Particles.jsx
import React, { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadSlim } from "tsparticles-slim";

const ParticlesBackground = () => {
    const particlesInit = useCallback(async (engine) => {
        await loadSlim(engine);
    }, []);

    const particlesLoaded = useCallback(async (container) => {
        await console.log(container);
    }, []);

    return (
        <Particles
            id="tsparticles"[](url)
            init={particlesInit}
            loaded={particlesLoaded}
            options={{
                // Customize particle options here

            }}
        />
    );
};

export default ParticlesBackground;

Good thing with react-tsparticles is that it is really configurable, so you can set it up by your needs and preferences. For all available options you can refer to its documentation where it all described pretty much in details so i wont go further into details.

Particles configuration breakdown

Here you can checkout general overview of options available and short description about every one of them.

Integrating Particle Background into the Landing Page

Now, let's integrate the Particle Background component into our landing page. We'll add it as the background of a section in our landing page layout:

import React from "react";
import ParticlesBackground from "./ParticlesBackground";

const LandingPage = () => {
    return (
        <div className='bg-gradient-to-b from-neutral-900  to-[#7928ca] '>
            <ParticlesBackground />
            <div className=' text-slate-200 md:px-10 px-5 '>
                {/* Content for the landing page */}
            </div>
        </div>
    );
};

export default LandingPage;

Before and After

Before

Before implementation of particles, as you can see it, landing page is pretty minimalist, gradient background, links and some text.

After

So you can see difference between landing with and without particles, it looks more modern and more cool in my opinion.

Live Example

Feel free to checkout live example on my website where I implemented it into already existing UI.

Bojan Jagetic

Perfection is achieved not when there is nothing more to add, but rather when there is nothing more to take away

jageticbojan.com

Conclusion

With the react-tsparticles library, we can easily add dynamic and interactive particle backgrounds to our React applications. This adds a modern and visually appealing touch to our landing pages, making them stand out and engage users effectively. Feel free to customize the particle options to fit your design requirements and create stunning landing pages for your projects as well as to leave comment of ask for help if I can help in anyway.

A Deep Dive into componentDidMount and useEffect in React

Bojan Jagetic — Mon, 21 Aug 2023 08:35:20 +0000

Introduction

It's been a long time since last post, I have many new posts ready in draft, but let's start with one simple posts which I hope clarify a lot.
As a React developer, you may have come across the terms componentDidMount and useEffect when working with lifecycle methods and hooks, I mean it is almost impossible to make a React application and not encounter one of those two. Although they both serve similar purposes, they are not interchangeable and have some key differences. In this blog post, we'll take a closer look at each method and when to use them in your React projects.

componentDidMount

componentDidMount is a lifecycle method that is called after a component has been rendered to the DOM. It's commonly used to perform any setup or initialization tasks that need to happen after the component has been rendered. For example, you might use componentDidMount to fetch data from an API, set up a subscription, or add event listeners.

class ExampleComponent extends React.Component {
  componentDidMount() {
    // perform setup tasks here
  }

  render() {
    // component render logic here
  }
}

One of the key benefits of using componentDidMount is that it guarantees that the component has been rendered before the code inside the method is executed. This can be useful if you need to access the DOM or if you want to be sure that the component is fully rendered before you perform any logic.
componentDidMount is used in Class components

useEffect

useEffect is a hook that allows you to synchronize a component with an external system. It's similar to componentDidMount, componentDidUpdate, and componentWillUnmount combined. It allows you to add logic that is executed after the component is rendered, and also allows you to clean up that logic when the component is unmounted.

function ExampleComponent() {
  useEffect(() => {
    // perform setup tasks here
    return () => {
      // clean up tasks here
    }
  }, []);

  // component render logic here
}

The first argument passed to useEffect is a function containing the logic to be executed after the component is rendered. The second argument is an array of dependencies, which are values that the effect depends on. If any of the dependencies change, the effect will be re-executed.

One of the key benefits of using useEffect is that it allows you to synchronize a component with external systems in a more declarative and efficient way than using lifecycle methods. This can make your code easier to understand, test and reuse.

useEffect hook is equivalent of componentDidMount in functional components

When to use which

As a general rule of thumb, if you're working with class components and you need to perform setup or cleanup tasks that are related to the component's lifecycle, you should use componentDidMount. If you're working with functional components and you need to synchronize the component with an external system, you should use useEffect.

In practice, you'll often find that you can use either method to accomplish the same task. The key is to understand the trade-offs between the two and choose the one that makes the most sense for your specific use case.

Conclusion

componentDidMount and useEffect are both powerful tools that can help you manage the lifecycle of your React components. Understanding the differences between them and when to use them will help you write more maintainable, efficient and organized code.
So now you know what is the main difference between these two and how and when to use them. Follow the guidelines and you will reach full potential of your React application.

Spotify API for creating 'Listening now' card with Nextjs

Bojan Jagetic — Fri, 02 Jun 2023 17:11:31 +0000

Introduction

In this blog post, we'll explore a code snippet that demonstrates how to create a Spotify API wrapper using Next.js and the popular HTTP client library, Axios. This code we will write, will allows you to fetch information about the currently playing track on your Spotify account and retrieve details such as the song title, artist, album, album cover image URL, and the Spotify song URL. Its up to you to show whatever you like, this is my example which I am currently using on my personal webiste so feel free to be creative as much as you like. So I will not bother anymore, let's dive into the code and understand how it works.

Idea behind project

Nothing special to be honest, as I mentioned already above I wanted to show which music I am currently listening on Spotify and who knows, maybe some uknown visitor likes the song so at least I can do in this case is recommend some good music :)

Code Explanation

The code begins with the requiring neccessarry modules for this project, querystring and axios, are imported. querystring is used to stringify the request parameters (you dont have to use it, I already had it in project so find a good use of it but its not necessarry), while axios is used to make HTTP requests to the Spotify API.

The following code retrieves the required environment variables, which are named SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET, and SPOTIFY_REFRESH_TOKEN, using destructuring assignment from the process.env object. These variables store sensitive information and should be kept secure so thats why it is strongly recommended to use environment variable. Be aware that you have to get your tokens from spotify developer portal.

The token variable is then created by encoding the client_id and client_secret using Base64 encoding. It will be used for authentication as a bearer token when we want to request an access token from Spotify.

Two constants, NOW_PLAYING_ENDPOINT and TOKEN_ENDPOINT, store the Spotify API endpoints for retrieving currently playing track information and obtaining access tokens, respectively.

import querystring from 'querystring'
import axios from 'axios'

const {
  SPOTIFY_CLIENT_ID: client_id,
  SPOTIFY_CLIENT_SECRET: client_secret,
  SPOTIFY_REFRESH_TOKEN: refresh_token
} = process.env

const token = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
const NOW_PLAYING_ENDPOINT = 'https://api.spotify.com/v1/me/player/currently-playing'
const TOKEN_ENDPOINT = 'https://accounts.spotify.com/api/token'

The getAccessToken function, as already said, will be used for fetching access token from Spotify, it sends a POST request to the TOKEN_ENDPOINT https://accounts.spotify.com/api/token with the necessary parameters, including the grant_type set to refresh_token and the refresh_token obtained from the environment variables. The request includes the Authorization header with the encoded client_id and client_secret. The response data, which contains the access token, is returned.

const getAccessToken = async () => {
  const response = await axios.post(
    TOKEN_ENDPOINT,
    querystring.stringify({
      grant_type: 'refresh_token',
      refresh_token
    }),
    {
      headers: {
        Authorization: `Basic ${token}`,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }
  )

  return response.data
}

Lets move on to the getNowPlaying function is another asynchronous function that retrieves the currently playing track information from the NOW_PLAYING_ENDPOINT API https://api.spotify.com/v1/me/player/currently-playing. It first calls getAccessToken to obtain the access token, then sends a GET request to the NOW_PLAYING_ENDPOINT with the access token included in the Authorization header.

export const getNowPlaying = async () => {
  const { access_token } = await getAccessToken()
  return axios.get(NOW_PLAYING_ENDPOINT, {
    headers: {
      Authorization: `Bearer ${access_token}`
    }
  })
}

Finally, we are coming to the callSpotifyApi function which will be exported as a default and will be called. It calls getNowPlaying to get the currently playing track information. If the response status is 204 (no content) or an error occurs, it will send a JSON response indicating that nothing is currently playing so you should show something else. Otherwise, if there is some song playing, it extracts relevant data from the response and constructs a JSON object containing details about the currently playing track.


const spotifyApi = async (_, res) => {
  const response = await getNowPlaying()
  if (
    response.status === 204 || response.status > 400 || (response.data && response.data.currently_playing_type !== 'track')
  ) {
    return res.status(200).json({ isPlaying: false })
  }

  const data = {
    isPlaying: response.data.is_playing,
    title: response.data.item.name,
    album: response.data.item.album.name,
    artist: response.data.item.album.artists.map((artist) => artist.name).join(', '),
    albumImageUrl: response.data.item.album.images[0].url,
    songUrl: response.data.item.external_urls.spotify
  }

  res.status(200).json(data)
}

export default spotifyApi

So finally, here is spotify.js file, completed.

/* eslint-disable camelcase */
// /pages/api/spotify.js
import querystring from 'querystring'
import axios from 'axios'

const {
  SPOTIFY_CLIENT_ID: client_id,
  SPOTIFY_CLIENT_SECRET: client_secret,
  SPOTIFY_REFRESH_TOKEN: refresh_token
} = process.env

const token = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
const NOW_PLAYING_ENDPOINT = 'https://api.spotify.com/v1/me/player/currently-playing'
const TOKEN_ENDPOINT = 'https://accounts.spotify.com/api/token'

const getAccessToken = async () => {
  const response = await axios.post(
    TOKEN_ENDPOINT,
    querystring.stringify({
      grant_type: 'refresh_token',
      refresh_token
    }),
    {
      headers: {
        Authorization: `Basic ${token}`,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }
  )

  return response.data
}

export const getNowPlaying = async () => {
  const { access_token } = await getAccessToken()
  return axios.get(NOW_PLAYING_ENDPOINT, {
    headers: {
      Authorization: `Bearer ${access_token}`
    }
  })
}

const spotifyApi = async (_, res) => {
  const response = await getNowPlaying()
  if (
    response.status === 204 || response.status > 400 || (response.data && response.data.currently_playing_type !== 'track')
  ) {
    return res.status(200).json({ isPlaying: false })
  }

  const data = {
    isPlaying: response.data.is_playing,
    title: response.data.item.name,
    album: response.data.item.album.name,
    artist: response.data.item.album.artists.map((artist) => artist.name).join(', '),
    albumImageUrl: response.data.item.album.images[0].url,
    songUrl: response.data.item.external_urls.spotify
  }

  res.status(200).json(data)
}

export default spotifyApi

Spotify card

So basically for Spotify card you can make whatever you like, so feel free to make it by your preferences. I have been using in this project Next.js with Tailwind and for calling Spotify API I used SWR which is basically 'React Hook for Data Fetching', but if you want to find more about that topic you can check my other post What is SWR and How Can It Improve Your React Apps.
So here is how it is looking inside of my app when I am not listening anything:

So here is how it is looking inside of my app when I am listening :

Conclusion

In this blog post, we explored a code snippet that demonstrates how to create a Spotify API wrapper using Next.js and Axios, simple as that. The code allows you to fetch information about the currently playing track on Spotify and retrieve details such as the song title, artist, album, album cover image URL, and the Spotify song URL. You can use this code as a starting point to build more advanced Spotify-related functionality in your applications or you can get some more better idea. Feel free to modify and extend the code to suit your specific requirements this is just my type but you can make it however you wish. I hope I helped, if you have any question please let me know and Happy coding!