Forem: code-with-onye

Why I chose MedusaJS over building ecommerce from scratch

code-with-onye — Fri, 20 Feb 2026 10:20:05 +0000

There's a specific kind of pain that only developers who've built e-commerce from scratch truly understand. You start the project feeling confident, maybe even a little cocky. Then, slowly, the features start stacking up, and you realize that what you thought was "almost done" was really just the beginning.
That was me, not too long ago.

We Thought We Were Almost Done. We Were Just Getting Started.

The first time I worked with a team to build an e-commerce platform from scratch, we genuinely believed we were ahead of schedule after getting the product catalog sorted. We were patting ourselves on the back, thinking the hard part was over.

Then reality kicked in.

We still had order management to figure out. Then shipping logic. Then inventory. Each feature we added felt like pulling a thread on a sweater; one thing would change, and something else would unravel somewhere else in the system. It was a lot.

But the thing that really kept me up at night wasn't the features themselves. It was the realization that if the client ever came back asking for something new, like adding a discount engine, a loyalty system, anything, we'd be in serious trouble. Scaling it or adding new features would have been a nightmare. Every small improvement meant rewriting chunks of the system, and every new integration felt like walking a tightrope.

I knew there had to be a better way. I just hadn't found it yet.

Then a Friend Got a Contract, and Everything Changed

About a year later, a friend of mine landed a contract to build a fashion e-commerce platform, but not just any platform. This one needed a loyalty system with a gamified experience built right into it. Points, rewards, levels, the works. He brought me on to handle the backend, and I knew from day one this wasn't going to be a simple project.

My first thought was Shopify. Use their API for the commerce side, then build the loyalty system as a headless layer on top. It made sense on paper. But when I actually started looking at what that would cost, both in API limitations and actual money, I knew I had to find something else.

That's when I stumbled across MedusaJS.

The timeline was tight. We didn't have months to figure things out, so I needed a tool that was quick to get running, flexible enough to handle custom business logic like gamification, and solid enough to avoid falling apart when the client wanted changes down the line. MedusaJS seemed to tick every box, so I went with it.

Look, Building E-Commerce from Scratch Is Harder Than People Admit

Before I get into MedusaJS specifically, I want to be honest about something, because I think a lot of developers underestimate what they're signing up for when they decide to go fully custom.

Product and inventory management alone is way more complex than it looks. You're not just storing items in a database. You're dealing with variants, stock levels per location, pricing rules that change based on customer groups, bundles, and more. One small tweak can ripple through your whole system in ways you didn't anticipate.

Then there's payments and shipping. Every provider has their own API with its own quirks and edge cases. I've seen a poorly handled webhook take down an entire checkout flow before, and it's not a fun conversation to have with a client.

And once you're past all that, you still have to think about scale. Will this hold up if traffic doubles? If the product catalog grows to 10,000 items? If a new region needs to be supported? These aren't hypotheticals; they're inevitabilities if the project succeeds.

The truth is, a lot of the core e-commerce logic has already been solved. When you build from scratch, you're not being clever. You're just doing extra work to arrive at the same destination.

So How Do You Actually Choose What to Use?

When I was scoping out the fashion project, I mapped out three realistic options.

The first was building from scratch again. I'd done it before, I knew the pitfalls, and honestly, I wasn't interested in going through that again. Full control, sure, but at what cost?

The second was going with a SaaS platform like Shopify or BigCommerce. Quick to spin up, reliable, tons of integrations. But the moment you need something custom, and with a gamified loyalty system we definitely did, you start hitting walls. And the pricing model isn't always friendly when you're building for a client on a fixed budget.

The third option was an open-source headless solution. That's where MedusaJS comes in. It gives you the commerce foundations that would take weeks to build yourself, while still letting you own the architecture and extend it however you need.

For this project, that third option was the only one that made sense.

What Actually Made MedusaJS Work for Us

I don't want to make this sound like an ad, so let me just be practical about what I noticed.

The headless architecture meant I could hook up whatever frontend the project needed without being forced into a specific stack. No monolithic walls to work around.

The core commerce features, products, variants, orders, and payments, were already there out of the box. That alone saved us weeks. I didn't have to build a cart system or figure out order state management from scratch. It was done, tested, and working.

The extensibility is where it really shone for this project, though. Because we were building a custom loyalty system, we needed to plug into things like order completion and customer activity without rewriting the core. Medusa's architecture made that feel natural rather than like a hack.

And when I got stuck, which happens, the documentation and community were actually helpful. That's not something I take for granted.

Okay, It Wasn't All Smooth Sailing

I want to be real here too, because I think a lot of "here's a tool I used" posts leave this part out.

MedusaJS has a learning curve. Not a brutal one, but it's there, and it requires you to actually think differently about how you structure your backend.

The first thing that tripped me up was the event-driven architecture. I was used to just stacking logic where it made sense inline. But Medusa works through events and subscribers; when an order is placed, you don't handle the side effects right there in the controller, you emit an event and react to it elsewhere. Once I stopped fighting that pattern and started leaning into it, everything felt cleaner. But that mental shift took a minute.

Then there's how the modules connect through what Medusa calls "links." Products, orders, customers, and payments are all separate modules with defined relationships. I initially wanted to treat it like one big coupled system, which is what I was used to. That instinct will get you into trouble. Once I respected the boundaries the framework was trying to draw, things clicked.

The service layer and dependency injection were also different from what I was used to. Instead of just importing something directly, you resolve it through the container. It feels a bit ceremonial at first, but it's there for a good reason; it keeps everything modular.

Integrating Paystack is probably the best example of all of this coming together. I didn't rewrite the checkout flow. I extended the payment provider and plugged into the existing workflow. The moment that worked, I finally understood what Medusa was going for: you extend it, you don't rewrite it. That's the whole philosophy.

Where I Landed

Looking back, the learning curve was really just about understanding how Medusa thinks about commerce architecture, not about fighting bad design. And compared to what I went through building from scratch that first time, it felt structured and manageable in a way that actually gave me confidence as the project grew.

If you're a developer working on anything beyond a basic storefront, something with custom business logic, unique integrations, or a client who's going to have evolving requirements, I'd genuinely recommend at least giving MedusaJS a look before you commit to building it all yourself.

You might be surprised how much ground it covers before you've even written a single line of custom code.

Have you worked with MedusaJS or gone through a similar journey choosing the right backend for an e-commerce project? I'd love to hear how it went. Drop a comment below.

Setting up typed environment variables in your project

code-with-onye — Sat, 31 Aug 2024 07:38:57 +0000

Have you ever found yourself struggling to remember the exact name of an environment variable you set? Perhaps you only recall that it starts with "N"? In such situations, wouldn't it be great to have autocompletion for your environment variables?

In this article i will show you how to set up typed environment variables in your next project, making your development process more efficient and error-resistant.

Why Type Your Environment Variables?

Typing your environment variables can:

Save time by providing autocompletion
Prevent errors caused by typos or incorrect variable names
Ensure all required variables are present
Provide type safety for your application

Now let's explore the steps to set up

1. Set Up Your Environment Variables
First, create a .env file in your project root with your environment variables:

NODE_ENV=development
DB_HOST=localhost
DB_USER=user1
DB_PASSWORD=test2345
DB_NAME=test
DB_PORT=5432
DATABASE_URL=postgresql://${DB_USER}:${DB_PASSWORD}@${DB_HOST}:${DB_PORT}/${DB_NAME}
SECRET_KEY=12372972979263737972
PAYSTACK_SECRET_KEY=sk_test_7393695925636

2. Install Dependencies
Install the necessary packages:

npm install dotenv dotenv-expand zod

3. Create the Environment Configuration File
Create a file named env.ts in your utils folder:

import { config } from "dotenv";
import { expand } from "dotenv-expand";
import { ZodError, z } from "zod";

const stringBoolean = z.coerce
  .string()
  .transform((val) => val === "true")
  .default("false");

const EnvSchema = z.object({
  NODE_ENV: z.enum(["development", "production", "test"]).default("development"),
  DB_HOST: z.string(),
  DB_USER: z.string(),
  DB_PASSWORD: z.string(),
  DB_NAME: z.string(),
  DB_PORT: z.coerce.number(),
  DATABASE_URL: z.string().url(),
  DB_MIGRATING: stringBoolean,
  DB_SEEDING: stringBoolean,
  SECRET_KEY: z.string().min(32),
  PAYSTACK_SECRET_KEY: z.string().startsWith("sk_"),
});


export type EnvSchema = z.infer<typeof EnvSchema>;
expand(config());

try {
  EnvSchema.parse(process.env);
} catch (error) {
  if (error instanceof ZodError) {
    const missingVars = error.issues.map((issue) => issue.path[0]).join(", ");
    throw new Error(`Missing or invalid environment variables: ${missingVars}`);
  }
  throw error;
}


export default EnvSchema.parse(process.env);

Using Your Typed Environment Variables

Now you can import and use your typed environment variables in your application:

import env from './utils/env';

console.log(env.DB_HOST);
console.log(env.DATABASE_URL);

By following these steps, you've set up a robust system for managing your environment variables with type safety and validation.

This approach will help you catch configuration errors early and make your development process smoother.

Thanks for reading✌️

A simple step by step guide to setup Eslint automation on your next big project

code-with-onye — Sat, 31 Aug 2024 07:33:02 +0000

As developers, we've all been there, you're looking through a project you wrote months ago, or you're diving into a new codebase, and everything seems jumbled. Imports are scattered, and the code structure is less than ideal. No joke when a code is crowded with imports that is not organised, looking through it, really affect our metal health.

Working with my backend engineering lead, I noticed that you can't just use imports haphazardly, it'll trigger an ESLint error. You need to follow specific formatting rules, including line spacing. This realization sparked an idea: why not share a step-by-step guide on setting up ESLint for a project?

In this article, I'll walk you through the process of setting up ESLint on a recent project. As a bonus, I'll show you how to implement automatic code reorganization when you save your file, ensuring your code always adheres to your ESLint rules.

Sounds awesome, right? Let's dive in!

Wait! Ask yourself

Why Organizing Imports Matters?

Before we get into the technical details, let's consider why organizing imports is crucial:

Readability: It becomes hard to quickly scan and understand what's being imported.
Maintenance: When you need to add or remove an import, it's not clear where it should go.
Consistency: Different team members might organize imports differently, leading to inconsistent code.
Debugging: Poorly organized imports can make it harder to spot issues or conflicts.

If you noticed since the begining of the article have been meationing eslint, eslint

What exactly is Eslint

ESLint is a tool that can check your code for errors and style issues.

Simple right .

So let's see how you can setup Eslint on your project

Step 1: Installing the Necessary Dependencies
First, we need to install ESLint and some additional packages. Open your terminal and type:

For a new node.js project

 npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-import eslint-import-resolver-typescript

For a next.js project you just have to install this plugin, because eslint have already be configured by NEXT.JS

npm install --save-dev @typescript-eslint/eslint-plugin

Step 2: Creating the ESLint Configuration File
Create a file named .eslintrc.json in your main project folder and add this content:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "import"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  ],
  "rules": {
    "import/newline-after-import": ["error", { "count": 1 }],
    "import/order": [
      "error",
      {
        "groups": [
          ["builtin", "external"],
          "internal",
          ["parent", "sibling", "index"]
        ],
        "newlines-between": "always",
        "alphabetize": {
          "order": "asc",
          "caseInsensitive": true
        }
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

If you're using Next.js, add this line to the "extends" section:

"next/core-web-vitals"

This configuration tells ESLint to:

Group your imports into three categories: built-in/external, internal, and relative.
Add a blank line between each group.
Sort the imports alphabetically within each group.
After the last import add a blank line

Step 3: Configuring TypeScript (if you're using it)
If you're using TypeScript, make sure your tsconfig.json file includes this:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

This helps ESLint understand any special import paths you might be using in your project

Step 4: Setting Up Your Code Editor
To make the most of ESLint, you'll want to set up your code editor to automatically fix import organization when you save a file. If you're using Visual Studio Code, you can do this by adding the following to your settings:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

Step 5: Adding a Shortcut Command
Lastly, let's add a command that you can run to check and fix all the files in your project at once. Open your package.json file and add this to the "scripts" section:

For Node.js

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

For Next.js

{
  "scripts": {
    "lint": "next lint",
    "lint:fix": "next lint --fix"
  }
}

Now you can run npm run lint in your terminal to check and fix all your files and npm run lint:fix to fix all eslint error.

So after setup all of this

What to Expect

You'll notice that your import statements are automatically organized when you save a file. Here's what it will look like:

First, you'll see imports from built-in Node.js modules and external packages you've installed.
Then, after a blank line, you'll see imports from other parts of your own project.
Finally, after another blank line, you'll see imports from the same folder or nearby folders.

All the imports within each of these groups will be in alphabetical order.

While we've focused on organizing imports, ESLint can do much more to help you write better code:

Catching Errors: It can spot potential errors in your code before you even run it.
Enforcing Style: It can ensure everyone on your team follows the same coding style.
Best Practices: It can encourage you to use recommended coding practices.
Customization: You can adjust the rules to fit your team's specific needs.

Conclusion:

Organizing your imports might seem like a small detail, but it's an important step towards creating cleaner, more maintainable code. By using ESLint to automate this process, you're freeing up mental energy to focus on the more important aspects of your project.

Remember, good code organization is about more than just making things look neat. It's about creating a codebase that's easier to understand, easier to maintain, and less prone to errors.

So take the time to set up ESLint in your project - your future self (and your team members) will thank you!

MongoDB Aggregation, is really powerful

code-with-onye — Sat, 08 Jun 2024 16:18:56 +0000

I was working with my backend colleague on a particular project, going through his code, and I was amazed by how clean and simple the codebase was. I was literally looking for the queries behind some of the implementations he did; the code was really so simple and clean. I was like "how did he do this?" until one very good day he told me to read about MongoDB Aggregation.

After reading and understanding how MongoDB aggregation works, I was really amazed, so I decided to write an article about it.

Before I get started, here is what you will be familiar with after reading this article:

What is aggregation in MongoDB
How does the MongoDB aggregation pipeline work
MongoDB aggregation pipeline syntax
Practical example of MongoDB aggregation

What is aggregation in MongoDB?

Aggregation is a way of processing a large number of documents in a collection by means of passing them through stages, and these stages are called a Pipeline. These stages in a pipeline can filter, sort, group, reshape, and modify documents, and do much more.

Key Point🎯

A pipeline can have one or more stages.

The order of these stages is important.

This aggregation happens within the database engine, enabling it to handle large datasets efficiently.

How Does the MongoDB Aggregation Pipeline Work?

Here is a diagram to illustrate a typical MongoDB aggregation pipeline:

Image Credit: studio3t

Let's understand each of the stages and what they do:

$match stage - It filters the documents we need to work with, those that fit our needs.
$group stage - this is where the aggregation happens. It groups documents by a specified key to perform calculations like sum, average, max, min, and so on.
$sort stage - this sorts the documents in ascending or descending order based on specified fields.

There are many more stages; we will explore some others in the example below.

Key Point🎯

Each stage acts upon the results of the previous stage.

There can be one or more stages in a pipeline, depending on what you are planning to achieve.

Now that we understand how the pipeline works, let's take a look at the syntax.

MongoDB Aggregate Pipeline Syntax

This is an example of how to build an aggregation query:
db.collectionName.aggregate(pipeline, options)

where collectionName – is the name of a collection,
pipeline – is an array that contains the aggregation stages,
options – optional parameters for the aggregation

This is an example of the aggregation pipeline syntax:

pipeline = [
        { $match : { … } },
        { $group : { … } },
        { $sort : { … } }
       ]

Let's now see a practical example of how MongoDB aggregation works.

Practical Example Using MongoDB Aggregation

In this example, we'll use a sample dataset of restaurant orders. The goal of this aggregation is to retrieve the average order total and most popular dish for each day of the week, specifically for dine-in orders. The output will be a set of documents containing the day of the week and the corresponding rounded average order total and most frequently ordered dish.

Let's approach this step by step:

Step 1: Filter data by order type

db.restaurantOrders.aggregate([
  { $match: { orderType: "dine-in" } }
])

The $match stage filters the data to include only documents where the orderType is "dine-in".

Step 2: Group data by day of the week and calculate averages and most popular dish

db.restaurantOrders.aggregate([
  { $match: { orderType: "dine-in" } },
  {
    $group: {
      _id: { dayOfWeek: { $dayOfWeek: "$orderDate" } },
      avgOrderTotal: { $avg: "$orderTotal" },
      dishes: { $push: "$mainDish" }
    }
  }
])

The $group stage groups the data by the day of the week of the orderDate, calculates the average order total, and creates an array of all main dishes ordered on that day.

Step 3: Calculate the most popular dish

db.restaurantOrders.aggregate([
  { $match: { orderType: "dine-in" } },
  {
    $group: {
      _id: { dayOfWeek: { $dayOfWeek: "$orderDate" } },
      avgOrderTotal: { $avg: "$orderTotal" },
      dishes: { $push: "$mainDish" }
    }
  },
  {
    $addFields: {
      popularDish: {
        $reduce: {
          input: "$dishes",
          initialValue: { name: "", count: 0 },
          in: {
            $cond: [
              { $gt: [{ $size: { $filter: { input: "$dishes", cond: { $eq: ["$$this", "$$value.name"] } } } }, "$$value.count"] },
              { name: "$$this", count: { $size: { $filter: { input: "$dishes", cond: { $eq: ["$$this", "$$this"] } } } } },
              "$$value"
            ]
          }
        }
      }
    }
  }
])

The $addFields stage adds a new field popularDish, which uses $reduce to iterate through the dishes array and find the most frequently occurring dish.

Step 4: Sort data by day of the week

db.restaurantOrders.aggregate([
  { $match: { orderType: "dine-in" } },
  {
    $group: {
      _id: { dayOfWeek: { $dayOfWeek: "$orderDate" } },
      avgOrderTotal: { $avg: "$orderTotal" },
      dishes: { $push: "$mainDish" }
    }
  },
  {
    $addFields: {
      popularDish: {
        $reduce: {
          input: "$dishes",
          initialValue: { name: "", count: 0 },
          in: {
            $cond: [
              { $gt: [{ $size: { $filter: { input: "$dishes", cond: { $eq: ["$$this", "$$value.name"] } } } }, "$$value.count"] },
              { name: "$$this", count: { $size: { $filter: { input: "$dishes", cond: { $eq: ["$$this", "$$this"] } } } } },
              "$$value"
            ]
          }
        }
      }
    }
  },
  { $sort: { "_id.dayOfWeek": 1 } }
])

The $sort stage sorts the data by the day of the week in ascending order.

Step 5: Project and format the output

db.restaurantOrders.aggregate([
  { $match: { orderType: "dine-in" } },
  {
    $group: {
      _id: { dayOfWeek: { $dayOfWeek: "$orderDate" } },
      avgOrderTotal: { $avg: "$orderTotal" },
      dishes: { $push: "$mainDish" }
    }
  },
  {
    $addFields: {
      popularDish: {
        $reduce: {
          input: "$dishes",
          initialValue: { name: "", count: 0 },
          in: {
            $cond: [
              { $gt: [{ $size: { $filter: { input: "$dishes", cond: { $eq: ["$$this", "$$value.name"] } } } }, "$$value.count"] },
              { name: "$$this", count: { $size: { $filter: { input: "$dishes", cond: { $eq: ["$$this", "$$this"] } } } } },
              "$$value"
            ]
          }
        }
      }
    }
  },
  { $sort: { "_id.dayOfWeek": 1 } },
  {
    $project: {
      _id: 0,
      dayOfWeek: {
        $switch: {
          branches: [
            { case: { $eq: ["$_id.dayOfWeek", 1] }, then: "Sunday" },
            { case: { $eq: ["$_id.dayOfWeek", 2] }, then: "Monday" },
            { case: { $eq: ["$_id.dayOfWeek", 3] }, then: "Tuesday" },
            { case: { $eq: ["$_id.dayOfWeek", 4] }, then: "Wednesday" },
            { case: { $eq: ["$_id.dayOfWeek", 5] }, then: "Thursday" },
            { case: { $eq: ["$_id.dayOfWeek", 6] }, then: "Friday" },
            { case: { $eq: ["$_id.dayOfWeek", 7] }, then: "Saturday" }
          ],
          default: "Unknown"
        }
      },
      avgOrderTotal: { $round: ["$avgOrderTotal", 2] },
      popularDish: "$popularDish.name"
    }
  }
])

The $project stage reshapes the output by excluding the _id field, converting the numeric day of the week to its string representation, rounding the average order total to two decimal places, and including only the name of the most popular dish.

This example demonstrates how MongoDB Aggregation can be used to process restaurant order data, grouping by day of the week, calculating averages, finding the most popular dish, and formatting the output. It showcases several aggregation stages and operators, providing insights that could be valuable for restaurant management and menu planning.

Conclusion

MongoDB Aggregation is a powerful and flexible tool that can streamline data processing workflows, reduce the complexity of application code, and enable an easy way to extract valuable insights from data more efficiently. Whether you're working with large amounts of data, complex data structures, or any other type of data, MongoDB Aggregation offers a robust set of capabilities to help harness the full potential of your data.

In our restaurant orders example, we've seen how we can use aggregation to:

Filter data ($match)
Group and calculate averages ($group)
Perform complex calculations ($addFields with $reduce)
Sort results ($sort)
Reshape and format output ($project)

These operations, when combined, allow us to transform raw data into meaningful insights that can drive business decisions. For instance, a restaurant owner could use this aggregation to understand which days are busiest, what dishes are most popular on different days, and how average order totals vary throughout the week.

Remember, this is just scratching the surface of what's possible with MongoDB Aggregation. As you become more comfortable with these concepts, you'll find that aggregation can be applied to solve a wide variety of data processing challenges efficiently and elegantly.

For more MongoDB aggregation operators and stages, I recommend checking out the official MongoDB documentation or resources like Studio 3T's knowledge base.

Thanks for reading!

Create Multilingual Websites with Ease Part1: A Step-by-Step Guide to Next.js and i18next Integration!

code-with-onye — Mon, 10 Apr 2023 10:04:28 +0000

A client asked me if I can add multiple languages to her website. I was like, "What! I haven't done something like this before." I was nervous initially, thinking it was going to be difficult to implement, but it wasn't. It was just easy to integrate using Next.js and i18next. If you have been finding a way to use multiple languages on your Next.js project, this article is going to guide you through every point to do it.

What is I18next

i18next is a popular internationalization framework for JavaScript that allows you to add multi-language support to your web applications. It provides a simple and powerful way to define translations and switch between different languages in your application.

But wait, first, what exactly is internationalization?

Well, internationalization is to make your application accessible and usable by people from different regions of the world, who speak different languages and have different cultural backgrounds.

Understanding what i18next is let's see how we can integrate it into your nextjs project.

First, let's create a new Next.js project by running the following command in your terminal:

npx create-next-app multilang

This will create a new Next.js project in a directory named multilang.
Navigate into the by running cd multilang

Next, since we are using nextjs, i18next have react hooks to use on react app called React-i18Next, to use it run the following command in your terminal:

npm install react-i18next i18next i18next-browser-languagedetector

This will install React-i18Next, i18next, and i18next-browser-languagedetector packages.

After installing create a new folder named locales in the root directory of your project. Inside the locales folder, create a new JSON file named en.json and ng-pidgin.json

locales/
-- en.json
-- ng-pidgin.json

in the en.json file add the following content:

{
  "intro": "Hey, am Trust a frontend developer and a technical writer"
}

in the ng-pidgin.json file add the following content:

{
  "intro": "Afa, i be Trust , i be frontend developer and i be still technical writer "
}

You can add as many languages as you want in the locale folder. For my client, I implemented Nigerian pidgin ng-pidgin.json, but feel free to create your own language file for any language you want to translate to, such as Spanish or French.

Next, let's update the _app.js file located in the pages directory. Replace the existing code with the following:

import { appWithTranslation } from 'next-i18next'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default appWithTranslation(MyApp)

Here, we have wrapped the MyApp component with the appWithTranslation higher-order component.

Now, let's create a new file named i18n.js in the root directory of your project. This file is used to configure i18next with Next.js.

Inside the i18n.js file, add the following code

import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import en from './locales/en.json'
import ngPidgin from './locales/ng-pidgin.json'

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
     'ng-PIDGIN': { translation: ngPidgin } 
    },
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  })

export default i18n

This code imports i18next, initReactI18next, LanguageDetector, and the translation file we created earlier en.json and ng-pidgin.json. It also initializes i18next with configuration options.

Now import the i18n configuration into _app.js file

import { appWithTranslation } from 'next-i18next'
import "../i18n";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default appWithTranslation(MyApp)

Finally we are done with the integration, now we can use the translations in our components. Import useTranslation hook from react-i18next and use it to translate the text.

For example, create a new file named index.js in the pages directory and add the following code:

import { useTranslation } from 'react-i18next'

function Home() {
  const { t, i18n } = useTranslation()

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng)
  }

  return (
    <div>
      <h1>{t('intro')}</h1>
      <button onClick={() => changeLanguage('en')} disabled={i18n.language === "en"}>English</button>
      <button onClick={() => changeLanguage('ng-PIDGIN')} disabled={i18n.language === "ng-PIDGIN">Nigerian Pidgin</button>
    </div>
  )
}

export default Home

This code imports useTranslation from react-i18next and uses it to translate the intro key from the translation file also the changeLanguage function is used to switch the language, from english to pidgin.

View the code

Want to know more on how to use i18next?

i8next documentation,
@codewithonye blog post

Conclusion

i18next is a powerful and flexible framework for adding multi-language support to your web application. It can help you reach a wider audience with different language backgrounds. With react-i18next, you can easily implement i18next in a Next.js project.

But that's not all! i18next offers a range of features, including the ability to manage all your languages on a dashboard instead of going to your JSON file for any changes you've made. This makes it much easier to keep track of your translations and make updates as needed.

Overall, I believe that with this guide, you will be able to implement i18next on your personal website or for any of your client who needs it.

Thanks for reading, and as always, feel free to reach out to me! 😊

TANStack Query: How It Changes the Way You Query APIs

code-with-onye — Sat, 18 Mar 2023 17:21:32 +0000

In today's world of web development, querying APIs has become a common task for developers. However, the process of making HTTP requests, handling responses, and dealing with data formatting can be cumbersome and error-prone. This is where TANStack Query comes into play.

TANStack Query is a lightweight JavaScript library that provides developers with a simple and intuitive API for querying APIs. It is based on the Fetch API and allows developers to write concise and declarative code for making HTTP requests and handling responses. This article will discuss how TANStack Query works, the way it changes the API querying process, and the benefits it offers.

How TANStack query works:

TANStack Query works by first checking the query cache [2] to determine if the data has already been fetched. If the data is not in the cache, or if the cached data is stale, TANStack Query sends an HTTP request to the API endpoint [3] to retrieve the data, which is then stored in the cache [2]. Finally, TANStack Query returns the data from the cache to the user [5].

Compared to traditional HTTP fetching, TANStack Query offers several advantages. It reduces the need for component-level state management and code repetition. By abstracting away the complexity of HTTP requests and response handling, TANStack Query simplifies the process of querying APIs and managing data in React applications. Additionally, by caching the query results, TANStack Query reduces network traffic and improves application performance.

To start using TANStack Query in your project, you need to initialize it. This involves setting up the query in your app.jsx file. Here are the steps you can follow:

Import the necessary components from the TANStack Query library using the following code:

import {
    QueryClient,
    QueryClientProvider,
    useQuery,
  } from '@tanstack/react-query'

Create a new instance of the QueryClient object, which will be used to manage the query cache:

const queryClient = new QueryClient()

Wrap your application component in a QueryClientProvider component, which provides the QueryClient instance to all child components:

export default function App() {
    return (
      <QueryClientProvider client={queryClient}>
        <Example />
      </QueryClientProvider>
    )
  }

You can now use the useQuery hook to make HTTP requests and handle responses.

For example, let's say we want to fetch a list of users from an API. Here's how we can use the useQueryhook :

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

export default function Users() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: async () => await axios.get("https://dummyjson.com/users"),
  });

  console.log(data.data.users);

  if (isLoading) {
    return <div>Loading...</div>;
  }

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

  return (
    <ul>
      {data.data.users.map((user) => (
        <li key={user.id} style={{ color: "black" }}>
          {user.firstName}
        </li>
      ))}
    </ul>
  );
}

This code defines a request to fetch data from the [https://dummyjson.com/users](https://dummyjson.com/users) users endpoint. The useQuery hook returns an object with three properties: data, error, and isLoading. The data property contains the response data, error contains any errors that occurred during the request, and isLoading is a boolean that indicates whether the request is still loading.

Declarative Data Fetching

TANStack Query also allows for declarative data fetching, which simplifies the process of handling data in a React application. With TANStack Query, data can be fetched and cached in a centralized location, reducing the need for component-level state management and code repetition.

The useQueryhook can be used to define a query and return a query object that can be used across multiple components. The useQueryhook accepts a query key queryKey , which is a string that uniquely identifies the query. The query key can be used to retrieve the query object from the cache.

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

export default function Users() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["users"],
    queryFn: async () => await axios.get("https://dummyjson.com/users"),
  });

  console.log(data.data.users);

  if (isLoading) {
    return <div>Loading...</div>;
  }

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

  return (
    <ul>
      {data.data.users.map((user) => (
        <li key={user.id} style={{ color: "black" }}>
          {user.firstName}
        </li>
      ))}
    </ul>
  );
}
}

function Posts() {
  const { data, error, isLoading } = useQuery({
    queryKey: ["posts"],
    queryFn:()=> axios.get('https://dummyjson.com/posts')
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

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

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

TANStack Query simplifies the process of querying APIs and managing data in React applications. With its declarative API and centralized state management system, TANStack Query allows developers to write concise and intuitive code for handling data fetching and caching. By abstracting away the complexity of HTTP requests and response handling, TANStack Query allows developers to focus on building great user experiences.

React Query also removes the need for useStateand useEffecthooks and replace them with a few lines of React Query logic.

If you’re interested to learn more, don’t forget to check out the React Query documentation

Enum : A Fun Way to Improved Code Readability and Quality 🌟🌟🌟

code-with-onye — Tue, 03 Jan 2023 09:45:06 +0000

Have you ever found yourself working on a project where you're constantly dealing😥 with a bunch of numerical constants that represent some concept or state in your code? If so, then you might have wished for a way to give these constants more meaningful names and make your code more readable and maintainable. Well, guess what? There's a way!🌝 It's called an enum, and it's a language construct in TypeScript that allows you to define a set of named constants.

Imagine you're working on a project for a fancy restaurant. Without enums, your code might look something like this:

function getMealStatus(status: number) {
  if (status === 0) {
    return 'Cooking';
  } else if (status === 1) {
    return 'Ready for pickup';
  } else if (status === 2) {
    return 'Delivered';
  } else {
    return 'Invalid';
  }
}

const mealStatus = getMealStatus(1);
console.log(mealStatus); // 'Ready for pickup'

But with enums, your code can be much more descriptive and fun:

enum MealStatus {
  Cooking = 0,
  ReadyForPickup = 1,
  Delivered = 2,
  Invalid = 3
}

function getMealStatus(status: MealStatus) {
  switch (status) {
    case MealStatus.Cooking:
      return 'Our chefs are hard at work cooking up a delicious meal for you!';
    case MealStatus.ReadyForPickup:
      return 'Your meal is ready for pickup! Come by and get it while it's hot.';
    case MealStatus.Delivered:
      return 'Your meal has been delivered to your doorstep! Bon appétit!';
    default:
      return 'Something went wrong. Please try again.';
  }
}

const mealStatus = getMealStatus(MealStatus.ReadyForPickup);
console.log(mealStatus); // 'Your meal is ready for pickup! Come by and get it while it's hot.'

Not only is this code more descriptive and easier to understand, it's also more fun to read and work with. And as an added bonus, enums can help catch mistakes at compile-time, saving you time and preventing bugs in your code.

So next time you're working with TypeScript, try using enums to add some fun and clarity to your code. Your fellow developers will thank you for the clear communication!

Follow me to learn more on Typescript

Twitter LinkedIn

Discover the magic of the TypeScript type system and how it works its magic on your code

code-with-onye — Fri, 30 Dec 2022 10:19:24 +0000

I've been diving into TypeScript for the past three days and one thing I've learned is that its type system is like a secret weapon🤯. By annotating variables, functions, and objects with their data types, you can catch errors before they even have a chance to cause trouble and make your code super reliable and easy to keep up-to-date.

In this article, I'm going to geek out about all the amazing features of TypeScript's type system. We'll dive into topics like declaring types, using type inference, and writing code that's super safe and secure thanks to its use of types.

Declaring Types

In TypeScript, we can declare the type of a variable by using a colon followed by the type name. For example:

let myNumber: number = 5;
let myString: string = 'Hello, world!';
let myBoolean: boolean = true;

In this example, we have defined three variables: myNumber, myString, and myBoolean. We have used the colon syntax to specify the types of these variables, showing that myNumber is a number, myString is a string, and myBoolean is a boolean.

We can also declare the type of an array using the Array type and indicating the type of the elements within brackets. For example:

let myNumbers: Array<number> = [1, 2, 3];
let myStrings: string[] = ['a', 'b', 'c'];

In these examples, we have declared two arrays: myNumbers and myStrings. myNumbers is an array of numbers, and myStrings is an array of strings.

Type Inference

Besides explicitly stating the type of a variable, TypeScript also has a feature called type inference which allows the compiler to automatically determine the type of a variable based on the value assigned to it. so cool 😎 right! Let's see an example

 let name = 'John'; // TypeScript infers the type to be string
let age = 30; // TypeScript infers the type to be number
let isCool = true; // TypeScript infers the type to be boolean

In this case, we haven't explicitly specified the types of the name, age, and isCool variables, but TypeScript is able to deduce their types based on the values they are assigned

Type inference is a handy feature that can save us from having to write out explicit type annotations in many situations. However, it's always a good idea to use explicit type annotations whenever possible, as they make the code more clear and easier to comprehend.

Type-Safe Code

One of the main advantages of using TypeScript is that it helps youwrite type-safe code. This means that the type system is used to make sure that variables are only used in ways that are consistent with their types.
Let's see an example:

let myNumber = 42;
myNumber = 'hello'; // error: cannot assign a string to a number

In this case, the type system will prevent a string from being assigned to a variable that has been declared as a number. This helps catch mistakes early on and can save time and effort in debugging.

Another way to write type-safe code in TypeScript is to use type guards. A type guard is a way to narrow the type of a value based on certain conditions. For example:

function isString(value: any): value is string {
  return typeof value === 'string';
}

let myValue: any = 'hello';
if (isString(myValue)) {
  console.log(myValue.toUpperCase()); // 'HELLO'
}

In this example, the isString function is used to determine if the value of myValue is a string. If it is, the toUpperCase method can be safely called on it. Otherwise, the code inside the if block will not be executed.

Conclusion

TypeScript's type system is like a superhero for your code! It helps you write code that's more dependable and easier to maintain. By specifying types, using type inference, and writing type-safe code, you get all the perks of static typing while still using the sweet, sweet syntax of JavaScript.

  Thanks 👍 for reading

A Simple Introduction to Typescript for JavaScript Dev

code-with-onye — Tue, 27 Dec 2022 08:53:13 +0000

As a JavaScript developer, you may have heard of TypeScript and are wondering what it is and how it differs from JavaScript. In this article, I will introduce TypeScript to JavaScript developers and provide examples to demonstrate its usefulness and differences from JavaScript.

What is TypeScript?

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, which means that any valid JavaScript code is also valid TypeScript code. However, TypeScript adds additional features to JavaScript, including optional static typing and class-based object-oriented programming.

Below 👇👇 is a diagrammatic explaination of typescript.

Why is TypeScript useful?

One of the main benefits of using TypeScript is that it allows developers to catch errors and bugs in their code at compile-time, rather than runtime. This can save a lot of time and effort in debugging and testing the code.

For example, consider the following JavaScript code:

function add(a, b) {
  return a + b;
}

console.log(add(1, 2)); // 3
console.log(add("1", 2)); // "12"

In this code, the add function expects two numbers as arguments and returns their sum. However, the second call to add passes a string and a number as arguments, and the result is a string concatenation instead of a sum. This error will only be caught at runtime, when the code is executed.

Now consider the following TypeScript code:

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(1, 2)); // 3
console.log(add("1", 2)); // Error: Argument of type '"1"' is not assignable to parameter of type 'number'.

In this code, we have added type annotations to the arguments and return value of the addfunction. This tells the TypeScript compiler that the add function expects two numbers as arguments and returns a number. When we try to pass a string and a number as arguments, the TypeScript compiler will catch the error and show a clear error message, allowing us to fix the error before the code is even executed.

TypeScript also makes it easier to write large and complex applications by helping developers to structure and organize their code more effectively. Its static typing system also enables better code completion and refactoring support in IDEs, making it easier for developers to write and maintain their code.

How does TypeScript differ from JavaScript?

As mentioned earlier, TypeScript is a strict syntactical superset of JavaScript, which means that it includes all the features of JavaScript and more. However, there are some key differences between the two languages:

Static typing: TypeScript introduces static typing, which means that developers can specify the type of a variable or function parameter. This can help to catch errors and bugs in the code at compile-time.
Classes and interfaces: TypeScript also supports class-based object-oriented programming, with the ability to define classes and interfaces. This can make it easier to organize and structure the code.
Decorators: TypeScript includes a feature called decorators, which are functions that can be applied to classes, properties, and methods to modify their behavior.

Conclusion

In conclusion, TypeScript is a powerful and useful language for JavaScript developers looking to improve the quality and maintainability of their code. Its static typing and class-based object-oriented programming features make it a great choice for large and complex applications, and its strict syntactical superset of JavaScript means that it is easy to learn for those familiar with the language. If you are a JavaScript developer looking to take your skills to the next level, kindly follow me to receive more content on typescript because I will be dropping a lot of content about typescript.

 Thanks 👍 for reading