DEV Community: Salihu Kutiriko Abubakar

insible app

Salihu Kutiriko Abubakar — Wed, 06 Aug 2025 11:45:06 +0000

🔍 𝗙𝗶𝘅𝗶𝗻𝗴 𝗜𝗻𝘃𝗶𝘀𝗶𝗯𝗹𝗲, 𝗨𝗻𝗰𝗹𝗶𝗰𝗸𝗮𝗯𝗹𝗲 𝗨𝗜 𝗶𝗻 𝗮 𝗡𝗲𝘅𝘁𝗷𝘀 + 𝗦𝗵𝗮𝗱𝗖𝗡 𝗔𝗽𝗽 (1)

Salihu Kutiriko Abubakar — Wed, 06 Aug 2025 05:03:33 +0000

𝖱𝖾𝖼𝖾𝗇𝗍𝗅𝗒, 𝖨 𝗋𝖺𝗇 𝗂𝗇𝗍𝗈 𝖺 𝗌𝗍𝗋𝖺𝗇𝗀𝖾 𝖴𝖨 𝖻𝗎𝗀 𝗐𝗁𝗂𝗅𝖾 𝖻𝗎𝗂𝗅𝖽𝗂𝗇𝗀 𝖺 𝖭𝖾𝗑𝗍.𝗃𝗌 𝖺𝗉𝗉 𝗐𝗂𝗍𝗁 𝖲𝗁𝖺𝖽𝖢𝖭 (𝗏𝟢 𝗏𝗂𝖺 𝖵𝖾𝗋𝖼𝖾𝗅 𝖠𝖨).

𝖯𝖺𝗋𝗍𝗌 𝗈𝖿 𝗍𝗁𝖾 𝗌𝖼𝗋𝖾𝖾𝗇 𝗐𝖾𝗋𝖾 𝗎𝗇𝖼𝗅𝗂𝖼𝗄𝖺𝖻𝗅𝖾 — 𝗎𝗇𝗅𝖾𝗌𝗌 𝖨 𝗌𝖼𝗋𝗈𝗅𝗅𝖾𝖽 𝗌𝗅𝗂𝗀𝗁𝗍𝗅𝗒. 𝖨𝗍 𝗅𝗈𝗈𝗄𝖾𝖽 𝖿𝗂𝗇𝖾 𝗏𝗂𝗌𝗎𝖺𝗅𝗅𝗒, 𝖻𝗎𝗍 𝗌𝗈𝗆𝖾𝗍𝗁𝗂𝗇𝗀 𝗂𝗇𝗏𝗂𝗌𝗂𝖻𝗅𝖾 𝗐𝖺𝗌 𝖻𝗅𝗈𝖼𝗄𝗂𝗇𝗀 𝗂𝗇𝗍𝖾𝗋𝖺𝖼𝗍𝗂𝗈𝗇.

𝖳𝗎𝗋𝗇𝗌 𝗈𝗎𝗍, 𝗍𝗁𝖾 𝖼𝗎𝗅𝗉𝗋𝗂𝗍 𝗐𝖺𝗌 𝖺 𝗁𝗂𝖽𝖽𝖾𝗇 𝗈𝗏𝖾𝗋𝗅𝖺𝗒 𝗌𝗂𝗍𝗍𝗂𝗇𝗀 𝗈𝗇 𝗍𝗈𝗉 𝗈𝖿 𝗍𝗁𝖾 𝗉𝖺𝗀𝖾, 𝗂𝗇𝗍𝖾𝗋𝖼𝖾𝗉𝗍𝗂𝗇𝗀 𝖼𝗅𝗂𝖼𝗄𝗌 𝗂𝗇 𝖺 𝗇𝗈𝗇-𝗈𝖻𝗏𝗂𝗈𝗎𝗌 𝗐𝖺𝗒.

𝖧𝖾𝗋𝖾'𝗌 𝖺 𝖻𝗋𝖾𝖺𝗄𝖽𝗈𝗐𝗇 𝗈𝖿 𝗍𝗁𝖾 𝗂𝗌𝗌𝗎𝖾, 𝗁𝗈𝗐 𝖨 𝖽𝖾𝖻𝗎𝗀𝗀𝖾𝖽 and fix it.

🧩 𝖳𝗁𝖾 𝖲𝗒𝗆𝗉𝗍𝗈𝗆
𝟣. 𝖨 𝖼𝗈𝗎𝗅𝖽𝗇'𝗍 𝖼𝗅𝗂𝖼𝗄 𝗈𝗇 𝗌𝗈𝗆𝖾 𝗉𝖺𝗋𝗍𝗌 𝗈𝖿 𝗍𝗁𝖾 𝖺𝗉𝗉, 𝗅𝗂𝗄𝖾 𝖻𝗎𝗍𝗍𝗈𝗇𝗌, dropdown 𝗈𝗋 𝖼𝖺𝗋𝖽𝗌.

𝟤. 𝖡𝗎𝗍 𝗂𝖿 𝖨 𝗌𝖼𝗋𝗈𝗅𝗅𝖾𝖽 𝗃𝗎𝗌𝗍 𝖺 𝗅𝗂𝗍𝗍𝗅𝖾, 𝗍𝗁𝗈𝗌𝖾 𝖾𝗅𝖾𝗆𝖾𝗇𝗍𝗌 𝖻𝖾𝖼𝖺𝗆𝖾 𝖼𝗅𝗂𝖼𝗄𝖺𝖻𝗅𝖾.

𝟥. 𝖳𝗁𝖾𝗋𝖾 𝗐𝖾𝗋𝖾 𝗇𝗈 𝗏𝗂𝗌𝗂𝖻𝗅𝖾 𝗈𝗏𝖾𝗋𝗅𝖺𝗒𝗌 𝗈𝗋 𝗆𝗈𝖽𝖺𝗅𝗌 𝗈𝗉𝖾𝗇 - 𝗌𝗈 𝗇𝗈𝗍𝗁𝗂𝗇𝗀 𝗈𝖻𝗏𝗂𝗈𝗎𝗌 𝗐𝖺𝗌 𝗂𝗇 𝗍𝗁𝖾 𝗐𝖺𝗒.

🕵️‍♂️ 𝖣𝖾𝖻𝗎𝗀𝗀𝗂𝗇𝗀 𝗍𝗁𝖾 𝖣𝖮𝖬
𝖳𝗈 𝖿𝗂𝗇𝖽 𝗍𝗁𝖾 𝖼𝗎𝗅𝗉𝗋𝗂𝗍, 𝖨 𝖺𝖽𝖽𝖾𝖽 𝗍𝗁𝗂𝗌 𝗅𝗂𝗍𝗍𝗅𝖾 𝗍𝗋𝗂𝖼𝗄 𝗍𝗈 𝗆𝗒 𝗀𝗅𝗈𝖻𝖺𝗅 𝖢𝖲𝖲:

/* 𝘏𝘪𝘨𝘩𝘭𝘪𝘨𝘩𝘵 𝘢𝘭𝘭 𝘥𝘪𝘷𝘴 𝘸𝘪𝘵𝘩 𝘢 𝘴𝘶𝘣𝘵𝘭𝘦 𝘰𝘶𝘵𝘭𝘪𝘯𝘦 */
𝙙𝙞𝙫 {
 𝙤𝙪𝙩𝙡𝙞𝙣𝙚: 𝟣𝙥𝙭 𝙙𝙖𝙨𝙝𝙚𝙙 𝙧𝙜𝙗𝙖(𝟮𝟱𝟱, 𝟬, 𝟬, 𝟬.𝟮);
}

𝖳𝗁𝗂𝗌 𝗁𝖾𝗅𝗉𝖾𝖽 𝗆𝖾 𝗌𝖾𝖾 𝗂𝗇𝗏𝗂𝗌𝗂𝖻𝗅𝖾 𝖾𝗅𝖾𝗆𝖾𝗇𝗍𝗌 𝗈𝗇 𝗍𝗁𝖾 𝗉𝖺𝗀𝖾.

𝖠𝗇𝖽 𝗌𝗎𝗋𝖾 𝖾𝗇𝗈𝗎𝗀𝗁, 𝖨 𝖿𝗈𝗎𝗇𝖽 𝗍𝗁𝗂𝗌:

<𝙙𝙞𝙫 𝙘𝙡𝙖𝙨𝙨="𝙛𝙞𝙭𝙚𝙙 𝙯-𝟱𝟬𝟬 𝙛𝙡𝙚𝙭 𝙛𝙡𝙚𝙭-𝙘𝙤𝙡 𝙜𝙖𝙥-𝟤 𝙢𝙖𝙭-𝙬-𝙢𝙙 𝙬-𝙛𝙪𝙡𝙡 𝙥-𝟦 𝙩𝙤𝙥-𝟬 𝙧𝙞𝙜𝙝𝙩-𝟬"></𝙙𝙞𝙫>

• 𝖨𝗍 𝗐𝖺𝗌 𝖺 𝗱𝗶𝘃 𝗐𝗂𝗍𝗁 𝗽𝗼𝘀𝗶𝘁𝗶𝗼𝗻: 𝗳𝗶𝘅𝗲𝗱, 𝗆𝖾𝖺𝗇𝗂𝗇𝗀 𝗂𝗍 𝗌𝗍𝖺𝗒𝗌 𝗌𝗍𝗎𝖼𝗄 𝗂𝗇 𝗉𝗅𝖺𝖼𝖾 𝗈𝗏𝖾𝗋 𝗍𝗁𝖾 𝗉𝖺𝗀𝖾.

• 𝖨𝗍 𝗁𝖺𝖽 𝖺 𝗁𝗂𝗀𝗁 𝘇-𝗶𝗻𝗱𝗲𝘅 𝗈𝖿 𝟱𝟬𝟬, 𝗌𝗈 𝗂𝗍 𝗐𝖺𝗌 𝗌𝗂𝗍𝗍𝗂𝗇𝗀 𝗈𝗇 𝗍𝗈𝗉 𝗈𝖿 𝗆𝗒 𝖼𝗈𝗇𝗍𝖾𝗇𝗍.

• 𝖡𝗎𝗍 𝗂𝗍 𝗁𝖺𝖽 𝗇𝗈 𝖼𝗈𝗇𝗍𝖾𝗇𝗍 𝖺𝗍 𝖺𝗅𝗅 — 𝖼𝗈𝗆𝗉𝗅𝖾𝗍𝖾𝗅𝗒 𝗂𝗇𝗏𝗂𝗌𝗂𝖻𝗅𝖾, 𝗒𝖾𝗍 𝖻𝗅𝗈𝖼𝗄𝗂𝗇𝗀 𝗂𝗇𝗍𝖾𝗋𝖺𝖼𝗍𝗂𝗈𝗇.

𝖳𝗁𝗂𝗌 𝗄𝗂𝗇𝖽 𝗈𝖿 𝗱𝗶𝘃 𝗂𝗌 𝗈𝖿𝗍𝖾𝗇 𝗅𝖾𝖿𝗍 𝖻𝖾𝗁𝗂𝗇𝖽 𝖻𝗒 𝖼𝗈𝗆𝗉𝗈𝗇𝖾𝗇𝗍𝗌 𝗅𝗂𝗄𝖾:
• 𝖳𝗈𝖺𝗌𝗍𝖾𝗋𝗌, 𝗆𝗈𝖽𝖺𝗅𝗌, 𝗈𝗋 𝖽𝗋𝖺𝗐𝖾𝗋𝗌

🛠 Quick 𝖥𝗂𝗑:

/* 𝘍𝘪𝘹 𝘧𝘰𝘳 𝘪𝘯𝘷𝘪𝘴𝘪𝘣𝘭𝘦 𝘰𝘷𝘦𝘳𝘭𝘢𝘺𝘴 𝘣𝘭𝘰𝘤𝘬𝘪𝘯𝘨 𝘪𝘯𝘵𝘦𝘳𝘢𝘤𝘵𝘪𝘰𝘯 */
𝙙𝙞𝙫.𝙛𝙞𝙭𝙚𝙙.𝙯-𝟱𝟬𝟬:𝙚𝙢𝙥𝙩𝙮 {
  𝙥𝙤𝙞𝙣𝙩𝙚𝙧-𝙚𝙫𝙚𝙣𝙩𝙨: 𝙣𝙤𝙣𝙚 !𝙞𝙢𝙥𝙤𝙧𝙩𝙖𝙣𝙩;
}

𝖳𝗁𝗂𝗌 𝗍𝖾𝗅𝗅𝗌 𝗍𝗁𝖾 𝖻𝗋𝗈𝗐𝗌𝖾𝗋: 𝖨𝖿 𝗍𝗁𝖾𝗋𝖾'𝗌 𝖺𝗇 𝖾𝗆𝗉𝗍𝗒 𝗱𝗶𝘃 𝗍𝗁𝖺𝗍’𝗌 𝖿𝗂𝗑𝖾𝖽 𝖺𝗇𝖽 𝗓-𝗂𝗇𝖽𝖾𝗑𝖾𝖽 𝟱𝟬𝟬, 𝗃𝗎𝗌𝗍 𝖽𝗈𝗇’𝗍 𝗅𝖾𝗍 𝗂𝗍 𝖻𝗅𝗈𝖼𝗄 𝗉𝗈𝗂𝗇𝗍𝖾𝗋 𝖾𝗏𝖾𝗇𝗍𝗌.

✅ 𝖨𝗇𝗌𝗍𝖺𝗇𝗍𝗅𝗒, 𝖺𝗅𝗅 𝗉𝖺𝗋𝗍𝗌 𝗈𝖿 𝗍𝗁𝖾 𝖺𝗉𝗉 𝖻𝖾𝖼𝖺𝗆𝖾 𝖼𝗅𝗂𝖼𝗄𝖺𝖻𝗅𝖾 𝖺𝗀𝖺𝗂𝗇.

#2 Resolving Server Side Multer diskStorage destination errors on production environment (vercel)

Salihu Kutiriko Abubakar — Wed, 07 Aug 2024 15:15:32 +0000

Introduction
When deploying Node.js applications to production environments such as Vercel, you might encounter issues with file uploads using Multer. One common error is related to the diskStorage destination, which often occurs due to the read-only file system in such environments.

In this post, we'll explore a solution to this problem by using in-memory storage with Multer and uploading files directly to a cloud service (like Cloudinary).

//Previous Code with Error

//multerConfig.js
const multer = require('multer');
// Set up Multer for file upload
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // Directory to save uploaded files
  },
  filename: (req, file, cb) => {
    cb(null, `${file.originalname}`); // File naming convention
  },
});
const uploads = multer({ storage });
module.exports = uploads;
//Profile Upload Route
// In your routes file
router.post('/profile/profile_upload', uploads.single('photo'), profile_upload);
//photo is the key or fieldname from the client-side
//Profile Upload Function
const profile_upload = asyncHandler(async (req, res) => {
  try {
    const filePath = req.file.path;
    const userId = req.user._id;

    // Upload the image to Cloudinary with user ID as part of the public ID or metadata
    const uploadResult = await cloudinary.v2.uploader.upload(filePath, {
      asset_folder: 'upload_profile',
      resource_type: 'image',
      public_id: `${userId}`,
    });

    // Clean up the uploaded file from the server
    fs.unlinkSync(filePath);

    const profile_image = {
      public_id: uploadResult.public_id,
      url: uploadResult.secure_url
    };

    const userImage = await UserImage.create({
      user_id: userId,
      profile_image
    });

    res.status(201).json(userImage);
  } catch (error) {
    console.error(error);
    res.status(500).send('Failed to upload image.');
  }
});

//Solution to the Problem

// multerConfig.js
const multer = require('multer');
const storage = multer.memoryStorage();
const uploads = multer({ storage });
module.exports = uploads;
//Updated Profile Upload Function
const profile_upload = asyncHandler(async (req, res) => {
  try {
    const file = req.file;
    const userId = req.user._id;

    if (!file) {
      return res.status(400).send('No file uploaded.');
    }

    // Upload the file buffer directly to Cloudinary
    const uploadResult = await new Promise((resolve, reject) => {
      const uploadStream = cloudinary.v2.uploader.upload_stream({
        asset_folder: 'upload_profile',   // Optional: specify a folder for the image
        resource_type: 'image',
        public_id: `${userId}`,     // Set the public_id for the image
      }, (error, result) => {
        if (error) {
          reject(error);
        } else {
          resolve(result);
        }
      });

      // Write the buffer to the stream
      uploadStream.end(file.buffer);
    });

    const profile_image = {
      public_id: uploadResult.public_id,
      url: uploadResult.secure_url
    };

    const userImage = await UserImage.create({
      user_id: userId,
      profile_image
    });

    res.status(201).json(userImage);
  } catch (error) {
    console.error(error);
    res.status(500).send('Failed to upload image.');
  }
});

This approach ensures that we can handle file uploads in environments like Vercel without running into file system issues. By using in-memory storage and uploading directly to a cloud service, we bypass the limitations of a read-only file system.
With this solution, you can deploy your application to Vercel and handle file uploads without any errors. Happy coding!

#1 Understanding Functions in JavaScript

Salihu Kutiriko Abubakar — Sun, 04 Aug 2024 09:23:58 +0000

Introduction
Functions are a fundamental building block in JavaScript, allowing you to write reusable and modular code. A function is a block of code designed to perform a particular task. It helps in organizing code and making it reusable.

//Function Syntax
function functionName(parameters) {
 // code to be executed 
}
//Function Declaration
function greet() {
 console.log('Hello, world!'); 
}
//Function Expression
const greet = function() {
 console.log('Hello, world!'); 
}
//Arrow Functions
//Arrow functions, introduced in ES6, provide a shorter syntax.
const greet = () => {
 console.log('Hello, world!'); 
}
//Parameters
//Functions can take parameters, which are values you pass to the function.
//They are also dynamic and reusable
const greet = function(name) {
 console.log('Hello, ' + name + '!'); 
}
greet('Alice'); // Output: Hello, Alice!
greet('Mike'); // Output: Hello, Mike!
//Default Parameter
//Functions can take default parameters.
const greet = function(name = 'Guess') {
 console.log('Hello, ' + name + '!'); 
}
greet(); // Output: Hello, Guess!
//If greet('Alice') contains a value, then the value takes priority.
//Output: Hello, Alice
//Function return value
//Functions can return values using then 'return' statement.
const add = (a,b) => {
 return a + b; 
}
add(5, 3)//Output: 8

Functions are powerful tools for writing clean and efficient code. Keep practicing and experimenting with different types of functions.

One Byte Explainer Challenge solution(Recursion)

Salihu Kutiriko Abubakar — Tue, 18 Jun 2024 13:35:40 +0000

This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.

Explainer

Additional Context

Recursion is a computer programming technique where a function solves a problem by calling smaller versions of itself. It is crucial in computer science for tasks like sorting and traversing data structures, allowing smooth and efficient operations.