DEV Community: Chidubem Okoli

Set Up SSH Keys on Windows: A Step-by-Step Guide

Chidubem Okoli — Tue, 02 Sep 2025 08:08:57 +0000

Secure Shell (SSH) is a security protocol that creates a highly secure connection between your computer and GitHub. It uses a pair of cryptographic keys—a public key you share and a private key you keep safe—to verify your identity.

The main benefit of using SSH keys is convenience and security. Once set up, you can connect to GitHub to push and pull code without having to enter your username and personal access token every time.

Here's a step-by-step guide on how to set up your SSH keys in a Windows environment.

Step 1: Check for Existing SSH Keys
First, let's see if you already have an SSH key pair. It's good practice to avoid creating new ones if you don't have to.

a) Open PowerShell (press the Windows key, type PowerShell, and press Enter).

b) The default directory is /.ssh. Run the following command to list files in the .ssh directory, which is where keys are typically stored:

ls -a ~/.ssh

c) Look for a pair of files named something like id_rsa and id_rsa.pub, or id_ed25519 and id_ed25519.pub. If you see a .pub file, you already have a key and can skip to Step 3.

Alternatively, you can get the key by typing into the powershell terminal

cat id_ed25519.pub

Step 2: Generate a New SSH Key Pair

If you don't have an existing key, you'll need to create one. We'll generate a modern and secure Ed25519 key.

a) In your PowerShell terminal, run the following command. Make sure to replace "your_email@example.com" with the email address associated with your GitHub account.

ssh-keygen -t ed25519 -C "your_email@example.com"

b) The command will prompt you to choose a location to save the key. The default location (~/.ssh/id_ed25519) is perfect, so just press Enter.

c) Next, you'll be asked to enter a passphrase. 🔐

A passphrase adds an extra layer of security; if someone gains access to your computer, they still can't use your key without knowing the passphrase.
It's highly recommended to use one, but you can leave it blank by pressing Enter twice.

> Enter passphrase (empty for no passphrase): [Type a passphrase]
> Enter same passphrase again: [Type passphrase again]

You've now created two files in your ~/.ssh directory: id_ed25519 (your private key) and id_ed25519.pub (your public key). Never share your private key!

Step 3: Add Your SSH Key to the ssh-agent
The ssh-agent is a background program that securely stores your private key and manages its passphrase so you don't have to re-enter it constantly.

a) First, ensure the ssh-agent service is running. This command will start it if it isn't active.

Start-SshAgent

b) Now, add your private SSH key to the agent.

ssh-add ~/.ssh/id_ed25519

c) If you created a passphrase in the previous step, you will be prompted to enter it now.

Step 4: Add Your Public SSH Key to GitHub
Now you need to tell GitHub about your public key so it can grant you access.
a) Now you need to copy your public SSH key. To do this, we’re going to use a command called cat to read the file to the console.

cat ~/.ssh/id_ed25519.pub

b) Open your browser and navigate to GitHub.

Click your profile picture in the top-right corner, then click Settings.
In the left sidebar, click SSH and GPG keys.

c) Click the New SSH key button.

d) In the Title field, give your key a descriptive name, like "My Windows Laptop" or "Work PC".

e) Click inside the Key field and paste your key by pressing Ctrl + V.

f) Finally, click Add SSH key. You may be asked to enter your GitHub password to confirm.

Step 5: Test Your SSH Connection
Let's make sure everything is working correctly.

a) Back in your PowerShell terminal, run this command:

ssh -T git@github.com

b) You may see a warning about the authenticity of the host. This is normal for the first connection.

The authenticity of host 'github.com (IP ADDRESS)' can't be established.
ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
Are you sure you want to continue connecting (yes/no/[fingerprint])?

Type yes and press Enter.

c) If everything is set up correctly, you'll see a welcome message with your username! 🎉

Hi your-username! You've successfully authenticated, but GitHub does not provide shell access.

You're all set! You can now clone, pull, and push to your GitHub repositories using SSH without needing to enter your credentials every time.

How I Fixed Firebase’s “Unauthorized Domain” Error While Building Resumpire

Chidubem Okoli — Wed, 09 Jul 2025 14:52:58 +0000

The Problem:

I was deep into building resumpire.vercel.app (a resume builder app) when I hit a wall. Firebase kept rejecting my authentication requests with an “Unauthorized Domain” error.

At first, I was running through all the usual suspects:

Maybe I broke something in my codebase?
Could there be a dependency version conflict?
Is there a typo in my config?

After scouring my codebase trying to find the bug, I finally spotted the issue.
Turns out, the issue was much simpler.

The Culprit: Firebase’s Authorized Domain List
Firebase Authentication only allows requests from domains you explicitly authorize. That means:

If you’re testing locally, you must add http://localhost (or your custom dev URL) to Firebase’s Authorized Domains list.

If you’re deploying, your live domain (e.g., resumpire.vercel.app) needs to be added too.

My deployed domain resumpire.vercel.app wasn't in the Firebase Authorized Domains list. I'd only added localhost during development.

How I Fixed It

Opened Firebase Console → Authentication → Settings
Scrolled to “Authorized Domains”
Added my production domain (resumpire.vercel.app)
Reloaded the app → Auth worked instantly

Lesson learned: Always check the docs (and the obvious settings) first.

Why This Matters
This wasn’t just about fixing an error—it reinforced a bigger lesson:

Small oversights cause big blockers.
Reading docs > guessing.
Every error is an avenue to learn and grow which makes you a better dev.

How I Built an AI-Powered Text Processor Using Chrome AI API.

Chidubem Okoli — Thu, 27 Mar 2025 08:40:36 +0000

Introduction

When I first discovered the Chrome AI API, I recognized its potential immediately. The ability to integrate AI-powered text processing directly into a web app—without requiring a backend—opens up new possibilities for seamless user experiences. Using React and TailwindCSS, I built a practical AI Text Processor capable of summarizing, translating, and detecting languages entirely in the browser.

In this guide, I’ll walk you through:
✔ Why the Chrome AI API is a game-changer
✔ Step-by-step setup (including troubleshooting tips)
✔ How I built the UI with React & TailwindCSS
✔ Lessons learned and where to go next

Setup & Prerequisites

Before diving in, you’ll need:

1) Comply with Google’s AI Policies

Ensure your use case follows Google’s Generative AI Prohibited Use Policy.

2) Install Chrome Canary

Download Chrome Canary (v129.0.6639.0 or newer). Why Canary? The API is experimental and only available here for now.

3) Check Storage Requirements

Minimum 22GB free storage. If storage drops below 10GB, Chrome automatically deletes the model.

4) Enable the Summarization API

Open chrome://flags/#summarization-api-for-gemini-nano
Select Enabled
Relaunch Chrome

5) Force-Download the AI Model

Open DevTools (F12) and run:

await ai.summarizer.create(); // Triggers model download await ai.summarizer.capabilities(); // Check status
Repeat the second command until it returns "readily" (~3-5 mins).

Stuck? If you see:

"The model was available but there was no execution config available for the feature."

Wait 24 hours and retry (Google rolls out access gradually).

Troubleshooting Tip: For full documentation, check Chrome’s AI API Guide here.

Why the Chrome AI API?

This API brings serverless AI to the browser with:
✅ No backend needed – Runs entirely client-side.
✅ Blazing fast – Responses in milliseconds.
✅ Privacy-focused – No data sent to third-party servers.
✅ Easy integration – Just call ai. methods like translate() or summarize().

Project Features

The AI Text Processor includes:

Text Input - A responsive text area for content entry
Language Detection - Automatic identification of input text language
Text Summarization - Concise distillation of key information
Multilingual Translation - Conversion between supported languages
Accessible Interface - Screen reader compatible with keyboard navigation
Error Handling - Graceful failure modes and user feedback

Tech Stack

React – UI components & state management.
TailwindCSS – Rapid styling.
Chrome AI API – ai.summarizer, ai.translator, ai.detector.

Building the App

1) Initialize the Project

npm create vite@latest ai-text-processor --template react cd ai-text-processor npm install

2) Add TailwindCSS

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Configure tailwind.config.js:

export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: {} }, plugins: [], };

Add to index.css:

@tailwind base; @tailwind components; @tailwind utilities;

3) Create the UI
A simple layout with:

A textarea for input.

Buttons for actions (Summarize/Translate/Detect).

A results panel (conditional rendering with error handling).

4) Integrate the Chrome AI API

const handleSummarize = async () => { try { const summary = await ai.summarizer.summarize(text); setResult(summary); } catch (error) { setResult("Error: " + error.message); } };

Future Improvements

More languages – Expand translation support.

Offline mode – Cache results for poor connectivity.

Custom prompts – Let users tweak summarization style.

Conclusion

The Chrome AI API opens up exciting possibilities for browser-based AI apps. While still experimental, it’s a glimpse into a future where frontend devs can leverage AI without backend complexity.

Try the demo & code

GitHub Repo Link here
Live Link here
Note: This implementation is currently available only for desktop platforms

Recreating the Interswitch Homepage with React and TailwindCSS.

Chidubem Okoli — Tue, 14 Jan 2025 13:24:30 +0000

Introduction

Recreating a modern, visually appealing landing page is always an exciting challenge. This week, I focused on building a replica of the Interswitch homepage using React and TailwindCSS. This article provides a technical walkthrough of the process, from project setup to implementing reusable components and styling. Here's how I approached it:

Project Setup with Vite

Vite has become my go-to tool for React projects due to its blazing-fast build times and simplicity. The setup process involved:

npm create vite@latest interswitch-clone --template react
cd interswitch-clone
npm install

With the development server running, I was ready to start coding.

Structuring Components

Breaking the homepage into reusable components was essential for maintainability and scalability. Below are a few key components I implemented.

NavBar Component

import { useState } from "react";
import { FaBars, FaTimes } from "react-icons/fa";
import { FiChevronDown } from "react-icons/fi";

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const navLinks = [
    { title: "About Us", hasDropdown: true },
    { title: "What We Do", hasDropdown: true },
    { title: "Financial Inclusion", hasDropdown: false },
    { title: "Corporate Responsibility", hasDropdown: false },
    { title: "News & Insights", hasDropdown: false },
  ];

export default Navbar;

Stats Component

const Stats = () => {
  return (
    <div className="bg-blue-50 py-12">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col gap-8">
          <div className="flex flex-col md:flex-row items-start gap-8">
            <h2 className="text-3xl md:text-4xl font-semibold text-gray-900 flex-1">
              Pushing the boundaries of innovation to deliver payment solutions that enable commerce across Africa
            </h2>
            <div className="flex-1 flex flex-col gap-4">
              <p className="text-xl text-gray-700">
                Bespoke payment solutions for your modern lifestyle, business collections, disbursements, and payment processing.
              </p>
              <button className="bg-blue-950 text-white px-6 py-3 rounded-md hover:bg-blue-900 transition w-fit">
                Learn More
              </button>
            </div>
          </div>
export default Stats;

Styling with TailwindCSS

TailwindCSS made styling the components seamless. By leveraging utility classes, I could focus on functionality without writing custom CSS. For example, the hero section below uses Tailwind’s gradient and typography utilities to create an eye-catching design.

const Hero = () => {
  return (
    <div className="text-blue-950 pt-6 relative">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h1 className="text-2xl md:text-7xl mb-6 mt-16 font- text-blue-950">
              The Gateway To Africa&apos;s Payment Ecosystem
            </h1>
            <p className="text-xl md:text-xl mb-8 text-black-200">
              We create and sustain a payment ecosystem that helps 
  commmerce evolve, businesses grow and individuals thrive.
            </p>
          </div>
       </div>
     </div>
  </div>


export default Hero;

Key Takeaways

Componentization: Breaking the UI into reusable components ensured better maintainability.
TailwindCSS: The utility-first approach made styling intuitive and efficient.
Vite: Its fast build times improved the development experience.

Conclusion

Recreating the Interswitch homepage was a rewarding experience that solidified my understanding of React and TailwindCSS. By leveraging modern tools and best practices, I built a scalable and visually appealing landing page. If you’re working on a similar project or have questions, let’s connect in the comments!

Elevate Your JavaScript Journey: Tackling Projects and Unlocking Features 🚀

Chidubem Okoli — Thu, 05 Dec 2024 17:04:36 +0000

JavaScript is an ever-evolving journey where each project adds a new layer to your skills. Whether you're building a ticketing system or adding functionality to a to-do list, there's always something new to learn! Let me walk you through my recent experiments, lessons, and insights.

Building a Ticketing System 🎟️

When working on a ticket system, I wanted to level it up by allowing users to input any number of tickets instead of relying on predefined buttons. The goal was simple: improve flexibility while keeping the system intuitive.

Here’s what I learned:

DOM Manipulation Is Key: Capturing input values dynamically and using them effectively in your JavaScript logic is vital.

Validations Matter: When you let users enter values, ensure you're checking for edge cases like negative numbers or empty inputs.

Iterate & Improve: Building on the foundational ticket counter I developed earlier, I realized how important it is to refactor code for scalability.
If you're considering a project like this, start small. Add basic functionality, then challenge yourself to build on top of it.

Adding Delete Functionality to a To-Do List ✔️❌

To-do lists are a staple project for beginners—and for good reason! They offer a practical way to learn about adding and removing elements from the DOM. Recently, I wanted to add a delete button to each item dynamically.

My Approach:

Generate Buttons on Item Creation: When the user adds a new task, a delete button is created alongside it.

Add Event Listeners Dynamically: I attached an event listener to each button to handle the deletion logic.

Parent-Child DOM Interaction: Using parentElement, I ensured clicking the delete button would remove its corresponding list item.
Here’s a snippet of the core idea:

function addTask(taskText) {

  const li = document.createElement("li");
  li.textContent = taskText;

  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "Delete";


  deleteBtn.addEventListener("click", () => {
    li.remove();
  });

  li.appendChild(deleteBtn);
  document.querySelector("#task-list").appendChild(li);
}

With this approach, I learned how important it is to structure your DOM interactions cleanly and avoid cluttered logic.

Lessons Learned 🧠

1.Experimentation Drives Learning

Projects like these reinforce that theory is nothing without practice. By experimenting with features, I gained a deeper understanding of DOM manipulation, event listeners, and JavaScript logic.

2.Simple Features, Big Impact

The smallest changes—like a delete button—can significantly enhance your project's user experience. Don't underestimate the value of small wins!

3.Learn in Layers

Building on previous projects is the best way to reinforce your skills. I started with a basic ticket counter, then expanded it. Similarly, I took my to-do list from "add-only" to "add-and-delete."

What's Next?🔮

JavaScript is all about iteration. I’m excited to explore more advanced concepts like input validations, animations, and even local storage to persist data between sessions.

If you're on a similar journey, start small and stay consistent. Every project you complete is another step forward.

Let me know in the comments—what’s your favorite beginner-friendly JavaScript project?

Happy coding! 🚀

Installing And Running NPM Packages Using The Terminal

Chidubem Okoli — Mon, 04 Nov 2024 08:57:52 +0000

When working on a JavaScript project, chances are you'll need to install and use npm (Node Package Manager) packages.

npm is essential for managing libraries and tools that enhance your development process. If you're new to this, here's a step-by-step guide to installing and running npm packages using the terminal.

Prerequisites
Install Node.js: Ensure that the recent version of Node.js is installed on your machine, as npm comes bundled with it. You can check if it's installed by running:

node -v

and

npm -v

If you don't have it installed, download it from https://nodejs.org/https://nodejs.org/ and follow the installation instructions.

After confirming it is successfully installed, create a folder for your project or navigate to an existing one.

Initialize The Project

To start using npm, you need a package.json file, which tracks the project's dependencies and scripts. You can create one by running:

npm init

You’ll be prompted with some basic questions (like project name, version, description, etc.). You can either answer each or press Enter to accept the defaults.
Alternatively, you can use npm init -y to create a default package.json file without prompts.

Installing npm Packages

With npm, you can install packages either globally or locally to your project.

Local Installation: Installs the package in the project directory and adds it to your package.json.

npm install package-name
This installs the package locally. You'll find it under the node_modules folder, and it will be listed in your package.json file.

Global Installation: Installs the package globally on your system, making it available from any directory.

npm install -g package-name

This installs the package globally, allowing you to run the package commands directly in any project without needing to install it locally.

Using npm Scripts to Run Commands

Scripts defined in package.json can simplify common tasks like running tests or starting the server. In your package.json, there’s a "scripts" section where you can define custom commands.

Example:

"scripts": { "start": "node index.js", "test": "echo \"Error: no test specified\" && exit 1" }
In this example:

"start" will run "node index.js".
You can replace "test" or "start" with other custom scripts.

To run a script, use:

npm run script-name

Running Installed Packages from the Terminal

If you installed a package globally, you can use it directly in the terminal.
For locally installed packages, use npx, which comes bundled with npm:
npx package-name
Example:

npx create-react-app my-app
This command runs the create-react-app package without needing to install it globally.

Updating and Removing Packages

To update a package, use:
npm update package-name
To remove a package, use:

npm uninstall package-name
This command will remove the package from the node_modules folder and from package.json.

Conclusion
By understanding these basic npm commands, you can confidently install, run, and manage packages in any Node.js project.