Forem: Ifeanyi Chima

In Nextjs, you can have 2 types of components, namely (server) and (client) components. The server components will never run in the browser and they can be used to make calls to the backend or even directly to a DB. The client components can and will run in the browser, where you have access to localStorage and browser window, it is advisable to not have things such as API keys and secrets in the client components. To make a page a client component, you do this "use client".

File based routing

In Nextjs, you have "file-based routing" which means once a folder or file is created in /src/app directory it becomes a route that can be reached. example if I wanted a "community" route, I would create this /src/app/community/page.js. This will become a route that you can navigate to. Remember to add "use client", if you want the component to be a client component.

_components

In Nextjs, if you do not want certain components / pages that you create to become routes that can be accessed i.e You want to create components such as ToggleButton.jsx, Sidebar.jsx, NavbarLayout.jsx, Avatar.jsx etc. all of these are components that can be reused but I don't want them to become "routes", you can create a folder like this _components and every component you create inside that folder will never be route.

Fetch API

In Nextjs, if you want to make requests that involves API_KEYS or SECRETS to the backend or database, it is advisable to do that from a server component, and gone are the days of getServerSideProps, getStaticParams, and getStaticProps. now you can just use the native fetch API in Javascript to make those requests and you can mimic those behaviours using


const data = await fetch('https://api.example.com/data', {...options})

Here are some options.

Want fresh data every time? → cache: 'no-store' - this used to be getServerSideProps

Want cached data? → cache: "force-cache" - default behavior, similar to getStaticProps

Want periodic revalidation? → next: { revalidate: seconds } - this used to be getStaticProps with revalidate (ISR)

These 3 used to scare me so much, gosh !!!

route group

In Nextjs, if you have a bunch of files or folders and you want to group them for organization and readability, you can create a folder like this (docs) which will contain all of them to keep your workspace neat. e.g src/app/(docs)/content/page.js. This way you have many files in one place.

Thank you, Please follow me

Twitter

Navbar scroll event

Ifeanyi Chima — Sat, 19 Jul 2025 10:09:31 +0000

Today, I want to show you how I darken the navbar when a user scrolls on the website.

THE SECRET

I am using an event listener scroll which I attached to the navbar to listen for when the user scrolls beyond a certain screen size. This will allow the text on the navbar to be readable.

Using JavaScript, we add two classes to the navbar

bg-dark: this will give the navbar a dark background. I believe this is an in-built bootstrap class.
slow: this will add animation to make the navbar slowly darken.

HTML

<!--NavBar-->
<nav class="navbar navbar-dark py-3 navbar-expand-lg fixed-top">
    <div class="container">
        <a href="#" class="navbar-brand">
            <img src="./img/halo-logo.jpg" class="img-fluid logo" alt="">
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navmenu">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a href="#home" class="nav-link active">GAMES</a>
                </li>
                <li class="nav-item">
                    <a href="#news" class="nav-link">NEWS</a>
                </li>
                <li class="nav-item">
                    <a href="#about" class="nav-link">ESPORTS</a>
                </li>
                <li class="nav-item">
                    <a href="#occupation" class="nav-link">COMMUNITY</a>
                </li>
                <li class="nav-item">
                    <a href="#occupation" class="nav-link linkarrow">SUPPORT<i class="ri-arrow-right-up-line"></i></a>
                </li>
                <li class="nav-item">
                    <a href="#occupation" class="nav-link linkarrow">GEAR<i class="ri-arrow-right-up-line"></i></a>
                </li>
            </ul>
            <a href="#footer" class="btn btn-brand">GET HALO</a>
        </div>
    </div>
</nav>

CSS


.slow{
    @include transition-ease;
}

@mixin transition-ease{
    transition: all 1.4s ease;
}

JavaScript


const nav = document.querySelector("nav");

window.addEventListener("scroll", () => {
    if (window.scrollY > 100) {
        nav.classList.add("bg-dark", "slow")
    } else {
        nav.classList.remove("bg-dark", "slow")
    }
})

Explaination

we capture the navbar using DOM manipulation.
we add an event listener to the browser window to listen for when a user scrolls beyond 100 vh.
we add the classes "bg-dark" and "slow" to the navbar.

Thank You, Please Follow me.

Firebase: My negative Experience

Ifeanyi Chima — Sat, 05 Jul 2025 21:56:43 +0000

I am working on a website that will allow a user to login and upload images to his website through a dashboard.

Problem 1

The first issue that I ran into was firebase SDK. I could not use npm packages directly in HTML/CSS. I had to use firebase SDK like this:


import { initializeApp } from "https://www.gstatic.com/firebasejs/11.8.1/firebase-app.js";
import {getAuth, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.8.1/firebase-auth.js";

Here is a Fix:

Upgrade Firebase SDK - Make sure you're using the latest versions:

npm install firebase@latest

Problem 2


const firebaseConfig = {
    // authDomain: "oleru-young.firebaseapp.com",
    // storageBucket: "oleru-young.firebasestorage.app",
};

After enabling Storage, you'll see the bucket name in the Firebase Console. It will look like one of these:

oleru-young.appspot.com (older format)
oleru-young.firebasestorage.app (newer format)

This caused a lot of confusion, if you were wondering the newer format is the correct thing to follow.

Problem 3

CORS - I had to battle with this error


Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com/v0/b/oleru-young.appspot.com/o?name=uploads%2F11f20756a8694b63b7ee0645cde15e2e.jpg' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

means your browser is blocking the request to Firebase Storage due to a CORS (Cross-Origin Resource Sharing) issue. Here’s how to fix it.

Here is a fix

Step 1:

Create a cors.json file in your VScode project and add the following syntax

[
  {
    "origin": ["*"],
    "method": ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    "maxAgeSeconds": 3600,
    "responseHeader": ["Content-Type", "Authorization"]
  }
]

Step 2:

Using your terminal in VScode, you need to login to google cloud by using the terminal

gcloud auth login

If you're working on a project and want to set the active project after logging in, you can run:

gcloud config set project [PROJECT_ID]

Replace [PROJECT_ID] with your actual Google Cloud project ID.

CORS

Set the CORS policy for your project by running this


gcloud storage buckets update gs://[PROJECT_ID].firebasestorage.app --cors-file=cors.json

Problem 4

Firebase Storage Rules

You need to set the rules for the bucket. When you are creating the bucket for the first time. You need to choose test mode. This will allow read and write access to the bucket for up to 30 days.

A firebase bucket looks like this.

rules_version = '2';


service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

Use something permissive for testing (not production-safe):

Google Cloud Auth Issue

Ifeanyi Chima — Sun, 01 Jun 2025 12:10:16 +0000

Copying file://kitten.png [Content-Type=image/png]... ServiceException: 401 Anonymous caller does not have storage.objects.create access to the Google Cloud Storage object. Permission 'storage.objects.create' denied on resource (or it may not exist).

Steps to recreate it.

Having this issue while trying to copy a file to a new cloud storage bucket.

Download a cat image This will download the image for us.

wget https://cloud.google.com/storage/images/kitten.png

Try to copy the image to my cloud storage bucket

gsutil cp kitten.png gs://gcp-ifeanyi-tutorial

Now, we run into the issue stated above.

Steps to Resolve

gcloud auth login

Open your terminal and login to google cloud
Follow the prompt (Type Y for yes)
Copy the link provided in your browser
Select your google account and grant permission

After following the prompt you will be provided with a key that looks like this
4/9ANIR-c9k6BnlT ..........

Copy the key and paste it in your google cloud console
Try to run the previous command again

gsutil cp kitten.png gs://gcp-ifeanyi-tutorial

Load-balancing using docker and nginx

Ifeanyi Chima — Mon, 17 Mar 2025 16:07:07 +0000

Let me be clear this article is not a tutorial on NGINX or Docker. Just how to setup Load-balancing using both (Nginx and Docker). I will be assuming pre-requiste knowledge of both subjects.

In this article, we will be looking at how to achieve load-balancing using nginx and docker. well, what exactly is nginx and what is docker ?

Understanding Load-balancing - A website can have millions of requests, which can cause a bottleneck and make the latency (response time) slow. We need a way to handle the millions of request, to do this we need to increase the number of servers.

NGINX

Nginx - is a web server that serves us web content.

Nginx can forward a user request to an available server. This is called (load balancing). Nginx chooses which server will handle user request at each time.

nginx.conf - the file to setup nginx


http {

upstream backendserver {
        # here, we can specify all the backend url, that we have.

        server 127.0.0.1:9000;
        server 127.0.0.1:9001;
        server 127.0.0.1:9002;
    }

server {
listen 8080;

location / {
            proxy_pass http://backendserver/;
        }

}

}

cd nginx - nginx

To start the nginx server

Docker

Docker - is a way to package your application, as a developer. This way another developer can quickly setup same application on their system without running into a lot of issues and errors along the way. A dockerfile comes with all of the necessary instructions needed to setup said application.

Now, Docker can host a nodejs web-server inside of a container for you, this way we can run multiple servers at once, just by spinning up multiple instances of docker containers.

I ran into a major problem when using dockerfile to spin up my containers.

Problem 1

The index.js file has changed, do I need to rebuild the dockerfile and if I do that, would I need to re-create new containers based off on the new docker image

Answer

The answer to that question was Yes, if the index.js file has changed, you need to rebuild the Docker image to include the updated code. After rebuilding the Docker image, you will need to recreate the containers based on the new image to run the updated code.

Doing this everytime feels repetitive and tiring.

Problem 2

Is there a way to automatically restarting your container every time a file has changed without the need to rebuild your image each time ?

Answer

The answer to that question was Yes, we have two ways or options to do that

Docker Compose
Mount Volumes

I would be looking into the second option for today, you can use Docker volumes to mount your local directory into the container. This way, any changes you make to your local files will be reflected in the running container without needing to rebuild the image.

So, we need a dockerfile that would contain information about the web-server.

# Uses node version 16 as our base image
FROM node:16

# Create app directory inside the docker image
WORKDIR /usr/src/app

# Copy package.json into the app directory of the docker image
COPY package.json ./

# Install dependencies
RUN npm install

# Copy our entire code into the app directory of the docker image
COPY . .


# Install nodemon globally
RUN npm install -g nodemon

# expose port
EXPOSE 3000

# Run app
CMD ["nodemon", "--legacy-watch", "index.js"]

I need to explain the dockerfile a bit

# Run app
CMD ["nodemon", "--legacy-watch", "index.js"]

This will ensure that nodemon automatically restarts the container when we make changes to our nodejs code locally.

Now, we can carry on.

Build the Docker image:

 docker build -t node-application .

Run the container with a volume mount:

We would have two docker containers running, so we would run this command twice.

(-e CONTAINER_NAME=web1): This is the environment variable to help us distinguish between each container.
(--name web1): This is the name of the container.
(-p 9001:3000): This is port-mapping, we expose the container's port (3000) to our local computer port (9000).

docker run -d -p 9001:3000 --name web1 -v C:\Users\PC\Documents\Documents\2025\nginx_tuts\server:/usr/src/app -e CONTAINER_NAME=web1 node-application

Nodejs

const express = require("express");

const app = express();

app.get("/", (req, res) => {
  console.log(`say nigga ${process.env.CONTAINER_NAME} hit`);
  res.send(`Hello World from ${process.env.CONTAINER_NAME}`);
});


app.listen(3000, () => {
  console.log("Server is running on port 3000");
});

This is how my basic nodejs-express server was setup

Thank you, please follow me

How to connect Git to GitHub

Ifeanyi Chima — Thu, 20 Feb 2025 21:47:43 +0000

I bought a new laptop and I need to configure it properly. In this series, I will guide you, so that you can use if for programming.

In this article, I will guide you on how to install Git bash (adding a user account) and how to connect to GitHub so that you can upload (push) to your cloud GitHub Repo

1. Installing Git Bash:
Go to the official Git website: https://git-scm.com/downloads

2. Setting up a user account in Git:
After installation, open Git Bash and set up your user account with the following commands:

git config --global user.name "Barack Obama"
git config --global user.email "barack@gmail.com"

3. Connecting to GitHub:

Generate an SSH key (if you don't already have one):

ssh-keygen -t ed25519 -C "barack@gmail.com"

Press Enter to accept the default file location. You can choose to set a password or leave it empty. Now, you can start the SSH agent:

eval "$(ssh-agent -s)"

Add your SSH key to the agent:

ssh-add ~/.ssh/id_ed25519

run the following command and then copy the output, this is your public SSH key

cat ~/.ssh/id_ed25519.pub

Add the SSH key to your GitHub account:

Go to GitHub.com and sign in
Click on your profile picture in the top right and select "Settings"
In the left sidebar, click on "SSH and GPG keys"
Click "New SSH key"
Give your key a title (e.g., "My New Laptop")
Paste your public key into the "Key" field
Click "Add SSH key"

Hopefully, after following the steps stated above, you have successfully linked your computer to GitHub. To test this out, run a git clone command to clone a GitHub repository.

Clone your repository
If you do not have any repository, please feel free to clone mine.

git clone git@github.com:MasterIfeanyi/ifeanyi-coinnest-html.git

Summary

Now you should be all set up with Git Bash, connected to GitHub.

Thank you, please follow me

How to set execution policy for npm start

Ifeanyi Chima — Wed, 19 Feb 2025 15:28:19 +0000

I bought a new laptop and I need to configure it properly. In this series, I will guide you, so that you can use if for programming.

I got an error when I tried to run npm start

This error was thrown because I had not enabled running of scripts by the computer.

Here is a step-by-step guide to enable running of scripts.

To set the execution policy for npm start in PowerShell, you need to adjust the PowerShell execution policy to allow scripts to run. Here's how:

1. Open PowerShell as Administrator:

Press Win + X and select Windows PowerShell (Admin).

2. Check the Current Execution Policy:

Type the following command and press Enter:

Get-ExecutionPolicy

If the result is Restricted, it means script execution is disabled.

3. Set the Execution Policy:

To allow local scripts to run and require downloaded scripts to be signed, use the following command:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

Type Y and press Enter to confirm the change.

4. Verify the New Execution Policy:

Run Get-ExecutionPolicy again to ensure the policy is set to RemoteSigned.

5 Now you should be able to run npm start without encountering the execution policy error.

Hacktoberfest 2024 - Join Now

Ifeanyi Chima — Mon, 07 Oct 2024 10:02:35 +0000

Are you a developer looking to make a positive impact on the tech world?

Hacktoberfest is back, and it's your chance to contribute to open source projects and connect with like-minded developers from around the globe.

What is Hacktoberfest?

Hacktoberfest is a month-long celebration of open source software. It's a global initiative that encourages developers to contribute to open source projects and helps to foster a more inclusive and collaborative community.

How to Participate:

Sign up on GitHub: Create a GitHub account or log in to your existing one.
Register for Hacktoberfest: Visit the official Hacktoberfest website and register for the event.
Contribute to Open Source Projects: Find projects that align with your interests and skills. Make meaningful contributions, such as fixing bugs, adding new features, or improving documentation.
Submit Pull Requests: Once you've made your contributions, submit pull requests to the project repositories. Make sure your pull requests adhere to the project's guidelines and coding standards.

Contributing
If you want to find a project you can contribute to on GitHub, you can use this query on GitHub to find projects.

label:hacktoberfest is:issue is:open

Why Contribute to Open Source?

Learn and Grow: Contributing to open source projects is a great way to learn new skills, improve your coding abilities, and gain valuable experience.
Earn Rewards: Hacktoberfest offers participants the opportunity to earn exclusive swag and prizes.

Start with my own Projects

Let's create something amazing together!

THOR

How to use React-owl-carousel in 2025

Ifeanyi Chima — Fri, 07 Jun 2024 09:18:02 +0000

While I was working on creating a website. I wanted to implement a sliding carousel feature.

I love Owl Carousel, so I settled on using it.

Installation

You need to install packages such as @rollup and react-owl-carousel

npm i react-owl-carousel @rollup/plugin-inject

jQuery

You need to inject jQuery into the project. If you are using vite, which is a javascript bundler, here is how you do it.

This should be done in your config.js


import { defineConfig } from 'vite'
import inject from '@rollup/plugin-inject';
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [

    react(),

    inject({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),

  ],
})

App.jsx

You need to make jQuery available to the entire App/Project


import './App.css'
import * as $ from "jquery" // ---> this line
import Header from "./components/Header"
import Hero from "./components/Hero"

function App() {


  return (
    <>
      <Header />
      <Hero />
      <Simple />
      <Footer />
    </>
  )
}

export default App

Owl Carousel CSS

You need to link the owl-carousel css code in your main.jsx


import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

import 'owl.carousel/dist/assets/owl.carousel.css'; {/* this line */}
import 'owl.carousel/dist/assets/owl.theme.default.css'; {/* this line */}

Component

You can use the Owl carousel component in your React component. You pass in options to modify how the component behaves.


import OwlCarousel from 'react-owl-carousel';


const Features = () => {

  const options = {
    responsive: {
      0: {
        items: 1,
      },
      400: {
        items: 1,
      },
      600: {
        items: 1,
      },
      700: {
        items: 1,
      },
      800: {
        items: 2,
      },
      1000: {
        items: 3,
      }
    },
    nav: false,
    dots: true
  }


  return (
    <OwlCarousel className='owl-theme section' loop margin={20} autoplay {...options}>

      {/* 1 */}
      <div className="review item">
        <h3>24 hour up-time</h3>
        <p>The API will always be available with zero latency and little to no down-time</p>
        <div className="review-img">
          <img src="/trust.svg" alt=""/>
        </div>
      </div>

      {/* 2 */}
      <div className="review item">
        <h3>Global coverage</h3>
        <p>View the latest live exchange rates for all the crypto-currencies available worldwide.</p>
        <div className="review-img">
          <img src="/globe.svg" alt="" />
        </div>
      </div>


      {/* 3 */}
      <div className="review item">
        <h3>Great Documentation</h3>
        <p>To assist developers, we have curated a world-className documentation for the API</p>
        <div className="review-img">
          <img src="/shield.svg" alt="" className="trust" />
        </div>
      </div>
    </OwlCarousel>
  )
}

export default Features

Thank you, Please follow me

Build Nodejs API with Redis, MongoDB in Docker

Ifeanyi Chima — Mon, 01 Apr 2024 19:23:56 +0000

The benefits of docker can not be understated as it facilitates software development regardless of whatever platform a developer is using.

I built an API using Nodejs, Redis and MongoDB and I wanted to containerise the API using Docker.

Here are the processes or steps, I followed to be able to containerise the API. Here is a Github link to the API.

Redis

Change the API code

We need to change our nodejs API code to configure the redis client to be able to connect to a redis server running in the docker container.


// src/index.js

export const client = createClient({
    socket: {
        port: 6379,
        host: "redis"
    }
});

Download a redis image:

docker pull redis

Create a container: We are going to create a redis container from the image we just downloaded.

Port-forwarding, when you want to create a container remember to implement port-forwarding because when you have a container running, the ports you declare in your code while running in the container will only refer to the port of the container and not the host (local) machine where docker is running on.

docker run -d -p 6379:6379 --name redisCont redis

MongoDB

We will repeat the same process for mongoDB.

Change the API code:


export const connectDB = async () => {
    try {
        await mongoose.connect('mongodb://mongo/instaCartDB', { // ->this line
            useUnifiedTopology: true,
            useNewUrlParser: true
        }) 
    } catch (error) {
        console.error(error)
    }
}

note

We change the initial hostname (localhost or 127.0.0.1) to mongo in the connection URI, this is to allow the DNS resolve to the appropriate container on docker.

Download a mongoDB image: for some reason, mongoDB version 5.0 docker image was throwing an error of WARNING: MongoDB 5.0+ requires a CPU with AVX support, and your current system does not appear to have that!.

Hence, I had to downgrade to mongoDB version 4.4.6 docker image.

docker pull mongo:4.4.6

Create a Container: We are going to create a mongoDB container from the image we just downloaded. Also, remember to implement port-forwarding here as well.

docker run -d -p 27017:27017 --name mongodbCont mongo:4.4.6

Dockerfile

So, after building the API I created a dockerfile and then I built a docker image using the following syntax.


FROM node:20-alpine

LABEL maintainer="chima@gmail.com"

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3500

CMD ["node", "index.js"]

docker build -t prod-API-image .

Finally, running containers

You have to link your redis container and mongoDB to your Nodejs API using docker.

docker run -d --link redisCont:redis --link mongodbCont:mongo -p 4000:4000 --name my-nodejs-api prod-API-image

References

How to dockerize a nodejs api

Getting started with docker

Dockerize a Node.js app connected to MongoDb