DEV Community: Naimur Rahman Nahid

Building a Real-Time Earthquake Alert System Using BOT, API & Database

Naimur Rahman Nahid — Sun, 23 Nov 2025 13:13:08 +0000

Naimur Rahman Nahid Android Earthquake Apps Idea

The global earthquake monitoring ecosystem provides public APIs for developers to consume real-time seismic activity data. Services like USGS, IRIS, and EMSC offer free feeds, but they also enforce rate limits. If your application has thousands of active users, directly calling these external APIs from each device is not scalable.

Instead, a more reliable strategy is to create a background BOT + local database + server API architecture.

Your server fetches earthquake data periodically, stores it locally, and your mobile/web users read everything from your backend — not from external APIs.

This guide walks you through building a real-time Earthquake Alert System using external feeds, a BOT worker, and a fast backend.

Prerequisites

Before starting, you should be familiar with:

Basic backend development (Node, PHP, Python)
REST APIs & JSON parsing
SQL databases (PostgreSQL/MySQL)
Basic mobile or web app development concepts

Your development environment should include:

Node.js v16 or higher
PostgreSQL/MySQL database
A local or cloud server
API testing tools (Postman/Insomnia)

Step 1: Choose an Earthquake Data Source

Reliable free sources:

Recommended Feed (USGS GeoJSON):

https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geo.json

You get:

Magnitude
Location (place)
Depth
Time
Coordinates
Event ID
Tsunami flag
Metadata

Step 2: Set Up Your Project Structure

Example folder layout:

earthquake-alert/ ├─ src/ │ ├─ bot/ │ │ └─ fetch.js │ ├─ api/ │ │ └─ earthquakes.js │ └─ server.js ├─ package.json ├─ .env

Step 3: Create the Earthquake Database Table

Using PostgreSQL:

CREATE TABLE earthquakes ( id SERIAL PRIMARY KEY, external_id VARCHAR(100) UNIQUE, magnitude NUMERIC(4,2), depth NUMERIC(6,2), place TEXT, time_utc TIMESTAMP, latitude NUMERIC(9,6), longitude NUMERIC(9,6), url TEXT, source VARCHAR(20), created_at TIMESTAMP DEFAULT NOW() );

Indexes:

CREATE INDEX idx_quake_time ON earthquakes(time_utc DESC); CREATE INDEX idx_quake_mag ON earthquakes(magnitude DESC);

Step 4: Build the BOT to Fetch Earthquake Data

Create file: src/bot/fetch.js

import fetch from "node-fetch";
import { Pool } from "pg";

const pool = new Pool({ connectionString: process.env.DATABASE_URL });

const API_URL =
 "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson";

export async function fetchEarthquakes() {
  const res = await fetch(API_URL);
  const json = await res.json();

  const client = await pool.connect();

  try {
    await client.query("BEGIN");

    for (const item of json.features) {
      const p = item.properties;
      const g = item.geometry;

      await client.query(
        `INSERT INTO earthquakes 
         (external_id, magnitude, depth, place, time_utc, latitude, longitude, url, source)
         VALUES ($1, $2, $3, $4, to_timestamp($5/1000), $6, $7, $8, 'USGS')
         ON CONFLICT (external_id) DO NOTHING`,
        [
          item.id,
          p.mag,
          g.coordinates[2],
          p.place,
          p.time,
          g.coordinates[1],
          g.coordinates[0],
          p.url
        ]
      );
    }

    await client.query("COMMIT");
  } catch (error) {
    await client.query("ROLLBACK");
  } finally {
    client.release();
  }
}
Run BOT every 30 seconds:

setInterval(fetchEarthquakes, 30000);
fetchEarthquakes();

Step 5: Create a Backend API for Your App

Inside src/api/earthquakes.js:

app.get("/api/earthquakes/recent", async (req, res) => {
const minutes = req.query.minutes || 60;

const result = await pool.query(
SELECT * FROM earthquakes WHERE time_utc >= NOW() - ($1 || ' minutes')::interval ORDER BY time_utc DESC,
[minutes]
);

res.json(result.rows);
});

Clients fetch from your backend only — no rate limits.

---

Step 6: Add Real-Time Alerts (Socket.io)

Server emit:

io.emit("earthquake-alert", {
magnitude,
latitude,
longitude,
place
});


Client receive:

socket.on("earthquake-alert", (data) => {
// Show notification
// Play siren sound
});

Step 7: Notification Logic (Mobile/Web)

Simple example:

if (distance <= 300 && magnitude >= 4.5) {
triggerSiren();
showNotification();
}



Only relevant earthquakes trigger alerts.

-------

Step 8: Test, Deploy & Scale

Checklist:

- BOT updates data successfully
- API returns latest earthquakes
- Filters work (time, magnitude, region)
- Mobile/web client connects
- Push notifications triggered correctly
Deploy BOT + Backend on any server:

- VPS (DigitalOcean / Linode)
- Render
- Railway
- AWS / GCP


By using a BOT-driven architecture, you can:

1. Avoid API rate limits
2. Support unlimited users
3. Improve performance
4. Deliver fast, real-time alerts

This architecture works for mobile apps, dashboards, emergency systems, or public alert applications.

More From Me

[Blog Website:](https://www.nijerinfo-bd.com/)

Web Development Agency: [Naimur Rahman Nahid](https://naimurrahmannahid.com/)

How to Build a Fully Custom WordPress Block Using React

Naimur Rahman Nahid — Fri, 14 Nov 2025 06:18:08 +0000

The WordPress Block Editor (Gutenberg) has transformed the way content is created and managed. Instead of relying on classic shortcodes or page builders, developers can now build reusable, React-powered custom blocks that integrate directly into WordPress. If you want to modernize your WordPress development workflow, learning how to build custom blocks is a valuable skill.

In this guide, we will walk through how to create a fully custom WordPress block using React and the official WordPress block development tools.

Prerequisites

Before starting, you should be familiar with:
Basic WordPress theme or plugin development
ESNext JavaScript and React
Node.js and npm

Your development environment should include:

Node.js v16 or higher
A local WordPress installation
A custom plugin folder to contain your block source files

Step 1: Setting up the project structure

Inside your WordPress installation, navigate to:

wp-content/plugins/

Create a new folder named:

my-custom-block

Inside this folder, create the following structure:

my-custom-block/
  ├─ build/
  ├─ src/
  │   └─ index.js
  ├─ block.php
  └─ package.json

*Step 2: Initialize the project using @wordpress/scripts
*
npm init @wordpress/block

Follow the on-screen prompts. This will automatically generate:

package.json
src/index.js
block.json
Build configuration

Your plugin now has a working starter block.

Step 3: Register the block in PHP
**
Inside **block.php, add:

<?php
/**
 * Plugin Name: Custom Gutenberg Block
 */

function create_custom_block_init() {
    register_block_type( __DIR__ );
}
add_action( 'init', 'create_custom_block_init' );

Step 4: Editing the React block code

Open src/index.js:

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType('myplugin/custom-block', {
    title: 'Custom Block',
    icon: 'admin-customizer',
    category: 'design',

    attributes: {
        content: { type: 'string', source: 'html', selector: 'p' }
    },

    edit({ attributes, setAttributes }) {
        return (
            <RichText
                tagName="p"
                value={attributes.content}
                onChange={(value) => setAttributes({ content: value })}
                placeholder="Write something..."
            />
        );
    },

    save({ attributes }) {
        return <RichText.Content tagName="p" value={attributes.content} />;
    }
});

Step 5: Adding Inspector Controls

import { InspectorControls } from '@wordpress/block-editor'; import { PanelBody, TextControl } from '@wordpress/components';

Update the edit function:

edit({ attributes, setAttributes }) {
    return (
        <>
            <InspectorControls>
                <PanelBody title="Settings">
                    <TextControl
                        label="Extra Class"
                        value={attributes.className}
                        onChange={(value) =>
                            setAttributes({ className: value })
                        }
                    />
                </PanelBody>
            </InspectorControls>

            <RichText
                tagName="p"
                value={attributes.content}
                onChange={(value) => setAttributes({ content: value })}
            />
        </>
    );
}

Step 6: Build the block

npm run build

For development:

npm start

Step 7: Activate and test
Go to WordPress dashboard

Open Plugins

Activate “Custom Gutenberg Block”
Insert it into any post or page
Your block is now fully functional.

Building custom Gutenberg blocks with React gives you full control over how content is created in WordPress.

By using @wordpress/scripts, the setup becomes much simpler and more efficient.

You can visit our more website:
Nijer Info BD Blogging Website
Web Development agency "Naimur Rahman Nahid"

Integrating OpenAI API with WordPress: Generate Content Automatically

Naimur Rahman Nahid — Tue, 11 Nov 2025 20:11:36 +0000

AI is revolutionizing the way we create content — and as WordPress developers, we can bring that power directly into our websites. In this tutorial, I’ll show you how to integrate the OpenAI API with WordPress to automatically generate blog post content, product descriptions, or any text-based data you need.

Why Integrate OpenAI with WordPress?

By connecting OpenAI’s API with WordPress, you can:

Generate SEO-friendly blog posts automatically

Create AI-written summaries or product descriptions

Add chat-based features or auto-reply functionality

Reduce content writing time by 70–80%

This kind of automation can be a real productivity booster for bloggers, agencies, and eCommerce store owners.

Step 1: Get Your OpenAI API Key
Go to OpenAI API Keys
Create a new key and copy it
Keep it safe — you’ll need it in your WordPress code

Step 2: Create a Simple WordPress Plugin
Let’s create a minimal plugin to connect with OpenAI.
Folder structure:

/wp-content/plugins/wp-openai-generator/ - wp-openai-generator.php
wp-openai-generator.php

<?php
/**
 * Plugin Name: WP OpenAI Generator
 * Description: Generate blog content using OpenAI API.
 * Version: 1.0
 * Author: Naimur Rahman Nahid
 */

if ( ! defined( 'ABSPATH' ) ) exit;

// Main function
function nahid_generate_ai_content( $prompt ) {
    $api_key = 'YOUR_OPENAI_API_KEY';
    $endpoint = 'https://api.openai.com/v1/chat/completions';

    $response = wp_remote_post( $endpoint, array(
        'headers' => array(
            'Authorization' => 'Bearer ' . $api_key,
            'Content-Type'  => 'application/json',
        ),
        'body' => json_encode(array(
            'model' => 'gpt-3.5-turbo',
            'messages' => array(
                array('role' => 'user', 'content' => $prompt),
            ),
            'max_tokens' => 300,
        )),
    ));

    if ( is_wp_error( $response ) ) {
        return 'Error: ' . $response->get_error_message();
    }

    $body = json_decode( wp_remote_retrieve_body( $response ), true );
    return $body['choices'][0]['message']['content'] ?? 'No response.';
}

Step 3: Add a WordPress Admin Interface

Let’s make it user-friendly by adding a small settings page in the dashboard.

add_action('admin_menu', function() {
    add_menu_page('AI Content Generator', 'AI Generator', 'manage_options', 'ai-generator', 'nahid_ai_admin_page');
});

function nahid_ai_admin_page() {
    if ( isset($_POST['ai_prompt']) ) {
        $prompt = sanitize_text_field($_POST['ai_prompt']);
        $output = nahid_generate_ai_content($prompt);
        echo '<h3>AI Generated Content:</h3><div style="background:#fff;padding:10px;border:1px solid #ddd;">' . esc_html($output) . '</div>';
    }

    echo '<form method="post">
        <textarea name="ai_prompt" rows="5" cols="60" placeholder="Enter your content idea..."></textarea><br><br>
        <input type="submit" class="button button-primary" value="Generate Content">
    </form>';
}

Now go to:
Dashboard → AI Generator
Enter any topic (like “Write a blog post about WordPress security best practices”) — and OpenAI will generate content for you inside WordPress.

Step 4: Secure Your API Key

Never hardcode your API key in production.
Instead, save it in wp-config.php like this:

define('OPENAI_API_KEY', 'your-secret-key');

And then use:

$api_key = OPENAI_API_KEY;

Step 5: Extend It Further

You can extend this concept by:

Auto-generating post drafts

Adding AI-powered title & meta description generators

Using the WordPress REST API to expose your AI endpoint

Building a Gutenberg block that fetches AI-generated content

AI is not here to replace creators — it’s here to amplify creativity and productivity.
By integrating OpenAI into WordPress, we can automate repetitive content work, enhance SEO, and help users focus on strategy and design instead of typing endlessly.