DEV Community: Ayabonga Qwabi

Best Tools & Libraries to Actually BUILD Your Own AI Agents with🤖

Ayabonga Qwabi — Mon, 30 Mar 2026 21:20:59 +0000

My battle-tested 2026 guide to the best libraries and platforms for building AI agents (not just using them). I’ve grouped them by vibe so you can pick what fits your stack and budget.

1. Code-First Powerhouses (For Full Control & Production)

LangGraph (LangChain ecosystem)

The current king for stateful, controllable agents. Model your agent as a graph: nodes for actions, edges for decisions, built-in persistence, human-in-the-loop, and retry logic.

Perfect for complex South African workflows (e.g., “check load shedding schedule → find nearest laundromat with capacity → book slot”).

Available in Python + JS/TS. Deploy on Vercel or Render and monitor with LangSmith.

Why SA devs love it: Maximum guardrails so your agent doesn’t hallucinate during a real money transaction.
CrewAI

Role-based multi-agent orchestration. Define “Researcher”, “Township Translator”, “Payment Verifier” and let them collaborate like a real team.

Fastest way to ship a multi-agent prototype. Open-source and ridiculously easy to get running locally or on a cheap VPS.
Mastra (TypeScript-first framework)

Built by the Gatsby team — pure modern TS joy. Agents, workflows, memory, RAG, MCP support, evals, and a beautiful playground.

If you live in Next.js + Supabase land (most of us in Joburg/Cape Town do), this feels like home. Streaming, type-safety, and Vercel-friendly out the box.
Google Agent Development Kit (ADK)

Google’s open-source framework for hierarchical and multimodal agents. Strong with Gemini vision/audio — imagine an agent that reads a scanned SA ID or understands voice notes with local accents.

Python-first but growing JS/Go support. Pairs beautifully with Vertex AI if you’re already on GCP (many SA enterprises are).
AutoGen (Microsoft)

Great for conversational multi-agent systems where agents debate and self-correct. Still solid for research-grade or complex collaboration flows.
Vercel AI SDK + Next.js 15

The smoothest way to embed agents directly into your React/Next.js app. Server Actions, streaming responses, and zero extra infra.

Build an agent that lives inside your SaaS dashboard in one evening.

2. Visual / Low-Code Builders (Great for MVPs & Hybrid Teams)

n8n (self-hosted)

Open-source workflow automation that went full agent mode. 1000+ integrations, visual canvas, ReAct loops, memory — and you can run it on your own R99/month VPS.

Zero data leakage worries for fintech clients. Pair with Supabase and you have a full agent backend in a weekend.
Dify / Langflow / Flowise

Drag-and-drop builders with custom code nodes. Non-technical founders can see the flow while you own the serious logic. Self-host or use their cloud.
agent.ai

Marketplace + builder for professional agents and agent teams. Discover, fork, and coordinate multiple agents like a pro network.

3. Quick 2026 Action Plan for SA Devs

Solo / Next.js grinder → Start with Mastra or Vercel AI SDK this weekend.
Need serious control & reliability → LangGraph (production favourite).
Fast multi-agent prototype → CrewAI.
Visual + self-hosted → n8n.
Already on Google Cloud → Google ADK.
Team with non-devs → Dify or agent.ai.

Pro South African Tips

Use Supabase + Row Level Security for anything touching real user data.
Test with real SA contexts: isiXhosa prompts, township addresses, instant EFT webhooks.
Monitor everything — LangSmith, Prometheus + Grafana, or Sentry.
Deploy on Vercel, Render, or a local Hetzner/Contabo box for cost control.

The market is wide open. Build one solid agent that understands South African realities (language, payments, infrastructure chaos) and you can sell it to startups from Sandton to Durban North.

Which tool are you using (or planning to try) in 2026?

Drop your stack in the comments — Mastra crew, LangGraph warriors, n8n self-hosters, or Google ADK believers?

Tag a bootcamp grad or fellow dev in JHB, CPT or DBN who’s grinding agents right now. Let’s build the future of #AIAgents in Mzansi together.

#ZATech #SADevs #AIAgents #BuildInSA #VibeCoding #NextJS #TypeScript #LangGraph #CrewAI #MastraAI #DevOpsSA

How I Build Great-Looking, Fully Functional Client Websites in 15 Minutes

Ayabonga Qwabi — Mon, 16 Mar 2026 19:36:48 +0000

I get asked a lot how I ship client sites so fast without sacrificing quality. Here’s the exact workflow I use — no gatekeeping, just the stack and the steps.

TL;DR: I use an AI agent to generate a v0-ready prompt from the client’s basics, then I feed that into Vercel v0. In 5 minutes or less v0 gives me a full site. I add a custom domain and deploy. Total time: +-15 minutes from brief to live.

What you need from the client (and what to do if you don’t have it)

Before anything else, I need three things:

Business name
Industry (e.g. restaurant, law firm, salon, gym, NPO)
Short description — what they do, who they serve, tone (professional, casual, premium, etc.)

If the client hasn’t sent a description, I either:

Use whatever they did send (email, WhatsApp brief, one-pager), or
Generate one with Gemini or Grok: I paste the business name + industry and ask for a 2–3 sentence “About” blurb suitable for a website hero or About section. Takes under a minute.

Once I have name, industry, and description, I’m ready for the next step.

Step 1: Generate the v0 prompt with the Agent.ai agent

I don’t write the v0 prompt from scratch. I use the Vercel v0 Website Prompt Generator on Agent.ai.

I open the agent, then feed it:
- Website/business name
- Industry
- About/description (the one from the client or the one I generated with Gemini/Grok)

The agent returns a ready-made prompt (plus context) that’s tuned for v0 — the kind of structure and wording that gets v0 to produce a coherent, on-brand site instead of a generic template.

That’s the whole job of this step: input = name + industry + description → output = v0-ready prompt.

Step 2: Paste into v0.dev and generate

I open v0.dev and start a new chat.
I paste the prompt from the Agent.ai agent.
I paste the description (or the same “About” text) so v0 has the exact copy.
I hit Generate.

In 5 minutes or less, v0’s AI has usually produced a full landing/marketing site: hero, sections, layout, and styling (Tailwind/shadcn-style components). I review it, maybe ask for one or two tweaks in the same chat (e.g. “make the CTA button blue” or “add a testimonials section”), then I’m ready to move on.

Step 3: Custom domain and deploy

I add the client’s custom domain in the v0/Vercel project (or in the linked Vercel project if I’ve exported the code).
I deploy — Vercel’s default flow is push or “Deploy” from v0; I make sure the production branch is set and the domain is connected.
DNS is pointed (A/CNAME as per Vercel’s instructions). Once propagation is done, the site is live.

All done. From “here’s my business name and industry” to a live, good-looking, fully functional client website in 10–20 minutes — with most of that time being prompt generation, review, and domain/DNS, not manual coding.

Why this works

v0 is built for generating production-ready React/Next-style UIs from a good prompt.
The Agent.ai prompt generator turns loose client info into that “good prompt” so I don’t have to trial-and-error in v0.
Gemini or Grok fills the gap when the client doesn’t send a description, so I always have something solid to feed the agent and v0.
Vercel keeps deploy and custom domains simple, so “go live” is literally a few clicks after the UI is ready.

I’ve used this for restaurants, salons, small practices, NPOs, and local businesses. It’s not for every project (e.g. heavy e‑commerce or complex apps), but for marketing/landing sites and simple client sites, it’s my default. Fast, professional, and repeatable.

If you try the same stack — Agent.ai prompt generator → v0 → Vercel + custom domain — I’d love to hear how it goes or what you’d add. Drop a comment or reply with your own tweaks.

Links

Vercel v0 Website Prompt Generator (Agent.ai)
Vercel v0
Gemini / Grok (for generating descriptions when the client doesn’t provide one)

The Cheapest Payment Gateways for South African React/Next.js E-commerce in 2026 – Real TCO Breakdown (Not Just the % Fee)

Ayabonga Qwabi — Mon, 16 Mar 2026 18:32:44 +0000

“Cheapest” here isn’t just the transaction percentage you see on the marketing page.

It’s Total Cost of Ownership (TCO) – everything that hits your pocket and your sanity:

How many hours you (or your junior) spend coding the integration
Monthly fixed fees (spoiler: most are R0 now)
Payout/settlement fees that delay your cash during load shedding
Extra work for webhooks, retries, and observability when EskomSePush says Stage 6

I pulled the latest 2026 numbers from the gateways themselves + SARB ecosystem data. Here’s the honest ranking for a typical Joburg or Cape Town indie store doing R50k–R200k/month.

2026 Cheapest-First Ranking by Real TCO

Ozow – Literally free for the first R1 million in sales
Yoco – Zero monthly fees + automatic rate drops
Paystack – Wins on bigger purchases
iKhokha – Great control at 2.85%
Stitch – Built for the PayShap/open-banking future
Peach Payments – Perfect for monthly subscriptions
PayFast – Still works but payout fees hurt

No one charges monthly fees anymore for starters – the game really has changed.

Simple Math That Actually Matters (No Spreadsheets Needed)

Total cost per transaction = (percentage rate × amount) + fixed fee + payout fee

Example for a normal R100 online order:

Yoco at 2.95% = R2.95 total
Paystack at 2.9% + R1 fixed = R3.90

Now flip it to a R5,000 laptop sale:

Yoco = R147.50
Paystack = R146

Break-even point: anything over roughly R2,000 and Paystack starts saving you money.

Low-ticket kasi retail? Yoco. High-ticket or scaling? Paystack pulls ahead fast.

The Hidden Cost Nobody Talks About: Payout Fees

This is what kills cash flow when load shedding hits and you need money in the bank today:

Gateway	Payout Fee	Money in Bank Speed	Real Pain for Small Biz
Peach	Free	Next business day	None
Stitch	R2 – R10	Instant	Low
Yoco	R2.50 (sometimes)	1–2 days	Medium
Paystack	R3	Next day	Medium
Ozow	R5	Immediate	Medium
PayFast	R8.70	2–3 days	High

PayFast is still popular, but that R8.70 payout fee adds up fast when you’re trying to pay suppliers while the lights are off.

The One Trick Every Joburg Architect is Using in 2026

Build one tiny Payment Orchestrator (just one Next.js API route or Server Action) that automatically picks the cheapest gateway based on payment type and basket size. It survives load shedding and saves you thousands every month.

Here’s the exact code you can copy today:

// app/api/orchestrate-payment/route.ts
import { NextResponse } from 'next/server';

const rules = {
  eft:     { name: 'ozow',   fee: 0,   url: 'https://api.ozow.com/v2/payment' }, // free first year!
  cardLow: { name: 'yoco',   fee: 2.95 },
  cardHigh:{ name: 'paystack',fee: 2.9 }   // anything over R2,000
};

export async function POST(req: Request) {
  const { amount, method, orderId } = await req.json();

  const chosen = (amount > 2000 && method === 'card') 
    ? rules.cardHigh 
    : rules[method] || rules.cardLow;

  // Call the chosen gateway here...
  const res = await fetch(chosen.url, { /* your headers & body */ });

  // Log to Supabase for Grafana monitoring during load shedding
  await logPayment({ gateway: chosen.name, amount, orderId });

  return NextResponse.json({ redirectUrl: data.url, gatewayUsed: chosen.name });
}

Add HMAC webhook verification + an idempotency key (simple UUID) and you’re bulletproof. Total extra work: 90 minutes. Monthly savings: often R1,000–R3,000 depending on volume.

My 2026 Recommendation – Pick One Based on Your Exact Situation

Just starting / side-hustle / first R1 million → Ozow

Zero fees on EFT, instant bank transfers, no chargeback drama. Perfect while you test the market.
Low-ticket retail (coffee, clothes, spaza online) → Yoco

No monthly fee and the rate drops automatically the more you sell (down to 2.55%). Super simple redirect checkout.
High-ticket items or growing fast → Paystack

Beautiful popup that keeps customers on your site + a dashboard that tells you exactly why a payment failed. Best developer experience in Africa.
You want full control of the checkout page → iKhokha

Uses “signed payloads” (you create a secure HMAC-SHA256 signature in code). No one can change the amount in transit. Durban-made pride.
Running SaaS or monthly subscriptions → Peach Payments

“Tokenization” lets you save a card safely once and charge it every month without touching the full card number. Free daily payouts too.
Planning for PayShap and open banking in 2027 → Stitch

White-label everything (your branding the whole way) and direct bank connections for real-time payments.

Quick DevOps Resilience Tips for SA Reality

Never trust the “success URL” redirect – use webhooks + idempotency keys instead.
Queue failed webhooks in Supabase Edge Functions so load shedding doesn’t lose orders.
Add a tiny Prometheus exporter and Grafana dashboard to watch success rates per bank (FNB vs Capitec vs Standard Bank). Alert on Slack when failures >5%.

Drop your current real monthly TCO in the comments (be honest – we’re all devs here).

Ozow? Yoco? Still on PayFast? Or did you build the orchestrator already?

I’m dropping the full orchestrator repo + free TCO calculator on GitHub this week – comment “REPO” and I’ll DM the link the moment it’s live.

Let’s keep building affordable, resilient fintech in Mzansi.

Grind smart, ship paid. 💰🇿🇦

ZATech #SADevs #PaymentGatewaysSA #Fintech2026 #NextJS #PayShap #LoadSheddingProof #JoburgDevs #CapeTownTech #DevOpsSA

I need help with using an iOS Expo Native Module on React Native

Ayabonga Qwabi — Wed, 11 Mar 2026 14:08:25 +0000

My Expo native module works on Android but is null on iOS — what am I missing?

TL;DR: I have a custom Expo module (@utapza/expo-mifare-scanner) currently on npm, that loads correctly on Android. On iOS, requireNativeModule('ExpoMifareScanner') returns null and the module never appears in global.expo.modules. I’ve tried prebuilding, a config plugin that copies Swift files into the Xcode project, and EAS Build with --clear-cache. The config plugin does run (entitlements and Info.plist are applied), but the native module is still absent from the iOS binary. I’d love help figuring out what’s needed to make the module visible on iOS.

The setup

Module: @utapza/expo-mifare-scanner — Expo module for MIFARE/NFC (reading and emulation).
App: Expo (SDK 52) with a development build, not Expo Go.
What works: On Android, the module loads: requireNativeModule('ExpoMifareScanner') (via the Android class name) works, and the native code runs.
What doesn’t: On iOS, requireNativeModule('ExpoMifareScanner') returns null. At runtime, global.expo.modules does not contain ExpoMifareScanner, and the proxy’s exportedMethods don’t list it either. So the installed iOS app was built without the module in the binary.

The module is in the app’s package.json and in app.json plugins. Locally, npx expo-modules-autolinking resolve --platform apple --json does list @utapza/expo-mifare-scanner with ExpoMifareScannerModule. So the codebase and config look correct on my machine.

{"extraDependencies":[],"coreFeatures":[],"modules":[{"packageName":"@utapza/expo-mifare-scanner","pods":[{"podName":"ExpoMifareScanner","podspecDir":"/Users/nonwork/dev/uni-card-wallet-setup/node_modules/@utapza/expo-mifare-scanner/ios"}],"swiftModuleNames":["ExpoMifareScanner"],"modules":["ExpoMifareScannerModule"],"appDelegateSubscribers":[],"reactDelegateHandlers":[],"debugOnly":false,"packageVersion":"2.0.8"}, ...}

What I’ve already tried

1. Standard prebuild and EAS Build

Ran npx expo prebuild --platform ios (and full prebuild).
Built with EAS Build: eas build --platform ios --profile development.
Result: iOS build succeeds, but the module is still null at runtime.

Latest build log

The Xcode build reports 122 targets in the dependency graph. The app target uTap links Pods such as react-native-nfc-manager, expo-dev-menu, Sentry, Stripe, ExpoModulesCore, etc.
A search of the entire log for ExpoMifareScanner, CardEmulationHandler, or ExpoMifareScannerModule.swift returns zero matches. So the native module is completely absent: no target, no Swift file references, no compilation of the module.
The config plugin does run for this build (entitlements and Info.plist are applied — NFC usage description and capabilities appear in the project). So the “config plugin” part works; the actual native module (Swift code) was never added to the Xcode project or Podfile in this build.
Conclusion: the Swift files were never copied into the project, never compiled, and never linked. That’s why at runtime global.expo.modules doesn’t contain ExpoMifareScanner and requireNativeModule('ExpoMifareScanner') returns null.

2. Config plugin: entitlements + Info.plist (already in place)

The module’s app.plugin.js already:

Sets NFCReaderUsageDescription in Info.plist.
Adds NFC entitlements (com.apple.developer.nfc.readersession.formats = ['TAG']).

So the “config plugin” part runs: provisioning and plist show the NFC usage and capabilities. But that doesn’t add the actual Swift code to the app.

3. Config plugin: copy Swift files into the app target

To force the Swift code into the build when the pod might not be linked, I extended the plugin to:

Copy ExpoMifareScannerModule.swift and CardEmulationHandler.swift from node_modules/@utapza/expo-mifare-scanner/ios/ExpoMifareScanner/ into the app’s iOS target folder (e.g. ios/<AppName>/).
Add those files to the Xcode project with addBuildSourceFileToGroup from @expo/config-plugins (so they’re in “Compile Sources” for the app target).

So the plugin now does more than plist/entitlements — it copies and links the Swift files. I’m relying on the installed package (from npm or git) still containing the ios/ folder so the plugin can copy from it.

4. Clean EAS Build

Ran eas build --platform ios --profile development --clear-cache so EAS doesn’t reuse an old native project.
Same result: build succeeds, but the module is still null on device. The build log does not contain any “[expo-mifare-scanner] Copied … to Xcode project” messages, the copy step didn’t run on EAS (e.g. package path or projectName differing).

5. Verifying the package locally

The module’s package.json has "files": [ "src", "android/...", "ios", "expo-module.config.json", "app.plugin.js", ... ] so ios is published.
Locally, a small script checks that the installed package has ios/ExpoMifareScanner/ExpoMifareScannerModule.swift and that expo-modules-autolinking resolve --platform apple lists the module. That passes when I install from the repo or from a tarball.

So on my machine the module is present and autolinking sees it. On EAS, the installed version might differ (e.g. npm tarball omitting or differing from what I expect), but even with the plugin copying the Swift files, the module doesn’t show up at runtime on iOS.

What I’m unsure about

ExpoModulesProvider on iOS

I know the app loads the native module list from something like ExpoModulesProvider in the main bundle. If the module isn’t in that provider, it won’t be in global.expo.modules. Is the provider generated only from expo-modules-autolinking’s resolve at build time? If EAS installs a package that doesn’t get resolved (e.g. missing or different expo-module.config.json or ios/ in the tarball), would the provider simply omit the module even if I’ve copied the Swift files into the app target?
Pod vs “files in app target”

When the module is linked as a pod (via autolinking), the Podfile gets a pod and the provider gets the module. When I only copy the Swift files into the app target (no pod), the code compiles and links, but does the Expo runtime still need the module to be listed in ExpoModulesProvider? If yes, then copying files alone isn’t enough — I’d need the module to be in the autolinking result so the provider is generated with it.
EAS dependency resolution

Is there a known case where the published npm package (or the commit used by a git dependency) doesn’t include the ios/ folder or has a different structure, so EAS’s install doesn’t match what I have locally? Any recommended way to verify exactly what EAS installs (e.g. a build step that dumps ls node_modules/@utapza/expo-mifare-scanner/ios or the result of expo-modules-autolinking resolve)?
Anything iOS-specific for “making the module visible”

Beyond the usual (Expo module API, expo-module.config.json with ios.modules, podspec, and the config plugin for plist/entitlements), is there an extra step or convention on iOS to make the module show up in global.expo.modules (e.g. registering in a specific way, or something in the Podfile / build phases)?

What I’d love from you

Confirmation or correction of how ExpoModulesProvider is populated on iOS and whether “copy Swift into app target” is enough or the module must be in the autolinking result.
Any checklist or debugging steps you use when a module works on Android but is null on iOS (e.g. “always check X”, “run Y on EAS and inspect Z”).
If you’ve seen EAS installing a different package shape than local (e.g. .npmignore / files causing ios/ to be missing), how you verified and fixed it.
Any iOS-specific registration or build step that’s easy to miss when coming from Android.

I’m happy to share the relevant parts of the module (e.g. expo-module.config.json, podspec, plugin snippet) or build logs if that helps. Thanks in advance.

The Philosophy of the Localhost - A Manifesto of the Internal Developer

Ayabonga Qwabi — Tue, 10 Mar 2026 18:36:21 +0000

A teaching of self

As humans, we often focus on our Public API—the version of ourselves the world consumes.

But the real architecture happens behind the scenes.

The Philosophy of the Localhost

127.0.0.1 is the ultimate safe space.

It is the place where things can break without judgment.
Where experiments are allowed.
Where unfinished ideas are not failures, but prototypes.

Before anything is deployed to the public web of society, it must first exist in a local environment.

And that environment is you.

The Localhost

Every localhost is given certain tools for life.

Internal Routing
Your internal dialogue is the most direct connection you will ever have.
No latency.
No external servers.

Just the quiet, honest resonance of you speaking to you.

The Sandbox Environment
You are granted the freedom to run private builds of ideas, beliefs, and identities.

You are allowed to test who you are
before you show the world who you’ve become.

Self-Debugging
Mistakes are not failures.

They are logs.

They illuminate where the bug lives
so the system can improve before the next release.

Version Control
You are not trapped in version 1.0 of yourself.

Every experience is a commit.
Every lesson is an update.
Every moment offers the possibility of a better build.

Deployment
Eventually, what is built internally becomes visible externally.

The world will interact with the version of you that you release.

But the most stable systems are those first tempered
in the stillness of the local environment.

The Firewall of Self

Behind every strong localhost stands a quiet firewall.

Not one built to reject the world entirely,
but one wise enough to filter the noise.

External opinions, inherited scripts, passing trends—
these are packets constantly attempting to enter your system.

Without discernment, they can overwhelm your processes
and rewrite your configuration.

The firewall of self reminds you that sovereignty is not isolation.

It is the ability to choose what is allowed into your internal network.

Not everything deserves root access to your mind.

Forking Your Path

In the architecture of growth, localhost allows you to fork your own repository.

You can explore alternate branches of yourself:

The bold branch.
The cautious branch.
The wildly creative branch.

Some paths will merge beautifully back into your main build.
Others will quietly expire in experimental branches.

But none of this is failure.

It is exploration.

And the beautiful truth of your own repository
is that no pull request is required from the outside world
unless you choose to invite one.

Cache Clearing

Even the healthiest systems accumulate residue.

Old caches of regret.
Deprecated habits.
Stale data from earlier versions of who you once were.

Left unattended, these fragments consume memory
and slow the system of the present.

Sometimes the most powerful upgrade is simple:

A quiet walk.
A journal entry.
A moment of stillness.

A clearing of the cache.

And suddenly the system breathes again.

Scaling Up

A well-tended localhost eventually grows strong enough to scale.

Not into isolation,
but into connection.

Your ideas become APIs shared with trusted nodes—
friends, collaborators, fellow builders.

Together, small systems form resilient clusters.

Yet even the strongest networks require maintenance.

Backups must be made.
Systems must rest.
Self-care becomes disaster recovery.

Because even the most elegant architecture can fail
if its core developer forgets to care for the machine.

A Final Word

And so the teaching remains simple:

The world may interact with your Public API.

But wisdom is built slowly, patiently, and privately
on localhost.

So take a moment.

Return to your internal console.

Listen to the quiet processes running beneath the noise.

Debug what needs fixing.
Commit what you have learned.
Clear what no longer serves you.

And when the time comes to deploy yourself again into the world—

Do so with intention.

Do so with integrity.

Because the strongest systems are not the loudest ones online.

They are the ones that were carefully built, patiently tested,
and faithfully maintained
on 127.0.0.1.

The Easiest Payment Gateway Integrations for Your Next React/Next.js E-commerce Project in South Africa (2026 Edition)

Ayabonga Qwabi — Mon, 09 Mar 2026 10:21:48 +0000

Building an e-commerce app in South Africa in 2026? You need payments that actually work for our market: cards, instant EFT, QR codes, low fees, and — most importantly — setup that doesn't take two weeks of KYC hell.

As a full-stack JS dev who's shipped multiple React/Next.js shops here in Joburg, I've battle-tested the popular gateways. Here's my honest ranking of the easiest ones to integrate right now — prioritized for speed, dev experience, and React-friendliness.

No fluff. Just what saves you time when you're grinding solo or with a small team.

Quick Ranking (Easiest First)

Yoco Online Checkout — Hands-down winner for speed
iKhokha (iK Pay API) — Great if you like signed payloads
PayFast by Network — OG form-post method (zero backend secrets)
Ozow — Instant EFT king (pair it with something for cards)
Peach Payments — Scaling vibes with embeds
Bonus: Paystack — If you want modern popup polish

Let's break them down.

1. Yoco Online Checkout (Easiest Hands-Down)

Signup: Minutes. No heavy business verification — just grab your API keys from the portal.

Integration: Clean REST API. Create a checkout session from a Next.js API route (or Server Action), get a redirectUrl, send the user there (or embed if supported).

Sandbox: Full test environment + sandbox keys.

Best for: Card-first shops, quick MVPs.

Why it's dev-friendly: Minimal code — POST to /api/checkouts, handle redirect. Works perfectly with fetch in API routes.

Example flow in Next.js (pseudo-code):

// app/api/create-checkout/route.ts
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
  const body = await request.json();
  const res = await fetch('https://online.yoco.com/v1/checkouts', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.YOCO_SECRET_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      amountInCents: body.amount * 100,
      currency: 'ZAR',
      // ... other fields
    }),
  });
  const data = await res.json();
  return NextResponse.json({ redirectUrl: data.redirectUrl });
}

Then redirect on frontend. Super clean.

Docs: https://developer.yoco.com/docs/checkout-api

2. iKhokha (Signed Payloads – Your Control Classic)

Signup: Simple — get app ID + secret.

Integration: POST to their endpoint with HMAC-SHA256 signature (use crypto in Node).
Sandbox: No full sandbox (live keys only), but test small amounts.

Best for: Custom flows where you want full control.

Trick: Generate the signed link in an API route, return it to React for redirect.

Example

Integration: POST a JSON payload signed with HMAC-SHA256 using Node's crypto module. A class-based wrapper keeps things reusable and secure. Make sure to pull config values from instance properties (not globals) to avoid scoping bugs.

class IkPayLink {
  constructor({ apiEndPoint, applicationId, applicationKey }) {
    this.config = { apiEndPoint, applicationId, applicationKey };
  }

  async createPaylink(request) {
    const body = JSON.stringify(request);
    const payload = this.config.apiEndPoint + body;
    const signature = crypto
      .createHmac('sha256', this.config.applicationKey.trim())
      .update(payload)
      .digest('hex');

    // ... rest of axios call
  }
}

Docs: https://dev.ikhokha.com/overview

Although I have to say their docs could use some TLC😅

3. PayFast by Network (Form-Post OG – Still Solid)

Signup: Lengthy verification (send business docs), but once approved → fire.

Integration: No API server secrets needed! Build a hidden form and auto-submit to their URL. Perfect for client-side React (use useEffect or button click).

Sandbox: Yes! merchant_id = 10000100, merchant_key = xxxxxxxx
Best for: Hosted checkout with zero backend exposure.

Downside: Redirect-heavy, feels a bit old-school compared to embeds.

Example

export function postToURL(url, values) {
  console.log(values)
  values = values || {};

  var form = createElement("form", {
    action: url,
    method: "POST",
    style: "display: none",
  });

  for (var property in values) {
    if (values.hasOwnProperty(property)) {
      var value = values[property];
      if (value instanceof Array) {
        for (var i = 0, l = value.length; i < l; i++) {
          form.appendChild(
            createElement("input", {
              type: "hidden",
              name: property,
              value: value[i],
            })
          );
        }
      } else {
        form.appendChild(
          createElement("input", {
            type: "hidden",
            name: property,
            value: value,
          })
        );
      }
    }
  }
  document.body.appendChild(form);
  form.submit();
  console.log("values", values)
  document.body.removeChild(form);
}

export default function postPaymentToPayFast({
  payFastUrl,
  merchantId,
  merchantKey,
  returnUrl,
  cancelUrl,
  notifyUrl,
  nameFirst,
  nameLast,
  emailAddress,
  paymentId,
  amount,
  itemName,
  itemDescription,
  emailConfirmation,
  confirmationAddress
}) {
  // Sandbox merchant.
  if (merchantId == "10000100") {
    alert("Use the password 'clientpass' to login and make the test purchase.");
  }

  postToURL(payFastUrl, {
    merchant_id: merchantId,
    merchant_key: merchantKey,
    return_url: returnUrl,
    cancel_url: cancelUrl,
    notify_url: notifyUrl,
    name_first: nameFirst,
    name_last: nameLast,
    email_address: emailAddress,
    m_payment_id: paymentId,
    amount: amount,
    item_name: itemName,
    item_description: itemDescription,
    email_confirmation: emailConfirmation,
    confirmation_address: confirmationAddress,
  });
}

Docs: Mostly PHP, but JS form post is dead simple → https://developers.payfast.co.za/

4. Ozow (Instant EFT King)

Signup: Fast for SA businesses.

Integration: JSON API to create payment request → get link/QR. Fetch in API route.

Best for: EFT-heavy users (cheaper than cards for many township customers).

Pair it: With Yoco or PayFast for cards.

Many Next.js shops use Ozow as primary EFT + secondary cards.

5. Peach Payments (Enterprise but Dev-Friendly)

Signup: Business verification (faster than old days).

Integration: Modern REST API, supports embedded checkout (no full redirect), server-to-server. JS libs on GitHub.

Sandbox: Full test env.

Best for: Scaling shops, recurring, high success rates.

Docs: https://developer.peachpayments.com/

Bonus: Paystack (Modern Popup Vibes – Now Strong in SA)

Signup: Quick for SA merchants.

Integration: Beautiful JS SDK (inline popup or hosted). React wrappers galore.

Sandbox: Excellent.

Best for: Clean popup experience.

Docs: https://paystack.com/docs

Quick Comparison Table

Gateway	Signup Speed	Sandbox?	Integration Style	Best For	React/Next.js Ease
Yoco	Fastest	Yes	API session + redirect	Speed & cards	⭐⭐⭐⭐⭐
iKhokha	Fast	No	Signed POST	Custom control	⭐⭐⭐⭐
PayFast	Slow	Yes	Form auto-submit	Zero-backend	⭐⭐⭐
Ozow	Fast	Yes	API link/QR	Instant EFT	⭐⭐⭐⭐
Peach	Slow	Yes	Embed/API	Scaling & reliability	⭐⭐⭐
Paystack	Fast	Yes	JS popup/SDK	Modern feel	⭐⭐⭐⭐⭐

Final Tips for SA Devs in 2026

Start with Yoco if you're shipping fast (most solo devs' go-to).
Add Ozow for EFT coverage — huge in our market.
Use Server Actions or API routes for secrets — never expose keys client-side.
Test during load shedding (offline fallbacks + optimistic UI).
Always handle webhooks for confirmations (PayFast/iKhokha especially).

Which one are you rocking in your current project? Drop your wins, pains, or code snippets in the comments — let's build better SA e-commerce together.

Grind smart, ship paid. 💰🚀

Turn History PDF Books into AI-Ready Q&A Datasets with This Python Tool!

Ayabonga Qwabi — Sun, 03 Aug 2025 18:23:41 +0000

Hey guys! I’m thrilled to share a Python tool I’ve built that transforms history books (in PDF format) into structured Q&A datasets, perfect for fine-tuning AI models. Whether you’re an AI researcher, a history enthusiast, or a data scientist, this tool makes it easy to generate high-quality datasets from historical texts—and it’s flexible enough to work with any PDF book! 🚀

What Does It Do?

The History Book to Dataset Generator uses natural language processing and local AI models (via Ollama) to extract text from PDFs, chunk it intelligently, and generate contextual Q&A pairs. The output is a JSONL file ready for fine-tuning models like Llama 3.1 or Mistral. Plus, it’s packed with features to streamline the process and ensure quality.

Key Features:

PDF Processing: Extracts and chunks text from PDF files for efficient processing.
AI-Powered Q&A: Generates contextual questions and answers using Ollama’s local AI models.
Historical Focus: Filters content for historical figures, events, and cultural practices using customizable keywords.
Parallel Processing: Speeds up dataset creation with multi-threaded processing.
Resume Capability: Checkpoints let you pick up where you left off if interrupted.
Deduplication: Ensures dataset quality by removing similar Q&A pairs.
Customizable: Adaptable for any PDF book by tweaking keywords in a simple keywords.txt file.

Example Output:

{
"instruction": "What event occurred in 1962 related to south africa?", 
"input": "In 1961 South Africa became an independent republic  and in 1962 the international court \nrecognised South Africa’s control of South-West Afr ica (now Namibia).", 
"output": "the international court recognised south africa's control over south-west africa (now namibia) in 1962, marking a significant recognition of its sovereignty."
}

Why It’s Great for Fine-Tuning AI Models

The tool produces clean, structured datasets in JSONL format, making it ideal for fine-tuning language models for tasks like question-answering, historical analysis, or domain-specific NLP. You can customize keywords to focus on specific domains (e.g., African, European, or American history) or adapt it for non-historical PDFs, like technical manuals or literature, by updating the keywords.txt file.

How to Get Started

Prerequisites:

Install Ollama for local AI inference:

   # macOS/Linux
   curl -fsSL https://ollama.ai/install.sh | sh
   # Windows: Download from https://ollama.ai/download

Start Ollama and pull a model (e.g., Llama 3.1):

   ollama start
   ollama pull llama3.1
   ollama run llama3.1

Install Python Dependencies:

   python3 -m venv venv
   source venv/bin/activate
   pip install spacy jsonlines requests tqdm PyPDF2 psutil textacy scikit-learn pynvml
   python -m spacy download en_core_web_sm

Basic Usage:

python history_to_dataset.py your_book.pdf output_dataset.jsonl

Advanced Usage:

python history_to_dataset.py your_book.pdf output_dataset.jsonl --model-name mistral --max-workers 8 --start-chunk 50

Check out the full README for detailed setup, customization, and troubleshooting: Github link.

Why I Built This

As someone passionate about SA history and AI, I wanted a tool that bridges the gap between rich historical texts and modern AI applications. I'm also in the process of trying out model finetuning so I need a tool like this to extract data from a couple of pdf documents.

An example dataset I have managed to generate can be found on huggingface

It's based on this book

This tool not only makes it easy to create datasets for fine-tuning but also opens the door to adapting it for other domains like literature, science, or even fiction!

Get Involved!

I’d love for you to try it out, share feedback, or contribute ideas. The project is still fairly new and has room for improvement, please comment here or create a feature on Github should you notice anything not okay.

AI #NLP #Python #History #DataScience #FineTuning

Please teach us how you prompt

Ayabonga Qwabi — Sat, 22 Feb 2025 07:33:43 +0000

The Vercel v0 community is home to many stunning websites, showcasing incredible design and functionality. However, it seems that the processes behind these creations often go unshared.

I believe that by exchanging insights, we can all learn and grow. If you're a developer who has crafted an exceptional website, I would like to ask you to share the specific prompts you used with the Vercel v0 bot to achieve those impressive designs.

This way, we can inspire one another and elevate the quality of our projects together!

Please teach us how you create such stuning websites.

Vercel V0 Website Generative Prompt Generator

Ayabonga Qwabi — Wed, 22 Jan 2025 06:55:35 +0000

Agent AI that will generate a website generative prompt

This is a submission for the Agent.ai Challenge

What I Built

I have ccreated an AI tool that generates a prompt to build a static website for vercel v0. I opted to do this as I could not find an API for vercel V0 otherwise I wanted to create a bot that creates a website from minimal Input, if anybody knows of an api for vercel V0 please share.

https://agent.ai/agent/vercel-v0-prompt-generator

Website lead conversion & traffic Improver

Ayabonga Qwabi — Wed, 22 Jan 2025 00:29:27 +0000

This is a submission for the Agent.ai Challenge: Full-Stack Agent

What I Built

An AI bot that scrapes a given url (your website) and identifies weak points and key areas of improoovement. It will make informed suggestions on how you can improve the website to generate value.

It is built with the Chat with a Website Template.

Link

https://agent.ai/agent/traffic-and-conversion-improver

One-Man Jive, Tool Guide to Building and Shipping Faster in the Javascript Universe

Ayabonga Qwabi — Mon, 09 Dec 2024 17:54:31 +0000

Disclaimer:

There are countless amazing tools out there, but these are the ones I've used and enjoyed. If you know better alternatives, please share, I’m always game to try out new tools!

Why This Guide?

We, developers, are blessed and cursed. Blessed with endless ideas, cursed with never finishing them! (I'm not innocent, I’ve got like 16 incomplete projects sitting in my repo graveyard😅)

If you’re working solo, it can feel impossible to get everything done. Luckily, some tools can act like your sidekick, helping you build faster a whole lot faster 🤝 leaving you to focus on the fun parts, perhaps the easy parts, The ones that include your domain😚

Here's how to supercharge your Workflow

1. Asynchronous API 🫶

When your app needs to wait on something long (like calling an API or processing a file), use Pub/Sub engines.

Example Tool: Google Cloud Pub/Sub
Why: With this you can queues tasks for background processing, while keeping your app happy and snappy on your frontend.

2. Synchronous API 🤝

For simpler requests, set up an HTTP server.

Tool: ExpressJS
Why: It’s lightweight, fast, and great for designing APIs. Pair it with API Dog and it suddenly feels like its your birthday for the 3rd time in a row.🎂

3. API Testing 📝

Need to check if your API behaves the way you expect it to?🤔

Tool: Postman
Why: Test your endpoints easily, visualize responses, and debug faster.🏃‍♀️

4. Real-Time Communication ♻️

Building a chat app? Syncing with IoT devices?

Tool: Socket.io
Why: Enables real-time, two-way communication between your app and physical devices.🦾

5. UI Magic 💅✨

UI design can be time-consuming for a one-man jive setup. Why not use some shortcuts?

Tool: Tailwind CSS
Why: Style faster and better with intuitive utility classes.
Pro Tip: If you're looking for prebuilt components, check out Tailwind Blocks websites like Flexwind, WickedBlocks, or Flowbite they're like lego BLOCKS for your front end.
Flexwind Blocks
Flowbite
Pagedone.io
Flowrift
Meraki UI
Ready Made UI

6. Real-Time Instant Messaging

Want chat features without coding like it's 1999?😩

Tool: Firestore
Why: You can subscribe to changes in your collection in real time, and boom you've got instant chat functionality.
Pro Tip: Search Firebase Realtime Database 😉 (Thank me later)

Proprietary Component Library

Sometimes your project calls for those elusive, specialized features,🤩 features that aren’t readily available for free on the interweb, I'm talking about stuff like calendars, data tables, word and excel file processors, or even PDF editors. In such a scenario the average dev component on the net don't cut it, but as for me I have found a solution that actually works, I've been taken by the the Components at SyncFusion 🤗

They provide a comprehensive library of pre-made, high-quality javascript components. Useful for a variety of purposes such as building a dashboard, productivity suite, or an online marketplace, Syncfusion has a tool set that may save you a lot of time and effort.
💪🏽

Quick Dry Deployment 🤯

7. Instant Hosting

Get your app live with a minimal setup.

Tool: Netlify
Why: Easy deployment, domain management, functions and more—all in one place 🫡

8. Continuous Delivery 🚶‍♂️

A bit slow (depending on your pipeline jobs) but useful tool to automate testing, building, and deploying your app.

Tool: GitLab
Why: A CI/CD powerhouse (but the best features aren’t free).

9. Error Tracking and Bug Catching

No one ever chose the Bug Life 😎 but the bug life chose them. A way track and get notified about bugs before your users do.

Tool: Sentry.io
Why: Get real-time alerts on site bugs and fix issues faster. Supports many project types. Just signup, install and ...

Data Handling and Local Development

10. Databases

Need a database fast fast?

Tool: MongoDB
Why: Easy to set up with Atlas Online.
Pro Tip: For a smoother local to production setup, consider using Firebase Firestore, it has local emulators that are much much easier to setup and manage.

11. Data Handling, Manipulation, Kamehameing 😤

Hands down one of the best tools to handle/process your data with. 🤯🙆🏻‍♀️

Tool: Clojure
Why: Its functional approach is powerful for data manipulation. Check out the Clojurians Slack for community support.

Architecture and Coding Helpers

12. Architecture Patterns

Are you doing too many things with too much data? Break it down into smaller services. 🤌 and _(Build ants) _ 🐜

Approach: Microservices
Why: If one service fails, others keep running. Each service is specialized for a specific task.

13. Code Editor ⌨️

Your IDE should feel like home, nothing should feel impossible. 🥰

Tool: VS Code
Why: Tons of plugins, great support, and flexibility.🤩

14. Serverless Functions

Run scripts without managing a server.🤤

Tool: AWS Lambda, Netlify Functions, or Firebase Functions
Why: Ideal for small, standalone tasks. (think ants 🐜)

15. AI Agents 😎

When it's alot to do and you can't do alone but there's no one around to assist, hire an agent🤝

Tools: Tabnine AI or Vercel V0
Why: They suggest code and help with UI tasks. I highly recommend Vercel V0 for front-end work.🙆‍♂️

Keeping Your Project on Track

16. Organizing your projects

Stay on top of your tasks.

Tools: GitHub Projects or Monday.com. I don't really know about Monday , I've only recently tried it out but I'm liking it.
Why: Visualize progress and manage tasks easily.

The End

You don’t have to do it all alone. These tools can make the journey faster, smoother, and more exciting! Pick what works for you, experiment, and finish up all those projects collecting dust on your machine. No project should be an ornament of what could have been! Unless you're a coding snowball "All projects are equal but some projects are more equal than others"😅

Cheers 👋

"Hey man, I don't know . It's your code" The lowest blow a dev can take

Ayabonga Qwabi — Mon, 29 Nov 2021 14:14:36 +0000

what's the lowest blow you've taken?