This tutorial covers different areas of software development like full-stack, cloud development, and third-party integration. You’ll learn how to use tools like Git/GitHub, Next.js, and Vercel to improve the security of an AI app.

Also, if you prefer watching actual implementations, there are YouTube videos at the end of most sections to show you how it's done.

Table of Contents

• Prerequisites

• Getting started

• Exploring the project files

  • The layout.tsx file

  • The page.tsx file

  • The hooks/useOpenAI.ts file

  • The package.json file

• How to Get Your OpenAI API Keys

• How to Deploy the Project on Vercel

• Vulnerability one: Exposure of sensitive data in the frontend

• Vulnerability two: DOS or DDOS attacks

  • Rate limiting

  • Vercel and Cloudflare DDOS protection

  • Vercel security features

• Vulnerability 3: No authentication and authorization

• Optimizing the code

• Conclusion

Prerequisites

Before you begin this tutorial, here are some of the things you need to have:

• A basic knowledge of writing Next.js code

• A code editor (like VSCode) for writing and editing the project’s source code.

• Git and GitHub account for version control, continuous integration, and authentication.

• A Vercel account to host the project.

• An OpenAI Developer account to get your API key.

Getting Started

First, you need to clone this GitHub repository.

I created the repo specifically for this tutorial to show you some of the vulnerabilities that you might overlook when building a Next.js AI app.

To clone the project, open your command line interface and navigate to the folder you want the repo to be in.

Next, use the git clone command to clone the project.

git clone https://github.com/Gidthecoder/nextjs-ai.git

Remember that you must have already set up Git in your system or the command won’t work.

Once that's done, navigate to the folder using the command below:

cd nextjs-ai

Next, type the command below to install the project dependencies:

npm install

Once this is done, you can open the folder in your text editor and explore the files.

The code is well-commented, so you shouldn't have much problem understanding it.

To run the project, first make sure you’re in the project directory in your CLI. Then run the command below:

npm run dev

If everything works well, open your browser and type http://localhost:3000/ in the search bar.

The result from the browser should look this:

If you got the same result, give yourself a round of applause. Great job.

If you try sending a message from the form, you’ll notice that an error message is displayed. This is because you haven’t added an OpenAI API key to the project.

But don’t worry about that for now. Let’s have a look at the project files.

Here is the video for this section:

Exploring the Project Files

The project we cloned is basically a ChatGPT wrapper. You ask it a question and it gives you a response.

Under the hood, the project uses Next.js to send an API request to the OpenAI server and displays the response to the user.

If you opened the folder through VSCode, the project structure should look like this:

The project has 4 top-level folders: .next, node_modules, public, and src.

The files in the root folder include .gitignore, package.json, tailwind.config.js, tsconfig.json, and others.

Most of your work will be within the src/app folder because it contains all the code you need for the project.

The app folder represents the app router. It contains layout.tsx, page.tsx, global.css, hooks folder, and so on.

The layout.tsx file

layout.tsx is a TypeScript file that contains the code for root layout.

From lines 1 to 3, you'll import the Metadata type, Inter font, and a globals.css file that allows you to use TailwindCSS utility classes.

import type { Metadata } from "next";

import { Inter } from "next/font/google";

import "./globals.css";

From line 5 to 10, 2 you'll create the variables inter and metadata. inter initializes the Inter font, and metadata stores an object that contains the title and description of the site, similar to the HTML title and meta elements.

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "WriterAI",
  description: "A ChatGPT wrapper that answers your questions",
};

Next, you'll create the RootLayout component that'll wrap all the pages of the project.

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
      </body>
    </html>
);
}

The page.tsx file

app/page.tsx is a TypeScript file that represents the code that’ll be rendered in the browser when the root URL (/) is called.

Line 1 has a use client directive which declares the file as a client component. This way we are able to fully use React.js features in the component.

"use client";

From line 3 to 6, you'll import a custom useOpenAI hook and the React built-in hooks (useState, useRef, useEffect, … ).

//import the custom hook for getting the response from the OpenAI API
import useOpenAI from './hooks/useOpenAI';

import {useState, useRef, useEffect, FormEvent} from 'react';

Then you'll create a custom Message type that’ll be used with the state that stores the messages between the user and the OpenAI API.

type Message = {
  role: string;
  content: string;
};

Lines 13 to 120 contain the code for the Home component that’ll be rendered in the browser when the root URL is called.

Within the Home component, line 15 initializes the useOpenAI hook.

//initialize the custom hook
const getCompletion = useOpenAI();

Line 17 initializes a useRef hook that’ll be used to reference the DOM container element that wraps the messages between the user and the server.

const chatContainerRef = useRef<HTMLDivElement>(null);

From lines 19 to 23, you're creating a content variable that represents an array that’ll be used as the initial values for the state that stores the chat/messages.

//initial chats for the site
 let content: Message[]  = [
   {role: "user", content: "Are you ready to write about any topic for me"},
   {role: "assistant", content: "Always ready bruv. what is your topic?"}
]

Lines 25 to 30 represent the state variables of the component. Input keeps track of the text entered in the input element by the user. chats store the messages from the user and OpenAI API. It is initialized with the content variable. isTyping keeps track of when the user is typing. Its initial value is false.

 //this state stores the input value
 let [input, setInput] = useState<string>('');
 //this state stores the chats
 let [chats, setChats] = useState<Message[]>(content);
 //this state keeps track of when the AI is typing
 let [isTyping, setIsTyping] = useState<boolean>(false);

The code in lines 31 to 72 represents the handlerChat function which is the event handler that is called any time a user hits the enter key or ask button in the form.

In summary, its job is to receive the prompt from the form, update the input, isTyping, and chats states, pass the prompt to the getCompletion function of the useOpenAI hook, wait for the response, and display it to the user.

//handleChat event handler for the submit event
let handleChat = async (prompt: string, e: FormEvent) => {
  //prevent the form from reloading the entire page when submitting
  e.preventDefault();

  //if there is no value in the input or it is clicked when the isTyping is true, do nothing
  if (!prompt || isTyping) return;

  //set isTyping state to true. 'true' adds an element displaying 'AI typing'
  setIsTyping(true);

  //clear the content of the input state. This also clears the input element which displays the value.
  setInput('');

  //updates the chats state with the prompt sent from the input
  setChats(prevChats => {
    const updatedChats = [...prevChats, { role: 'user', content: prompt}];
    return updatedChats;
  });

  try {
    //send the prompt through the openai api and wait for the response
    const result = await getCompletion(prompt);

    //update the chat prompt with response gotten from the openai api
    setChats(prevChats => {
      const updatedChats = [...prevChats, Object(result)];
      return updatedChats;
     });

     //set isTyping state to false. 'false' removes the element displaying 'AI typing'
     setIsTyping(false)

  } catch (error) {
    //catch any possible error from the request
    console.error("Error fetching completion:", error);

    //set isTyping state to false. 'false' removes the element displaying 'AI typing'
    setIsTyping(false)
  }
}

Lines 73 to 78 contain the code in the useEffect hook. Any time the chats state is updated, the document will be scrolled to the bottom so that the most recent messages are displayed.

useEffect(() => {
  if (chatContainerRef.current) {
    //whenever the chats state is updated, scroll to the bottom of the container element to display the recent messages
    chatContainerRef.current.scrollTo({ top: chatContainerRef.current.scrollHeight, behavior: 'smooth' });
  }
}, [chats]);

The code from lines 81 to 120 contains the markup that’ll be rendered in the browser.

From lines 91 to 99, the content of the chats state is added to the markup using the map function. Messages from the AI are aligned to the left while those of the user are aligned to the right

{
  //the content of chats state is looped to display the content. if the content is from the user, it will be aligned to the right. if it's from the AI, it'll be aligned to the left
  chats.map((data, index) =>
    <div key={index} className={`${data.role == 'user'? 'text-right': 'text-left'} my-[30px]`}>
      <p className="text-[15px] bg-[#4d4d4dff] max-w-[60%] p-[10px] lg:p-[20px] rounded-xl text-left text-[#f2f2f2ff] inline-block">
        {data.content}
      </p>
    </div>
  ))
}

From lines 101 to 107, there is a code block that is always rendered anytime the isTyping state (which is triggered anytime a user sends a message and is expecting a response) is true.

{/*if the isTyping state is true, display the element. if not, hide it.*/}
<div className={isTyping? 'block': 'hidden'}>
  <div className='text-left my-[30px]'>
    <p className="text-[15px] bg-[#4d4d4dff] max-w-[60%] p-[10px] lg:p-[20px]  rounded-xl text-center text-[#f2f2f2ff] inline-block">
      AI Typing...
    </p>
  </div>
</div>

Lines 113 to 116 contain the code that represents the form. Whenever the input element is changed, the input state will be updated. And any time the form is submitted (when the button is clicked or input is entered), the handleChat function is called, sending the value of input state and the form event as the arguments.

{/*when the form is submitted, activate a submit event that sends the value of the input and the event to the handleChat function */}
<form action='' onSubmit={(e) => handleChat(input, e)}>
  <input className=" lg:w-[50%] w-[70%] ml-[5%] lg:ml-[20%] p-[10px] outline-none bg-[#4d4d4dff] text-[15px] text-[#f2f2f2ff]" type='text' value={input} placeholder='Ask your questions' onChange={ (e) => setInput(e.target.value)}/>
  <button className='py-[10px] px-[20px] bg-black text-[15px] text-[#f2f2f2ff]'>Ask</button>
</form>

The hooks/useOpenAI.ts file

In the hooks/useOpenAi.ts file, you'll import the OpenAI library and store the API key in a variable.

import OpenAI from 'openai';

const API_KEY = 'YOUR-API-KEY';

A useOpenAI function representing the hook was created.

Within the function, an instance of the OpenAI object was created. Also, there’s a getCompletion async function that receives the prompt from the argument and sends the request to the OpenAI API. If there is an error along the way, an error message is returned.

function useOpenAI() {
  const client = new OpenAI({ apiKey: API_KEY, dangerouslyAllowBrowser: true });

  const getCompletion = async (prompt: string) => {
    try {
      let completion = await client.chat.completions.create({
        messages: [
            { "role": "system", "content": "Your job is to write about any topic asked by the user" },
            { "role": "user", "content": prompt }
        ],
        model: "gpt-3.5-turbo",
        });

      return completion.choices[0].message;

    } catch(e){
      return {"role": "assistant", "content": "Something went wrong"}
    }
  };

  return getCompletion;

}

Remember that you get an error message any time you send a message from the site.

This is because you haven’t added the OpenAI API keys to the project. We'll address that part later.

The package.json file

Package.json file contains information about the libraries and scripts needed to run your project

The file must look like this:

{
  "name": "nextjs-ai",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@upstash/ratelimit": "^2.0.1",
    "@vercel/kv": "^2.0.0",
    "next": "14.2.5",
    "next-auth": "^4.24.7",
    "openai": "^4.52.7",
    "react": "^18",
    "react-dom": "^18"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

From the code above, the ‘dev’ script will be used to run the project in development mode. That’s why you use npm run dev in the CLI.

The next 2 scripts, build and start, will be used to optimize the files and start the project in a production environment. You don't need to worry about these since Vercel will sort everything out.

next, react, and react-dom are the core libraries for the project.

The openai library will be used to communicate the OpenAI API.

@upstash/ratelimit, @vercel/kv, and next-auth will be used to implement some security features in the next sections.

The development dependencies will only be used while developing the project. They include typescript, tailwindcss, and so on.

How to Get Your OpenAI API Keys

To make the project work as intended, you need to add the OpenAI secret key to the project. This key will allow the app to successfully integrate with the OpenAI API, allowing users to send prompt requests from the client side and receive AI responses.

To get your OpenAI secret keys, you first need to sign up (or sign in) on the platforms.openai.com site. Next, you must set up your payment card details if you haven’t. Without them, the API won’t work.

After that, go to the API keys section to create your API key. Make sure you copy it immediately.

Next, you need to store the API key as an environment variable by creating a .env.local file in the root of your project and pasting the value there.

NEXT_PUBLIC_API_KEY='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'

The property name starts with NEXT_PUBLIC so it can be used in the client side.

Next, in line 4 of the useOpenAI.ts file, change the code to this:

const API_KEY = process.env.NEXT_PUBLIC_API_KEY;

Once that is done, you can save the files, wait for the Next.js server to recompile, and test the site.

If you’ve turned off the server, navigate to your project’s directory in your CLI and enter npm run dev. Once the server has compiled, open your browser and type http://localhost:3000/ in the search bar. Also, make sure you have your wifi connected so your request can be sent to the OpenAI API.

Once the site loads, try interacting with it, ask some questions, and wait for your reply from the OpenAI servers.

If you followed everything correctly, this is what your interaction should be like:

The styling might not look good but it works. You can work on the styling later.

This is the video for this section:

How to Deploy the Project on Vercel

Now it's time to deploy the project on Vercel. We'll use Vercel for deployment in this tutorial, because Vercel creatored Next.js – so the deployment won’t be stressful.

But before that, you'll need to push your changes to GitHub so that you can easily deploy the project to Vercel.

To do that, you need to type the commands below:

git init

git add .

git commit –m "first commit"

git branch -m master main

Once you've done this, you should go to your GitHub account to create a new repository. Make sure you don’t add any files including a README or License to avoid running into Git errors when deploying.

After creating the repo, copy the link of the repository and paste it into the command below:

git remote add origin <link-of-your-repo>

Now push the code to the main branch:

git push -u origin main

Once you've done this, check out the repo in your GitHub account to ensure it was committed in the main branch.

Once that's done, you need to sign up for Vercel with your GitHub account.

Next, import the nextjs-ai repository from GitHub and deploy it.

Before deploying it, paste the content of your .env.local file to the environment variables section. After that, click Deploy and wait for the project to be deployed.

After a few seconds, your app will be deployed, and you’ll be shown the public URL of your project.

When you visit the deployed link, the site should behave like this:

Although the app does what it should, it’s filled with security vulnerabilities that can cost you a lot of money due to cyberattacks. So we'll pause before getting a domain name so we can fix these issues.

Vulnerability One: Exposure of Sensitive Data in the Frontend

Exposing sensitive data like API keys in the frontend is dangerous because the data can be stolen and maliciously used by an attacker.

Although you stored the API key as an environment variable, it can still be viewed in the browser. This is because you used the environment variable in a React hook that’ll be executed on the client side.

This means that anyone with enough skills can check your API keys in the browser.

Although the OpenAI API strictly enforces the use of its API on the server side, providing a dangerouslyAllowBrowser prop to remind users of the dangers of using it on the client side, Most APIs don’t have this type of enforcement.

If I was an attacker, here is how I could get your OpenAI API keys:

First, I’d open the browser’s developer tools and click on the network tab. Then, I’d enter a prompt in the input and click enter. As the request was sent, the network tab would capture the outgoing requests and display all the information.

Then when I clicked on the headers tab and navigated to the request headers, I would be able to see the authorization header and the API key.

The video below shows a demonstration:

How to fix vulnerability 1:

So how do you fix this? Don't worry – it’s simple.

To prevent exposing data in the client side, you must move the sensitive code to the backend and access your environment variables from the server side. This way, any request from the browser is abstracted and the server as a proxy for communicating with the OpenAI API.

In Next.js, you can do this by using route handlers. We’ll use route handlers to receive incoming requests to the api/ai route, send the prompt to the OpenAI API, and return the responses to the client side.

Route handlers are server-side functions so their code won’t be visible in the browser and your environment variable will be secured.

Now that you know what to do, let’s update the code.

First, remove the NEXT_PUBLIC prefix from NEXT_PUBLIC_API_KEY so it becomes API_KEY. This is to ensure that the key won’t be available on the client side.

API_KEY='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'

Next, create an api folder within app. This folder will store all the route handlers for your project.

Next, create an ai folder and a route.ts file within it. The ai folder must be within app/api.

The api/ai/route.ts file will handle requests to the api/ai route.

Next, add this code to your api/ai/route.ts file:

import {NextRequest, NextResponse} from 'next/server';

import OpenAI from 'openai';

const API_KEY = process.env.API_KEY;

const client = new OpenAI({ apiKey: API_KEY });

export async function POST (req: NextRequest) {
  let {prompt} = await req.json();

  if (!prompt) {
    return NextResponse.json({ content: 'Prompt is required' }, {status: 400});
  }

  try {
    let completion = await client.chat.completions.create({
      messages: [
          { role: 'system', content: 'Your job is to write about any topic asked by the user' },
          { role: 'user', content: prompt }
      ],
        model: 'gpt-3.5-turbo',
    });

    return NextResponse.json(completion.choices[0].message, {status: 200});

  } catch (error) {
    console.error(error)
    return NextResponse.json({ content: 'Internal Server Error' }, {status: 500});
  }  
};

From the code above, you imported the NextRequest and NextResponse functions representing extensions of the Web Request API and Web Response API. You also imported the OpenAI function from openai library.

Next, you created a variable (API_KEY) that stores the API_KEY environment variable. You also created another variable that stores a new instance of OpenAI object.

Finally, you created a POST function to handle POST requests to the api/ai route. The function receives the prompt and passes it to the OpenAI API, waits for a response, and returns it to the user. If the request doesn’t have a prompt property in the body or there is an error along the way, an error message will be returned to the user.

Next, go to your hooks/useOpenAI.ts file and replace it with these:

const useOpenAI = () => {
  const getCompletion = async (prompt: string) => {
    try {
      const response = await fetch('/api/ai', {
        method: 'POST',
        body: JSON.stringify({ prompt }),
        headers: {
          'Content-Type': 'application/json',
        }
      });

      const result = await response.json()

      if (!response.ok) {
        return { role: 'assistant', content: result.content};
      }

      return result;

    } catch (error) {
      return { role: 'assistant', content: 'Something went wrong' };
    }

  };

  return getCompletion;
};

export default useOpenAI;

From the code above, you modified the useOpenAI hook so that if getCompletion is called, it will send a fetch request to the api/ai route and return the response to the user. If the request is not successful, an error message will be returned to the user.

If you’ve done that, it’s time to test your endpoint.

In your system, navigate to the project CLI and run the command below:

npm run dev

If you test the site and everything goes well, it means it’s ok.

Now let’s check if you can get the API keys in the Developer tools:

From the video above, you can see that no API keys were exposed in the request headers.

Now that this is resolved, you should push the changes to your GitHub repo.

Any changes made in the main branch of your GitHub repo will be automatically deployed to Vercel.

Run these commands to update your GitHub repo:

git add .

git commit –m "moved sensitive code to backend"

git push –u origin main

After updating the changes, go to your project deployment page on Vercel to confirm that the deployment was successful.

Unfortunately, the deployment is expected to fail because you haven’t updated the environment variables you added to Vercel (from NEXT_PUBLIC_API_KEY to API_KEY).

So you must go to setting > environment variables, and import the .env.local file of your project.

Once you've done this, go to the deployment page and redeploy the latest change.

After the successful deployment, visit the site and check the network tab to confirm that the API keys are not exposed when you send messages from the prompt.

If no API keys are visible in the request header, that means your sensitive code has been successfully moved to the backend and your latest changes have been deployed.

Congratulations! Now, on to the next part...

But first, here is the video for this section:

Vulnerability Two: DOS and DDOS Attacks

Although our API key is secured in the backend, the app is still vulnerable to denial of service (DOS) and distributed denial of service attacks (DDOS).

A DOS attack is when your site is flooded with excessive requests from a single device that overwhelm your server and prevent your actual users from enjoying the services of your app.

A more advanced one is a distributed denial of service (DDOS) attack which involves sending an overwhelming amount of requests from multiple devices simultaneously to your site.

Different areas of a site can be vulnerable to DOS or DDOS attacks. The attack can target your DNS infrastructure, database, API endpoints, and even your static files.

Without effective mitigation strategies, DoS or DDoS attacks can result in significant financial losses due to skyrocketing cloud service costs and the expenses involved in restoring and securing your site.

To understand how this attack works, let’s try to simulate a simple DOS attack on our AI app.

If you were an attacker, you could execute the script below in your browser’s console to send 50 requests to your api/ai route.

//function to send the request
const getCompletion = async (prompt) => {
  try {
    const response = await fetch('/api/ai', {
      method: 'POST',
      body: JSON.stringify({ prompt }),
      headers: {
        'Content-Type': 'application/json',
      },
   });

   const result = await response.json();
   if (!response.ok) {
      return { role: 'assistant', content: result.content};
   }

   return result;

  } catch (error) {
    return { role: 'assistant', content: 'Something went wrong' };
  }
};

//function for sending the request 50 times
const attackServer = async () => {
  const prompt = ['Write about a lion', 'write about a tiger', 'write about america', 'write about ice cream', 'write about pizza'];

  const numRequests = 50;

  const results = [];

  for (let i = 0; i < numRequests; i++) {
    const startTime = performance.now();
    const result = await getCompletion( prompt[Math.floor(Math.random()*4)] );
    const endTime = performance.now();
    const responseTime = endTime - startTime;

    results.push({
      index: i,
      result,
      responseTime,
    });

    console.log(`Request ${i + 1}: Response time = ${responseTime}ms`);
  }

  return results;

};

// command to activate the attack and display the result
attackServer().then((results) => {
  console.log('All requests completed');
  console.table(results);
});

From the code above, you pasted two async functions (getCompletion and attackServer) in the console.

getCompletion contains the fetch request that’ll be sent to the api/ai route. attackServer contains the code that’ll be used to call the getCompletion function 50 times.

After that, you pasted the last commands that’ll run the attackServer function and display the result containing the information about all the requests sent, including the data received from the server and the response time.

Here is how mine went:

Although this simple attack involved sending 50 requests to the third-party API route, it actually cost me nearly $0.02 in my OpenAI API usage. If the attack involved 50,000 requests, it’d have cost me $20 dollars. If the attack involved 50,000,000 requests, it’d have cost me nearly $20,000.

Different strategies can be implemented in Next.js and Vercel to protect your site against these attacks. They include rate limiting, firewalls, Vercel/Cloudflare DDOS protection, attack challenge mode, spend management, and website monitoring.

Rate limiting

Rate limiting is a method used for blocking repetitive requests from a device that exceeds a number within a timeframe. If the requests exceed a threshold, the user can be temporarily restricted from accessing a service.

There are different rate-limiting algorithms, but we’ll be using a simple one that restricts access to the api/ai endpoint whenever a user sends too many requests.

We’ll be using Vercel KV database and @upstash/ratelimit library to implement this rate limiting algorithm.

@upstash/ratelimit is a powerful rate limiting library designed for use in a serverless environment like Next.js functions. Vercel KV is a Redis database service that we'll use to keep track of the user’s requests.

First, we need to set up Vercel KV. To do that, create a KV database by clicking on the Storage \> Create Vercel KV Database. Once a dialog box shows up, fill in the necessary information. Give the name field any value, select a region, select your environment (either development, preview, or production), and finally click on connect. Then connect to the project.

Next, check your environment variables in the settings tab to confirm that your KV keys and tokens have been added.

Then create a middleware.ts file in the src folder and add this code to it:

import { NextRequest, NextResponse } from 'next/server';

import { Ratelimit } from '@upstash/ratelimit';

import { kv } from '@vercel/kv';

const ratelimit = new Ratelimit({
  redis: kv,
  // 1 requests from the same IP for every 30 seconds
  limiter: Ratelimit.slidingWindow(1, '30 s'),
});

export const config = {
  matcher: '/api/ai'
}

export default async function middleware(request: NextRequest) {
  const ip = request.ip || '127.0.0.1';
  const { success, pending, limit, reset, remaining } = await ratelimit.limit(
    ip
  );
  console.log(success)
  return success
    ? NextResponse.next()
    : NextResponse.json({ role: 'assistant', content: 'too many requests' }, {status: 429});
}

From the code above, you imported NextRequest and NextResponse from next/server, Ratelimit from @upstash/ratelimit, and kv from @Vercel/kv. Next, you set up the Ratelimit function to use KV database and allow only 1 request for every 30 seconds.

Then you created a config variable to ensure that only requests to the api/ai route are rate limited. Finally, you created a middleware function that examines requests to api/ai. If the ip address of the request hasn’t exceeded the rate-limit threshold, it’ll be forwarded to the api/ai. If it has exceeded the threshold, an error message will be returned to the user.

To confirm that the rate-limiting algorithm has been successfully implemented, you'll need to update the GitHub repo and test the latest Vercel deployment.

You can’t test the algorithm in the local server because request.ip is only available on Vercel.

As usual, follow the commands below to push the local changes to GitHub:

git add .

git commit –m "rate limiting algorithm done"

git push –u origin main

After the update is successful, visit your project deployment page on Vercel to confirm that the GitHub changes have been successfully deployed.

Now visit the link of the deployed site and paste the script below to confirm that your rate-limiting algorithm has been successfully implemented.

//function to send the request
const getCompletion = async (prompt) => {
  try {
    const response = await fetch('/api/ai', {
      method: 'POST',
      body: JSON.stringify({ prompt }),
      headers: {
        'Content-Type': 'application/json',
      },
    });

    if (!response.ok) {
      return { role: 'assistant', content: 'Internal server error' };
    }

    const result = await response.json();
    return result;

  } catch (error) {
    return { role: 'assistant', content: 'Something went wrong' };
  }
};

//function for sending the request 50 times
const attackServer = async () => {
  const prompt = ['Write about a lion', 'How are you', 'write about america', 'write about ice cream', 'what is your name'];

  const numRequests = 50;

  const results = [];

  for (let i = 0; i < numRequests; i++) {
    const startTime = performance.now();
    const result = await getCompletion( prompt[Math.floor(Math.random()*4)] );
    const endTime = performance.now();
    const responseTime = endTime - startTime;

    results.push({
      index: i,
      result,
      responseTime,
    });

    console.log(`Request ${i + 1}: Response time = ${responseTime}ms`);
  }

  return results;
};

// command to activate the attack and display the result
attackServer().then((results) => {
  console.log('All requests completed');
  console.table(results);
});

Here is how mine went:

From the video above, you can see that most of the responses were error messages. This means the rate-limiting algorithm is working. If any user tries to send more than 1 request every 30 seconds, they’ll get an error message.

Here’s the video for this section:

Vercel and Cloudflare DDOS protection

In addition to rate limiting, you can use the Vercel automatic DDOS mitigation. According to the Vercel website, there aren’t any charges for the DDOS protection. So all you can do is trust their service.

Also, if you have (or want to purchase) a domain name, you can use Cloudflare and get free, unlimited DDOS protection and security for your app. You can check the Cloudflare site for more information.

Vercel security features

In addition to the above measures, you can also use a combination of spend management, attack challenge mode, Vercel WAF rules, and website monitoring to enhance the security of your app.

First, you set up spend management to notify you when your bills reach certain thresholds and pause your projects when they reach an amount. Once you know how much you’ll be spending, you can set the amount in your spend management setting.

Another Vercel security feature is the attack challenge mode. You can use attack challenge mode to make your users pass some verification checks before they can continue using your site. These should be done temporarily when you receive a notification about your bills or notice unusual traffic on your site.

There are also the custom WAF rules. There are different rules in the settings that you can use. You can set rules that restrict access to specific endpoints and request methods. You can also restrict users with a specific request header, ip address, protocol, continent, and country.

It’s always important to monitor your site traffic and your resource usage. If you notice any spike directed at a specific route without the proper usage flow, you can set up attack challenge mode and custom WAF rules to reduce the possibility of an attack.

In summary, to protect your AI app from a DOS/DDOS attack, you can set up rate limiting, spend management, custom firewalls, attack challenge mode, and website monitoring.

I think it’s safe to say this vulnerability has been fixed.

Vulnerability 3: No Authentication and Authorization

Although you've implemented some measures that protect your site from different forms of attack, another vulnerability can undermine the work you've done so far.

Do you know what it is?

It’s the lack of authentication and authorization mechanisms.

For an app that connects to an external API, the absence of authentication and authorization mechanisms can make your website extremely vulnerable to attacks like DDOS and CSRF. This is because anyone can visit the website and use it without going through any security checks.

Your rate limiting and DDOS security can’t do much if the requests look legitimate and are coming from thousands (or millions) of users. And if all the requests are responded to, it can cost you a lot of money.

Just as I’m able to send prompts to the endpoint, millions of potential users can also do so.

And that is why you need to implement authentication and authorization.

Authentication is when users are verified before they can access a site. Authorization checks if a user is authorized to access or use a feature.

For this job, you’ll be using the next-auth library. Next-auth is a library that allows you to implement different forms of authentication in your Next.js site.

You’ll be using this library to set up GitHub OAuth authentication. This way only those who are authenticated via GitHub will be allowed to send requests to your api/ai route.

First, you must get your Client ID and Client Secret from your GitHub dashboard. Without this, your site won’t be able to use GitHub authentication.

To get this, you must create a GitHub OAuth app (Settings > Developer settings), and then generate and copy the client id and secret to your .env.local file.

You can check the video below to learn how to do this:

In your .env.local file, the keys should be GITHUB_CLIENT_SECRET and GITHUB_SECRET_ID.

GITHUB_CLIENT_ID=Ov23liRYdIehpA61t3Js
GITHUB_SECRET_ID=547vfbsjgfsk4859030

Next, you also need a create a secret key that’ll be used by next-auth to encrypt your JWT tokens. The value must not be easily guessable. You can use the openssl (if you have it installed in your PC) command in your command line so that you can get a complex value that can’t be guessed.

openssl rand –base64 32

Once that's done, you should copy the value and paste it in your .env.local file

If you don’t have openssl, you can create a complex random value and use it instead.

NEXTAUTH_SECRET=OtPuemlSrP8At2uZFIMrc47WBT14pifeKhziIW8

Next, you need to specify the base path for the authentication. It’s generally the homepage URL of the site. This means the authentication and authorization will encompass all your routes. Since you’ll be testing the site in the local environment, you’ll use http://localhost:3000/.

This means that you must have another key (NEXTAUTH_URL) in your .env.local file.

NEXTAUTH_URL=http://localhost:3000/

Once that's done, you need to create a helper function that’ll store the configurations for next-auth.

Within the app folder, create a helper folder and add an authOption.ts file to it.

Next, add this code to the app/helper/authOptions.ts file:

import { NextAuthOptions } from "next-auth";

import GithubProvider from "next-auth/providers/github";

export const authOptions: NextAuthOptions = {
  // Configure one or more authentication providers
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_CLIENT_ID as string,
      clientSecret: process.env.GITHUB_SECRET as string,
    })
  ],
  secret: process.env.NEXTAUTH_SECRET as string,
  session: {
    strategy: 'jwt',
    maxAge: 60 * 2 //expires 2 minutes after the last request
  },
};

From the code above, you created the configuration that’ll be used by next-auth. The configuration specifies that the app will be using the GitHub provider for authentication. The secret was also added to the configuration. And finally, you’ll be using a JWT token configured to expire 2 minutes after the last request.

Next, create an api/auth/[…nextauth]/route.ts file in your app folder.

The folder structure should look like this:

Next, add the code below to the file:

import NextAuth from "next-auth";

import {authOptions} from "@/app/helper/authOption";

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

From the code above, you imported NextAuth and the authOptions function (from app/helper/authOption). Next, you used this authOption to initialize next-auth. Finally, you exported the handler so that you can use it on the server side.

Next, create a client component that makes the session accessible on the client side. The component will be used to wrap the content of the root layout file (app/layout.tsx).

Within your helper folder, create a provider.tsx file and add this code to it:

"use client";

import {SessionProvider} from "next-auth/react";

export function Provider({children}: {children: React.ReactNode}) {
  return <SessionProvider>{children}</SessionProvider>;
}

Next, in your root layout (app/layout.tsx), import the session provider and wrap it around the children prop of the RootLayout component:

//layout.tsx

import {Provider} from "@/app/helper/provider";

//…other code

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Provider>{children}</Provider>
      </body>
    </html>
);
}

Once the session provider has been wrapped around the project, it means you can use the session on the client side to enforce authentication and authorization.

In your app/page.tsx file, you need to import the signIn, signOut, and useSession function from next-auth/react. This will allow the users to be able to sign in, sign out, and view their profile information.

import {signIn, signOut, useSession} from 'next-auth/react';

Next, within the Home component, add this code to it:

const {data: session, status} = useSession();
console.log("status", status);
console.log("session", session);

The code above gets the session and status (authenticated or unauthenticated) of the user from the useSession hook. Then the status and session will be displayed in the browser’s console so that the behavior can be observed. When you’re deploying the changes you can remove the console.log.

Next, replace the code in the header element (from lines 92 to 94) with this:

<header className="flex flex-row fixed w-[100%] top-0 left-0 p-[10px] px-[20px] text-white text-center bg-[#242424]">
    <a className='text-[15px]'>WriterAI</a>
    <div className="ml-auto flex flex-row gap-[10px]">
        { session
            ? <a>{session.user.name}</a>
            : <a onClick={() => { signIn('github') }} className="cursor-pointer">Sign in</a>
          }
          { session && <a onClick={() => { signOut() }} className="cursor-pointer">Sign out</a>}
    </div>
</header>

From the code above, when the user clicks on the sign-in link, they will be redirected to GitHub to authorize the information transfer. And when the sign-out link gets clicked, the session will be destroyed.

Also, if the page is loaded while the session is still active, the user information and a sign-out link will be displayed. But if there is no session, only a sign-in link will be displayed.

Also, replace the code in the form container (lines 129 to 135) so the form is hidden from unauthenticated users and only those who are authenticated can send prompts to the server.

<div className='fixed w-[100%] p-[10px] bottom-0 bg-[#242424]'>
     {/*when the form is submitted, activate a submit event that sends the value of the input and the event to the handleChat function */}
     {session  
       ? <form action='' onSubmit={(e) => handleChat(input, e)}>
           <input className=" lg:w-[50%] w-[70%] ml-[5%] lg:ml-[20%] p-[10px] outline-none bg-[#4d4d4dff] text-[15px] text-[#f2f2f2ff]" type='text' value={input} placeholder='Ask your questions' onChange={ (e) => setInput(e.target.value)}/>
           <button className='py-[10px] px-[20px] bg-black text-[15px] text-[#f2f2f2ff]'>Ask</button>
         </form>
       : <a className="block text-white text-[20px] text-center cursor-pointer" onClick={() => { signIn('github') }}>Sign in to send messages</a>
     }
</div>

Now if you save the changes and reload your site, this should be how your site looks:

When you click on the sign-in link, you’ll be redirected to GitHub for authorization and redirected back to the site after that. Once the authorization is successful, the user information will be visible in the site.

Here is mine:

If you check the browser’s console, you’ll see the information of the session including the name, email, and expiration time/date. Remember that we configured the session to expire 2 minutes after the last request sent to the server. If you don’t send any request to the server within 2 minutes, the session will be destroyed and you’ll be asked to sign in again.

Remember that this is the setting I added in my helper/authOption.ts file. You can configure the session to be active for days, weeks, or months.

There’s no need to worry when you send a prompt and get error messages. This is because you have some environment variables in Vercel that haven’t been added to the .env.local file. When you finally update the changes, you’ll be able to send your prompts to the deployed site as usual.

When you also click on the sign-out link, the session will be destroyed, the app will be reloaded, and the form will be hidden.

If it works as I just explained, that means everything went well.

Also, you need to add authorization in the api/ai route so that unauthorized users won’t be able to send requests directly to the endpoint.

In your api/ai/route.ts file, you need to import getServerSession and authOptions.

import {authOptions} from "@/app/helper/authOption";

import { getServerSession} from "next-auth";

Next, within the POST function, add this code to it:

let session = await getServerSession(authOptions);

if (!session) {
  return NextResponse.json({content: 'Unauthorized access. Authentication required'}, {status: 401})
}

The code above also prevents unauthorized users from getting responses from the api/ai route by sending a 401 status code and an error message.

Once that's done, it’s time to push the changes to the GitHub repo.

But before that, you need to copy the environment variables (GITHUB_CLIENT_ID, GITHUB_SECRET, NEXTAUTH_SECRET, NEXTAUTH_URL) in your .env.local file and paste into the environment variables section of your project settings page on Vercel.

After that, run the code below to push the changes to GitHub:

git add .

git commit –m "added GitHub authentication and authorization"

git push –u origin main

After the update is successful, visit your project deployment page on Vercel to confirm that the GitHub changes have been successfully deployed.

But unfortunately, an error we didn’t notice will make the deployment fail.

This is the error message:

Since I also didn’t know what went wrong, I asked ChatGPT for help. And I was able to find the issue.

The deployment failed because we didn't ensure that session.user was defined before accessing it

So in your page.tsx file, make sure you fix the code as shown below:

{ session && session.user
    ? <a>{session.user.name}</a>
    : <a onClick={() => { signIn('github') }} className="cursor-pointer">Sign in</a>
}

After that, push the changes to GitHub and wait for the project to be successfully deployed to Vercel.

Now you can visit the deployed link to start testing the authentication.

But when you click on the sign-in link, the page doesn’t load. This is because you haven’t changed the URL in your environment variable and GitHub from http://localhost:3000 to the domain of your deployed project.

So you need to check your Project deployment information on Vercel and copy the domain name.

Next, go to your environment variables setting and update the NEXTAUTH_URL to the project’s domain name. Mine is https://nextjs-ai-pro.vercel.app.

Next, go to the OAuth app you created, replace the domain name in the homepage URL and callback URL from http://localhost:3000/ to the Vercel domain name.

Remember that if you have your domain name (for example, domain.com), it’ll be used instead of the Vercel domain name.

If you reload the site and click on the sign-in link, you’ll be redirected to GitHub and your session will be created. When you sign out, the session will also be destroyed.

When you also try executing the script below in your browser’s console, you’ll get an error message because you haven’t signed in.

//function to send the request
const getCompletion = async (prompt) => {

  try {
    const response = await fetch('/api/ai', {
      method: 'POST',
      body: JSON.stringify({ prompt }),
      headers: {
        'Content-Type': 'application/json',
      },
  });

  const result = await response.json();

  if (!response.ok) {
    return { role: 'assistant', content: result.content };
  }

  return result;

  } catch (error) {
    return { role: 'assistant', content: 'Something went wrong' };
  }
};

getCompletion().then( (result) => {
    console.log(result)
})

This means that unauthorized users won’t be able to run any script in your developer tools to get an AI response.

You can also test the site and send some prompts.

If it all works as explained, that means that authentication and authorization have been successfully implemented. Congratulations!

You can watch the video for this section below:

Optimizing the Code

Now most of the work is done. But you can do some other things to further optimize your code. This completely depends on how you want it to be.

For example, you can refactor the code, improve the styling, increase the function timeout for longer prompts, optimize the logs, handle errors in the middleware, set up unit and integration testing, set up a CI/CD pipeline, update your project metadata (title, description, logo), create a preview environment for your deployments, redirect unsuccessful sign-ins to a landing page, and add many more features to your app.

Conclusion

In this tutorial, we’ve explored a lot of things. You learned how to integrate your Next.js app with third-party APIs. You also learned how to secure your app from the most common cyberattacks by implementing strategies like rate limiting, setting up firewalls, and implementing authentication and authorization on your AI app deployed on Vercel.

By applying the same logic in your Next.js AI app, I’m confident that you’ll be able to deploy your app safely without the fear of waking up to an astronomical bill or server crashes.

To be on the safe side, make sure you monitor your Vercel deployment daily. You can also hire a professional software engineer to verify the security of your app if you don't feel confident in your skills in this area.

In this tutorial, you'll learn how you can create your online image-to-pdf converter with HTML, CSS, JavaScript, and NodeJS.

Table of Contents

• Prerequisites
• Project setup
• Steps to Follow
• How to Create the Root URL Route
• How to Upload Images to the Server
• How to Sort the Images and Convert them to PDF
• Starting over
• Conclusion

Prerequisites

Before starting this project, you should have or know the following languages/libraries/frameworks:

• HTML, CSS, and JavaScript: You must have a basic knowledge of using HTML, CSS, and JavaScript to follow along with this tutorial. You should know how to create these files and link them together. You should know about fundamental HTML elements, core CSS selectors, JavaScript concepts, and the DOM.

• NodeJS and npm: You need to have npm and Node.js installed because we'll use them for installing the necessary packages for your project. Specifically, you must have a basic knowledge of how to import and use Nodejs built-in modules.

• Nodemon: Nodemon is an important Node package that’ll help you develop your project faster. It helps in restarting your server when you make changes to the project.

• Express.js and express-generator: Express.js is the Node framework you’ll use to build the web server. Express-generator is a library that'll help you create the necessary files and folders for Express.js to run efficiently. You should know how to create a basic Express application.

• Express-session: This is an Express middleware library that'll help you manage the application sessions. You should know about the configurations of this library.

• Jade/Pug: This is a JavaScript templating engine that'll help you render the address of the uploaded images in an HTML file. You should know the basics of this library.

• PDFkit: This is a JavaScript library that we'll use to convert the images to PDF.

• Multer: This is a Node library that'll handle the file uploads.

• Sortablejs: This is a JavaScript drag-and-drop library that we'll use in the frontend for rearranging our images before they are converted to PDF.

Finally, you must know how to create folders and files (with their appropriate extensions). You should know how to edit these files with a text editor.

Project Setup

First, you need to create a folder and navigate to it with the CLI:

mkdir img2pdf
cd img2pdf

Next, initialize it as a npm package so that you’ll be able to install all the necessary libraries you need.

npm init –y

If everything goes well, there'll be a package.json file in your folder.

The package.json should look like this:

{
  "name": "img2pdf",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Next, we'll install express-generator like this:

npx express-generator
npm install

We'll choose jade as the default templating engine.

The command above will set up all the necessary folders and libraries needed for Express.js to run efficiently.

At the end of the installation, your project folder will look like this:

/img2pdf
  /bin
    www
  /node_modules
    /public
      /images
      /javascripts
      /stylesheets
  /routes
  /views
  app.js
  package.json
  package-lock.json

• bin/www is the entry point of your application.
• node_modules folder stores the packages needed for our project.
• public folder will store the static files that'll be returned and stored by the server.
• routes folder stores all the routes for the application.
• views folder stores the Jade files that'll be used for server-side rendering.
• app.js is the root JavaScript file.

When you check your package.json file, you'll see that Express.js, Jade, and some other libraries have been installed.

Next, we'll install the Nodemon package globally.

npm install -g nodemon

Finally, we'll install PDFkit, Multer, Sortablejs, and Express-session.

npm i multer pdfkit sortablejs express-session

Next, add a devstart script in your package.json. It'll allow Nodemon to restart your application when you make any changes to your JavaScript files.

"devstart": "nodemon ./bin/www"

At the end of your installation, your package.json file should look like this:

{
  "name": "img2pdf",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "express-session": "^1.17.3",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1",
    "multer": "^1.4.5-lts.1",
    "pdfkit": "^0.31.0",
    "sortablejs": "^1.15.0"
  }
}

Next, you'll navigate to the project folder and start the application server.

cd img2pdf
set DEBUG=img2pdf:* & npm run devstart

Once you get a success message, it means the server is already running.

Open your web browser and type http://localhost:3000/ in the search bar.

If everything goes well, this should be your result:

Steps to Follow

Before writing the code, let's go through an overview of the steps that we'll follow to build this project:

1. First you'll define a route that returns the index HTML file when the root URL / is reached.

2. Within your index HTML file, you'll create a form that accepts only image files (png, jpg) and then send it to the server at a defined route.

3. When the server receives the images with Multer, it'll store them in a folder, store the address in a session store, and redirect the request to the root URL route which will render a Jade file containing the address of the uploaded images.

4. Within the Jade file, you'll activate Sortablejs so that the user can rearrange the images before converting to PDF. There'll also be a 'convert to PDF' button which will send the address of the sorted image to the server /pdf route.

5. When the /pdf route receives the images, you'll use PDFkit to convert the images to PDF. Then you'll send the address of the converted PDF.

6. When the user clicks on the PDF link, the file will be downloaded to the user's device.

How to Create the Root URL Route

First, we'll be creating a route that sends an index.html file when the root URL (/) is reached.

Here is the simple flowchart of this operation:

First, open your routes/index.js file and create a route that returns an HTML file.

Replace all the code in the routes/index.js file with this:

var express = require('express');
var router = express.Router();

var path = require('path');

//create a '/' GET route that'll return the index.html file stored in the public/html folder
router.get('/', function(req, res, next) {
  res.sendFile(path.join(__dirname, '..','/public/html/index.html'));
}); 

module.exports = router;

From the code above, we included the express library and activated the express.Router() function. The path module was also included because it'll be used for describing the file paths.

Then we defined a route method that'll handle all the GET requests directed at the root URL /. Anytime the route method receives a request it'll use the res.sendFile() method to send an index.html file back to the user.

The __dirname variable and path.join() method used within res.sendFile(...) method helps us precisely specify the address of the index.html file.

Next, create an html folder within the public folder and add an index.html page to it.

This is how your public folder should look like:

/public
  /html
  /images
  /javascripts
  /stylesheets

Next, create an index.html file in your public/html folder and add this code to it:

<DOCTYPE HTML> 
<html>
  <head>
    <title>IMG-to-PDF Converter</title>
    <meta charset="UTF-8">
    <meta name="author" content="YOUR NAME">
    <meta name="description" content="Easily convert any set of images to PDFs">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Image to PDF converter</h1>
  </body>
</html>

If your server is still running, go to https://localhost:3000/ in your web browser.

This should be the result:

If you haven't started your server, navigate to your project's directory (cd img2pdf) and run this command:

set DEBUG=img2pdf:* & npm run devstart

How to Upload Images to the Server

In this section, I'll be explaining how to upload images to the server.

Here is the simple flowchart for this operation:

Here's what's going on:

• User sends images to server
• Server receives images, renames them, and stores in folder
• Server extracts the image filenames, stores them in a session, redirects request to root URL
• Root URL route receives the request and renders a Jade/pug file containing the image filenames
• End

While your server is still running, replace the content in your public/html/index.html file with this:

<DOCTYPE HTML> 
<html>
  <head>
    <title>IMG-to-PDF Converter</title>
    <meta charset="UTF-8">
    <meta name="author" content="Gideon Akinsanmi">
    <meta name="description" content="Easily convert any set of images to PDFs">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/stylesheets/index.css' />
  </head>
  <body>
    <main>
      <header>
        <h1><a href='/'>IMG2PDF</a></h1>
      </header>
      <article>
        <p class='title'>Easily convert your PNG and JPG images </p>
        <form method='post' action='/upload' enctype='multipart/form-data'>
          <input id='file-upload' type='file' name='images' accept='.png, .jpg' multiple/>
          <p><label for='file-upload'>Select files</label></p>
          <p id='selected-files'><code> </code> </p>
          <p><input type='submit' value='upload' /></p>
        </form>
      </article>
      <footer>
        <p><code>copyright &copy; IMG2PDF 2023</code></p>
      </footer>
      <script>
        let fileUpload = document.getElementById('file-upload');
        let selectedFiles = document.querySelector('#selected-files code');
        let submitButton = document.querySelector('input[type=submit]');

        let filenames = ''
        fileUpload.onchange = function (){
            filenames = ''
            for(let file of this.files){
                filenames += file.name
                filenames += ','
            }
            selectedFiles.parentElement.style.display = 'block'
            selectedFiles.textContent = filenames
            submitButton.style.display = 'inline-block';
        }
      </script>
    </main>
  </body>
</html>

In the code above, we linked some CSS files (styles.css and index.css) to the document. We also created a form element that sends a POST request to the /upload route. The form element has an enctype of multipart/form-data (without it, our server can't receive the images).

Within the form element, there's an input element that'll help us get the files from the device. The input has a name attribute with the value of images (which will be used by multer to identify the images). It has been configured to accept multiple image files (with .png or .jpg extensions).

There's also an input element that acts as the submit button. It'll be used to trigger the file upload request.

Then there's the script element that contains some JavaScript code that adds interactivity to the HTML document.

Create a style.css file in your public/stylesheets folder and add this CSS code to it:

* {margin: 0;padding: 0;box-sizing: border-box;font-family:Poppins;transition: all 0.5s ease;}
main {display: flex;flex-direction:column;height:100vh;}

h1 a {color: #ff6600;text-decoration:none;}
h1 {background-color: white;font-size:25pt;padding:5px;text-align: center;}

p {font-size:20pt;text-align: center;margin-bottom: 25px;}

header, footer {border: 2px solid #ececec;}

article {padding:20px;flex-grow: 1;background-color: #fff7f0;}
footer p {margin-bottom: 0;font-size: 16pt;}

@media screen and (max-width: 380px) {
    footer p {font-size: 12pt;}
}

@media screen and (max-width: 300px) {
    h1 {font-size: 17pt;}
}

The CSS code above defines the overall layout of your website.

Next, create an index.css file in your public/stylesheets folder and add this code to it:

p.title {font-size:30pt;}
p#selected-files {display:none;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;}

label {display: inline-block;font-size:25pt;cursor:pointer;padding: 5px 45px;border-radius:25px;color:white;background-color: #ff9955;}
label:hover {background-color: #ff6600;}

input[type=file] {display: none;}
input[type=submit] {display: none;font-size:16pt;cursor:pointer;padding: 5px 25px;border-radius:25px;color:white;background-color:black;}

@media screen and (max-width: 380px) {
    p.title {font-size: 25pt;}
}

@media screen and (max-width: 300px) {
    p.title {font-size: 22pt;}
    label {font-size: 20pt;}
}

@media screen and (max-width: 250px) {
    label {padding: 5px 35px;}
}

The CSS code above defines the specific styling of the index.html elements.

Next, you'll open your routes/index.js file and create an /upload route that'll receive the image files, store them in a folder, store the filenames in the session store, and redirect the request to the root URL.

First, we need to edit the app.js file and activate express-session.

Add this code to your app.js file:

//include the express-session module
var session = require('express-session');

//activate it as an express.js middleware
app.use( session({secret: 'YOUR_SECRET'}) )

This is how your app.js file should look like:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var logger = require('morgan');
var session = require('express-session');

var indexRouter = require('./routes/index');


var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, 'public')));
//activate express-session
app.use( session({secret: 'YOUR_SECRET'}) )

app.use('/', indexRouter);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page if there's any error occurs
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Open your routes/index.js file and create a route that'll receive the image filenames, store them in a session and redirect to the root URL:

/import the multer library
var multer = require('multer');
var path = require('path');

//multer file storage configuration
let storage = multer.diskStorage({
    //store the images in the public/images folder
    destination: function(req, file, cb){
        cb(null, 'public/images')
    },
    //rename the images
    filename: function(req, file, cb){
        cb(null, file.fieldname + '-' + Date.now() + '.' + file.mimetype.split('/')[1] )
    }
})

//configuration for file filter
let fileFilter = (req, file, callback) => {
    let ext = path.extname(file.originalname);
    //if the file extension isn't '.png' or '.jpg' return an error page else return true
    if (ext !== '.png' && ext !== '.jpg'){
        return callback(new Error('Only png and jpg files are accepted'))
    } else {
        return callback(null, true)
    }
}

//initialize Multer with the configurations for storage and file filter
var upload = multer({ storage, fileFilter: fileFilter});

router.post('/upload', upload.array('images'), function (req, res){
    let files = req.files;
    let imgNames = [];

    //extract the filenames 
    for( i of files){
        let index = Object.keys(i).findIndex( function (e){return e === 'filename'})
        imgNames.push( Object.values(i)[index] )
    }
    //store the image filenames in a session
    req.session.imagefiles = imgNames

    //redirect the request to the root URL route
    res.redirect('/')
})

From the code above, we included the Multer library. Then we used the multer.diskStorge() method to describe where the image files will be stored and how they should be renamed.

Also, we created a fileFilter function to ensure that only png and jpg files are stored by the server. If the user sends any file that isn't PNG or JPG, an error page will be displayed with the message "Only png and jpg files are accepted".

Next, we created a route method that listens to POST requests directed at the /upload route.

Within this route method, we included the upload.array('images') method which tells mutler to only store files whose name is images (according to HTML input element <input id='file-upload' type='file' name='images' accept='.png, .jpg' multiple/>).

After that, we extracted the filenames from the req.files property and stored them in the session store. Finally we redirect the request to the root URL route.

In the routes/index.js file, edit the root URL route so that it'll render an index.jade file if the session stores the image filenames.

router.get('/', function(req, res, next) {
    //if there are no image filenames in a session, return the normal HTML page
    if (req.session.imagefiles === undefined){
        res.sendFile(path.join(__dirname, '..','/public/html/index.html'));
    } else {
    //if there are image filenames stored in a session, render them in an index.jade file
        res.render('index', {images: req.session.imagefiles} )
    }
});

From the code above, whenn the route URL route receives any request, it first checks if there is an imagefiles property stored in the session store. If there isn't, it sends the index.html file. But if there is, an index.jade file containing the image filenames will be sent.

Finally, go to the views/index.jade file and edit it so that it'll render the uploaded images in HTML:

doctype html
html
  head
    title IMG-to-PDF Converter
    meta(charset='UTF-8')
  body
    h1 Images
    each image in images
      img(src=`/images/${image}` width='200' height='200')

The code above is written in Jade syntax, when the server renders it, it'll be in form of an HTML document.

Note: make sure to do the indentation of your content in Jade/Pug with either the space key or tab key, not both.

When you run or restart your server (rs with Nodemon), go to http://localhost:3000/ and restart the upload process (from selecting the files to clicking the upload button).

You should see an HTML page containing the images you uploaded.

Here's my result:

How to Sort the Images and Convert them to PDF

In this section, I'll be explaining how you can allow the user to rearrange their images and convert them to a PDF.

Here is the simple flowchart for this operation:

Here's what's going on:

• User clicks on "covert to PDF"
• Browser sends request to server containing the sorted image filenames
• Server receives the request, converts the images to PDF, and sends the address back to the browser
• Browser receives the address and displays it to the user
• User clicks on the link and downloads the PDF
• End

In the views/index.jade file, we'll be using Sortablejs to sort the images.

Replace the content in your index.jade file with this:

doctype html
html
  head
    title IMG-to-PDF Converter
    meta(charset='UTF-8')
    link(rel='stylesheet' href='/stylesheets/style.css')
    link(rel='stylesheet' href='/stylesheets/index-view.css')
    script(type='module' src='/javascripts/sort.js' defer)
  body
    main
      header
        h1
          a(href='/') IMG2PDF
      article
        p 
          a(href='/new') New +
        div
          each image in images
           img(src=`/images/${image}` data-name=image width='200' height='200')
        p
          a(class='convert')
            span(class='text') Convert to PDF →
            span(class='loader')
        p
          a(class='download' download) Download ↓
      footer
        p
          code copyright © IMG2PDF 2023

The code above is a Jade file that'll be rendered as an HTML document. It contains the document metadata (including the link and style elements that connects to CSS and Javscript files), the image elements, the hyperlinks, and some other HTML elements.

Next, create a public/stylesheets/index-view.css file and add this code to it:

p a {font-size:20pt;text-decoration: none;color: white;display: inline-block;padding: 5px 20px;margin-bottom:15px;background-color: #ff6600;cursor: pointer;}

div {margin:auto;margin-bottom: 15px;padding:10px;display: flex;flex-direction:row;flex-wrap:wrap;width:80%;background-color: rgba(255,255,255,0.9);}

div img {width: 200px;height:200px;object-fit: contain;padding: 10px;background-color: #ffe6d5;margin-right:10px;margin-bottom: 10px;cursor:pointer;}

p a.download {background-color: black;display:none;}

span.loader {display:none;border: 5px solid black;border-top: 5px solid white;border-radius:50%;width: 25px;height: 25px;animation: spin 0.5s linear infinite;}


@keyframes spin{
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

@media screen and (max-width: 620px) {    
    div img {width: 45%;height: 150px;}
}

@media screen and (max-width: 415px) {
    p a {font-size: 16pt;}
    div img {height: 120px;}
}

@media screen and (max-width: 330px) {
    p a {font-size: 14pt;}
    div {width: 100%;}
    div img {width:100%;margin-right: 0px;margin-bottom: 5px;}
}

@media screen and (max-width: 260px) {
    p a {font-size: 13pt;padding: 5px 10px;}
}

Next, navigate to the node_modules/sortablejs/modular folder and copy the sortable.core.esm.js file to the public/javascripts folder.

Then create a public/javascripts/sort.js file.

You'll add some code that'll activate Sortablejs and send the sorted filenames to the server for conversion:

import Sortable from '/javascripts/sortable.core.esm.js';

//use sortablejs on the container element for the image tags
let list = document.querySelector('div');
let sort = Sortable.create(list);

let convertButton = document.querySelector('a.convert');

//When the convert button is clicked
convertButton.onclick = function(){
    let images = document.querySelectorAll('img');
    let loader = document.querySelector('span.loader');
    let convertText = document.querySelector('span.text');
    let downloadButton = document.querySelector('a.download');

    let filenames = [];
    //extract the image names into an array
    for(let image of images){
        filenames.push(image.dataset.name)
    }
    //activate loading animation
    loader.style.display = 'inline-block';
    convertText.style.display = 'none'

    //Create a post request that'll send the image filenames to the '/pdf' route and receive the link to the PDF file
    fetch('/pdf', {
        method: 'POST',
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(filenames)
    })
    .then( (resp)=> {
        return resp.text()
    })
    .then( (data) => {
        //stop the loading animation
        loader.style.display = 'none';

        //display the convert and download button
        convertText.style.display = 'inline-block'
        downloadButton.style.display = 'inline-block'

        //attach the address to the download button
        downloadButton.href = data
    })
    .catch( (error) => {
        console.error(error.message)
    })    
}

From the code above, we imported Sortablejs core JavaScript file and activated it on the parent element of the img elements.

When the Convert to PDF button is clicked, we extracted the image filenames from the img elements and sent it as a POST request to the server.

When the browser receives the server response, we attached the link to the download button so that when the user clicks on it, the PDF document will be downloaded on the user's device.

Next, in your routes/index.js file, you'll create a /pdf route that'll receive the sorted filenames and convert them to PDF.

First create a pdf folder in the public folder and add these code to your routes/index.js file:

var path = require('path');
var fs = require('fs');

//import PDFkit
var PDFDocument = require('pdfkit');

router.post('/pdf', function(req, res, next) {
    let body = req.body

    //Create a new pdf
    let doc = new PDFDocument({size: 'A4', autoFirstPage: false}); 
    let pdfName = 'pdf-' + Date.now() + '.pdf';

    //store the pdf in the public/pdf folder
    doc.pipe( fs.createWriteStream( path.join(__dirname, '..',`/public/pdf/${pdfName}` ) ) );

    //create the pdf pages and add the images
    for(let name of body){
        doc.addPage()
        doc.image(path.join(__dirname, '..',`/public/images/${name}`),20, 20, {width: 555.28, align: 'center', valign: 'center'} )
    }
    //end the process
    doc.end();

    //send the address back to the browser
    res.send(`/pdf/${pdfName}`)
})

From the code above, we included pdfkit and created a route method that responds to POST requests directed at the /pdf URL. Within this route method, we used pdfkit to convert all the images to PDF. Finally, we sent the address of the PDF document back to the document.

When you restart the server, navigate to http://localhost:3000/ in your web browser, and restart the file upload process. You'll able to convert your images to PDF.

Here's a YouTube video describing the entire process:

How to Cancel and Restart Image Uploads

In this section, we'll be creating a functionality that allows the user to cancel the existing file upload project and create a new one.

Remember that there's a New + button in our views/index.jade that points to the /new route.

...
article
  p 
    a(href='/new') New +
...

Now we'll be writing the route in our routes/index.js file.

Here is the simple flowchart for this operation:

Here's what's going on:

• User clicks on the 'New +' button
• Browser sends a GET request to the server
• Server deletes the images and clears their filenames from the session store
• Server redirects the request to the root URL
• End

Add this code to your routes/index.js file:

router.get('/new', function(req, res, next) {
    //delete the files stored in the session
    let filenames = req.session.imagefiles;

    let deleteFiles = async (paths) => {
        let deleting = paths.map( (file) => unlink(path.join(__dirname, '..', `/public/images/${file}`) ) )
        await Promise.all(deleting)
    }
    deleteFiles(filenames)

    //remove the data from the session
    req.session.imagefiles = undefined

    //redirect to the root URL
    res.redirect('/')
})

From the code above, when the /new route receives a GET request, it'll delete the images stored in folder and session store. After that, it'll redirect the request to the root URL.

When you navigate to http://localhost:3000/, upload some images, and cancel the existing file upload process, you'll see that the images were deleted from the folder and you were redirected to the homepage.

Conclusion

With the code above, you've been able to create an online Image-to-PDF converter. Congrats!

As you know, software development is a continuous process. So you can try implementing some additional functionalities (such as security, input validation, and so on) to the project.

You can check out my GitHub repo for the complete source code.

If you have any questions for me, you can check my freeCodeCamp profile for my contact details. I'll reply as quick as possible!

Bye for now.

One of the most popular JavaScript utility libraries is Lodash. Lodash is a JS library with over 40 million weekly downloads on npm. It helps provide additional functionalities to preexisting vanilla JS objects. Lodash uses a functional programming approach in implementing common tasks in JavaScript.

Although this library is great, using it in smaller projects might be overkill, especially if you only need 3 or 4 functionalities. With a package size of over 1.4MB comprising over 1000 files and 500 functions, having Lodash on your front-end can hinder the performance of your website.

In this article, I'll be showing you how to implement some of the key functionalities provided by Lodash. At the end of this tutorial, you’ll not only know how to implement the functionality of a popular library but you’ll also see an improvement in your JavaScript skills.

Prerequisites

For this article, all you need is a code editor, a web browser, and a basic knowledge of JavaScript.

Table of Contents

1. Project Setup
2. How to Create Array Methods
   1. The _.chunk() method
   2. The _.compact() method
   3. The _.concat() method
   4. The _.drop() method
   5. The _.dropRight() method
   6. The _.fill() method
   7. The _.flatten() method
   8. The _.intersection() method
   9. The _.remove() method
   10. The _.union() method
3. How to Create Collection Methods
   1. The _.filter() method
   2. The _.find() method
   3. The _.partition() method
   4. The _.shuffle() method
4. How to Create Math Methods
   1. The _.mean() method
   2. The _.max() method
   3. The _.min() method
   4. The _.sum() method
5. How to Create Object Methods
   1. The _.keys() method
   2. The _.values() method
6. How to Create String Methods
   1. The _.repeat() method
   2. The _.split() method
7. Conclusion

Project Setup

The first thing to do is to create a folder called lodash-project that contains an HTML file and a JavaScript file.

The JavaScript file will contain the code, while our HTML file will be used to link the files together.

You can give them any valid name you like but I’ll be sticking with index.html and index.js.

Within the HTML file, you’ll add the script element to link with your index.js file.

Here’s the code for index.html:

<!DOCTYPE HTML>
<html>
      <head>
             <title>Lodash project</title>
      </head>
      <body>
             <script src='index.js'></script>
      </body>
</html>

Within the JavaScript file (index.js), we'll be using a JavaScript class (_) and static methods (whose name will be the Lodash methods we'll be implementing) for structuring our code.

Here's the format it should be in:

class _ {
    static name_of_method(){
        //code
    }
}

From this point onward, I’ll be showing you how to implement 10 Lodash array methods, four collection methods, four math methods, two object methods, and two string methods. Are you ready? Let’s go!

How to Create Array Methods

The _.chunk() method

First, we'll see how to implement the _.chunk() method. In Lodash, the chunk method helps you divide the content of your array into groups.

This method is useful when you want to display a long list of items in a paginated user interface.

By applying the chunk() method, you can divide the array into smaller arrays, each containing a fixed number of items. This allows you to efficiently manage the display of items page by page, enhancing the user experience and minimizing load time.

It can also be used for dealing with data that needs to be processed in parallel or batched operations.

According to the Lodash documentation, this is how it works:

//divides the array into a group of 2
_.chunk(['a', 'b', 'c', 'd'], 2);
//returns [ ['a', 'b'], ['c', 'd'] ]

//divides the array into a group of 3 and shifts the rest into another
_.chunk(['a', 'b', 'c', 'd'], 3);
//returns [ ['a', 'b', 'c'], ['d'] ]

Here's how to implement it yourself:

class {
     //... other methods

      static chunk(array, size=1){
             let newArray = [];  
             for(let i = 0; i < array.length; i += size){ 
                    let chunk = array.slice(i, i + size);
                    newArray.push(chunk) 
             } 
             return newArray;                        
      }
}

In the code above, the first step is creating a static chunk() method with an array and size parameter. The size parameter gets a default value of 1.

Next, we create an empty array (newArray) that’ll store the split chunks. Then we’ll use loops and the array.slice() method to slice out chunks from the original array and push it to the new array (newArray).

The _.compact() method

Now let's look at the _.compact() method. In Lodash, the compact() method returns an array with all falsy elements removed. Examples of falsy values are undefined, null, '', false, 0, and so on.

This method is useful when you want to clean up an array and focus on meaningful and non-empty values.

You can also use it for cleaning arrays that have incomplete data or irrelevant information.

According to the Lodash documentation, this is how it works:

let surveyReport = ['yes', 'no', 'not sure', null, 'no', ''];

//removes the falsy elements
_.compact(surveyReport);
//returns ['yes', 'no', 'not sure', 'no']

Here’s how you to implement it yourself:

class _ {
      //... other codes
      static compact(array){
             let newArray = array.filter( val => {return Boolean(val) === true})
             return newArray;
      }
}

From the code above, we created a static compact() method with an array parameter. Then we used the array.filter() method and the Boolean() function to filter out values that are truthy, not falsy.

The _.concat() method

In Lodash, the concat() method is used for concatenating two or more arrays or values. This is particularly useful when you're dealing with data from different sources and want to present them in a comprehensive view.

Imagine a scenario where you have multiple arrays containing related information, such as customer names, addresses, and order details. The concat() method allows you to effortlessly combine these arrays, creating a unified dataset that can be easily processed or displayed.

According to the Lodash documentation, this is how it works:

let array = [1, 2];
let other = _.concat(array, 4, [1], [ [12, true] ] );

console.log(other)
//returns [ 1, 2, 4, 1, [12, true] ]

Here’s how to implement it yourself:

class _ {
      //...other methods

      static concat(array, ...values){

             for(let i = 0; i < values.length; i++){
                    array = array.concat( values[i] ) 
             } 
             return array;
      }
}

In the code above, I created a static concat() method with an array and values parameter. The parameter will be treated as an array representing the separate arrays/values we’ll be concatenating.

Next, we used the for loop and the array.concat() method to concatenate every element in the values parameter to our array parameter.

The _.drop() method

The drop() method returns an array with some of its elements dropped from the beginning.

The drop() method plays a crucial role in implementing stack-like behavior with arrays. You can use this method to ensure that only the most recent tasks are prioritized.

According to the Lodash documentation, this is how it works:

//drops the first element and returns the rest
_.drop([1,2,3])
//=> [2,3]

//drops the first 2 elements and returns the rest
_.drop([1,2,3,4], 2)
//=> [3,4]

//drops the first 3 elements and returns the rest
_.drop([2,4,6], 3)
//=> []

Here's how to implement it yourself:

class _ {
    //other methods

    static drop(array, n=1){
           return array.slice(n, array.length) 
     }
}

In the code above, we created a static drop() method with an array and n parameter. array represents the array whose elements will be dropped while n represents the number of elements to be dropped from the beginning.

Then we used an array.slice() method to return an array starting from position n to the last element.

The _.dropRight() method

The dropRight() method returns an array with some of its elements dropped from the end.

The drop() method plays a crucial role in implementing queue-like behavior with arrays. You can use this method to ensure that only the oldest tasks are prioritized.

According to Lodash, this is how it works:

//drops the last element and returns the rest
_.dropRight([1,2,3,4]) 

//drops the last 2 elements and returns the rest
_.dropRight([1,2,3,4], 2)
//[2, 3]

Here’s how to implement it yourself:

class _ {
    //other methods ...

     static dropRight(array, n=1){
           return array.slice(0, -n)
     }
}

From the code above, we created a static dropRight() method with an array and n parameter. array represents the array whose elements will be dropped while n represents the number of elements to be dropped from the end.

Next, we use the array.slice() method to return an array starting from position 0 to (but not including) –n.

The _.fill() method

The fill() method fills an array with a specific value.

Imagine you have an array representing a game board where certain cells need to be marked as occupied. By using the fill() method, you can efficiently replace a range of cells with a marker value, indicating their status.

According to Lodash, this is how it works:

let board = Array(9);

//replaces or fills all the elements in the array with '0'
_.fill(array, 0);
console.log(array)
//returns [0, 0, 0, 0, 0, 0, 0, 0, 0];

let array = [1,3,5,7];
//replaces or fills the array with 'hello' from index 0 to(but not including) index 3
_.fill(array, 'hello', 0, 3)

console.log(array)
//returns ['hello', 'hello', 'hello', 7];

Here's how to implement it yourself:

class _ {
    //other methods ...

     static fill(array, value, start=0, end=array.length){ 
           for(let i = start; i < end; i++){ 
                 array[i] = value 
           } 
           return array;    
     }
}

In the code above, we created a static fill() method with an array, value, start, and end parameter.

array represents the array whose element will be filled. value is the value that’ll fill/replace the elements in the array. start is the position to start filling from. It has a default value of 0. end represents the position that the filling will end at. Its default value is array.length.

Within the method, we created a loop that changes the value of each element to value.

The _.flatten() method

The flatten() method flattens an array one level deep.

Imagine you have an array containing sub-arrays representing different categories of items. By applying the flatten() method, you can seamlessly merge these sub-arrays into a single array, simplifying the process of iterating, searching, or performing operations on the combined dataset.

According to the Lodash documentation, this is how it works:

_.flatten([['James'], [17], ['Male']]);
//-> ['James', 17, 'Male']

Here’s how to implement it:

class _ {
    //... other methods

     static flatten(array){
           return [].concat(...array);
     }
}

In the code above, we created a static flatten() method with an array argument. Then we used the spread operator and array.concat() to concatenate an empty array with the expanded iterable.

The _.intersection() method

The intersection() method returns an array that contains values that are present in all given arrays.

Imagine you have multiple arrays containing user preferences for different features of your application. By using the intersection() method, you can easily determine which preferences are common across all users, helping you identify the most popular or preferred features.

According to the Lodash documentation, this is how it works:

let preference1 = ['Post', 'View', 'Comment'];
let preference2 = ['Like', 'Comment', 'Share'];

_.intersection(preference1, preference2)
returns ['Comment']

Here’s how to implement it yourself:

class _ {
     //...other methods

     static intersection(...arrays){ 
           if (arrays.length === 0){
                 return []
           }
           let intersection = arrays.reduce((prev, current) => {
                 return prev.filter((element) => current.includes(element) );
           })

           return [...new Set(intersection)]; //remove duplicates
     }
}

From the code above, we created a static intersection() method with an arrays parameter that has a spread operator. Within the function, we'll return an empty array if the method is called without any parameter.

Next, we use the reduce() method to recursively iterate over the arrays and filter the common elements at each step, until it finds the intersection of all arrays.

Then we return the final result as an array after removing the duplicates with a Set constructor function.

The _.remove() function

The remove() function removes some elements that satisfy a condition and returns the result. It also permanently removes those elements from the original array.

For example, if you have an array of numbers and you want to remove all occurrences of a certain value, you can use remove() to achieve this efficiently.

According to the Lodash documentation, here’s how it works:

let array = [1,2,3,4,5,6,7];

let odd = _.remove(array, function(){
     return n%2 !== 0
});

console.log(odd)
//[1,2,5,7]

console.log(array)
//returns the remaining => [2,4,6]

Here’s how to implement it yourself:

class _ {
     //... other methods

     static remove(array, predicate){
           let truthy = array.filter(predicate);
           for(let i of truthy){
                 let n = array.indexOf(i)
                 array.splice(n, 1); 
           } 
           return truthy;
     }
}

From the code above, we created a static remove() method that contains two parameters: array and predicate. array refers to the array whose elements will be removed while predicate is a function that'll specify the conditions the elements must pass to be removed.

Next, we use the array.filter() method to filter out elements that pass the conditions. Then we used loops and array.splice() to remove the passed element from the original array. Finally, we return the truthy array.

The _.union() method

The union() method returns an array of unique values from one or more arrays.

Imagine you have several arrays representing different categories of items, and you want to combine them into a single array without repeating any items. By using the union() method, you can easily merge these arrays, ensuring that each value appears only once in the resulting array.

This is valuable when dealing with data from various sources that might contain overlapping information.

According to Lodash, here is how it works:

let basket1 = ['Egg', 'Shoe', 'Milk'];
let basket2 = ['Shoe, 'Milk', 'Honey'];

let allBasket = _.union(basket1, basket2)
console.log(allBasket)
//['Egg', 'Shoe', 'Milk', 'Honey']

Here’s how to implement it yourself:

class _ {
    //other methods ...

    static union(...arrays){
          let total = []
          for(let i of arrays){
                total.push(...i)
          }
          return new Set(total);
    }
}

In the code above, we created a static union() method with an arrays parameter that has a spread operator. We created a variable storing an empty array and used the for-of loop to push elements in the arrays parameter to total.

Next, we insert the total variable into a Set function to remove duplicate and return it.

How to Create Collection Methods

The _.filter() method

In Lodash, the filter() method returns an array of elements that satisfies a condition. Unlike remove(), it doesn’t modify the original array.

Its applications range from data filtering to creating custom subsets.

For example, if you have an array of objects representing users, and you want to retrieve all users who are active. By using the filter() method, you can efficiently create a new array containing only the active users.

Another example is using this method for data transformation scenarios. If you have an array of numeric values and you want to extract only the even numbers, you can easily achieve this by applying the filter() method with a custom filtering function.

According to the Lodash documentation, this is how it works:

let users = [
    {name: 'Zoe', age: 24, active: false},
    {name: 'Aisha', age: 20, active: true},
    {name: 'Alex', age: 19, active: true}
];
filter(users, function(element){ return element.active > true})

//returns => [
    {name: 'Aisha', age: 20, active: true},
    {name: 'Alex', age: 19, active: true}
]

Here’s how to implement it on your own:

class _ {
     //... other methods

     static filter(collection, predicate){
           return collection.filter(predicate);
    }
}

From the code above, we created a static filter() method with an array and predicate parameter. array is the array whose elements will be filtered and predicate is the function that contains the conditions each element must pass to be filtered out.

Then we use the array.filter() method to filter the array and return the result.

The _.find() method

The find() method returns the first element in an array that satisfies a particular condition.

Its applications range from targeted searches to efficient data retrieval.

For example, say you have an array of objects representing products in an online store, and you want to find the first product that is currently on sale. By using the find() method, you can quickly locate the desired product object that matches the sale condition.

The find() method also plays a crucial role in scenarios where you need to search for a specific item within a collection, such as finding a particular user by their username or locating a book by its title.

According to the Lodash documentation, this is how it works:

let products = [
     {name: 'Rice', qty: 20},
     {name: 'Egg', qty: 24},
     {name: 'Milk', qty: 19},
     {name: 'Wheat', qty: 20}
]

//finds the first product whose quantity is greater than 20
_.find(products, function(product){ return product.qty > 20})

//returns {name: 'Egg', qty: 24}

Here's how to implement it yourself:

class _ {
    //... other methods

     static find(collection, predicate, fromIndex=0){
           let ans = collection.slice(fromIndex, collection.length)
           return ans.find(predicate);
     }
}

In the code above, we created a static find() method with 3 parameters: collection, predicate, fromIndex.

collection is the array we’ll be searching from. predicate is a function containing the condition that the element must pass to be returned. fromIndex specifies the index to begin the search from.

First, we used the array.slice() method to slice the array from a start position specified by fromIndex parameter to the end of the collection. Next, we use the array.find() method on the sliced array and return the result.

The _.partition() method

The partition() method creates an array comprised of two elements. The first is an array of elements that satisfies a certain condition while the second is an array of elements that doesn’t satisfy the condition.

Its applications range from data segregation to creating distinct subsets.

Imagine you have an array of numbers, and you want to separate the even numbers from the odd numbers. By using the partition() method, you can easily create two arrays: one containing all the even numbers and another containing all the odd numbers. This makes it convenient to perform separate operations or analyses on each subset.

Also, the partition() method is beneficial when dealing with filtering and categorization scenarios. If you have a collection of objects representing products and you want to categorize them into two groups – those that are on sale and those that are not – the partition() method provides an elegant solution.

According to the Lodash documentation, this is how it works:

 let products = [
     {name: 'Milk', sold: true},
     {name: 'Cream', sold: false},
     {name: 'Bicycle', sold: true},
     {name: 'Socks', sold: false}
 ];

_.partition(products, function(e){ return e.sold === true})
returns [
     [
    {name: 'Milk', sold: true},
    {name: 'Bicycle', sold: true}
],
     [
     {name: 'Cream', sold: false},
     {name: 'Socks', sold: false}
]
]

Here’s how to implement it yourself:

class _ {
    //... other methods

    static partition(collection, predicate){
        let truthy = array.filter(predicate);
        let falsy = collection;

        for(let i of truthy){
            let n = falsy.indexOf(i)
            falsy.splice(n, 1); 
        } 

        return [truthy, falsy];
    }
}

In the code above, we created a static partition() method with a collection and predicate parameter. collection is the array that’ll be used while predicate is the function that contains the conditions the elements must pass to be partitioned to the first element.

First, we created two variables: truthy and falsy. truthy is an array containing the elements that passed the condition while falsy stores the collection.

Next, we used a for-of loop and the splice() method to remove the elements in the falsy array from truthy. And finally, we returned an array containing both truthy and falsy arrays.

The _.shuffle() method

The shuffle() method returns an a shuffled array using the Fisher-Yates shuffle.

Its applications range from enhancing user engagement to introducing randomness into various scenarios

Imagine you have an array of questions for a quiz app, and you want to present the questions in a different order each time a user takes the quiz. By using the shuffle() method, you can easily create a new array with the questions in a randomized order, providing a fresh experience for users in each quiz session.

According to Lodash, this is how it works:

let quizQuestions = [1, 2, 3, 4, 5, 6, 7, 8];

_.shuffle(quizQuestions)
//shuffled version eg [2,3,8,5,1,7,4,6]

Here's how to implement it yourself:

class _ {
    //... other methods

     static shuffle(collection){
           function sh(array=collection, shuffled=[], length=collection.length){
                 if(length === 0){
                      return shuffled;
                 }

                 let rand = Math.floor( Math.random() * ( length - 1) );

                 shuffled.push( array[rand] )

                length -= 1;

                       array.splice(rand, 1);

                 return sh(array, shuffled, length);

           }
           return sh() 

     }
}

In the code above, we created a static shuffle() method with a collection parameter that represents the array to shuffle. Within it is another function sh() that uses recursion to shuffle the array.

How to Create Math Methods

The _.mean() method

In Lodash, the mean() method calculates the average value of the elements in an array.

This method can be used for performing data analysis.

Imagine you have an array of test scores, and you want to find out the average score of the students. By using the mean() method, you can effortlessly calculate the average test score, which gives you a sense of the overall performance of the group.

Furthermore, the mean() method plays a crucial role in data analysis and statistics.

Whether you're working with financial data, scientific measurements, or any other numerical data, calculating the mean helps you understand the typical value and make informed decisions based on the data's central tendency.

According to the Lodash documentation, this is how it works:

let mathScore = [60, 70, 50, 80];

_.mean(mathScore)
returns 65

Here's how to implement it yourself:

class _ {
    //... other methods

     static mean(array){
           let sum = array.reduce( (accumulator, current) => {
                 return accumulator + current
           }, 0);
           return sum/array.length;
    }
}

In the code above, we created a static mean() method with an array parameter that represents the array whose elements we'll use to calculate the mean.

Next, we use the array.reduce() method to find the sum of all the values.

Finally, we divide the result by the length of the array and return it.

The _.max() method

The max() method returns the maximum value in an array.

Its applications range from identifying the highest values to detecting outliers.

The max() method is crucial in scenarios where you need to identify extreme values in a dataset.

Whether you're analyzing temperature readings, stock prices, or any other numeric data, finding the maximum value can help you understand the range and potential outliers within the data.

According to the Lodash docs, here's how it works:

let topStockPrices = [545, 230, 123, 1004, 890,890];

_.max(topStockPrices)
//1004

Here's how to implement it:

class _ {
    //... other methods

     static max(array){
           return Math.max(...array)
     }
}

In the code above, we created a static mean() method with an array parameter that represents the array whose elements will be used to calculate the max value.

Next, we use the spread operator and Math.max() function to calculate the maximum value.

The _.min() method

The _.min() method returns the minimum value in an array.

The min() method is crucial in scenarios where you need to identify the smallest value in a dataset.

Whether you're analyzing prices, durations, or any other numeric data, finding the minimum value can help you understand the range and potential outliers within the data.

According to the Lodash docs, here's how it works:

let productPrice = [200, 150, 500, 230, 99];

_.min(productPrice)
//returns 99

Here's how to implement it:

class _ {
    //...other methods

     static max(array){
           return Math.min(...array)
     }
}

In the code above, we created a static min() method with an array parameter that represents the array whose elements will be used to calculate the min.

Next, we use the spread operator and Math.min() function to calculate the minimum value.

The _.sum() method

The sum() method calculates the sum of all the elements in an array.

This method can be used for calculating aggregate values.

For example, the sum() method is crucial in scenarios where you need to determine the aggregate value of a dataset.

Whether you're working with financial transactions, quantities, or any other numeric data, calculating the sum helps you understand the overall magnitude of the data.

According to the Lodash docs, here’s how it works:

let sales = [20000, 34000, 21000, 15000];

_.sum(sales)
//returns -> 90000

Here’s how to implement it:

class _ {
    //... other methods

     static sum(array){
           let total = array.reduce( (accumulator, current) => {
                 return accumulator + current
           }, 0);
           return total;
     }
}

In the code above, we created a static sum() method with an array parameter. Next, we used the array.reduce() method to add up all the array element's values.

How to Create Object Methods

The _.keys() method

In Lodash, the keys() method returns an array containing the properties of an object.

Imagine you have an object representing a user profile with properties like name, email, and age. By using the keys() method, you can easily extract the property names and work with them.

According to the Lodash docs, here’s how it works:

returns all the properties of th object
_.keys({name: 'john', age: 7})
//['name', 'age']

Here's how to implement it:

Class _{
     static keys(object){
           return Object.keys(object)
    }
}

In the code above, we created a static keys() method with an object parameter that represents the object whose properties would be extracted.

Then we use the Object.keys() method to extract the properties and return the result.

The _.values() method

The values() method returns an array containing the values of an object's properties.

Imagine you have an object representing a user profile with properties like name, email, and age. By using the values() method, you can easily extract the property values and work with them.

According to the Lodash docs, here's how it works:

//returns the object values
_.values({name: 'john', age: 7})
//['john', 7]

Here's how to implement it:

class _{
     static values(){
           return Object.values(object)
    }
}

In the code above, we created a values() method with an object parameter that represents the object whose property values would be extracted. Then we use the Object.values() method to extract the values and returned the result.

How to Create String Methods

The _.repeat() method

In Lodash, the repeat() method returns a string that has been duplicated a specific number of times.

Its applications range from creating patterns to formatting output, making it a handy tool for various string manipulation tasks.

For instance, if you want to create a separator line of hyphens in a console output, you can use the repeat() method to generate the necessary number of hyphens.

According to Lodash, here is how it works:

//repeats the string '-' 10 times

_.repeat('-', 10)
console.log('hello world')
_.repeat('-', 10)

//returns:
//'----------'
//'hello world'
//'----------'

Here's how to implement it:

class _ { 
    //... other methods

     static repeat(string='', n=1){
           let repeated ='';

           for(let i = 0; i < n; i++){
                 repeated += string;
           }
           return repeated;
     }
}

In the code above, we created a static repeat() method with a string and n parameter. string refers to the string that’ll be duplicated while n specifies the number of times it’ll be repeated.

Next, we created a repeated variable that stores an empty string. ANd finally, we used the for loop to concatenate the string n times.

The _.split() method

The split() method splits a string by a separator and stores the parts in an array.

Its applications range from text processing to data extraction.

The split() method can be beneficial in scenarios where you're dealing with data in a specific format.

For example, if you have a list of values in a string separated by plus sign(+), you can use the split() method to extract each value and store them in an array.

According to the Lodash docs, here’s how it works:

//Splits all the characters
_.split('hello', '')
['h', 'e', 'l', 'l', 'o']

//Split using _ as separator 
_.split('h_e_l_l_o', '_')
['h', 'e', 'l', 'l', 'o']

Splits the string using + as a separator and limits the elements to 2
_.split'`how+to+cook+rice', '+', 2)
['how', 'to']

Here's how to implement it:

class _ {
    //... other methods

     static split(string='', separator, limit){
           let spl = string.split(separator);
           let limited = [];

           if (limit === undefined){
                 return spl;
           } else {
                 for(let i=0; i<limit; i++){
                       limited.push(spl[i])
                 }
                 return limited

            }
     }
}

In the code above, we created a split() method with a string, separator, and limit parameter.

string is the string whose characters will be split. separator will be used as the string separator and limit sets a limit for the split characters to be returned.

Next, we used the string.split() method to split string with separator. Then we returned the split string if no limit was specified. If the limit was specified, we used the for loop to push the selected elements to a limited variable and returned its result.

Conclusion

Phew – that was a lot. If you made it this far, let me congratulate you on time well spent.

Throughout the article, you learned how to implement some functionalities of the Lodash library.

Now you can challenge yourself to complete the library by implementing the remaining methods and functions, or add more functionalities to it.

I hope this helps. Unrelated, but if you need a skilled technical writer don’t forget to contact me through Twitter(@GidtheCoder) or email(akinsanmi20700@gmail.com). Bye for now.

The use cases of fullscreen API are numerous because of the increased complexity of today's websites. In this article I'll be giving you a comprehensive guide to using the Fullscreen API.

Prerequisites

You should have basic knowledge of how to use HTML, DOM and JavaScript to create webpages. Specifically, you should know how to use HTML elements, DOM selector methods, event listeners, and JavaScript objects.

Fullscreen API Basics

The Fullscreen API has functionalities that let you display your elements (mostly images, media, and graphic elements) in fullscreen mode. Without it, you'd need to get your hands dirty with some long lines of CSS and JavaScript code.

Have you ever visited a website where the images and videos go fullscreen when you interact with them? What about online games?

Let me explain some 3 real-world projects that use fullscreen mode. Although they might not be using the Fullscreen API under the hood, I'm trying to give you a practical view of the use cases of this functionality and how using the Fullscreen API can simplify the process. They include: the Twitter web app, an online gaming website, and YouTube video embeds.

An example of a project that uses fullscreen mode is the Twitter web app. Whenever you log in to your Twitter account and click on any image that interests you, it goes fullscreen. This functionality could have been implemented with hundreds of lines of code. But with fFullscreen API, you wouldn't need that much code.‌

The same goes for online gaming websites. Whenever you visit a gaming website like crazygames.com and click on any game you feel like playing, the canvas element that stores the game source code goes fullscreen.‌

‌Another example is the YouTube video embeds. If you are trying to embed a YouTube video on your website by using the iframe element with the allow='fullscreen' attribute present, it allows your YouTube video go fullscreen when a user clicks on the fullscreen icon. Check out my codepen link and click on the fullscreen icon to observe the behavior.

Natively, the video element is the only HTML element that has capabilities by default. Whenever you create a video element with a controls attribute, it automatically gets a fullscreen control icon that allows you to toggle your video between fullscreen and normal mode. You can try it yourself.

Although the fullscreen API can be used on all major desktop and mobile browsers, sometimes it’s best practice to use multiple prefixed versions of some properties (for document.fullscreenElement there's mozFullScreenElement for Mozilla Firefox, or webkitIsFullScreen). If you have any doubts, you can check the prefix table on MDN.

Fullscreen API Properties and Methods

To successfully use the Fullscreen API, ‌ need to be familiar with its properties and methods. They include:

• **element.requestFullscreen()**: This method tells the web browser to set a specified element in fullscreen mode.
• **document.exitFullscreen()**: This method tells the web browser to exit an element from fullscreen mode and return to normal mode.
• document.fullscreenElement: This property returns the element that is in fullscreen or checks if fullscreen mode is active. A value of null means no element is in fullscreen mode.
• **document.fullscreenEnabled**: This property checks whether the fullscreen mode is supported. It returns true if fullscreen mode is supported and false if it isn’t.
• **fullscreenchange** event: This event is used for detecting changes in the fullscreen mode. It can be used to create some functionality when fullscreen mode is activated and exited.

How to Request Fullscreen Mode

The first step in implementing this functionality is to request fullscreen mode. You can do this with the requestFullscreen() method.

Here is the code to request fullscreen mode:

let image = document.querySelector('image.img'); 

image.requestFullscreen();

‌The above code will return an error because fullscreen can only be activated through user interactions such as clicks, double clicks, and so on.

In the code below, we’ll use a click event to activate the fullscreen mode.

let image = document.querySelector('img.image');

image.addEventListener('click', function(e){
      image.requestFullscreen();
})

‌In the code above, I used a querySelector() method to select an img element. Then I attached a click event listener to make the image go fullscreen when clicked.

How to Exit Fullscreen Mode

After the fullscreen mode has been activated, you'll need an exitFullscreen() method to exit the fullscreen mode.

Here’s the code for exiting fullscreen mode:

document.exitFullscreen();

In a real-world project, you'll need a user to interact with the web page in order to exit fullscreen. You'll need an event listener that listens to user interactions like clicks, double clicks, keydown, and so on.

Here’s how you use an event listener with the exitFullscreen() function:

let image = document.querySelector('img.image'); 

image.addEventListener('click', function(e){ 
     image.requestFullscreen(); 
 }) 

 image.addEventListener('dblclick', function(e){ 
      document.exitFullscreen(); 
})

From the code above, when a user clicks on the image, the fullscreen mode gets activated. When you double-click on the image, it gets deactivated.

How to Check Fullscreen State

To check if an element is in fullscreen mode or not, we’ll use the fullscreenElement property.

A value of null means it's not in fullscreen mode.

From the example above, you can modify the code to activate and exit fullscreen mode based on the value of the fullscreenElement property.

Here’s how to use this property:

image.addEventListener('click', function(e){ 

   if(document.fullscreenElement){ 
      document.exitFullscreen() 
   } else { 
     image.requestFullscreen();
   } 

})

From the above code, you’ve instructed the browser to toggle between full-screen and normal mode when the image is clicked.

Event handling and Fullscreen State

Sometimes you might want to make some changes (such as alerting the user) when fullscreen mode is activated or exited.

Instead of using the document.fullscreenElement and multiple event handlers to check if an element is in fullscreen, you can use the ‘fullscreenchange’ event .

Here’s the code:

document.addEventListener('fullscreenchange', function(e){ 

   if(document.fullscreenElement){ 
      console.log('fullscreen mode activated');
   } else { 
      console.log('fullscreen mode deactivated'); 
   } 

})

From the code above, anytime fullscreen mode is activated or exited from any element, a console.log() message is displayed in the developers tool.

How to Apply Fullscreen to Various Element Types

Although fullscreen can be applied to all elements, it’s best used on media and interactive elements such as img, video, iframe, and canvas.

Although the use cases are numerous, I'll be explaining a few.

For your canvas element, if you are building an online game, it can be used to make your games fullscreen. Also, if you are building a dashboard with a canvas-based charting library, it can be used to make individual charts in your dashboard go fullscreen when the user clicks on them.

For your video element, if you are building a custom video player for your project, you can use it to implement fullscreen functionality.

For your image element, if you're building a web app (such as a social media platform) that supports image and video upload, you can use this API to implement fullscreen mode on the elements.

For iframe, embed and object element, if you are building an image-to-pdf converter website, you can use this API to make your converted PDF go fullscreen for reviewal by your users.

Fullscreen API Best Practices and Tips

Here are the best practices and tips for fullscreen API:

1. Provide user-friendly controls for entry and exit: if you are implementing fullscreen on images, you should activate it when the user clicks on the image and exit when the user double tab or presses the backspace button. Similar user-friendly methods can be used on video and canvas elements. Also, make sure you notify the user when they enter and exit fullscreen.
2. Ensure fallback options for non-supported browsers: If a user is trying to activate fullscreen from an unsupported browser, you should alert them of this incompatibility.
3. If you are using fullscreen on iframes that links to external sources, don’t forget to set the allow = 'fullscreen' attribute.

<button>fullscreen</button>
<iframe allow='fullscreen' src='https://external.com/content' width='500' height='300'> </iframe> 

<script> 
    let button = document.querySelector('button'); 
    let iframe = document.querySelector('iframe'); 

    button.addEventListener('click', function (){  
       iframe.requestFullscreen();
    }) 
</script>

4. Mouse events (like mouseover) and alert() function might behave unexpectedly, so you shouldn't use them within fullscreen API.

Conclusion

In this tutorial, you’ve learned what fullscreen API is, how to implement it, and the best practices to follow.

I hope that you're now able to utilize the fullscreen API capabilities in your web projects

Feel free to check the MDN website for further learning. You can also follow me on Twitter (@GidtheCoder) to connect with me. Cheers.