Webhooks are a powerful tool that allow applications to communicate with each other in real-time. They are often used to send notifications or updates from one system to another without requiring manual intervention.

If you know the basics of sending a request to a REST API, you can easily use Webhooks to make your lives easier.

Today, I will show you how you can use Discord Webhooks to send personal notifications to your Discord server. This will be an easy and quick demo of how Discord Webhook works.

Discord Webhooks can be used for:

• Notifying a server about updates to a website or social media account (YouTube, Twitch, Twitter, etc)

• Automating messages for a welcome or goodbye message to new server members

• Sending notifications about events or reminders to a server

• Sharing information from other sources, such as weather reports or game updates

If you are comfortable with videos rather than articles, you can check out the video on my YouTube channel 👇

🎯 The Goal

By the end of this article, you will understand how Discord Webhooks work, and how you can use them to notify you when a user clicks on a button on your website.

🌱 Creating a Webhook

On Discord, you can easily create a webhook by following the steps below

You can't create or control a Webhook on Discord mobile. Either use the web version or the desktop version to do that.

The first step is to go into your Server Settings.

Then on the settings page, click on Integrations, and then Create Webhook.

Choose a name and avatar for your Webhook Bot, and hit Save Changes.

Make sure to copy the Webhook URL by clicking on the Copy Webhook URL button. We will need that later to interact with the Webhook.

🧪 Testing the Webhook

To test and see how our Webhook works, we will use the API Tester mobile app. You can download it from the App Store link and the Play Store link.

The rapid changes in the world have made it possible for individuals to increase their productivity and gain greater mobility by working directly from their smartphones from any location.

API Tester allows users to test APIs from anywhere, at any time, using a device that they already have with them. This can be especially useful for testing APIs while on the go or when a desktop or laptop computer is not available.

There are a few reasons I really like API Tester:

• Beautiful and easy-to-use UI

• Great UX

• Importing data from Postman and other platforms

• Environment variables

• Much more...

Creating a request

You can create a new request on API Tester, click on the Plus Button on the top-right, then select POST as your request type.

Then, paste the Webhook URL you copied earlier after creating the Webhook.

You must hide the Webhook URL because anyone with the Webhook URL can use it to send messages on your server.

Next, go to the Body section, select Raw, and open Post Data.

Inside the Post Data, add this JSON

{
  "content": "This is a test message"
}

Finally, close the Post Data popup, and hit the Send button in the top right corner.

You will immediately receive a message on your Discord server from the webhook you created.

You can learn more about API Tester from their official site:

💬 Adding the feature

To add this feature to your website, simply send a POST request to the Discord Webhook URL.

async function sendDiscordMessage(name) {
  const response = await fetch("DISCORD_WEBHOOK_URL", {
    method: "POST",
    body: JSON.stringify({ 
      content: `${name} button was clicked.`,
    }),
    headers: {
      "Content-Type": "application/json",
    },
  });
}

✨ How do I do it with Next.js?

My personal site is built using Next.js and React. I created a serverless function using the API Routes in Next.js so that my discord webhook URL is protected.

Otherwise, directly sending the request from the front end might cause your Webhook URL to be exposed.

This is my code for the backend 👇.

And this is the code for my front end 👇.

You can always find the code for my website on GitHub.

Conclusion

I hope this article helped you understand how Webhooks work and how you can use Discord Webhooks for various tasks. Comment below how you utilized Discord Webhooks or any other type of Webhooks.

I would love to hear your thoughts on this topic. Please share your ideas and experiences in the comments section below!

This time I am writing about why you should avoid the onclick attribute in your HTML and JavaScript code.

This article is not particularly about click events but rather all events in HTML and JS. The click event is a good and easy example to explain.

First, I will try to explain the various ways to handle click events or rather any events in JavaScript.

Different Ways to Handle Click Events

There are three ways I know to handle click events in HTML and JavaScript (comment below if you know more).

1. Using the onclick attribute

The first way I learned was by using the onclick attribute in HTML and calling a function that was written in JavaScript.

It is maybe the easiest way to handle click events. As there is nothing complicated. Everything makes sense.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The onclick way</title>
  </head>
  <body>
    <button onclick="whenButtonClicked()">Click me</button>
    <script>
      function whenButtonClicked() {
        alert('button clicked');
      }
    </script>
  </body>
</html>

In the code above, we create a function inside our JavaScript that we then call when the button is clicked.

It will result in something like this 👇

2. Using the addEventListener function

The second way I learned was by using the addEventListener function inside JavaScript. I saw it for the first time in this tutorial.

At first, I felt this was unnecessary as the onclick felt easier. But with time and building large projects, I understood why this makes more sense.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The onclick way</title>
  </head>
  <body>
    <button id="btn">Click me</button>
    <script>
      const btn = document.getElementById('btn');

      function whenButtonClicked() {
        alert('button clicked');
      }

      // 1. either pass the function
      btn.addEventListener('click', whenButtonClicked);
      // 2. or use anonymous function
      btn.addEventListener('click', () => {
        alert('button clicked');
      });
    </script>
  </body>
</html>

What happens here is you first select the button inside your JavaScript code with id or class etc. And then register/add an event listener called click. Then either pass the function in or use an anonymous function.

This is better because when you are going to build something large the first way, your JavaScript code will get mixed with HTML. Then maintaining your code will be very hard.

You can also remove an event listener using the removeEventListener method. By just passing in the function that was used previously.

function whenButtonClicked() {
  alert('button clicked');
}

// add event listener
btn.addEventListener('click', whenButtonClicked);
// remove event listener
btn.removeEventListener('click', whenButtonClicked);

3. Using the onclick property

This is by far my favourite way to handle events.

• It's as straightforward as the first one.

• Separated from HTML as the second one.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>The onclick way</title>
  </head>
  <body>
    <button id="btn">Click me</button>
    <script>
      const btn = document.getElementById('btn');

      function whenButtonClicked() {
        alert('button clicked');
      }

      // 1. either pass the function
      btn.onclick = whenButtonClicked;
      // 2. or use anonymous function
      btn.onclick = () => {
        alert('button clicked');
      };
    </script>
  </body>
</html>

What we do in this piece of code is that we assign the onclick attribute to a function (same as the second way).

The downside of using this method is that you cannot assign multiple event listeners. If you use addEventListener. With that, you can add multiple functions to one element. And not to mention you also cannot use something like removeEventListener

So What's Wrong with onclick?

Now let's come to the main section of the article.

The onclick attribute is not recommended in HTML because it is considered to be a bad practice to use inline JavaScript in your HTML code.

Instead, it is better to separate your JavaScript code from your HTML code and use event listeners to handle events in your web page. This makes your code easier to read, maintain, and reuse.

In general, it is better to avoid using the onclick attribute in HTML and to use event listeners instead, as this allows you to keep your JavaScript code separate from your HTML code and makes it easier to manage and maintain.

Additionally, using inline JavaScript in your HTML can make your code more difficult to maintain and update. If you need to change the behaviour of your web page, you will have to go through your HTML code and update all of the onclick attributes, which can be time-consuming and error-prone.

Conclusion

I hope this article helped you out and made you better!

I would love to hear your thoughts on this topic. Please share your ideas and experiences in the comments section below.

This is a very important question because it makes things clear as to why this app is needed. I built Memoriez because I honestly found it hard to write and maintain journal/diary entries daily.

It's not easy to maintain a journal (especially not for lazy people like me 😜) but with this platform, people can easily maintain a journal where their data is also stored on the cloud. So it's preserved as well.

✨ Features ✨

Memoriez contains not too many features as of now but still many features. But it has the following great features that are different from a normal journal app.

Cover Image (Using Pexels)

Users can add a cover image to their entry using this feature, they can search for something and choose that image to set their cover. I used the Pexels API for this.

Set Mood of the day

Users can set the mood of the day which will then help them to figure out how the day went instead of reading the whole entry. This gives a sort of emotion for the day and makes it better.

⚒ Tech Stack ⚒

The Tech Stack used here might be familiar to a lot of people. Because it has gotten very popular nowadays.

• Next.js (With TypeScript)
• Chakra UI (CSS Framework)
• Clerk (User Authentication)
• Prisma (ORM)
• PlanetScale (Database)
• Linode (Deployment/VPS)

🍂 What I Learned 🍂

One of the most important things from this hackathon was to learn new things about new technologies. Here are a few new things I learned by building this project.

1. ⚡ Deployment of Next.js app on Linode (Most interesting)
2. 🚀 Deploy on commit with GitHub Actions
3. 🔒 Building a full CRUD app with Secure API
4. ✨ Using PlanetScale for the database with Prisma

🔮 What Next? 🔮

I built this in a very few days because I did not have much time. Most of my time went in other things. Now that I have made the basic working version of it. These are the features I have planned for the future:

• Make entries shareable (set public or private)
• Ability to filter entries by tags
• Ability to filter entries by mood
• Show graphs and charts based on mood
• Searching for entry

⛳ Conclusion ⛳

This was one of my greatest experiences of all time. This is my second huge app!

The first huge app I built was Easypastes with Sunrit Jana. This time, I built it myself all alone. With some feedback from the community.

Memoriez is open-source! Contributions are welcome 🤗

• Website
• GitHub

Overall, I would like to mention these super useful resources that helped me deploy my project to Linode. It was a little too much work but I learned something very new that I had never come across before.

• Automatic Deployment With GitHub Actions - By Traversy Media and Anson the Developer
• Linux Server Setup & MERN Deployment - By Traversy Media

Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Thanks for reading ✌

Next.js is an amazing full-stack framework and MongoDB is a great NoSQL database. Using them together will make an app super fast and awesome! In this post, we'll go ahead and set up the Mongoose ODM inside our Next.js app to make use of MongoDB!

So let's see how you can set up Mongoose in a Next.js app to connect and interact with your MongoDB database!

Setting up mongoose and the connection string

In your Next.js project, to set up mongoose you simply have to install it as a dependency just as you do with Node.js.

npm i mongoose

After installing mongoose, we'll create a folder called utils in our root and create a new file named connectMongo.js file.

In this file, we will export a function that connects us to MongoDB.

import mongoose from 'mongoose';

const connectMongo = async () => mongoose.connect(process.env.MONGO_URI);

export default connectMongo;

Also create a file named .env.local in the root of your project to store the connection URI in your environment variable and hide it from the main code.

# I am using MongoDB locally but you can use MongoDB Atlas also if you want
MONGO_URI="mongodb://localhost:27017/mongoose_nextjs_demo"

Create a basic mongoose model

Now that mongoose is set up successfully in our Next.js project, the rest of the work is quite similar to a Node.js app. I personally like to create a folder called models in the root of my project and create my model files there, just like a normal node.js app.

So now we'll create a file named testModel.js in our models folder where we'll create our mongoose model.

import { Schema, model, models } from 'mongoose';

const testSchema = new Schema({
  name: String,
  email: {
    type: String,
    required: true,
    unique: true,
  },
});

const Test = models.Test || model('Test', testSchema);

export default Test;

IMPORTANT: Notice how we use models.Test and then the logical OR operator and then use the model function by mongoose. We do that because we don't want to create a new model every single time we hit an API route in Next.js. If you don't do that and just go with model('Test', testSchema), you might face an error that would prevent creating/updating etc.

Using mongoose in API routes

Now that we have our model created, we can use it to see it in action!

Next.js is a full-stack framework, and so it also provides a node environment where we can run Node.js back-end code easily and integrate that with the frontend.

In the pages/api folder, we can create a file or folder that will ultimately create an API route and we can write back-end code in that file and call it as a REST API.

For this demo, I created a folder test and a file add.js inside of it which gives the path /api/test/add.

import connectMongo from '../../../utils/connectMongo';
import Test from '../../../models/testModel';

/**
 * @param {import('next').NextApiRequest} req
 * @param {import('next').NextApiResponse} res
 */
export default async function addTest(req, res) {
  try {
    console.log('CONNECTING TO MONGO');
    await connectMongo();
    console.log('CONNECTED TO MONGO');

    console.log('CREATING DOCUMENT');
    const test = await Test.create(req.body);
    console.log('CREATED DOCUMENT');

    res.json({ test });
  } catch (error) {
    console.log(error);
    res.json({ error });
  }
}

Here, we import the connectMongo function and our Test model that we created from the respective files. And the big comment I have at the top is JSDoc which can be used to provide autocomplete and typing in the IDE. You can omit it if you want.

Finally, the code is simple and straightforward, you can use the normal mongoose style code to create a new document. By getting the data from req.body.

You can test it from the Thunder Client extension in VS Code, Postman or Insomnia. Whatever you wish! I like to use Thunder Client.

Create new document from front-end

Now that we have our back-end API created and we have verified that it's working, we can quickly write some front-end code to make it usable in our app.

On the homepage inside the index.js file, I changed the file so that when we click the button, a new document will get added to the database.

import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';

export default function Home() {
  const createTest = async () => {
    const randomNum = Math.floor(Math.random() * 1000);
    const res = await fetch('/api/test/add', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        name: `Test ${randomNum}`,
        email: `test${randomNum}@test.com`,
      }),
    });
    const data = await res.json();
    console.log(data);
  };
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>

      <main className={styles.main}>
        <button onClick={createTest}>Create Test</button>
        <h1 className={styles.title}>
          Welcome to <a href='https://nextjs.org'>Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}></div>
      </main>

      <footer className={styles.footer}>
        <a
          href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
          target='_blank'
          rel='noopener noreferrer'
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}

Fetch and display documents

Now it's time to use Next.js's biggest feature! Server-Side Rendering. We can use SSR in Next.js to easily run back-end Node.js code as we want and the data can be easily accessible through the props to the page.

In the index.js file itself, we'll import the connectMongo and Test again and use them inside the getServerSideProps function that we have to export like this 👇

import connectMongo from '../utils/connectMongo';
import Test from '../models/testModel';

export const getServerSideProps = async () => {
  try {
    console.log('CONNECTING TO MONGO');
    await connectMongo();
    console.log('CONNECTED TO MONGO');

    console.log('FETCHING DOCUMENTS');
    const tests = await Test.find();
    console.log('FETCHED DOCUMENTS');

    return {
      props: {
        tests: JSON.parse(JSON.stringify(tests)),
      },
    };
  } catch (error) {
    console.log(error);
    return {
      notFound: true,
    };
  }
};

In this function, we can easily fetch any data we want and it will be done on the server and then we have to return it as props. That will be accessible to the page. You can read about getServerSideProps on the Next.js docs

IMPORTANT: Make sure to sanitize the tests variable with JSON.parse(JSON.stringify(tests)) because it contains ObjectID from MongoDB instead of a normal string. This trick converts it into a string that can be passed in the return object.

That's it! After we're done fetching the data we can easily display it by accessing it through the props on our page and we can use it however we want. In this case we'll map over that data to output every document like so

export default function Home({ tests }) {
  // ...
  return (
    //   ...
    <div className={styles.grid}>
      {tests.map((test) => (
        <a
          href="https://nextjs.org/docs"
          key={test._id}
          className={styles.card}
        >
          <h2>{test.name} &rarr;</h2>
          <p>{test.email}</p>
        </a>
      ))}
    </div>
    // ...
  );
}

Finally, this is what our page looks like:

I have explained everything deeply in the YouTube tutorial below 👇👇

I hope this post helped you successfully set up Mongoose in your Next.js app. If it did, please leave a like!

Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Thanks for reading ✌

What will you achieve?

By default, we import other files and libraries in an unformatted way. With Prettier and one of it's community plugins, we can easily configure it to sort import statements the way we want them automatically whenever we format code inside VS Code.

Before

After

Installation & Configuration

In your JavaScript project, firstly you have to install and configure Prettier, you can do that easily by installing prettier as a dev dependency by running this command.

npm install prettier -D

After installing Prettier, we'll create a configuration file at the root of your project called .prettierrc. In that file, you can write JSON to configure prettier fitting to your needs. This is my configuration.

{
  "trailingComma": "none",
  "arrowParens": "avoid",
  "singleQuote": true,
  "printWidth": 80,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true
}

Now whenever you format code, Prettier will format it according to your configuration. Next up, we have to install the plugin we are going to use to sort imports.

You can install it as a dev dependency simply by running this command

npm install @trivago/prettier-plugin-sort-imports -D

Sorting Settings

Once the plugin is installed, you can look around in their documentation on the NPM page, but we are going to keep it simple.

The basic setup is to add 3 options in your prettier config file. importOrder, importOrderSeparation and importOrderSortSpecifiers as follows:

{
  "importOrder": ["ARRAY OF IMPORT NAMES"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

The main option in these is the importOrder option, in this option, you have to create an array of imports as you want to sort them. In my case, I wanted imports in this order:

import {} from 'next' // "next" imports at the top

import {} from 'other-lib'

import config from 'next-seo.config' // A single file

import Component from 'components/Component'

import helperFunction from 'utils/helperFunction'

import {} from 'assets/file'

import '@fontsource/font'

import 'others.css'

To configure this type of order, in the importOrder option, you have to pass an array of regular expressions.

My configuration was like this

{
  "trailingComma": "none",
  "arrowParens": "avoid",
  "singleQuote": true,
  "printWidth": 80,
  "useTabs": false,
  "tabWidth": 2,
  "semi": true,
  "importOrder": [
    "^(next/(.*)$)|^(next$)", // Imports by "next"
    "<THIRD_PARTY_MODULES>",
    "next-seo.config", 
    "^components/(.*)$",
    "^utils/(.*)$",
    "^assets/(.*)$",
    "^@fontsource/(.*)$",
    "^[./]" // Other imports
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

Here, "<THIRD_PARTY_MODULES" is provided by the plugin itself to place any other libraries in between. By default all third party modules will move at the top.

Now, you can go ahead and enable Format on Save setting inside VS Code to format code on save and install the Prettier extension too for the same.

Format script

A quick way to format all the files is by going into your package.json file and adding a script to it like this:

"scripts": {
  "format": "prettier --write \"./**/*.{ts,tsx,json}\""
}

You can refer to Prettier's CLI documentation for more information.

It's better to ignore some files and folders so that they don't get formatted as well by Prettier, for that you can create a .prettierignore file in the root of your project and you can simply name the files and folders you don't want to format. Just like .gitignore.

This is my .prettierignore file:

.next
node_modules
*-lock.json           # package-lock.json

Then you can run the npm run format command in your terminal and it will format all the required files in your project as per your configuration.

I hope this post helped you make your code look more clean and elegant and readable. If it did, please leave a like!

Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Thanks for reading ✌

Hey everybody!

I saw the Netlify x Hashnode Hackathon and I was very very excited to participate this time. It was quite hard to think about an idea but I finally got one!

Story

This time building an app was a weird and funny experience at the same time.

In the beginning, I, Sunrit Jana, and Faheem Khan were about to work on a different idea together, but then because of lack of time management we couldn't do so. And then I came up with this idea and finished it.

I thank them for supporting me with this project too 🙂.

Only Formats - What is it?

Only Formats is a web application that helps you quickly format code and copy it easily!!!

It makes things very easy with a very quick and simple user interface with no complications 💫.

The supported languages that Only Formats can format are:

• JavaScript
• TypeScript
• CSS
• HTML
• PHP
• JSON
• Markdown
• SQL

Motivation

The real reason and motivation behind building this app were that I saw a lot of people having doubts and when they send the code, it's mostly unformatted, thus making it unreadable.

To understand it, I had to open up VS Code or any other website that takes a lot of my time.

I built this app with a very simple set of tools to format and copy and paste code with syntax highlighting that makes things a lot better!

App tour

The first main page is very self-explanatory, you can select the language you want to format code in or search by clicking on the search icon on the top right.

I removed Java temporarily because it throws an unknown error. ISSUE

Once you've selected that, you will be redirected to that page with the tools. There might or might not be settings for a formatter an indentation. You can set that value and it will reflect changes instantly!

Paste the code or simply type it out on the code editor and once you type in the code, it will format it in one go!

It's also a PWA (Progressive Web App) so you can install it and work with it offline too

Also an API to format code is coming soon 😉!

Tech Stack

This is one of my favourite parts of the app! I enjoyed using the following Tech Stack!

1. Next.js with TypeScript
2. Chakra UI
3. Prettier to format code
4. Monaco editor for code editing
5. PrismJS for syntax highlight
6. Simple Icons (for language icons)
7. Netlify for deployment

Conclusion

I really enjoyed building this project and I encourage all of you to contribute to this project! It will be very nice of you to create issues and/or make pull requests to make it better and better every day 😊.

GitHub Repo

Live Website

Thanks to the folks over at Hashnode and Netlify for this amazing Hackathon! This time I learned a lot of things and most importantly about working with a deadline.

Goodbye everyone

Today, you will be able to build a WhatsApp REST API using Node.js and Express using Puppeteer and web scraping.

Although we won't be doing any web scraping, we will use a library that does everything for you already and makes it very easy to work with WhatsApp programmatically.

Setup

Express server setup

To set up the express server, we are not going to do it from scratch, we'll use a generator called express-draft by YoursTruly. Firstly, install express-draft globally and use the following command to generate an express app.

npm i -g express-draft
exp .

Install Whatsapp Web library

Caution: Installing this package will also download Chromium because of Puppeteer. To disable Chromium download, follow the steps on this post

So there's an awesome open-source Whatsapp client that connects through the Whatsapp Web browser app made by Pedro S. Lopez.

First, we'll install it through NPM or yarn.

npm i whatsapp-web.js

After we're done with that, we can set it up in our app.js file by following the given example.

We can alter the file as follows,

const express = require('express');
const fs = require('fs');
const createError = require('http-errors');
const morgan = require('morgan');
const { Client } = require('whatsapp-web.js');
require('dotenv').config();

const app = express();

const SESSION_FILE_PATH = './session.json';
let sessionCfg;
if (fs.existsSync(SESSION_FILE_PATH)) {
  sessionCfg = require(SESSION_FILE_PATH);
}

const client = new Client({
  puppeteer: { headless: false }, // Make headless true or remove to run browser in background
  session: sessionCfg,
});

client.initialize();

While using this library, whenever a user logs in, their information will be stored in a session.json file, which is then used to authenticate the user the next time when the server starts.

Important: Create a nodemon.json file in the root folder and add these contents to ignore the session.json file whenever it changes.

// "$schema" can be omitted it's used for IntelliSense. REMOVE THIS COMMENT
{
  "$schema": "https://json.schemastore.org/nodemon.json",
  "ignore": ["session.json"]
}

Creating routes and user login

Using events

whatsapp-web.js has a lot of events to work with, and we'll now use some of them to get the QR code, check the authentication, etc.

// Add this after express code but before starting the server

client.on('qr', qr => {
  // NOTE: This event will not be fired if a session is specified.
  console.log('QR RECEIVED', qr);
  app.get('/getqr', (req, res, next) => {
    res.send({ qr });
  });
});

client.on('authenticated', session => {
  console.log('AUTHENTICATED', session);
  sessionCfg = session;
  fs.writeFile(SESSION_FILE_PATH, JSON.stringify(session), function (err) {
    if (err) {
      console.error(err);
    }
  });
});

client.on('auth_failure', msg => {
  // Fired if session restore was unsuccessfull
  console.error('AUTHENTICATION FAILURE', msg);
});

client.on('ready', () => {
  console.log('READY');
});

// Listening for the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`🚀 @ http://localhost:${PORT}`));

The above code uses events provided by the library to tackle different situations. They are pretty self-explanatory so I am not gonna explain each of them.

In the "qr" method, we create a route that sends the QR code as the response. The QR code is in raw format, meaning it needs to be generated so for the purpose of this tutorial, we'll use a library called qrcode-terminal to show the QR Code in the terminal.

// Run `npm i qrcode-terminal` before this

const qrcode = require('qrcode-terminal')

client.on('qr', qr => {
  // NOTE: This event will not be fired if a session is specified.
  console.log('QR RECEIVED', qr);
  qrcode.generate(qr, { small: true }); // Add this line
  app.get('/getqr', (req, res, next) => {
    res.send({ qr });
  });
});

The sendmessage endpoint

Now that we have everything set up, let's do the most exciting part that is to send a message using our own API.

For that, we create a route in the app.js file itself.

Let's create the POST endpoint for sendmessage and it will be an async function with a try-catch block.

app.post('/sendmessage', async (req, res, next) => {
  try {
    // Magic happens here
  } catch (error) {
    next(error)
  }
})

In the body of the request, the user has to enter two pieces of data.

1. Mobile number
2. Message

We'll identify those as number and message respectively. Hence, we get them from the request body, and use them to very easily send the message from the client to the given number.

To send a message, we use the client.sendMessage method and these are the arguments we need to pass in

app.post('/sendmessage', async (req, res, next) => {
  try {
    const { number, message } = req.body; // Get the body
    const msg = await client.sendMessage(`${number}@c.us`, message); // Send the message
    res.send({ msg }); // Send the response
  } catch (error) {
    next(error);
  }
});

Now here, in the sendMessage method, we pass in the mobile number and the message itself. With the mobile number, we have to attach @c.us at the very end, so we do that with template literals in JavaScript.

Testing the API

In order to test our API, we first run it using npm run dev. That will open up a browser (if you've set headless to false)

Running the server will give us the QR Code to authenticate because it's the first time. So, you have to scan it through WhatsApp.

Once authenticated, you will notice that a session.json file has been created with the following contents.

Now in VS Code itself, we'll use an extension called Thunder Client, which works like Postman for API testing. Here's the link

Create a New Request in Thunder Client, and then add the following details. In the number field, add the mobile number followed by the country code of the number.

Look at the image carefully

And then hit Send.

If the message is sent successfully, the number you entered will receive it and you will get back the msg as the response. If not, then an error.

Conclusion

You can read more about the library here

I hope you enjoyed building out the WhatsApp API using Node.js, Express, and whatsapp-web.js.

Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️.

Nice to see you all around again! Today you'll find out how easy it is to use the react-hook-form library for forms instead of the normal method of forms in React.

So, the first thing is first, normally, in React we use state, and whenever the value of an input changes, we change the state. This method's good but there is a lot of code. Here's how the code looks like in this case.

import { useState } from 'react';

export default function LoginForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const onSubmit = (e) => {
    e.preventDefault()
    // Submit logic
  }

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type='email'
          value={email}
          onChange={e => setEmail(e.target.value)}
        />
        <input
          type='password'
          value={password}
          onChange={e => setPassword(e.target.value)}
        />
      </form>
    </div>
  );
}

And I personally feel that this is indeed a lot of code that could be made better. That's why you should use react-hook-form.

So to convert this normal one to use react-hook-form, we install it via NPM or Yarn.

npm i react-hook-form
# yarn add react-hook-form

And then, the first thing we have to do is get rid of the state we created, the onSubmit function and the value and onChange props too.

After we remove that bit of code, we import useForm from react-hook-form, and this is how we use it.

import { useForm } from 'react-hook-form';

export default function LoginForm() {
  const { register, handleSubmit } = useForm();

  return (
    <div>
      <form>
        <input type='email' />
        <input type='password' />
      </form>
    </div>
  );
}

Then, we use the register function as a prop in the inputs to register each input with a name to get the value of it, like this.

return (
  <div>
    <form>
      <input type='email' {...register('email')} />
      <input type='password' {...register('password')} />
    </form>
  </div>
);

Then, for the form submission, we use the handleSubmit provided by the useForm hook with our own submit function which provides us the values of the inputs directly. We can also destructure the values from it.

import { useForm } from 'react-hook-form';

export default function LoginForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => { // OR DESTRUCTURING ({ email, password })
    console.log(data.email, data.password)
    // Submit logic
  }

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}> {/* handleSubmit is invoked and onSubmit is passed into it */}
        <input type='email' {...register('email')} />
        <input type='password' {...register('password')} />
      </form>
    </div>
  );
}

This way, it automatically prevents the page from refreshing on submit.

💪 Using it with TypeScript

Using RHF with TypeScript is super easy because firstly, you don't need to install separate type definitions as they come along with RHF.

You've to define an interface for the fields you're using, and then pass it in useForm as generic.

interface LoginFields {
  email: string;
  password: string;
}

// In component
const { register, handleSubmit } = useForm<LoginFields>();

And while calling the submit function, you've to set the type of the onSubmit function to the type SubmitHandler provided directly by RHF.

import { useForm, SubmitHandler } from 'react-hook-form';

// In component
const onSubmit: SubmitHandler<LoginFields> = ({ email, password }) => { 
    console.log(email, password)
    // Submit logic
  }

This way you also get good IntelliSense in your IDE or code editor

Conclusion

You can read a lot more functionalities provided by react-hook-form on their website.

I hope you liked it! Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️

So I am back again! This time we have a little different project to build and it's an easy one.

I discovered that this was interesting and indeed it is!

I will teach you how you can make your own QR Code Generator using HTML, CSS, and JavaScript!

HTML

The HTML we need is very very straightforward! What we need in this case is this:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR Code Generator</title>
</head>
<body>
  <h1>QR Code Generator</h1>
  <input 
    type="text" 
    spellcheck="false"
    id="text"
    value="https://google.com"
  />
  <div id="qrcode"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
</body>
</html>

• We add some attributes to the input to select it in JavaScript, we remove spellcheck from the input so any spelling is valid and we add a default value for the input.

• We add <div> with an id of qrcode to use it in JavaScript and output the QR Code

• We create the <script> tag to include a simple library that helps us generating the QR Code.

CSS

For the CSS, we add some super simple styles to make it look a little better than default.

We are adding the CSS in <style> tags because it's minimal.

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 80%;
    height: 100vh;
    margin: auto;
    display: grid;
    place-items: center;
}

h1 {
    font-family: sans-serif;
}

input {
    padding: 10px;
    border-radius: 20px;
    border: 2px solid steelblue;
    font-size: 1.5rem;
    letter-spacing: 2px;
    outline: none;
}
</style>

Most of the styling is done for the input element to give it a good border and padding.

JavaScript

The JavaScript used to generate the QR Code is also very minimal so we'll write it in the <script> tags inside our HTML.

Firstly, we select the HTML elements by ID to use them.

<script type="text/javascript">

const qrcode = document.getElementById("qrcode");
const textInput = document.getElementById("text");

</script>

Then, we use the QRCode constructor to create an instance of it. Which comes along with the qrcode.js library we added the script for.

We pass in the <div> with the id of qrcode in the constructor And we use the makeCode method to embed the value of the input in a QR Code.

The trim() method helps in removing extra space before and after a string

const qrcode = document.getElementById("qrcode");
const textInput = document.getElementById("text");

const qr = new QRCode(qrcode);
qr.makeCode(textInput.value.trim());

Now, whenever the user types into the input, we generate the QR Code again using the makeCode method.

We use the oninput event on the textInput element for that. We get an event object with the function, we use the e.target.value to get the current value of the input and generate the QR Code accordingly!

textInput.oninput = (e) => {
    qr.makeCode(e.target.value.trim());
};

Here is the final code for the QR Code generator: https://easypastes.tk/pastes/qrcode-gen

I hope you liked it! Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️

So I recently looked into Serverless functions or Lambda functions and I learned them.

They can be extremely useful when building an app that is fully front-end and there are chances to expose API keys and so on.

So today we'll be learning what exactly are serverless functions and how could we use them with Netlify.

❓ What are serverless functions?

In simple words, serverless functions are a replacement to a custom node.js server. If you are familiar with Node.js and creating APIs using Node, serverless functions are easy to understand.

A Node.js server and serverless functions are exactly the same but the biggest difference between them is,

• Node.js servers require you to manage the server
• Serverless functions are handled by another provider

🪜 Example

If you have a website that runs at coolsite.com and is delivered by a CDN service like Netlify, your serverless functions might be running at coolsite.com/api/....

Whilst if you have a custom Node.js server, you have to deploy it somewhere else to keep it running like on Heroku.

🏗️ Using Netlify Serverless functions

Say you have a static HTML, CSS, and JS website, and you want to use serverless functions on that site. In simple words, you want to create an API that runs backend code.

Like fetching data from an external API, making database queries, etc...

The first thing you will need to do is install netlify-cli globally on your machine. You can do that by running:

npm i -g netlify-cli

After doing that, in your project folder, create a netlify.toml file with this content, this specifies the path of the folder where you want your functions to be

[build]
    functions = "functions"

Then run this command in the terminal, and it will ask you a few questions.

netlify functions:create

You can make your choice as per your preference, we'll choose JavaScript and hello-world

After you have entered the name of your function in the prompt, you will see a folder inside the functions folder for your Serverless Function.

Now that file simply exports a function, and that function returns the response, just like in a Node.js server.

For this demo, I simplified the file and made the function return some dummy data, here's how the file looks like:

const handler = async event => {
  return {
    statusCode: 200,
    body: 'Hello, World!',
  };
};

module.exports = { handler };

Here, the parameter called event is an object with the following properties:

{
    path: "Path parameter",
    httpMethod: "Incoming request’s method name",
    headers: {Incoming request headers},
    queryStringParameters: {Query string parameters},
    body: "A JSON string of the request payload",
    isBase64Encoded: "A boolean flag to indicate if the applicable request payload is Base64-encoded"
}

To see the function in action, you can run the command netlify dev, it'll start a dev server with hot reload on port 8888, and follow these steps to see how you can use it.

netlify dev

On localhost:8888, append this part: /.netlify/functions/[FUNCTION_NAME]. So the URL should look like this: http://localhost:8888/.netlify/functions/hello-world

If I changed the response from normal text to this:

return {
  statusCode: 200,
  body: JSON.stringify({
    hello: 'world',
  }),
};

The result will be this:

Similarly, you can write any valid Node.js code in the function file, and that will work as your back-end code.

♻️ Using /api/* endpoint

Now a lot of you might not be liking the endpoint /.netlify/functions/*, so to convert that endpoint to a simpler one, we can edit the netlify.toml file with this config:

[build]
    functions = "functions"
# Add from here
[[redirects]]
    from = "api/*"
    to= ".netlify/functions/:splat"
    status = 200

Now if you were to visit http://localhost:8888/api/hello-world, it will give you the same output!

🏋️‍♂️ Fetching the data from the front-end

Now that we have our function created, we can easily fetch the data from our frontend JavaScript.

function fetchData() {
  fetch('/api/hello-world')
    .then(res => res.json())
    .then(data => {
      console.log(data);
    });
}

fetchData();

And now when you check it on localhost:8888, in the console, we get the response successfully.

Read more on the documentation: https://docs.netlify.com/functions/build-with-javascript/

Thanks for reading!

I hope you liked it! Comment down your thoughts! There is always room for improvement so let me know your suggestions!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️!

Today I thought of starting my first series about Next.js Fetching methods because many people (including me) don't understand them easily.

I will make these methods very easy for you to understand so that you don't have to be worried about how it works.

What is getStaticProps?

In simple words, getStaticProps is a method that can be exported from a page in Next.js which is simply used to get some data for further use.

For eg.

export default function MainPage(props) {
  return (
    <h1>{props.helloWorld}</h1>
  );
}

export const getStaticProps = () => {
  return {
    props: {
      helloWorld: 'Hello World'
    }
  }
}

We get back data in the form of props, but we don't use getStaticProps this way 👆.

If you have a database or you want to fetch some data from an API, you can use getStaticProps. But only if that data is STATIC.

The getStaticProps method runs at the build time, so whatever you write inside the method, is available to you statically. And it does not change over time because YOU NEVER FETCH THE DATA AGAIN.

Better example

Now let's take a better example to use getStaticProps in Next.js and why you would want to use it instead of the normal fetching in React.

By using getStaticProps, the data is only fetched once and is READY TO USE without refetching.

Suppose you are building an app that has a list of people, and that list is always static. You want to show or use that list but you have them stored in the database or you are using an external API.

We will take an example of JSONPlaceholder API and we want to fetch the users from the API.

This is how the code will look like:

export default function MainPage({ people }) {
  return (
    <div>
      {people.map(person => (
        <>
          <h1>{person.name}</h1>
          <h2>Website: {person.website}</h2>
          Email: <code>{person.email}</code>
        </>
      ))}
    </div>
  );
};

export const getStaticProps = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
  const people = await response.json();

  return {
    props: {
      people
    }
  };
};

Now when the app gets built using npm run build, the data will be fetched at that point and it will be READY TO USE in your app.

So there is no need to fetch the data, show loading spinner, etc, etc. THE DATA IS ONLY FETCHED ONCE.

Thanks for reading!

I hope you liked it! Read the other posts of this series! Comment down your thoughts! There is always room for improvement so let me know your suggestions!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️!

If you're a Node.js developer and you've used Puppeteer for web scraping, you might have seen that it downloads Chromium whenever you install puppeteer.

Many of you people don't like to download an external web browser for this. You might have Chrome, Edge, Brave, or any other Chromium-based browser on your system so why not use that?

Step 1 - Set the environment variables

Whenever you install Puppeteer, it will first check for the environment variables listed below:

Read more on DevDocs: https://devdocs.io/puppeteer/index#environment-variables

We are interested in PUPPETEER_SKIP_CHROMIUM_DOWNLOAD and PUPPETEER_EXECUTABLE_PATH.

In your operating system, you have to set these two environment variables to these values 👇

On Windows

Search this term Edit the system environment variables in Start Menu and open it

Click this button on the bottom right:

Click on the New button under System variables:

Enter the variable name and value as given below:

Find browser's path

The simplest way to find the path to your browser's executable (on Windows) is to right-click the shortcut on the desktop, and click on Open file location.

In my case, I used Microsoft Edge so this was the path: C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe

It'll take you to the file location and you can copy the path, and paste it into the environment variables.

Thanks for reading!

I hope you liked it! Comment down your thoughts! There is always room for improvement so let me know your suggestions!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️!

Today's article is all about how you can make a Random Meme API using Node.js and web scraping. We'll be using Fastify for our API and we'll be using Puppeteer to scrape the web and get the random meme.

This random meme API was inspired by the same kind of API here. But I wanted to build it using Node.js and Puppeteer.

We'll be scraping Memedroid using the Puppeteer NPM package.

Initializing the project

First of all, we'll need to create a folder with the name we want and we'll need to initialize our Node.js app in that folder. We do it using this command:

npm init -y

Then we need two dependencies to install, simply install puppeteer and fastify.

npm i puppeteer fastify

Using Fastify for API

After we have our project set up and our dependencies installed, we're good to go with writing the code! Create an index.js file and import fastify with this code to create the server.

const fastify = require('fastify')({ logger: true });

const start = async () => {
  try {
    await fastify.listen(5555);
  } catch (err) {
    fastify.log.error(err);
    process.exit(1);
  }
};

start();

Once this thing is done, when we run the app using node index, our app will be running on port 5555. But let's create the base route (/ )for it.

fastify.get('/', async (request, reply) => {
  reply.send({ hello: 'world' });
});

Getting the random meme using Puppeteer

Here comes the fun part now! We'll open the web browser and get all the images from memedroid, and we'll do all of it through code.

With the puppeteer package, Chromium also comes installed to scrape the web. That's why it might have taken time for you to get installed

To skip Chromium download, you can use puppeteer-core package and add the path to your Chrome file following the docs.

We'll create a function to get all memes and then we'll pick a random one in the route.

async function getAllMemes() {
  const URL = 'https://www.memedroid.com/memes/tag/programming';

  const browser = await puppeteer.launch({ headless: true }); // launch browser
  const page = await browser.newPage(); // open a page

  await page.goto(URL); // go to the page
}

We simply launch the browser and open the page for memedroid in this code 👆.

Now let's get all the <img> tags which are in the <div> with the class of item-aux-container. That's where all the memes live in.

As in the above image, inside of each <article> tag, the div with that class exists, so we simply get it using the $$eval method on the page.

This method takes two arguments:

1. Selector
2. Callback function with the element(s)

const allImages = await page.$$eval('div.item-aux-container img[src]', (imgs) => {});

We will map over the images in the callback function, and we'll return only the URL of the image from getting the src attribute. And this is how we do it.

We check if the src attribute starts with http and ends with jpeg and we return that if it does.

const allImages = await page.$$eval('div.item-aux-container img[src]', imgs =>
  imgs.map(img => {
    if (
      img.getAttribute('src').startsWith('http') &&
      img.getAttribute('src').endsWith('jpeg')
    )
      return img.getAttribute('src');
  })
);

Unfortunately, that also returns to us null if that's not the case, so we filter out the nulls using the .filter() method.

const imgs = allImages.filter(img => img !== null);

Once all that work is done, we close the browser and return the array of images, this is how the whole function looks like:

async function getAllMemes() {
  const URL = 'https://www.memedroid.com/memes/tag/programming';

  const browser = await puppeteer.launch({ headless: true });
  const page = await browser.newPage();

  await page.goto(URL);

  const allImages = await page.$$eval('div.item-aux-container img[src]', imgs =>
    imgs.map(img => {
      if (
        img.getAttribute('src').startsWith('http') &&
        img.getAttribute('src').endsWith('jpeg')
      )
        return img.getAttribute('src');
    })
  );

  const imgs = allImages.filter(img => img !== null);

  // NEW LINES
  await browser.close();
  return imgs;
}

Using Fastify to send the random meme

Finally, we will pick a random meme and send it to the user using this code

fastify.get('/', async (request, reply) => {
  const memes = await getAllMemes();
  const randomNumber = Math.round(Math.random() * memes.length);
  reply.send({ memeUrl: memes[randomNumber] });
});

Now, whenever the user visits localhost:5555, they get this:

We have our app done! Thanks for reading! You can find all the code here.

I hope you liked it! Comment down your thoughts! There is always room for improvement so let me know your suggestions on this project!

Connect with me on my YouTube channel and my Twitter 😉

Until next time, keeping awesome ✌️

In today's article, we will see how we can make a PWA out of a Next.js app! And it is going to be very exciting as the biggest feature will be offline support with a very little configuration!

📃 INDEX

1. Project code
2. next-pwa package
3. Getting assets
4. Web manifest file
5. PWA Configuration
6. Offline fallback page

Before we move on, I would like to recommend checking my video on YouTube about this if you are comfortable following along with a video. Make sure to leave a comment about any suggestions, or doubts you have 🙂.

1. Project code

For this demo, I already have a simple project setup that we can use to start or test.

You can download the source or clone the repo: GitHub Link

This repository has 2 branches, the main one contains the starter code and the pwa branch contains the complete code.

2. next-pwa package

The next step is to install the NPM package we need for this. It's a great package that does everything for you automatically.

npm i next-pwa
# or yarn add next-pwa

3. Getting assets

If you are familiar with making a PWA, you already know that we need different sizes of logos for our app to function properly on different devices. I found a very good website to generate these images in different sizes.

You can simply go to Icongen and select the types you want. For the sake of this tutorial, I am generating these images. And upload vercel.svg or your existing logo.

After getting all the images, add them to a new folder named icons in the project's public folder.

Rename all the file names with icon-{size}x{size}.png. For eg, icon-192x192.png

Additionally, add a maskable.png which you can either generate online or for the sake of this tutorial, I used the same 192x192 sized icon for the maskable icon.

4. Web manifest file

Now we need to create a file for the metadata about the app. Create a file named manifest.json in the public folder and copy the contents of the file from here.

You can fill up the contents as per your project, for this project, this is the data we are using

{
  "short_name": "Next PWA",
  "name": "Next PWA Tutorial",
  "description": "...",
  "icons": [
    {
      "src": "/icons/icon-36x36.png",
      "type": "image/png",
      "sizes": "36x36"
    },
    {
      "src": "/icons/icon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "/icons/icon-72x72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "/icons/icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/icons/icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/icons/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "/icons/maskable.png",
      "type": "image/png",
      "sizes": "192x192",
      "purpose": "maskable"
    }
  ],
  "start_url": "/",
  "background_color": "#FFFFFF",
  "display": "standalone",
  "scope": "/",
  "theme_color": "#000000"
}

Now you need to link the manifest.json file in your Next.js <Head> component in all the pages.

<Head>
  <link rel='manifest' href='/manifest.json' />
</Head>

5. PWA Configuration

In the first step, we installed the next-pwa NPM package which we will be using now. In your project's root, create a next.config.js or edit if it already exists.

We import the withPWA function from the package and wrap the export in that function, here we can add a pwa object which we will configure like so 👇

The dest property is the destination folder and we added a disable property which disables creating the service workers while we are in development.

const withPWA = require('next-pwa');

module.exports = withPWA({
  pwa: {
    dest: 'public',
    disable: process.env.NODE_ENV === 'development',
  },
  reactStrictMode: true,
});

6. Offline fallback page

Additionally, we can also add a page to show if the user is offline, this enhances the user experience and makes it work like an actual app.

Just add a page named _offline.js in your pages folder, and next-pwa will automatically show that page if the user is offline. But the condition is that the user has to visit the website so that the offline page is cached whenever the user first visits the website.

Here are some examples of offline pages:

👆 Easy Pastes

👆 YouTube

👆 Google Meet

A final touch would be to add these files to your .gitignore file to not commit these service worker files created by next-pwa

# PWA files
**/public/precache.*.*.js
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/fallback-*.js
**/public/precache.*.*.js.map
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
**/public/fallback-*.js

And we successfully completed the process, and now your Next.js app can be used offline, is installable as an app, and is also a PWA.

I hope it helped you make your app a PWA, let me know your experience in the comments and share it with people so that they can do it easily too.

What is it and how I found it

So Jotai is a state management library for React, and it is just so easy to work with when compared to Redux, Flux, etc.

I found this interesting package looking at Ashik Chapagain's Hashnode + Clerk hackathon submission. Read the article.

I saw that he used Jotai for React state management and I had heard about it before that it was very easy to use it.

I finally looked at it and at the first glimpse of the code 🔥. I felt it's the best!

The problem

Managing state in React is hard. Trust me, when you build a large application you will get confused in some way passing props from component to component. This is known as prop drilling which is fine in small apps but in medium and large scale apps, it's hard.

Context API is a way to manage state which I cover in this article. But this library feels the best.

Source: https://www.geeksforgeeks.org/what-is-prop-drilling-and-how-to-avoid-it/

The code

So let's now jump to the most exciting part which is how should it be used in our React app! The first step is

Installing jotai via npm or yarn

npm i jotai
# or yarn add jotai

After that is installed, in your React app, you can create an atoms.js file. And simply create and export an atom in that file with a default value. For eg., lengthAtom and breadthAtom are atoms with the value of 4 and 2 respectively.

An atom is simply a holder for our state which we can use then to get access to our state.

import { atom } from 'jotai';

export const lengthAtom = atom(4);
export const breadthAtom = atom(2);

Then simply import the useAtom hook and the atoms from the file we created and pass those in useAtom in our component. And we get back the same thing we get back from useState which is the best part of this library.

import React from 'react';
import { useAtom } from 'jotai';
import { lengthAtom, breadthAtom } from './atoms';

function App() {
  const [length, setLength] = useAtom(lengthAtom);
  const [breadth, setBreadth] = useAtom(breadthAtom);

  return (
    <div>
      <input
        type='number'
        placeholder='Enter length'
        value={length}
        onChange={e => setLength(parseFloat(e.target.value))}
      />
      <input
        type='number'
        placeholder='Enter breadth'
        value={breadth}
        onChange={e => setBreadth(parseFloat(e.target.value))}
      />
    </div>
  );
}

export default App;

There is also a way to create computed properties like in Vue. We create an atom for that as well, and by using the get() method, we get the value of an atom and we use the same hook to get the state back.

In this example, I am creating two atoms that depend on the lengthAtom and breadthAtom. When the state changes, the new atoms will change too.

import { atom } from 'jotai';

export const lengthAtom = atom(4);
export const breadthAtom = atom(2);

export const perimeterAtom = atom(
  get => 2 * (get(lengthAtom) + get(breadthAtom))
);
export const areaAtom = atom(get => get(lengthAtom) * get(breadthAtom));

And then in the component, this is how we use it. We render out whatever the perimeter and the area is depending on the values

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom, isCountEvenAtom } from './atoms'

function App() {
  const [count, setCount] = useAtom(countAtom);
  const [isCountEven] = useAtom(isCountEvenAtom)

  return (
    <div>
      <input
        type='number'
        placeholder='Enter length'
        value={length}
        onChange={e => setLength(e.target.value)}
      />
      <input
        type='number'
        placeholder='Enter breadth'
        value={breadth}
        onChange={e => setBreadth(e.target.value)}
      />
      <p>Perimeter of the rectangle is {perimeter} cm</p>
      <p>
        Area of the rectangle is {area} cm<sup>2</sup>
      </p>
    </div>
  );
}

export default App;

Here's how it works like:

Read more on their docs, which is fantastic!

Let me know what do you think about jotai as the best state management library for React.

Until then, peace out ✌️

Easy Pastes is an app where users can easily paste some code they want to share with someone with syntax highlight and even if they want to make it public, they can do so to show other people.

It is the easiest and fastest way to share code pastes and most of the programming languages are supported. You can request to add a language on the GitHub repository.

This app is fully open-source for learners to learn and to encourage people to contribute to this project to make it better.

The app is live on easypastes.tk and open sourced on GitHub

Here is how you can use the app

Demo GIF

👥 The team

Sunrit Jana and I have been working on this app for the last fifteen days and it has been a great experience working with him!

🎨 How is the app built?

Easy Pastes is using the latest and greatest technologies! The tech stack for the app is

• Next.js with TypeScript
• Chakra UI
• Supabase
• Clerk

We are using Next.js for the whole app, Chakra UI for the user interface, Supabase for the database, and Clerk.dev for authentication.

🧐 Exploring the app

We'll be going into detail on how to use this app in this section. On the main page, you will be having the functionality to create a paste.

Sign in and sign up

The authentication system is powered by Clerk.dev which is awesome!

Before creating a paste, it's recommended to sign in because your pastes are stored for future use. And you can edit and delete your pastes while you are signed in. When you create a paste while signed in, it will be your paste. You can go to the My Pastes page to see what pastes you have created.

And Easy Pastes also has multi-account system so you can sign in with multiple accounts.

ℹ️ Public pastes are shown on the home page. Private pastes are private and no one can view them except the author Unlisted pastes can be viewed by anyone from the link but are not shown on the home page

Pick a language of your choice (default: none)

Give paste a title (optional)

Change visibility and give a custom URL (optional)

ℹ️ Making a custom URL and making paste private is only available when you are signed in.

If the custom URL is not specified, it'll be a randomly generated id, and the pastes are public by default.

Paste the code and click the create button

Share, copy, edit, or delete the paste

You will be redirected to your created paste which you can then share the link to someone, copy the code, delete and edit the paste.

🧱 PWA (new)

With the latest update, Easy Pastes is also a PWA and it can be installed and used as an app.

As a PWA, it also has shortcuts to directly open the My Pastes page

🔑🔒 Password protection (new)

We're also now focused on security. We have added a feature consisting of protecting your pastes and storing the secure password hash in DB. No one other than you, or people can access it! This is one of the features we're really proud of!

Set a password using this button

And then visit the page where you would need to enter the password to view it

👽️ Your profile

You can change your account settings by clicking your account button on the top right and settings. But in this case, you also get the functionality to view your own pastes.

When you click on the My Pastes link in the navbar, you will see your own pastes.

You can achieve this behaviour by simply setting the username in user settings else it will be the user id.

On this page, you are able to view pastes you have created and you can even filter them by All, Public, Unlisted, and Private.

If the page is viewed by someone else, they will only be able to see the public pastes you have created.

💫 Conclusion

And that is how Easy Pastes works! Thanks to Hashnode for organizing this hackathon. It helped me so much to build my first full-stack web application.

I want to thank the folks over at Discord and Twitter who helped me to improve this app by giving their valuable feedbacks.

The Clerk team on Discord was very helpful to us. They were very helpful whenever we had any queries regarding Clerk.

• Tapas Adhikary
• Savio Martin
• Avneesh Agarwal
• Matej Bošnjak
• Ishrar G

Sorry if I missed someone :)

Feel free to contribute to the project on the GitHub repository and give your suggestions and how the app works in the comments.

📈 Updates

27-07-2021:

• With this commit , swears and bad words are filtered from the Title and Custom URL

28-07-2021

• Made Easy Pastes a PWA
• Custom 404 page

29-07-2021

• We're here with another amazing update! Added password protection
• Fixed the heading and footers.

02-08-2021

• Viewing paste in raw mode feature

So Next.js has been very popular nowadays and I am completely switching from the good old React to the Next.js because it's of course better.

With the awesome routing system in Next.js, there are a ton of advantages like events and all that which are very useful when you dig into them.

Today, using the router in Next.js, I'll show you how you can create a page loader that shows a progress bar while we are navigating to a different page. It'll enhance the user experience on your site.

And the process is absolutely simple. Just a few lines of code as always. We'll use an NPM package called nprogress

✨ Result

1. Create a Next.js app

npx create-next-app nprogress-demo

2. Install nprogress

You can use npm, yarn or pnpm to do this, just install nprogress

npm i nprogress

# If you're using TypeScript, install this too
npm i -D @types/nprogress

3. Get the nprogress.css file

The nprogress package ships with a CSS file which it needs but you have to import it in the _app.js file, so you can create a nprogress.css file in your styles folder and copy and paste styles from this CDN

After saving the file, you can edit anything you want in that one, I made some changes which fit my needs are as follows:

I changed every background colour from #29d to #0070f3 and you can change it to any other colour you want

/* I made these changes in nprogress.css */
#nprogress .bar {
  height: 3px;
}
#nprogress .spinner-icon {
  width: 25px;
  height: 25px;
  border: solid 3px transparent;
}

And finally, you can import the CSS file in the _app.js file

// _app.js
import "../styles/nprogress.css";

4. Add a new page (for the demo)

I simply created a second.js file in the pages folder with these contents. It uses getServerSideProps where we fetch some data on request of the page, so that we get a slight delay while navigating

// second.js
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import styles from "../styles/Home.module.css";

export default function SecondPage({ data }) {
  return (
    <div className={styles.container}>
      <Head>
        <title>Second page</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>Second page</h1>
        <p className={styles.description}>
          This is the second page. Go to{" "}
          <Link href="/">
            <a>Home</a>
          </Link>
        </p>

        <div className={styles.grid}>
          {data.map(user => (
            <div className={styles.card} key={user.id}>
              <h2>{user.name} &rarr;</h2>
              <p>Works in {user.company.name}</p>
            </div>
          ))}
        </div>
      </main>
    </div>
  );
}

export const getServerSideProps = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await res.json();
  return {
    props: {
      data: data.slice(0, 4),
    },
  };
};

5. Use Router events to show the progress bar

To show the progress bar, we use the Next.js Router's events. You can do all the logic inside the _app.js file.

// _app.js
import Router from "next/router";
import nProgress from "nprogress";
import "../styles/globals.css";
import "../styles/nprogress.css";

Router.events.on("routeChangeStart", nProgress.start);
Router.events.on("routeChangeError", nProgress.done);
Router.events.on("routeChangeComplete", nProgress.done);

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

When the routeChangeStart event fires, we start the progress bar by using nProgress.start function.

Don't invoke the function like nProgress.start(), pass it without the parenthesis because there should be a callback function in the events.

And when the other two events routeChangeError, routeChangeComplete occur, we simply pass in nProgress.done which completes the progress bar.

And that's it 🥳 !

In these 5 simple steps, we managed to add a progress bar while navigating to different pages in Next.js. Let me know all your questions in the comments and share this knowledge to others to help them.

Finally, you can check me out on YouTube, Twitter, etc. Thanks for reading!

This is a very amazing way to use the powers of Visual Studio Code in your JavaScript files to quickly spot errors.

You might know about TypeScript . It's a wonderful superset of JavaScript which gives JS the power of types and helps in debugging right inside your IDE (especially VS Code). This simple trick will even help you if you are not a fan of types and TypeScript.

Most of the times, there are very small and silly bugs in our JavaScript code which we can't catch in the development process and can cause high impact in production. A simple example is this 👇

In this example above, we are using Vanilla JavaScript where we cannot spot the error which is on line 7. We could've used TypeScript here, but if you want to use JavaScript, you can easily spot errors by adding only a comment on the top.

As you can see the warning we got by hovering over the parameter in the function is telling us that this parameter is of any type which is not good at all. So how can you expect only a string into the function without TypeScript?

The easiest way to do it is to add the string argument in the function call and then do this 👇.

Arrow function

Normal function

The 2nd way looks neater to me.

Besides, you can also spot silly bugs which are very bad. Some are listed below:

Without // @ts-check

With // @ts-check

TIP: To enable // @ts-check for every .js file, you can simply enable this setting in VS Code.

And to ignore checking in any file, just use // @ts-nocheck on the top of the file.

For more information about those types for parameters, you can refer to the JSDoc Documentation.

In this post, we'll see how you can recreate the hover card by Twitter using HTML and CSS, so let's get started.

This hover card will appear when you hover over any profile. But in our case, we will just make the over card.

I also have a video on YouTube on this which you might want to check out too.

This is how it will look like in the end.

🧱 HTML

The HTML is very self explanatory and very easy. We create wrappers around and then we create three <div> tags which will contain the content.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Twitter Hovercard</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="card">
        <div class="profile">
          <div class="main-profile"></div>
          <div class="user-bio"></div>
          <div class="user-follows"></div>
        </div>
      </div>
    </div>
  </body>
</html>

1. main-profile div

The main-profile div will basically contain the Profile Picture, Name, Handle and the Follow button. Which will be in the first row. We will then use flexbox to style it.

<div class="main-profile">
  <div class="user-info">
    <img src="./profile.jpg" alt="Profile Pic" />
    <h3>Max Programming</h3>
    <p>@MaxProgramming1</p>
  </div>
  <div class="follow-btn">
    <button>Follow</button>
  </div>
</div>

2. user-bio div

This div will contain the bio of the user, in this case my bio. You can separate it into different lines using the <br /> tag.

<div class="user-bio">
  <p>
    👨‍💻 Programmer, Learner, YTuber, Blogger, and Cricket lover!
    <br />
    😊 15 years old
    <br />
    My name is Usman
    <br />
    ☪ Muslim
    <br />
    Blog: <a href="http://blog.usman-s.me">blog.usman-s.me</a>
    <br />
    YT:
    <a href="http://youtube.com/MaxProgramming">youtube.com/MaxProgramming</a>
  </p>
</div>

3. user-follows div

This is the simplest one of all. You just create two <div> tags inside it with Following and Followers and their numbers.

We use the <b> tags to bolden out the numbers.

<div class="user-follows">
  <div><b>613</b> Following</div>
  <div><b>471</b> Followers</div>
</div>

This is what we get after this table is done. Let's now style it out with the magic of CSS.

🎨 CSS

1. Resets

At the start, we set the margin and padding to 0, and set the box-sizing to border-box. And then we set the font for every element to be sans-serif according to the system.

We style the container to center everything on the page

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

2. The Card

Now to style the card div, we and add shadow, border radius and padding to it.

.card {
  box-shadow: 1px 1px 10px 1px #a1a1a1;
  border-radius: 10px;
  padding: 20px;
}

3. Main Profile

Now as the main-profile contains the main details, we'll position it better using Flexbox.

.main-profile {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

And then we will add some stylings to make the profile picture smaller, increase the size for the name, and change the color of the handle.

.user-info img {
  width: 100px;
  border-radius: 50%;
}

.user-info h3 {
  font-size: 1.3rem;
}

.user-info p {
  color: #5b7083;
}

This is the progress so far

Let's style the Follow button now.

Here, we set the border and the text to the twitter blue color, the background is set to the same color but transparent. We make the text bold, and add a hover effect with a transition.

.follow-btn button {
  font-size: 1.5rem;
  border: 3px solid #1da1f2;
  border-radius: 25px;
  background-color: rgba(29, 161, 242, 0);
  padding: 8px 20px;
  margin: 5px;
  font-weight: bold;
  color: #1da1f2;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease-in-out;
}

.follow-btn button:hover {
  background-color: rgba(29, 161, 242, 0.2);
}

Now we got the perfect button with the hover effect as well. Which change the background color's opacity.

4. User bio

The bio is fairly easy. We just change the color of the text, add some margin and change the color of the <a> tags like the styles of Twitter.

.user-bio {
  color: #0f1419;
  margin-bottom: 10px;
}

.user-bio a {
  color: #1da1f2;
  text-decoration: none;
}

.user-bio a:hover {
  text-decoration: underline;
}

5. User Follows

This is the easiest part. We use flexbox, we add some margins to the <div>. And we change the color of the text.

.user-follows {
  display: flex;
  color: #5b7083;
}

.user-follows div {
  margin-right: 10px;
}

.user-follows b {
  color: black;
}

And that is how you recreate Twitter's hover card using HTML and CSS. I hope you like this blog post. If you do, please leave a like comment down below about your experience.

Here's the source code.

Thanks for reading!

Create React App or react-scripts is a great tool to scaffold out our React Apps. And one of the best parts of it was that we got a readymade serviceWorker.js file with it which would help us make the React app offline so easily.

But with the react-scripts version 4, whenever we use the command npx create-react-app app-name, we don't get the service worker file.

But no worries, we can easily generate a React App with the service worker file again, but we have to use a template. So instead of just running create-react-app, we should add a flag to it and this is how the new command looks like

Creating a new app

# JavaScript
npx create-react-app app-name --template cra-template-pwa

# TypeScript
npx create-react-app app-name --template cra-template-pwa-typescript

And that will generate two service worker files, one of them will be for the registration, and the other one the service worker itself.

In the index.js file, you'll get the import and the .unregister() method as before

You can simply change the .unregister() to .register() to register the service worker and now, when the app is built, it'll be capable to run offline. You'll see a button on the right side of your address bar if you are using Chrome or Edge or any other Chromium based browser.

On installing, it'll cache your app and it'll be able to run, even if you are online.

Converting an existing app

To convert an existing app, you can simply copy the code, create the required files and paste it from a gist that I created.

Also consider checking out the video on this topic if you want.

I hope this post helped you, make sure to 💙 like it and share it to others.

💬 Let me know your React apps which are PWAs in the comments.

Thanks for reading! ✌