Navigating the SMMA Waters: A Software Engineer's Side Hustle

Mazin Ashfaq — Sun, 15 Oct 2023 02:02:19 +0000

The world of software engineering is full of challenges and exciting new problems to solve. However, sometimes the skills we hone in one area can open unexpected doors in others. That's precisely what happened when I ventured into the realm of digital marketing.

A New Challenge Begins

A favor for a lawyer friend, in the form of a website, was my first foray into this world. It was familiar territory but with a fresh twist. As word got out, more requests trickled in. While building these sites, I spotted an opportunity to streamline the process.

Enter Mango Dev

Why not focus on what I'm best at: understanding clients' needs and creating a vision? I realized I could delegate the execution part to professionals, and in doing so, Mango Dev took shape. It’s not just about building websites, but about creating digital solutions tailored for each client.

Growing Pains

Of course, no new venture is without its challenges. Finding the right talent to uphold Mango Dev's standards took time. Similarly, reaching out to potential clients and establishing a foothold was a learning curve.

Modern Tools for Modern Problems

In searching for solutions, I explored several tools to enhance lead generation and outreach. Go High Level was one that stood out. As a software engineer, the potential of AI in streamlining these processes also caught my attention. It's an avenue I'm keen on diving deeper into.

Furthermore, I'm now in the process of producing content related to marketing. It's not just about showcasing what Mango Dev can do but also sharing insights and knowledge with a wider audience.

Looking Ahead

Mango Dev has grown from a simple idea to a reality. From my initial steps as a software engineer building websites to managing an agency, it's been a rewarding journey. And it's just the beginning.

For those in the tech industry looking to branch out, remember: that sometimes, the most unexpected diversions lead to the most fulfilling adventures.

Handling `multipart/form-data` in Next.js

Mazin Ashfaq — Sat, 14 Oct 2023 23:48:47 +0000

When working with Next.js, handling file uploads can become a bit tricky, especially when dealing with multipart/form-data. In this guide, I'll explain how I integrated Fastify, Multer, and Axios to effectively handle these file uploads and interact with an external API.

1. Why the need for Fastify and Multer?

Next.js's default body parser doesn't handle multipart/form-data out of the box. Fastify is a web framework that can be easily integrated with Next.js for enhanced request processing. On the other hand, Multer is a middleware for Express.js (and Fastify with the right plugins) that makes it easy to handle multipart/form-data.

2. Setting up Fastify with Multer:

Firstly, you'll need to install necessary packages:

npm install multer fastify-multipart

To use them with Fastify:

import fastifyMultipart from 'fastify-multipart';

const server = fastify();
server.register(fastifyMultipart);

3. Configuring the Next.js API Route:

Now, let's set up the Next.js API route:

import multer from 'multer';

const storageConfig = multer.memoryStorage();
const upload = multer({ storage: storageConfig });

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(req, res) {
  upload.single('file')(req, null, async (err) => {
    if (err) {
      return res.status(500).json({ error: 'Upload error.' });
    }

    const file = req.file;
    const formData = new FormData();
    formData.append('file', file.buffer, { filename: file.originalname, contentType: file.mimetype });

    try {
      const response = await axios.post('YOUR_EXTERNAL_API_ENDPOINT', formData, {
        headers: formData.getHeaders(),
      });
      res.status(200).json(response.data);
    } catch (error) {
      res.status(500).json({ error: 'External API error.', details: error.message });
    }
  });
}

Conclusion:

This method provides a streamlined way to handle file uploads in Next.js, allowing you to focus more on other aspects of your application. Integrating Fastify and Multer takes care of the heavy lifting, making it simpler to manage multipart/form-data and interact with external services.

Remember to replace 'YOUR_EXTERNAL_API_ENDPOINT' with the actual endpoint of the external API you're working with. Happy coding!

DEV Community: Mazin Ashfaq