DEV Community: Fredrick Emmanuel

Integrating Google Calendar with OAuth2 in Node.js

Fredrick Emmanuel — Tue, 16 Sep 2025 23:41:46 +0000

📘 Integrating Google Calendar with OAuth2 in Node.js

Time is very essential in our everyday life ⏳. The popular saying goes, "Time is money!!". Knowing how to efficiently allocate and account for every second can help foster growth and productivity, hence the need of this guide

This guide walks you through the entire process of creating a meeting scheduler, time manager or calendry as I call it. Involving connecting your Node.js application with the Google Calendar API using OAuth2. We’ll go from creating a project in Google Cloud Console all the way to making API calls, storing tokens, and handling common errors.

So sit back and let's quickly sail through this journey.

1. 🚀 Create a Project in Google Cloud Console

Go to Google Cloud Console.
Click on New Project → give it a name (e.g., r360).
Select your billing account (if prompted).
Once created, make sure it’s selected at the top of your console.

2. 📡 Enable Google Calendar API

From the left menu, navigate to APIs & Services → Library.
Search for Google Calendar API.
Click Enable.

3. 🔑 Configure OAuth Consent Screen

Go to APIs & Services → OAuth consent screen.
Choose External (unless you’re just testing internally).
Fill in:
- App name
- User support email
- Developer email
Save and continue.

4. 🛠️ Create OAuth 2.0 Credentials

Go to APIs & Services → Credentials.
Click Create Credentials → OAuth Client ID.
Select Web Application.
Add Authorized redirect URI → e.g.:

   http://localhost:3000/auth/redirect

Save → Download the credentials JSON file.

5. 💻 Setting Up Node.js Project

Install Dependencies

We need some dependencies:

npm init -y
npm install express googleapis dotenv uuid body-parser

express: to build our backend routes.
googleapis: official library to talk to Google Calendar.
dotenv: manage secrets like CLIENT_ID.
uuid: generate unique IDs for Google Meet links.
body-parser: parse JSON requests.

Here is what our project structure should look like

project/
 ├─ .env
 ├─ credentials.json    # from Google Console
 ├─ index.html
 ├─ index.js
 ├─ package.json
 ├─ package.lock.json
 └─ node_modules

⚙️ Config and Boilerplate

We start with some imports and Express setup:

import express from 'express';
import { google } from 'googleapis';
import dotenv from 'dotenv';
import { v4 as uuid } from 'uuid';
import fs from 'fs';
import path from 'path';
import bodyParser from 'body-parser';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
dotenv.config();

const app = express();
const port = process.env.PORT || 8000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

In the code above:

We load environment variables (.env) where we keep Google credentials.
Setup Express with body-parser so we can handle form submissions.
__dirname is fixed for ES modules.

Configuring the `.env` File

CLIENT_ID=your-client-id
CLIENT_SECRET=your-client-secret
REDIRECT_URI=http://localhost:3000/auth/redirect
MONGO_URI=mongodb://localhost:27017/calendarApp

6. 📝 Sample Code

import express from 'express';
import { google } from 'googleapis';
import dotenv from 'dotenv';
import { v4 as uuid } from 'uuid';
import fs from 'fs';
import path from 'path';
import bodyParser from 'body-parser';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
dotenv.config();
const app = express();
const port = process.env.PORT || 8000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// OAuth config
const scopes = ['https://www.googleapis.com/auth/calendar'];
const oauth2Client = new google.auth.OAuth2(
  process.env.CLIENT_ID,
  process.env.CLIENT_SECRET,
  process.env.REDIRECT_URL
);

// Calendar API instance
const calendar = google.calendar({
  version: 'v3',
  auth: oauth2Client
});

// Serve frontend
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

// Auth flow
app.get('/auth', (req, res) => {
  const tokenPath = path.join(__dirname, 'tokens.json');
  if (fs.existsSync(tokenPath)) {
    const tokens = JSON.parse(fs.readFileSync(tokenPath, 'utf8'));
    oauth2Client.setCredentials(tokens);
    return res.send('Already authenticated! Tokens loaded from local file.');
  } else {
    const url = oauth2Client.generateAuthUrl({
      access_type: 'offline',
      prompt: 'consent', // 👈 force refresh token every time
      scope: scopes
    });
    res.redirect(url);
  }
});

app.get('/auth/redirect', async (req, res) => {
  try {
    const { tokens } = await oauth2Client.getToken(req.query.code);
    oauth2Client.setCredentials(tokens);
    const tokenPath = path.join(__dirname, 'tokens.json');
    fs.writeFileSync(tokenPath, JSON.stringify(tokens));
    res.send('Authentication successful! You can now go back to /');
  } catch (err) {
    console.error('Error during token exchange:', err);
    res.status(500).send('Authentication failed.');
  }
});

function generateSlots(freeBlocks, durationMinutes) {
  const slots = [];

  freeBlocks.forEach(block => {
    let start = new Date(block.start);
    const end = new Date(block.end);

    while (start.getTime() + durationMinutes * 60000 <= end.getTime()) {
      const slotStart = new Date(start);
      const slotEnd = new Date(start.getTime() + durationMinutes * 60000);
      slots.push({ start: slotStart, end: slotEnd });
      start = slotEnd; // move to next interval
    }
  });

  return slots;
}

// Fetch busy times (next 7 days)
app.get('/availability', async (req, res) => {
  const tokenPath = path.join(__dirname, 'tokens.json');
  if (!fs.existsSync(tokenPath)) {
    return res.status(401).send('No tokens found. Please authenticate first.');
  }

  const tokens = JSON.parse(fs.readFileSync(tokenPath, 'utf8'));
  oauth2Client.setCredentials(tokens);

  try {
    const duration = parseInt(req.query.duration || '30'); // default 30 min

    const startDate = new Date();
    const endDate = new Date();
    endDate.setDate(startDate.getDate() + 7); // next 7 days

    const result = await calendar.freebusy.query({
      requestBody: {
        timeMin: startDate.toISOString(),
        timeMax: endDate.toISOString(),
        items: [{ id: 'primary' }]
      }
    });

    const busySlots = result.data.calendars.primary.busy;

    // Full day working hours (9am–6pm for example)
    const workingHoursStart = 9;
    const workingHoursEnd = 18;

    const freeBlocks = [];
    let current = new Date(startDate);

    while (current < endDate) {
      const dayStart = new Date(current);
      dayStart.setHours(workingHoursStart, 0, 0, 0);
      const dayEnd = new Date(current);
      dayEnd.setHours(workingHoursEnd, 0, 0, 0);

      let freeRanges = [{ start: dayStart, end: dayEnd }];

      busySlots.forEach(busy => {
        const busyStart = new Date(busy.start);
        const busyEnd = new Date(busy.end);

        freeRanges = freeRanges.flatMap(free => {
          // If busy overlaps free, split
          if (busyEnd <= free.start || busyStart >= free.end) {
            return [free]; // no overlap
          }
          const ranges = [];
          if (busyStart > free.start) {
            ranges.push({ start: free.start, end: busyStart });
          }
          if (busyEnd < free.end) {
            ranges.push({ start: busyEnd, end: free.end });
          }
          return ranges;
        });
      });

      freeBlocks.push(...freeRanges);
      current.setDate(current.getDate() + 1);
    }

    const slots = generateSlots(freeBlocks, duration);

    res.send({ slots });
  } catch (err) {
    console.error(err);
    res.status(500).send('Failed to fetch availability.');
  }
});

// Create event
app.post('/create-event', async (req, res) => {
  const tokenPath = path.join(__dirname, 'tokens.json');
  if (!fs.existsSync(tokenPath)) {
    return res.status(401).send('No tokens found. Please authenticate first.');
  }

  const tokens = JSON.parse(fs.readFileSync(tokenPath, 'utf8'));
  oauth2Client.setCredentials(tokens);

  const {
    summary,
    location,
    description,
    startDateTime,
    endDateTime,
    attendeeEmail
  } = req.body;

  const event = {
    summary,
    location: 'Google Meet',
    description,
    start: { dateTime: startDateTime, timeZone: 'Africa/Lagos' },
    end: { dateTime: endDateTime, timeZone: 'Africa/Lagos' },
    colorId: 1,
    conferenceData: { createRequest: { requestId: uuid() } },
    attendees: attendeeEmail ? [{ email: attendeeEmail }] : []
  };

  try {
    const result = await calendar.events.insert({
      calendarId: 'primary',
      auth: oauth2Client,
      conferenceDataVersion: 1,
      sendUpdates: 'all',
      resource: event
    });

    res.json({
      status: 200,
      message: 'Event created',
      link: result.data.hangoutLink
    });
  } catch (err) {
    console.error(err);
    res.status(500).send('Failed to create event.');
  }
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

The flow starts with setting up the server using Express, applying body parsers for handling JSON and URL-encoded payloads, and configuring OAuth2 with Google’s googleapis library. The OAuth2 client is initialized with CLIENT_ID, CLIENT_SECRET, and REDIRECT_URL from environment variables. These values come from your Google Cloud Console project.

The backend serves a simple frontend (index.html) and provides an authentication endpoint /auth. If tokens already exist locally (tokens.json), they are loaded so you don’t need to re-authenticate. If not, the app generates a Google OAuth2 consent screen URL with access_type: offline and prompt: consent, which ensures refresh tokens are retrieved. After the user logs in and Google redirects back to /auth/redirect, the code exchanges the authorization code for tokens, stores them locally, and sets credentials on the OAuth2 client.

The app also provides an /availability endpoint. This endpoint queries Google Calendar’s FreeBusy API for the next 7 days. The logic defines working hours (9AM–6PM), then removes any busy slots returned from Google to compute free time ranges. These free ranges are further divided into slots of a given duration (default 30 minutes, but configurable via query string). The generateSlots function takes each free block and cuts it into smaller intervals, returning a full list of available slots.

The /create-event endpoint allows creating calendar events. It constructs an event object with details like summary, description, and attendees, and sets Google Meet (conferenceData) as the meeting location. The event is inserted into the authenticated user’s primary calendar, with updates automatically emailed to attendees. The response includes the generated Google Meet link.

Authentication tokens are stored locally in tokens.json for quick re-use. In a production system, tokens should be stored securely in a database (e.g., MongoDB or PostgreSQL) instead of a file. The entire design enables a user to authenticate once, then use the scheduling features without needing to log in repeatedly.

7. 📋 Displaying Available Slots in HTML

Here's a sample HTML template you can use

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Create Google Calendar Event</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-100 flex items-center justify-center min-h-screen">
    <div class="bg-white shadow-lg rounded-2xl p-8 w-full max-w-5xl">
      <h1 class="text-3xl font-bold text-gray-800 mb-8 text-center">
        📅 Book a Time with Fredrick
      </h1>

      <!-- Step 1: Choose Slot Duration -->
      <div class="flex gap-4 mb-8 justify-center">
        <label class="font-medium text-gray-700 flex items-center gap-2">
          Duration:
          <select
            id="duration"
            class="p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
          >
            <option value="10">10 minutes</option>
            <option value="15">15 minutes</option>
            <option value="30" selected>30 minutes</option>
            <option value="60">1 hour</option>
          </select>
        </label>
        <button
          onclick="fetchAvailability()"
          class="bg-green-600 text-white px-6 py-2 rounded-lg hover:bg-green-700"
        >
          Refresh Availability
        </button>
      </div>

      <!-- Step 2: Available Slots -->
      <h2 class="text-xl font-semibold text-gray-700 mb-4">Available Slots</h2>
      <div class="overflow-x-auto mb-8 border rounded-lg shadow-sm">
        <table class="w-full border-collapse text-sm">
          <thead class="bg-gray-50">
            <tr>
              <th class="border border-gray-200 p-3 text-left w-40">Date</th>
              <th class="border border-gray-200 p-3 text-left">
                Available Times
              </th>
            </tr>
          </thead>
          <tbody id="slotsTable" class="divide-y divide-gray-100"></tbody>
        </table>
      </div>

      <!-- Step 3: Event Form -->
      <form
        id="eventForm"
        action="/create-event"
        method="POST"
        class="space-y-6"
      >
        <div>
          <label class="block text-gray-700 font-medium">Event Title</label>
          <input
            type="text"
            name="summary"
            required
            class="w-full mt-2 p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <div>
          <label class="block text-gray-700 font-medium">Description</label>
          <textarea
            name="description"
            class="w-full mt-2 p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
          ></textarea>
        </div>

        <div>
          <label class="block text-gray-700 font-medium">Attendee Email</label>
          <input
            type="email"
            name="attendeeEmail"
            class="w-full mt-2 p-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <!-- Hidden inputs for slot start & end -->
        <input type="hidden" name="startDateTime" />
        <input type="hidden" name="endDateTime" />

        <button
          type="submit"
          class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition text-lg font-semibold"
        >
          ✅ Confirm Booking
        </button>
      </form>
    </div>

    <script>
      async function fetchAvailability() {
        const duration = document.getElementById('duration').value;
        const res = await fetch(`/availability?duration=${duration}`);
        const data = await res.json();

        const tbody = document.getElementById('slotsTable');
        tbody.innerHTML = '';

        if (!data.slots || data.slots.length === 0) {
          tbody.innerHTML =
            '<tr><td colspan="2" class="text-center p-4 text-gray-500">No free slots available.</td></tr>';
          return;
        }

        // Group slots by date
        const grouped = {};
        data.slots.forEach(slot => {
          const date = new Date(slot.start).toLocaleDateString([], {
            weekday: 'short',
            month: 'short',
            day: 'numeric',
            year: 'numeric'
          });
          if (!grouped[date]) grouped[date] = [];
          grouped[date].push(slot);
        });

        Object.keys(grouped).forEach(date => {
          const row = document.createElement('tr');

          // Date cell
          const dateCell = document.createElement('td');
          dateCell.className =
            'border border-gray-200 p-3 font-semibold text-gray-700 align-top';
          dateCell.textContent = date;

          // Times cell
          const timesCell = document.createElement('td');
          timesCell.className = 'border border-gray-200 p-3';
          const grid = document.createElement('div');
          grid.className = 'grid grid-cols-2 md:grid-cols-4 gap-2';

          grouped[date].forEach(slot => {
            const start = new Date(slot.start).toLocaleTimeString([], {
              hour: '2-digit',
              minute: '2-digit'
            });
            const end = new Date(slot.end).toLocaleTimeString([], {
              hour: '2-digit',
              minute: '2-digit'
            });

            const btn = document.createElement('button');
            btn.type = 'button';
            btn.innerText = `${start} - ${end}`;
            btn.className =
              'bg-blue-500 text-white px-3 py-2 rounded-md hover:bg-blue-600 text-sm transition';
            btn.onclick = () => {
              document.querySelector('[name=startDateTime]').value = slot.start;
              document.querySelector('[name=endDateTime]').value = slot.end;

              // Highlight selected
              document
                .querySelectorAll('#slotsTable button')
                .forEach(b => b.classList.remove('ring-2', 'ring-yellow-400'));
              btn.classList.add('ring-2', 'ring-yellow-400');
            };

            grid.appendChild(btn);
          });

          timesCell.appendChild(grid);
          row.appendChild(dateCell);
          row.appendChild(timesCell);
          tbody.appendChild(row);
        });
      }

      // Load availability immediately on first page load
      window.onload = fetchAvailability;
    </script>
  </body>
</html>

8. 🛑 Common Errors & Fixes

❌ Error: `No refresh token is set.`

Cause: You didn’t request access_type=offline when generating the auth URL.
Fix: Add access_type: "offline" and prompt: "consent" in your generateAuthUrl call.

❌ Error: `ETIMEDOUT`

Cause: Network issues or firewall blocking https://oauth2.googleapis.com/token.
Fix: Ensure your server has internet access. Retry with a fresh auth code.

❌ Invalid Redirect URI

Cause: Redirect URI in Google Console doesn’t match your .env.
Fix: Make sure both are exactly the same (character for character).

9. 🎯 Next Steps

Store tokens securely in MongoDB so users don’t need to re-login each time.
Expand /availability logic to calculate 10m / 15m / 30m / 1h slots dynamically.
Build a UI for selecting slots → save to MongoDB as confirmed bookings.
Add cancellation & rescheduling endpoints so users can manage events easily.
Wrap everything with proper error handling and logging for production.

✅ Conclusion

By following this guide, you can authenticate users with Google OAuth2, fetch free/busy times from Google Calendar, and store confirmed bookings securely.

Once integrated, your app can act as a full scheduling system – handling availability, bookings, and even video conference links automatically 🎉.

Mastering API Data Validation in Strapi: A Practical Guide

Fredrick Emmanuel — Fri, 02 Feb 2024 07:22:04 +0000

Validating the data received from an API request is a critical aspect to consider when building robust and scalable applications. API (Application Programming Interface) acts as an intermediary that enables data to be shared between various software applications. Certifying the data shared through APIs is important as it handles errors and guarantees data integrity and consistency. This tutorial demonstrates the need for API data validation by building a blog application.

What is API data validation?

API data validation is a way of verifying that the data being exchanged meets the laid down criteria. To explain further, the purpose of API data validation is to confirm that the data sent is in the proper format and that the responses received are as expected.

It is often implemented using various validation libraries and frameworks like Joi, Yup, AJV, and https://www.npmjs.com/package/class-validator, which provide proper ways to define validation rules and handle validation errors.

Importance of API data validation

In software development, data validation plays a crucial role and we will discuss its key importance in this section.

Prevents errors: By rigorously inspecting the data sent and the responses received, API data validation drastically reduces the amount of errors in the software.
Protects against malicious attacks: Data validation ensures that the data received adheres to the outlined guidelines, thus protecting the application. The risk of exploitation is reduced by rejecting malicious data that could harm the application.
Enhances long-lasting performance: Preventing errors and safeguarding against malicious attacks, API data validation enhances the application's performance and guarantees a durable application. The pivotal role of API data validation in software development makes its importance obvious.

Link to the full article: Mastering API Data Validation in Strapi: A Practical Guide

URL Shortener using Express, Firebase, and Heroku

Fredrick Emmanuel — Sat, 15 Jan 2022 10:24:08 +0000

Uniform Resource Locator (URL), also referred to as web address, is a specific type of URI that specifies the address of web resources on a computer network.

A URL basically consists of a Scheme (https://), a Host-Name (dev.to), and a Path (/divofred). Sometimes, a URL can contain Parameters and Anchors.

All these put together makes the URL long and not decent. This calls for a URL Shortener.

As the name implies, URL Shortener helps to reduce the length of the web address while retaining the address to the web resources of the URL.

Goal

In this tutorial, you will learn how to shorten URLs, store these short URLs in Firebase, and Deploy the Application to Heroku.

Prerequisites

Knowledge in NodeJS and ES6 Syntax
A Text Editor preferably Visual Studio code.
Firebase Account

Getting Started

Here is the link to the GitHub repository.

Please note that this tutorial is a modification of Traversy's YouTube Video

Run npm init in your terminal to initialize our project.

Let's install the dependencies that we will use in this tutorial:



npm i express firebase shortid valid-url nodemon

firebase connects our application to firebase database.

shortid creates the short-url code.

valid-url validates the URLs that are sent to our API.

Setting up Firebase

To get started with firebase, you need to own a Gmail.

Creating a Project

Open your browser and navigate to Firebase Official Website and create a project.

Choose a name for the project:

Google Analytics would not be necessary for our project, toggle it off and Create a project.

After successfully creating a new project you will be brought to the screen below. When you click continue, you will be redirected to your dashboard.

Getting our Projects Details

We need our Web API key from our dashboard to connect our application to Firebase.

On the sidebar, click on Authentication and Get Started. This automatically generates our Web API key.

Click on the settings icon on the sidebar and click on Project settings to get our projects Details.

Setting up the server

Let's set up an express listening event, that will listen for a connection to port 5000.

Create a new file named server.js and open it:



const express = require("express");
const app = express();

app.use(express.json());

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => console.log("Sever running at port " + PORT));

Shortening Links

We will have two files, one for generating the URL Code and the other for redirecting the shortened URL to the long URL.

Create a new folder named routes and add two new files named index.js and url.js.

Open up url.js to create the short URL:



const express = require("express");
const router = express.Router();

const valid_url = require("valid-url");
const shortid = require("shortid");

const Shorten = async (req, res) => {
  const { longURL } = req.body;
  const baseURL = "http://localhost:5000";

  // Check base URL
  if (!valid_url.isUri(baseURL)) {
    return res
      .status(401)
      .json({ success: false, message: "Invalid base URL" });
  }
  const urlCode = shortid.generate();
}

router.post("/shorten", Shorten);

We will get the longURL from the body and specify the baseURL of our application which is http://localhost:5000.

We used the package valid-url to check if the baseURL we specified is valid. If it is not valid, we will send a status code of 401 else, we will randomly generate a urlCode using the shortid package.

Connecting our application to Firebase Database

In your dashboard, click on Realtime Database and create a new web database.

To create a new web database click on an icon that looks like </> ]

Create a new folder in our project's root directory named firebase and add fb_connect.js to it.

Open fb_connect.js to connect to our Database:



const { initializeApp } = require("firebase/app");

const app = initializeApp({
  apiKey: "",
  authDomain: "projectID.firebaseapp.com",
  //authDomain: "short-url-4e0b5.firebaseapp.com",
  projectId: "projectID",
  //projectId: "short-url-4e0b5"
});

module.exports = app;

From Project settings in your dashboard, insert your apiKey and projectID in the above code.

Saving Data

Before we can save data in our database, we also need to check the validity of the longURL.

url.js:



const app = require("../firebase/fb_connect");
const { getDatabase, ref, set } = require("firebase/database");

const database = getDatabase(app);

...

const urlCode = shortid.generate();

  // Check long URL
  if (valid_url.isUri(longURL)) {
    const shortURL = `${baseURL}/${urlCode}`;
    const ofirebase = async () => {
      await set(ref(database, "url/" + urlCode), {
        longURL, //From the body
        shortURL,
        urlCode,
      });
      res.status(200).json({ success: true, message: 'Inserted Successfully ' });
    };
    ofirebase();
  } else {
    res.status(401).json({ success: false, message: "Invalid longURL" });
  }
};

router.post("/shorten", Shorten);

module.exports = router;

We initialized our app, imported it into our url.js file, and used it to set up our database. We also required some firebase database functions.

The ref function takes in the instance of our database, the name of the collection we want to add the data to, and the id of each row (which we specified as the urlCode).

The set function takes in the ref function and the data we want to add to the database.

Redirecting users to the Long URL

Open up the index.js file inside the routes folder:

index.js:



const express = require("express");
const router = express.Router();

const app = require("../firebase/fb_connect");
const { getDatabase, ref, child, get } = require("firebase/database");
const dbRef = ref(getDatabase(app));

router.get("/:code", (req, res) => {
  get(child(dbRef, `url/${req.params.code}`))
    .then((snapshot) => {
      if (snapshot.exists()) {
        console.log("redirecting");
        const longURL = snapshot.val().longURL;
        return res.redirect(longURL);
      } else {
        return res
          .status(404)
          .json({ success: false, message: "URL doesn't exist" });
      }
    })
    .catch((error) => {
      return res.status(500).json({ success: false, message: error.message });
    });
});

module.exports = router;

We will get the urlCode from the parameter, use that urlCode to get the LongURL from our database, and redirect the user to the LongURL. If the urlCode doesn't exist, we will send a status code of 404.

Let's set up a middleware in our server.js file that uses our url.js and index.js file to navigate to specific routes.

server.js:



...

app.use("/", require("./routes/index"));
app.use("/api", require("./routes/url"));

...

If you encounter any error or have any questions, send a message in the comment section or refer to the GitHub repo for this tutorial.

Deploying to Heroku

You will need to create an account with Heroku or Sign in if you already have one.

After Signing in, you will be redirected to your dashboard. Click on New at the top-right corner of the page and click create new app.

Choose a unique name for the application and create the app:

Download and Install Heroku's CLI.

After Installing Heroku's CLI, log in to Heroku in your terminal:



heroku login

This will prompt for a Login in your browser.

If you get an error like Ip address mismatch, run this code instead:



heroku login -i

This will ask you to put your Heroku's login details in your terminal.

Any other error? send a message in the comment section.

Let's deploy our app to Heroku



git init
heroku git:remote -a divofred-short-url
git add .
git commit -am "make it better"
git push heroku master

Changing our `baseURL`

Since our project has gone from Local to Production, we need to change the baseURL to the URL of our Heroku's app.

url.js:



...

const baseURL = "https://divofred-short-url.herokuapp.com";

...

We can use Postman to test our application:

Conclusion

We have successfully built a URL Shortener using Node, Firebase Database, and Heroku as our Hosting Platform.

Please submit any question or contributions to the comment section.

You can make a POST request from your Front-end application to our API.

Here is the link to the GitHub repository.

Till We Cross Path, I remain Fredrick Emmanuel (divofred)😁😁❤❤.

How to Build a Realtime Group Chat Application with React and Socket.io

Fredrick Emmanuel — Mon, 08 Nov 2021 13:54:17 +0000

This article explain what the framework "Socket.io" means and Create a simple Group Chat App with React. Here is the link to the GitHub repository. Feel free to comment on any issue, I will always be available to reply.

Goals

The Aim of this tutorial is to explain how Socket.io V4 works and simplify the use of it with a front-end framework like React

Table of Content

Prerequisites
Getting Started
Setting up the Server
Setting up React
Connect Client to Server
- Creating the Server connection
- Refactoring React App
- Creating Routes
- Connecting the React to the Server
Handling CORS
Connecting to Different Rooms
Messaging
- Welcome Message
- Sending Message
Disconnect
Conclusion

Prerequisites

ES6 Syntax
Knowledge on React and Node
A Text Editor, Visual Studio Code or Atom preferably
NodeJS Installed already

What is Socket.io?

Socket.io is a JavaScript Library that allows bi-directional Secured Realtime communication between the browser and the server. Which means that if a user sends a data, the recipient(s) of that data would receive immediately, depending on the internet speed.

How it Works

According to Socket.io, The client will try to establish a WebSocket connection if possible, and will fall back on HTTP long polling if not. WebSocket Establishes the connection between the client and the server. Socket.io makes use of this connection the WebSocket brings to transfer data.

Let's Jump deep into the course of this article.

Getting Started

Open up the terminal in your desired folder, then Create a new folder and move into it:



mkdir react-chat-app
cd react-chat-app
npx create-react-app .

Navigate back to the projects root folder, initialize the project and install server dependencies:



npm init -y
npm i express socket.io concurrently nodemon

Concurrently helps in running more than command at the same time without creating another terminal. This would really help in running both our react and server side together in one terminal.

Nodemon is a tool that automatically restarts the server when changes are made to the file directory.

Setting up the Server

After all installations are complete, we create a server.js file in the projects root directory and require all necessary dependency:



const http = require("http");
const express = require("express");

Setting up our server for socket.io would not be the same as our normal express setup. According to socket.io documentation, we create our set up socket.io using node http server:



const app = express()
const server = http.createServer(app)
const io = socketio(server)

const PORT = process.env.PORT || 5000

server.listen(PORT, () => console.log(`Server is Quannected to Port ${PORT}`))

The constant PORT makes use of ES modules that checks if our app is deployed. If the app is not deployed, it would return 5000.

We need to add few lines of code to our script tag inside the package.json file, to enable us run our server using npm:



    "start": "node server.js",
    "server": "nodemon server",
    "dev": "concurrently \"npm run server\" \"cd client && npm start\""

Let's try out our app in our terminal:



npm run dev

Setting Up React

Move into react-chat-app and let's open up our terminal to install the dependencies we would be utilizing in this article:



npm i react-router socket.io-client query-string react-router-dom

Socket.io-client is a dependency created by socket.io to help connect to socket.io in the server.

Query-string helps us get parameter in our url from the address bar.

Connect Client to Server

This is where the our messaging app starts. Here, we would create a socket.io connection between our react app with our server app.

Creating the Server Connection

A listening event has to be made in the server.js for client to connect to the server:



io.on("connection", (socket) => {
    console.log('A Connection has been made')
    socket.on('disconnect', ()=> {
        console.log('A disconnection has been made')
    })
})

The constant io is listening for a connection from the client and when that connection made is, it creates a special socket for that particular connection. The socket, which is passed as a parameter in the arrow function, holds the properties of the connection which has just been made. In our Code, the socket ,which is the connection, listens for when it has been disconnected. And then socket is been removed since there has been a disconnection.

Refactoring React App

Before we can connect to the server, there are some refactoring we need to do to our new React app.

First we need to delete some of the pre-created file in our React app. Delete every thing in the src folder and create index.js in that same src folder. Add the following code to the index.js:



import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

To prevent react from yelling at us, we need to create the App.js in the same directory with the index.js. We need to add a functional component to our App.js that would return a simple welcome message:



import React from "react";

const App = () => {
    <h1>App Successfully rendered.</h1>
}
export default App;

Creating Routes

Let's create a folder named components in the src, this would contain all our different component in our React app. In that components folder, create a Home.js and a Chat.js file. When all has been created, navigate back to app.js to set up our routes:



import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./components/Home";
import Chat from "./components/Chat";

const App = () => (
  <Router>
    <Route path="/" exact component={Home}/>
    <Route path="/chat" component={Chat} />
  </Router>
);

export default App;

For clarity, theHome and Chat file is in the components and the components is in the src. The components has a s at the the end the word,take notes so you don't encounter an error 💗.

We created a route, that makes use of the functional component Homewhen accessing the homepage and the Chat when accessing the Chat page.

The Home component would contain a form that would redirect us to the Chat component of the specified group. Open up the Home.js file and set up our form:



import React, { useState } from "react";
import { Link } from "react-router-dom";

const Home = () => {
  const [name, setName] = useState("");
  const [room, setRoom] = useState("");

  return (
      <div>
        <h1>Home Page</h1>
        <div>
          <input
            placeholder="Name"
            type="text"
            onChange={(event) => setName(event.target.value)}
            required
          />
        </div>
        <div>
          <input
            placeholder="Room"
            type="text"
            onChange={(event) => setRoom(event.target.value)}
            required
          />
        </div>
        <Link
          onClick={(e) => (!name || !room ? e.preventDefault() : null)}
          to={`/chat?name=${name}&room=${room}`}
        >
          <button type="submit">
            Sign In
          </button>
        </Link>
      </div>
  );
};

export default Home;

To keep this article as short as possible, it would not be containing any style. You can add custom style if you prefer.

We imported useState to hold the user's inputted name and room in a State value. Read more on useState.

In all the input tags, we had an onChange event that listens for a change in input value and save it in the state. We made use of the Link, imported from react-router-dom, to redirect us to the Chat-page (passing name and room as a parameter) if and only if our name and room State Variable has a value.

Connecting the React to the Server

We have set up our form, the next step is to create a connect and a disconnect from the server in our chat.js:



import React, { useState, useEffect } from "react";
import queryString from "query-string";
import io from "socket.io-client";

let socket;

const Chat = ({ location }) => {
  const [name, setName] = useState("");
  const [room, setRoom] = useState("");
  const ENDPOINT = "http://localhost:5000";

  useEffect(() => {
    const { name, room } = queryString.parse(location.search);
    socket = io(ENDPOINT);
    setRoom(room);
    setName(name);
  }, [location.search]);

  return <div>Chat</div>;
};

export default Chat;

The App.js file passed down a prop to Chat.js,location , using react-router-dom and this location prop contains the url. Then we got the parameters (name and room) from the url using the query-string dependency and set them to a State Variable. The useEffect runs every time location.search changes value. Read more on useEffect .

Handling CORS

In the useEffect block, we created an instance of socket and passed in our Server's Endpoint http://localhost:5000. This would cause a breach in the Cross Origin Resource Sharing CORS Policy since we are trying to data between two different routes.

Since Socket.io V3, we need to explicitly enable CORS in our server to ensure the client successfully connect to the server.

Don't Panic🙂, We need to create options in the server.js Socket.io connection to permit the connection from the client. Since we have already declared the constant io, we just need to add the options to the connection:



const io = require("socket.io")(server, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
    allowedHeaders: ["my-custom-header"],
    credentials: true,
  },
});

Connecting to Different Rooms

We have to create a receiver in the server, waiting to receive new connection from the client. Create a new file user.js, in the same directory with our server's file,that would be in charge of managing our users:



let users = [];

exports.addUser = ({ id, name, room }) => {
  if (!name || !room) return { error: "name and room required." };
  const user = { id, name, room };

  users.push(user);

  return { user };
};

The users variable would contain all the users connected. We returned error if name or room is blank, else we would add the user to the array users and return the user.

We have to Create a listening event for client to join different room in our server.js:



const {addUser} = require('./user')
io.on("connection", (socket) => {

  socket.on("join", ({ name, room }, callBack) => {
    const { user, error } = addUser({ id: socket.id, name, room });

    if (error) return callBack(error);

    socket.join(user.room);
    callBack(null);
  });
//The rest of the code

socket.on listens for any connection from our client with the name "join" then expects name and room as a parameter from the client. The callback sends an error if any or it would just return null, *There must return * from the server.

We need to connect to the event join from the client and emit the inputted name and room as a parameter to the server.



useEffect(() => {
 // The rest of the code 
  socket.emit("join", { name, room }, (error) => {
    if (error) alert(error);
  });
}, [location.search]);

Messaging

Alright, Here we are😮.

Welcome Message

We have to emit a welcome message to the user when the user joins a room.

All our messages would be coming from the server. When the user sends a message, we have to first send that message to the server then send it back to the client. The server would emit the message and the client would receive it.

Navigate to chat.js to create the connection:



const [messages, setMessages] = useState([]);
useEffect(() => {
  socket.on("message", (message) => {
    setMessages((messages) => [...messages, message]);
  });
}, []);

We created another useEffect that receives all messages from the server and set them to messages state variable.
We need to render the messages on for the user in the return block. We need to use JSX to render all messages to the user:



return (
  <div>
    {messages.map((val, i) => {
      return (
        <div key={i}>
          {val.text}
          <br />
          {val.user}
        </div>
      );
    })}
  </div>
);

We mapped through the messages state variable, we specified the key as the index to avoid react error and we returned the text and user passed down from our server.
Let's Connect to the connection created by our client from our server.js:



io.on("connection", (socket) => {
  socket.on("join", ({ name, room }, callBack) => {

    //The rest of the code

    socket.emit("message", {
      user: "Admin",
      text: `Welocome to ${user.room}`,
    });

    // The rest of the code

We are emitting to message connection and we are passing the user and the text as parameters.

We also have to tell other users in the group that a new user has joined. Navigate to server.js:



socket.broadcast
  .to(user.room)
  .emit("message", { user: "Admin", text: `${user.name} has joined!` });

The client is always listening for an emit to message. The message is like the name or an identification for the connection.
The code we just wrote is broadcasting to other users in the room, telling them that a new user has just Joined the Group.

Sending Message

This is how sending of messages would be, We will get the message input from the user, send it to the server and then the server emits that message to everyone in the Group. Let's Open our chat.js and create the input field:



const handleSubmit = (e) => {
  e.preventDefault();
  if (message) {
    socket.emit("sendMessage", { message });
    setMessage("");
  } else alert("empty input");
};

return (
  <div>

    // The rest of the code

    <form action="" onSubmit={handleSubmit}>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <input type="submit" />
    </form>
  </div>
  );

We are emitting to a new socket event. It takes the message from the user and sends it to the newly created socket event sendMessage. After we've emitted the message to the server using sendMessageevent, Open your server.js and let's create the connection for the sendMessage event:



socket.on("join", ({ name, room }, callBack) => {

  //The rest of the code

  socket.on("sendMessage", ({ message }) => {
    io.to(user.room).emit("message", {
      user: user.name,
      text: message,
    });
  });
});

After we got the message from the client, we emitted that received message to everyone in the group.

Disconnect

This is last part of this article. After the user is done with chatting and would love to disconnect, we would have send a message to every one in the group, informing them that a user has just disconnected. Let's open our user.js file and create a function that would be in charge of removing users from the array:



exports.removeUser = (id) => {
  const index = users.findIndex((user) => user.id === id);
  return users[index];
};

The function removeUser would request for an id, find a user with that id and then returns that user.
We have to import removeUser in our server.js and emit a disconnection message to every one in the returned user group:



const { addUser, removeUser } = require("./user");
io.on("connection", (socket) => {
    // The rest of the code

    socket.on("disconnect", () => {
    const user = removeUser(socket.id);
    console.log(user);
    io.to(user.room).emit("message", {
      user: "Admin",
      text: `${user.name} just left the room`,
    });
    console.log("A disconnection has been made");
  });
 });

When you restart your server, you might get an error when you refresh the Chat page. The best thing to do is to login again from the Home page

Conclusion

Congratulations, We've Successfully Created a Realtime Chat App with React and Socket.io.

Here is the link to the GitHub repository. I almost forgot to Shout out to one of my best YouTubers He was a great help in this article.

Thanks for staying with me till the end💗. If you like to deploy this Chat app to Heroku, I have an article where I talked about Deploying React and Node app to Heroku.
Till We Cross Path, I remain, Fredrick Emmanuel (divofred)😁😁❤❤

DEPLOY REACT AND NODE APP TO HEROKU

Fredrick Emmanuel — Wed, 20 Oct 2021 07:02:16 +0000

Heroku is a platform where majority deploy their backend application. In recent times, Heroku has made it possible to deploy both our client and server side. This makes testing a lot more easier, in the sense that developers don't have to put their client side of the application in another platform and server in another. We would discuss this in great depths in this article.

Goal

This article aims at creating an understanding of the platform Heroku and simplify the deployment of both the client and server side on Heroku

Table of Content

Getting Started
Heroku
Deploy our Project
Conclusion

This article would not contain any project to build, so you need to have an already existing project. Your project should contain the frontend and the backend, WITHOUT ERRORS obviously . After you've gotten your project ready, let's dive right into this article

Let's briefly discuss the basic packages/frameworks that we would be utilizing.

Node

This is an Open Source JavaScript Framework for easy developing of scalable server-side and network applications. For more information, visit the Node official website.

React

This is a JavaScript Library created by Facebook, that helps in building Interactive User Interfaces. React can be used to build not just Web Applications but also Mobile Applications.

A very interesting node package that would help in your project is concurrently. Concurrently helps in running more than command at the same time without creating another terminal. This would really help in running both your react and server side together in one terminal locally.

Now here we are. We would be taking a brief look on what Heroku is, sit tight and lets dive in.

Heroku

What is Heroku?

Heroku is a cloud service platform whose popularity has grown in recent years. Heroku is so easy to use and that is why is one of programmers favorite. Heroku is a cloud platform that lets companies build, deliver, monitor and scale apps easily.

Installing Heroku

To install Heroku, We have to Download and Install Heroku CLI

Getting Started

It is very easy to Get Started with Heroku. Visit Heroku's official website, Sign Up if don't have an account already. The next step is to create a new Heroku App. At the right top corner, click on the new button and then create a new Heroku App

After our Heroku app has been created, we can now Deploy it.

Deploy Our Project

Make sure your have Heroku installed, by running the command

heroku --version

After We have confirmed that we have Heroku installed, we can now move into our Project.

In the server side of the project, open the package.json file and add the following code to our script

"script": {
        "start": "node server.js",
        "heroku-postbuild": "cd client && npm install && npm run build"
    }

heroku-postbuild is a command Heroku runs before running the start command. The postbuild command moves into the client folder in the project and runs npm install and then npm run build

Then add the following code to your server's file to create a middle-ware that makes use of the already built react app

const express = require("express");
const path = require("path");
const app = express();

//This will create a middleware.
//When you navigate to the root page, it would use the built react-app
app.use(express.static(path.resolve(__dirname, "./client/build")));

Your React App should be contained in a separate folder from your server side of the application. The client side of the application should be contained in a folder named client, in the same directory with your server file.

The next step is to run the following commands to push to Heroku

heroku login

Initialize a git repository

git init
heroku git:remote -a <heroku-app-name>

Commit and Deploy to Heroku

git add .
git commit -am "divofred-tutorials"
git push heroku master

Conclusion

We've been able to push our Application successfully to Heroku. If you encounter an error just run heroku logs --tails, This would output all success and errors encountered.

Till We Cross Path, I remain, Fredrick Emmanuel (divofred)😁😁❤❤

About Me

Fredrick Emmanuel — Fri, 08 Oct 2021 10:09:44 +0000

I am an Developer. Aspiring to be something more than I am right now, Meaning , I am also learning and studying to become greater.
Twitter => @divofred
Github => @divofred
Dev.to => @divofred

Python

Fredrick Emmanuel — Sun, 08 Mar 2020 07:58:45 +0000

Python is an interpreted, high-level, general-purpose programming language. Created by Guido van Rossum and first released in 1991, Python's design philosophy emphasizes code readability with its notable use of significant whitespace.

New Post

Fredrick Emmanuel — Sat, 07 Mar 2020 10:58:36 +0000

DEV Community: Fredrick Emmanuel

Integrating Google Calendar with OAuth2 in Node.js

📘 Integrating Google Calendar with OAuth2 in Node.js

1. 🚀 Create a Project in Google Cloud Console

2. 📡 Enable Google Calendar API

3. 🔑 Configure OAuth Consent Screen

4. 🛠️ Create OAuth 2.0 Credentials

5. 💻 Setting Up Node.js Project

Install Dependencies

⚙️ Config and Boilerplate

Configuring the .env File

6. 📝 Sample Code

7. 📋 Displaying Available Slots in HTML

8. 🛑 Common Errors & Fixes

❌ Error: No refresh token is set.

❌ Error: ETIMEDOUT

❌ Invalid Redirect URI

9. 🎯 Next Steps

✅ Conclusion

Mastering API Data Validation in Strapi: A Practical Guide

What is API data validation?

Importance of API data validation

URL Shortener using Express, Firebase, and Heroku

Goal

Prerequisites

Getting Started

Setting up Firebase

Creating a Project

Getting our Projects Details

Setting up the server

Shortening Links

Connecting our application to Firebase Database

Saving Data

Redirecting users to the Long URL

Deploying to Heroku

Changing our baseURL

Conclusion

How to Build a Realtime Group Chat Application with React and Socket.io

Goals

Table of Content

Prerequisites

What is Socket.io?

How it Works

Getting Started

Setting up the Server

Setting Up React

Connect Client to Server

Creating the Server Connection

Refactoring React App

Creating Routes

Connecting the React to the Server

Handling CORS

Connecting to Different Rooms

Messaging

Welcome Message

Sending Message

Disconnect

Conclusion

DEPLOY REACT AND NODE APP TO HEROKU

Goal

Table of Content

Node

React

Heroku

What is Heroku?

Installing Heroku

Getting Started

Deploy Our Project

Conclusion

About Me

Python

New Post

Configuring the `.env` File

❌ Error: `No refresh token is set.`

❌ Error: `ETIMEDOUT`

Changing our `baseURL`