DEV Community: sahil

How I Created an AI-Powered Code Editor in Node.js Using Gemini

sahil — Sun, 18 May 2025 16:20:51 +0000

Over the past few months, it became pretty normal to hear about AI agentic workflows. I was getting at least two notifications a day about them from almost every social media platform. So, I decided to dive in and try things out myself.

After reading some blogs and articles, I realized that everyone was building AI-based services. So,I decided to build my own AI-powered code editor, inspired by tools like Cursor

What I Built

A Node.js-based CLI tool powered by Google's Gemini, capable of turning natural language prompts into real code, directory structures, and package setups.

Example: Create a server for a to-do application
→ This tool will:

Create files and folders

Initialize package.json and install external packages

Write actual runnable code

Tech Stack

Node.js
Google Generative AI (Gemini API) – For generating code from prompts (free to use)
readline-sync – For CLI input
fs – For file manipulation
path – For resolving file paths
child_process – For running shell commands

Getting Started

First, initialize your Node.js project:

npm init -y

Then, install the required packages:

npm install readline-sync @google/generative-ai

Import all required modules:

const readlineSync = require("readline-sync");
const fs = require("fs");
const path = require("path");
const { GoogleGenerativeAI } = require("@google/generative-ai");
const { exec } = require("child_process");

Setting Up Gemini

const API_KEY = "YOUR_GEMINI_API_KEY";
const genAI = new GoogleGenerativeAI(API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-2.0-flash" });

Core Functionalities

1. Create Directory

function createDirectory(directoryName) {
  if (!directoryName) return;
  if (!fs.existsSync(directoryName)) {
    fs.mkdirSync(directoryName, { recursive: true });
    console.log(`✅ Created directory: ${directoryName}`);
  } else {
    console.log(`⚠️ Directory already exists: ${directoryName}`);
  }
}

What it does: Checks if a directory exists, and if not, creates it recursively.

2. Create File

function createFile(fileName) {
  if (!fileName) return;
  const dir = path.dirname(fileName);
  if (dir !== "." && !fs.existsSync(dir)) {
    fs.mkdirSync(dir, { recursive: true });
  }
  if (!fs.existsSync(fileName)) {
    fs.writeFileSync(fileName, "");
    console.log(`✅ Created file: ${fileName}`);
  } else {
    console.log(`⚠️ File already exists: ${fileName}`);
  }
}

What it does: Ensures the file path exists and then creates an empty file if it doesn't already exist.

3. Write AI-Generated Code

async function writeCode(fileName, description, language) {
  if (!fileName || !description) return;

  const prompt = `
Generate clean, production-ready code based on this description in:
"${description} in ${language}"

Respond with code only, no explanation. Include internal comments if necessary.
`;

  const result = await model.generateContent(prompt);
  const codeText = result.response.text().trim();
  const codeMatch = codeText.match(/```
{% endraw %}
(?:\w+)?\n([\s\S]*?)\n
{% raw %}
```/);
  const finalCode = codeMatch ? codeMatch[1] : codeText;

  fs.writeFileSync(fileName, finalCode);
  console.log(`✅ Code written to: ${fileName}`);

  console.log(`Preview:`);
  const lines = finalCode.split("\n").slice(0, 10);
  console.log(lines.join("\n"));
  if (finalCode.split("\n").length > 10) {
    console.log("... (truncated)");
  }
}

What it does: Sends the prompt to Gemini, receives the code, extracts it, and writes it to the specified file. Also prints a preview.

4. Run Package Manager Commands

async function cliExec(path, command) {
  exec(`cd ${path} && ${command}`, (err, stdout, stderr) => {
    if (err) {
      console.error(err);
      return;
    }
    console.log(stdout);
  });
}

What it does: Runs shell commands (like npm install) in the specified directory using child_process.exec.

Prompt Engineering

async function getInstructionsFromGemini(input) {
  const prompt = `
You are a smart assistant for a coding CLI tool. Your base language is JS. Interpret the following user request:

"${input}"

Return a JSON array of actions like:

[
  { "action": "createDirectory", "directoryName": "folder_name" },
  { "action": "createFile", "fileName": "path/to/file.js" },
  { "action": "writeCode", "fileName": "path/to/file.js", "description": "description", "language": "JavaScript" }
]

Only respond with the JSON array. No explanations, no code blocks.
`;

  const result = await model.generateContent(prompt);
  const raw = result.response.text().trim();

  try {
    const jsonMatch = raw.match(/```
{% endraw %}
(?:json)?\s*([\s\S]*?)\s*
{% raw %}
```|([\s\S]*)/);
    const jsonString = jsonMatch ? jsonMatch[1] || jsonMatch[2] : raw;
    return JSON.parse(jsonString);
  } catch (err) {
    console.error(`Failed to parse Gemini response: ${raw}`);
    return null;
  }
}

What it does: Converts the natural language user prompt into a structured array of actions by prompting Gemini with clear JSON output instructions.

Executing Actions

async function executeAction(action) {
  switch (action.action) {
    case "createDirectory":
      createDirectory(action.directoryName);
      break;
    case "createFile":
      createFile(action.fileName);
      break;
    case "writeCode":
      await writeCode(action.fileName, action.description, action.language);
      break;
    case "cliExec":
      await cliExec(action.path, action.command);
      break;
    default:
      console.log(`Unknown action: ${action.action}`);
  }
}

What it does: This is the heart of the agentic loop. Based on the action type returned by Gemini, it calls the appropriate handler (e.g., createDirectory, writeCode).

Main CLI Chat Loop

async function runEditor() {
  while (true) {
    const userInput = readlineSync.question(`AI Editor> `);

    if (userInput.toLowerCase() === "exit") {
      console.log(`Goodbye!`);
      break;
    }

    try {
      const actions = await getInstructionsFromGemini(userInput);
      if (!actions || !Array.isArray(actions)) {
        console.log(`Could not understand the instruction.`);
        continue;
      }

      for (const action of actions) {
        await executeAction(action);
      }
    } catch (error) {
      console.error(`Error: ${error.message}`);
    }
  }
}

What it does: Repeatedly reads user input and processes it using Gemini. On each prompt, it gets structured instructions, then performs the actions in sequence. Type exit to quit.

Final Styled Version

To make the CLI more user-friendly, I added some color using ANSI codes:

const colors = {
  reset: "\x1b[0m",
  red: "\x1b[31m",
  green: "\x1b[32m",
  yellow: "\x1b[33m",
  cyan: "\x1b[36m",
  magenta: "\x1b[35m"
};

And here’s how the app welcomes you:

console.log(`${colors.cyan}======================================`);
console.log(`        Smart AI Code Editor`);
console.log(`======================================${colors.reset}`);
console.log(`${colors.yellow}Type anything like:${colors.reset}`);
console.log(`"create a folder named utils and add index.js"`);
console.log(`"generate a python script that reads a csv and plots a graph"`);
console.log(`Type 'exit' to quit.`);
console.log(`${colors.cyan}======================================${colors.reset}\n`);

Final Thoughts

This little project helped me learn:

How to work with agentic workflows
Using LLMs in CLI-based tools
Handling file systems, JSON parsing, and process execution in Node.js
Prompt engineering for best results from Gemini

If you’ve made it this far, thank you! Feel free to fork this and create your own AI tooling.

And, These are some images of the Agent in work

Build a Contact Form with Resend, AWS Lambda, and React.js

sahil — Sun, 11 May 2025 04:43:36 +0000

By Sahil Khan

Contact forms are essential for portfolios, SaaS platforms, and production-grade websites, enabling seamless communication between clients and service providers. There are many ways to implement them, but in this blog, we’ll explore how to receive emails from website visitors using AWS Lambda, Resend API, and React.js.

We’ll build a simple Contact Us form using React.js and Tailwind CSS, validate the input, and send the data via an HTTP request to an AWS Lambda function. This function will revalidate and format the data before sending it as an email using Resend.

💡 If you don’t have an AWS account? You can use Vercel’s serverless functions for free with hobby projects. If you're interested in learning about Vercel functions, stay tuned—I'll write a guide on that soon.

🛠️ Setting Up the Serverless Framework

Install the Serverless Framework globally (if you haven't already):

   npm i serverless -g

Create a new project:

   serverless

Note: The Serverless Framework needs access to your AWS credentials. Running the command above will prompt you to configure your credentials if not already set.

Follow the official credential setup guide if needed.

Choose a template:

Select:

   AWS / Node.js / HTTP API

Name your service and proceed.
Choose or create a new app:

   ❯ Create A New App
     ecommerce
     blog
     acmeinc
     Skip Adding An App

Select Create A New App, and name it anything you like.

💻 Time to Dive Into Code

🔧 Tech Stack

React.js — for the contact form frontend
Tailwind CSS — for styling
Serverless — to manage AWS Lambda functions
Resend — to send emails
Zod — for schema validation

👤 What Are We Collecting?

The form will collect the following from users:

Name
Email
Subject
Message (query)

📦 Let’s Start with the Lambda Function

We'll begin with the backend. Your handler.js file (from the Serverless template) includes a default function like this:

exports.hello = async (event) => {
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: "This is a serverless function",
    }),
  };
};

Let’s clean that up and prepare it to process incoming data.

🧹 Clean the boilerplate:

exports.hello = async (event) => {};

📥 Parse incoming request data:

exports.hello = async (event) => {
  const body = JSON.parse(event.body);
};

✅ Validating Input Using Zod

1. Install Zod:

npm i zod

2. Import it:

const { z } = require("zod");
exports.hello = async (event) => {
  const body = JSON.parse(event.body);
};

3. Define the validation function:

const { z } = require("zod");

exports.hello = async (event) => {
  const body = JSON.parse(event.body);
};

function validateBody(body) {
  const schema = z.object({
    name: z.string().min(2),
    email: z.string().email(),
    subject: z.string().min(10),
    message: z.string().min(20),
  });
  return schema.safeParse(body);
}

4. Use it inside your handler:

const { z } = require("zod");
exports.hello = async (event) => {
  const body = JSON.parse(event.body);
  const result = validateBody(body);

  if (!result.success) {
    return {
      statusCode: 400,
      body: JSON.stringify({
        message: result.error.issues,
      }),
    };
  }

  // Continue to sending email...
};
// validate function

📬 Send the Email with Resend

1. Import Resend:

const { Resend } = require("resend");

2. Initialize Resend client:

const resend = new Resend(process.env.RESEND_API_KEY);

3. Send the email:

const { data, error } = await resend.emails.send({
  from: "YourName <username@yourdomain.com>",
  to: ["youremail@example.com"],
  subject: "New Contact Message from Your Portfolio",
  html: `
    <p><strong>From:</strong> ${body.name}</p>
    <p><strong>Email:</strong> ${body.email}</p>
    <p><strong>Subject:</strong> ${body.subject}</p>
    <p><strong>Message:</strong> ${body.message}</p>
  `,
});

4. Handle errors:

if (error) {
  return {
    statusCode: 500,
    body: JSON.stringify({ error }),
  };
}

5. Final success response:

return {
  statusCode: 200,
  body: JSON.stringify({
    message: "Email sent successfully",
    success: true,
  }),
};

The Final code will look like

const { Resend } = require("resend");
const { z } = require("zod");

const resend = new Resend(process.env.RESEND_API_KEY);
exports.hello = async (event) => {
  const body = JSON.parse(event.body);
  const result = validateBody(body);
  if (!result.success) {
    return {
      statusCode: 400,
      body: JSON.stringify({
        message: result.error.issues,
      }),
    };
  }

  const { data, error } = await resend.emails.send({
    from: "YourName <username@yourdomain.com>",
    to: ["youremail@example.com"],
    subject: "New Contact Message from Your Portfolio",
    html: `
    <p><strong>From:</strong> ${body.name}</p>
    <p><strong>Email:</strong> ${body.email}</p>
    <p><strong>Subject:</strong> ${body.subject}</p>
    <p><strong>Message:</strong> ${body.message}</p>
  `,
  });

  if (error) {
    return {
      error: JSON.stringify(error),
      statusCode: 500,
    };
  }
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: "Email sent successfully",
      success: true,
    }),
  };
};

function validateBody(body) {
  const schema = z.object({
    name: z.string().min(2),
    email: z.string().email(),
    subject: z.string().min(10),
    message: z.string().min(20),
  });
  return schema.safeParse(body);
}

🔧 Configuring `serverless.yml` for Deployment

Now let’s configure the serverless.yml file so your AWS Lambda function can deploy correctly and securely.

org: yourorganization # (optional) your Serverless Dashboard organization
app: somexyz # (optional) your app name
service: somexyz # name of your service/project

provider:
  name: aws
  runtime: nodejs20.x
  region: ap-south-1 # choose your preferred AWS region
  httpApi:
    cors: true # enables CORS for cross-origin requests

functions:
  hello:
    handler: handler.hello
    environment:
      RESEND_API_KEY: ${env:RESEND_API_KEY} # reads the key from your .env file
    events:
      - httpApi:
          path: /send/mail
          method: post

💡 Make sure the path and method match what your frontend will use. A POST method is necessary for sending a body with the request.

🔐 Create a `.env` File

In the root of your project (same level as serverless.yml), create a .env file and add your Resend API key like so:

RESEND_API_KEY="your-resend-api-key"

🚀 Deploy Your Serverless Function

Open your terminal, make sure you're in the root directory (where your serverless.yml is), and run:

sls deploy

The Serverless Framework will:

Package your function
Upload it to AWS Lambda
Set up the HTTP endpoint
Return a live API URL like:

https://xxxxx.execute-api.ap-south-1.amazonaws.com/send/mail

You’ll use this URL to connect your React frontend to your backend.

💬 Creating the Contact Form (Client-Side)

Now let’s build the React frontend to let users send messages through your serverless email API.

Here’s the structure of the form:

Name
Email
Subject
Message

All fields are mandatory. We’ll use the useState hook to capture and manage the form data.

Logic & Submission

We’ve implemented a handleSubmit function that performs:

Validation of fields
API call to the AWS Lambda endpoint
Loading indicator and success feedback

Make sure to store your deployed API URL in a .env file at the root of your project like so:

VITE_MAIL_ENDPOINT=https://your-aws-lambda-url/send/mail

Complete JSX Contact Form with Tailwind Styling

import { useState } from "react";

const Contact = () => {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: "",
  });
  const [isMailSuccess, setMailSuccess] = useState(false);
  const [isMailSending, setMailSending] = useState(false);

  const validateForm = () => {
    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
    if (
      !formData.name ||
      !formData.email ||
      !formData.subject ||
      !formData.message ||
      !emailRegex.test(formData.email)
    ) {
      return {
        message: "All fields are required and email must be valid.",
        status: false,
      };
    }
    return {
      message: "",
      status: true,
    };
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setMailSending(true);

    const { status, message } = validateForm();

    if (!status) {
      setMailSending(false);
      alert(message);
      return;
    }

    try {
      const response = await fetch(import.meta.env.VITE_MAIL_ENDPOINT, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });

      const data = await response.json();

      if (data.success) {
        setMailSuccess(true);
        setFormData({
          name: "",
          email: "",
          subject: "",
          message: "",
        });
        setMailSending(false);
        setTimeout(() => {
          setMailSuccess(false);
        }, 1000);
      }
    } catch (error) {
      setMailSending(false);
      setMailSuccess(false);
      alert("Something went wrong.");
    }
  };

  return (
    <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-60 z-50">
      <div className="bg-zinc-900 rounded-xl p-6 w-80 md:w-full max-w-lg shadow-lg relative">
        <h2 className="text-2xl font-bold mb-4 text-white text-center">
          Get in Touch
        </h2>

        <form onSubmit={handleSubmit} className="space-y-4 text-white">
          <div>
            <label className="block text-sm font-medium text-white">
              Name
            </label>
            <input
              type="text"
              placeholder="Your name"
              value={formData.name}
              onChange={(e) =>
                setFormData({ ...formData, name: e.target.value })
              }
              className="mt-1 w-full border border-gray-300 rounded-lg px-4 py-2 placeholder-zinc-400 focus:outline-none"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-white">
              Email
            </label>
            <input
              type="email"
              placeholder="you@example.com"
              value={formData.email}
              onChange={(e) =>
                setFormData({ ...formData, email: e.target.value })
              }
              className="mt-1 w-full border border-gray-300 rounded-lg px-4 py-2 placeholder-zinc-400 focus:outline-none"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-white">
              Subject (10 words min)
            </label>
            <input
              type="text"
              placeholder="Subject"
              value={formData.subject}
              onChange={(e) =>
                setFormData({ ...formData, subject: e.target.value })
              }
              className="mt-1 w-full border border-gray-300 rounded-lg px-4 py-2 placeholder-zinc-400 focus:outline-none"
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-white">
              Message (20 words min)
            </label>
            <textarea
              placeholder="Your message..."
              value={formData.message}
              onChange={(e) =>
                setFormData({ ...formData, message: e.target.value })
              }
              className="mt-1 w-full border border-gray-300 rounded-lg px-4 py-2 h-28 resize-none placeholder-zinc-400 focus:outline-none"
            ></textarea>
          </div>

          {isMailSending ? (
            <div className="flex items-center justify-center">
              <div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-gray-200"></div>
            </div>
          ) : (
            <button
              type="submit"
              className="w-full py-2 px-4 rounded-lg bg-cyan-500 hover:bg-cyan-600 transition text-white"
            >
              {isMailSuccess ? "Sent successfully" : "Send"}
            </button>
          )}
        </form>
      </div>
    </div>
  );
};

export default Contact;

In the above pic you can see how the form will look like but in you case it might not look like this because I have some parent css that are not mentioned here, so feel free to add some different style.

Test time

Now any one can send mail to you from you page, lets take a look how it look like

After writing the inputs when user will click on send It will start a loader and as the message sent sucessfully it will show a message of _Sent successfully _ and you will receive mail in your inbox.

There is a high probability that your mail move to Spam folder, if then you need to Report not spam so that you can get notification.

In the above Image you can see the mail I receive in my Inbox

Live Demo

Visit my Portfolio for live demo.

Conclusion

Building a contact form that sends real-time emails using React.js, AWS Lambda, and Resend may sound intimidating at first, but as we've seen, it’s surprisingly smooth when broken down step by step. With Zod ensuring your data is valid, Serverless Framework handling your AWS deployment, and Resend taking care of email delivery, you now have a powerful, scalable solution that’s perfect for portfolios, SaaS products, and production-ready sites.

If you like this blog, try to implement it in you own website so that you can reach out to your end-users.

If you'd like to give me any feedback, reach out to me at my X handle or visit my Website and if you want to use Vercel Functions insted of AWS lambda just leave a comment below I'll surely give a guide on Vercel Functions.

:-)

[Boost]

sahil — Tue, 07 Jan 2025 15:45:11 +0000

What Happens When a Database Crashes Mid-Transaction? Understanding Recovery and Data Integrity

sahil ・ Jan 7

#database #transactionmanagement #dataintegrity #techwriting

What Happens When a Database Crashes Mid-Transaction? Understanding Recovery and Data Integrity

sahil — Tue, 07 Jan 2025 15:44:34 +0000

There is really not one answer; it all depends on the situation.

When a database crashes during a transaction, the implications vary based on the type of database you're using, the state of the transaction, the underlying storage engine, and even the type of failure that occurred. Let's explore the potential scenarios, how they are handled, and how the system may recover.

The Concept of a Transaction
A transaction is a sequence of one or more operations that are executed as a single unit of work. The key principle behind transactions is ACID (Atomicity, Consistency, Isolation, and Durability). These properties ensure that:

Atomicity: All operations in the transaction are treated as a single, indivisible unit. Either all of them succeed, or none of them.
Consistency: The database moves from one valid state to another, maintaining integrity.
Isolation: Intermediate states of the transaction are not visible to other transactions.
Durability: Once a transaction is committed, it is guaranteed to persist, even in the event of a crash.
Scenario 1: The Database Crash Occurs Before Commit (Uncommitted Transaction)
In this scenario, the transaction has not yet been committed to the database, meaning the changes are not permanent.

ACID Principle Impact: The principle of atomicity ensures that if the database crashes before the transaction is committed, none of the changes made during the transaction will be saved. Once the database is back up, it will roll back to the state it was in before the transaction started.
Recovery: Most modern databases use write-ahead logging (WAL) or similar mechanisms to maintain a log of all changes that have been made to the database. This means the database can use the log to determine that the transaction was not completed and revert any changes made.
Example: In PostgreSQL, if the database crashes during a transaction, the system will roll back uncommitted changes upon recovery using the WAL.
Scenario 2: The Database Crash Occurs After Commit (Committed Transaction)
If the database crashes after a transaction has been committed, the transaction's changes are theoretically permanent, but there could be a risk of data inconsistency if the crash occurs before some parts of the database were fully written to disk.

ACID Principle Impact: Durability ensures that once a transaction is committed, it will persist even after a crash. The system should ensure that all changes have been flushed to disk, so recovery should ideally not require undoing committed transactions.
Recovery: If the system crashes and the commit was acknowledged but not fully written, the database will attempt to recover the transaction during the restart process by checking the WAL or its equivalent. The database might reapply the transaction from the log if the changes were not fully written.
Example: In MySQL's InnoDB, the engine uses a transaction log that ensures any changes made during a transaction are durable, so upon recovery, it checks whether the transaction was fully written or not.
Scenario 3: Partial Transaction Commit
In some edge cases, the database might commit part of a transaction and not the other parts. For example, the first few operations may be written to disk, but the system crashes before the remaining operations are finished.

ACID Principle Impact: This breaks the atomicity principle, as only part of the transaction is visible, and it could leave the database in an inconsistent state.
Recovery: The database will typically try to rollback the partially committed transaction, ensuring that the database ends up in a consistent state. This is often managed by checking transaction logs to identify incomplete or partial commits.
Example: Oracle’s rollback segments ensure that partially committed transactions are rolled back during crash recovery.
Scenario 4: Database Crashes Due to Hardware Failure
If the crash is caused by a hardware issue, such as disk failure, the recovery process might be more complex.

ACID Principle Impact: In this case, it’s possible that even committed transactions could be lost if the data is not properly written to persistent storage before the crash.
Recovery: Many modern databases are built with fault tolerance in mind. Systems that use distributed databases (like Cassandra or CockroachDB) often have built-in mechanisms to replicate data across multiple nodes, reducing the risk of complete data loss in the event of a failure. However, if the hardware failure is catastrophic and there are no backups, recovery could be partial or incomplete.
Example: Distributed systems typically rely on a consensus protocol (like Raft or Paxos) to ensure that data is replicated across multiple nodes, reducing the chance of data loss due to a single-point failure.
How to Mitigate the Risk
Use ACID-compliant Databases: Rely on databases that guarantee ACID properties to prevent data corruption and inconsistency during crashes.

Implement Proper Logging: Write-ahead logging is essential for recovery from crashes. It ensures that changes are logged before they are written to the database, allowing for rollback in the case of a failure.

Regular Backups: Even with the best logging and durability mechanisms in place, it’s important to have regular backups to prevent catastrophic data loss.

Use Distributed Systems: In case of hardware failure, distributed databases offer redundancy and replication to protect data and ensure availability.

Test Recovery Plans: Ensure that recovery from crashes is tested regularly, and database administrators (DBAs) should be familiar with the recovery process.

Conclusion
In summary, what happens when a database crashes during a transaction is determined by the type of failure, the database’s design, and the configuration used for durability and consistency. While most modern databases have robust mechanisms to ensure data consistency and recovery from crashes, it's important to understand these mechanisms and implement best practices such as regular backups, logging, and fault tolerance. By ensuring these mechanisms are in place, you can significantly reduce the risk of losing data during a crash and maintain a reliable and consistent system.

Building an Express web App for File Uploads and Dynamic Image Processing on the fly

sahil — Wed, 06 Nov 2024 15:41:14 +0000

Guide: Building an Express web app for File Uploads and Dynamic Image Processing

In this tutorial, we will show you how to build a server with Express.js that handles file uploads and performs dynamic image processing like resizing, format conversion, and quality adjustments using Sharp.

Prerequisites

Before we begin, ensure that you have Node.js and npm installed. We will use the following libraries in this tutorial:

Express.js - for setting up the server.
Multer - for handling file uploads.
Sharp - for image processing.
CORS - to allow cross-origin requests.

Step 1: Setting Up the Project

Start by creating a new directory for your project:

mkdir image-upload-server
cd image-upload-server
npm init -y

This will create a new project folder and initialize a package.json file.

You can install all dependencies by running:

npm install express multer sharp cors

Create the necessary directories

We will need two directories:

original-image to store the original uploaded images.
transform-image to store the processed images.

Create these directories by running:

mkdir original-image transform-image

Step 2: Set Up the Express Server

Now, let's set up the basic server using Express.js. Create a file called index.js in the root of your project and add the following code to set up the server:

const express = require('express');
const cors = require('cors');
const multer = require('multer');
const path = require('path');
const sharp = require('sharp');
const fs = require('fs');

const app = express();

// Middleware for CORS and JSON parsing
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

This basic setup includes:

CORS to allow cross-origin requests.
express.json() and express.urlencoded() to parse incoming request data.

Step 3: Configure Multer for File Uploads

We will use Multer to handle file uploads. Multer allows us to store uploaded files in a specified directory.

Add the following code to configure Multer:

// Configure multer for file storage
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'original-image'); // Ensure the 'original-image' directory exists
  },
  filename: function (req, file, cb) {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
  }
});

const upload = multer({ storage: storage });

This setup ensures that:

The uploaded files are stored in the original-image folder.
Each file gets a unique name based on the current timestamp and a random number.

Step 4: Create the File Upload Endpoint

Next, create a POST endpoint for file uploads. The user will send a file to the server, and the server will store the file in the original-image directory.

Add the following code to handle the file upload:

// File upload endpoint
app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).send({ message: 'Please select a file.' });
  }
  const url = `http://localhost:3000/${file.filename}`;

  // Store file path with original filename as the key
  db.set(file.filename, file.path);

  res.json({
    message: 'File uploaded successfully.',
    url: url
  });
});

This endpoint does the following:

Receives a single file upload (with the field name file).
Returns the URL of the uploaded file.

Step 5: Serve the Uploaded Files

Now, let's create a GET endpoint to serve the uploaded files. If any query parameters are provided (for example, resizing, format conversion), the server will process the image accordingly.

Add the following code to serve the uploaded files:

// In-memory storage for file paths
const db = new Map();
const processed = new Map();

// Ensure the transform-image directory exists
const transformedDir = path.join(__dirname, 'transform-image');
if (!fs.existsSync(transformedDir)) {
  fs.mkdirSync(transformedDir);
}

app.get('/:filename', async (req, res) => {
  const filename = req.params.filename;
  const { h, w, f, q } = req.query;
  const filePath = db.get(filename);

  if (!filePath) {
    return res.status(404).send({ message: 'File not found.' });
  }

  // Generate a unique key for the processed image based on the parameters
  const formateUrl = `http://localhost:3000/${filename}?h=${h}&w=${w}&f=${f}&q=${q}`;
  let editPath = processed.get(formateUrl);

  if (editPath) {
    // Serve cached processed image if it exists
    return res.sendFile(path.resolve(editPath));
  } else if (h || w || f || q) {
    // Process image if resizing or format/quality adjustments are specified
    editPath = await processImage(filePath, h, w, f, q);
    if (editPath) {
      processed.set(formateUrl, editPath);
      return res.sendFile(path.resolve(editPath));
    }
  }

  // Serve the original file if no processing is required
  res.sendFile(path.resolve(filePath));
});

This endpoint:

Retrieves the file from the db map based on the filename.
Processes the image if resizing, format conversion, or quality adjustments are specified.
Caches the processed images to improve performance.

Step 6: Process Images with Sharp

The Sharp library will allow us to perform various transformations on the images, such as resizing, format conversion, and quality adjustments.

Add the processImage function that handles these transformations:

async function processImage(filePath, h, w, f, q) {
  try {
    const transformer = sharp(filePath);

    // Apply resizing only if `h` or `w` is provided
    const resizeOptions = {};
    if (h) resizeOptions.height = parseInt(h);
    if (w) resizeOptions.width = parseInt(w);
    if (Object.keys(resizeOptions).length > 0) {
      transformer.resize(resizeOptions);
    }

    // Apply format conversion if `f` is provided and supported
    if (f) {
      switch (f.toLowerCase()) {
        case 'jpeg':
        case 'jpg':
          transformer.jpeg({ quality: q ? parseInt(q) : 80 });
          break;
        case 'png':
          transformer.png({ quality: q ? parseInt(q) : 80 });
          break;
        case 'webp':
          transformer.webp({ quality: q ? parseInt(q) : 80 });
          break;
        case 'gif':
          transformer.gif(); // GIF format doesn’t support quality adjustment
          break;
        case 'tiff':
          transformer.tiff({ quality: q ? parseInt(q) : 80 });
          break;
        case 'avif':
          transformer.avif({ quality: q ? parseInt(q) : 80 });
          break;
        default:
          throw new Error('Unsupported format');
      }
    }

    // Save processed file to the `transform-image` directory
    const extension = f ? `.${f}` : path.extname(filePath);
    const processedFilePath = path.join(
      transformedDir,
      `processed-${Date.now()}${extension}`
    );
    await transformer.toFile(processedFilePath);

    return processedFilePath;
  } catch (error) {
    console.error('Error processing image:', error);
    return null;
  }
}

This function:

Resizes the image based on the h (height) and w (width) parameters.
Converts the image format based on the f parameter (JPEG, PNG, WebP, etc.).
Adjusts the image quality based on the q parameter (optional).
Saves the processed image in the transform-image folder.

Step 7: Start the Server

Finally, start the server by adding the following code:

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

This will start the server on port 3000.

Step 8: Testing the Server

1. Testing File Upload with Postman

To test the file upload functionality using Postman, follow these steps:

1.1 Open Postman

Launch Postman on your computer. If you don't have Postman installed, you can download it here.

1.2 Create a POST Request

Set the request type to POST.
In the URL field, enter: http://localhost:3000/upload.

1.3 Add the File in the Body

Select the Body tab.
Choose the form-data option.
In the form, set the key to file (this must match the field name in your multer configuration).
Click the Choose Files button and select an image file from your computer.

1.4 Send the Request

Click Send.
If the upload is successful, you should receive a response with the URL of the uploaded image.

Example Response:

{
  "message": "File uploaded successfully.",
  "url": "http://localhost:3000/somefile-123456789.jpg"
}

2. Testing Image Retrieval and Processing via Browser

Now, let's test retrieving the image with transformations using the Browser.

2.1 Get the Uploaded Image

To retrieve the image, simply open your browser and navigate to the URL you received after uploading the file. For example, if the response URL was:

"http://localhost:3000/somefile-123456789.jpg"

Just type this URL in your browser's address bar and hit Enter. You should see the original image displayed.

3. Testing Image Transformations with Query Parameters

Now, let's test dynamic image transformations by appending query parameters for resizing, format conversion, and quality adjustment.

3.1 Add Query Parameters for Transformation

In your browser, append query parameters to the image URL to test transformations. Here are some examples:

Resize the image to width 200px and height 300px:

  http://localhost:3000/somefile-123456789.jpg?h=300&w=200

Convert the image to PNG format:

  http://localhost:3000/somefile-123456789.jpg?f=png

Convert the image to WebP format with 90% quality:

  http://localhost:3000/somefile-123456789.jpg?f=webp&q=90

Resize the image to width 400px, height 500px, and convert to JPEG with 80% quality:

  http://localhost:3000/somefile-123456789.jpg?h=500&w=400&f=jpeg&q=80

3.2 Expected Behavior

When you access any of the URLs with the query parameters, the server will process the image accordingly.
- If the image has been processed before with the same parameters, it will serve the cached version.
- If it hasn’t been processed yet, it will process the image (resize, convert format, adjust quality) and save it in the transform-image folder for future requests.

The browser will display the processed image, and you can confirm if the transformation has been applied correctly.

Example Workflow

Upload an image via Postman.
Retrieve the uploaded image in the browser using the URL provided by Postman.
Modify the URL in the browser by adding query parameters like ?h=300&w=200 to see resizing in action or ?f=webp&q=90 for format conversion.

Conclusion

This image upload and processing server provides a robust solution for handling image uploads, transformations, and retrievals. Using Multer for file handling and Sharp for image processing, it supports resizing, format conversion, and quality adjustments through query parameters. The system efficiently caches processed images to optimize performance, ensuring fast and responsive image delivery. This approach simplifies image management for applications requiring dynamic image transformations, making it a versatile tool for developers.

DEV Community: sahil

How I Created an AI-Powered Code Editor in Node.js Using Gemini

What I Built

Tech Stack

Getting Started

Setting Up Gemini

Core Functionalities

1. Create Directory

2. Create File

3. Write AI-Generated Code

4. Run Package Manager Commands

Prompt Engineering

Executing Actions

Main CLI Chat Loop

Final Styled Version

Final Thoughts

Build a Contact Form with Resend, AWS Lambda, and React.js

🛠️ Setting Up the Serverless Framework

💻 Time to Dive Into Code

🔧 Tech Stack

👤 What Are We Collecting?

📦 Let’s Start with the Lambda Function

🧹 Clean the boilerplate:

📥 Parse incoming request data:

✅ Validating Input Using Zod

1. Install Zod:

2. Import it:

3. Define the validation function:

4. Use it inside your handler:

📬 Send the Email with Resend

1. Import Resend:

2. Initialize Resend client:

3. Send the email:

4. Handle errors:

5. Final success response:

The Final code will look like

🔧 Configuring serverless.yml for Deployment

🔐 Create a .env File

🚀 Deploy Your Serverless Function

💬 Creating the Contact Form (Client-Side)

Logic & Submission

Complete JSX Contact Form with Tailwind Styling

Test time

Live Demo

Conclusion

[Boost]

What Happens When a Database Crashes Mid-Transaction? Understanding Recovery and Data Integrity

sahil ・ Jan 7

What Happens When a Database Crashes Mid-Transaction? Understanding Recovery and Data Integrity

Building an Express web App for File Uploads and Dynamic Image Processing on the fly

Guide: Building an Express web app for File Uploads and Dynamic Image Processing

Prerequisites

Step 1: Setting Up the Project

Create the necessary directories

Step 2: Set Up the Express Server

Step 3: Configure Multer for File Uploads

Step 4: Create the File Upload Endpoint

Step 5: Serve the Uploaded Files

Step 6: Process Images with Sharp

Step 7: Start the Server

Step 8: Testing the Server

1. Testing File Upload with Postman

1.1 Open Postman

1.2 Create a POST Request

1.3 Add the File in the Body

1.4 Send the Request

2. Testing Image Retrieval and Processing via Browser

2.1 Get the Uploaded Image

3. Testing Image Transformations with Query Parameters

3.1 Add Query Parameters for Transformation

3.2 Expected Behavior

Example Workflow

Conclusion

🔧 Configuring `serverless.yml` for Deployment

🔐 Create a `.env` File