DEV Community: Makanju Oluwafemi

5 Red Flags Your AI-Generated Code Needs a Second Look

Makanju Oluwafemi — Fri, 24 Jul 2026 11:47:49 +0000

Introduction

The speed of execution is what makes AI great these days the ability to generate code or entire features that would normally take a full day,in a few minutes of prompting. That's incredible, in the grand scheme of things.

What differentiates a senior engineer from a junior one is the sheer willingness to dig deeper into code to review it, question it, and spot issues before it ever gets merged into production. But that instinct comes with experience. Senior developers have seen patterns before. They know how to properly handle exceptions, where systems tend to break, and what "clean" actually looks like versus what just looks clean.

Right now, AI has broken down the barrier to entry for software engineering. Folks without any coding background can spin up a real product using nothing but natural language and an LLM at the core. That's genuinely exciting. But what most people don't know and don't think to ask is whether what the AI built can actually scale, hold up under real usage, or survive contact with an edge case it wasn't shown.

I put together 5 red flags you need to look out for in AI-generated code. This is useful whether you're a mid-level developer leaning on AI to move faster, or a product owner shipping with AI as your primary engineering resource.

As a senior engineer reading this, i beleive all of the issue mentioned in this post should not be obscure to you.

Hallucinated Dependencies & APIs

LLMs hallucinate a lot especially when you don't give them full context of what you're building, or when you let them guess at the rest. You'll eventually see things like a random import sitting at the top of your file that doesn't actually do anything, or a function call to a method that doesn't exist in the package you're using, or an API endpoint the AI simply assumed was there.

It's important that you track all of this closely, to make sure your system stays consistent with the actual imports, packages, and API URLs you depend on not the ones the LLM confidently invented. A five-second check now saves you a broken build later, usually at the worst possible time.

How to catch it: Verify every import and API call against the actual documentation before you merge. Run a build or install step immediately after generation if a package doesn't exist, you want that to fail loudly right away, not three commits deep when it's tangled into everything else.

Inconsistent or Contradictory Logic

This one is sneakier, because the code often reads fine line by line. Each individual statement looks reasonable. It's only when you trace the logic end-to-end that you notice it doesn't actually hold together a variable gets reassigned in a way that quietly breaks an earlier assumption, a conditional branch that can never actually be reached, or two functions that handle the exact same case in two different, contradicting ways.

This happens because LLMs generate code the way they generate text one plausible piece at a time, without always holding the full picture in mind. It can produce something that's locally correct but globally broken, and that kind of bug is exactly the one that slips past a quick glance and shows up in production three weeks later.

How to catch it: Trace the logic manually, or step through it with a debugger, before you trust it with anything important. A trick that works well here: ask the AI to explain its own logic back to you, step by step. If the explanation doesn't hold up on its own, the code underneath it probably doesn't either.

Silent Security Gaps

AI-generated code has a habit of optimizing for "it works," not "it's safe." That usually means missing input validation, hardcoded secrets sitting right there in plain text, or unsafe defaults that quietly work fine in development and become a real liability the moment real users touch the system.

The dangerous part isn't that these gaps exist, it's that they're silent. Nothing throws an error. Nothing fails a build. The code runs perfectly, right up until someone finds the gap, and it's rarely going to be you who finds it first.

How to catch it: Make a security linter or scanner a standard part of your workflow, not an optional extra step. Never accept a hardcoded secret in code, no matter how "temporary" it's meant to be. And be deliberate about asking the AI directly: Does this handle untrusted input? What happens if this value is empty, malformed, or malicious?

Missing or Superficial Test Coverage

Introduction

As a senior engineer reading this, i beleive all of the issue mentioned in this post should not be obscure to you.

Hallucinated Dependencies & APIs

Inconsistent or Contradictory Logic

Silent Security Gaps

Missing or Superficial Test Coverage

A lot of AI-generated code ships with no tests at all, or with tests that only check the happy path the one scenario where every input is exactly what was expected and nothing goes wrong. That's the easiest case to test, and also the least useful one, because real usage is rarely that clean.

The danger here is that a green checkmark on your tests can give you false confidence. It feels like the code is covered, when really it's only been checked against the one scenario everyone already assumed would work.

How to catch it: Require tests to be generated alongside the code, not bolted on afterward as a formality. And when you're prompting for tests, ask explicitly for edge cases, empty inputs, wrong types, network failures, and unexpected user behavior. AI won't reach for the ugly cases on its own unless you tell it to.

Unnecessary Complexity (Over-Engineering)

Sometimes the problem isn't that the AI got something wrong; it's that it solved a simple problem in a needlessly complicated way. You'll see extra abstraction layers that don't serve a real purpose, config options nothing in your app actually uses, or dependencies pulled in to solve a problem you could've handled in five lines of code.

It's not broken, exactly. It's just more than it needed to be, and every extra layer is one more thing someone on your team has to understand, maintain, and eventually debug, long after the AI that wrote it is out of the conversation.

How to catch it: Make "Could this be simpler?" a standard question in every review, not an occasional afterthought. When you spot over-engineering, refactor toward the simplest solution that actually satisfies the requirement, not the most impressive-looking one.

Conclusion

None of this is an argument against AI-assisted development. AI is genuinely changing what's possible, and the speed it gives you is real and valuable. The issue isn't the tool it's how it gets used.

The mistake most teams make is treating AI-generated code the same way they'd treat code written by a senior engineer they've worked with for years, someone whose judgment they already trust. But AI-generated code deserves the same scrutiny you'd give a stranger's pull request because in a real sense, that's exactly what it is. It has no memory of your system's history, no instinct for your edge cases, and no accountability if something breaks in production.

The good news is that none of the five red flags above require years of experience to catch they just require you to actually look. Check your imports. Trace your logic instead of skimming it. Run a security scan. Write real tests, including the ugly ones. Ask if there's a simpler way. These are habits, not talents, and they're learnable by anyone shipping code today, regardless of how many years they've been doing it.

If you're a product owner without a technical background, this is your permission to ask harder questions before something ships you don't need to read the code yourself to ask whether it's been reviewed, tested, and checked for exactly these five things. And if you're a developer, mid-level or senior, this is simply what code review looks like now, applied to a new kind of author.

AI can write your code faster than you ever could. Whether that code is actually good is still entirely up to you.
A lot of AI-generated code ships with no tests at all, or with tests that only check the happy path the one scenario where every input is exactly what was expected and nothing goes wrong. That's the easiest case to test, and also the least useful one, because real usage is rarely that clean.

Unnecessary Complexity (Over-Engineering)

Conclusion

None of this is an argument against AI-assisted development. AI is genuinely changing what's possible, and the speed it gives you is real and valuable. The issue isn't the tool it's how it gets used.

AI can write your code faster than you ever could. Whether that code is actually good is still entirely up to you.

AI Made Coding Easier. It Also Made Bad Code Easier to Ship.

Makanju Oluwafemi — Fri, 19 Jun 2026 04:39:33 +0000

At its core, software development has always been about a simple cycle:

Write > Review > Deploy > Monitor

You ship code. The code goes through reviews. You deploy it. Then you monitor production to make sure everything stays stable. When you're working in a team, code reviews are non-negotiable. They're one of the best ways to maintain quality, catch issues early, and ensure everyone is building toward the same standards. But we're now living in a very different era. An era where a developer or, honestly, a random dude with an idea can build products through conversation.

Hehe, interesting times!

From GitHub Copilot to "Build Me an App"

I remember when developers were almost shy about admitting they used coding assistants. Back in the early GitHub Copilot days, saying "I use AI to help me write code" sometimes felt like admitting you were taking shortcuts.

Fast forward to today, and we've reached a point where people can write code using natural language. I genuinely never thought we'd get here this quickly. And since then, it's been one hell of a ride.

Why 7 Out of 10 Developers Ship AI-Assisted Code

Today, most developers are shipping AI-assisted code. Not because they're bad developers. Not because they're lazy. Because it makes them faster.

AI helps close the gap between domain expertise and implementation.

You can go from "I've never heard of this technology" to "I can build something with it" within 30 minutes to an hour of focused work.

Traditionally, learning a new framework, library, or service required days of reading documentation and experimenting.

Now, AI can accelerate that process dramatically.
That's the magic.

The Part Nobody Talks About

The problem is that while AI is incredibly good at generating code, it's not always good at generating good code.

Recently, I built a product using Antigravity, and while it helped me move fast, I noticed several issues almost immediately:

Poor code quality
Weak function modularization
Security concerns
Repeated implementation patterns
Lack of reusable abstractions

The code worked. But "working" and "maintainable" are two very different things.

And that's really the challenge with AI-assisted development today. The volume of code being generated is growing faster than our ability to review it properly.

A lot of the issues aren't outright bugs. They're the subtle things that slowly make a codebase harder to maintain over time. Swallowed exceptions, generic variable names, dead code, unnecessary comments, duplicated logic, unsafe type assertions, and TODO stubs that somehow make it to production.

That's what got me interested in ScanAISlop.

One thing I like about it is that it isn't trying to play detective and tell you whether a human or AI wrote the code.

Instead, it focuses on the stuff that actually matters: bad patterns, weak abstractions, security concerns, unnecessary complexity, and all those little things that make a codebase harder to maintain over time.

The approach is pretty straightforward. No LLM sitting behind the scenes making guesses. The checks are deterministic, so the same code produces the same result every single time.

And because the rules are opinionated, the output tends to be a lot more useful than tools that flag everything and leave you sorting through noise.

You can try it right now on any public GitHub repository.

Simply replace:

github.com/<owner>/<repo>

with:

scanaislop.com/<owner>/<repo>

and you'll get an instant report showing potential quality, security, and maintainability issues across the codebase.

I ran the CLI against one of my own projects, and the results were surprisingly useful. Instead of giving me a vague score, it pointed directly to the kinds of issues that reviewers typically miss when scanning large AI-generated pull requests.

try npx aislop scan to try-out the CLI

The most interesting part?

The CLI is completely open source and MIT licensed. You can inspect the rules, contribute improvements, open issues, or even help shape what good AI-assisted engineering should look like.

Please take a minute to try it out and star the repo: https://github.com/scanaislop/aislop.

As AI continues to generate more code, I think tools like this become increasingly important—not because AI is bad, but because engineering standards shouldn't disappear just because code is easier to produce.

The Real Advantage

This is where engineering fundamentals still matter. Understanding how systems work, knowing how to structure a codebase, understanding design systems, knowing when to abstract a component, and knowing when not to.

These things still separate experienced engineers from people who are simply prompting their way through development.

For example, if I'm using a table across multiple screens, I'd rather create a reusable component once than copy and paste:

across ten different files. AI can absolutely generate the table.

But it takes engineering judgment to recognize that it should become a reusable building block.

And most times, you have to explicitly tell your coding assistant that. AI can generate code. Experience tells you what code should exist in the first place.

The New Skill Isn't Coding Faster

The new skill isn't necessarily writing code faster. It's reviewing code better. It's knowing what should be abstracted. It's spotting security issues. It's identifying AI-generated slop before it reaches production.

Because the future isn't AI versus developers. The future is developers who know how to think, using AI as leverage.

And those developers will always have an edge.

I think software engineers should be a bit worried.

Makanju Oluwafemi — Tue, 28 Apr 2026 00:16:49 +0000

It’s honestly wild to see how much AI agents have accelerated things in such a short time.

Tasks that used to take weeks can now be handled in a day with the right setup. Implementation used to be where top engineers really stood out picking up the hardest problems and grinding through them. But now, agents can read docs, understand context, and execute a lot of that work.

I remember seeing a post from a YouTube co-founder saying this might be the last era of “meaningful work” as we know it. That stuck with me.

So I’m curious, how are you all actually feeling about this shift?

If things keep moving at this pace, software engineering (at least in the traditional sense) could look very different in the next couple of years. If agents handle reading, coding, and even coordination… where does that leave us?

Are there new skills we should be focusing on? New roles emerging? Or is this just another evolution we’ll adapt to like we always have?

Would really love to hear different perspectives on this.

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

566

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!