DEV Community: FOLASAYO SAMUEL OLAYEMI

Building a Senior-Level DevOps / SRE / Infrastructure Engineer Terminal Setup (macOS)

FOLASAYO SAMUEL OLAYEMI — Wed, 27 May 2026 11:13:26 +0000

This guide walks through building a powerful terminal environment used by Senior Site Reliability Engineers, DevOps Engineers, and Infrastructure Engineers.

It focuses on:

Productivity
Safety in production environments
Better visibility of system state
Faster workflows
Modern tooling

1. Why your terminal matters as a Senior Engineer

In real infrastructure work, your terminal is not just a tool — it is your:

Control center for production systems
Kubernetes interface
Cloud interaction layer (AWS/GCP/Azure)
Debugging environment
Deployment interface

A good terminal setup reduces:

Human errors
Deployment mistakes
Context switching time
Cognitive load

2. Install Zsh (modern shell)

macOS already ships with Zsh, but we ensure it’s active and up to date.

Check your shell:

echo $SHELL

If not Zsh:

chsh -s /bin/zsh

3. Install Oh My Zsh (plugin framework)

Oh My Zsh helps manage plugins and configuration.

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

4. Install essential plugins (productivity layer)

We install two core plugins:

1. Autosuggestions

Shows previous commands as you type.

git clone https://github.com/zsh-users/zsh-autosuggestions \
${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

2. Syntax Highlighting

Highlights valid/invalid commands.

git clone https://github.com/zsh-users/zsh-syntax-highlighting \
${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

Enable plugins

Edit:

nano ~/.zshrc

Set:

plugins=(git zsh-autosuggestions zsh-syntax-highlighting)

Reload:

exec zsh

5. Install Starship (modern prompt system)

Starship is a cross-shell prompt engine that shows:

Git branch
Node/Python versions
Kubernetes context
Cloud context
Directory status

Install:

brew install starship

Add to .zshrc:

eval "$(starship init zsh)"

Create Starship config

mkdir -p ~/.config
nano ~/.config/starship.toml

Example config:

add_newline = true

format = """
$directory\
$git_branch\
$git_status\
$nodejs\
$python\
$docker_context\
$kubernetes\
$line_break\
$character"""

[character]
success_symbol = "❯"
error_symbol = "❯"

[git_branch]
symbol = "🌿 "

[nodejs]
symbol = "⬢ "

[docker_context]
symbol = "🐳 "

[kubernetes]
symbol = "☸️ "

Reload:

exec zsh

6. Install Nerd Font (Powerline-style icons)

To make icons display correctly in Starship:

Install a Nerd Font:

Recommended: MesloLGS NF

Then:

Set font in terminal (important)

If using:

iTerm2 → Preferences → Profiles → Text → Font
Terminal.app → Settings → Font

Select:

MesloLGS NF

Without this, icons will break.

7. Install FZF (command search engine)

FZF is one of the most important tools for senior engineers.

brew install fzf
$(brew --prefix)/opt/fzf/install

Features:

CTRL + R → search command history
CTRL + T → search files
Fast navigation

8. Modern CLI replacements

eza (better ls)

brew install eza

Aliases:

alias ls="eza --icons --git"
alias ll="eza -l --icons --git"
alias la="eza -la --icons --git"

bat (better cat)

brew install bat

Alias:

alias cat="bat"

9. Kubernetes tooling (core DevOps skill)

brew install kubectl kubectx

What you get:

kubectl → Kubernetes CLI
kubectx → switch clusters
kubens → switch namespaces (included inside kubectx)

Example:

kubectx

10. Docker productivity tools

brew install lazydocker

Useful aliases:

alias d="docker"
alias dps="docker ps"
alias dex="docker exec -it"

11. AWS CLI setup

brew install awscli

Configure:

aws configure

Or modern method:

aws configure sso

12. Infrastructure as Code (Terraform)

⚠️ Install correctly via HashiCorp tap:

brew tap hashicorp/tap
brew install hashicorp/tap/terraform

Verify:

terraform -version

13. Productivity upgrade tools

zoxide (smart cd)

brew install zoxide

Add:

eval "$(zoxide init zsh)"

Usage:

z project-name

tmux (session persistence)

brew install tmux

Used for:

remote servers
long-running processes
multi-window workflows

14. Security / Debugging tools (SRE mindset)

brew install jq httpie nmap

Why:

jq → JSON parsing
httpie → API testing (better curl)
nmap → network debugging

15. Git aliases (speed boost)

Add to .zshrc:

alias gs="git status"
alias ga="git add"
alias gc="git commit -m"
alias gp="git push"
alias gl="git log --oneline --graph --all"

16. Final `.zshrc` structure

Your .zshrc should look like:

plugins=(git zsh-autosuggestions zsh-syntax-highlighting)

eval "$(starship init zsh)"

eval "$(zoxide init zsh)"

# aliases
alias ls="eza --icons --git"
alias ll="eza -l --icons --git"
alias la="eza -la --icons --git"
alias cat="bat"

alias k=kubectl
alias gs="git status"
alias gp="git push"

Final Result: What you have built

Your terminal is now capable of:

Intelligence

autosuggestions
command history search (fzf)

Visual clarity

Starship prompt
git + cloud context awareness

DevOps tools

kubectl / kubectx
terraform
docker tooling
AWS CLI

Security/debugging

jq, httpie, nmap

Productivity

zoxide
tmux
eza + bat

Final mindset shift (important)

A senior DevOps/SRE engineer does not rely on memory.

They rely on:

tooling visibility
automation
fast navigation
safe production workflows

Your terminal is now a production-grade engineering workstation, not just a command line.

If you're building APIs or working on production systems, this guide will help you avoid common security mistakes. Watch the full tutorial here: https://youtu.be/bNi8wfrPRjM Let me know your thoughts or questions in the comments

FOLASAYO SAMUEL OLAYEMI — Sat, 28 Mar 2026 06:23:39 +0000

FOLASAYO SAMUEL OLAYEMI

Mar 28

How to Secure Your App Using OAuth2 with Ory Hydra

#webdev #programming #python #security

Comments

2 min read

youtu.be

How to Secure Your App Using OAuth2 with Ory Hydra

FOLASAYO SAMUEL OLAYEMI — Sat, 28 Mar 2026 06:22:21 +0000

Security is one of the most overlooked aspects of backend development until it becomes a problem.

If you're building APIs with FastAPI, relying on basic authentication or rolling your own security system can expose your application to serious risks.

In this guide, I’ll walk you through how to properly secure your FastAPI application using OAuth2 with Ory Hydra.

Why API Security Matters

APIs are often the backbone of modern applications. Without proper authentication and authorization:

Sensitive data can be exposed
Unauthorized users can access protected resources
Your system becomes vulnerable to attacks

This is where OAuth2 comes in.

What is OAuth2?

OAuth2 is an authorization framework that allows applications to securely access resources on behalf of a user.

Instead of sharing passwords, it uses tokens to grant access — making it much safer and scalable for modern systems.

Why Use Ory Hydra?

Ory Hydra is a production-ready OAuth2 and OpenID Connect server.

It helps you:

Handle token issuance securely
Manage OAuth2 flows (Authorization Code, Client Credentials, etc.)
Separate authentication logic from your application

This separation is critical for building scalable and secure systems.

How It Works (High-Level)

Here’s a simplified flow:

User tries to access your FastAPI app
User is redirected for authentication
Consent is granted
Ory Hydra issues an access token
FastAPI validates the token before granting access

Implementation Overview

In the full video, I cover:

Setting up Ory Hydra
Configuring OAuth2 clients
Integrating Hydra with FastAPI
Handling login and consent flows
Protecting your API endpoints

Watch the Full Tutorial

If you want the complete step-by-step implementation, watch the video below:

https://youtu.be/bNi8wfrPRjM

Final Thoughts

Security shouldn’t be an afterthought.

By using OAuth2 with Ory Hydra, you’re not just protecting your API — you’re building a system that is scalable, maintainable, and production-ready.

If you're serious about backend engineering, this is a must-learn approach.

Let’s Discuss

Have you implemented OAuth2 in your projects before?

What challenges did you face?

Drop your thoughts in the comments — I’d love to hear from you.

How I Automated My YouTube Intros with Just One Python Script!

FOLASAYO SAMUEL OLAYEMI — Thu, 31 Jul 2025 18:21:41 +0000

Managing a content pipeline can be exhausting, especially when you’re juggling editing, scripting, uploading, and staying consistent.

What if you could automate parts of that workflow, like your YouTube intros, and never manually edit them again?

In this video, I break down exactly how I automated my YouTube intros using Python and the Shotstack API, a cloud-based video editing platform that takes the pain out of rendering timelines.

What You'll Learn:

How to configure the Shotstack Python SDK
How to build video & audio timelines programmatically
How to submit render jobs and handle asynchronous polling
Tips for secure API key usage, asset hosting, and logging
How I used just one script to go from concept to a rendered video in the cloud

Watch Now:
👉 How I Automated My YouTube Intros with One Python Script

Why This Matters:

If you're a content creator, developer, or automation geek, this tutorial will open your mind to what’s possible with APIs and a few lines of Python.

Whether you're working on personal branding, creating dev content, or streamlining video production, this video will save you time, improve your process, and inspire your next automation idea.

Don't forget to like, share, and subscribe to support the channel, and drop your questions in the YouTube comments!

Thanks for watching...
Happy Coding!

[Boost]

FOLASAYO SAMUEL OLAYEMI — Tue, 29 Jul 2025 10:26:55 +0000

FOLASAYO SAMUEL OLAYEMI

Jul 29 '25

Elevate Your MongoDB Security with X.509 Authentication (Video Tutorial)

#webdev #programming #python #mongodb

Comments

1 min read

Elevate Your MongoDB Security with X.509 Authentication (Video Tutorial)

FOLASAYO SAMUEL OLAYEMI — Tue, 29 Jul 2025 10:26:01 +0000

Security is not optional, especially when building applications at scale.

In this latest YouTube tutorial, we will walk you through Configuring X.509 Authentication for MongoDB Atlas, a powerful method for securing your database connections using SSL/TLS certificates instead of passwords.

Watch now: https://www.youtube.com/watch?v=j827C_7F-fw&t=21s

In this in-depth guide, you'll learn:

The fundamentals of X.509 certificate-based authentication
How to generate, manage, and use certificates with OpenSSL
Step-by-step configuration of MongoDB Atlas for X.509
How to connect securely from Python, Node.js, and the MongoDB Shell
Troubleshooting tips and real-world security best practices
How to rotate and manage certificates for long-term security

Whether you're building enterprise systems or improving your app’s security posture, this guide is essential.

Thanks for watching...
Happy Coding!

AI Powered Database Optimisation with Claude AI, MCP and MongoDB

FOLASAYO SAMUEL OLAYEMI — Mon, 14 Jul 2025 23:49:40 +0000

TechPrane's New video up!

Learn how to optimize your MongoDB workload using Claude AI + MCP.
Practical walkthrough using MongoDB Atlas.
Watch here: https://youtu.be/1jKWk2WaPZQ

CI/CD with Next.js on GitHub Actions: Should You Use “Deploy from a Branch” or “GitHub Actions”?

FOLASAYO SAMUEL OLAYEMI — Thu, 26 Jun 2025 09:15:47 +0000

If you’ve ever tried to deploy a Next.js app to GitHub Pages and got stuck deciding between “Deploy from a branch” and “GitHub Actions” , you’re not alone. I recently went through this while setting up CI/CD for a Next.js frontend project and learnt some valuable lessons that could save you hours of confusion.

In this article, I’ll break down what each deployment method means, why GitHub Actions is often the better choice (especially for Next.js), and how to set it up the right way.

My Setup: CI/CD with Next.js and GitHub Actions

I had successfully created a CI/CD pipeline using GitHub Actions to automate the process of:

Installing dependencies
Building the app
Exporting static files (when applicable)
Deploying to GitHub Pages

Everything worked perfectly when I selected “GitHub Actions” under GitHub Pages settings. But when I tried switching to “Deploy from a branch” , the deployment failed, and it left me wondering: Why?

Understanding the Two Deployment Options

In your GitHub repository’s Settings → Pages , you’ll see this under “Build and deployment”:

Source :

🔘 Deploy from a branch

🔘 GitHub Actions

Let’s break these down:

Deploy from a Branch

This method is very simple:

GitHub Pages takes the contents of a branch (like gh-pages or main)
It assumes those contents are already static files (HTML, CSS, JS)

Great for:

Static sites with no build step
Manually exported content (e.g., using next export)

Limitations:

Not ideal for dynamic frameworks like Next.js unless you’re exporting (next export) and manually pushing the output to a branch.

Deploy Using GitHub Actions

This is where you let GitHub Actions build and deploy your project automatically after every commit.

Great for:

Frameworks like Next.js, React, Vue
Projects that require a build step or CI/CD workflow
Teams that want version control, automation, and flexibility

Bonus: You can even run tests, lint checks, or performance audits during deployment.

Why “Deploy from a Branch” Doesn’t Work for Next.js (Out of the Box)

Next.js apps are not static by default. They include:

Server-side rendering (SSR)
API routes
Dynamic routing

If you simply push your /pages or /src folder to GitHub, GitHub Pages won’t know how to build it , and you’ll get a blank page or 404.

To use “Deploy from a branch” , you’d need to:

npm run build
npm run export

Then push the /out directory to a gh-pages branch, which is tedious and error-prone.

Why I Recommend Sticking With GitHub Actions

Since GitHub Actions worked perfectly for my setup, I left it that way, and here’s why you should too:

Feature	Deploy from Branch	GitHub Actions
Setup Time	Simple	Slightly longer
Control	Low	Full control (build, test, deploy)
Works with Next.js?	❌ No (unless exported manually)	Yes
Automation	❌ Manual pushes	Automatic on every commit
Customization	❌ None	Full flexibility

How to Set It Up (Step-by-Step)

If you’re using GitHub Actions to deploy your Next.js app, your .github/workflows/nextjs.ymlfile might look like this:

name: Deploy Next.js site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Detect package manager
        id: detect-package-manager
        run: |
          if [-f "${{ github.workspace }}/yarn.lock"]; then
            echo "manager=yarn" >> $GITHUB_OUTPUT
            echo "command=install" >> $GITHUB_OUTPUT
            echo "runner=yarn" >> $GITHUB_OUTPUT
            exit 0
          elif [-f "${{ github.workspace }}/package.json"]; then
            echo "manager=npm" >> $GITHUB_OUTPUT
            echo "command=ci" >> $GITHUB_OUTPUT
            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
            exit 0
          else
            echo "Unable to determine package manager"
            exit 1
          fi
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: ${{ steps.detect-package-manager.outputs.manager }}
      - name: Setup Pages
        uses: actions/configure-pages@v5
        with:
          # Automatically inject basePath in your Next.js configuration file and disable
          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
          #
          # You may remove this line if you want to manage the configuration yourself.
          static_site_generator: next
      - name: Restore cache
        uses: actions/cache@v4
        with:
          path: |
            .next/cache
          # Generate a new cache whenever packages or source files change.
          key: ${{ runner.os }}-nextjs-${{ hashFiles(' **/package-lock.json', '** /yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
          # If source files changed but packages didn't, rebuild from a prior cache.
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles(' **/package-lock.json', '** /yarn.lock') }}-
      - name: Install dependencies
        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
      - name: Build with Next.js
        run: ${{ steps.detect-package-manager.outputs.runner }} next build
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./out

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Don’t forget to set your GitHub Pages source to:

Settings → Pages → Build and Deployment → Source: GitHub Actions

Final Thoughts

If you’re building with Next.js , avoid the “Deploy from a branch” option unless you’re explicitly using next export and handling deployment manually. GitHub Actions gives you far more power, automation, and scalability, especially as your project grows or integrates with backend services.

So yes, it’s perfectly okay (and actually best) to leave it set to “Deploy from GitHub Actions”.

Useful Resources

Over to You

Have you struggled with deploying your frontend on GitHub Pages before? Did switching to GitHub Actions solve it for you too?

Feel free to share your story in the comments below.

Thanks for reading…

Happy Coding!

The post CI/CD with Next.js on GitHub Actions: Should You Use “Deploy from a Branch” or “GitHub Actions”? appeared first on Innovate With Folasayo.

Integrating SeerBit Payments in Angular

FOLASAYO SAMUEL OLAYEMI — Mon, 23 Jun 2025 15:46:35 +0000

SeerBit offers a powerful Angular library (seerbit-angular) that makes adding secure payment modals super easy. You can integrate as either a Component or Directive, depending on your design preference and styling needs.

Prerequisites

Make sure you have:

Angular v16 or newer
A SeerBit merchant account and valid public key

Step 1: Install the Library

npm install --save seerbit-angular

Step 2: Import the Module

In your AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgSeerBitModule } from 'seerbit-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgSeerBitModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

This makes SeerBit’s component and directive available in your templates.

Quick Tip: Need `app.module.ts`? Create a Module-Based Project

If you've noticed your project is missing app.module.ts, it's likely because you're using Angular 17+, where standalone components are the default. You can switch to a module-based structure by running:

ng new my-app --no-standalone --routing --ssr=false

This creates a traditional setup with app.module.ts and app-routing.module.ts, letting you copy over any existing code into a familiar module architecture. There’s no automatic way to convert, so if AppModule is missing and you haven’t written much code yet, this is the simplest route.

Step 3: Set Up Your Component Logic

In app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'seerbit-angular-integration';

  options = {
    tranref: Date.now(),
    currency: 'NGN',
    description: 'Test payment',
    country: 'NG',
    email: 'you@example.com',
    mobile_no: '08012345678',
    full_name: 'Jane Doe',
    amount: 5000,
    setAmountByCustomer: false,
    close_prompt: false,
    close_on_success: false,
    callbackurl: 'https://yourapp.com/payment-callback',
    public_key: 'YOUR_PUBLIC_KEY_HERE',
    customization: {
      theme: { border_color: '#000', background_color: '#004C64', button_color: '#0084A0' },
      payment_method: ['card', 'transfer', 'wallet', 'ussd'],
      display_fee: true,
      logo: 'your_logo_url_or_base64'
    },
    tokenize: false,
    planId: ''
  };

  PaymentDone(res: any) {
    console.log('Payment done:', res.response);
    res.closeModal();
  }

  PaymentCancel(res: any) {
    console.log('Payment cancelled:', res);
  }
}

Customize the options object with your merchant key and shopper info.

Step 4: Add the UI

As a Component

In app.component.html:

<main>
  <div class="content">
    <h1>SeerBit Angular Payment</h1>
    <seerbit-ng
      class="btn-pay"
      [options]="options"
      (callback)="PaymentDone($event)"
      (close)="PaymentCancel($event)">
      Pay Now
    </seerbit-ng>
  </div>
</main>

As a Directive

<main>
  <div class="content">
    <h1>Pay with SeerBit</h1>
    <button
      class="btn-pay"
      seerbit-ng
      [options]="options"
      (callback)="PaymentDone($event)"
      (close)="PaymentCancel($event)">
      Pay via SeerBit
    </button>
  </div>
</main>

Component vs directive is up to your styling preferences. Just ensure CSS is global if you need to style the custom element.

Step 5: Add Some Basic CSS

In styles.css (global):

.btn-pay {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #0084A0;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
}

.btn-pay:hover {
  background-color: #006f88;
}

Component-scoped CSS won’t apply to seerbit-ng, so use global styles for classes used on it.

Step 6: Run & Test

Start your app:

ng serve

Navigate to http://localhost:4200/, click your button, and test the payment flow. Check your console logs for PaymentDone or PaymentCancel.

Bonus: Shopping Cart Demo

The SeerBit GitHub repo includes a full shopping cart example: both directive and component versions integrated within a cart UI. It’s a great reference for real‑world use.

Summary

Integration Type	Tag Used	Good For
Component	`<seerbit-ng>`	When you want modal style
Directive	`seerbit-ng` on `<button>`	For custom buttons / styling

Download the source code here

Thanks for reading...
Happy Coding!

Implementing SeerBit Payment Solution in a Full-Stack Application Using ReactJS and NodeJS

FOLASAYO SAMUEL OLAYEMI — Tue, 10 Jun 2025 08:35:22 +0000

In today’s digital economy, seamless and secure payment integration is a must-have for any modern web application. SeerBit, a leading African fintech company, offers powerful APIs that enable businesses to accept payments with ease.

This article will guide you step-by-step on how to integrate SeerBit's payment solution into a ReactJS + NodeJS full-stack application.

By the end of this guide, you’ll have working knowledge of:

Setting up SeerBit API credentials
Creating a payment interface with ReactJS
Handling transactions securely using NodeJS
Best practices for production-ready integration

Whether you're building an eCommerce site, SaaS product, or mobile wallet, this tutorial gives you a powerful and flexible foundation for collecting payments via SeerBit.

Prerequisites

Before we start, ensure you have the following:

Node.js and npm installed
Basic knowledge of React and Node
A SeerBit account (sign up at seerbit.com)
API Keys from your SeerBit dashboard
Postman (optional, for testing APIs)

Project Setup

1. Initialize the Backend (NodeJS)

mkdir seerbit-payment-backend
cd seerbit-payment-backend
npm init -y
npm install express cors dotenv axios

Create a basic server.js:

// server.js
const express = require("express");
const cors = require("cors");
const dotenv = require("dotenv");
const axios = require("axios");

dotenv.config();
const app = express();

app.use(cors());
app.use(express.json());

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

2. Create the Frontend (ReactJS)

npx create-react-app seerbit-payment-frontend
cd seerbit-payment-frontend
npm install axios

Step 1: Get Your SeerBit API Keys

Log in to SeerBit Dashboard.
Navigate to API Keys (usually under Settings → API Keys).
Copy your Public Key and Secret Key

Create a .env file in your backend folder:

SEERBIT_SECRET_KEY=your_secret_key_here
SEERBIT_PUBLIC_KEY=your_public_key_here
SEERBIT_BEARER_TOKEN=generate_the_token_with_secret_key_&_pub_key

Generating the Bearer Token
To integrate SeerBit's payment services into your Node.js application, you'll need to generate a bearer token for API authentication.

SeerBit requires an encrypted key, derived from your secret and public keys, to authenticate API requests.

Follow these steps to generate the bearer token:

Public Key: Obtain this from your SeerBit merchant dashboard.
Secret Key: Also available on your merchant dashboard.
Concatenate and Encrypt Keys: Combine your secret and public keys into a single string, separated by a period (.)
Encryption: Send this concatenated string to SeerBit's encryption endpoint to receive an encrypted key.

Request the Encrypted Key:

Endpoint: POST https://seerbitapi.com/api/v2/encrypt/keys

Headers: Set Content-Type to application/json.

Body: Include the concatenated key in the following JSON format:

{
 "key": "SECRET_KEY.PUBLIC_KEY"
}

Step 2: Create Payment Route in NodeJS

Add the following to server.js or create a new file paymentRoutes.js:

const express = require("express");
const cors = require("cors");
const dotenv = require("dotenv");
const { Client, Config, StandardCheckout } = require("seerbit-nodejs");
const { PUBLIC_KEY, SECRET_KEY, BEARER_TOKEN } = require("./config");

// Load environment variables
dotenv.config();

const app = express();
app.use(cors({ origin: "http://localhost:3000", credentials: true }));
app.use(express.json());

// Create SeerBit client
const sdkConfig = new Config({
  publicKey: PUBLIC_KEY,
  secretKey: SECRET_KEY,
  bearerToken: BEARER_TOKEN,
});

const seerbit = new Client(sdkConfig);

// Payment endpoint
app.post("/api/payment", async (req, res) => {
  try {
    const checkout = new StandardCheckout(seerbit);
    const { email, amount, fullName, mobile_no, description } = req.body;
    // Create payment
    const payload = {
      amount,
      currency: "NGN",
      country: "NG",
      email,
      fullName,
      mobile_no,
      description,
      paymentReference: `ref-${Date.now()}`,
      callbackUrl: "http://localhost:3000/payment-success",
    };

    const response = await checkout.Initialize(payload);
    console.log("SeerBit SDK response:", response);
    const payLink = response.data.payments.redirectLink;
    console.log("Payment Link Only Returned:", payLink);
    return res.status(201).json({ payLink });
  } catch (error) {
    console.error("SeerBit SDK error:", error);
    return res.status(error.status || 500).json({ error: error.message });
  }
});

// Start server
const PORT = process.env.PORT || 9000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Click this link to learn how to integrate SeerBit Payments using Node.js

Step 3: Create the Payment Interface in ReactJS

Edit App.js:

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [form, setForm] = useState({
    fullName: "",
    email: "",
    amount: "",
    mobile_no: "",
    description: "",
  });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleChange = (e) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    try {
      // Use proxy or full URL as needed
      const response = await axios.post("/api/payment", form);
      const payLink = response.data.payLink;
      console.log("Redirecting to:", payLink.data);
      console.log("Log the response:", response);
      if (payLink) {
        window.location.href = payLink;
      } else {
        setError("Payment link unavailable");
      }
    } catch (err) {
      console.error("Payment initiation failed", err);
      setError(err.response?.data?.error || "Unknown error occurred");
    } finally {
      setLoading(false);
    }
  };

  return (
    <div
      style={{ maxWidth: 400, margin: "2rem auto", fontFamily: "sans-serif" }}
    >
      <h2>SeerBit Payment</h2>
      <form onSubmit={handleSubmit}>
        <label>
          Full Name
          <br />
          <input
            name="fullName"
            value={form.fullName}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <br />
        <label>
          Email
          <br />
          <input
            type="email"
            name="email"
            value={form.email}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <label>
          Phone Number
          <br />
          <input
            type="mobile_no"
            name="mobile_no"
            value={form.mobile_no}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <br />
        <label>
          Description
          <br />
          <input
            type="description"
            name="description"
            value={form.description}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <br />
        <label>
          Amount (NGN)
          <br />
          <input
            type="number"
            name="amount"
            value={form.amount}
            onChange={handleChange}
            required
          />
        </label>
        <br />
        <br />
        <button type="submit" disabled={loading}>
          {loading ? "Processing..." : "Pay Now"}
        </button>
      </form>

      {error && (
        <p style={{ color: "red", marginTop: "1rem" }}>Error: {error}</p>
      )}
    </div>
  );
}

export default App;

Step 4: Test the Integration

Run the backend:

node server.js

Run the frontend:

npm start

Fill in the form and click Pay with SeerBit

You will be redirected to SeerBit's secure payment gateway.

Download the source code here...

Best Practices for Production

Use https and host your backend securely
Validate all inputs both client-side and server-side
Store transactions and references in your database
Use webhook support to verify payments server-to-server
Rate limit your API endpoints to prevent abuse

Conclusion

With SeerBit's powerful APIs and simple integration process, developers can launch secure, user-friendly payment experiences in days, not weeks. Whether you're building for Nigeria or across Africa, SeerBit offers the tools and infrastructure to help your application grow.

Have questions or want to connect? Reach out to me on LinkedIn.

Resources

Did you enjoy this tutorial? Share it with your dev friends, bookmark it, and build the next big fintech app using SeerBit.

Thanks for reading...
Happy Coding!

How to Easily Integrate the SeerBit Payment Solution with React.js

FOLASAYO SAMUEL OLAYEMI — Mon, 26 May 2025 07:12:03 +0000

Integrating the SeerBit ReactJS SDK into your application is straightforward—even for beginners.

This guide walks you step by step through obtaining your Public Key, installing prerequisites, configuring environment variables, and using the SDK both as a React Hook and as a prebuilt Button component. By following best practices for secure key management, and error handling, you’ll be able to accept payments seamlessly in minutes.

Introduction

SeerBit’s seerbit-reactjs package provides a React-specific wrapper for SeerBit’s payment gateway, enabling you to embed payment flows with minimal code. It abstracts away raw HTTP calls, encryption, and error parsing—letting you focus on building your UI and business logic without wrestling with low‑level API details.

Prerequisites

Before integrating, ensure you have:

Node.js v12+ installed on your machine. You can download it from the official site.
A SeerBit Merchant Account with both Public and Secret keys.
Basic React knowledge and familiarity with npm or yarn package managers.

Step 1: Obtain Your Public Key

Log in to the SeerBit Dashboard with your merchant credentials.
Navigate to API Keys (usually under Settings → API Keys).
Copy your Public Key.

Tip: Store these keys securely—never hard‑code them in your source.

Step 2: Install the SDK

In your React project directory, run:

npm install --save seerbit-reactjs
# or
yarn add seerbit-reactjs

The package includes TypeScript definitions for better autocomplete in modern editors.

Step 3: Configure Environment Variables

Create a .env file at your project root (add to .gitignore):

REACT_APP_SEERBIT_PUBLIC_KEY=SBTESTPUBK_xxx

Load them in src/config.js:

export const PUBLIC_KEY = process.env.REACT_APP_SEERBIT_PUBLIC_KEY;

This isolates sensitive data and supports multiple environments.

Step 4: Using the SDK as a React Hook

Import the Hook:

   import { useSeerbitPayment } from "seerbit-reactjs";
   import { PUBLIC_KEY } from "./config";

Define your payment options:

   const options = {
     public_key: PUBLIC_KEY,
     amount: 5000,
     tranref: Date.now().toString(),
     currency: "NGN",
     email: "customer@example.com",
     full_name: "Jane Doe",
     mobile_no: "08012345678",
     description: "Order #1234",
     tokenize: false,
     customization: {
       theme: {
         border_color: "#000000",
         background_color: "#004C64",
         button_color: "#0084A0",
       },
       payment_method: ["card", "account", "transfer", "wallet", "ussd"],
       display_fee: true,
       display_type: "inline",
       logo: "https://yourdomain.com/logo.png",
     },
   };

Set up callback and close handlers:

   const callback = (response, close) => {
     console.log("Payment successful:", response);
     setTimeout(() => close(), 2000);
   };
   const close = () => console.log("Checkout closed");

Initialize the payment:

   const initializePayment = useSeerbitPayment(options, callback, close);

Trigger on user action:

   <button onClick={initializePayment}>Pay Now</button>

Result: Clicking the button opens SeerBit’s checkout, handles the flow, and returns the response to your callback.

Step 5: Using the Prebuilt Button Component

For minimal setup, use SeerbitButton:

Import the component:

   import { SeerbitButton } from "seerbit-reactjs";
   import { PUBLIC_KEY } from "./config";

Prepare options and handlers:

   const callback = (res, close) => { console.log(res); close(); };
   const close = () => console.log("Closed");
   const props = { ...options, callback, close };

Render the button:

   <SeerbitButton text="Pay with SeerBit" {...props} className="btn-pay" />

Result: A fully styled button that launches the checkout flow on click.

Download source code here.

Step 6: Testing Your Integration

Local Testing: Run npm start to launch your app and click the Pay button.
Sandbox Mode: Use your test keys to simulate transactions without real charges.
Monitoring: Check network calls in your browser’s DevTools to inspect the payload and response.

Error Handling & Logging

Wrap your payment initialization in try…catch:

try {
  await initializePayment();
} catch (error) {
  console.error("SeerBit Error:", error.code, error.message);
}

Use a structured logger (e.g., Winston) for production-level monitoring.

Best Practices

Secure Key Storage: Keep keys in env vars, rotate regularly.
Version Pinning: Lock seerbit-reactjs in package.json to prevent breaking updates.
CI/CD: Automate linting (ESLint), type checks, and integration tests on pull requests.
Graceful Fallback: Implement retries and user-friendly error messages for network failures.

Conclusion

By following these steps—obtaining your keys, installing the SDK, configuring securely, and using either the Hook or Button component—you can integrate SeerBit payments into your React app quickly and reliably. Happy coding!

References

SeerBit ReactJS SDK GitHub: https://github.com/seerbit/seerbit-reactjs
SeerBit Official Docs: https://doc.seerbit.com/libraries-plugins/sdks
SeerBit Dashboard Login: https://www.dashboard.seerbit.com/#/auth/login
NPM Package “seerbit-reactjs”: https://www.npmjs.com/package/seerbit-reactjs
Managing Environment Variables in Create React App: https://create-react-app.dev/docs/adding-custom-environment-variables
Winston Logging Library: https://www.npmjs.com/package/winston
React Error Boundaries: https://www.npmjs.com/package/react-error-boundary

Thanks for reading...
Happy Coding!

Real-Time Data Processing with Apache Spark Structured Streaming

FOLASAYO SAMUEL OLAYEMI — Fri, 16 May 2025 10:28:42 +0000

Real-time data analytics is no longer a luxury—it's a necessity. Understanding and acting on data as it flows can be the difference between staying ahead or falling behind.

In my latest video, I explained real-time analytics using Apache Spark Structured Streaming.

This session covers:

The fundamentals of real-time analytics and its significance

Contrasting batch processing with stream processing

An in-depth look at Spark Structured Streaming mechanics

Integrating Spark with data sources like Kafka and socket streams

Real-world applications including fraud detection, system monitoring, and alerting

Whether you're a data engineer, backend developer, or a cloud enthusiast, this video offers valuable insights into building scalable, real-time data pipelines.

Watch the full video here: Real-Time Analytics with Apache Spark | Stream Processing Explained

Let's explore how to harness the power of real-time data for smarter decision-making.

Thanks for watching!

DEV Community: FOLASAYO SAMUEL OLAYEMI

Building a Senior-Level DevOps / SRE / Infrastructure Engineer Terminal Setup (macOS)

1. Why your terminal matters as a Senior Engineer

2. Install Zsh (modern shell)

Check your shell:

3. Install Oh My Zsh (plugin framework)

4. Install essential plugins (productivity layer)

1. Autosuggestions

2. Syntax Highlighting

Enable plugins

5. Install Starship (modern prompt system)

Create Starship config

6. Install Nerd Font (Powerline-style icons)

Set font in terminal (important)

7. Install FZF (command search engine)

Features:

8. Modern CLI replacements

eza (better ls)

bat (better cat)

9. Kubernetes tooling (core DevOps skill)

What you get:

10. Docker productivity tools

11. AWS CLI setup

12. Infrastructure as Code (Terraform)

13. Productivity upgrade tools

zoxide (smart cd)

tmux (session persistence)

14. Security / Debugging tools (SRE mindset)

Why:

15. Git aliases (speed boost)

16. Final .zshrc structure

Final Result: What you have built

Intelligence

Visual clarity

DevOps tools

Security/debugging

Productivity

Final mindset shift (important)

If you're building APIs or working on production systems, this guide will help you avoid common security mistakes. Watch the full tutorial here: https://youtu.be/bNi8wfrPRjM Let me know your thoughts or questions in the comments

How to Secure Your App Using OAuth2 with Ory Hydra

How to Secure Your App Using OAuth2 with Ory Hydra

Why API Security Matters

What is OAuth2?

Why Use Ory Hydra?

How It Works (High-Level)

Implementation Overview

Watch the Full Tutorial

Final Thoughts

Let’s Discuss

How I Automated My YouTube Intros with Just One Python Script!

What You'll Learn:

Why This Matters:

[Boost]

Elevate Your MongoDB Security with X.509 Authentication (Video Tutorial)

Elevate Your MongoDB Security with X.509 Authentication (Video Tutorial)

AI Powered Database Optimisation with Claude AI, MCP and MongoDB

CI/CD with Next.js on GitHub Actions: Should You Use “Deploy from a Branch” or “GitHub Actions”?

My Setup: CI/CD with Next.js and GitHub Actions

Understanding the Two Deployment Options

Deploy from a Branch

Deploy Using GitHub Actions

Why “Deploy from a Branch” Doesn’t Work for Next.js (Out of the Box)

Why I Recommend Sticking With GitHub Actions

How to Set It Up (Step-by-Step)

Final Thoughts

Useful Resources

Over to You

Integrating SeerBit Payments in Angular

Prerequisites

Step 1: Install the Library

Step 2: Import the Module

Quick Tip: Need app.module.ts? Create a Module-Based Project

Step 3: Set Up Your Component Logic

Step 4: Add the UI

As a Component

As a Directive

Step 5: Add Some Basic CSS

Step 6: Run & Test

Bonus: Shopping Cart Demo

Summary

16. Final `.zshrc` structure

Quick Tip: Need `app.module.ts`? Create a Module-Based Project