DEV Community: Piyush Kumar

Push Notifications in React Native + Node.js: The Complete Setup Guide (Part 1)

Piyush Kumar — Sat, 21 Mar 2026 18:42:44 +0000

A developer's guide to Firebase Cloud Messaging — from zero to production in under 3 minutes

What is FCM and Why Should You Care?

Firebase Cloud Messaging (FCM) is Google's free service for sending push notifications to Android and iOS devices. The best part? It's completely free — unlimited messages, no credit card required, ever.

Before we dive in, here's why you shouldn't build your own notification system:

Your DIY Solution	With FCM
❌ Can't deliver when app is closed	✅ OS handles delivery
❌ Drains battery with persistent connections	✅ Uses OS push channel
❌ Complex iOS APNs setup	✅ FCM abstracts it
❌ Need to maintain infrastructure	✅ Google's global network

How It Works: The 30-Second Explanation

Your backend never talks directly to users' phones. Instead:

Your Backend  →  FCM Servers (Google)  →  User's Device
   (sends)          (routes)                (receives)

FCM uses a device token — a unique string representing one app install on one device — to route messages to the right phone.

The Architecture

Here's what you're building:

┌─────────────────────────────────────────────────────────┐
│                   Your Firebase Project                  │
│                                                           │
│  ┌──────────────────┐      ┌──────────────────────┐     │
│  │  Frontend (App)   │      │   Backend (Node.js)   │     │
│  │  React Native     │      │   Express + Database  │     │
│  │                   │      │                       │     │
│  │  Uses:            │      │  Uses:                │     │
│  │  • google-        │      │  • Service Account    │     │
│  │    services.json  │      │    JSON (in .env)     │     │
│  │  • @react-native- │      │  • firebase-admin     │     │
│  │    firebase/      │      │    SDK                │     │
│  │    messaging      │      │                       │     │
│  │                   │      │                       │     │
│  │  Job:             │      │  Job:                 │     │
│  │  • Get token      │      │  • Send push to       │     │
│  │  • Request        │      │    token via FCM      │     │
│  │    permission     │      │    API                │     │
│  │  • Receive push   │      │                       │     │
│  └──────────────────┘      └──────────────────────┘     │
└─────────────────────────────────────────────────────────┘
                   ↓                    ↓
            ┌──────────────────────────────┐
            │      FCM Servers (Google)     │
            │   Routes to correct device    │
            └──────────────────────────────┘
                          ↓
                    User's Phone

Step 1: Firebase Console Setup (5 minutes)

Create Your Project

Go to console.firebase.google.com
Click "Add project"
Give it a name (e.g., my-awesome-app)

Add Android App

Inside your project → Add app → Android
Enter your package name (e.g., com.myapp)
Download google-services.json
Place it at android/app/google-services.json in your React Native project

Get Backend Credentials

Project Settings → Service Accounts
Click "Generate new private key"
Downloads a JSON file — this is your admin credential

⚠️ Security Alert: Never commit this file to git. Store it as an environment variable.

Step 2: Backend Setup (Node.js)

Install Firebase Admin SDK

npm install firebase-admin

Initialize Firebase

Create config/firebase.js:

const admin = require('firebase-admin');

const serviceAccount = JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT);

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount)
});

module.exports = admin;

Create Push Notification Service

Create services/pushNotification.js:

const admin = require('../config/firebase');

async function sendPushNotification(deviceToken, title, body, data = {}) {
    try {
        const message = {
            token: deviceToken,
            notification: {
                title: title,
                body: body
            },
            data: data,  // Custom key-value pairs
            android: {
                priority: 'high'  // Wakes up the device
            }
        };

        const response = await admin.messaging().send(message);
        console.log('Push sent successfully:', response);
        return response;
    } catch (error) {
        console.error('Error sending push:', error);

        // Handle expired/invalid tokens
        if (error.code === 'messaging/registration-token-not-registered') {
            // Remove token from database
            console.log('Token is invalid, should be removed from DB');
        }
        throw error;
    }
}

module.exports = { sendPushNotification };

Environment Variables

Create/update your .env:

# Paste the entire service account JSON as a single-line string
FIREBASE_SERVICE_ACCOUNT={"type":"service_account","project_id":"your-project-id",...}

Step 3: Database Setup

Add a column to store device tokens:

-- For PostgreSQL
ALTER TABLE users ADD COLUMN fcm_token TEXT;

-- For MySQL
ALTER TABLE users ADD COLUMN fcm_token VARCHAR(255);

Important: If you need multi-device support (same user, multiple phones), create a separate table:

CREATE TABLE device_tokens (
    id SERIAL PRIMARY KEY,
    user_id INTEGER REFERENCES users(id),
    fcm_token TEXT NOT NULL,
    device_name VARCHAR(100),
    created_at TIMESTAMP DEFAULT NOW(),
    UNIQUE(user_id, fcm_token)
);

Step 4: API Endpoint to Save Token

Create an endpoint to receive tokens from your app:

// routes/user.js
const express = require('express');
const router = express.Router();

// Assuming you have authentication middleware
router.put('/token', authenticateUser, async (req, res) => {
    try {
        const { fcm_token } = req.body;
        const userId = req.user.id;  // From auth middleware

        // Update user's FCM token
        await db.query(
            'UPDATE users SET fcm_token = $1 WHERE id = $2',
            [fcm_token, userId]
        );

        res.json({ success: true, message: 'Token saved successfully' });
    } catch (error) {
        console.error('Error saving FCM token:', error);
        res.status(500).json({ error: 'Failed to save token' });
    }
});

module.exports = router;

Understanding Device Tokens

A device token looks like this:

eExKj8mTR4pQ:APA91bH...very-long-alphanumeric-string

Key Facts:

Unique per device + per app install
Changes when: app is reinstalled, device is reset, app data is cleared
Same device, same app, but reinstalled = new token

Token Lifecycle

Event	Token Changes?
App update	❌ No
App uninstall + reinstall	✅ Yes
User clears app data	✅ Yes
Device factory reset	✅ Yes
User switches phones	✅ Yes (new device)

The Complete Flow Diagram

Here's how everything connects:

┌─────────────────────────────────────────────────────────────┐
│                    REGISTRATION FLOW                         │
└─────────────────────────────────────────────────────────────┘

[User's Phone]              [Your Backend]          [Database]
      │                           │                      │
      │─── App opens ────────────►│                      │
      │    Firebase SDK runs      │                      │
      │    Generates token        │                      │
      │                           │                      │
      │─── Login/Signup ─────────►│                      │
      │                           │                      │
      │─── Send FCM token ───────►│                      │
      │    PUT /api/user/token    │                      │
      │                           │                      │
      │                           │─── Save token ──────►│
      │                           │    UPDATE users      │
      │                           │    SET fcm_token     │
      │                           │                      │
      │◄─── Success response ─────│                      │


┌─────────────────────────────────────────────────────────────┐
│                   NOTIFICATION FLOW                          │
└─────────────────────────────────────────────────────────────┘

[Your Backend]          [Database]        [FCM]         [User's Phone]
      │                      │              │                  │
      │─── Event occurs ────►│              │                  │
      │    (new message,     │              │                  │
      │     order update,    │              │                  │
      │     etc.)            │              │                  │
      │                      │              │                  │
      │─── Get user token ──►│              │                  │
      │    SELECT fcm_token  │              │                  │
      │                      │              │                  │
      │◄─── Return token ────│              │                  │
      │                      │              │                  │
      │─── Send push ───────────────────────►│                  │
      │    admin.messaging()                │                  │
      │    .send({ token,                   │                  │
      │            title,                    │                  │
      │            body })                   │                  │
      │                                      │                  │
      │                                      │─── Route to ────►│
      │                                      │    device        │
      │                                      │                  │
      │                                      │                  │
      │                                      │   [Notification  │
      │                                      │    appears on    │
      │                                      │    lock screen]  │

What's in Part 2?

In the next article, we'll cover:

✅ Frontend implementation — Getting the token in React Native

✅ Handling notifications — When app is open, background, or closed

✅ Token refresh logic — Keeping tokens up-to-date

✅ Testing strategies — How to test notifications locally

✅ Production checklist — Everything you need before going live

Quick Reference: Is FCM Really Free?

Service	Cost
FCM push notifications	✅ Free (unlimited)
Firebase project (Spark plan)	✅ Free
Firebase Admin SDK	✅ Free
React Native Firebase package	✅ Free (open source)
Your server hosting	💰 You pay for hosting
Your database	💰 You pay for database

FCM has been free since Google acquired Firebase in 2014. No message limits, ever.

Common Mistakes to Avoid

❌ Committing service account JSON to Git

Fix: Add to .gitignore, use environment variables

❌ Not handling token expiration

Fix: Catch messaging/registration-token-not-registered errors and remove stale tokens

❌ Forgetting permission requests

Fix: Always request notification permission on Android 13+ and iOS

❌ Testing only with app open

Fix: Test all three states: foreground, background, and killed

Ready to Implement?

You now have:

Firebase project configured
Backend initialized with admin SDK
Database ready to store tokens
API endpoint to receive tokens

Next step: Part 2 will show you the React Native frontend code to complete the integration.

Series Navigation:

Part 1: Concepts & Setup (you are here)
Part 2: Frontend Implementation & Testing (coming soon)

Found this helpful?

Follow me for Part 2, where we'll implement the complete React Native frontend and handle all notification scenarios.

Tags: #react-native #nodejs #fcm #push-notifications #firebase #mobile-development

Top 10 technologies/framework to learn as a MERN stack developer in 2023

Piyush Kumar — Sat, 11 Mar 2023 16:02:50 +0000

As a MERN (MongoDB, Express, React, and Node.js) stack developer, the top 10 technologies and frameworks worth considering to learn in 2023:

1. GraphQL: It is a query language for APIs that enables developers to get exactly the data they need in a single request. It can be a useful skill to have as a MERN stack developer, especially for building scalable and efficient APIs. You can learn more about this here...

2. Next.js: Next.js is a popular React framework that offers server-side rendering, static site generation, and other advanced features. It can help improve the performance and user experience of your React applications. You can learn more about this here...

3. Docker: Docker is a containerization platform that enables developers to package and deploy applications as containers. It can be a useful tool for managing dependencies and simplifying the deployment process. You can learn more about this here...

4. Redux: Redux is a predictable state container for JavaScript apps that can help manage the state of your React applications. It can be a valuable skill to have as a MERN stack developer, especially for building complex applications. You can learn more about this here...

5. TypeScript: TypeScript is a typed superset of JavaScript that can help improve the maintainability and scalability of your code. It can be a useful skill to have as a MERN stack developer, especially for building large-scale applications. You can learn more about this here...

6. AWS Lambda: AWS Lambda is a serverless compute service that enables developers to run code without managing servers. It can be a useful tool for building scalable and cost-effective backend services. You can learn more about this here...

7. React Native: React Native is a popular framework for building mobile applications using React. It can be a valuable skill to have as a MERN stack developer, especially if you're interested in building mobile applications. You can learn more about this here...

8. Socket.io: Socket.io is a library that enables real-time, bidirectional communication between clients and servers. It can be a useful tool for building real-time applications, such as chat applications. You can learn more about this here...

9. Serverless Framework: Serverless Framework is a framework that enables developers to build and deploy serverless applications easily. It can be a useful tool for building scalable and cost-effective backend services. You can learn more about this here...

10. Jest: Jest is a popular testing framework for JavaScript applications. It can help ensure the quality and reliability of your code, and can be a valuable skill to have as a MERN stack developer. You can learn more about this here...

Sorting Algorithm with Python Code

Piyush Kumar — Thu, 09 Mar 2023 05:30:03 +0000

Sorting algorithms are a fundamental part of computer science and are used to arrange a list of elements in a specific order. There are numerous sorting algorithms available, each with its own set of strengths and weaknesses. In this blog, we will discuss the most common sorting algorithms and their implementations.

1. Bubble Sort:
Bubble sort is a simple sorting algorithm that repeatedly steps through the list, compares adjacent elements, and swaps them if they are in the wrong order. The algorithm gets its name from the way smaller elements "bubble" to the top of the list.

Here's an implementation of Bubble Sort in Python:

def bubbleSort(arr):
    n = len(arr)
    for i in range(n):
        for j in range(0, n-i-1):
            if arr[j] > arr[j+1]:
                arr[j], arr[j+1] = arr[j+1], arr[j]

2. Selection Sort:
Selection sort is an algorithm that sorts an array by repeatedly finding the minimum element from the unsorted part of the array and putting it at the beginning. It has a complexity of O(n^2).

Here's an implementation of Selection Sort in Python:

def selectionSort(arr):
    n = len(arr)
    for i in range(n):
        min_idx = i
        for j in range(i+1, n):
            if arr[min_idx] > arr[j]:
                min_idx = j
        arr[i], arr[min_idx] = arr[min_idx], arr[i]

3. Insertion Sort:
Insertion sort is a simple sorting algorithm that builds the final sorted array one item at a time. It is much less efficient on large lists than more advanced algorithms such as quicksort, heapsort, or merge sort. It has a complexity of O(n^2).

Here's an implementation of Insertion Sort in Python:

def insertionSort(arr):
    for i in range(1, len(arr)):
        key = arr[i]
        j = i - 1
        while j >= 0 and key < arr[j] :
                arr[j + 1] = arr[j]
                j -= 1
        arr[j + 1] = key

4. Quick Sort:
Quick sort is a divide and conquer algorithm that picks an element as a pivot and partitions the array around the pivot, putting all elements smaller than the pivot to its left and all elements greater than the pivot to its right. It then recursively sorts the two subarrays. It has a complexity of O(nlogn).

Here's an implementation of Quick Sort in Python:

def partition(arr, low, high):
    i = (low-1)         
    pivot = arr[high]     

    for j in range(low, high):
        if arr[j] <= pivot:
            i = i+1
            arr[i], arr[j] = arr[j], arr[i]

    arr[i+1], arr[high] = arr[high], arr[i+1]
    return (i+1)

def quickSort(arr, low, high):
    if low < high:
        pi = partition(arr, low, high)
        quickSort(arr, low, pi-1)
        quickSort(arr, pi+1, high)

5. Merge Sort:
Merge sort is a divide and conquer algorithm that divides the array into two halves, recursively sorts the two halves, and then merges the sorted halves. It has a complexity of O(nlogn).

Here's an implementation of Merge Sort in Python:

def merge_sort(arr):
    if len(arr) > 1:
        mid = len(arr) // 2
        left_half = arr[:mid]
        right_half = arr[mid:]

        # Recursive calls to divide the array into smaller subarrays
        merge_sort(left_half)
        merge_sort(right_half)

        i = j = k = 0

        # Merge the subarrays
        while i < len(left_half) and j < len(right_half):
            if left_half[i] < right_half[j]:
                arr[k] = left_half[i]
                i += 1
            else:
                arr[k] = right_half[j]
                j += 1
            k += 1

        while i < len(left_half):
            arr[k] = left_half[i]
            i += 1
            k += 1

        while j < len(right_half):
            arr[k] = right_half[j]
            j += 1
            k += 1

# Example usage
arr = [6, 5, 3, 1, 8, 7, 2, 4]
merge_sort(arr)
print(arr)  # Output: [1, 2, 3, 4, 5, 6, 7, 8]

6. Heap Sort:
Heap sort is a comparison-based sorting algorithm that works by first building a binary heap from the array to be sorted, and then repeatedly extracting the maximum element from the heap and putting it at the end of the array until the heap is empty. The heap is built in such a way that the root node of each subtree has a larger value than its children (in a max-heap), or a smaller value (in a min-heap).

The steps to perform heap sort are:

Build a max heap from the input array.
Extract the maximum element from the heap (which is always the root element) and swap it with the last element of the heap.
Reduce the heap size by one and heapify the root of the heap (which is now the last element of the heap).
Repeat steps 2 and 3 until the heap is empty.

Here's the algorithm in more detail:

def heapify(arr, n, i):
    """
    A helper function that heapifies a subtree rooted with node i
    in a given array arr of size n.
    """
    largest = i
    l = 2 * i + 1
    r = 2 * i + 2

    # If left child is larger than root
    if l < n and arr[l] > arr[largest]:
        largest = l

    # If right child is larger than largest so far
    if r < n and arr[r] > arr[largest]:
        largest = r

    # If largest is not root
    if largest != i:
        arr[i], arr[largest] = arr[largest], arr[i]  # Swap root with largest child

        # Recursively heapify the affected sub-tree
        heapify(arr, n, largest)

def heap_sort(arr):
    """
    A function to perform Heap Sort on a given array arr.
    """
    n = len(arr)

    # Build a max-heap
    for i in range(n // 2 - 1, -1, -1):
        heapify(arr, n, i)

    # Extract elements one by one
    for i in range(n - 1, 0, -1):
        arr[0], arr[i] = arr[i], arr[0]  # Swap the root with the last element
        heapify(arr, i, 0)

    return arr

You can use this function to sort a list by calling heap_sort(arr) where arr is the list to be sorted.