DEV Community: Makanju Oluwafemi

Do people still genuinely care about technical articles ?

Makanju Oluwafemi — Sun, 15 Feb 2026 23:42:17 +0000

AI has spread like wildfire. In software development especially, it’s changing how we learn and solve problems. Instead of digging through documentation or reading long-form blog posts, many engineers now turn to AI for direct, tailored answers. It’s faster. It’s contextual. And if you know how to prompt well, it can even feel like having a senior engineer on demand.

But it makes me wonder:

Do people still genuinely care about technical articles?
Are long-form developer posts becoming obsolete, or are they evolving into something AI can’t replace?
Is there a kind of depth, perspective, or storytelling that only comes from reading someone’s full thought process?
Are we optimizing for speed over understanding?

AI gives answers, and articles often give context.

Maybe the real question is :
Are we building engineers who can ship fast or engineers who deeply understand what they’re shipping?

Curious to hear your thoughts, hmmm.

Web 3

Makanju Oluwafemi — Fri, 13 Feb 2026 01:29:42 +0000

Laid Off on the First Workday of the Year—and What Came Next

Makanju Oluwafemi — Fri, 09 Jan 2026 08:52:55 +0000

How would you feel if you were affected by a layoff on the very first workday of the year due to restructuring? You’d probably feel emotionally drained. And that’s okay; no one wants to lose their job, especially not on the first workday of a new year.

This is usually the time when people reflect on the past year—though maybe it’s just me, and not everyone does this before work fully resumes in January, i.e., set goals and make plans for what’s ahead. You’ve already mapped things out, set targets, and envisioned how the year should go. Then, out of nowhere, boom! You’re out.

Thinking about it now feels strange, because this is exactly where I find myself. But interestingly, the way I feel is quite different from everything I’ve just described.

I have mixed feelings because, on one hand, I fancy the idea of a new challenge somewhere with a truly developer-focused product, and I have already been planning my next move and job search. On the other hand, I don’t like the idea of being laid off at all, especially since this is my first time experiencing something like this.

Just to be clear, I was indeed offered more responsibility with an improved salary 2 months ago. However, we were unable to come to terms based on my expectations. In all, I'm grateful for the consideration.

How I’m Managing This Moment

I do have plans for the year. That said, I’ll be prioritizing finding a new role above everything else right now for the sake of my mental health. This will probably be the first time in the past four years that I’m not actively working or employed by a company, so I’m still figuring out how to navigate this phase. It feels unfamiliar, but I’m confident I’ll find my footing.

In the meantime, I plan to stay intentional and keep building:

Working on personal projects in Rust and MOVE, driven by my growing interest in stablecoin adoption for global remittance.
Exploring and building projects in AI, really interested in AI agents, including MCP and related tooling.
Continuing to deepen my interest in web platforms and infrastructure.

I'm a frontend engineer first before DevRel, so I have also been looking at still working, and that also helps improve my web platform experience due to the fact that I have managed deployment many a time.

I know these are different areas, but my approach is to focus on them one at a time rather than all at once. Although I'm open to feedback and suggestions on how to manage this in the comment section.

What Next?

This is probably the question on your mind, lol! A quick intro about me and what I have been up to over the years. My name is Femi, a developer relations engineer working at the intersection of product, engineering, and customer success. Over the past year, I transitioned from a frontend engineering background into full-time DevRel, where I’ve worked closely with tech leads, CTOs, heads of growth, and product managers to drive developer relations at an organizational level.

Along the way, I’ve worn multiple hats as a frontend engineer, technical writer, and developer educator, helping shape developer experience through documentation, demos, and hands-on education. I’ve also hosted virtual developer events and delivered live demos at community and industry events, all focused on helping developers build confidently and successfully with the product.

Developer-focused event with the WordPress community in Lagos. I did a quick DEMO on how you can set up the Nomba payment plugin on the WooCommerce store.

I’ve also hosted a virtual event on webhooks in payment integrations—you can find the recording on the Nomba Developers
YouTube channel.

In addition, I’ve written technical articles for OpenReplay; you can view my profile and published work here
. I’ve also contributed extensively to technical documentation for devtools and payment solution platforms, with my most recent work being end-to-end payment documentation for a Nigerian startup.

I’m currently looking for my next role and would love to join a developer-first or developer-plus company. If you have an open-source project you’d like me to contribute to as a technical writer, or know someone I should speak with, I’d really appreciate the connection.

You can reach me directly at makurseme@gmail.com

Learn how to authenticate with react JS

Makanju Oluwafemi — Mon, 08 Sep 2025 23:20:27 +0000

Makanju Oluwafemi

Dec 26 '23

How to manage user authentication With React JS

#react #webdev #javascript #frontend

565

Comments 43

8 min read

How to Setup Nomba Checkout on shopify

Makanju Oluwafemi — Mon, 10 Mar 2025 11:49:06 +0000

Introduction

Nomba provides a Shopify checkout plugin to accept payment in your online store. This plugin is similar to the WordPress plugin simply because they are both used for accepting online payments. Also, it belongs to the no-code ecosystem. When building a Shopify store, there are different ways to accept payment.

Typically, payment is a third-party thing for Shopify, but then they support some providers by default. This process is slightly different when you want to use Nomba as a payment provider in your Shopify store.

This Plugin is available to Nigerian merchants and it can be used to process internatio
nal and local Payments.

To use Nomba as your Shopify store payment provider, you will need to create an account on the Nomba Website > go to the settings page on your dashboard. Click on Get API Keys. The process is straightforward.

These are the 3 things to get on the settings page before adding Nomba as a payment provider on your store. We provide the option to switch between live and test keys.

ClientID
Private Key
Account ID

Step-by-step installation guide

The step requires that you add Nomba as a third-party app. Look at Nomba Shopify plugin here and click on Install

When you click on Install, you will be redirected to your Shopify admin page, where you can now properly install the Nomba app.

Click on Install to continue.
When you successfully install this app, You will be redirected to Nomba payment gateway config page. On this page, You will add your Client ID, private secret, and account ID.

You can get test and live keys on your settings page when you have completed setting up your dashboard.

Click on the Ready checkbox, then click the Submit button, and you will get a notification that your data was saved without issue. Click go back to payment settings to activate the Nomba app.

This image shows a notification update, describing the status of the action you just completed.

Click on the arrow left button and you will be redirected to a page where you can now activate Nomba for your Shopify app.

Click on the activate button and you have successfully enabled Nomba as a payment service in your Shopify App. You can also choose to select which card you would love your business to accept but for this tutorial we have all selected.

conclusion

With Nomba, you gain access to a reliable and secure payment solution that enhances your store’s checkout experience. Whether you're running a small business or scaling an enterprise, using Nomba as a payment provider, ensures that your customers enjoy smooth payment processing experience. Now, your business can thrive without thinking of any payment hassle.

How Charge APIs Enhance Payment Processing in Fintech

Makanju Oluwafemi — Wed, 29 Jan 2025 14:04:29 +0000

As developers building payment solutions, we often encounter the term "charge," which can sometimes be confusing. In some cases, you might also come across the term Direct Charge. A charge refers to the specific action of processing a payment, which typically involves the authorization and capture of funds from the customer's payment method. Essentially, it’s the step where the transaction is finalized and the money is transferred from the customer to the merchant.

Importance of Charge API in modern payment systems

Customization and Branding
Unlike traditional checkout systems, which typically redirect customers to a third-party page, the Charge API allows you to fully customize the payment experience. You can tailor the design and user flow to match your brand's identity.

Enhanced Security Features
Charge APIs often include built-in security measures like 3D Secure authentication and OTP verification to further protect against fraudulent transactions. This helps provide legitimate information about the card owner's identity.

Charge API offers enhanced flexibility, better control, and a more personalized, secure payment experience than traditional checkout methods. This makes it an ideal choice for developers looking to take full control of their payment experience.

Introducing Nomba Charge API and the Process Flow

The Nomba Charge API is a user-friendly payment solution that helps businesses securely process payments. Whether you’re accepting card payments, handling OTP-based authorizations, or offering transfer payments, Nomba Charge makes it simple. It lets you save customer card details for future purchases, authenticate transactions through OTPs, and track transaction statuses with ease. The process flow is straightforward, guiding you from getting order details to saving cards and even canceling incomplete transactions.

Process Diagram

This flowchart provides developers with a comprehensive understanding of how the Nomba Charge API works. To begin, you'll create an order and submit the customer’s card details. An OTP will then be sent to the customer’s phone number. The customer can either enter the code to complete the verification or request a new code if the OTP expires. They also have the option to use a Flash account number. Once the process is complete, you can prompt the customer to decide if they’d like to save their card information for future payments.

Key Features of Nomba Charge API

Flash Payment Integration
The Charge API supports Flash payments, allowing users to complete transactions quickly and securely using their Flash account number. This feature simplifies payment by offering a convenient alternative to traditional card payments.

Card Saving for Future Payments
With the Nomba Charge API, you can offer customers the option to save their card details securely for future transactions. This will make future payments faster and more convenient, improving the overall user experience.

Secure OTP Verification
Security is important! The API uses OTP to verify user transactions. This two-factor authentication ensures that payments are processed securely and that only authorized users can complete a transaction.

Charge API vs Traditional Payment Gateways

Unlike traditional checkout systems, where customers are redirected to an external page to complete their payment and then returned to a callback URL set during transaction initialization, the Charge API allows you to create a fully customized payment gateway that aligns with your brand's look and feel.

This gives you greater control over the entire payment process. With the Charge API, you can easily implement features such as saving customer cards for recurring payments, authorizing transactions via OTP (One-Time Password), and enabling 3D Secure authentication for enhanced security.

Conclusion

Really glad you made it this far, haha! There are so many possibilities with building your product around the Nomba API. The charge API is just one of them. looking to explore our payment product? check here.

Learn how to accept payment in your woocomerce store. Wp Guys, check this out

Makanju Oluwafemi — Tue, 28 Jan 2025 04:09:37 +0000

How to setup Nomba checkout on Woocommerce

Makanju Oluwafemi for Nomba Financial Service ・ Jan 27

#webdev #wordpress #woocommerce

How to setup Nomba checkout on Woocommerce

Makanju Oluwafemi — Mon, 27 Jan 2025 01:01:45 +0000

WooCommerce is a free online WordPress plugin that allows developers to manage online stores by providing quick setup configurations for product display, managing orders, and processing payments via the multiple payment gateways option provided.

In this guide, we will walk through a step-by-step guide on how to add a nomba to your e-commerce website.

It’s important to know that this payment plugin is currently only available for Nigerian merchants.

Before diving deep into the "how" of this guide, I have summarized what is expected. This will give you an overview or brief into what we need to do to get this checkout page up and running quickly.

Install WooCommerce, Classic Editor Plugin and Nomba Payment Gateway for WooCommerce.
Get Nomba API keys
Setup Nomba plugins

How to Install a WordPress Plugin

Adding a plugin in WordPress is synonymous with installing an NPM package when writing code. Ideally, plugins extend the capabilities of a project by enabling more functionalities. To add a plugin to your WordPress site, go to the WordPress admin page. Select ** Plugins ** You should be presented with a page that looks Like this.

Select the Add Plugins button, then search for the WooCommerce plugin. Click on install and activate.

To install the Nomba Checkout Plugin, repeat the same process. When you search for the Nomba plugin, you will be presented with this.

This image shows the result of a search when a developer types in Nomba.

It's possible that when you complete all of these installations and are about to test, you will be presented with an error description like the one in the image below.

This image can be found on this site, where you can learn more about why the error exists and how to fix it using the Classic Editor Plugin.

How to get Nomba API keys

When you have completed the installation of all the plugins, head over to Nomba > Create account > Dashboard, click on settings on the right pane, and select Webhooks and API Keys

A pictorial representation API keys page.

How to Setup Nomba Plugin

Next, when you have completed the installation of all plugins, ensure that you activate the plugins so they can work as expected. Click on Manage to add API keys.

This Image explains how to manage the plugin

Next, you will add your Nomba credentials to the plugins.

We use the API keys and account ID to connect with your Nomba account. Add the appropriate keys in the box. Select Test mode and Click Save Changes

Voila!, You have completed the installation and setup of your checkout plugin.

Accept payment on your Nomba Checkout Page

If you are here, it means you have followed us through from beginning to end, and I'm glad you have been able to see how to install and use the Nomba WooCommerce plugin.

Next, when you click on the checkout page, it will redirect you to the checkout page, and you can proceed to pay.

. This image shows a checkout order.

When you click on Place Order, you will be redirected to this screen to complete your payment.
Add your card details, and you are ready to go.

You’ve successfully integrated the Nomba payment gateway into your WooCommerce store. With this setup, you can now accept payments seamlessly on your checkout page. Just ensure your store is set up correctly with the provided API keys and the Nomba plugin.

If you run into any issues, consult the Nomba developer community. You're now ready to offer your customers a smooth checkout experience!

Submitting form data to Google Sheet from a React App

Makanju Oluwafemi — Tue, 03 Sep 2024 16:03:27 +0000

One thing that Google does that amazes me is the use cases that come with working with their workspace tools, be it Gmail, Google, or Meet. There are different ways to work with them.
In this article, we will explore integrating Google Sheets, a workspace tool created to serve as an online spreadsheet. It's a feature-rich text editor where you can create, edit and collaborate. How do we intend to do this? Imagine we are making a waitlist for a start-up product and need to get people's data and store it for a campaign. You can leverage the Google Sheets API to get this data instead of worrying yourself about the problem of creating a backend and some database.

For you to follow this guide, honestly, I will say your experience in React or Vue won't matter, as basic Javascript knowledge can be applied to both. However, I will use a React app.

Introduction to AppScript

Appscript is a JavaScript cloud-based platform that allows you to integrate with Google products, You can automate tasks across products like calendars, spreadsheets, and so on. Our focus in this article is Appscript for Google Sheets.

Create and set up a Spreadsheet

Go to spreadsheet on Google and create a new blank spreadsheet.

Click on Extension on the spreadsheet editor tab, you will be presented with a pop-up that looks like this.

Click on Appscript, and you will be redirected to a new web-based editor to start writing your script.

Add a script and deploy your app.

Next, copy and paste the code below into your editor.
Next

const sheetName = 'Sheet1'
const scriptProp = PropertiesService.getScriptProperties()

function initialSetup () {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1

    const newRow = headers.map(function(header) {
      return header === 'Date' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

Next, click on the run button; you should get a success message in the output section.

To deploy these changes, click on the deploy button; a small modal will appear underneath it. choose a new deployment.
After that, a modal will pop up, Click select type settings and choose web app from the modal, then set "who has access" to anyone and "execute as" to me. Click on deploy; you should be redirected to the authorize screen. Follow the onscreen guide, and you should be okay.

A screenshot of how the modal should look.

When you are authorizing, Google might not have verified your app, so click advance to the unsafe site when authorizing; no issues.

When all steps have been completed, you should get a screen containing your deployment ID and Web App URL, Copy and save them somewhere because you will need them to be able to push from your React app to this sheet. Click done and you should be redirected to your web base editor.

Set Up A trigger

To set up a trigger, hover on the right pane; a swipe-out navigation layer will be presented, select Triggers.

Click on the add trigger button. You will get a modal popup for adding your trigger function. These functions are divided into four; you can edit whichever one you want to use for this guide.

Select do Post for the function to run, Head for deployment to run, from spreadsheet for the selective event source, and on form submit for the selective event type.

This is the image of how the triger modal should look.

Create a React Form and push data from your app

To create a form, I have bootstrapped a react and typescript code. As I have said, you can always apply everything here in another framework; nothing too complicated.

Next, copy this code into App.tsx, it's just an example to show how to implement it in your own code. Please take note that you have to pass your app ID to the base URL; also, your payload data needs to be passed to formData() for it to work.
App.tsx

import React from 'react';
import './App.css'

function App() {
  const handlePost = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const target = event.target as typeof event.target & {
      email: {value: string},
    }
    const date = new Date()
    const inputValue: {[key:string]:string} = {
      'Email': target.email.value,
      'Created At': date.toLocaleString(),
    }
    console.log(inputValue)
    const APP_ID = 'APP_ID'
    const baseURL = `https://script.google.com/macros/s/${APP_ID}/exec`
    const formData = new FormData()
    Object.keys(inputValue).forEach((key) => {
      formData.append(key, inputValue[key])
    })
    try {
       const res = await fetch(baseURL, {
        method: 'POST',
        body: formData,
       })
      if(res.ok){
        console.log('Request was successful:', res);
      }else{
        console.log('Request Failed:', res);        
      }
    }catch(e){
      console.error('Error during fetch:', e);
    }
  }

  return (
    <div>
      <form onSubmit={handlePost}>
        <input type="text" name='email' placeholder='Enter Email'/>
        <button>submit</button>
      </form>
    </div>
  )
}

export default App

In this code example, I created a form to get user emails and send them to the sheet when the user clicks on submit. When a user clicks, an event handlePost is triggered, passed through an asynchronous action, and it sends a request containing the input email address and the current time and date.

If everything is successful, you should have your email and time in your Google sheet like this.

A screenshot of the spreadsheet with inputted data from the form

Conclusion

There are so many advantages to using Google Sheets, as it can be used in place of a backend to gather quick information from users from your app. There are other google workspace tool integration to explore, however, this will be our focus for now, hopefully later i can share articles on how to implement with other tools. Happy coding!

MVVM in React: A beginner's guide

Makanju Oluwafemi — Tue, 09 Jul 2024 08:28:41 +0000

Introduction

It is essential for all developers to give attention to code organization while creating modern software, since it may significantly improve developer experience, collaboration, code maintainability, and reuseability. There are different architecture that can be used to archive this. however, this article describe how to apply the Model-View-ViewModel (MVVM) architecture to improve the organization of your code.

The Model-View-ViewModel (MVVM) software architecture model is widely used in the development of user interfaces. The user interface is divided into three components that are linked together: model, view, and view-model. This architecture promotes separation of concern. Without closely tying the user interface to the underlying business logic, it allows developers to work on multiple portions of the application at the same time.

Understanding MVVM

MVVM is a design pattern that promotes separation of concern in frontend development by separating the UI, application data, and business logic. This method makes sure that the presentation logic and application data can be managed independently, making the codebase more modular and maintainable.

Components of MVVM

Model

The model represents the application's data and business logic. It's made of the data structures and logics that contain how the application behaves. What I'm saying is that the model serves as the foundation upon which the entire application is built. It is also responsible for retrieving and manipulating data, as well as enforcing business logic.

View

The view is responsible for presenting the user interface to the end-user. The visual elements, such as buttons, text fields, and layouts, are kept in this part of the application; they are what users interact with. Unlike traditional architectures where the view is tightly coupled with the underlying logic, MVVM advocates for a more decoupled approach. The view should be passive and only concerned with rendering the view model's state.

ViewModel

The ViewModel acts as an intermediary between the view and the model. It serves as a bridge that translates the data and actions of the model into a format that the view component can understand. The View may stay portable and concentrate only on display issues because the ViewModel handles state management and presentation logic. They are connected by a channel, allowing them to exchange messages when necessary. This strategy promotes improved concern separation.

Implementing MVVM in React

In this example, we will create a walk-through guide on how to implement a simple feature where users can add and list tasks.

To get started, you should have a fresh installation of react ready. or better still copy and paste this code on your terminal to create a project.

npx create-react-app mvvm-app
cd mvvm-app

After setting up, the first thing to do is create a model for managing data and business logic.

Create a file called TaskModel.js, copy and paste this code into it.
TaskModel.js

class TaskModel {
  constructor() {
    this.tasks = [];
  }

  addTask(task) {
    this.tasks.push(task);
  }

  getAllTasks() {
    return this.tasks;
  }
}

export default TaskModel;

This code has a TaskModal class, which consist of a constructor that is used for saving all the task in an array. It also consist of two methods, addTask and getAllTasks both of which are for adding and getting tasks.

Next, you will create the render view using App.js and show
App.js

import React, { useState } from "react";
import useTaskViewModel from "./view-model/TaskViewModel";
import "./App.css";

function App() {
  const [taskInput, setTaskInput] = useState("");
  const [tasks, setTasks] = useState([]);
  const { addTask, getAllTasks } = useTaskViewModel();
  const handleAddTask = () => {
    addTask(taskInput);
    setTaskInput("");
    setTasks(getAllTasks());
  };

  return (
    <div className="main-container">
      <h1>Task Manager</h1>
      <div className="main text-input">
        <input
          type="text"
          placeholder="Add a task"
          value={taskInput}
          onChange={(e) => setTaskInput(e.target.value)}
        />
        <button onClick={handleAddTask}>Add Task</button>
      </div>
      <div className="main task-wrapper">
        <h2>Tasks</h2>
        <hr />
        {tasks.length !== 0 && (
          <ul className="task-item">
            {tasks.map((task, index) => (
              <li className="text" key={index}>
                {task}
              </li>
            ))}
          </ul>
        )}
        <div className="list-not-found">
          {tasks.length === 0 && <p className="text">There is no task item</p>}
        </div>
      </div>
    </div>
  );
}

export default App;

This component serves as the main interface for the tasks. It utilizes local state to manage the input for adding tasks taskInput and the list of tasks tasks. The useTaskViewModel hook is used to interact with the ViewModel, enabling functionality for adding tasks addTask and retrieving all tasks getAllTasks.

The handleAddTask function add task to the list, triggering the addTask method with the current input value, resetting the input field, and updating the task list with the newly added task. The JSX markup structures the UI with input and button elements for adding tasks and a list to display existing tasks. Conditional rendering ensures that a message is displayed when there are no tasks present.

App.css

body {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-container {
  background: #20205d;
  padding: 10px 20px;
  border-radius: 5px;
}
.main-container h1 {
  font-size: 16px;
  color: #eee;
}
.main-container button {
  border: 1px solid white;
  padding: 7px;
  border-radius: 5px;
}
.text-input {
  display: flex;
  flex-direction: row;
  gap: 2px;
}
.text-input input {
  border: 0.78px solid #eee;
  display: flex;
  padding: 7px;
  border-radius: 7px;
  gap: 2px;
}
.text-input button {
  width: 100px;
}
.task-wrapper h2 {
  font-size: 16px;
  color: #eee;
}
.text {
  color: #eee;
  font-size: 14px;
}

In this CSS code example, we style the task management application's user interface. We center the content, define the main container's appearance, and set styles for text, input fields, buttons, and task items.

This image shows the output of the image. task has not been added in this image but the HTML(HyperText Markup Language) and CSS(Cascading Style Sheets) has been implemented.
TaskViewModel.js

import { useState } from "react";
import TaskModel from "../model/TaskModel";

const useTaskViewModel = () => {
  const [taskModel] = useState(() => new TaskModel());
  const addTask = (task) => {
    taskModel.addTask(task);
  };

  const getAllTasks = () => {
    return taskModel.getAllTasks();
  };

  return { addTask, getAllTasks };
};

export default useTaskViewModel;

This useTaskViewModel hook contains all the logic, data, and functionality related to tasks. It uses the useState hook to initialize a TaskModel instance, which handles task-related operations. addTask Accepts a task as input and delegates the task addition functionality to the TaskModel instance, which adds the task to the internal data structure.

getAllTasks Retrieves all tasks stored in the TaskModel instance and returns them as an array. Components can easily interact with tasks using these methods without directly accessing the underlying data or business logic of the task model.

This image shows the output of the task user interface, when a user add task to it.

Benefits of Using MVVM in React

React applications can achieve even greater levels of modularity, maintainability, and testability. In this section, we'll explore how MVVM enhances the developer experience by focusing on three key benefits: separation of concerns, reusability and maintainability, and enhanced testability.

Separation of concerns

MVVM promotes separation of concern by giving each of its components distinct roles. The model represents the data, business logic of the application, and state management. The visual elements that are visible to users are represented by the view, which is composed of JSX components that make up the user interface. Presentation logic is incorporated into the view model. It manages data transformation, ensuring that the data in the model and the view's display communicate with one another without interruption.

Reusability and maintainability

By isolating presentation logic in the ViewModel, developers can reuse this logic across multiple components without duplicating code. This promotes code reuse and simplifies maintenance efforts. Also, with clear separation between Model, View, and ViewModel, React applications built using MVVM are inherently more modular. It is easier to understand, change, and expand the functionality of the application when each component is able to concentrate on its own functions.

Enhanced testability

Developers can write unit tests for the ViewModel, which contains the application's business logic. These tests verify that the ViewModel behaves correctly under various conditions without needing to render the UI components. They can also write integration tests to ensure that the model, view, and view work together as expected. These tests validate the end-to-end functionality of the application, covering interactions between different layers. In essence, MVVM makes it easier to write good tests for React components. This results in software that is more stable, dependable, and bug-free.

Conclusion

Dependable systems that enhance testability, ensure code separation, and eliminate all code duplication are necessary while developing scalable applications. All these are what MVVM stands for. Look it over now, implement it in your project, and improve as a developer. Happy coding!

How to Create a Custom Hook for Seamless Data Retrieval with React.

Makanju Oluwafemi — Tue, 30 Apr 2024 13:32:17 +0000

introduction

Custom hooks in react allow developers to extract logic that is needed in multiple components into a standalone function. This can apply to making API requests, state management, or even side effects.

Side effects in React refer to any operation that occurs outside the scope of the component's render function, such as data fetching, subscriptions, or DOM manipulation.

There are a few rules that govern hooks creation in React; you can check them [here]: https://legacy.reactjs.org/docs/hooks-rules. However, make sure your hook name starts with use.

Create a Service That Handles API Requests

When working on features that require logic duplication, for example, you need to send a GET request to /api/allproduct, /api/singleproduct/:id and so on. You can decide to create a service that handles all these requests in a single file and export them to use in another file.

To understand what I'm saying in essence, walk with me!
Do ensure that you have a React project set up already, or copy this code to do that.

npx create-react-app hooks-example
cd hooks-example

Also, copy this code to add axios

npm i axios

Now that you are all set, create a folder and name it service in your src directory. Inside this folder, create an
evenService.js file.

eventService.js

import axios from "axios";

const baseURL = 'api-url/';

const apiService = axios.create({
    baseURL,
    headers: {
        'Content-Type': 'application/json',
    }
});

export const fetchAllProduct = async () => {
    try {
        const res = await apiService.get('api/all-products');
        if (res.data.status === 200) {
            return res.data.products; // Return only the products data
        } else {
            throw new Error(`Failed to fetch all products: ${res.data.message}`); // Include more descriptive error message
        }
    } catch (error) {
        throw new Error('Failed to fetch all products. Please try again.'); 
    }
};

In this example code, I have defined an Axios instance apiService with a baseURL and default headers for making HTTP requests to an API. It also defines a function fetchAllProduct for fetching all products from the API using a GET request.

Is this approach better?

I won't say it's not better, but then things can be implemented better by putting this logic into a custom hook called useApi.

Here is my take
If I continue like this, the eventService.js file will soon become so long and unorganized. I will have to add a new export function for each API request. Rewriting the async awaits for everyone of the function.
This does not seem to be perfect; remember the DRY (Do Not Repeat Yourself) rule.

Create a Custom Hook for API requests

You can edit the eventService.js file by removing the fetchAllProduct function.

Then add export to apiService like this:

import axios from "axios";

const baseURL = 'api-url/';

export const apiService = axios.create({
    baseURL,
    headers: {
        'Content-Type': 'application/json',
    }
});

Create a folder and name it hooks in your src directory. Then, create a useApi.js file. Import your apiService and use it here.

Copy and paste this code.

import { useState, useEffect } from "react";
import  { apiService } from '../service'

const useApi = (endpoint, method = 'GET', req = null) => {
   const [loading, setLoading] = useState(true);
   const [data, setData] = useState(null);
   const [error, setError] = useState(null);

   useEffect(() => {
     const handleEndpoint = async () => {
       setLoading(true);
       try {
         let response;
         switch(method.toUpperCase()) {
           case 'GET':
             response = await apiService.get(endpoint);
             break;
           case 'POST':
             response = await apiService.post(endpoint, req);
             break;
           case 'PUT':
             response = await apiService.put(endpoint, req);
             break;
           case 'DELETE':
             response = await apiService.delete(endpoint);
             break;
           default:
             throw new Error(`Unsupported HTTP method: ${method}`);
         }
         setData(response.data);
       } catch (error) {
         setError(error);
       } finally {
        setLoading(false);
       }
     };

     handleEndpoint();
   }, [endpoint, method, req]);

   return { loading, data, error };
};

export default useApi;

In this example, we created a custom hook called useApi. It encapsulates API fetching logic in a reusable manner. useState and useEffect hooks are used to manage loading state, fetched data, and potential errors. When invoked with a specified API endpoint, HTTP method, and optional request body (req), it triggers an asynchronous operation to fetch data from the API using the provided method (GET, POST, PUT, DELETE). Upon completion, it updates the component's state accordingly, setting loading to false, storing the retrieved data in data, and capturing any errors in error.

This hook allows reusability, reduces the complexities of API interaction, and promotes cleaner code.

With these few points of mine, I hope I have been able to convince and not confuse you that creating a custom hook for your API request will significantly advance modularity and reusability. Happy Coding!

The Human Element in Testing: Nurturing Soft Skills for Testers

Makanju Oluwafemi — Wed, 17 Jan 2024 22:56:20 +0000

Within the dynamic field of software testing, the need for soft skills in addition to technical competency is being recognized more and more. To transform testers from simple executors into strategic contributors, this article examines the importance of communication, teamwork, adaptability, and empathy.

Collaboration:

Highlighting how important good teamwork is to the outcome of testing projects and examining the collaborative aspect of modern software development as a tester, the focus is on testers participating actively in conversations, brainstorming sessions, and offering insightful criticism.

The main takeaway is that the tester's responsibilities go beyond specific tasks to include meaningful engagement in a team environment, where their observations and suggestions greatly enhance the process's overall effectiveness.

Adaptability:

A flexible approach has been highlighted by using the term "agile" to characterize the testing process. The emphasis is on testers' capacity to adjust to changes without difficulty, understanding that in the dynamic world of software testing, flexibility is not only helpful but necessary.

The term "flexible approach" denotes the ability to respond and adjust swiftly to changing circumstances, acknowledging the unpredictable nature of software development and testing.

Empathy:

The importance of empathy in the testing process is emphasized in this section, which shows how it can change the process from being mechanical to being human-centered. It acknowledges that comprehension of end users' viewpoints and demands is essential to efficient testing by highlighting the necessity for testers to have empathy for end users.

The phrase "empathy-driven testing" describes an approach in which testers immerse themselves in the user experience and move beyond technical assessments. Testers are better equipped to replicate real-world events thanks to this sympathetic understanding. Testers take into account how people interact with the software in their particular situations rather than focusing only on technical features.

Soft Skills Training:

There are a series of programs that are recommended, including workshops that concentrate on communication skills, team-building activities, and scenarios that require flexibility. The main objective is to produce well-rounded testing teams that possess the interpersonal and adaptable abilities needed to flourish in the fast-paced, team-oriented settings typical of modern software development projects.
It will help testers gain valuable training meant to improve their capacity to collaborate, communicate, and adjust.

Balancing Technical and Soft Skills:

Testers become more than just implementers thanks to this connection; they become important members of a team. This highlights how important testers are in helping technical and non-technical stakeholders communicate with each other. Assisting in the efficient translation of complex technical jargon into insightful knowledge, testers establish themselves as important participants in the larger project environment and improve comprehension.

Strategic Imperative:

The word "strategic" suggests that testing procedures involve intentional and essential elements. The cornerstone for testing success is positioned as the human aspect, which is defined by efficient communication, smooth collaboration, adaptability, and empathy. This emphasizes how crucial soft skills are for negotiating the complex testing environment's problems and highlights their strategic significance for testers aiming for excellence in their line of work.

Closing Thoughts:

The final section focuses on the testers' transformation from simple executors to strategic partners. The word "evolution" emphasizes a wider range of skills and denotes a development beyond conventional roles. The emphasis on complete growth means that, in addition to developing testers' technical expertise, it also acknowledges that they are human beings who add a human touch to the accuracy of software testing. This understanding of the human aspect becomes essential for navigating the testing industry's constantly shifting terrain, implying that its future relevance rests in the combination of expertise and the recognition of testers as essential participants in the complicated and dynamic field of software development.