But sometimes, deploying your perfectly working email function to the cloud leads to unexpected and frustrating errors. You build your backend, test it locally, and it works flawlessly. Then you deploy to the cloud, and suddenly your app stops sending emails completely.

In this article, you’ll learn exactly why your email setup fails on cloud platforms like Render or Heroku, the underlying networking rules causing the issue, and how to elegantly bypass these restrictions using Brevo's HTTP API.

Let’s dive right in.

Outline

• Prerequisites

• Tools We'll Be Using

• The Problem: Nodemailer and SMTP Blocking

• The "Modern" Trap: Domain Verification

• The Ultimate Solution: Brevo and HTTP APIs

• Backend Setup

• Brevo Configuration Setup

• Creating the Email Function

• Integrating the Function into an Express Route

• Conclusion

Prerequisites

To get the absolute most out of this tutorial, it’s important to have some basic knowledge of the following:

• JavaScript and Node.js: Having a good fundamental understanding of how JS works on the server side will make it easier to follow along with the project.

• REST APIs: You should have a basic understanding of how HTTP requests (like POST and GET) work using native fetch() in Node.js.

• Express.js: A little background on creating basic server routes will be helpful, as we'll build a real-world controller.

• A basic understanding of what Nodemailer is and how cloud hosting platforms (like Render or Heroku) operate.

Tools We’ll Be Using

In one of my recent projects, I created a complex authentication flow where users needed an OTP (One Time Password) sent to their email to complete registration. I set up Nodemailer, linked my Gmail, and tested it on localhost. Within seconds, the emails arrived perfectly.

But when I deployed my backend to Render, the entire signup flow broke. After doing some deep digging, I found out why it broke and how to fix it permanently. And now that I know how it works, I wanted to share it with you all.

The Problem: Nodemailer and SMTP Blocking

So what exactly is the issue?

Nodemailer is a very popular Node.js module that lets you send emails efficiently. Usually, developers use it to connect to services like Gmail or Mailtrap using SMTP (Simple Mail Transfer Protocol). When your code tries to send an email, Nodemailer opens a connection to the mail server using Port 587 (for STARTTLS) or Port 465 (for SSL).

But cloud providers like Render, Heroku, DigitalOcean, and AWS face a massive daily battle against automated spammers. Malicious users often spin up thousands of free-tier servers specifically to blast out millions of spam emails. If a cloud provider allows this, their entire network IP address block will get blacklisted by Gmail, Outlook, and Yahoo.

To protect their network reputation, cloud providers enacted a heavy-handed, silent rule: All outbound traffic on Ports 25, 465, and 587 is strictly blocked on free and entry-level tiers.

This means your server is literally trapped behind a firewall. If you check your server logs, you won't see an "Invalid Password" error. Instead, you'll see a timeout error that looks like this:

Error: connect ETIMEDOUT 142.250.102.108:587
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16)

Your code isn't broken – it's just being blocked at the network level!

The "Modern" Trap: Domain Verification

When developers hit this wall, they often try modern API-based email services like Resend or SendGrid. These are amazing tools, but they introduce a new problem for beginners: Strict Domain Authentication.

To use Resend in production, you must own a custom domain (like yourname.com) and configure DNS records (SPF, DKIM, and DMARC). If you don't own a domain, Resend's sandbox mode strictly restricts you to sending emails only to yourself. You can't send emails to your live users.

For a developer just trying to launch a portfolio project, buying a domain just to send test emails is a huge bottleneck.

The Ultimate Solution: Brevo and HTTP APIs

We need a solution that meets two criteria:

1. It must bypass the Port 587 firewall.

2. It must let us send emails to anyone without forcing us to buy a custom domain.

This is where the architectural difference between SMTP and REST APIs comes to the rescue. While SMTP is a dedicated protocol for routing mail, a REST API operates over standard web traffic using HTTPS (Port 443). Cloud providers can't block Port 443, because doing so would prevent your server from fetching data from databases or functioning as a web server entirely.

Enter Brevo (formerly Sendinblue). Brevo is a powerful email platform that allows you to send emails via a standard REST API. Best of all, their free tier (300 emails/day) allows Single Sender Verification. You just verify your standard Gmail address, and they let you send to anyone!

By sending a JSON payload via HTTPS to Brevo's API, your server routes the traffic out of the unrestricted Port 443, bypassing the Render firewall completely.

Now that you know the theory behind the tools we’ll be using, let’s move on to writing the code.

Backend Setup

First things first, you have to set up your environment. If you don't already have Node.js installed on your computer, head to their website to download and install it.

Start by running npm init -y in your terminal. This creates the package.json file which manages your project and stores all the dependencies.

Next, run npm install express dotenv.

You might be used to installing nodemailer for your email tasks. But because we are going to use the native Node.js fetch() API to talk to the Brevo API, you actually don't need to install any heavy email libraries at all! We want to keep our backend as lightweight as possible.

Brevo Configuration Setup

Before you write the email function, you first need to configure Brevo to get access to your API key.

1. Go to Brevo.com and create a free account.

2. During setup, they will ask you to add a Sender Email. Make sure you input your standard Gmail address. They will send you an email with a link to verify you own this address.

3. Once verified and inside the dashboard, click on your profile name in the top right corner, and select SMTP & API from the dropdown menu.

4. Go to the API Keys tab and click Generate a new API key. Give it a name like "MyWebApp".

Copy this generated key and store it safely in a .env file at the root of your project:

# .env file
EMAIL_USER = yourverifiedemail@gmail.com
BREVO_API_KEY = xkeysib-your-generated-api-key-goes-here

Creating the Email Function

Now that you’ve gotten your API key and set up your environment variables, all that remains is to start putting your backend code together.

Create a file named utils/email.js.

First, start by ensuring you can load your .env file so you can easily access the credentials you generated:

require("dotenv").config();

// We'll define the function to accept dynamic options
const sendEmail = async (options) => {
  const brevoApiKey = process.env.BREVO_API_KEY;
  const senderEmail = process.env.EMAIL_USER;

  // Validate that the keys actually exist
  if (!brevoApiKey || !senderEmail) {
    throw new Error("Missing Brevo credentials in environment variables.");
  }

Next on the line, you’ll need to structure your payload. This is the JSON object that tells Brevo exactly who is sending the email, who is receiving it, and what the content is. Here’s how you can do that:

  const payload = {
    sender: {
      name: "My Awesome Web App",
      email: senderEmail, // Must match your verified Brevo email
    },
    to: [
      {
        email: options.email, // The dynamic email address of the user receiving the email
      },
    ],
    subject: options.subject,
    htmlContent: options.html,
  };

In the code above, the payload object securely packages up your information. We pass in options.email, options.subject, and options.html so that we can reuse this single function for welcome emails, password resets, and notifications.

Now, create the actual network request that sends your data to the Brevo backend. We'll use the POST method. When the data is sent, it must be stringified into a JSON format.

  try {
    const response = await fetch("https://api.brevo.com/v3/smtp/email", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "api-key": brevoApiKey,
      },
      body: JSON.stringify(payload),
    });

    const result = await response.json();

    if (!response.ok) {
      throw new Error(`Brevo API Error: ${JSON.stringify(result)}`);
    }

    console.log(`Email successfully sent to ${options.email} via Brevo HTTP API!`);
  } catch (error) {
    console.error("Error details:", error.message);
  }
};

module.exports = sendEmail;

In the code above, after the payload is submitted, if the message is sent successfully, a success log will be displayed in your terminal. But if the message wasn’t successful – maybe due to a typo in your API key – an error message will be thrown to help you debug exactly what went wrong.

Integrating the Function into an Express Route

At this point, you've successfully built a robust email function. Let's see how you would actually use this in a real Express application.

Create an index.js file and set up a simple Express server route:

const express = require("express");
const sendEmail = require("./utils/email");
const app = express();

app.use(express.json()); // Middleware to parse JSON request bodies

app.post("/api/signup", async (req, res) => {
  const { username, email } = req.body;

  // 1. Save user to database (skipped for brevity)
  
  // 2. Generate a random OTP
  const otp = Math.floor(100000 + Math.random() * 900000);

  // 3. Send the email using our new Brevo function
  try {
    await sendEmail({
      email: email,
      subject: "Welcome! Here is your Verification Code",
      html: `
        <div style="font-family: sans-serif; text-align: center;">
          <h2>Welcome to My Awesome Web App, ${username}!</h2>
          <p>Please use the verification code below to complete your registration:</p>
          <h1 style="color: #2563eb; letter-spacing: 5px;">${otp}</h1>
          <p>This code will expire in 10 minutes.</p>
        </div>
      `,
    });

    res.status(201).json({ message: "User created and email sent!" });
  } catch (error) {
    res.status(500).json({ error: "Failed to send email." });
  }
});

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

And that is it! You can now hit this /api/signup endpoint from your React or Vue frontend, and it will instantly fire off a beautifully formatted email via Brevo's REST API.

Conclusion

As developers, encountering a bug that works locally but fails in production is a rite of passage. But the "Email Delivery Failed" timeout error is special. It teaches you that software engineering isn't just about writing clean syntax – it's about understanding the underlying infrastructure, network layers, and the security context of the environment your code runs in.

By swapping a protocol (SMTP) for an architectural pattern (REST API over HTTPS), you didn't just fix a bug. You successfully engineered a secure, free, and robust bypass around a cloud-level firewall without relying on heavy third-party NPM modules like Nodemailer.

If you've made it this far, I hope I've successfully shown you the importance of understanding network layers and how you can use HTTP APIs to send email messages directly from your web applications safely.

Thank you for reading!

That moment kicked off a massive shift in how healthcare gets delivered.

Telehealth became more than a workaround. It’s now a core part of modern care. As demand grows, developers are stepping up to build secure, real-time platforms that connect patients and providers from anywhere.

In this article, you’ll learn how to build a telehealth application with Stream’s React Video and Chat SDKs. You’ll set up authentication, create video calls, enable messaging, and design a functional user interface that mimics real-world telehealth workflows.

Let’s dive in.

Outline

• Introduction

• Prerequisites

• App Structure

• Project Setup

• Backend Setup

• Frontend Setup

• Stream Chat and Video Integration

• Chat and Video Function (Frontend)

• Project Demo

• Conclusion

Prerequisites

Before you start this tutorial, make sure you have:

• A basic understanding of React.

• Node.js and npm/yarn installed on your computer

• A free account with Stream

• Familiarity with Stream SDKs

• A basic understanding of Tailwind CSS for styling

• Experience with VS Code and Postman (for testing APIs)

App Structure

Before diving into the code, it’s helpful to understand how the app is structured.

# App Flow Structure

- Landing Page  
  - Navigation  
    - Home  
    - About  
    - Sign Up  
      - Verify Account  
        - Log In  
          - Dashboard  
            - Stream Chat  
            - Stream Video  
            - Log Out

Project Setup

Before getting started, create two folders: “Frontend” to handle the client-side code and “Backend” for the server-side logic. This separation allows you to manage both parts of your application efficiently.

Set Up React for the Frontend

Once the folders are created, you can set up the React application in the Frontend folder.

First, navigate to the Frontend directory using the command cd Frontend.

Now you can initialize your React project. You’ll use Vite, a fast build tool for React applications.

To create your React project, run the following command:

npm create vite@latest [project name] -- --template react

Next, navigate to your new project folder, using the command:

cd [project name]

Once there, install the required dependencies by running:

npm install

This command installs both the node_modules folder (which contains all your project's packages) and the package-lock.json file (which records exact versions of installed packages).

Next, you’ll need to install Tailwind CSS for styling. Follow the Tailwind Docs for step-by-step instructions.

Then, it’s time to set up the website. Using React, you’ll create the home sign-in/log-in pages. Both will be nested together using React-router-dom.

Here’s what the home page looks like:

Now, the user has a place to land whenever they visit the website.

Let’s set up the backend.

Backend Setup

Installing Required Packages

Before setting up your project's backend, it's important to define what your project needs to offer. This will help you install all the necessary packages in one go.

Start by moving into the backend folder using the command: cd Backend

Inside the Backend directory, initialize your Node.js project using npm install

This will create a package.json file, which stores metadata and dependencies for your project.

Next, install all the dependencies needed to build your backend. Run the following command:

npm i bcryptjs cookie-parser cors dotenv express jsonwebtoken mongoose nodemailer validator nodemon

Here’s a brief overview of what each package does:

• bcryptjs: Encrypts user passwords for secure storage.

• Cookie-parser: Handles cookies in your application.

• CORS: Middleware that enables cross-origin requests – essential for frontend-backend communication.

• dotenv: Loads environment variables from a .env file into process.env.

• Express: The core framework for building your server and API routes.

• jsonwebtoken: Generates and verifies JWT tokens for authentication.

• Mongoose: Connects your app to a MongoDB database.

• nodemailer: Handles sending emails from your application.

• Validator: Validates user inputs like email, strings, and so on.

• nodemon: Automatically restarts your server when changes are made to files.

Once your packages are installed, create two key files in the backend directory: App.js, which contains your app logic, middleware, and route handlers, and server.js, responsible for initializing and configuring your server.

Next, you have to update your package.json start script. Head to the package.json file in your backend directory and replace the default script:

"scripts": {
    "test": "echo\”Error: no test specified\" && exit 1”
  }

with this:

"scripts": {
    "start": "nodemon server.js"
  }

This setup allows you to run your server using nodemon, automatically reloading it when changes are made. This helps boost productivity during development.

To check if your backend setup is correct, open the server.js file and add a test log: console.log (“Any of your Log Message”). Then, head to your terminal in the backend directory, and run npm start. You should see the log message in the terminal, confirming that your backend is running.

App.js Setup

In the App.js file, start by importing the packages you initially installed.

const express = require("express");

const cors = require("cors");

const cookieParser = require("cookie-parser");

const app = express();


app.use(

  cors({

origin: [

   "http://localhost:5173",

],

credentials: true,

  })

);

app.use(express.json({ limit: "10kb" }));

app.use(cookieParser());

module.exports = app;

Here’s what the code above does:

The require statements import express, cors, and cookie-parser, which are essential for creating your backend server, handling cross-origin requests, and parsing cookies.

The const app = express(); command sets up a new instance of an Express application.

app.use(cors({ origin: ["http://localhost:5173"], credentials: true })); grants permission or allows requests from your frontend and enables cookie sharing between the frontend and backend of your application. This is important for authentication.

The app.use(express.json({ limit: "10kb" })); command is a middleware function that ensures the server can process incoming JSON payloads and protects against overly large requests, which could be used in DoS attacks.

The app.use(cookieParser()); command makes cookies available via req.cookies.

Last, the module.exports = app; command allows the app to be imported in other files, especially in server.js, which is where the app will be started.

Server.js Setup

Once App.js is set up, the next step is to create and configure your server in a new file called server.js.

Before doing that, ensure you have a MongoDB database set up. If you don’t have one yet, you can follow this video tutorial to set up a MongoDB database.

After setting up MongoDB, you will receive a username and password. Copy the password, head to your backend directory, and create a .env file to store it.

After you have stored the password, head back to complete your database setup.

Next, click on the “Create Database User” button, then click on the choose connection method option. Since we are using Node.js for this project, choose the “Drivers” option. This gives you the database connection string (you should see it at No. 3).

Then head to your .env and paste it there, and add auth immediately after you have “.net/”.

Here’s what it looks like:

mongodb+srv://<username>:<password>@cluster0.qrrtmhs.mongodb.net/auth?retryWrites=true&w=majority&appName=Cluster0

Lastly, whitelist your IP address. This ensures your backend can connect to MongoDB from your local machine or any environment during development.

To allow your application to connect to the database:

• Go to the "Network Access" section in the Security sidebar of your MongoDB dashboard.

• Click on “ADD IP ADDRESS.”

• Choose “Allow Access from Anywhere”, then click on Confirm.

At this point, you can set up your server.js

//server.js
require("dotenv").config();
const mongoose = require("mongoose");
const dotenv = require("dotenv"); //to Manage our environment variable

dotenv.config({ path: "./config.env" });
// console.log(process.env.NODE_ENV);

const app = require("./app");

const db = process.env.DB;
//connect the application to database using MongoDB

mongoose
  .connect(db)
  .then(() => {
    console.log("DB connection Successful");
  })
  .catch((err) => {
    console.log(err);
  });

const port = process.env.PORT || 3000;
// console.log(process.env.PORT)

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

The server.js file is responsible for handling all server-related functions and logic. From the code above, the server.js file loads the environment variables using dotenv, connects your backend to MongoDB using mongoose, and starts the Express server. It gets the database URL and port from the config.env file, connects to the database, then runs your application on the specified port (8000).

If the specified port is not found, it falls back to port 3000 and a confirmation message is printed to the console indicating that the server is up and running on the specified port.

Connect the Database to MongoDB Compass

First, download the MongoDB Compass app. (Go here to download and install: https://www.mongodb.com/try/download/compass). The MongoDB Compass app makes it easy for us to manage our data.

Once the installation is complete, open the app and click on Click to add new connection. Go to your .env file, copy the connection string you initially got when setting up MongoDB, paste it in the URL section, and then click on “connect.” This setup helps you manage your data when you create and delete users.

Set up an Advanced Error Handling Method

You’ll now create an advanced error-handling mechanism. To do so, create a utils folder in your backend, a catchAsync.js file in the utils folder, and add this code:

//catchAsync.js
module.exports = (fn) => {
  return (req, res, next) => {
    fn(req, res, next).catch(next);
  };
};

Next, create an appError.js file still in your utils folder. In the appError.js file, add the following command:

class AppError extends Error {
  constructor(message, statusCode) {
    super(message);

    this.statusCode = statusCode;
    this.status = `${statusCode}`.startsWith("4") ? "fail" : "error";
    this.isOperational = true;

    Error.captureStackTrace(this, this.constructor);
  }
}

module.exports = AppError;

The code above is helpful in tracking and tracing errors. It also provides you with the URL and file location where your error might be occurring, which helps with cleaner error handling and debugging.

Next, let’s create a global error handler. Start by creating a new folder in the backend directory, and name it “controller”. In the controller folder, create your global error handling file. You can name it anything you like. In this example, it’s called globalErrorHandler.js.

Your globalErrorHandler file will define several functions that handle specific error types, such as database issues, validation failures, or even JWT problems and return a nicely formatted error response for users. For the globalErrorHandler to work properly, you have to create a controller function.

So, next, create an errorController.js file (still inside the controller folder). The errorController.js file responds to the user whenever an error is caught, sending the error in JSON format.

globalErrorHandler.js:

// globalErrorHandler.js
const AppError = require("../utils/appError");

const handleCastErrorDB = (err) => {
  const message = `Invalid ${err.path}: ${err.value}.`;
  return new AppError(message, 400);
};

const handleDuplicateFieldsDB = (err) => {
  const value = err.keyValue ? JSON.stringify(err.keyValue) : "duplicate field";
  const message = `Duplicate field value: ${value}. Please use another value!`;
  return new AppError(message, 400);
};

const handleValidationErrorDB = (err) => {
  const errors = Object.values(err.errors).map((el) => el.message);
  const message = `Invalid input: ${errors.join(". ")}`;
  return new AppError(message, 400);
};

const handleJWTError = () =>
  new AppError("Invalid token. Please log in again!", 401);
const handleJWTExpiredError = () =>
  new AppError("Your token has expired! Please log in again.", 401);

module.exports = {
  handleCastErrorDB,
  handleDuplicateFieldsDB,
  handleValidationErrorDB,
  handleJWTError,
  handleJWTExpiredError,
};

Here’s what the code above does:

The const handleCastErrorDB = (err) =>.. section handles MongoDB CastError which usually happens when an invalid ID is passed, and returns a 400 Bad Request error response using your AppError class.

The const handleDuplicateFieldsDB = (err) =>... checks and handles MongoDB duplicate key errors, such as trying to register an email or username that’s already taken and returns a 400 Bad Request error.

The const handleValidationErrorDB = (err) =>... handles Mongoose validation errors (like required fields missing or wrong data types). It gathers all the individual validation error messages and combines them into one.

The const handleJWTError = () => and const handleJWTExpiredError = () => handle errors which might occur as a result of invalid, tampered, or expired JWT tokens and return a 401 Unauthorized error response.

The module.exports = {……}; section exports all the individual error handlers so they can be used in the errorController.js file.

errorController.js:

//errorController.js
const errorHandlers = require("./globalErrorHandler");

const {
  handleCastErrorDB,
  handleDuplicateFieldsDB,
  handleValidationErrorDB,
  handleJWTError,
  handleJWTExpiredError,
} = errorHandlers;

module.exports = (err, req, res, next) => {
  err.statusCode = err.statusCode || 500;
  err.status = err.status || "error";

  let error = { ...err, message: err.message };

  if (err.name === "CastError") error = handleCastErrorDB(err);
  if (err.code === 11000) error = handleDuplicateFieldsDB(err);
  if (err.name === "ValidationError") error = handleValidationErrorDB(err);
  if (err.name === "JsonWebTokenError") error = handleJWTError();
  if (err.name === "TokenExpiredError") error = handleJWTExpiredError();

  res.status(error.statusCode).json({
    status: error.status,
    message: error.message,
    ...(process.env.NODE_ENV === "production" && { error, stack: err.stack }),
  });
};

To ensure your error-handling function works properly, head to your App.js and add the command:

//import command
const globalErrorHandler = require("./controller/errorController");
const AppError = require("./utils/appError");

//Catch unknown routes
app.all("/{*any}", (req, res, next) => {
  next(new AppError(`Can't find ${req.originalUrl} on this server!`, 404)); });

app.use(globalErrorHandler);

This ensures that all errors are properly handled and sends the error response to the user.

Create User Model

To build a user model, create a new folder in the backend directory and name it “model.” Inside the model folder, create a new file named userModel.js.

The userModel.js file is built essentially for user authentication and security. It provides a validation-rich schema for managing users using Mongoose, which maps how user data is structured in the MongoDB database. It includes validations, password hashing, and methods to compare user passwords securely.

//userModel.js
const mongoose = require("mongoose");
const validator = require("validator");
const bcrypt = require("bcryptjs");

const userSchema = new mongoose.Schema(
  {
    username: {type: String, required: [true, "Please provide username"], trim: true, minlength: 3, maxlength: 30, index: true,},
    email: {type: String, required: [true, "Please Provide an email"], unique: true, lowercase: true, validate: [validator.isEmail, "Please provide a valid email"],},
    password: {type: String, required: [true, "Please provide a Password"], minlength: 8, select: false,},
    passwordConfirm: {type: String, required: [true, "Please confirm your Password"],
     validate: {validator: function (el) {return el === this.password;},
        message: "Passwords do not match",
      },
    },
    isVerified: {type: Boolean, default: false,}, otp: String,
    otpExpires: Date,
     resetPasswordOTP: String,
      resetPasswordOTPExpires: Date,
    createdAt: {type: Date, default: Date.now,},}, { timestamps: true });

// Hash password before saving
userSchema.pre("save", async function (next) {
  if (!this.isModified("password")) return next();

  this.password = await bcrypt.hash(this.password, 12);
  this.passwordConfirm = undefined; // Remove passwordConfirm before saving
  next();
});

const User = mongoose.model("User", userSchema);
module.exports = User;

Auth Controller

Now, you can create logic that regulates your user's authentication process. This authentication logic consists of the sign-up, sign-in (log-in), OTP, and so on.

To do so, first head to your controller folder and create a new file. Call it authController.js because it handles the authentication flow of your project.

After you’ve created the file, you’ll create your sign-up function.

//import
const User = require("../model/userModel");
const AppError = require("../utils/appError");
const catchAsync = require("../utils/catchAsync");
const generateOtp = require("../utils/generateOtp");
const jwt = require("jsonwebtoken");
const sendEmail = require("../utils/email")

exports.signup = catchAsync(async (req, res, next) => {
  const { email, password, passwordConfirm, username } = req.body;

  const existingUser = await User.findOne({ email });

  if (existingUser) return next(new AppError("Email already registered", 400));

  const otp = generateOtp();

  const otpExpires = Date.now() + 24 60 60 * 1000; //when thhe otp will expire (1 day)

  const newUser = await User.create({
    username,
    email,
    password,
    passwordConfirm,
    otp,
    otpExpires,
  });

  //configure email sending functionality
  try {
    await sendEmail({
      email: newUser.email,
      subject: "OTP for email Verification",
      html: `<h1>Your OTP is : ${otp}</h1>`,
    });

    createSendToken(newUser, 200, res, "Registration successful");
  } catch (error) {
    console.error("Email send error:", error);
    await User.findByIdAndDelete(newUser.id);
    return next(
      new AppError("There is an error sending the email. Try again", 500)
    );
  }
});

const { email, password, passwordConfirm, username } = req.body; extracts the necessary registration details from the incoming request: email, password, password confirmation, and username during user sign-up.

const existingUser = await User.findOne({ email }); checks the database to see if a user already exists with the given email. If yes, it sends an error response using your AppError utility.

const otp = generateOtp(); generates the OTP, and const otpExpires = Date.now()….. is used to set the OTP to expire at a specified time or day.

With const newUser = await User.create({…});, the new user is saved in MongoDB with their credentials and the OTP info, with the password automatically hashed.

await sendEmail({…}); sends an email to the user. This email contains their sign-in OTP. If the email is sent successfully, createSendToken(newUser, 200, res, "Registration successful"); (which is a utility function) generates a JWT token and sends it in the response with a success message.

If the email fails to send or something goes wrong, await User.findByIdAndDelete(newUser.id); deletes the user from the database to keep things clean, and an error message of There is an error sending the email. Try again", 500 is returned.

Generate OTP

To ensure that your users' OTP is successfully sent to them, in the utils folder, create a new file and name it generateOtp.js. Then add the code:

module.exports = () => {
  return Math.floor(1000 + Math.random() * 9000).toString();
};

The code above is a function that generates a user's random 4-digit OTP and returns it as a string.

After completing the code above, go to your authController.js and ensure you import the generateOtp.js in the import section.

Create User Token

Next, the user sign-in token will be created, and it will be assigned to the user upon sign-in.

const signToken = (userId) => {
  return jwt.sign({ id: userId }, process.env.JWT_SECRET, {
    expiresIn: process.env.JWT_EXPIRES_IN || "90d",
  });
};

//function to create the token
const createSendToken = (user, statusCode, res, message) => {
  const token = signToken(user._id);

  //function to generate the cookie
  const cookieOptions = {
    expires: new Date(
      Date.now() + process.env.JWT_COOKIE_EXPIRES_IN 24 60 60 1000
    ),

    httponly: true,
    secure: process.env.NODE_ENV === "production", //only secure in production
    sameSite: process.env.NODE_ENV === "production" ? "none" : "Lax",
  };

  res.cookie("token", token, cookieOptions);

  user.password = undefined;
  user.passwordConfirm = undefined;
  user.otp = undefined;

Before the code above can work perfectly, create a JWT in your .env file.

//.env
JWT_SECRET = kaklsdolrnnhjfsnlsoijfbwhjsioennbandksd;
JWT_EXPIRES_IN = 90d
JWT_COOKIE_EXPIRES_IN = 90

The code above is how the .env file should look. Your JWT_SECRET can be anything, just as you can see in the code.

Note: The user token creation logic should run before the sign-in logic. So in that case, the signToken and createSendToken logic should be placed at the top before the signup logic.

Send Email

Next, you need to configure your email sending functionality so you can automatically send the user's OTP to their email whenever they sign in. To configure the email, head to the utils folder, create a new file, and give it a name. In this example, the name is email.js.

In email.js, we will send emails using the nodemailer package and Gmail as a provider.

//email.js
const nodemailer = require('nodemailer');

const sendEmail = async (options) => {
  const transporter = nodemailer.createTransport({
    service: 'Gmail',
    auth: {
      user: process.env.HOST_EMAIL,
      pass: process.env.EMAIL_PASS
    }
  })

  //defining email option and structure

  const mailOptions = {
    from: `"{HOST Name}" <{HOST Email} >`,
    to: options.email,
    subject: options.subject,
    html: options.html,
  };
  await transporter.sendMail(mailOptions);
};

module.exports = sendEmail;

From the code above, the const nodemailer = require('nodemailer'); command imports the nodemailer package. This is a popular Node.js library for sending emails.

The const transporter = nodemailer.createTransport({…..}) is an email transporter. Since we will be using the Gmail service provider, service will be assigned to Gmail and auth pulls your Gmail address and password from the .env file where it’s stored.

Note: The password is not your actual Gmail password but rather your Gmail app password. You can see how you can get your Gmail password here.

Once you’ve successfully gotten your Gmail app password, store it in your .env file.

Route Creation

At this point, you have finished setting up your project's signup function. Next, you need to test whether your signup works properly using Postman. But before that, let’s set up and define a route where the signup function will be executed.

To set up your route, create a new folder in your backend directory named "routes" and a file named userRouter.js.

const express = require("express");
const {signup} = require(“../controller/authController”);

const router = express.Router();
router.post("/signup", signup);

module.exports = router;

Next, go to your App.js file and add the router to it.

const userRouter = require("./routes/userRouters"); //Route import statement
app.use("/api/v1/users", userRouter) //common route for all auth, i.e sign up, log in, forget password, etc.

After setting up your routes, you can test your signup to see if it works. This is a post request, and the route URL will be http://localhost:8000/api/v1/users/signup.

The image above shows that the signup function works perfectly with a statusCode of 200 and an OTP code being sent to the user’s email.

Congratulations on reaching this point! You can check your MongoDB database to see if the user is displayed there.

From the image above, you can see that the user details are obtained and the password is in an encrypted form, which ensures the user credentials are safe.

Create a Verify Account Controller Function

In this section, you’ll create a Verify Account controller function. This function verifies a user’s account using the OTP code sent to their email address.

First, go to your authController.js file and add:

exports.verifyAccount = catchAsync(async (req, res, next) => {
  const { email, otp } = req.body;

  if (!email || !otp) {
    return next(new AppError("Email and OTP are required", 400));
  }

  const user = await User.findOne({ email });

  if (!user) {
    return next(new AppError("No user found with this email", 404));
  }

  if (user.otp !== otp) {
    return next(new AppError("Invalid OTP", 400));
  }

  if (Date.now() > user.otpExpires) {
    return next(
      new AppError("OTP has expired. Please request a new OTP.", 400)
    );
  }

  user.isVerified = true;
  user.otp = undefined;
  user.otpExpires = undefined;

  await user.save({ validateBeforeSave: false });

  // ✅ Optionally return a response without logging in
  res.status(200).json({
    status: "success",
    message: "Email has been verified",
  });
});

Next, create a middleware function to authenticate the currently logged-in user.

In your backend directory, create a new folder called middlewares. Inside the middlewares folder, create a file named isAuthenticated.js.

Add the following code:

//isAuthenticated.js
const jwt = require("jsonwebtoken");
const catchAsync = require("../utils/catchAsync");
const AppError = require("../utils/appError");
const User = require("../model/userModel");

const isAuthenticated = catchAsync(async (req, res, next) => {
  let token;

  // 1. Retrieve token from cookies or Authorization header
  if (req.cookies?.token) {
    token = req.cookies.token;
  } else if (req.headers.authorization?.startsWith("Bearer")) {
    token = req.headers.authorization.split(" ")[1];
  }

  if (!token) {
    return next(
      new AppError(
        "You are not logged in. Please log in to access this resource.",
        401
      )
    );
  }

  // 2. Verify token
  let decoded;
  try {
    decoded = jwt.verify(token, process.env.JWT_SECRET);
  } catch (err) {
    return next(
      new AppError("Invalid or expired token. Please log in again.", 401)
    );
  }

// 3. Confirm user still exists in database
  const currentUser = await User.findById(decoded._id);
  if (!currentUser) {
    return next(
      new AppError("User linked to this token no longer exists.", 401)
    );
  }

  // 4. Attach user info to request
  req.user = currentUser;
  req.user = {
    id: currentUser.id,
    name: currentUser.name,
  };

  next();
});

module.exports = isAuthenticated;
```
Now, go to your `userRouter.js` file and add the route for the verify account function:
```
const { verifyAccount} = require("../controller/authController");
const isAuthenticated = require("../middlewares/isAuthenticated");
router.post("/verify", isAuthenticated, verifyAccount);

Here is what these two sets of code are doing:

When a user sends a request to the /verify route, the isAuthenticated middleware runs first. It checks whether a valid token exists in the cookie or authorization header. If no token is found, it throws an error: You are not logged in. Please log in to access this resource.

If a token is found, it verifies the token and checks if the associated user still exists. If not, another error is thrown: "User linked to this token no longer exists."

If the user exists and the token is valid, their details are attached to the request (req.user). The request then proceeds to the verifyAccount controller, which handles OTP verification.

You can test this endpoint using Postman with a POST request to: http://localhost:8000/api/v1/users/verify

The image above shows that the verify token function is working well, and a status code of 200 is displayed.

Login Function

If you’ve reached this point, you’ve successfully signed up and verified a user’s account.

Now it’s time to create the login function, which allows a verified user to access their account. Here’s how you can do that:

Go to your authController.js file and create your login function by adding the following:

exports.login = catchAsync(async (req, res, next) => {
  const { email, password } = req.body;

  // 1. Validate email & password presence
  if (!email || !password) {
    return next(new AppError("Please provide email and password", 400));
  }

  // 2. Check if user exists and include password
  const user = await User.findOne({ email }).select("+password");
  if (!user || !(await user.correctPassword(password, user.password))) {
    return next(new AppError("Incorrect email or password", 401));
  }

  // 3. Create JWT token
  const token = signToken(user._id);

  // 4. Configure cookie options
  const cookieOptions = {
    expires: new Date(
      Date.now() +
        (parseInt(process.env.JWT_COOKIE_EXPIRES_IN, 10) || 90) 24 60 60 1000
    ),
    httpOnly: true,
    // secure: process.env.NODE_ENV === "production",
    // sameSite: process.env.NODE_ENV === "production" ?
    //  "None" : "Lax",

    //set to false during or for local HTTP and cross-origin
    secure: false,
    sameSite: "Lax",
  };

  // 5. Send cookie
  res.cookie("token", token, cookieOptions);

});

if (!email || !password) {…} checks if the user actually provided both an email and a password. If not, it returns the error: Please provide email and password", 400.

const user = await User.findOne({ email }).select("+password"); searches the database for a user with the provided email and explicitly includes the password field, since it’s normally hidden by default in the schema.

if (!user || !(await user.correctPassword(…))) {…} checks if the user exists and if the password entered matches the one stored in the database (after hashing comparison). If either is wrong, it throws: Incorrect email or password.

The line signToken(user._id) generates a JWT using the user's unique ID. The cookieOptions object configures how the cookie behaves – it sets the cookie to expire after a specific number of days defined in the .env file, marks it as httpOnly to prevent JavaScript access for security, sets secure to false since the app is currently in development, and uses sameSite: "Lax" to allow cross-origin requests during local testing.

Finally, res.cookie(...) sends the token as a cookie attached to the HTTP response, enabling the client to store the token for authentication purposes.

From the code above, you may have noticed that the password stored in the database is hashed for security reasons. This means it looks completely different from the user's password when logging in. So, even if a user types in the correct password, it won't match the stored hash directly through a simple comparison.

To fix this, you need to compare the entered password with the hashed one using the bcryptjs package.

Head over to your userModel.js file and create a method that handles password comparison. This method will take the plain text password provided by the user and compare it to the hashed password stored in the database.

//userModel.js
//create a method responsible for comparing the password stored in the database

userSchema.methods.correctPassword = async function (password, userPassword) {
  return await bcrypt.compare(password, userPassword);
};

This correctPassword method uses bcrypt.compare(), which internally hashes the plain password and checks if it matches the stored hashed version. This ensures that login validation works correctly and securely, even though the actual password is not stored in plain text.

Next, add the Login functionality to the userRouter.js file.

const {login} = require("../controller/authController");
const isAuthenticated = require("../middlewares/isAuthenticated");

router.post("/login", login);

You can test this endpoint using Postman with a POST request to: http://localhost:8000/api/v1/users/login

Logout Function

At this point, you can implement the logout function to end a user's session securely. To do this, navigate to your authController.js file and add the following function:

//creating a log out function
exports.logout = catchAsync(async (req, res, next) => {
  res.cookie("token", "loggedout", {
    expires: new Date(0),
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
  });

  res.status(200).json({
    status: "success",
    message: "Logged out successfully",
  });
});

This function works by overwriting the authentication cookie named token with the value "loggedout" and setting its expiration time to the past using new Date(0). This effectively invalidates the cookie and removes it from the browser.

The httpOnly: true flag ensures that the cookie cannot be accessed via JavaScript, which protects it from XSS attacks, while the secure flag ensures that the cookie is only sent over HTTPS in a production environment. Once the cookie is cleared, a success response is returned with the message "Logged out successfully" to confirm the action.

Next, add the logout functionality to your route:

const {logout} = require("../controller/authController");
const isAuthenticated = require("../middlewares/isAuthenticated");

router.post("/logout", logout);

Then, head to Postman to test your logout function and see if it works.

Frontend Setup

Now that your backend is up and running, you can integrate it into your frontend application.

First, navigate to the frontend directory using the command cd Frontend.

Create a new folder in the src folder where your authentication-related files will live. Depending on your preference or app structure, you can name it something like auth or pages. Then, create a new file called NewUser. js. This file will handle user signup functionality.

import axios from 'axios';
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Loader } from 'lucide-react';
import { useDispatch } from 'react-redux';
import { setAuthUser, setPendingEmail } from '../../../../store/authSlice';

const API_URL = import.meta.env.VITE_API_URL;

function NewUser() {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const [loading, setLoading] = useState(false);

  const [formData, setFormData] = useState({
    username: '',
    email: '',
    password: '',
    passwordConfirm: '',
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const submitHandler = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const response = await axios.post(`${API_URL}/users/signup`, formData, {
        withCredentials: true,
      });
      const user = response.data.data.user;
      dispatch(setAuthUser(user));
      dispatch(setPendingEmail(formData.email)); // Save email for OTP
      navigate('/verifyAcct'); // Navigate to OTP verification page
    } catch (error) {
      alert(error.response?.data?.message || 'Signup failed');
    } finally {
      setLoading(false);
    }
  };

  return (
<div>
// visit the frontend Github repository to see the remaining code for the OTP Verification

https://github.com/Derekvibe/Telehealth_Frontend/blob/main/src/pages/Auth/Join/NewUser.jsx
    </div>
  );
}

export default NewUser;

The code above renders a signup form with fields for username, email, password and passwordConfirm. When the user submits the form, the frontend sends a POST request to the backend’s /users/signup endpoint using Axios. The withCredentials: true option ensures cookies like the auth token are properly set by the backend.

If the signup is successful, the user data is dispatched into Redux using setAuthUser(), and their email is saved with setPendingEmail() so it can be used during OTP verification. Then, the user is redirected to the /verifyAcct route, where they can enter their OTP.

OTP Verification Page

The OTP verification page is the next step in the user authentication process. Once a user signs up, they are redirected to enter the 4-digit OTP sent to their email. This verifies their account before allowing login access.

import React, { useState, useRef, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate, Link } from 'react-router-dom';
import axios from 'axios';
import { clearPendingEmail } from '../../../../store/authSlice';

const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000/api'; // adjust as needed

function VerifyAcct() {
  const [code, setCode] = useState(['', '', '', '']);
  const [loading, setLoading] = useState(false);
  const [resendLoading, setResendLoading] = useState(false);
  const [timer, setTimer] = useState(60);

  const inputsRef = useRef([]);
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const email = useSelector((state) => state.auth.pendingEmail);

  useEffect(() => {
    let interval;
    if (timer > 0) {
      interval = setInterval(() => setTimer((prev) => prev - 1), 1000);
    }
    return () => clearInterval(interval);
  }, [timer]);

  const handleChange = (value, index) => {
    if (!/^\d*$/.test(value)) return;
    const newCode = [...code];
// visit the frontend Github repository to see the remaining code for the OTP Verification
https://github.com/Derekvibe/Telehealth_Frontend/blob/main/src/pages/Auth/login/VerifyAcct.jsx
}
export default VerifyAcct;

Here’s what the code does:

The OTP is stored as an array of 4 characters ([‘ ‘, ‘ ‘, ‘ ‘, ‘ ‘]). Each box only accepts digits, and focus automatically moves to the next input as the user types in the digit. The focus returns to the previous input box if the user presses the backspace button on an empty box.

When the OTP has been added and the form is submitted, the 4-digit code is joined into a string and an HTTP POST request is made to the backend /user/verify/ endpoint along with the stored email and OTP. If the verification is successful, the user is alerted and redirected to the login page, and if not, an error is shown.

Log In

Now you can create the login interface for your application. First, create a Login.jsx file and input the code:

//Login.Jsx

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import axios from 'axios';

const API_URL = import.meta.env.VITE_API_URL || 'https://telehealth-backend-2m1f.onrender.com/api/v1';

function Join() {
  const [formData, setFormData] = useState({ email: '', password: '' });
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const navigate = useNavigate();

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleLogin = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    try {
      const res = await axios.post(`${API_URL}/users/login`, formData, {
        withCredentials: true,
      });

      if (res.data.status === 'success') {
        const { token, user, streamToken } = res.data;

        // Save to localStorage
        localStorage.setItem('authToken', token);
        localStorage.setItem('user', JSON.stringify(user));
        localStorage.setItem('streamToken', streamToken);

        navigate('/dashboard');
      }
    } catch (err) {
      console.error(err);
      setError(
        err.response?.data?.message || 'Something went wrong. Please try again.'
      );
    } finally {
      setLoading(false);
    }
  };

  return (
<div>
{// visit the frontend Github repository to see the remaining code for the OTP Verification
https://github.com/Derekvibe/Telehealth_Frontend/blob/main/src/pages/Auth/login/Login.jsx
 </div>
);
}

The Export default Join; component allows a registered and verified user to log into your application using their email and password. It handles form submission, talks to the backend, and securely stores user data if login is successful.

handleChange() updates the email or password field as the user types.

handleLogin() is triggered when the login form is submitted. When the login button is triggered, it sends a Post request to /users/login with the form data, which includes {withCredentials: true} to enable cookie handling.

If login is successful, it extracts the JWT token, user data, and Stream Chat token from the response and stores them in the localStorage so the user stays logged in across sessions. Then it redirects the user to the dashboard page using navigate(‘/dashboard’).

Set Up the Frontend Route

Just as you set up the backend route, you have to do the same for the frontend.

Head to App.jsx. Before adding the route, make sure you have installed the react-router-dom package. If not, run this command in the frontend terminal:

npm install react-router-dom

Then, add the command to your App.jsx file:

import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import HomeIndex from './pages/Home/HomeIndex';
import Hero from './pages/Home/Hero';

//Authentication Section
import NewUser from './pages/Auth/Join/NewUser';
import Login from './pages/Auth/login/Login'
import VerifyAcct from './pages/Auth/login/VerifyAcct';

// Dashboard
import Dashboard from './pages/Dashboard/Dashboard';
import VideoStream from './components/VideoStream';

const router = createBrowserRouter([
  {
    path: '/',
    element: <HomeIndex />,
    children: [
      { index: true, element: <Hero /> }
    ],
  },

  {
    path: 'signup',
    element: <NewUser />,
    children: [
      { index: true, element: <NewUser /> }
    ],
  },

  {
    path: 'login',
    element: <Login />,
    children: [
      {index:true, element:<Login />}
    ]
  },

]);
{// visit the frontend Github repository to see the remaining code for the OTP Verification
https://github.com/Derekvibe/Telehealth_Frontend/blob/main/src/App.jsx}

function App() {
  return (
    <div className='border border-red-700 w-full min-w-[100vw] min-h-[100vh]'>
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

Stream Chat and Video Integration

Before proceeding to the dashboard, let’s integrate the Stream Chat and Video functionality into the project.

First, create a free Stream account, start a new project in your dashboard, and get your APP KEY and API_SECRET.

STREAM_API_KEY=your_app_key
STREAM_API_SECRET=your_api_secret

Watch the Stream Chat React Quick Start Guide to see how you can set it up.

Next, store your Stream APP KEY and API_SECRET in your .env.

Install Stream Packages (Frontend)

Now, install the Stream Chat and Video packages in your terminal.

npm install stream-chat stream-chat-react
npm install @stream-io/video-react-sdk
npm install @stream-io/stream-chat-css

Stream Token Handler

First, create a new file in your frontend Src directory and name it. In this example, it’s StreamContext.jsx. This file sets up a context to fetch and manage the Stream Chat token on login and includes logout functionality.

import React, { createContext, useContext, useEffect, useState } from "react";
import axios from "axios";

const API_URL = import.meta.env.VITE_API_URL || 'https://telehealth-backend-2m1f.onrender.com/api/v1';

// 1. Create the context
const StreamContext = createContext();

// 2. Provider component
export const StreamProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [token, setToken] = useState(null);

  useEffect(() => {
    const fetchToken = async () => {
      try {
        const res = await axios.get(`${API_URL}/stream/get-token`, {
          withCredentials: true,
        });

        if (res.data?.user && res.data?.token) {
          setUser(res.data.user);
          setToken(res.data.token);
          console.log("Stream user/token:", res.data);
        } else {
          console.error("Token or user missing in response:", res.data);
        }
      } catch (error) {
        console.error("Error fetching Stream token:", error);
      }
    };

    fetchToken();
  }, []);

  //Log out Functionality
  const logout = async () => {
    try {
      await axios.post(`${API_URL}/users/logout`, {},
        {
          withCredentials: true
        });

      // Clear localStorage
      localStorage.removeItem('authToken');
      localStorage.removeItem('user');
      localStorage.removeItem('streamToken');

      // Clear context
      setUser(null);
      setToken(null);
    } catch (error) {
      console.error("Logout failed", error);
    }
  };

  // Expose Logout with capital L
  return (
    <StreamContext.Provider value={{ user, token, Logout:logout }}>
      {children}
    </StreamContext.Provider>
  );
};

// 3. Custom hook for easy access
export const useStream = () => useContext(StreamContext);

The code above creates a StreamContext using React’s Context API. In the useEffect section, it makes a GET request to /stream/get-token to fetch the authenticated user and their Stream token. Then it stores them in user and token states. It also provides the user/token through the context so that any component that needs it can make use of it.

Finally, it adds a Logout method that hits the logout endpoint and clears all stored auth data from localStorage.

Next, open your main.jsx and wrap your entire application with the StreamProvider so all child components can access the Stream context.

// main.jsx
import { createRoot } from 'react-dom/client';
import { StrictMode } from 'react';
import App from './App';
import { StreamProvider } from './components/StreamContext';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <StreamProvider>
      <App />
    </StreamProvider>
  </StrictMode>
);

Set Up Stream API

After successfully creating the streamContent, the next step is to set up the Stream API. This will be the endpoint from which the user ID and user Stream token can be generated and fetched during login.

To set it up, navigate to your backend directory by running cd Backend in your terminal. Then install the Stream package using the command:

npm install getstream
npm install stream-chat stream-chat-react

Open your .env file and add your Stream API KEY and API_SECRET:

STREAM_API_KEY=your_app_key
STREAM_API_SECRET=your_api_secret

Next, open your authController.js and create your Stream Chat logic:

//Initialize the Stream Client
const {StreamChat} = require("stream-chat");
const streamClient = StreamChat.getInstance(
  process.env.STREAM_API_KEY,
  process.env.STREAM_API_SECRET
);

// Modifies the `createSendToken to include `streamToken`
const createSendToken = (user, statusCode, res, message) => {
……
const streamToken = streamClient.createToken(user._id.toString());

  //structure of the cookie response when sent to the user
  res.status(statusCode).json({
    status: "success",
    message,
    token,
    streamToken,
    data: {
      user: {
        id: user._id.toString(),
        name: user.username,
      },
    },
  });
};

//login functionality
exports.login = catchAsync(async (req, res, next) => {
 {…………………..}

// Generate Stream token
  await streamClient.upsertUser({
    id: user._id.toString(),
    name: user.username,
  });
  const streamToken = streamClient.createToken(user._id.toString());

user.password = undefined;

  res.status(200).json({
    status: "success",
    message: "Login successful",
    token,
    user: {
      id: user._id.toString(),
      name: user.username,
    },
    streamToken,
  });

streamRoutes Endpoint

Next, create an endpoint from which the Stream token can be called. To do this, go to your routes folder and create a new file called streamRoutes.js. In streamRoutes.js, add the command:

const express = require("express");
const { StreamChat } = require("stream-chat");

const protect = require("../middlewares/protect");

const router = express.Router();

const apiKey = process.env.STREAM_API_KEY;
const apiSecret = process.env.STREAM_API_SECRET;

if (!apiKey || !apiSecret) {
  throw new Error(
    "Missing Stream credentials. Check your environment variables."
  );
}

const streamClient = StreamChat.getInstance(apiKey, apiSecret);

router.get("/get-token", protect, async (req, res) => {
  try {
    const { id, username } = req.user || {};
    console.log(req.user.id, "User");
    // TRY LOGGING THE ID AND NAME FROM YOUR REQUEST FIRST

    if (!id || !username) {
      return res.status(400).json({ error: "Invalid user data" });
    }

    // const userId = _id.toString();
    const user = { id, username };

    // Ensure user exists in Stream backend
    await streamClient.upsertUser(user);

    // Add user to my_general_chat channel
    const channel = streamClient.channel("messaging", "my_general_chat");
    await channel.addMembers([id]);


    // Generate token
    const token = streamClient.createToken(id);
    res.status(200).json({ token, user });
  } catch (error) {
    console.error("Stream token generation error:", error);
    res.status(500).json({ error: "Failed to generate Stream token" });
  }
});

/**
 * @route   POST /api/stream/token
 * @desc    Generate a Stream token for any userId from request body (no auth)
 * @access  Public
 */
router.post("/token", async (req, res) => {
  try {
    const { userId, name } = req.body;

    if (!userId) {
      return res.status(400).json({ error: "userId is required" });
    }

    const userName = name || "Anonymous";
    const user = { id: userId, name: userName };

    await streamClient.upsertUser(user);

    // Add user to my_general_chat channel
    const channel = streamClient.channel("messaging", "my_general_chat");
    await channel.addMembers([userId]);


    const token = streamClient.createToken(userId);

    res.status(200).json({
      token,
      user: {
        id: userId,
        name: name,
        role: "admin",
        image: `https://getstream.io/random_png/?name=${name}`,
      },
    });
  } catch (error) {
    console.error("Public token generation error:", error);
    res.status(500).json({ error: "Failed to generate token" });
  }
});

module.exports = router;

User Logout Endpoint

Go to your authController.js and create a functionality that handles logging out the user:

exports.logout = catchAsync(async (req, res, next) => {
  res.cookie("token", "loggedout", {
    expires: new Date(0),
    httpOnly: true,
    secure: process.env.NODE_ENV === "production",
  });

  res.status(200).json({
    status: "success",
    message: "Logged out successfully",
  });
});

Then register your logout route to your userRouters.js:

const express = require("express");
const {logout}= require("../controller/authController");
const isAuthenticated = require("../middlewares/isAuthenticated");


router.post("/logout", isAuthenticated, logout);

module.exports = router;

Chat and Video Function (Frontend)

After setting up your backend Stream API, the last task is setting up chat and video in your frontend application.

Dashboard.jsx

Create a new file Dashboard.jsx in your frontend directory. This is where you will set up your Stream and video function.

import React, { useState, useEffect } from "react";
import axios from "axios";
import {
  Chat,
  Channel,
  ChannelHeader,
  MessageInput,
  MessageList,
  Thread,
  Window,
  useCreateChatClient,
} from "stream-chat-react";
import "stream-chat-react/dist/css/v2/index.css";
import { useStream } from "../../components/StreamContext";
import VideoStream from "../../components/VideoStream";
import { useNavigate } from "react-router-dom";



const apiKey = import.meta.env.VITE_STREAM_API_KEY;

const API_URL = import.meta.env.VITE_API_URL || 'https://telehealth-backend-2m1f.onrender.com/api/v1';

function App() {
  const [channel, setChannel] = useState(null);
  const [clientReady, setClientReady] = useState(false);
  const navigate = useNavigate();

  // const ChatComponent = () => {
    const { user, token, Logout } = useStream();

    // Always call the hook
    const chatClient = useCreateChatClient({
      apiKey,
      tokenOrProvider: token,
      userData: user?.id ? { id: user.id } : undefined,
    });

  // Debug: See when user/token is ready
  useEffect(() => {
    console.log("Stream user:", user);
    console.log("Stream token:", token);
  }, [user, token]);

    // Connect user to Stream
    useEffect(() => {
      const connectUser = async () => {
        if (!chatClient || !user || !token || !user?.id) {
          console.warn("Missing chat setup data:", { chatClient, token, user });
          return;
        }


        try {
          await chatClient.connectUser(
            {
              id: user.id,
              name: user.name || "Anonymous",
              image:
                user.image ||
                `https://getstream.io/random_png/?name=${user.name || "user"}`,
            },
            token
          );

          const newChannel = chatClient.channel("messaging", "my_general_chat", {
            name: "General Chat",
            members: [user.id],
          });

          await newChannel.watch();
          setChannel(newChannel);
          setClientReady(true);
        } catch (err) {
          console.error("Error connecting user:", err);
        }
      };

      connectUser();
    }, [chatClient, user, token]);

    const handleVideoCallClick = () => {
      navigate("/videoCall");
  };

  const handleLogout = async () => {
    await Logout();
    navigate("/login");
  }

  if (!user || !token) {
    return <div className="text-red-600">User or token not ready.</div>;
  }

  if (!clientReady || !channel) return <div>Loading chat...</div>;


  return (
{ checkout the github repo}
            <ChannelHeader />
            <MessageList />
            <MessageInput />
          </Window>
          <Thread />
        </Channel>
      </Chat>


      </div>

    );
  }

export default App;

Video Setup

You’ll now set up the video function for your frontend. To do so, create a new file VideoStream.jsx and add the command:

import React, { useEffect, useState } from "react";
import { StreamVideoClient } from "@stream-io/video-client";
import { StreamVideo, StreamCall } from "@stream-io/video-react-sdk";
import { useNavigate } from "react-router-dom";


import { useStream } from "./StreamContext";
import { MyUILayout } from "./MyUILayout";


const apiKey = import.meta.env.VITE_STREAM_API_KEY;

function VideoStream() {

  const [client, setClient] = useState(null);
    const [call, setCall] = useState(null);
  const { user, token } = useStream();
  const navigate = useNavigate();

  useEffect(() => {

    let clientInstance;
    let callInstance;


    const setup = async () => {
      if (!apiKey || !user || !token) return;

      clientInstance = new StreamVideoClient({ apiKey, user, token });

      callInstance = clientInstance.call("default", user.id); // Use user.id as callId


      await callInstance.join({ create: true });

      setClient(clientInstance);
      setCall(callInstance);
    };

    setup();

    return () => {
      if (callInstance) callInstance.leave();
      if (clientInstance) clientInstance.disconnectUser();

    };
  }, [user, token]);

  const handleLeaveCall = async () => {
    if (call) await call.leave();
    if (client) await client.disconnectUser();

    setCall(null);
    setClient(null);

    navigate("/dashboard"); // or any other route
  };

  if (!apiKey) return <div>Missing Stream API Key</div>;

  if (!client || !call)
    return (
  <div className="flex items-center justify-center h-screen text-xl font-semibold">
    Connecting to the video call...
  </div>
    );

  return (
    <div className="relative h-screen w-full p-2 sm:p-4 bg-gray-50">
      <StreamVideo client={client}>
        <StreamCall call={call}>
          <MyUILayout />
        </StreamCall>
      </StreamVideo>

      <button
        onClick={handleLeaveCall}
        className="absolute top-2 right-2 sm:top-4 sm:right-4 bg-red-600 text-white text-sm sm:text-base px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg shadow hover:bg-red-700 transition"
      >
        Leave Call
      </button>
    </div>
    );
  }

export default VideoStream;

//MYUILayout.jsx
import React from 'react';
import {
  useCall,
  useCallStateHooks,
  CallingState,
} from '@stream-io/video-react-sdk';

export function MyUILayout() {
  const call = useCall();
  const { useCallCallingState, useParticipantCount } = useCallStateHooks();
  const callingState = useCallCallingState();
  const participantCount = useParticipantCount();

  if (callingState !== CallingState.JOINED) {
    return <div>Joining call...</div>;
  }

  return (
    <div style={{ padding: '1rem', fontSize: '1.2rem' }}>
      ✅ Call "<strong>{call?.id}</strong>" has <strong>{participantCount}</strong> participants.
    </div>
  );
}

Project Demo

Congratulations! You have successfully integrated Stream’s chat and video function into your application.

Conclusion

And that’s a wrap!

You’ve built a telehealth app with secure video, real-time chat, and user authentication – all powered by Stream’s Chat and Video SDKs.

This foundation gives you the flexibility to expand further with features like appointment scheduling, patient history, or HIPPA-compliant file sharing.

You can find the frontend and backend applications on GitHub. The frontend app is hosted using the Vercel hosting service, and the backend is hosted on Render.

Check out the repository of the application.

Happy coding! 🚀

Here is another scenario: imagine purchasing an LG product, such as a smart TV without a guide on how to set it up and use the remote. Now you get the point.

The process of you trying to mount your fan or set up your smart TV will be a very frustrating and confusing one without any guidance. And most of the time, it’ll be hard to determine the full potential of the product you bought.

Now, keeping in mind the already painted scenarios, have you ever tried picking up a new programming language or using an unfamiliar API, only to find it confusing, and you felt completely overwhelmed at the beginning? Then you probably spent hours trying to piece things together, maybe via tutorials, but nothing seems to work perfectly due to the error messages you get…and you wonder if you’re doing the right thing.

But then you might have come across the product’s official documentation or maybe a properly written and well-structured guide (like this one you’re reading). Suddenly, everything clicks, you start writing code effortlessly or using the API with confidence. That’s it – the power of clear and concise documentation.

In this article, you will learn what an API is, how it works, what API documentation is all about, and how to create standard API documentation.

Let’s dive in.

Outline

1. What is an API?

   • How APIs Work

   • Types of APIs

2. What is API Documentation

3. Examples of API Documentation

4. Benefits of Clear API Documentation

5. Importance of a Clear API Documentation

6. Key Notes of API Documentation

7. Key Component of an API Documentation

8. Best Practices for Writing Concise API Documentation

9. Conclusion

Before we continue, let’s deviate a bit to learn what APIs are all about, how they work, and the types of APIs that are out there.

What is an API?

You might have heard the term API before, and you’re wondering what it’s all about. API stands for Application Programming Interface. An API acts as an interface between two programs that allows them to communicate. It is a mediator between the client (browsers/mobile application) and the server (backend).

How APIs Work

So now you know that an API acts as a bridge or middleman that allows two systems to communicate with each other. When working with APIs, you’ll come across two key terms: requests and responses. These two keywords are essential to understand because they form the core of how APIs work.

Think of requests and responses like what you use in a regular day-to-day conversation. It’s just like how you ask questions (request) and an answer is provided (response). Same thing happens with APIs, but in this case, its an interaction between software systems.

To explain better how an API works, let’s use a weather app or a stock market app. This should provide a clear view of what we are talking about.

When you open a weather app and want to check the current weather, the app doesn’t store the weather data itself. Instead, it sends a request through an API to the weather database server. When the request is sent, the API now interacts/communicates with the database server and retrieves the latest weather information, which is then sent back to the weather app as a response. Then this info is finally displayed to you.

This should be a smooth, fast, and continuous process and has to occur simultaneously for your app to run smoothly. This means that a request must be made first before a response can be received. You can’t get a response without making a request.

The same process occurs for the stock market app as well.

Types of APIs

APIs are categorised into two major types:

• By Use/Function

• By Access

Types of APIs by Use

• Web APIs: These are the most commonly used type of APIs and are also known as HTTP (Hypertext Transfer Protocol) APIs. This API enables communication over the internet with the use of HTTP. Examples of these APIs are REST APIs, GraphQL APIs, and so on.

• Library or Framework APIs: These are APIs provided by libraries or frameworks and are made use of by developers to build applications without having to build everything from scratch. Examples of this are React, JQuery, and so on.

• Operating System APIs: These are APIs built to allow systems/applications to communicate with operating systems. These APIs helps provide access to system-level resources, which is important for the application to function properly. Examples of these APIs are Android SDK, Windows API, and so on.

• Hardware APIs: These are APIs built to enable systems to communicate with the physical components of a hardware device. Examples of these APIs are Bluetooth APIs, Camera APIs, and so on.

• Database APIs: Just as the name states, they are APIs that allow applications to interact with the database. These APIs are essential and mostly used to store, retrieve, manage and update the database. Examples of these APIs are SQL-based APIs, NoSQL APIs, and so on.

Types of APIs by Access

• Open APIs: This can be seen as a public API and is also referred to as an external APIs. These are the types of APIs built and made available for anyone to use, therefore making them need little to no authorization and authentication. Based on the number of calls made to these APIs, some of them APIs are available for free while others are available at a specific cost (paid subscription).

• Partner APIs: These are types of APIs built and made available for just businesses that collaborate together. When this type of APIs are built, strong authentication and authorization process are put into consideration so as to avoid it from being accessed by the public.

• Internal APIs: The internal APIs can also be referred to as private APIs. These APIs are built and internally used by organization and are restricted from the public. These APIs are mostly used when there is communication between systems or Applications within the organization.

• Composite APIs: This is a type of API built in a way that it combines multiple API requests into a bundle and allows users to get one single response from different servers. This type of APIs is most commonly used when Devs needs to fetch data from multiple servers or data sources.

Now that we have broken down what APIs are, how they work, and their various types, let's move on to the main reason we’re here: learning about creating good API documentation.

What is API Documentation?

API documentation is also referred to as developer documentation. It is a well-written and organized guide or manual that explains how an API works. It’s designed to help developers (or even non-developers) understand what the API does, how to use it, and how to integrate it into their own projects.

By using API documentations, you can explore and take full advantage of everything an API has to offer. API documentation also aims at speeding up the development process and boosting the overall productivity of a product.

API documentation provides a detailed explanation of the complete functionality of the API, which can include:

• The most efficient way to use the API

• How to integrate the API with your project.

• The purpose of the API and the inputs to be passed for developers to make good use of it.

Examples of API Documentation

Here are some examples of API documentation to give you a better idea of what’s involved and what information these docs should provide.

Stripe API Docs

This is an example of a Web/HTTP API. Stripe is a payment processing tool, and the Stripe API documentation provides a clean, interactive, and developer-friendly guide on how to make use of the API for payment integrations.

React Docs

The React docs are an example of a library or framework API. They provide a detailed guide to how you can use React in building your web project

Android SDK

This is an example of an Operating System API. The Android SDK Documentation provides a detailed guide on how you can make use of the Android SDK API to build your Android app.

Web Bluetooth API

This is an example of a hardware API. The Web Bluetooth API Docs provide a detailed guide on how to make use of the API to connect and interact with Bluetooth low energy peripherals.

PostgreSQL API

This is an example of a Database API. The PostgreSQL API Docs provide developers with full details on what the API is all about, how they can effortlessly connect it with their application, and also the roadblocks they can encounter while using the API and how to overcome them.

Benefits of Clear API Documentation

Enhances the Developer Experience

Great API documentation makes a developer’s life much easier. It clearly explains what the API does, how it works, and how to use it – all of which help developers get up to speed quickly.

Instead of wasting time figuring things out or getting stuck, they can focus on building. It reduces frustration, boosts productivity, and even makes it easier to collaborate with teammates.

Reduces the Learning Curve

Good API documentation helps reduce the learning curve for developers trying to use the API. This, in turn, leads to faster onboarding, saves time and money, and encourages higher adoption rates.

Easy to Maintain

Good API documentation makes it easier to maintain both the API and any application the API is used in. Up-to-date docs help developers understand changes, fix bugs, and update features in their application with confidence.

Provides Visibility for Your Product

Good API documentation increases the visibility of your product and encourages frequent use by making it easier for developers to understand and integrate it. It also promotes third-party integration, helping your product reach a wider audience.

Key Components of API Documentation

There are many components that make up a good API documentation. In this section, we will walk through a real-world example of properly prepared API documentation: the Spotify Web API.

Overview/Description and Uses of the API

This is the very first stage in writing good API documentation. This section explains to users what the API is all about and also has information about the type of resources it provides.

The overview section is usually short, perhaps 3-4 sentences, and it describes what the API is does, the available resources, its endpoints, and the methods attached to each endpoint. This helps bring you up to speed as to whether that particular API provides what you need to complete your project.

As you can see, the Spotify API’s description explains how it helps you create applications that “can interact with Spotify’s streaming service, such as retrieving content metadata, creating and managing playlists, or controlling playback.”

Endpoints

Endpoints are an important component in API documentation. Developers use them to communicate with other servers. They’re also used for data transfers. An Endpoint is referred to as the “touch point” in the communication channel between two servers.

When documenting an endpoint, it’s important to take note of the various components of the endpoints, as this increases the quality of your API documentation. The components of an endpoint include its name, description, url, methods, parameters, and so on.

For example, if you want to get the details of a user’s top artist, here’s how the endpoint looks:

GET https://api.spotify.com/v1/me/top/artists

Remember, we previously mentioned the key components that make up an API endpoint, such as the name, description, URL, and HTTP method. Let's take the Spotify endpoint URL above to see how these components are presented:

• Name: Get User's Top Artists

• Description: Retrieves the current user's most listened-to artists.

• URL: https://api.spotify.com/v1/me/top/artists

• Method: GET

This endpoint demonstrates how a well-documented API provides all the necessary details a developer needs to understand and use it effectively.

Response:

{
  "rank": 1,
  "name": "Eminem",
 },

{
  "rank": 2,
  "name": "NF",
 },

{
  "rank": 3,
  "name": "Adele",
 },

Now the code above indicates the response I should get from my initial request and it is displayed in a JSON format.

Authorization and Authentication:

Both authorization and authentication are important tools used for checking the access that’s been given to sensitive data.

APIs receive thousands of responses and handle huge amounts of data. Authentication and Authorization are ways to ensure that your API data and your users are safe and secure from hackers.

Note that authentication and authorization are two different concepts. Authentication is mainly all about verifying the identity of someone who wants to use your API. Authorization, on the other hand, describes the level of access that an already verified user has when interacting with the API.

There are three major types of API Authentication. Each type is used at different stages or levels, but in some scenarios, no authentication is used at all.

• Basic Authentication: This is the type of API auth that is usually used for testing internal APIs. It’s not recommended for publicly used APIs because it’s not fully secure. This API sends a username and password with every API call made to the client.

• Key Authentication: In this type of auth, the client generates and sends a very long key. The API key is a long string that contains unique authorization tokens. This type of auth is more secure than the basic auth – but if the key is leaked, anyone can access the API until it’s revoked. Note: This type of Authentication is used for light applications.

• OAuth Authentication: OAuth is the most common and more secure token-based type of authentication. In this type of authentication, instead of sending a username and password, an authorization is first requested, which is approved by the user. After the user approves the request, a token is generated which can be used to make an API request. This method is secure, and the tokens generated have an expiration time as well.

Let’s look at an example from the Spotify API.

Spotify uses OAuth 2.0 for authentication and access control. To use most of Spotify’s Web API endpoints, you must first authenticate your application and obtain permission from the user:

GET https://accounts.spotify.com/authorize

Here are the key details of the Authorization endpoint:

• Name: Authorization

• Description: Initiates the OAuth 2.0 flow to authorize users and allow your application to access Spotify data on their behalf.

• URL: https://accounts.spotify.com/authorize

• Method: GET

Parameters and Headers:

Parameters are the variable part of a resource and comprise a name, value, and description. Some parameters are required and are used in making API calls, while some are just optional.

When writing an API documentation, you should list out all the parameters and descriptions alongside each parameter. It’s also a good idea to specify why such a parameter is needed and state if it is required or optional in the documentation.

Headers, on the other hand, are similar to parameters. They have key-value pairs and are used to send additional information (metadata) about a request to the server. If there are any headers used in your API, then it is important you include them when documenting the API.

As you can see in the image above, we have some Body Parameters and Header Parameters. For body parameters, there’s grant_type (which is required), code (also required), and redirect_uri (also required). You can also see that they have descriptions of the value listed.

For header parameters, we have Authorization (required) and Content-Type (also required), again with descriptions of their values.

Error Handling Codes and Troubleshooting Guidance:

Errors are inevitable, they’ll always occur despite how careful you are. That’s why good API documentation should include guidance to help developers recover quickly when things go wrong.

Your documentation should provide a section that;

• Suggest possible fixes or troubleshooting tips for some specific errors.

• Include sample error response codes and logs, which help in debugging.

When it comes to API calls, two key components to understand are the request and the response. When an API call is made, a request is sent to the server, and a response is returned. This response includes a status code and, if applicable, an error code and both are essential for understanding what happened during the request.

For example, there are situations when you make an API call and the response you get is a code 404, which means that the request you made was not found. But when things go smoothly, you should see a code 200, which means your request was successful.

Here is what this section looks like:

{
  "error": {
    "status": 404,
    "message": "Not Found"
  }
}

By properly documenting these status and error codes with their explanations, developers can easily identify issues and take appropriate actions to solving it those issues.

Here are some common Response Code Statuses and what they mean:

Response Code Status:

The table above shows some of the most common code response statuses you’ll come across when using an API and its description.

Best Practices for Writing Concise API Documentation

Here are some best practices that can help guide you while writing API documentation:

1. You want to make sure users clearly understand what the API is, how they can use it, and the limits of use for the API.

2. Know your target audience and focus on what they need most to get started with the API docs.

3. Always stick to the essential information and use clear and consistent language.

4. Structure your documentation properly and make it standard.

5. Examples are important. Always use them in your documentation and make sure you clearly explain them.

6. Avoid repetition in your documentation.

7. Always document your error codes clearly. It’s recommended that you put them in tabular format.

8. Always provide a link to outsourced files in situations when more details are needed. This helps keep your documentation short and on point.

9. Review and regularly update the documentation.

10. Incorporate user feedback for continuous improvement.

Conclusion

API documentation has become a critical component in today's technology landscape. Clear and concise documentation is not just helpful – it’s essential. It often determines whether an API succeeds in the tech ecosystem and whether developers can fully leverage its power.

This is a call to action for developers, organizations, and technical writers: prioritize high-quality, well-structured API documentation. The clarity of your documentation directly impacts the usability, adoption, and long-term success of your product in the industry.

In this article, you’ll learn how to implement the Send Email function in your web app using Nodemailer.

Let’s dive right in.

Table of Contents

1. Prerequisites

2. Tools We’ll Be Using

3. Frontend Setup

   • Install Node.js

   • Contact Form Setup

4. Backend Setup

   • Backend Libraries Setup

   • OAuth2 Configuration Setup

   • Nodemailer Setup

5. Conclusion

Prerequisites

To get the absolute most out of this project, it’s important to have some basic knowledge of the following:

• JavaScript: Having a good fundamental understanding of how JS works will make it easier to follow along with the project.

• React.js and Chakra UI: You should have a good understanding of how usestate works and how you can apply it in a project. It’s also important that you’re familiar with Chakra Ui and know how to use it to style your web application.

• A little background on Nodemailer would be helpful as well.

Tools We’ll Be Using

In one of my recent projects, I created a mailer function in Node.js using Nodemailer. This function ensured that users’ emails would be delivered efficiently. And now that I know how it works, I wanted to share it with you all.

Nodemailer and SMTP

So what is Nodemailer?

Nodemailer is a popular Node.js module that lets you send emails efficiently using different methods such as SMTP (Simple Mail Transfer Protocol), OAuth2, and so on.

SMTP acts like a postal service – or rather, it’s a postal service that sorts your emails and routes your messages on different mail servers until they reach their final destination. This helps ensure that your messages reach the right inbox all the time.

But it’s important to note that SMTP only handles the sending of emails, meaning that it doesn’t handle retrieval of already sent emails. But protocols like IMAP (Internet Message Access Protocol) and POP3 (Post Office Protocol version 3) let you retrieve emails. We won’t be using these tools here, but I just wanted you to be aware of them in case you want to implement retrieval functionality in your own projects.

OAuth2

OAuth2, short for Open Authorization, simplifies the process of authentication and authorization. With OAuth2, users don’t have to go through the hassle of repeatedly signing in or logging in. Instead, web applications can securely access private user data from other websites—only with the user's permission.

But don’t worry, OAuth2 only grants requesting applications limited access, typically just enough to create a basic profile. Chances are, you’ve already used OAuth2 without even realizing what’s happening behind the scenes. Pretty cool, right?

Now that you know a bit more about the tools we’ll be using, let’s move on.

Frontend Setup

First things first, you have to set up your environment. When setting up my environment, I used React.js and Chakra UI (for my styling).

Install Node.js

Before starting this process, make that Node is installed on your computer. If it’s not, head to their website to download and install it from there.

You can also use your command line to install Node by running the command nvm install –lts.

Or you could use the newest method recommended on the Node.js website, which is simply to run fnm.

Here is how you can go about it: on your command line, run the following commands:

winget install Schniz.fnm // this command downloads and installs fnm into your operating system.

fnm install 22 // this downloads and installs node.js.

node -v // this displays the version of node.js currently installed in your operating system.

npm – v // this verifies the version of npm currently installed.

Next, let’s set up your frontend interface.

Contact Form Setup

As I mentioned above, I’m using React for my front-end and Chakra UI for styling. I won’t be going over how to install React here, but if you need help with that for your project, check out my article on it.

Next, make sure you have Chakra UI set up. You can do this by following the steps on the Chakra Ui official website.

Note: The web application is a full web application, which consists of various pages like Home, Services, Pricing, Contact, and so on. But for the sake of this article, we’ll focus on only the contact page.

Here is what the contact page will look like:

The first step in building this contact form is to create your form input. Here is how you can do that:

import { Box, Button, Flex, Image, Input, Text, Textarea } from '@chakra-ui/react';
 return (
    <Flex
      flexDir={{ lg: 'row', md: 'row', sm: 'column', base: 'column' }}
      pt="10%"
      w={{ lg: '80%' }}
      gap={10}
      justify="center"
      align="center"
      m="auto"
    >
      <Box w="100%">
        <Image src="Images/Contact_Bg.png" alt="Contact Background" />
      </Box>

      <Box w="80%">
        <Text
          as="h1"
          fontSize={{ base: '2xl', md: '3xl', sm: '3xl' }}
          fontWeight="bold"
          mb={3}
        >
          Get In Touch
        </Text>
        <Text
          as="p"
          w={{ base: '100%', md: '80%' }}
          mt={5}
          fontSize={{ base: 'sm', md: 'md', lg: 'lg' }}
          mb={6}
        >
          Please use the form below to get in touch with us, and our team will
          get back to you as soon as possible. If you prefer to contact us by
          phone, you can find our contact details below.
        </Text>

        <Box w={{ base: '100%', md: '90%' }}>
          <Input
            required
            value={name}
            placeholder="Name"
            mb={4}
            aria-label="Name"
          />
          <Input
            required
            value={email}
            placeholder="Input your Email"
            mb={4}
            aria-label="Email"
          />
          <Input
            required
            value={subject}
            placeholder="Subject"
            mb={4}
            aria-label="Subject"
          />
          <Textarea
            value={message}
            placeholder="Message"
            mb={4}
            aria-label="Message"
            resize="none"
          />
        </Box>

        <Button
          mb={4}
          isLoading={isLoading}
          isDisabled={isLoading}
          onClick={handleSubmit}
          colorScheme="teal"
        >
          Send
        </Button>
      </Box>
    </Flex>
  );
}

In the code above, we’re importing the various UI components from the Charkra UI library which we’ll use for building the form input.

Now that we’ve created the form inputs, let’s focus on the logical aspect: making the form input functional. Here’s how you can do this:

import { useState } from 'react';

You import the useState hook (which is a React hook) which lets you effectively declare/add states and manage states in a functional component.

The useState hook declaring states and managing states might sound a bit off to you – but I have an article that’ll help you understand how the useState hook functions: Here you go.

Next, you’ll need to declare your state variables. Here’s how you can do that:

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [subject, setSubject] = useState('');
const [message, setMessage] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');

In the code above, the state variable includes the likes of name, email, subject, message, and so on which we’re using to store user inputs from the contact form. Then we’re using setName, setEmail, setSubject, setMessage and so on to manage and update the state in case the initial value changes at some point later.

Next, create a function to handle the form submission:

const handleSubmit = async (e) => {
  e.preventDefault();
  setIsLoading(true);
  setError('');

Here, e.preventDefault() helps prevent the page from reloading when the form is submitted. SetIsLoading(true) shows that the form submission is in progress. And setError(‘ ‘) clears any previous error messages that might have occurred during submission.

Next, create a form validation function to validate the input forms and seek out any errors before the form is finally submitted.

if (!name || !email || !subject || !message) {
  setError('All fields are required.');
  setIsLoading(false);
  return;
}

if (!/\S+@\S+\.\S+/.test(email)) {
  setError('Invalid email format.');
  setIsLoading(false);
  return;
}

Before the form is finally submitted, the code above first checks if all the input fields are filled out. If any field is found empty, it displays an error and immediately the form submission is stopped. The same goes for the email. Emails are arranged and typed out in a specific syntax, and if the email field doesn’t follow that syntax, an error is displayed as well.

Next, create an object which stores the information given by the user when they fill out the form. This information will be sent to the backend.

Const formData = {name, email, subject, message };

Now, create a function that sends your data to the backend:

try {
  const response = await fetch(" YOUR API LINK GOES HERE", {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(formData),
  });

  const result = await response.json();

The fetch response sends the data to the backend API. It uses the post method. When the data is sent to the backend, it’s sent out as a JSON file. Then the data inside the JSON file are all converted into a string.

This is what it looks like when sent:

At this point, let’s work on the response handling from the API as well as error handling:

if (response.ok) {
      alert(result.message || 'Email sent successfully!');
      setName('');
      setEmail('');
      setSubject('');
      setMessage('');
    } else {
      setError(result.error || 'Failed to send email.');
    }
  } catch (error) {
    setError('An unexpected error occurred. Please try again later.');
  } finally {
    setIsLoading(false);
  }

In the code above, after the user types in their information correctly and submits it, if the message is sent successfully, an alert will be displayed with the message Email sent Successfully. But if the message wasn’t successful – maybe due to how the user typed in their information or due to a failed request – an alert will be displayed as well an error message Failed to send email..

For handling server errors that might occur due to network issues or due to the API being down, an error message will be displayed An unexpected error occurred. Please try again later..

At this point, we have successfully built out the frontend aspect of the form. So now we can fully dive into the backend. Let’s get on with it.

Backend Setup

For the backend, we’ll use Node.js, Dotenv, CORS, Nodemailer, and oAuth2.

Backend Libraries Setup

Let’s start by setting up your Node.js server. To do this, you’ll want to create a file inside your backend folder with the name send-email.js. Then in your backend folder, you’ll create a package.json file and install all the dependencies you’ll need.

Start by running npm init -y in your terminal. This creates the Package.json file which manages your project and stores all the dependencies.

Next, let’s go ahead and install the libraries you’ll be using:

• Nodemailer enables email sending, as you now know.

• dotenv loads an environment where you’ll store your .env file.

• cors allows requests between the frontend and the backend.

• googleapis provides OAuth2 authentication support for sending emails securely.

You can install these one by one by running the commands npm install nodemailer, npm install dotenv, npm install cors, and npm install googleapis. Or you can install them all at once with:

npm install nodemailer dotenv cors googleapis

Note that cors plays an important role in ensuring effective communication between your frontend server and the backend. You can learn more about CORS here.

OAuth2 Configuration Setup

Now before you finish setting up the send email function, you first need to configure OAuth2 to get access to the tokens and keys you’re using, such as CLIENT_ID, CLIENT_SECRET, REFRESH_TOKEN, and so on.

To set up OAuth2, go here to visit your Google Cloud dashboard. Once it opens, it should look like this:

On the screen, click on “create project” and it’ll take you to a place where you can create your project. It should look like this:

After you create your project, it’ll take you to your dashboard with your project name displayed at the top right left corner of the screen. This shows that you have successfully created your project.

After creating the account, click the toggle button at the top left-hand corner of your screen. When it opens, click on the APIs & Services button. A dropdown should then be displayed. Then click on the OAuth consent screen.

After that, it should direct you to a new page where you can then configure your project.

The configuration process has four steps, which we’ll go through now.

Step 1: Add app information

First, you’ll need to add your app’s information, which includes your app name and user support email. For the app name, go ahead and add your project name there. For the support email, add your email address and click on the ‘Next’ button. It should look like this:

Step 2: Set up the audience section

Next, you’ll need to set up the Audience section. In this section, choose the ‘External’ options, which means that others (not only those within the organization) can send messages with the web application.

Step 3: Add contact information

Now you’ll come to the contact information section, where you’ll need to add your email address.

Step 4: Agree to Google API Services

Finally, you’ll need to agree to the Google API Services. After that, you can finish the configuration of your project by clicking on the ‘create’ button.

After you’ve completely configured your project, it’ll take you to a page where you can create your client ID. To create it, click on the ‘Create Oauth Client’ button on the screen.

This takes you to a place where you’ll add the information about your project. For the “project type/Application type”, choose Web application, and then scroll down and click on the Create button.

After that, your Client ID and Client Secret token should finally be generated. Here is what it looks like:

Next, head to the OAuth Playground where you’ll complete the final setup. Once there, click on the gear button at the top right of the screen. There, just add your client ID and Client Secret which you generated before.

Then on the left, scroll down to ‘Gmail API v1’, click on it, and select the first dropdown option which was ‘https://mail.google.com/’. Then click on ‘Authorize APIs’.

This’ll take you to a sign-in with Google page, where you can choose your email account and continue.

Then you’ll be redirected back to the OAuth Playground dashboard. At this point, your Authorization code has been generated for you, but what you really need is the Refresh token. So to get it, click on Exchange authorization code for tokens. After that your refresh token should be generated.

At this point, your OAuth2 configuration is done! Now what’s left is to store all the tokens you generated in an .env file you’ve created. You’ll also need to set up your send email function using NodeMailer.

Nodemailer Setup

Now, that you’ve gotten all the tokens you need to create your mailer function, all that remains is to start putting your backend code together.

First, start by loading your .env file into process.env so you can easily access all the tokens you generated. Also, import the libraries you initially installed.

require("dotenv").config();
const nodemailer = require("nodemailer");
const cors = require("cors");
const { google } = require("googleapis");

Next on the line, you’ll need to set up OAuth2. Here, the client ID, and client Secret which you initially generated will be used to authenticate the application and securely request and create access tokens. These will be used for seamlessly sending emails through Google APIs.

You’ll also need to configure the refresh token which lets the application obtain new access tokens automatically without requiring user interaction.

const oAuth2Client = new google.auth.OAuth2(
  process.env.CLIENT_ID,
  process.env.CLIENT_SECRET,
  process.env.REDIRECT_URI
);

//setting up refresh token.
oAuth2Client.setCredentials({
  refresh_token: process.env.OAUTH_REFRESH_TOKEN,
});

Since we want the frontend to interact properly with the backend, you’ll want to configure a CORS Middleware. This allows requests from any origin (`*`) as well as allowing POST requests from that origin. Here is how you can do that:

const corsMiddleware = cors({ origin: "*", methods: ["POST"] });

Next, create a function to handle CORS and the Request Method. This function applies the CORS middleware to the request in such a way that if the request method is OPTIONS, it responds with a 200 status (“preflight OK”). This means that your request has been approved/allowed by the server because it met the server’s set rules. If the request method is not POST, a response of 405 status (“Method not allowed”) will be displayed, showing that your request does not meet the server’s set rule.

Here’s how it’s done:

corsMiddleware(req, res, async () => {
  if (req.method === "OPTIONS") {
    return res.status(200).send("Preflight OK");
  }

  if (req.method !== "POST") {
    return res.status(405).json({ error: "Method not allowed" });
  }

Next, create a function that extracts and validates the input request. This request contains the senders name, email, subject, and message. This function ensures that all the input fields must be filled out and the email must also be written properly. If not, it responds with a 400 status error.

const { name, email, subject, message } = req.body;

// Validate input
if (!name || !email || !subject || !message) {
  return res.status(400).json({ error: "All fields are required." });
}

if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
  return res.status(400).json({ error: "Invalid email address." });
}

Up next, you’ll create a function that helps retrieve new access tokens. You’ll also create a Nodemailer transporter function. This transporter was configured to use Gmail’s SMTP service with OAuth2 authentication.

This means whenever a user sends an email, the transporter function first verifies if the Gmail’s SMTP service is ready. If it is, the mail will be verified first with OAuth2, and if the authentication check is successful, the mail will be delivered successfully.

//Function to retrieve new access token
const accessToken = await oAuth2Client.getAccessToken();
if (!accessToken || !accessToken.token) {
  throw new Error("Failed to retrieve access token.");
}
console.log("Access token retrieved successfully.");

/// Creating the Nodemailer Transporter function
const transporter = nodemailer.createTransport({
  service: "gmail",
  auth: {
    type: "OAuth2",
    user: process.env.EMAIL_HOST,
    clientId: process.env.CLIENT_ID,
    clientSecret: process.env.CLIENT_SECRET,
    refreshToken: process.env.OAUTH_REFRESH_TOKEN,
    accessToken: accessToken.token,
  },
  debug: true,
  logger: true,
});

///The function verifying if SMTP server is ready
await transporter.verify();
console.log("SMTP server is ready to send emails.");

Lastly, you’ll want to structure your mail in the format it should be displayed in the mailbox of the receiver. You’ll also create an error handling function which displays whenever a mail is sent successfully or whenever an error occurs.

const mailOptions = {
        from: `"${name}" <${email}>`,
        to: process.env.EMAIL_RECEIVE,
        replyTo: email,
        subject,
        html: `
          <h1>Name: ${name}</h1>
          <p>Email: ${email}</p>
          <p>Subject: ${subject}</p>
          <p>Message: ${message}</p>
          <p><i>Message from Exesenergy Website</i></p>
        `,
      };
      console.log("Mail options:", mailOptions);

      // Send email
      await transporter.sendMail(mailOptions);
      console.log("Email sent successfully.");

      return res
        .status(200)
        .json({ status: "success", message: "Email sent successfully." });
    } catch (error) {
      console.error("Error details:", error);
      return res
        .status(500)
        .json({ error: "Internal Server Error", details: error.message });
    }

At this point, you have successfully set up both your frontend and backend applications. Now you may want to host them. I decided to host both applications using Vercel and link their URLs together.

Here is the source code to access both the frontend and the backend.

Here is the final result:

Conclusion

Nodemailer is a popular Node.js module that enables its users to send emails efficiently using different methods like SMTP and OAuth2.

If you've made it this far, I hope I've successfully shown you the importance of Nodemailer and how you can use it to send email messages directly from your website.

Thank you for reading!

Some of these tools, languages, or frameworks are used daily by community members and can undergo fundamental changes in how they are implemented or written over time.

In this article, we will explore two popular JavaScript technologies, Next.js and React.js, by comparing their key differences, examining their strengths, and offering insights to help developers choose the best option for their projects.

Table of Contents

• Table of Contents

• Understanding React

  • Client-side Rendering

  • Use Cases for React in Web Development

• Exploring Next.js

  • Server-side Rendering

  • Use Cases for Next.js in web development

• Key Difference Between Next.js and React

  • Rendering Methods: client-side vs. server-side

  • Performance Considerations

  • SEO Implications

  • Scalability and Project Complexity

• When to Use React or Next.js

  • When to use React

  • When to Use Next.js

• Conclusion

Understanding React

We often confuse ourselves as to whether React is a JavaScript framework or not, but here is the answer to that question. React is not a JavaScript framework, it is a JavaScript library. Now, these two terminologies are often interchanged or misused, but I will explain them shortly.

A library is a collection of already-written code that can be reused or called upon when building your own project.

Example: Imagine a library where you go to study. The books are already available on the shelves – you simply pick the one you need and start reading. Similarly, in programming, a library provides ready-made tools that you can use in your project without starting from scratch.

On the other hand, a framework is like a ready-made structure that helps you build your project. It gives you a solid foundation to work with, so you don't have to start from scratch or write repetitive code. Instead, you focus on adding your own features and logic, while the framework takes care of running things at the right time and in the right way.

Example: Think of a framework like a house under construction where the walls, foundation, and roof are already built. All you need to do is decide how to design the interior—like choosing the furniture, paint, and decorations. The framework handles the heavy lifting, like ensuring the house stands strong, while you focus on making it your own. Similarly, in programming, the framework provides the structure, and you add your custom logic to complete the project.

With that out of the way, let’s move on.

React is one of the most popular JavaScript libraries used by developers to build fast, interactive, and reliable user interfaces. It is a declarative library that helps developers create component-based web applications. Facebook developed this library in 2011 and it has been trending since then.

Usually, when writing JavaScript code, we create a file with the extension js. For example: App.js, script.js, and so on. In React we create a file with the extension jsx. That is: index.jsx, Home.jsx, and so on. The jsx is a React extension that allows you to write a JavaScript code resembling HTML. The syntax, when executed, is passed through preprocessors/transpilers which transforms the HTML-looking code into a standard JavaScript code.

At the heart of all React applications are components. Components are chunks of user interfaces (UI) which are built independently and can be reused in different parts of your project. Different components can be built separately and later brought together to form a complex user interface (UI).

Note: Every React application has at least one component, commonly referred to as the root component. This component represents the entire application. Within the root component, there are often other components, known as child components, that help structure and manage different parts of the application.

Here is a structural representation of root and child components.

From the image above, you can clearly understand what components are all about. App is the root component, and inside the root component, we have the child components: Navbar, Profile, Blog and Footer. The child components can be reused on other pages of the project without having to rewrite the code again.

Client-side Rendering

Client-side rendering (CSR) is a common technique, especially in libraries like React and frameworks like Vue.js, Angular, and so on. Here, the browser downloads and processes JavaScript files to dynamically render content directly on the user's device. With CSR, web pages are generated dynamically, and any updates or changes to the code are applied without requiring a full page reload. Only the specific parts that have changed are updated, ensuring a seamless and efficient user experience.

Therefore, in CSR, the logic and structure of the web page is handled by the client (browser) and a fully rendered page is displayed.

To help you understand CSR, I have added an article here.

Use Cases for React in Web Development

Ever since React became a go-to choice for many developers, its flexibility has made it suitable for a wide range of use cases in web development. Here are a few cases:

• Single Page Applications (SPAs): When we talk about SPAs, we don’t really mean that your web application has only one page, it can go on to having multiple pages. In SPAs, your web application files (HTML, CSS, JS) are generated once on your web page and when subsequent updates are made on the file, your page won’t have to fully reload. This approach helps ensure a faster transition, reduces load on the server and enhance overall user experience.

• Interactive User Interfaces: React is suitable for building interactive user interfaces which, from time to time, undergo dynamic updates based on the actions of the users. Examples are online forms, dashboards, websites (E-commerce websites), and so on.

• Cross-Platform Applications: Having React knowledge comes in handy when building mobile applications, simplifying the connection between web applications and mobile applications. Tools like React Native helps you achieve this process.

Exploring Next.js

Next.js is a popular React-based framework used in building web applications with the use of React components. Next.js provides additional structure, features, and optimization for your web application.

Unlike React, Next.js supports server-side rendering (SSR), so requests are processed and generated from the server and then displayed on the browser (client).

Server-side Rendering

Server-side rendering (SSR) is a technique in web development where a server generates the HTML for a web page on the server and sends it to the browser (client). In other words, the server handles the structures and logic of the page and displays a fully rendered page on the screen.

In server-side rendering, a request is first sent to the server from the browser (client), then the server begins to process the request and when it's done processing the request, it executes the request by generating and displaying an HTML file with the content on the browser (client side). When a change is made or a new page is requested, a new request is sent again to the server and it is processed all over again – a fresh, fully rendered HTML file will be generated and displayed on the browser (client).

For a better understanding of CSR and SSR, I have added a YouTube video here.

Use Cases for Next.js in web development

• Single Page Application (SPAs): Next.js can be used in the creation of single page applications, similar to React.

• SEO-Friendly: Next.js helps create SEO-friendly websites by rendering an HTML file on the server and delivering it to the browser. This improves search engine visibility, increasing the chances of your website appearing at the top of search results.

• Multi-User Platforms: Due to Next.js ability to handle dynamic routing, API handling, and so on, it’s easy to create applications that serve various purposes.

Key Difference Between Next.js and React

Rendering Methods: client-side vs. server-side

When we talk about the rendering method in React, React relies mainly on rendering with the client-side rendering (CSR) method. Therefore both the logic and the structure of the web page will be handled by the browser (client). Though this method is commonly used, it has some downside effects like slower initial page load.

Next.js, on the other hand, supports both SSR and CSR because it was built on top of React. Web pages are rendered on the server and both logic and structure of the page are all handled by the server. This enables a faster loading of the web page and also improves the SEO.

Performance Considerations

In terms of performance considerations, Next.js is often preferred because it offers multiple rendering options, including server-side rendering (SSR), static site generation (SSG), Incremental Static Regeneration (ISR), and client-side rendering (CSR). In contrast, React primarily provides a single rendering approach: client-side rendering.

SEO Implications

React is less SEO-friendly because search engines may struggle to index content that requires JavaScript execution to render.

On the other hand, Next.js is more SEO-friendly than React because it renders content on the server, providing fully-rendered HTML to search engines for easier indexing.

Scalability and Project Complexity

In terms of scalability and project complexity, Next.js is generally better than React. Next.js provides built-in features that enhance the scalability of your project. These include:

• Server-side rendering (SSR) and static site generation (SSG) for better performance and SEO.

• A built-in API routes feature for creating serverless functions seamlessly.

• A file-based routing system that simplifies the organization of larger projects.

In contrast, with React, you are responsible for setting up and maintaining the structure for scalability. For larger projects, this often requires adding additional tools such as:

• State management libraries (for example, Redux, Recoil, and so on).

• Routing libraries (for example, React Router).

These tools are necessary to enhance React's scalability and address project complexity, but they also increase the overhead and effort needed to set up and manage the application.

In summary, here is a tabular break down;

When to Use React or Next.js

Choosing the right tool for your project solely depends on the complexity of the solution of the project you are building. While React and Next.js are closely related, each has its strengths and optimal use cases.

When to use React

Here are some cases when it is best to use React for your project:

• When building highly interactive applications.

• When your project requires manual handling of routing, state management or/and API integration.

• When your project requires client-side rendering (CSR)

When to Use Next.js

Here are some cases where it’s best to use Next.js:

• When your project requires a better SEO.

• When your project requires server side rendering.

• When your project requires you to build APIs along your frontend code.

• When building content-driven websites like blogs or e-commerce sites. Due to its use of server-side rendering, it aids in improving the load times of contents on the page.

• Next.js is best used when you want to optimize images in your project.

Conclusion

At this point I believe you have a clear understanding of React and Next.js, the concepts of server-side and client-side rendering, the use cases for both React and Next.js, and the key differences between them.

Thank you for taking the time to read this. I hope you found it helpful.

Happy coding.

In this article, I will introduce you to one of the fastest and easiest deployment platforms for bringing your code/project to the web.

I will also show you how you can deploy a web application with your custom domain and why it’s important to do so.

Let's dive right in.

Table of Contents

• Overview of Vercel

• What are Domains?

• How to Set Up a Vercel Account

• How to Configure a Custom Domain

• Conclusion

Overview of Vercel

Vercel is a cloud hosting platform that provides tools that enable developers to build, deploy and scale their web applications. One important fact about this platform is that it is quick, easy to navigate/use, and it is very efficient.

Vercel supports and deploys many frameworks with minimal configuration, especially frameworks built with JavaScript. Here is a list of frameworks that can be deployed to Vercel: Angular, Astro, Brunch, React, Dojo, Gatsby.js, Next.js, Nuxt.js, Vite, Vue.js, Vuepress, and so on.

You may not know all these frameworks at this point, but it's important to know that Vercel supports these frameworks and many more.

See Vercel documentation to view more.

What are Domains?

Domains are ‘unique identifiers’ used to locate or find a specific website on the internet. For example, freecodeCamp.org. Whenever you see a domain name, you should have an idea of the website it belongs to.

It is important to note that a domain name can be created with a combination of letters (A-z), numbers (0-9), and dash characters.

Importance of Having a Domain Name

Here are some reasons why you should have a domain name:

• Easy to find and locate you: Having a domain name makes the work of finding your business easy and also increases the possibility of making more sales from your web page. If you have a physical store, not everyone may want to visit it.

• For Professionalism and Credibility: Imagine having a business but no website or domain. This will make you look unprofessional to customers because they may not take you seriously.

• Increase your Online Presence: With a domain name, your online presence or your brand’s online presence is increased, which makes you more visible.

Now let's talk about setting up a Vercel account. This process is actually simple and easy to follow.

How to Set Up a Vercel Account

The first step is to visit Vercel.

On the Vercel home page, click on the sign-up button, located at the top right corner of the home page.

Choose your "Plan Type" and then input your name. Then click on Continue to proceed.

Next, connect the account where you will be importing your project from. You’ll be provided with three options: GitHub, GitLab, or BitBucket.

In my case, I clicked “Continue with GitHub”.

Note: If you don’t have a GitHub account, you can read see how to create one here.

Once you have linked your GitHub account with Vercel, the interface should look like this:

At this point, you’re done setting up your Vercel account. The next step is to deploy your project.

From the image description above, you can see an “import” button. Go to the particular project you want to deploy and click on the import button. In my case, I named my project repository “practice-purpose”.

Once you click the import button, it should lead you to the next page where you can input your project name and finally deploy it.

Wait for a few minutes for the deployment to be complete. After that, your interface should look like this:

Congratulations! At this point, you have deployed your first project.

How to Configure a Custom Domain

Before you continue with the process of configuring a custom domain, you must have gotten your domain ready. If not, I have added a quick video that will guide you.

For this article, I will be making use of Namecheap, because that is where I got the domain I am using. Feel free to use any domain provider of your choice.

At this point, your domain name should be available. If that is so, let’s continue.

In your deployment page on Vercel, click on “Domain” in the navigation bar, input your custom domain name (the one you bought) in the space provided and click on “Add”.

When you click on the “Add” button, a prompt should pops up – don’t change anything, use the recommended option and click on the ‘Add’ button.

For the next step, click on the “Nameservers” option, then click on “Enable vercel DNS”.

Lastly, copy the DNS and head to the website where you purchased your domain.

Here are detailed images that show the above steps.

At this point, all you have to do is link your custom domain with Vercel, using the DNS you just copied from Vercel.

Here is how you can go do that (I’ll use the Namecheap process to explain it):

Go to the website where you purchased your domain and log in to your dashboard.

Head to the domain list option and click on it. This should display a list of domains you have purchased with that account.

Next, head to the domain name you used for your Vercel project and click on the “manage” option. This should open a page where details of the domain is displayed.

Find where you have “nameservers” and choose the “custom DNS” option. Lastly, paste each of the DNS you copied from Vercel into the spaces provided and click on save.

After this, you should get a prompt stating that the custom domain will be live in the next 48 hours. In most cases, it doesn’t take up to a day for it to be active.

Here is a detailed image that shows the above steps.

Conclusion

In this article, you learned about the Vercel platform, what a domain name means and its importance.

You also learned how to set up your Vercel account, deploy your project, and add a custom domain.

If you’ve read up to this point, I want to say a very big congratulations, and I hope you got the value out of this article.

In this article, you’ll learn all about the git stash command and why it’s important to stash your code. By the end of this article, you will have firsthand knowledge of how to use the git stash command in your projects.

Here’s what we’ll cover:

1. Why do we stash?

2. Pros and cons of using git stash

3. How to create a stash in Git (step-by-step guide)

4. Other git stash commands like list, apply, and pop

5. How to handle multiple stashes in your project

6. Real use cases for git stash

7. Conclusion

Why Do We Stash?

Git has provided us with the stash command, which makes our lives easier. The git stash command helps you save a draft of your current task, temporarily giving you time to attend to your new task without losing your progress on the previous task.

There are so many reasons why stashing is important. Here are some of them:

• Resolving Conflicts within a Project: In a collaboration setting, you, as a developer, get to work with other developers on a particular project. A merge conflict might occur, which might require you to pause your current task to handle the conflict. You can easily stash your current task and focus fully on resolving the merge conflict without having to worry about losing your progress.

• Clean Working Environment: You might want to start up a new task or want to pull a repository into your working environment. With stashing, you can clear your current working environment temporarily, making your work environment clean and ready to perform another task.

• Switching branches: Git stash is very useful in this situation. You might be in the middle of something and it's not ready to be committed, but at that moment, you need to switch branches. With git stash, you can easily move to another branch and perform your other tasks.

Pros and Cons of Stashing

Here are some of the pros (advantages) of using stash:

• It’s easy to use and understand

• It helps you save a draft of your current task and focus on another task.

• It comes in handy when trying to resolve conflicts like merge conflicts, git fork, and so on when working with other collaborators in a project.

• You can reapply your draft file not only on the branch you stashed it from but also on other branches.

As the saying goes "Anything that has an advantage also has a disadvantage". Here are some of the cons (disadvantages) of using stash:

• Stashing can lead to a merge conflict: A merge conflict can occur when reapplying your stashed draft to a branch which already has similar content to the draft, and you’ll need to resolve this manually.

• Cluster and Confusion: In a situation where you are working on a huge project with multiple sub-tasks, applying the stash command at various points might lead to a cluster of saved drafts. This can lead to confusion on the particular saved draft you would want to continue working on.

Now that we have seen some of the pros and cons of using git stash, let’s look at how git stash works and how to apply it to our project.

How Git Stash Works

As we just discussed, git stash helps you save a draft of your current uncommitted changes. Now let's see how this happens using the analogy below.

When you run the git stash command, it puts your tracked file in a box and then removes/hides that box, making the environment/branch clean and free to use for another task. When you apply the stash command to the current branch you are working on, it saves a draft of all tracked files in that branch and reverts that branch to a clean slate.

To explain better, here’s an example:

From the image above, we created a new project and already initialized git in it. We are currently on the "main" branch which is the default branch.

If we modify a file in the main branch and apply the git stash command, the modified file will be saved as a draft and your working environment will be reverted to the last commit you made (making it look like there was no modification in the first place).

Note: By default, you can only apply the stash command to tracked files in git.

How to Create a Stash

Here is how you can go about creating a stash in your project.

Create a file you want to work on, maybe an index.html file or a style.css file. Initialize git in your project by running the command git init. Add the file to the Git tracking stage by running git add . Then at this point, if you make any modifications and would like to come back later to complete it, you can run:

git stash

Here is a visual representation of the above process:

There are other stash commands you should know in order to control your stashed project. They include List, Pop, Clear, Apply, Show, and a few others.

• List: The list command is mainly used to display the number of stashes made in a particular project. Just like an array, the stashed draft is numbered from 0 upwards. To use this command, run git stash list. Note: The stash command is arranged in such a way that when a change is stashed, it takes up the first position i.e."stash@{0}" while the other changes are pushed down.

• Pop: This command is used to retrieve an already stashed draft back into your project. When you apply the pop command, it automatically retrieves the latest stashed draft back into your working project and removes it from the stash list. Run the following command to pop a stash: git stash pop.

• Clear: When applied, this command is used to remove/delete all the stash entries. It is important to note that, when you use the clear command, you can recover the cleared stash again. You can use it by running this command: git stash clear.

• Apply: This command works just like the pop command, but the only difference is that the stashed draft is not removed from the list after it has been retrieved. This means that when you use the apply command, it retrieves the latest stashed draft back into your project but doesn't remove it from the stash list. Run the following to use the apply command: git stash apply.

• Show: This command is important because it helps show you the changes you made in the stashed draft. Use the following command to show a stash: git stash show.

How to Handle Multiple Stashes in Your Project

Knowing how to handle multiple stashes in your project is important, as there may be times when you have more than 3-4 stashed drafts in your project.

Here is how to handle multiple stashes:

Step One: Customize each stash with a specific message

This step is very important if you would like to avoid being confused in situations where you have multiple stashes.

From the image above, we have a total of four stashes (that is, "stash@{0}" to "stash@{3)") and each stash bears the same message of "first commit". This might be confusing when we might want to pop or apply one of these stashes later in the future.

To sort this issue, all we have to do is assign a specific stash message to the next stash. We can do this by running the following command:

git stash save "New message/name goes here"

Here is how it looks:

From the image above, you can clearly see the difference between the two latest stashes (that is, "stash@{0}" and "stash@{1}") and the others. The first two stashes have their own specific message, which makes it very easy to differentiate them from the rest.

Step Two: Retrieve a specific stash instead of the latest stash

There are situations when you might want to retrieve a specific stashed draft rather than the latest stashed draft you just made. You can do this by using either:

git stash pop stash@{n}

or

git stash apply stash@{n}

Where n indicates the stash ID you want to retrieve. This also works when you want to delete or clear a specific stashed draft.

Step Three: Preview your stashed draft before you retrieve it.

Before you restore a stashed draft, it is important to preview it to ensure that it's the exact draft you want to restore. The show command helps you review the changes in the draft before restoring it. To do this, run the following command:

git stash show stash@{n}

Real Use Cases for git stash

Here are some real-life case scenarios of when the git stash command is important.

• During Debugging: This happens a lot when you are in a collaboration setting. Let's say you are working with extra two developers on a project and one of them happens to encounter an error that needs your urgent attention. Using the git stash command is ideal in this situation.

• When you are not ready to Commit: This occurs often. There are situations where you are not ready to commit your changes to the repository. Stashing those changes is the best next step.

• Returning the directory to its original state: Returning the directory to its original state simply means cleaning out all changes made to the directory and making it look as if nothing was done to it. The git stash command helps you achieve this.

Conclusion

The git stash command effortlessly helps you manage your project properly whether you are working alone or you’re in a collaboration setting.

This tool is vital to every developer who wants to flow freely and effortlessly while working on a project.

At this point, I believe you know what git stash is all about, why it is important and how to make use of it in your project.

Thank you for reading.

One of the interesting things about the Hook features is that they let you use React without classes. This, in turn, helps simplify your codebase and helps you write cleaner and more intuitive code.

In this article, you will learn how to make use of the common Hooks in your project.

React Hooks Benefits

Let's go over some of the reasons why you might want to use Hooks in your project:

• Easy to use and understand: With Hooks, you can write more straightforward code. These Hook commands can only be written inside a functional component.

• Reusable code: Hooks allow you to reuse a particular logic used in one component across multiple other components.

• Better optimization performance: Hooks offer a more efficient approach to utilizing React functionalities like state and lifecycle functions, resulting in improved performance as compared to class components in some situations.

Different Types of React Hooks

The React Hook features are of different types, ranging from the useState, useEffect, useRef, useReducer, and so on.

React Hook Rules

There are a few important rules when it comes to the React Hook features that should be strictly followed. Let's go over them in the following sections.

Hooks should be called inside a React function

Hooks should not be used inside a class component – they can and should only be called inside the React function.

This first rule essentially specifies that a Hook component should not be found in a class component, but in a functional component.

Here is the wrong way of implementing the Hook feature:

import React, { Component } from 'react';
import React, {useState} from react;

class App extends Component {
 const [count, setCount] = useState(0);

  render() {
    return (
      <div>
        <h1>Hello, I am a Class Component!</h1>
      </div>
    );
  }
}

export default App;

And here is the correct way of implementing the Hook feature:

import React, { useState } from 'react';

function App() {
  const [userName, setUsername] = useState('');

  };

  return ( Your JSX code goes in here.....);
};

export default App;

The code example above shows a proper way of using a Hook feature.

If you use a Hook feature in a class component, just like in the first example, your code will raise an error. Therefore, you can only implement a Hook inside a function component.

Hooks can only be called at the top level of a component

You can only implement/call a React Hook at the top level of a component before any other code.

Using the code from the previous section as an example, you can see that immediately after function App ().

The next thing that comes is the Hook command – in that example we used the useState Hook. That is what the second rule is all about.

Hooks cannot be used in a conditional statement

We have different types of conditional statements/rendering ranging from if, else, and so on.

The above rule means that conditionals cannot be applied directly to Hooks. This is the case because Hooks are called in the same order on every render of a functional component.

You can conditionally run Hooks within a functional component, but for this to work, this condition must be determined by top-level logic and should not be nested within any other blocks or components.

The reason for this is because Hooks need to be invoked at the highest level of the component, rather than under conditions, loops, or nested functions.

Here is an example:

import React, { useState, useEffect } from 'react';

function ConditionalEffectComponent() {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    if (isMounted) {
      // Perform some effect when the component is mounted
      console.log('Component mounted');
    }
  }, [isMounted]); // Dependency array ensures effect runs when isMounted changes

  return (
    <div>
      <button onClick={() => setIsMounted(!isMounted)}>
        {isMounted ? 'Unmount' : 'Mount'}
      </button>
    </div>
  );
}

export default ConditionalEffectComponent;

From the example above, the useEffect hook is executed conditionally dependent on the value of the isMounted state variable.

Clicking the button causes the value of isMounted to alternate, either activating or deactivating the effect depending on the updated value.

This is deemed appropriate because the Hook is invoked at the highest level of the component and its condition is determined by the overarching logic within the component.

How to Use the useState Hook

The React useState Hook enables you to have state variables in functional components.

To make use of the state Hook, you must first import it into your project by using the import command.

The way useState works is that it gives us two variables. The first variable is known as the value of the state, and the second variable is a function used to update the state.

Here is an example of how to go about this:

import './App.css'
import React, { useState } from 'react';

function App() { 

    const [count, setCount] = useState(0); 

return ( 
    <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}> Click me
        </button>
    </div>
    ); 
}

export default App;

From the code example above, you can see that the state Hook was used in a functional component and not a class component.

count and setCount are the two variables of the state Hook, where count is the current value of the state and setCount is used to update the value of the state. Therefore, whenever the button is clicked, setCount will update the value of the count.

How useState Hook works

How to Use the useEffect Hook

The useEffect hook in React is like a handy tool for functional components. It helps manage tasks that aren't directly related to showing stuff on the screen, like fetching data from the internet, retrieving data from API endpoints, or setting up timers. It can be used to update components even after they've been shown, making your app more dynamic.

Here's a basic example of how useEffect is used to fetch data from an API endpoint:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData(); // Call the fetchData function when the component mounts or updates

    // Cleanup function (optional) to handle unsubscriptions or resource cleanup
    return () => {
      // Cleanup logic here, if needed
    };
  }, []); // Empty dependency array means the effect runs only once after the initial render

  return (
    <div>
      {/* Render the fetched data */}
      {data && (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default MyComponent;

In the code example above, MyComponent is a functional component which utilizes React hooks, specifically useState and useEffect, to handle state management and execute side effects. The useState hook is used to initialize a state variable called data. This variable will store the data retrieved from an API endpoint.

The useEffect hook is used to request data from the API endpoint once the component initially renders. Within the useEffect, an asynchronous function fetchData is defined to fetch JSON data from the specified API endpoint using the fetch API.

If the data fetching is successful, the returned JSON data is saved in the data state variable using the setData function supplied by the useState hook.

The useEffect hook also optionally returns a cleaning function, which is currently empty but can be used for any necessary cleanup logic.

In the component's JSX, the fetched data is conditionally rendered. If the data is not null, a list <ul> is produced using items extracted from the data array using map.

Finally, the MyComponent function is exported as the default export from the module, allowing it to be imported and utilized in other sections.

Conclusion

As a developer, React Hooks are a very useful and powerful tool for functional components that make your work easy.

I believe that at this point you now know what a React Hook is and how to use the most popular ones.

Thanks for reading, and happy coding!

Because React is open source, anyone can access its source code, inspect it, modify it, and enhance it for their personal needs or app development requirements.

In this tutorial, you'll learn how to install React into your project.

How to Install React

Now that you know what React is and why it's useful, you'll learn how to make use of this library in your project.

Step 1: Install Node.js

Before you start the React installation process, you must have Node.js installed on your computer. If you do not know what Node.js is all about, you can read more here.

You have to install Node first because React.js is a JavaScript library, and Node.js is a JavaScript runtime environment that allows you to run JavaScript on the server side. So when you're writing React, you include JavaScript functions in your React project, and then Node.js helps run this JavaScript code on the web page.

Node.js has various versions. The recommended version is the latest stable version, as it contains major and significant changes. These changes includes bug fixes and security updates, compatibility with your project dependencies, and so on.

To install Node, navigate to the Node.js website. On their webpage, you have the option to download either the recommended version or the current version, as seen in the image below.

Node.js web page interface

After you have downloaded the version of your choice, install it on your computer.

Once installation is complete, open your command prompt to confirm that Node has been successfully installed. Type in node -v in your command prompt, then click the enter button. This command should display the current version of Node installed on your computer.

Here is what it looks like:

Node version displayed in the command prompt

If your Node version is displayed like the above, congratulations! You have successfully installed Node.js on your computer.

Step 2: Install React

Now you can go ahead and install React into your project. Let's go through the steps together.

First, we'll look at the "traditional" way of installing React, using create-react-app (CRA), so you're aware of that process. Then we'll see how to install it using the modern Vite build tool.

Using CRA

Still in your command prompt window, navigate to the directory that you want to use in creating your React project. To do this, type cd [directory name] then click enter.

cd documents command to go to documents directory

As you can see in the image above, I am navigating to the documents directory, which is where I would like to create my React project.

In the documents directory (or wherever you're creating your project), create a folder that you will be using to create your React app. Type mkdir [folder name]then navigate to the newly created directory using cd [newly created folder name].

In the newly created folder directory, type in npx create-react-app [project name of your choice], and then wait until your React project is completely created. The final section should have the text in the image below displayed:

React complete installation in the terminal

Lastly, open the React project in your code editor by typing in code . . Your code editor (if you are making use of VS code) should look like this:

React Complete Installation Display Using CRA

In the above image, let's go over some of the elements you'll see there.

• The node module folder is a storage folder that holds your React package along with other packages that might be installed as you work on your React project. The node module helps configure the design system of your React project.

• The src folder stores in all the files and components used in your react application ranging from the App.js, index.js, App.css just as seen in the image above.

• The package-lock.json file locks the versions of dependencies your React project uses, and this helps in managing dependencies in your React project.

Recently, create-react-app has become deprecated and the React team doesn't recommend using it anymore. Other modern tools provide a faster front-end development experience, and and you can use them to create React apps without stress. Such tools include Vite, Snowpack, Gatsby, Next.js, Percel, and so on.

In this section, you will learn how to use the Vite tool to install React into your project.

Using Vite

Vite is a very fast and customizable modern tool that aims to provide a linear development experience for modern web projects. You can use it to create your React apps in a fast and reliable way. It also has the same features as create-react-app (CRA).

Just as we did when installing React using CRA, the first step is to make sure you have Node installed on your computer. After that, navigate to the directory you want to use and create a new folder (with any name of your choice).

Open the newly created folder in your code editor (VS code).

Vite_React

The image above is what yours should look like. In my case, I named the folder I created Vite_React.

The next step is to open the terminal (located in between Run and Help), as seen in the image above.

Once in the terminal, run npm create vite@latest [your project name]. In my case the project named I used is new-react-vite. The above command should look like this:

Select Framework (React)

At this point, you are asked to select what framework you want to install, so since you are working on React, use your arrow keys to navigate to where we have React, then click on Enter.

Select language (Javascript)

From the image above, the next step is to select what language you want for your project. You can choose any language of your choice, but for the sake of this tutorial, I chose JavaScript.

The next step is to navigate to the project directory where you created the React project. To do this, type cd [directory name]. Yours should look like this:

React Complete Installation Using Vite

Once you have done this, you should see that your React files has been created and displayed on the screen like this:

React Installation Display

Last but not least, install the Node module folder by typing npm install in the terminal. This takes a little time to complete, but when installation is done, you should see the node_module folder at the top, like this:

Node Modules folder

Lastly, type npm run dev to run your project and display on the web page. If you followed the installation steps correctly, you should see your local host:

Local host

Hold your control button and click on your local host. This takes you to the web page. At this point, if your web page is displayed like this:

Final React Display on the web page

Congratulations on installing React on your project!

Conclusion

The React library is a powerful open-source JavaScript tool you can use to create dynamic and appealing applications. It is actually a fun framework to get your hands on, so I recommend trying it out.

I believe at this point you can fully install React into your project with the modern tool (like Vite). If you've done it, congratulations again!

Happy Coding!

Today we will be looking at how to use some basic Git commands in a real project.

I created a simple project that we'll be using in this tutorial.

Project interface

By going through this tutorial, you'll learn how to:

• Create a repository in GitHub

• Initialize Git in your project

• Add and commit your project

• Push your project to GitHub

• Add and remove a file from a repository

How to Create a Repository in Github

I built the sample project above using HTML and CSS. To initialize Git to the project, I will have to create a new repository in my GitHub account.

I can do this by logging into my account, then clicking on the new button located at the top right of the screen. When it opens, I will input my repository name, the description, then choose if I want my project to be accessed publicly or privately. Then I'll click on "Create repository."

How to Initialize Git

We can't make use of Git in our project if we do not initialize/start it first with the git init command.

So after creating the repository in GitHub, I'll open the project in my VS Code editor, go to my terminal, and then use the git init command to initialize/start.

When you run this command in your terminal, you will notice some changes in color in your project. You will also see a U symbol which means your files are untracked.

Also, when you open the folder where your project is stored/located, you will see another folder named .git which was automatically created when you ran the git init command.

git add

.git folder

How to Add and Commit your Project

How to use the git add command

Adding the project to the staging area helps Git track your project and see changes you have made to it.

To add your project to the staging area, run the git add . command. When you run this command, you will see that the U symbol automatically changes to A. This means that your files have been added to the staging area and are now being tracked by Git, waiting to be committed.

git add

How to use the git commit command

By running the git commit command, you are saving this particular stage and t he changes to your project permanently in the Git repository. And although you might make few changes to the project in the future and commit them as well, this particular commit you made now will still be saved in the Git repository and can be accessed anytime.

So after your project has been added to the staging area, the next thing you'll want to do is commit it by using the git commit –m “first commit” command.

When you run this command, you should notice that the A symbol in the project in no longer there, and the project looks as you'd expect once again.

How to Push your Project to GitHub

Pushing your project to Github helps prevent your project from getting corrupted/lost in the local storage. It also lets you access the GitHub repository freely from anyplace, with any computer (not necessarily your personal computer).

To be able to push your project to the GitHub repository, you will have to add the remote repository you created in GitHub initially.

To do this, you will use the git remote add origin (repository name) command. In my case my repository name is https://github.com/Derekvibe/FoodResturant.git. Writing it in the terminal should look like this:

git remote add origin [https://github.com/Derekvibe/FoodResturant.git](https://github.com/Derekvibe/FoodResturant.git)

If you're are not sure of the current branch you're working on, use the git branch command. If it displays the branch as master, we will change it to the main branch by running the git branch –M main command.

(my git branch)

In my case I had already configured my default branch to be branch main when I installed Git on my computer by running the git config –global init.default branch main command. So I don’t need to run the git branch –M main command again.

Finally, after adding the remote repository where you want to upload the project and changing the branch to main, you'll want to push your project to GitHub.

To achieve this, run the git push –u origin main command and wait for it to load completely.

When this is done, go to the Git repository you created in GitHub and refresh the page. You will see that all your projects in the local repository have been uploaded to the GitHub repository.

From this point forward, after making changes to the project, you just have to add the changes to the staging area by running the git add . command. Then you can commit it using git commit –m “(commit name)” and push it to the Git repository by using the git push –u origin main.

How to Add and Remove a File from a Repository

At this point I will be showing you how to add and remove a new file to a GitHub repository.

How to add a new file to an existing repository

Just to recap: I added a new file to my project with the name newfile.txt. I added it to the staging area by running git add newfile.txt, then committed it using git commit –m “new commit” and pushed it to GitHub just like we did when we wanted to upload the entire project to GitHub.

When I refreshed my GitHub page, I should see the new file which I created being displayed.

How to remove a file from an existing repository

If I want to delete/remove the file I just created from my project in GitHub, I can do this by running the git rm newfile.txt command in the terminal.

When I run this command in my terminal, I will add the changes to the staging area using the git add ., and then commit and push the changes to the GitHub repository.

When I refresh my GitHub page, the file will be removed from my GitHub repository. Also, when I go to my local storage, the file should be deleted from there as well.

Conclusion

In this tutorial, you learned how to use the basic Git commands to manage your projects.

Click here to access my GitHub repository for this project so you can try it out on your own.

Hope this tutorial was helpful to you.

Have fun coding!

A version control system helps developers store every change they make to a file at different stages so they and their teammates can retrieve those changes at a later time.

There are three types of version control systems, which are:

• Local Version Control Systems

• Centralized Version Control Systems

• Distributed Version Control Systems.

What is a Local Version Control System (LVCS)?

This is a type of version control system that is very common and simple to use. But this method is quite prone to errors and attacks because the files are being stored in your local system.

This means that you might lose the system file or accidentally forget the directory/folder of the file you are working (and then write in another directory).

What is a Centralized Version Control System (CVCS)?

In this type of version control, a server act as a repository that stores each version of the code. The CVCS helps different developers collaborate together.

Despite the helpful collaboration and communication between developers, if a server goes down for few seconds or gets corrupted, there's the chance you'll lose your work. Unfortunately, this is a very big problem with the CVCS.

In CVCS, only a few developers can work together on a project.

What is a Distributed Version Control System (DVCS)?

This is the latest and most commonly used type of version control system these days.

In a DVCS all developers have a full back up (clone) of all the data in the server. This means that whenever the server is down or faulty, you can still work on your project and you can copy or back up your repositories to the server to restore them.

When you're using a DVCS, many developers can work together on a project. One popular DVCS is Git, which we'll talk about more now.

What is Git?

Git is a free open source distributed version control system you can use to track changes in your files. You can work on all types of projects in Git, from small to large.

With Git, you can add changes to your code and then commit them (or save them) when you're ready. This means you can also go back to changes you made before.

Git works hand in hand with GitHub – so what is GitHub?

What is GitHub?

GitHub is a web interface where you store your Git repositories and track and manage your changes effectively. It gives access to the code to various developers working on the same project. You can make your own changes to a project at the same time as other developers are making theirs.

If you accidentally mess up some code in your project while making changes, you can easily go back to the previous stage where the mess has not occurred yet.

Why use GitHub

There are so many reasons you should learn and use GitHub. Let's look at a few of them now.

Effective Project Management

GitHub is a place where your Git repositories are stored. GitHub makes it easy for developers working on the same project but in different locations to be on the same page.

With GitHub, you can easily track and manage the changes you have made and check on the progress you've made in your project.

Easy Collaboration and Cooperation

With GitHub, developers from all over the world can work together on a project without having any problems.

Teams are able to stay on the same page while working on a project together and can easily organize and manage the project effectively.

Open Source

GitHub is a free and open source system. This means that developers can easily access different types of code/projects which they can use in learning and developing their skills.

Versatility

This attribute of GitHub is very important. GitHub is not a web interface for only developers. It can be used by designers, writers, and anyone who wants to keep track of the history of their projects.

How to Setup Git

To start using Git, you'll need to download it to your computer if you haven't already. You can do this by going to their official website.

When Git opens, scroll down a bit and you should see a download button. Go ahead and click on it.

Download button on the Git website

Choose your operating system whether it's Windows, MacOS, Linux/Unix. In my case, I will be choosing the Windows option because I am using a Windows computer:

Choose your operating see you system

Click on the first link at the very top of the page to download the latest version of Git.

Download the latest version of Git by clicking the first link

When the download is complete, then go ahead and install Git to your computer. You'll need to go to the location where the file has been downloaded and install it.

After the installation, you'll want to make sure that Git is successfully installed on your system. Open your command prompt or Git bash (whichever one you choose to use) and run the command:

git --version

If Git was successfully installed on your computer, it should display the current version of Git below the command you just ran. If the current version is being displayed, congratulations!

How to Configure Git

Now that we have installed Git on our computer, we have to configure it. We do this so that any time we are working in a team on a project, we can easily identify the commits we have made in the repository.

To configure Git, we need to specify the name, email address, and branch by using the git config --global command. For example:

From the image above, we used git config --global user.name to configure the username. In my case I used my name “Derek Emmanuel”. The same applies for the git config --global user.email.

Git comes with a default branch of master, so I changed it to be called the main branch by using the git config --global init.default branch main command.

Now you're ready to start using Git.

How to Setup a GitHub Account

To set up a GitHub account, visit their official website. Click on the sign up button in the upper right corner:

When the sign up form opens up, enter your email, create a password, enter your username, and then verify your account before clicking on the create account button.

Create your GitHub account

Commonly Used Git Commands

There are some basic Git commands that every developer should know how to use:

• git config

• git init

• git add

• git commit

• git clone

• git push

• git rm

• git branch

Let's go through each of these briefly so you know how to use them.

How to Use the git config Command

You use this command to set the username, email, and branch of a user so as to identify who made a commit when working on a project. This command is used when you have downloaded git into your computer and you want to customize it for your use.

For example:

git config --global user.name “ [username]”

git config --global user.email [email address]

How to Use the git init Command

You use the git init command to start Git in your project. This git command is used when you are working on a project and would like to initialize git to the project in order to keep track of the changes made in the project.

For example:

git init

When you run this command, you should see a folder named .git being created automatically in the current folder you are working on.

How to Use the git add Command

This command adds your file to the staging area. The staging area is the area where files we make changes to are added and where they wait for the next commit.

To add a file to the staging area, you use the git add command. It adds all the files in the folder to the staging area.

git add (file name) adds the name of the particular file you want to commit in the staging area.

Use this command when you have made changes to a file and want to commit them to your project.

How to Use the git commit Command

This commits any file you added with the git add command as well as every file in the staging area.

For example:

git commit –m “first commit”

This command saves a file permanently to the Git repository. You use it whenever a file has been added to the staging area using the git add command.

How to Use the git clone Command

You use the git clone command to copy an existing repository in another location to the current location where you want it to be.

For example:

git clone (repository name)

You use this command when you want to duplicate a Git repository from GitHub into your local storage.

How to Use the git push Command

You use this command to upload/push files from the local repository/storage to another storage, like a remote storage such as GitHub.

For example:

git push (remote storage name)

You only use this command when you're satisfied with the changes and commits you've made on a project and finally want to upload/push it to the Git repository in GitHub.

How to Use the git rm Command

You use this Git command to remove a file from a working repository. For example:

git rm (filename)

You use this command only when you wish to get rid of an unwanted changes/files from the Git repository.

How to Use the git branch Command

You use this command to check the current branch you are working on, either main or master. For example:

git branch

This command helps you know the current branch you are working on.

Conclusion

In this tutorial you learned what version control systems are all about. You also learned how to install and setup Git on your computer and setup a GitHub account. Lastly, we went through some commonly used Git commands.

If you want to dive more deeply into Git and GitHub, you can check out this course on the freeCodeCamp YouTube channel.

Hope this tutorial was helpful to you.

Have fun coding!

To create an array in PHP, we use the array function array( ).

By default, an array of any variable starts with the 0 index. So whenever you want to call the first value of an array you start with 0 then the next is 1...and so on.

There are different types of arrays in PHP. They are:

• Numeric/Indexed Arrays

• Associative Arrays

• Multidimensional Arrays

Let's look at how each one works in more detail.

What are Numerical or Indexed Arrays?

A numerical array is a type of array which can store strings, numbers, and objects. Here's an example of a numeric array:

<?php
// Numeric/ index arrays
$cars = array('Mecedes Benz', 'Hilux', 'Highlander', 'Hummer', 'Limozien');
var_dump($cars);
?>

From the code above I have a variable of $cars which stores an array of 5 elements. The var_dump($cars) keyword above will show us the total number of elements we have in the array, the index number of each array, and also the length of each element in the array.

You can also chose to use the echo( ) keyword, but in my case I prefer to use var_dump( ) because it gives a more detailed explanation of the results we get.

You can also choose to display only one element/item of an array in the web browser by doing this:

<?php
$numbers = array('8', '20', '40', '58', '88', '200', '400', '500');
var_dump ($numbers [4]);
?>

The code above follows the same pattern as our definition of an array, which states that it counts from zero. We want to display the element with the index of 4. Counting from 0 to 4, we can see that 88 falls under index 4, indicating that 88 is the number we're seeking and that will be displayed to the browser.

What are Associative Arrays?

An associative array is a type of array where the key has its own value. In an associative array, we make use of key and value.

Keys are descriptive captions of the array element used to access the value of the array. And value is the value assigned to the array element.

There are situations where you shouldn't use the numeric/indexed array, such as:

• When you want to store the age of different students along with their names.

• When you want to record the salaries of your employees.

• When you want to store the score of a student in different subjects

and so on.

Suppose we want to assign ages to a group of high school students with their names.

We can use the Associative array method to get it done. For example:

<?php
$student_age = array (
'Scott_Mcall' => 17,
'Stalenski' => 18,
'Lydia' => 16,
'Allision' => 17,
);

echo $student_age ['Scott_Mcall']; //this code will display the age of Scot_Mcall as 17
echo $student_age ['Stalenski']; //this code will display the age of stalenski as 18
echo $student_age ['Lydia']; //this code will display the age of Lydia as 16
echo $student_age ['Allision']; //this code will display the age of Allision as 17
?>

The code above is an example of an associative array. The keys of the array are scott_Mcall, Stalenski, Lydia, Allision, and we used them to assign the age to each student. The values of the array are 17, 18, 16, and 17.

What are Multidimensional Arrays?

You can think of a multidimensional array as an array of arrays. This means that every element in the array holds a sub-array within it. In general, multidimensional arrays allow you to store multiple arrays in a single variable.

Suppose we want to store the Names, Registration Numbers, and Emails of some of the staff working in a particular company. We can use multidimensional arrays to archive this.

For example:

<?php
$Staffs = [
    [
        'Name' => 'Derek Emmanuel',
        'Reg_No' => 'FE/30304',
        'Email' => 'derekemmanuel@gmail.com'
    ],
    [
        'Name' => 'Rubecca Michealson',
        'Reg_No' => 'FE/20003',
        'Email' => 'rmichealsongmail.com'
    ],
    [
        'Name' => 'Frank Castle',
        'Reg_No' => 'FE/10002',
        'Email' => 'fcastle86@gmail.com'
    ]
];
echo $Staffs [2] ['Email']; // This displays the email of the last staff which is fcastle86@gmail.com

echo $staffs [0] ['Name']; //This displays the Name of the staff in the first array (index 0) which is Derek Emmanuel 

// you can access the information of any staff you wish to by using echo $(variable name) [index number] ['array element key'].


?>

Remember, an array starts counting from index 0. The code above is an example of a multidimensional array because it contains more than one array (an array of arrays) with one single variable of $staff.

The echo $staff [2] [‘Email’] displays the email of the staff that falls into the index of 2. In our case it will display fcastle86@gmail.com.

If I want to access the Email of the staff in the first array, we'll do the following:

echo $staff [0] ['Email'];

Using the method above, you can access and display any information in the array from the code above.

Conclusion

At this point you should be able to use the three different types of arrays when working on a PHP project.

Thank you for reading.

Have fun coding!

And today, we'll review those introductory PHP concepts and then dive into the language a bit more in depth. We'll look at PHP syntax, comments, data types, and variables, among other things.

PHP Setup

Here's a quick rundown of how to get PHP up and running in your project.

Go to the PHP website, click on download in the navigation bar at the top, scroll down to where you see Windows Downloads, and click on it.

When you click on Windows Download, a new page should show up. Just scroll down until you see VS16 x64 Thread Safe (2022-Jun-07 22:31:20), then click on the zip file to download PHP.

When the download is finished, go to the downloads folder in your computer, extract the PHP folder from the zip file, open the extracted PHP folder, right-click php.exe, and choose run as administrator.

You can read more here for a detailed description of how to set up PHP for your code.

PHP Syntax

You can embed PHP code anywhere in a document. It starts with an opening tag of <?php (the PHP code goes in here) and ends with a closing tag ?>.

All PHP statements end with a semicolon ;. A PHP file is always named with the file extension of .php – for example, index.php or home.php.

PHP code usually contains HTML code inside, for example:

<?php
    echo “ <h1> GOOD BYE WORLD, SEE YOU NEXT TIME </h1>”;
    echo “<p> This is me leaving the website at this point in the day </p>”;
?>

From the code above, it we can see that our PHP code contains two lines of HTML code in it – the h1 tag and the p tag. The h1 tag (heading 1) will be displayed in a very big and bold format, while the p tag (paragraphs) will be displayed in the browser normally. Note that all the code above ended with a semi-colon ;.

Comments in PHP

As a developer, comments are crucial. Adding comments to your code makes it easier to read and understand.

In some cases, you may need to return to code that you wrote previously, but you'll struggle to solve the problem if you didn't explain what you were doing with comments.

When you comment something out, it won't show up in the web browser. In PHP, you can write single line comments and multiple line comments.

How to Write Single-Line Comments in PHP

Just as the name states, a single line comment just comments out everything in one line. You can use the forward slash (/) or hash symbol (#) in PHP to denote a single line comment. For example:

<?php
//This is a PHP Heading 1 
echo"<h1> PHP Heading 1</h1>";

#This is a PHP Heading 2
echo"<h1> PHP Heading 2</h1>";
?>

The code above shows the two ways to execute a single line comment in PHP.

How to Write Multiple-Line Comments in PHP

This comments everything in multiple lines. You can use the symbol /* (the comment goes in-between) */ to include a multi-line comment.

When you comment out multiple lines of code, it will not be displayed in the web browser. For example:

<?php
    /*This is a PHP Heading
    the h1 tag displays text very bold and big, and the p tag below is the paragraph tag and will be displayed below the heading.
    */
    echo"<h1> PHP Heading</h1>";
    echo "<p> This is the paragraph </p>";
?>

The multiple line comment that you can see in the code above can be said to have two tags: one is the opening tag which is /* and the other is the closing tag */. Your comment text/code goes in-between the two tags.

Variables in PHP

A variable is a container that stores or houses data or values. In PHP, you create a variable with the dollar symbol $ followed by the variable name.

For a variable to be assigned to a value, we use the = symbol. Here are a few important things to note about PHP variables:

• A variable is declared/executed with a dollar symbol $ then the variable name.

• Variable names are case sensitive. For example $Derek is very different from $DEREK.

• A variable name should not and cannot start with a number, but rather a letter (Aa – Zz) or an underscore (_).

Here are some examples of naming variables in PHP:

<?php
    $color = "red";
    echo "$color"; //THIS CODE OUTPUTS THE COLOR RED TO THE WEB BROWSER
    echo "</br>";

    $COLOR = "Blue";
    echo "$COLOR"; //THIS CODE OUTPUTS THE COLOR BLUE TO THE WEB BROWSER
    echo "</br>";

    $_price = "1000";
    echo "$_price"; //THIS CODE OUTPUTS THE PRICE 1000 TO THE WEB BROWSER
    echo "</br>";

    $_PRICE = "900";
    echo "$_PRICE"; //THIS CODE OUTPUTS THE PRICE 900 TO THE WEB BROWSER
?>

The code above shows the different ways of naming variables in PHP.

Data Types in PHP

Variables in PHP store values of different data types. Now let's discuss some data types that work with PHP:

• String

• Integer

• Float

• Boolean

String data type

A string is a data type which is represented with some text inside double quotes " ". A string can also hold numbers and special characters but they should be enclosed in the quotes. For example:

<?php
    $name = "Derek Emmmanel";
    echo "$name";

    echo "<br>";

    $price = “1234567”;
    Echo “$price”;
?>

From the code above, the variable values “Derek Emmanuel”; and "1234567" are of the string data type because they are enclosed in quotes.

We can use another method to run the above code in our web browser. For example:

<?php
$name = "Derek Emmmanel";
var_dump($name);
?>

In the code above, I used the var_dump keyword to execute my PHP code. Var_dump not only displays your code to your web browser, but also helps you identify what data type you are working with and how many values it contains.

var_dump keyword

Integer data type

Integers are whole numbers that have no decimal point. Integers can either be negative numbers (-34567) or positive numbers (34567). For example:

<?php
    $ad = 12345;
    var_dump($ad);
?>

The code above is an example of the integer data type.

Float data type

Floats are not whole numbers, but rather they are numbers with decimal points. Floats can also be negative decimal numbers (-34.567) or positive decimal numbers (34.567). For example:

<?php
    $fl = 34.567;
    var_dump($fl);
?>

Boolean data type

Boolean is a data type that represents two possible outcome, true or false. Booleans are used mostly when we are working with conditional statements like if, else, elseif, and swtich. For example:

$house = true;
$city = false;

Conclusion

I hope you've learned a lot from today's tutorial. Stay tuned for our next topic.

Happy Coding!

But before we get started, we'll need to understand what PHP is all about.

What is PHP?

PHP is an abbreviation or acronym for "Hypertext Preprocessor." It's a web-based open source server-side scripting language that's integrated in your HTML files.

You use it to make webpages that are both responsive and interactive with the database.

Advantages of PHP

PHP has many benefits, and here are a few of them:

PHP is Simple to Use

You don't need to study extensively to learn and use PHP because its syntax is sensible and well-organized. The command functions are also easy to work with because they help you understand exactly what they do.

PHP is Flexible

Flexibility is a major benefit that every scripting language should have, and PHP is no exception. Even after a project has been launched, a PHP developer has the ability to make changes to the project.

PHP Helps You Collect Data from Forms

You can use PHP to collect data from a form that has been created with HTML (like Name, E-mail, Phone Number, or Password). Many websites use this particular function of PHP.

PHP Has Good Security

PHP does not outsource the data or information collected from forms. This is part of the reason why most most website and social media apps make use of it because it has a secure database system.

How to Install and Setup PHP in your Project

To get started with PHP, you'll need three things: a code editor for writing your code, an installed version of PHP, and XAMPP.

We'll be using Visual Studio code in this example, and I'll teach you how to install a version of PHP and XAMPP on your PC.

Go to the PHP website and click on download in the navigation bar. The current version should be at the top.

Click on "Windows downloads," and when it opens, scroll down a little and you should see a section that has "VS16 x64 Thread Safe (2022-May-11 09:29:42)." The section contains a "zip" file below it – click on it and wait for your download to finish.

Click on the Download Button

Click on Windows downloads

Below Thread Safe click on the zip file to download

When the download is complete, go to your computer's downloads folder and look for a PHP zip file. Right-click it and select extract file. It's important to save the file to your local drive.

Zip folder and the extracted folder

Open the Local Disk and open the extracted PHP folder. Click once on the bar that shows the current directory then copy the name of the directory, which should be in this format: C:\php-8.1.6.

Click the bar once and copy the Directory name

In your windows bar, search for “Edit the systems environment property”. Click on the “environment variables” button, click on “Path”, and then click on the edit button below. It opens a space where you can create a new variable.

So click on the new button and then paste the name of the directory you copied earlier (which should be “C:\php-8.1.6”) and click ok for all of them.

To test if PHP is now installed in your computer, search for the command prompt in Windows by using the search keyword cmd. Open it then type php --version and click enter. You should see something similar to this:

PHP version 8.1.6

The current version of PHP is installed on our PC as seen in the image above. The next step is to get XAMPP.

What is XAMPP?

The acronym XAMPP stands for cross-platform, Apache, MySQL, PHP, and Perl. XAMPP is a free and open source web server that allows you to develop, test, and build websites on a local server.

Unlike PHP, XAMPP installation is quite simple and uncomplicated. Search for "XAMPP Download" in your browser or go to their website. You should see the current version of XAMPP for Windows, Linux, and OSX when it opens.

Because I'm using a Windows computer, I simply need to click on the one for Windows, and the download should begin.

Click the XAMPP for Windows if you are using Windows

When its done downloading, go to your downloads, right click on the setup file and select “run as administrator”.

This will take you to the Setup-xampp wizard:

click next

Click next, and you'll be able to select the components you want:

Select components and click next

Then you'll come to the installation folder. You have to select a folder where you want to install XAMPP. I recommend creating a folder in your local disk to install XAMPP.

select an installation folder

Then you'll select the language. You can select either English or Deutsch (your choice):

select language

Now you'll get Bitnami for XAMPP:

click next

And you're ready to install:

click next

Be patient while the installation process completes. When it's, done click ok.

wait for the installation to complete

Once the installation process is finished, you can now use XAMPP in you project.

Why Do You Need XAMPP?

To run PHP for the web, you will need to install a web server like Apache and a database like MySQL – and both are supported by XAMPP.

XAMPP is a local server that can run smoothly on our personal computer, and is accepted in both Windows and Linux. It also helps you test websites and see if they work before actually publishing them to a web server.

How to Run PHP with XAMPP

To run PHP with XAMPP you will have to go through some steps, and I will break it down so you can understand.

First, open the local storage folder, go to the “xampp” folder and open it. You should see a folder named “htdocs”. Open it then create a new folder in it. In my case I named the folder I created “Demo” (so give your folder the name of your choice).

Next, open your VS code, click on open folder, then go to the location where you saved the folder you created (which in my case I named “Demo”). Create a file with the extension .php – in my case I named mine test.php. The extension .php tells the code editor that we are working on a PHP code/project.

create a file with an extension of .php

PHP is run with the <?php (Code goes in here) ?> tag. The opening tag is <?php then your PHP code goes next before the closing tag ?>. For example:

<?php
echo “<h1> My Name is Derek </h2>;
?>

The echo keyword tells the browser to display My Name is Derek while the <h1></h1> tells the web browser to format the text to be bold/bigger. Then save it.

After writing the code, open the XAMPP control panel, and start the Apache module by clicking on start under the action section.

Then go to your web browser and in the search bar type localhost/Demo/test.php, then enter. Your web browser should be display this:

web display

If your code was displayed on the web browser, congratulations! You're up and running.

Conclusion

Thank you very much for following along with this tutorial. I hope you got some value out of this lesson and I hope you'll try using PHP and XAMPP.

Stay tuned for my next tutorial.

Have fun coding!

If so, stay tuned as I reveal a new method for resolving these kinds of problems with minimal or no stress.

Welcome everyone. In this tutorial, we'll go through how to use the CSS grid layout.

First we'll learn what CSS Grid is and what it's meant to do. Then we'll go through the features of CSS grid, reasons why we should study it, and the benefits it brings to our projects. Finally, we'll discuss when it's best to use it.

What is CSS Grid?

So what is CSS Grid?

CSS Grid is a two-dimensional layout that you can use for creating responsive items on the web. The Grid items are arranged in columns, and you can easily position rows without having to mess around with the HTML code.

Here is a concise definition of the CSS Grid layout:

CSS Grid is a powerful tool that allows for two-dimensional layouts for columns and rows to be created on the web. (Source)

Features of CSS Grid Layout

Flexible Track Sizes

You can use the fr unit (Fraction Unit) to assign any specified pixel value to the grid. This will make your grid organized and responsive.

Item Placement

CSS grid has made it much easier to position items in the container in any area you want them to be without having to mess with the HTML markup.

Alignment Controls

The alignment of an element/item in a container is easier than ever before with CSS Grid. In the container, you can now arrange elements/items horizontally and vertically as you wish.

Benefits of CSS Grid

CSS Grid is very flexible and responsive. It makes it easy to create two-dimensional layouts. CSS Grid also easy to use and is supported by most web browsers.

The CSS grid makes your mark-up cleaner (in your HTML code) and gives you a lot more flexibility. This is partly because you don’t have to change the mark-up (HTML code) to change the position of an item using the CSS grid.

All in all, CSS Grid Layout helps us build a more complex layouts using both columns and rows.

When Should You Use CSS Grid

Although you can use CSS Grid in practically any aspect of web development, there are certain situations when it's ideal.

For example, when we have a complex design layout to implement, CSS Grid is better than the CSS float property. This is because Grid is a two-dimensional layout (with columns and rows), whereas the CSS float property is a one-dimensional layout (with columns or rows).

Grid is also a good choice when we need a space or gap between elements. By using the CSS grid gap property, the spacing of two elements is much easier than using the CSS margin and padding properties which might end up complicating things.

CSS Grid Properties

The CSS grid layout consists of many grid properties. Now we'll take a look at some of them so we can learn how to use them.

Grid container property

This is a CSS grid property that houses the grid items/elements. We implement the CSS grid container property by setting the container to a display property of grid or in-line grid.

For Example:

display: grid;

or

display: in-line grid;

Grid-template-column property

This is a property used to set each column’s width. It can also define how many columns you want to set to your project.

You can implement the CSS gird column property using grid-template-column.

For Example:

grid-template-column: 100px auto 100px;

The code above shows that we have three columns. The width of columns one (the first column) and three (the third column) are set to 100px. The width of column two (the middle column) is set to auto.

This means that as the size of your screen increases, columns one and three take 100px of the screen width, while column two takes the remaining width of the screen (which is auto).

Grid-template-row property

You use the CSS row property to set the height of each column. You can also use it to define how many rows you want to set in your project.

You can implement the CSS gird row property using grid-template-row, like this:

grid-template-row: 50px 50px;

The code above shows that we have a total of two rows and those two rows are 50px high.

Note that we can also assign the column and row property to our HTML code at once by simply using gird-template. Grid-template is another way of representing the grid-template column and grid-template-row.

For example:

 grid-template: 50px 50px / 100px auto 100px;

The code above will give you the same result as grid-template-column and grid-template-row.

To use the grid-template property, you will have to assign the value to the row first before assigning the column's value, just like the code above. The 50px 50px is for the row while 100px auto 100px is for the column.

A way to remember this is by thinking of the letter L:

grid-template

Try this out and see it for yourself.

A gird with a column of 100px auto 100px and row of 50px 50px

Column-gap property

As the name states, it is a grid property that assigns a space between two or more columns in a container. You can do this by using the column-gap property and giving it a value. For example:

column-gap: 20px;

From the code above, you can see that a gap of 20px was assigned to the column.

20px column-gap

Row-gap property

Just like column-gap, row-gap is a CSS property that assigns a space between two or more rows in a container. For example:

row-gap: 50px;

row-gap: 50px;

Note that we can also assign a gap to both the columns and rows of a container by using the gap property. For this to work, we only assign one value to both the columns and the rows of the container, just like we did in the code above.

Here's an example:

gap: 20px;

gap: 20px

From the diagram above, we can see that a gap of 20px was set to both the columns and rows of the container making them equally spaced.

Justify-content property

This is a grid property that you use in positioning items (columns and rows) horizontally in a container. It displays how the web browser positions the spaces around the items (columns and rows).

The justify-content property has six possible values:

• Start

• end

• center

• space-around

• space-between

• space-evenly

Start

This positions the items at the left side of the browser and can be executed with the following code:

justify-content: start;

justify-content: start;

End

This positions the items at the right side of the browser and can be executed with the following code:

justify-content: end;

justify-content: end;

Center

This positions the items at the center of the browser and can be executed with the following code:

justify-content: center;

justify-content: center;

Space-around

This property distributes the items in the container evenly, where each item in the container has an equal amount of space from the next container.

This code can be executed like this:

justify-content: space-around;

justify-content: space-around

Space-between

Just like the space-around property, space-between distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one in the container. It takes up the entire width of the container.

This code can be executed like this:

justify-content: space-between;

justify-content: space-between

Space-evenly

Just as the name states, this property distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one in the container.

This code can be executed like this:

justify-content: space-evenly;

justify-content: space-evenly;

Note that all the justify-content properties position their items/elements horizontally. Try doing it yourself to understand it more.

Align-content property

Align-content is the opposite of justify-content. You use the align-content property in positioning items vertically in a container.

Just like justify-content, the align-content property has six possible values:

• Start

• end

• center

• space-around

• space-between

• space-evenly

Start

This positions the items at the top of the browser and can be executed with the following code:

align-content: start;

align-content: start;

End

This positions the items at the bottom of the browser and can be executed with the following code:

align-content: end;

align-content: end

Center

This positions the items at the center of the browser and can be executed with the following code:

align-content: center;

align-content: center;

Space-around

This property distributes the items along the side of the container evenly, where each item in the container has an equal amount of space from the next one vertically.

This code can be executed like this:

align-content: space-around;

align-content: space-around

Space-between

Just like the space-around property, Space-between distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one in the container, and takes up the entire width of the container in the vertical direction.

This code can be executed like this:

align-content: space-between;

align-content: space-between

Space-evenly

Just as the name states, this property distributes the items in the container evenly, where each item in the container has an equal amount of space from the next one vertically.

This code can be executed like this:

align-content: space-evenly;

align-content: space-evenly

Conclusion

In today's article, we studied what CSS Grid Layout is all about, why we should learn it, and the properties of CSS grid.

Thank you for reading.

Have fun coding!