Ashutosh K Singh - freeCodeCamp.org

How to Build a Job Description Generator with NextJS and ChatGPT

Ashutosh K Singh — Wed, 18 Jan 2023 23:50:19 +0000

In this tutorial, we will discuss how to build a Job Description Generator with Next.js, and ChatGPT, a powerful language generation model developed by OpenAI.

We will also use TailwindCSS, a utility-first CSS framework, to style our Next.js app.

Check out the GitHub Repo here if you want to jump right into the code.

And here's a link to the deployed version: https://ai-job-description.vercel.app/.

Now let's get started.

Prerequisites

Before we get started, you should have:

Knowledge of HTML, CSS, and JavaScript.
Basic understanding of React and Next.js.
Node and NPM are installed on your local dev machine.
Any code editor of your choice. (example VSCode)

If you feel like your progress could be improved because you need to learn more about these subjects, check out https://www.freecodecamp.org/learn. The awesome modules there will get you started in no time.

How to Setup and Install Next.js

We will use Create Next App to initialize a Next.js project quickly. In your project's root directory, run the following commands in the terminal:

npx create-next-app@latest ai-job-description --src-dir
cd ai-job-description
npm run dev

Select No when prompted for extra configs.

✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
? Would you like to use experimental `app/` directory with this project? › No / ✔ Would you like to use experimental `app/` directory with this project? … No

You can run the following command if you want to create a TypeScript project:

npx create-next-app@latest ai-job-description --typescript --src-dir
cd ai-job-description
npm run dev

The last command, npm run dev, will start the development server on your system's port 3000.

Navigate to http://localhost:3000 in the browser. Here is what your app will look like:

Next.js 13

You can now close the development server. The next step is clean the sample code generated by Create Next App and configure the project to use TailwindCSS.

Run the following commands to install TailwindCSS to the project.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

The last command will create a tailwind.config.js file in your project’s root directory.

Update the tailwind.config.js file like this to include the paths to our files:


module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Delete the src/styles/Home.module.css file.
Update the src/styles/globals.css like this.

@tailwind base;
@tailwind components;
@tailwind utilities;

Modify src/pages/index.js like this:

// src/pages/index.js
import Head from "next/head";
import { Inter } from "@next/font/google";

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

export default function Home() {
  return (
    <>
      <Head>
        <title>AI Job Description Generatortitle>
        <meta name="description" content="AI Job Description Generator" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      Head>
      <main className={"bg-white min-h-screen "}>
        <div className="flex flex-col items-center justify-center px-4 py-2">
          <h1 className="text-4xl md:text-6xl font-bold">
            AI Job Description Generator
            <span className="text-4xl md:text-6xl font-bold text-blue-600">
              .
            span>
          h1>
          <p className="mt-3 text-2xl">
            Create Beautiful
            <span className="text-2xl font-bold text-blue-600">
              {" "}
              Job Descriptions{" "}
            span>
            in Seconds
          p>
        div>
      main>
    
  );
}

We added a simple heading and subtitle to our app in the above code. Restart the dev server by running the npm run dev command and again head over to http://localhost:3000/ in the browser. Your app will look something like this:

AI Job Description Generator

How to Generate an OpenAI API Key

In this section, we will discuss how you can generate an OpenAI API Key. Head over to https://beta.openai.com/signup in the browser and create an account on OpenAI if you still need to do so.

https://beta.openai.com/signup

After creating an account, navigate to https://beta.openai.com/account/api-keys and click on + Create new secret key.

This will generate a new API Key – copy this key. Run the following command to create a .env file:

touch .env

Inside this .env file, create a new environment variable named OPENAI_API_KEY and paste the API key there.

OPENAI_API_KEY = <REPLACE_WITH_YOUR_KEY>

Next.js has built-in support for loading environment variables from .env into process.env. You can read more about it here.

How to Build the UI of the App

To generate the Job Descriptions, we need some basic details about the job itself. In this section, we will create the form to take user input.

We will ask the user about Job Title, Industry, Tone, and Keywords to include in the Job Description. You can modify the fields to create a custom Job Description Generator.

For example, if you want to build this for the Tech Industry, you can hardcode that info and remove the corresponding fields.

We will show the result of the ChatGPT API request in a text area and give the user the option to copy the output to their clipboard.

Run the following commands in the root directory to create a file named Dashboard.js in the components folder.

cd src
mkdir components
cd components
touch Dashboard.js

Add the following code to the Dashboard.js file:

import React, { useState } from "react";

export default function Dashboard() {
  const [jobDescription, setJobDescription] = useState("");

  const [jobTitle, setJobTitle] = useState("");
  const [industry, setIndustry] = useState("");
  const [keyWords, setKeyWords] = useState("");
  const [tone, setTone] = useState("");
  const [numWords, setNumWords] = useState("");

  const [isGenerating, setIsGenerating] = useState(false);
  const [isCopied, setIsCopied] = useState(false);

  return (
    <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="grid gap-y-12 md:grid-cols-2 md:gap-x-12 ">
        <div className="">
          <form>
            <div className="flex flex-col">
              <label className="sr-only" htmlFor="jobTitle">
                Job Title
              label>
              <input
                type="text"
                className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
                name="jobTitle"
                placeholder="Job Title"
                id="jobTitle"
                value={jobTitle}
                onChange={(e) => setJobTitle(e.target.value)}
                required
              />
            div>
            <div className="flex flex-col">
              <label htmlFor="industry" className="sr-only">
                Industry
              label>
              <input
                value={industry}
                onChange={(e) => setIndustry(e.target.value)}
                className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
                placeholder="Industry (Optional)"
                type="text"
                name="industry"
                id="industry"
              />
            div>
            <div className="flex flex-col">
              <label htmlFor="keywords" className="sr-only">
                Keywords for AI (Optional)
              label>
              <textarea
                rows={7}
                value={keyWords}
                onChange={(e) => setKeyWords(e.target.value)}
                name="keyWords"
                id="keyWords"
                placeholder="Keywords for AI (Optional)"
                className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
              />
            div>
            <div className="flex flex-col">
              <label className="sr-only" htmlFor="tone">
                Tone
              label>

              <select
                value={tone}
                onChange={(e) => setTone(e.target.value)}
                className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
                name="tone"
                id="tone"
              >
                <option value="default">Select Tone (Optional)option>
                <option value="casual">Casualoption>
                <option value="friendly">Friendlyoption>
                <option value="professional">Professionaloption>
                <option value="formal">Formaloption>
              select>
            div>
            <div className="flex flex-col">
              <label htmlFor="words" className="sr-only">
                Words (Optional)
              label>
              <input
                value={numWords}
                onChange={(e) => setNumWords(e.target.value)}
                type="number"
                className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
                placeholder="Number Of Words - Default 200 (Optional)"
                name="words"
                id="words"
              />
            div>

            <button
              className={`bg-blue-600 w-full hover:bg-blue-700 text-white font-bold mt-6 py-2 px-4 rounded
                ${
                  isGenerating || jobTitle === ""
                    ? "cursor-not-allowed opacity-50"
                    : ""
                }`}
              type="submit"
              disabled={isGenerating || jobTitle === ""}
            >
              {isGenerating ? "Generating..." : "Generate Job Description"}
            button>
          form>
        div>
        <div className="">
          <div className="flex flex-col">
            <label htmlFor="output" className="sr-only">
              Output
            label>
            <textarea
              rows={
                jobDescription === ""
                  ? 7
                  : jobDescription.split("\\n").length + 12
              }
              name="output"
              onChange={(e) => setJobDescription(e.target.value)}
              value={jobDescription}
              disabled={jobDescription === ""}
              id="output"
              placeholder="AI Generated Job Description"
              className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
            />
            <button
              onClick={() => {}}
              className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
              type="submit"
              disabled={jobDescription === ""}
            >
              {isCopied ? "Copied" : "Copy to Clipboard"}
            button>
          div>
        div>
      div>
    div>
  );
}

Here's what we are doing:

First, we start by importing the useState hook from react. Hooks are functions that allow you to use React features, such as defining state, without having to write a class.

The useState lets you track the state, that is data or properties, in a functional component. Here we are using the useState hook to track the value of all the input fields.

We defined the following states:

  const [jobDescription, setJobDescription] = useState("");

  const [jobTitle, setJobTitle] = useState("");
  const [industry, setIndustry] = useState("");
  const [keyWords, setKeyWords] = useState("");
  const [tone, setTone] = useState("");
  const [numWords, setNumWords] = useState("");

  const [isGenerating, setIsGenerating] = useState(false);
  const [isCopied, setIsCopied] = useState(false);

The jobDescription state is for the job description sent by the ChatGPT API. The jobTitle, industry, keyWords, tone and numWords are the state for all the form fields. The isGenerating is used to track whether the request is being processed after the user hits the Generate button. The isCopied state follows whether the user has copied the output Job Description successfully.

We use TailwindCSS to create a grid of two columns. The first column will have the input form, and the other column will render the output Job Description.

"grid gap-y-12 md:grid-cols-2 md:gap-x-12">
...

We create a form element in the first column and define its input fields.


  <div className="flex flex-col">
    <label className="sr-only" htmlFor="jobTitle">
      Job Title
    label>
    <input
      type="text"
      className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
      name="jobTitle"
      placeholder="Job Title"
      id="jobTitle"
      value={jobTitle}
      onChange={(e) => setJobTitle(e.target.value)}
      required
    />
  div>
...

The jobTitle field is the only required field in the form and is needed to generate the Job Description. We set the value of this input field to jobTitle state and pass the setJobTitle() function to the onChange() event which will update the jobTitle whenever the user types inside the input field. Now, the state, jobTitle state and the input field are interlinked.

We use the same format to create other input fields for Industry and Number of Words.

For the keywords, we use a textarea for the user to enter any relevant info or keywords for the Job Description.

"flex flex-col">
  <label htmlFor="keywords" className="sr-only">
    Keywords for AI (Optional)
  label>
  <textarea
    rows={7}
    value={keyWords}
    onChange={(e) => setKeyWords(e.target.value)}
    name="keyWords"
    id="keyWords"
    placeholder="Keywords for AI (Optional)"
    className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
  />

Here is how this textarea fields looks:

We also create a select field for the tone of the Job Description. You can customize the options according to your needs.

This app has four tones – Casual, Friendly, Professional, and Formal. Like the input field above for jobTitle, we use the value and onChange event to interlink the select field to the tone state.

"flex flex-col">
  <label className="sr-only" htmlFor="tone">
    Tone
  label>

  <select
    value={tone}
    onChange={(e) => setTone(e.target.value)}
    className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
    name="tone"
    id="tone"
  >
    <option value="default">Select Tone (Optional)option>
    <option value="casual">Casualoption>
    <option value="friendly">Friendlyoption>
    <option value="professional">Professionaloption>
    <option value="formal">Formaloption>
  select>

The final field in the form is a button to trigger the generation of the Job Description.

We don’t want users to click on the Generate button without any Job Title and create empty requests. So in the above button, we use the isGenerating and jobTitle state to disable the button when the jobTitle is empty. We also change the button's text to Generating when the API request is in process.

We add a textarea field to display the output Job Description in the second column. This textarea is disabled while the jobDescription state is empty.

"flex flex-col">
  <label htmlFor="output" className="sr-only">
    Output
  label>
  <textarea
    rows={jobDescription === "" ? 7 : jobDescription.split("\\n").length + 12}
    name="output"
    onChange={(e) => setJobDescription(e.target.value)}
    value={jobDescription}
    disabled={jobDescription === ""}
    id="output"
    placeholder="AI Generated Job Description"
    className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
  />
  ...

We also add a copy button to the second column so users can easily copy the output Job Description. This button is also disabled while the jobDescription state is empty.

Here is how the second column looks:

Next, we update the index.js file like this to import and add the Dashboard component:

import Head from "next/head";
import { Inter } from "@next/font/google";
import Dashboard from "@/components/Dashboard";

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

export default function Home() {
  return (
    <>
      <Head>
        <title>AI Job Description Generatortitle>
        <meta name="description" content="AI Job Description Generator" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      Head>
      <main className={"bg-white min-h-screen "}>
        <div className="flex flex-col items-center justify-center px-4 py-2">
          <h1 className="text-4xl md:text-6xl font-bold">
            AI Job Description Generator
            <span className="text-4xl md:text-6xl font-bold text-blue-600">
              .
            span>
          h1>
          <p className="mt-3 text-2xl">
            Create Beautiful
            <span className="text-2xl font-bold text-blue-600">
              {" "}
              Job Descriptions{" "}
            span>
            in Seconds
          p>
        div>
        <Dashboard />
      main>
    
  );
}

Your app will look something like this:

You can add values to the empty fields, but it's not functional yet. We will add the logic to fetch and display the Job Description in the next section.

How to Fetch Data from ChatGPT

In this section, we will discuss how you can create a Next.js API route that sends a request to ChatGPT to generate the Job Description from user input data.

Next.js provides an easy solution to build your API without needing another project, for example, a Node-Express project.

From the NextJS Docs:

Files in the folder pages/api are mapped to the /api/ route and treated as API endpoints rather than pages. These files are server-side only and do not add to the size of the client-side bundle.*

First, run the following command in the project's root to create an API route.

cd src/pages/api
touch returnJobDescription.js

Then add the following code to the returnJobDescription.js file:

const generateDescription = async ({
  jobTitle,
  industry,
  keyWords,
  tone,
  numWords,
}) => {
  try {
    const response = await fetch(
      "https://api.openai.com/v1/engines/text-davinci-003/completions",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
        },
        body: JSON.stringify({
          prompt: `Write a job description for a  ${jobTitle} role 
          ${industry ? `in the ${industry} industry` : ""} that is around ${
            numWords || 200
          } words in a ${tone || "neutral"} tone. ${
            keyWords ? `Incorporate the following keywords: ${keyWords}.` : ""
          }. The job position should be described in a way that is SEO friendly, highlighting its unique features and benefits.`,
          max_tokens: 100,
          temperature: 0.5,
        }),
      }
    );
    const data = await response.json();

    return data.choices[0].text;
  } catch (err) {
    console.error(err);
  }
};

export default async function handler(req, res) {
  const { jobTitle, industry, keyWords, tone, numWords } = req.body;

  const jobDescription = await generateDescription({
    jobTitle,
    industry,
    keyWords,
    tone,
    numWords,
  });

  res.status(200).json({
    jobDescription,
  });
}

Here’s what we are doing:

First, we create an async function named generateJobDescription that takes jobTitle, industry, tone, numWords and keywords as arguments.

const generateDescription = async ({
  jobTitle,
  industry,
  keyWords,
  tone,
  numWords,
}) => {
...
}

Then we then use fetch API inside a try/catch block to create a POST request to the OpenAI ChatGPT endpoint. You can read more about fetch API here. You can also use the OpenAI NodeJS package instead of the fetch API.

The requests are sent to the following endpoint: https://api.openai.com/v1/engines/text-davinci-003/completions

Here the text-davinci-003 is the model for the ChatGPT, and completions is the task we want to perform. You can read about other OpenAI models here.

  try {
    const response = await fetch(
      "https://api.openai.com/v1/engines/text-davinci-003/completions",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
        },
        body: JSON.stringify({
          prompt: `Write a job description for a  ${jobTitle} role 
          ${industry ? `in the ${industry} industry` : ""} that is around ${
            numWords || 200
          } words in a ${tone || "neutral"} tone. ${
            keyWords ? `Incorporate the following keywords: ${keyWords}.` : ""
          }. The job position should be described in a way that is SEO friendly, highlighting its unique features and benefits.`,
          max_tokens: 100,
          temperature: 0.5,
        }),
      }
    );

...
}
catch (err) {
    console.error(err);
  }

The OpenAI API uses the API key we generated previously to authenticate the requests. We add it to the Authorization HTTP header like this:

headers: {
 Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
},

In the body of the POST request, we add the user input values to a pre-configured prompt for the Job Description. This prompt can be a string, array of strings, array of tokens, or array of token arrays. You can customize this prompt accordingly.

We have added a default value for numWords and tone in the prompt, that is 200 and neutral, respectively. You can read more about this here.

body: JSON.stringify({
    prompt: `Write a job description for a  ${jobTitle} role 
          ${industry ? `in the ${industry} industry` : ""} that is around ${
        numWords || 200
    } words in a ${tone || "neutral"} tone. ${
        keyWords ? `Incorporate the following keywords: ${keyWords}.` : ""
    }. The job position should be described in a way that is SEO friendly, highlighting its unique features and benefits.`,
    max_tokens: 100,
    temperature: 0.5,
})

Tokens are common sequences of characters found in the text. The max_tokens is the maximum token used to generate the Job Description. You can read more about tokens here.

The temperature specifies the sampling temperature to use. Higher values means the model will take more risks. For example, 0.9 will be best for more creative applications, and 0 (argmax sampling) for the ones with a well-defined answer.

Finally, we parse the response stream from OpenAI API to JSON format and return it from the function. You can read more about the json() method here.

const data = await response.json();
return data.choices[0].text;

This generateDescription function is used inside the NextJS API route handler, and the output from OpenAI API is returned from the API route.

export default async function handler(req, res) {
  const { jobTitle, industry, keyWords, tone, numWords } = req.body;

  const jobDescription = await generateDescription({
    jobTitle,
    industry,
    keyWords,
    tone,
    numWords,
  });

  res.status(200).json({
    jobDescription,
  });
}

How to Integrate the NextJS API Route

We have created the UI and the API route. Now its time to bring them together and complete our app. In this section, we will integrate our frontend and backend together.

First, create a function named handleSubmit in Dashboard.js file right below where you defined the states.

const handleSubmit = async (e) => {
    e.preventDefault();
    setIsGenerating(true);
    const res = await fetch("/api/returnJobDescription", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        jobTitle,
        industry,
        keyWords,
        tone,
        numWords,
      }),
    });
    setIsGenerating(false);
    const data = await res.json();
    setJobDescription(data.jobDescription.trim());
  };

In the above function, we first prevent the page from reloading using e.preventDefault() when the form is submitted. We then update the isGenerating state to true using setIsGenerating(true).

We again use the fetch API to send a POST request to our NextJS API route /api/returnJobDescription with the user input values in the request's body.

body: JSON.stringify({
    jobTitle,
    industry,
    keyWords,
    tone,
    numWords,
})

After the request, we set the isGenerating state back to false. Then we convert the response to JSON format and set it to the jobDescription state.

setIsGenerating(false);
const data = await res.json();
setJobDescription(data.jobDescription.trim());

Next, update the form with the onSubmit event and pass the handleSubmit() function to it

(e) => handleSubmit(e)}>
...

Finally, we create the handleCopy function to copy the jobDescription state to the clipboard.

const handleCopy = () => {
    navigator.clipboard.writeText(jobDescription);
    setIsCopied(true);
  };

Update the Copy to Clipboard like this:

Here is the complete code for the Dashboard.js file:

import React, { useState } from "react";

export default function Dashboard() {
  const [jobDescription, setJobDescription] = useState("");

  const [jobTitle, setJobTitle] = useState("");
  const [industry, setIndustry] = useState("");
  const [keyWords, setKeyWords] = useState("");
  const [tone, setTone] = useState("");
  const [numWords, setNumWords] = useState("");

  const [isGenerating, setIsGenerating] = useState(false);
  const [isCopied, setIsCopied] = useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText(jobDescription);
    setIsCopied(true);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsGenerating(true);
    const res = await fetch("/api/returnJobDescription", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        jobTitle,
        industry,
        keyWords,
        tone,
        numWords,
      }),
    });
    setIsGenerating(false);
    const data = await res.json();
    setJobDescription(data.jobDescription.trim());
  };

  return (
    <div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="grid gap-y-12 md:grid-cols-2 md:gap-x-12 ">
        <div className="">
          <form onSubmit={(e) => handleSubmit(e)}>
            <div className="flex flex-col">
              <label className="sr-only" htmlFor="jobTitle">
                Job Title
              label>
              <input
                type="text"
                className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
                name="jobTitle"
                placeholder="Job Title"
                id="jobTitle"
                value={jobTitle}
                onChange={(e) => setJobTitle(e.target.value)}
                required
              />
            div>
            <div className="flex flex-col">
              <label htmlFor="industry" className="sr-only">
                Industry
              label>
              <input
                value={industry}
                onChange={(e) => setIndustry(e.target.value)}
                className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
                placeholder="Industry (Optional)"
                type="text"
                name="industry"
                id="industry"
              />
            div>
            <div className="flex flex-col">
              <label htmlFor="keywords" className="sr-only">
                Keywords for AI (Optional)
              label>
              <textarea
                rows={7}
                value={keyWords}
                onChange={(e) => setKeyWords(e.target.value)}
                name="keyWords"
                id="keyWords"
                placeholder="Keywords for AI (Optional)"
                className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
              />
            div>
            <div className="flex flex-col">
              <label className="sr-only" htmlFor="tone">
                Tone
              label>

              <select
                value={tone}
                onChange={(e) => setTone(e.target.value)}
                className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
                name="tone"
                id="tone"
              >
                <option value="default">Select Tone (Optional)option>
                <option value="casual">Casualoption>
                <option value="friendly">Friendlyoption>
                <option value="professional">Professionaloption>
                <option value="formal">Formaloption>
              select>
            div>
            <div className="flex flex-col">
              <label htmlFor="words" className="sr-only">
                Words (Optional)
              label>
              <input
                value={numWords}
                onChange={(e) => setNumWords(e.target.value)}
                type="number"
                className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
                placeholder="Number Of Words - Default 200 (Optional)"
                name="words"
                id="words"
              />
            div>

            <button
              className={`bg-blue-600 w-full hover:bg-blue-700 text-white font-bold mt-6 py-2 px-4 rounded
                ${
                  isGenerating || jobTitle === ""
                    ? "cursor-not-allowed opacity-50"
                    : ""
                }`}
              type="submit"
              disabled={isGenerating || jobTitle === ""}
            >
              {isGenerating ? "Generating..." : "Generate Job Description"}
            button>
          form>
        div>
        <div className="">
          <div className="flex flex-col">
            <label htmlFor="output" className="sr-only">
              Output
            label>
            <textarea
              rows={
                jobDescription === ""
                  ? 7
                  : jobDescription.split("\n").length + 12
              }
              name="output"
              value={jobDescription}
              onChange={(e) => setJobDescription(e.target.value)}
              disabled={jobDescription === ""}
              id="output"
              placeholder="AI Generated Job Description"
              className="block w-full rounded-md bg-white border border-gray-400 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-4 py-2 placeholder-gray-500 my-2 text-gray-900"
            />
            <button
              onClick={handleCopy}
              className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
              type="submit"
              disabled={jobDescription === ""}
            >
              {isCopied ? "Copied" : "Copy to Clipboard"}
            button>
          div>
        div>
      div>
    div>
  );
}

Here is the above code in action:

You did it! 🎉

Congrats 👏 on building this AI Job Description Generator project.

Conclusion

In this tutorial, we learned how to build a Job Description Generator with Next.js using the OpenAI ChatGPT.

We also discussed how to install TailwindCSS to a NextJS project and how to create Next.js API routes.

Here are some additional resources that can be helpful:

This tutorial is a preview from one of the projects of the free ebook 8 AI Projects. You can get early access to the full 8 project tutorials 8AIProjects.

If you're inspired to add features yourself, please do share and tag me – I'd love to hear about them :)

10 Awesome JavaScript Libraries You Should Try Out

Ashutosh K Singh — Sun, 03 Jan 2021 17:32:00 +0000

JavaScript is one of the most popular languages on the web. Even though it was initially developed just for web pages, it has seen exponential growth in the past two decades.

Now, JavaScript is capable of doing almost anything and works on several platforms and devices including IoT. And with the recent SpaceX Dragon launch, JavaScript is even in space.

One of the reasons for its popularity is the availability of a large number of frameworks and libraries. They make development much easier compared to traditional Vanilla JS development.

There are libraries for almost anything and more are coming out almost every day. But with so many libraries to choose from it becomes difficult to keep a track of each one and how it might be tailored specifically to your needs.

In this article, we will discuss 10 of the most popular JS libraries which you can use to build your next project.

Leaflet

Leaflet

I think Leaflet is the best open source library for adding mobile-friendly interactive maps to your application.

Its small size (39kB) makes it a great alternative to consider over other map libraries. With cross-platform efficiency and a well-documented API, it has everything you need to make you fall in love.

Here is some sample code that creates a Leaflet map:

var map = new L.Map("map", {
    center: new L.LatLng(40.7401, -73.9891),
    zoom: 12,
    layers: new L.TileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png")
});

In Leaflet, we need to provide a tile layer since there isn't one by default. But that also means that can choose from a wide range of layers both free and premium. You can explore various free tile layers here.

Read the Docs or follow the Tutorials to learn more.

fullPage.js

This open-source library helps you create full-screen scrolling websites as you can see in the above GIF. It's easy to use and has many options to customize, so it's no surprise it is used by thousands of developers and has over 30k stars on GitHub.

Here is a Codepen demo that you can play with:

You can even use it with popular frameworks such as:

I came across this library about a year ago and since then it has become one of my favorites. This is one of the few libraries that you can use in almost every project. If you haven't already started using it then just try it, you will not be disappointed.

anime.js

anime.js

One of the best animation libraries out there, Anime.js is flexible and simple to use. It is the perfect tool to help you add some really cool animation to your project.

Anime.js works well with CSS properties, SVG, DOM attributes, and JavaScript Objects and can be easily integrated into your applications.

As a developer it's important to have a good portfolio. The first impression people have of your portfolio helps decide whether they will hire you or not. And what better tool than this library to bring life to your portfolio. It will not only enhance your website but will help showcase actual skills.

Check out this Codepen to learn more:

You can also take a look at all the other cool projects on Codepen or Read the Docs here.

Screenfull.js

screenfull.js

I came across this library while searching for a way to implement a full-screen feature in my project.

If you also want to have a full-screen feature, I would recommend using this library instead of Fullscreen API because of its cross-browser efficiency (although it is built on top of that).

It is so small that you won't even notice it – just about 0.7kB gzipped.

Try the Demo or read the Docs to learn more.

Moment.js

Moment.js

Working with date and time can be a huge pain, especially with API calls, different Time Zones, local languages, and so on. Moment.js can help you solve all those issues whether it is manipulating, validating, parsing, or formatting dates or time.

There are so many cool methods that are really useful for your projects. For example, I used the .fromNow() method in one of my blog projects to show the time the article was published.

const moment = require('moment'); 

relativeTimeOfPost = moment([2019, 07, 13]).fromNow(); 
// a year ago

Although I don't use it very often, I am a fan of its support for internationalization. For example, we can customize the above result using the .locale() method.

// French
moment.locale('fr');
relativeTimeOfPostInFrench = moment([2019, 07, 13]).fromNow(); 
//il y a un an

// Spanish
moment.locale('es');
relativeTimeOfPostInSpanish = moment([2019, 07, 13]).fromNow(); 
//hace un año

Moment.js Homepage

Read the Docs here.

Update September 2020: Moment.js has entered maintenance mode. Read more about it here. You may want to explore alternatives such as Day.js or date-fns.

Hammer.js

Hammer.js is a lightweight JavaScript library that lets you add multi-touch gestures to your Web Apps.

I would recommend this library to add some fun to your components. Here is an example to play with. Just run the pen and tap or click on the grey div.

It can recognize gestures made by touch, mouse and pointerEvents. For jQuery users I would recommend using the jQuery plugin.

$(element).hammer(options).bind("pan", myPanHandler);

Read the Docs here.

Masonry

Masonry

Masonry is a JavaScript grid layout library. It is super awesome and I use it for many of my projects. It can take your simple grid elements and place them based on the available vertical space, sort of like how contractors fit stones or blocks into a wall.

You can use this library to show your projects in a different light. Use it with cards, images, modals, and so on.

Here is a simple example to show you the magic in action. Well, not magic exactly, but how the layout changes when you zoom in on the web page.

And here is the code for the above:

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  itemSelector: '.grid-item',
  columnWidth: 400
});

var msnry = new Masonry( '.grid');

Here is a cool demo on Codepen:

Check out these Projects

D3.js

If you are a data-obsessed developer then this library is for you. I have yet to find a library that manipulates data as efficiently and beautifully as D3. With over 92k stars on GitHub, D3 is the favorite data visualization library of many developers.

I recently used D3 to visualize COVID-19 data with React and the Johns Hopkins CSSE Data Repository on GitHub. It I was a really interesting project, and if you are thinking of doing something similar, I would suggest giving D3.js a try.

slick

slick

Slick is fully responsive, swipe-enabled, infinite looping, and more. As mentioned on the homepage it truly is the last carousel you'll ever need.

I have been using this library for quite a while, and it has saved me so much time. With just a few lines of code, you can add so many features to your carousel.

$('.autoplay').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
});

Autoplay

Check out the demos here.

Popper.js

Popper.js

Popper.js is a lightweight ~3 kB JavaScript library with zero dependencies that provides a reliable and extensible positioning engine you can use to ensure all your popper elements are positioned in the right place.

It may not seem important to spend time configuring popper elements, but these little things are what make you stand out as a developer. And with such small size it doesn't take up much space.

Read the Docs here.

Conclusion

As a developer, having and using the right JavaScript libraries is important. It will make you more productive and will make development much easier and faster. In the end, it is up to you which library to prefer based on your needs.

These are 10 JavaScript libraries that you can try and start using in your projects today. What other cool JavaScript libraries you use? Would you like another article like this? Tweet and let me know.

How to Build an Image Gallery with NextJS using the Pexels API and Chakra UI

Ashutosh K Singh — Mon, 16 Nov 2020 14:55:07 +0000

In this article, we will build an Image Gallery with Next.js using the Pexels API and Chakra UI v1, a modular and accessible component library.

We will also use the Next.js Image component to optimize the images fetched from the Pexels API.

If you want to jump right into the code, check out the GitHub Repo here.

And here's a link to the deployed version: https://next-image-gallery.vercel.app/.

What concepts & topics will we cover in this article?

How to install and use Chakra UI v1 with Next.js
How to fetch data in Next.js from an API
How to use the Next.js Image Component
How to setup Dynamic Routes in Next.js

Prerequisites
How to Setup and Install Next.js
How to Generate the Pexels API Key
How to Add a Heading to the Gallery
How to Fetch Data from the Pexels API
How to Display Photos on the Page
How to Style Images with Chakra UI
How to Add Search Functionality to the Gallery
How to Add Dynamic Routes to Images
Conclusion

Now let's get started.

Prerequisites

Before we get started, you should have:

Knowledge of HTML, CSS, and JavaScript.
Basic knowledge of React and Next.js.
Node and NPM installed on your local dev machine.
Any code editor of your choice.
React Dev Tools (optional)

If you feel like your progress is hindered because you don't know enough about these subjects, check out https://www.freecodecamp.org/learn. The awesome modules there will get you started in no time.

How to Setup and Install Next.js

We will use Create Next App to initialize a Next.js project quickly. In your project's root directory, run the following commands in the terminal.

npx create-next-app next-image-gallery
cd next-image-gallery
npm run dev

The last command, npm run dev, will start the development server on your system's port 3000.

Navigate to http://localhost:3000 in the browser. Here is what your app will look like.

Welcome to Next.js - http://localhost:3000

Run the following command to install Chakra UI:

npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion @chakra-ui/icons

The next step is to clean the sample code generated by create-next-app and configure the project to use Chakra UI.

Delete the styles and pages/api folder.
Update your pages/_app.js like this:

// pages/_app.js
import { ChakraProvider } from "@chakra-ui/react";

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

export default MyApp;

Modify pages/index.js like this:

// pages/index.js
import Head from "next/head";

export default function Home() {
  return (
    <div>
      <Head>
        <title> NextJS Image Gallerytitle>
        <link rel="icon" href="/favicon.ico" />
      Head>
    div>
  );
}

Again head over to http://localhost:3000. You will see that the app is blank, but the title has changed to NextJS Image Gallery.

You can now close the development server.

How to Generate the Pexels API Key

We will use the Pexels API to fetch images for our Gallery. You will need to create a Pexels API key to authenticate your API requests. The API itself is completely free to use.

You can make as many as 200 requests per hour and 20,000 requests per month to the Pexels API.

Head over to https://www.pexels.com/join-consumer/ and create a new account on Pexels.

Create New Account

After filling in your details, you will also need to confirm your account before applying for an API key. So check your inbox and confirm your Pexels account.

Navigate to https://www.pexels.com/api/new/ and fill in the details for a new API key and click Request API Key

Request API Key

Remember to follow the API guidelines. Now copy the API key shown on the next page.

API Key

In your project's root directory, create a new file named .env.local to store this API key securely. Run the following commands to create the file:

touch .env.local

Inside this .env.local file, create a new environment variable named PEXELS_API_KEY and paste the API key there.

NEXT_PUBLIC_PEXELS_API_KEY = ''

Next.js has built-in support for loading environment variables from .env.local into process.env.

By default, all environment variables loaded through .env.local are only available in the Node.js environment. This means that they won't be exposed to the browser. Using the NEXT_PUBLIC_ prefix exposes the environment variable to the browser.

You can read more about it here.

How to Add a Heading to the Gallery

In this section, we will add a heading to our Gallery.

Import and add the Box component to index.js like this:

//pages/index.js
import Head from "next/head";
import { Box } from "@chakra-ui/react";
export default function Home() {
  return (
    <div>
      <Head>
        <title> NextJS Image Gallerytitle>
        <link rel="icon" href="/favicon.ico" />
      Head>
      <Box overflow="hidden" bg="purple.100" minH="100vh">Box>
    div>
  );
}

Navigate to http://localhost:3000. You will see that your app has a background color of light purple.

Blank Page with light Purple background

Here's what we are doing:

In Chakra UI, bg is the shorthand prop for background property. By passing bg="purple.100", the background of the app changes to light purple. The number after the color represents the shade of the color where the lightest is 50, and the darkest is 900.
Here is an image from the Chakra UI docs to better illustrate this point.

Shades of Purple

Setting minH="100vh" makes the app at least 100% of the parent's element height. minH is the shorthand prop for the min-height property.
To get rid of extra scroll bars in case the content overflows the parent element, overflow="hidden" is passed.

To add a heading, we will use the Text and Container component available in Chakra UI.

Modify the Box import in index.js like this:

import { Box, Container, Text } from "@chakra-ui/react";

Now, add the Container component inside the Box component.

"hidden" bg="purple.100" minH="100vh">
  <Container>Container>

You will see no change in your app, but the Container component has added some horizontal padding in your app, which will be more apparent after adding the Text component.

Add the following code inside the Container component:


  <Text
    color="pink.800"
    fontWeight="semibold"
    mb="1rem"
    textAlign="center"
    textDecoration="underline"
    fontSize={["4xl", "4xl", "5xl", "5xl"]}
  >
    NextJS Image Gallery
  Text>

Let's break down the above code and discuss it.

color is used to set the color of the text to pink.900.
fontWeight is used to set the thickness of the character.
mb is a shorthand prop for margin-bottom and 1rem=16px.
textAlign="center" aligns the text in the center.
textDecoration="underline" adds a line under the text.
fontSize, as the name suggests, sets the size of the text.

Here is how your app will look:

Heading - NextJS Image Gallery

xs: "12px"
sm: "14px"
md: "16px"
lg: "18px"
xl: "20px"

You might ask why there are four values of fontSize as an array inside curly braces?

The {} are used to tell the JSX parser to interpret the expression within {} as JavaScript. Here, {} is used to pass an array for fontSize's value. This array is a shorthand for media queries in Chakra UI.

The values are passed in an array to make the text responsive and change the font size according to the devices – that is, the heading will be larger on the desktop.

Each index of the array corresponds to a specific breakpoint and the property's value. This means that font-size changes according to the breakpoint. You can read more about it here.

const breakpoints = {
  sm: "30em",
  md: "48em",
  lg: "62em",
  xl: "80em",
}

It follows the "mobile-first" approach, so the first value is for smaller devices, and the last value is for desktop devices.

The above code will generate CSS like this:

.css-px6f4t {
 text-align:center;
 -webkit-text-decoration:underline;
 text-decoration:underline;
 font-size:2.25rem;
 color:#702459;
 font-weight:600;
 margin-bottom:1rem;
}
@media screen and (min-width:30em) {
 .css-px6f4t {
  font-size:2.25rem;
 }
}
@media screen and (min-width:48em) {
 .css-px6f4t {
  font-size:3rem;
 }
}
@media screen and (min-width:62em) {
 .css-px6f4t {
  font-size:3rem;
 }
}

Here is the side by side difference in heading size as seen in Polypane.

Polypane

How to Fetch Data from the Pexels API

You have generated the API key so let's write the code to fetch data from the API. We will create a separate file and define the functions to fetch data inside it.

In your project's root directory, create a folder named lib. Inside it, create a file named api.js.

Run the following command in the terminal:

mkdir lib
cd lib
touch api.js

This is the Pexels API base URL for photos: https://api.pexels.com/v1/.

The Pexels API has three endpoints:

/curated to receive real-time photos curated by the Pexels team.
/search to search for photos based on a query.
/photos/:id to get a single photo from its id.

We will use the /curated endpoint to show photos curated by the Pexels team on the app's landing page.

Add the following code to api.js:

const API_KEY = process.env.NEXT_PUBLIC_PEXELS_API_KEY;

export const getCuratedPhotos = async () => {
  const res = await fetch(
    `https://api.pexels.com/v1/curated?page=11&per_page=18`,
    {
      headers: {
        Authorization: API_KEY,
      },
    }
  );
  const responseJson = await res.json();
  return responseJson.photos;
};

Let's discuss the above code:

We start by creating a variable named API_KEY that accesses the NEXT_PUBLIC_PEXELS_API_KEY environment variable using process.env.
Then we create an asynchronous function named getCuratedPhotos() that uses the fetch() method to fetch the data from the API.
If you take a closer look at the fetch URL, you will notice that we have added ?page=11&per_page=18 after /curated endpoint. These are the optional parameters that you can pass to the /curated endpoint as query strings. Here page=11 means send the 11th page, and per_page=18 means that send 18 photos per page.
You can also remove these optional parameters, in which case the API endpoint will send you 15 pictures from the first page. You can get as many as 80 photos in a single request.
The Pexels API key is passed in the Authorization field under the headers.
res.json() parses the response in JSON format.
responseJson contains fields like the page, per_page, and so on, which are not used by our app. So only the photos field of the response is returned, which looks like this:

[
  {
    id: 4905078,
    width: 7952,
    height: 5304,
    url: "https://www.pexels.com/photo/ocean-waves-under-blue-sky-4905078/",
    photographer: "Nick Bondarev",
    photographer_url: "https://www.pexels.com/@nick-bondarev",
    photographer_id: 2766954,
    src: {
      original:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg",
      large2x:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
      large:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
      medium:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&h=350",
      small:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&h=130",
      portrait:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
      landscape:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
      tiny:
        "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280",
    },
    liked: false,
  },
];

In the src field we are given many different image formats to choose from. In this tutorial we will use portrait type images on our landing page. You are free to explore other formats too.

As we develop our app, we will write the functions to search for a photo and get a single photo in api.js. For now, we will use this function to display an image on our landing page or homepage.

How to Display Photos on the Page

Now that we have created the function to fetch data, let's display them on our page.

First, import the getCuratedPhotos() function in index.js.

import Head from "next/head";
import { Box, Container, Text } from "@chakra-ui/react";
import {getCuratedPhotos} from "../lib/api"

We will use the getServerSideProps() function available in Next.js and use the getCuratedPhotos() function inside it to fetch data from Pexels API and inject it in our page. You can read more about getServerSideProps() here.

Add the following code at the bottom of your index.js file:

export async function getServerSideProps() {
  const data = await getCuratedPhotos();
  return {
    props: {
      data,
    },
  };
}

The above async function uses getCuratedPhotos() to fetch images from the Pexels API and store it in the data variable. This data variable is made available as a prop in the props property.

This data is available as a prop so add it as an argument in the Home component function.

export default function Home({data}) {
...
}

Restart your development server, and inside your Home component, console.log this data:

export default function Home({data}) {
  console.log(data)
  return (
 ...
 }

Head over to http://localhost:3000/ and open the console by pressing CTRL + Shift + J in Chrome or CTRL + Shift + K in Firefox.

console.log(data)

Remove the console.log and add the following code to the top of your index.js file to import the useState() hook from react.

import React, { useState } from "react";

We will store the data from the Pexels API inside a state named photos. Add the following code before the return statement:

const [photos, setPhotos] = useState(data);

To display images, map over the photos array and pass src.original in the src attribute of the img element.

Add the following code after the Container component:

{
  photos.map((pic) => (
    <img src={pic.src.original} width="500" height="500" />
  ))
}

Your app will now look something like this:

Displaying images using img element

Aside from the fact that the images are not properly sized, there is another issue with us using to display the images.

Head over to http://localhost:3000/ and open Developer tools and then the Network tab ( Ctrl+ Shift + E in Firefox and Ctrl + Shift + J in Chrome). It will look something like this:

Network tab

Now reload your page. You will see that the empty Network tab is now filled with data.

Single request

As you can see in the above image, the requested file is sized over 11 MB, and this is for a single file or image. The sizes can vary anywhere from 10 to 100 MB or more based on the quality of the image.

Imagine you have 80 images on your app's landing page. Does it make sense to transfer around 800 MB of files every time someone visits your Gallery or website? It does not.

Multiple requests

This is why today, most of the images on the web are served in WebP format. This format significantly reduces the size of the image, and you can hardly detect any visual difference.

So, we need to change the image format to webp, but the question is, how? Do you need to do it manually? If yes, won't it be time consuming and tiresome?

No, you don't need to do it manually.

Next.js version 10 comes with built-in support for Image Optimization using the Image component. You can read more about this update here.

So, let's replace the img element with the Next.js Image component. First, import this component inside your index.js like this:

import Image from "next/image";

But wait, before we use this component in our code, we need to tell Next.js that our images are coming from an external resource, like from Pexels.

Stop your development server and create a next.config.js file by running the following command:

touch next.config.js

Add the following code to next.config.js:

module.exports = {
  images: {
    domains: ["images.pexels.com"],
  },
};

And that's it. There are other configurations like path, imageSizes, deviceSizes, and so on that you can add in the images field. But in this tutorial, we will leave them as default. You can read more about the configuration here.

Replace img with the Image component and pass the props, as shown below:

{
  photos.map((pic) => (
    <Image
      src={pic.src.portrait}
      height={600}
      width={400}
      alt={pic.url}
    />
  ))
}

As discussed above, the Pexels API provides different formats or sizes of the same image, like portrait, landscape, tiny, and so on, under the src field.

This tutorial uses the portrait images on the landing page, but you are free to explore other sizes.

src: {
    original: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg",
    large2x: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
    large: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&h=650&w=940",
    medium: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&h=350",
    small: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&h=130",
    portrait: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=1200&w=800",
    landscape: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200",
    tiny: "https://images.pexels.com/photos/4905078/pexels-photo-4905078.jpeg?auto=compress&cs=tinysrgb&dpr=1&fit=crop&h=200&w=280",
  }

As you can see in the above sample src field, the portrait format of the image has a width of 800 and a height of 1200. But it is too large to show on the webpage, so we will scale it down by dividing it by 2. So 600 and 400 are passed in for the height and width of the Image component.

Restart your development server and head over to http://localhost:3000/. You will see that the app itself looks exactly the same. But this time if you open the Network tab and reload the page, you will see something truly magical.

Your images are now in webp format, and their sizes have been reduced.

Network tab

The Next.js Image component has also added lazy loading to images. Here is an example to explain how and why you should use lazy loading if you are unfamiliar with it.

Even though the images are now in webp format, is it necessary to load all the images whenever someone visits your website? And if the visitor just comes and leaves without scrolling, does it make sense to load the images at the bottom of the page?

There is no need to load the images that a user or visitor is not going to see in most situations.

And that's where Lazy Loading comes to save the day. It delays the requests to images as to when they are needed or, in this situation, when images come into view. This significantly helps reduce the initial page weight and increases website performance.

If you head over to http://localhost:3000/ and scroll through all the images, you will see that the images that are not in the viewport are not loaded initially. But as you scroll down, they are transferred and loaded.

Lazy Loading

By default, the layout prop of the Image component has the value of intrinsic, which means the image will scale the dimensions down for smaller viewports but maintain the original dimensions for larger viewports.

There are many props that you can pass to the Image component to modify this component further. You can read about them here.

How to Style Images with Chakra UI

To style the images, we will use Chakra UI's Wrap component.

Wrap is a layout component that adds a defined space between its children or images in this scenario. It 'wraps' its children automatically if there is not enough space to fit any child.

Import Wrap and WrapItem from Chakra UI.

import { Box, Container, Text, Wrap, WrapItem } from "@chakra-ui/react";

WrapItem encloses the individual children while Wrap encloses all the WrapItem components.

Modify the expression to display images like this:

"1rem" spacing={4} justify="center">
  {photos.map((pic) => (
    <Image src={pic.src.portrait} height={600} width={400} alt={pic.url} />
  ))}

Here's what's happening in the above code:

px="1rem" is the shorthand prop for padding-left and padding-right.This adds horizontal padding of 1 rem.
spacing={4} applies spacing between each child. This will be seen once each image is wrapped with WrapItem.
justify="center" justifies the images in the center.

Wrap

Now wrap each image with WrapItem. Add the following code inside the JavaScript expression:

"1rem" spacing={4} justify="center">
  {photos.map((pic) => (
    <WrapItem
      key={pic.id}
      boxShadow="base"
      rounded="20px"
      overflow="hidden"
      bg="white"
      lineHeight="0"
      _hover={{ boxShadow: "dark-lg" }}
    >
      <Image src={pic.src.portrait} height={600} width={400} alt={pic.url} />
    WrapItem>
  ))}

Let's discuss the props passed to WrapItem one by one:

key={pic.id} gives each image a unique key so that React can differentiate between the children or pictures.
boxShadow="base" adds shadow to WrapItem.
rounded="20px" adds a border-radius of 20px.
overflow="hidden" make sure the image doesn't overflow the WrapItem and is seen rounded.
bg="white" adds a white background to the WrapItem.
lineHeight="0" sets line-height property to zero.
_hover={{ boxShadow: "dark-lg" }} changes the boxShadow when you hover over the image.

GIF

You will see that spacing={4} has also come into effect since we added WrapItem to images.

How to Add Search Functionality to the Gallery

The next step is to add a feature to allow users to search for images and show those images to them. For this, we will use the /search endpoint in the Pexels API.

In lib/api.js create a new function getQueryPhotos() to search for images based on the user's search input.

export const getQueryPhotos = async (query) => {
  const res = await fetch(`https://api.pexels.com/v1/search?query=${query}`, {
    headers: {
      Authorization: API_KEY,
    },
  });
  const responseJson = await res.json();
  return responseJson.photos;
};

The above function getQueryPhotos() is similar to getCuratedPhotos but here we have added a query parameter to the function and modified the API endpoint to include this query.

`https://api.pexels.com/v1/search?query=${query}`

Import the getQueryPhotos() function in index.js.

import { getCuratedPhotos, getQueryPhotos } from "../lib/api";

Now, we will create a form to take user input and search for the same.

We will import and use Input, IconButton, InputRightElement, and InputGroup from Chakra UI to create this form.

Modify the Chakra UI import like this and add an import for SearchIcon:

import {
  Box,
  Container,
  Text,
  Wrap,
  WrapItem,
  Input,
  IconButton,
  InputRightElement,
  InputGroup,
} from "@chakra-ui/react";
import { SearchIcon } from "@chakra-ui/icons";

Add the following code for the input form inside the Container component in index.js file:

"1rem">
  <Input placeholder="Search for Apple" variant="ghost" />

  <InputRightElement
    children={
      <IconButton
        aria-label="Search"
        icon={<SearchIcon />}
        bg="pink.400"
        color="white"
      />
    }
  />

Here's what we are doing.

InputGroup is used to group the Input and InputRightElement components. Here pb is shorthand for padding-bottom.
Input is the input field where users will type their queries. It has a placeholder of "Search for Apple".
InputRightElement is used to add an element to the right of the Input component. An icon button with the icon of search is passed to the children prop of InputRightElement.
IconButton is a component in Chakra UI which is useful when you want an icon as a button. The icon to render is passed inside the icon prop.

Here's how the input field will look.

Input field

This form doesn't do anything yet. Let's change that.

Define a new state named query to store a user's inputs:

export default function Home({ data }) {
  const [photos, setPhotos] = useState(data);
  const [query, setQuery] = useState("");

...
}

Modify the Input component to create a two-way bind between the input field and query state using the value method and onChange event:

"Search for Apple"
  variant="ghost"
  value={query}
  onChange={(e) => setQuery(e.target.value)}
/>

Now, create a function named handleSubmit() to handle the click event of search icon. For now we will just console.log the input query and clear the field afterwards.

export default function Home({ data }) {
  const [photos, setPhotos] = useState(data);
  const [query, setQuery] = useState("");

  const handleSubmit = async (e) => {
    await e.preventDefault();
    await console.log(query);
    await setQuery("");
  };

...
}

Add this function to the onClick event of IconButton:

<IconButton
      aria-label="Search"
      icon={<SearchIcon />}
      onClick={handleSubmit}
      bg="pink.400"
      color="white"
    />
  }
/>

Head over to http://localhost:3000/ and type something in the input field and click the search button.

console.log(query)

But this form is still missing something: if you try to search for something by hitting Enter instead of the search button, it will refresh the page, and the query is not logged.

To fix this, enclose the InputGroup with the form element and pass the handleSubmit function to the onSubmit event like this:


  <InputGroup pb="1rem">
    <Input
      placeholder="Search for Apple"
      variant="ghost"
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />

    <InputRightElement
      children={
        <IconButton
          aria-label="Search"
          icon={<SearchIcon />}
          onClick={handleSubmit}
          bg="pink.400"
          color="white"
        />
      }
    />
  InputGroup>

You will notice hitting Enter will work now.

Now update the handleSubmit function like this to fetch the images based on the user's query:

const handleSubmit = async (e) => {
  await e.preventDefault();
  const res = await getQueryPhotos(query);
  await setPhotos(res);
  await setQuery("");
}

The above function passes the query variable to the getQueryPhotos() function and the data returned from the function overrides the previous value in the photos variable using setPhotos(res).

And it's done! You can now search images in your app.

Searching for Apple

There's still something missing. What is it?

What if the user tries to search without any query, like with empty strings? The current code will still try to make request using "" and we will run into the following error.

To handle this issue, we will use Toast from Chakra UI.

Import useToast from Chakra UI:

import {
  Box,
  Container,
  Text,
  Wrap,
  WrapItem,
  Input,
  IconButton,
  InputRightElement,
  InputGroup,
  useToast
} from "@chakra-ui/react";

Add the following code jut below where you defined states to intialize Toast.

export default function Home({ data }) {
  const [photos, setPhotos] = useState(data);
  const [query, setQuery] = useState("");
  const toast = useToast();

...
}

Modify the handleSubmit() function like this:

const handleSubmit = async (e) => {
  await e.preventDefault();
  if (query == "") {
    toast({
      title: "Error.",
      description: "Empty Search",
      status: "error",
      duration: 9000,
      isClosable: true,
      position: "top",
    });
  } else {
    const res = await getQueryPhotos(query);
    await setPhotos(res);
    await setQuery("");
  }
};

In the above code, we check if the query is empty or not with a simple if/else statement. And if it is empty, then we display an error toast with Empty Search text.

Try hitting Enter without typing anything in the input field. You will see a toast like this:

Empty Search toast

How to Add Dynamic Routes to Images

We will create a dynamic route for each image so users can click on images to get more information on them.

Next.js has a very cool feature where you can create a dynamic route by adding brackets to a page ([param]), where param can be URL slugs, pretty URLs, an ID, and so on.

Here the param is id, since to get a specific photo from Pexels API you need to provide its id.

Run the following commands in your project's root directory to create [id].js in the photos directory under pages.

mkdir pages/photos
cd pages/photos
touch [id].js

Import Link from next/link in index.js. Link helps in client-side transitions between routes. You can read more about Link here.

import Link from "next/link"

Add this Link to each image like this:

`/photos/${pic.id}`}>
  <a>
    <Image src={pic.src.portrait} height={600} width={400} alt={pic.url} />
  a>

Head over to your app and try clicking any image. It will show an error since we have created photos/[id].js but didn't add any code in it.

But if you notice the URL of this page, it will be something like this:

http://localhost:3000/photos/2977079

We will now create a third function named getPhotoById() in lib/api.js to get a specific photo based on its id.

Add the following code to api.js:

export const getPhotoById = async (id) => {
  const res = await fetch(`https://api.pexels.com/v1/photos/${id}`, {
    headers: {
      Authorization: API_KEY,
    },
  });
  const responseJson = await res.json();
  return responseJson;
};

The above code uses the /photos endpoint to get a single image from Pexels API. You will notice that unlike getCuratedPhotos and getQueryPhotos, getPhotoById returns the responseJson and not responseJson.photos.

Add the following code to photos/[id].js:

import { getPhotoById } from "../../lib/api";
import {
  Box,
  Divider,
  Center,
  Text,
  Flex,
  Spacer,
  Button,
} from "@chakra-ui/react";
import Image from "next/image";
import Head from "next/head";
import Link from "next/link";
import { InfoIcon, AtSignIcon } from "@chakra-ui/icons";

export default function Photos() {

    return (
      <Box p="2rem" bg="gray.200" minH="100vh">
        <Head>
          <title>Imagetitle>
          <link rel="icon" href="/favicon.ico" />
        Head>

      Box>
    )
  }

We have added a background color of light gray using the bg prop and Box component. To save time, we have imported all the components and icons beforehand.

Create a getServerSideProps() function in [id].js to fetch data from the Pexels API.

export async function getServerSideProps({ params }) {
  const pic = await getPhotoById(params.id);
  return {
    props: {
      pic,
    },
  };
}

Restart your development server.

You might ask how getServerSideProps() is getting the id of the image from the params argument?

Since this page uses a dynamic route, params contain the route parameters. Here the page name is [id].js , so params will look like { id: ... }.

You can try console.log(params) – it will look something like this.

{ id: '4956064' }

Pass this pic prop to the Photos component function as an argument.

export default function Photos({ pic }) {
...
}

Add the following code to the Box component:

"2rem" bg="gray.200" minH="100vh">
  <Head>
    <title> Image: {pic.id}title>
    <link rel="icon" href="/favicon.ico" />
  Head>

  <Flex px="1rem" justify="center" align="center">
    <Text
      letterSpacing="wide"
      textDecoration="underline"
      as="h2"
      fontWeight="semibold"
      fontSize="xl"
      as="a"
      target="_blank"
      href={pic.photographer_url}
    >
      <AtSignIcon />
      {pic.photographer}
    Text>
    <Spacer />
    <Box as="a" target="_blank" href={pic.url}>
      <InfoIcon focusable="true" boxSize="2rem" color="red.500" />{" "}
    Box>{" "}
    <Spacer />
    <Link href={`/`} >
         <Button
            as="a"
            borderRadius="full"
            colorScheme="pink"
            fontSize="lg"
            size="lg"
            cursor="pointer"
          >
            🏠 Home
         Button>
    Link>
  Flex>
  <Divider my="1rem" />

  <Center>
    <Box as="a" target="_blank" href={pic.url}>
      <Image
        src={pic.src.original}
        width={pic.width / 4}
        height={pic.height / 4}
        quality={50}
        priority
        loading="eager"        
      />
    Box>
  Center>

Here is how your page will look now:

Photo page

Let's break this code down piece by piece.

We first modify the title of the page, by passing the id of the image after the Image text.


  <title> Image: {pic.id}title>
  <link rel="icon" href="/favicon.ico" />

We then create a navbar using the Flex component.

"1rem" justify="center" align="center">
...

Here px is shorthand prop for padding-left and padding-right, and justify and align are for justify-content and align-items, respectively.

We then add a link to the photographer using the Text and AtSignIcon icons. You can also use the @ sign instead of AtSignIcon.

"wide"
  textDecoration="underline"
  as="h2"
  fontWeight="semibold"
  fontSize="xl"
  as="a"
  target="_blank"
  href={pic.photographer_url}
>
  <AtSignIcon />
  {pic.photographer}

The as prop is a feature in Chakra UI that allows you to pass an HTML tag or component to be rendered.

Here we are using it with the tag so the Text component will be rendered as tag on the page.

The target="_blank" makes sure that the link opens in a new window or tab.

Photographer link

Then we add a Spacer component that, when used with Flex, distributes the empty space between Flex's children. You can read more about it here.

Image Source - Chakra UI docs

Next, we add an information icon that links to the photo on Pexels.

as="a" target="_blank" href={pic.url}>
  <InfoIcon focusable="true" boxSize="2rem" color="red.500" />

<Spacer />

Info Icon

Then we add Home button in the nav to take the user back to the landing page of the app using the Link component from next/link.

`/`}>
  <Button
    as="a"
    borderRadius="full"
    colorScheme="pink"
    fontSize="lg"
    size="lg"
    cursor="pointer"
  >
    🏠 Home
  Button>

Home button

Then we use Divider component to divide the navbar and the image.

"1rem" />

Here my is shorthand prop for margin-top and margin-bottom.

Finally, we add the image to the page using the Center component, which as the name suggests, centers its children.


  <Box as="a" target="_blank" href={pic.url}>
    <Image
      src={pic.src.original}
      width={pic.width / 4}
      height={pic.height / 4}
      priority
      quality={50}
      loading="eager"
    />
  Box>

In the above code, we use the Box component to add a link to the original image on Pexels using the as prop.

You will also notice that we have passed a few additional props in the Image component.

src: We are passing the original image this time.
We scale the image by dividing the original width and height by 4.
By passing priority, the image is considered high priority and is preloaded.
By default, the Image component reduces the quality of optimized images to 75%, but since the image is still too big, we further decrease its quality to 50%, by passing quality={50}.
By default, loading behavior is lazy in the Image component, but here we want the image to be displayed immediately, and hence we pass loading="eager".

Here is the above code in action.

Next Image Gallery

You did it! 🎉

Congrats 👏 on building this Next Image Gallery project.

Conclusion

In this tutorial, we learned how to build an Image Gallery with Next.js using the Pexels API and Chakra UI.

We discussed how to install and use Chakra UI v1 in any Next.js project. We also saw how to fetch data from an API and create dynamic routes in Next.js.

Here are some other APIs that you can explore and use in your project:

Here are some additional resources that can be helpful:

Would you like a second part of this tutorial, where we add animations to images using Framer Motion? Let me know on Twitter.

What other projects or tutorials would you like to see? Reach out to me on Twitter, and I'll cover them in my next article!

If you're inspired to add features yourself, please do share and tag me – I'd love to hear about them :)

How to Build a Markdown Previewer with React.js

Ashutosh K Singh — Tue, 02 Jun 2020 17:48:15 +0000

Building actual projects is a great way to learn React and solidify some of its basic principles. So in this post we will be building a simple Markdown Previewer like what you see in the image above. This will be a simple react app which will contain a textarea for Markdown input and a preview tab where the converted text will appear.

If you want to jump right into the code, check out the GitHub Repo here: https://github.com/lelouchB/markdown-previewer/tree/master

And here's a link to the deployed version :https://markdown-previewer.lelouch-b.now.sh/.

Now let's get started.

Prerequisites

Knowledge of HTML, CSS, Javascript and Bootstrap.
Basic knowledge of React.
Node and NPM installed on your local dev machine.
Any code editor of your choice.

If you feel like your progress is hindered because you don't know enough about these subjects, check out https://www.freecodecamp.org/learn. There are some awesome modules there that will get you started in no time.

Setup

We will build this app with the help of npx create-react-app . Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

In your project directory run the following command in the terminal:

npx create-react-app markdown-previewer
cd markdown-previewer
npm start

Then open http://localhost:3000/ to see your app. It will look like this:

http://localhost:3000/

Now, let's see the Project Structure here:

markdown-previewer
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js

No configuration or complicated folder structures – only the files you need to build your app.

Now, before we proceed further, let's clean up these files:

Delete index.css and App.css .
Since we have deleted index.css and App.css , remove import './index.css'; and import './App.css';from index.js and App.js respectively.
Delete logo.svg and remove import logo from './logo.svg'; in App.js.
Inside App.js remove the function App() . We will export a class component rather than a functional component. So, change App.js to look like this:

import React from 'react';

export default class App extends React.Component{
render(){
  return (
    <div className="App">

    div>
  );}
}

Head over to http://localhost:3000 and it will be blank now.

Design

But one more thing before we get into it… It’s always a good idea to have a plan of what you are going to build before you start typing. Especially when you're building a user interface with React.

We want to have some idea of what the interface will look like so we can know what components we need to build and what data each component will be responsible for handling.

So to begin, I have drawn a quick sketch of what the markdown-previewer app will look like. I have also labeled all of the components we will need to create:

Design

So it looks like we will need to build three primary components:

Title and SubHeading— This will simply display our headings and subheadings.
Markdown Input TextArea — This is the input texarea where the markdown we want to preview will be written.
Markdown Preview — This is a container with a greyish background where the output will display.

A few things to note:

We will have an ‘App’ component that contains everything. This is small project so it is easy to maintain all the components in a single file. But as the size of your project increases (for example, while building an e-Commerce platform), you would have to seperate components into different files and folders by their types.
Since this article is not about CSS and designing, I will use the React-Bootstrap library and Inline Styles. Any discussion about them will be kept short.

Inline Styles in React

When using inline styles, it means that instead of making separate CSS files, components are styled by passing the CSS properties as an Object. For example:

var divStyle = {
  color: 'white',
  backgroundImage: 'url(' + imgUrl + ')',
  WebkitTransition: 'all', // note the capital 'W' here
  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
};

ReactDOM.render(<div style={divStyle}>Hello World!div>, document.getElementById("root");

Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. node.style.backgroundImage). Vendor prefixes other than ms should begin with a capital letter. This is why WebkitTransition has an uppercase "W".

The style object is then passed in the DOM component using {} . We can use run Javascript code inside our return method using {}.

Code

Okay it’s time to start writing code! If at any time you get stuck, feel free to refer to the finished app here: https://github.com/lelouchB/markdown-previewer/tree/master and https://markdown-previewer.lelouch-b.now.sh/

Installing Dependencies

Let's start by installing our project dependencies. Inside the project directory, run the following commands:

npm install react-bootstrap bootstrap 
npm install marked

Now, let's discuss them:

The first command installs React-Bootstrap and Bootstrap which we will use to style our project.
The second command installs Marked.js, which is a low-level markdown compiler for parsing markdown without caching or blocking for long periods of time. This will run the actual logic behind converting the markdown.

Before we start using React-Bootstrap inside our project, we will have to add the minified bootstrap CSS file to our index.js:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

With this the dependencies have been installed and are ready to be used.

Headings

Our first task will be to add a heading to our React app and center align it. For that we will use Badge, a component of the React-Bootstrap library. Here are the steps to do that:

Import Badge to App.js. Inside App.js add the following:

import Badge from "react-bootstrap/Badge";

In App.js inside return and under the div with the className="App", add another div with the className="container".

import React from "react";
import Badge from "react-bootstrap/Badge";

export default class App extends React.Component {
  render() {
    return (
      <div className="App">
        <div className="container">

        div>
      div>
    );
  }
}

Next inside div with the className="container", we will add the heading as follows:

 
 <Badge className="text-align-center" variant="light">
 Markdown Previewer
Badge>

You can now see a heading at http://localhost:3000, but it is not centered. To center the heading we will use bootstrap and enclose the above code block inside two divs.

"row mt-4">
  <div className="col text-center">
    <h1>
     <Badge className="text-align-center" variant="light">
        Markdown Previewer
     Badge>
    h1>
  div>

With this we have added a heading to our app.

Sub Headings

If you look at the design we're discussing above, you'll see that the next step will be to add two columns with the subheadings Markdown Input and Preview. One will contain the Input TextArea and the other the Preview.

First we will have to create two columns placed side by side inside our app. We will do so using bootstrap. Inside the div container, add the following:


"row mt-4">
  <div className="col-md-6">
    <h2>Lorem Ipsumh2>
  div>

  <div className="col-md-6">
    <h2>Lorem Ipsumh2>
  div>
;

I have used Lorem Ipsum for now, and will remove it in the next step. Columns are created using bootstrap classes, and the first div with className="row mt-4" creates a row. The m indicates margin. The t indicates top. The other two divs with className="col-md-6" create two columns.

The app will now look something like this.

The next step will be to add headings to these columns and center align them. This can be done by adding a div with the className="col text-center" inside that Badge, to both the divs with the className="col-md-6".

"col text-center">
  <h1>
    <Badge className="text-align-center" variant="light">
    // Actual Sub Heading: This code block will be same for both columns
    Badge>
  h1>

Your App.js will now look like this:

TextArea

Next we're going to add a TextArea in our app. We will use the simple HTML </code> tag to do so. <ol> <li>Add another div with the <code>classname="mark-input"</code> and add <code>textarea</code> with <code>className="input"</code> inside it.</li> </ol> <pre><code><div className="mark-input"> <textarea className="input"> </textarea> </div>; </code></pre><ol start="2"> <li>Let's customize TextArea a bit. As discussed above, we will be using Inline Styles, so for that let's fist initailize an Object. All the variables will be declared inside the <code>render()</code> function but outside of <code>return</code>. For example, </li> </ol> <pre><code>render(){ var variableOne = "Lorem Ipsum" var variableTwo = "Lorem Ipsum" return( // Code ) } </code></pre><ol start="3"> <li>Here is the <code>inputStyle</code> object:</li> </ol> <pre><code> var inputStyle = { width: "400px", height: "50vh", marginLeft: "auto", marginRight: "auto", padding:"10px" }; </code></pre><ol start="4"> <li>Let's add the <code>inputStyle</code> object to our <code>textarea</code>:</li> </ol> <pre><code><div className="mark-input" style={inputStyle}> <textarea className="input" style={inputStyle}></textarea> </code></pre>With this we have added TextArea to our App and it will look like this: <h3 id="heading-preview">Preview</h3> To separate our preview from the rest of the app and to enclose it inside a container, we will follow the above process. We'll create a div inside the second columns and add a style object to it, like this: <pre><code> var outputStyle = { width: "400px", height: "50vh", backgroundColor: "#DCDCDC", marginLeft: "auto", marginRight: "auto", padding:"10px" }; </code></pre>Add the object to the <code>div</code> : <pre><code><div className="col-md-6"> <div className="col text-center"> <h4> <Badge className="text-align-center" variant="secondary"> Preview </Badge> </h4> </div> <div style={outputStyle}> </div> </div> </code></pre>Here is how the app will look now: We now have completed the look of our app, but it is missing its functionality, so let's add that. The process from here can be divided into three steps: <ol> <li>Taking input from TextArea.</li> <li>Passing the input to the Marked.js library and displaying the processed data to the Preview column.</li> </ol> <h2 id="heading-taking-input-from-textarea">Taking Input from TextArea</h2> We will use the <code>state</code> object. <h3 id="heading-statehttpsreactjsorgdocsstate-and-lifecyclehtml"><a target="_blank" href="https://reactjs.org/docs/state-and-lifecycle.html">State</a></h3> In React, “state” is an object that represents the parts of the app that can change. Each component can maintain its own state, which lives in an object called <code>this.state</code>. The <code>state</code> object is where you store property values that belong to the component. Simply put, if you’d like your app to do anything – if you want interactivity, adding and deleting things, logging in and out – that will involve state. Here the value of our textarea is changing, and our state will change with it. We'll add the state object inside our class App, above the <code>render()</code> function. It is best practice to initialize <code>state</code> inside <code>constructor</code>. It can work without <code>constructor</code> also but you should avoid that. Here is how we will initialize it with the property <code>markdown</code> , initially having an empty string: <pre><code>export default class App extends React.Component { constructor(props){ super(props) this.state = { markdown: "", }; } render(){ // method and other code } } </code></pre>In this project or in any other react projects, always initialize <code>state</code> inside <code>constructor(props)</code> and below <code>super(props)</code>. Typically, in React, constructors are only used for two purposes: <ul> <li>Initializing <a target="_blank" href="https://reactjs.org/docs/state-and-lifecycle.html">local state</a> by assigning an object to <code>this.state</code>.</li> <li>Binding <a target="_blank" href="https://reactjs.org/docs/handling-events.html">event handler</a> methods to an instance.</li> </ul> Keep in mind that Constructor is the only place where you should assign <code>this.state</code> directly. In all other methods, you need to use <code>this.setState()</code> instead. State changes are asynchronous. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately. As discussed above we cannot change state directly. Instead we have to use <code>this.setState()</code> so let's create a method that does that and is called every time the value of textarea is changed. <pre><code> updateMarkdown(markdown) { this.setState({ markdown }); } </code></pre>This method is created inside the class component but above the <code>render()</code> function. But we will first set the value of textarea to the <code>markdown</code> property in state. <pre><code><textarea className="input" style={inputStyle} value={this.state.markdown}>

Now we can add updateMarkdown() to onChange() event inside </code> and call it <code>this.updateMarkdown()</code>. <pre><code><textarea className="input" style={inputStyle} value={this.state.markdown} onChange={(e) => { this.updateMarkdown(e.target.value); }} >;

Next we can check to see if state is assigning properly by passing a Javascript code and console.log() our state.

"input"</span>
  style={inputStyle}
  value={<span class="hljs-built_in">this</span>.state.markdown}
  onChange={<span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {
    <span class="hljs-built_in">this</span>.updateMarkdown(e.target.value);
  }}
>
  {<span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.state.markdown)}
;

Now open your console and try writing inside textarea, and hopefully you will see the same being added to the console.

Check

With this we have successfully assigned the input of textarea to our state markdown property. Here is how your App.js will look now:

Marked.js

Marked.js is the brains behind the conversion of markdown and is very simple to use.

Importing marked, add the following just below where you imported Badge from react-bootstrap/Badge

let marked = require("marked");

To use the Marked.js library, we just have to pass the string to be converted inside the marked() function. We already have the data dynamically stored inside the state object, so it will be done like this:

marked(this.state.markdown)

Now, the next step is to actually display the converted data on the webpage. To do that we will use dangerouslySetInnerHTML, which is an attribute under DOM Elements in React. According to the official documentation:

_dangerouslySetInnerHTML_ is React’s replacement for using _innerHTML_ in the browser DOM.

This means that if in React you have to set the HTML programmatically or from an external source, you will have to use dangerouslySetInnerHTML instead of traditional innerHTML in Javascript.

In simple words using **dangerouslySetInnerHTML** you can set HTML directly from React.

While using dangerouslySetInnerHTML , you will have to pass an object with a __html key. (Note the key consists of two underscores.)

Here is how we will do that:

__html: marked(this.state.markdown) }}
>

With this we have completed our project and now you will see your Markdown Previewer in action.

Here is the complete App.js

We did it! ?

Congrats on building this React Mardown Previewer.

What next?

So, what is the future of this project? You are the future. Make your own version of Markdown Previewer, add different designs, layouts, custom functionalities. For example you could add a Reset Button to clear the textarea – it's all up to your imagination. I hope you had fun coding along.

What other projects or tutorials would you like to see ? Reach out to me on Twitter, and I'll make more tutorials! If you're inspired to add features yourself, please do share and tag me – I'd love to hear about them :)

What is dllhost.exe and COM Surrogate in Windows Task Manager? (Solved)

Ashutosh K Singh — Tue, 12 May 2020 16:14:45 +0000

COM Surrogate processes, short for Component Object Model, are necessary components in Windows. They are used to run software extensions that other programs need to run. And if those extensions crash, it is the surrogate processes that are affected and not the programs that were running them.

There are many use cases of these processes, for example creating thumbnails of images and other files when a folder is opened. The COM Surrogate process hosts .dll files, so its name is dllhost.exe.

_Photo by [Unsplash](https://unsplash.com/@christinhumephoto?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Christin Hume / Is COM Surrogate a virus?

The short answer is no. COM Surrogate processes themselves cannot be viruses. However, viruses and malware can disguise themselves as a COM Surrogate process.

Should I remove COM Surrogate?

Since it is an integrated part of Windows, I wouldn't advise you to remove it. This container process enables your OS to run COM objects that help other processes and programs to work.

Checking the legitimacy of COM Surrogate

Since these processes are genuine components of Windows, they are widely used by cybercriminals. This has consequences – like the COM Surrogate having high CPU consumption and creating duplicates in the Task Manager.

A simple way to check its legitimacy is:

Open Windows Task Manager by right-clicking on the taskbar and clicking Task Manager.
Find the COM Surrogate processes and then right-click to Open File Location.
Processes are legitimate if they are located in C:/Windows\System32 or C:/winnt/system32.

Common Errors

COM Surrogate high CPU, disk usage
COM Surrogate is not responding, freeze
COM Surrogate virus
COM Surrogate taking memory
COM Surrogate always running
COM Surrogate stopped working
COM Surrogate keeps crashing, opening

There are many reasons for these errors to occur. The most common are:

A third-party program incorrectly registered COM objects or they did not work correctly (if they were incompatible with current versions of Windows, outdated software).
If the problem occurs during drawing thumbnails in Explorer, it's because of outdated or incorrectly working codecs.
Can be caused by viruses or malware, as well as damage to Windows System Files.

How can you fix these errors?

We discussed many errors above but the most common of them is "COM Surrogate has stopped working". Below are the various methods to resolve it.

And even if you are having any of the other errors listed above, these methods are good to go and should help fix them, too.

1. Update Codecs

A manual method to solve this error is to update all the Codecs of Windows (7, 8 or 10) to their latest updated versions. You can download and install your latest Windows Codec Pack from here:

https://www.microsoft.com/en-in/download/details.aspx?id=507

Windows 7 Codec Pack: https://www.windows7codecs.com/

Windows 8 & 10 Codec Pack: http://www.windows8codecs.com/

Installing Codecs

2. Reset Internet Explorer

The issue can also be caused due to cached files that were corrupt. In this instance, it's be best to reset IE.

Hold the Windows Key and Press R. In the run dialog, type inetcpl.cpl and click OK. Go to the Advanced Tab and choose Reset.
Select Delete Personal Settings and hit the reset button again. Once you've done all that, reboot your PC and test it out.

Resetting Internet Explorer

3. Check Disk For Errors

If this error occurs when opening files saved in a particular DRIVE other then C:\ then you should check that drive for errors. If you don't have any additional drives, just check the C:\ drive.

Hold the Windows Key and press E. On Windows 7/Vista you will see the drives listed.
On Windows 8/10, chose This PC from the left pane to view the drives. Right-click on the Selected Hard disk drive that you want to check and then select “Properties”.

Checking Disk for Errors

Click the Tools tab from the top and then click Check Now under Error- Checking. Check both the Options and the click Start.

4. Re-register the DLLs

Run the following commands in an escalated command prompt. Click Start, type cmd, and right click on the “cmd” program from the search results. Then select Run as Administrator.

Running cmd as Administrator

In the Command Prompt window, type the following commands and press the Enter key one by one:

regsvr32 vbscript.dll regsvr32.jscript.dll

Re-registering the DLLs

5. Rollback to the Previous Display Adapter Driver

To do this, hold the Windows Key and Press R. In the run dialog, type hdwwiz.cpl and click OK.
Scroll to the Display Adapters section in the Device Manager. Right click on it and select Properties.
Click Roll Back Driver and proceed with the instructions on the screen.

In some cases, this option is grayed out. If that is the case then attempt the methods below.

Display Adapter

Roll Back Driver

6. Add dllhost.exe to the DEP(Data Execution Prevention) Exception

Go to Start > Control Panel > System > Advanced System settings> Performance settings > Data Execution Prevention.

Select “Turn on DEP for all programs and services except those I select:”
Click on “Add“ and navigate to C:\Windows\System32\dllhost.exe on 32-bit Windows Machine and on a 64-bit machine, add C:\Windows\SysWOW64\dllhost.exe**
After adding dllhost.exe to the exception list, Apply changes or click OK.

Data Execution Prevention

7. Switch to List or Details view / disable thumbnails

We have already discussed that COM Surrogate is in charge of your thumbnails. In order to avoid problems with it, you can disable thumbnails.

In addition, you can switch to List or Details view by doing the following:

Open File Explorer.
Click the View tab and choose the List or Details option.

8. Update your Antivirus

It has been reported that certain antivirus software, such as Kaspersky antivirus, can sometimes cause issues with the COM Surrogate process.

In order to fix those issues, you should install the latest version of your current antivirus software.

Thank you for reading this article. I hope it will help you fix your COM Surrogate errors.

Ashutosh K Singh - freeCodeCamp.org

How to Build a Job Description Generator with NextJS and ChatGPT

Prerequisites

How to Setup and Install Next.js

How to Generate an OpenAI API Key

How to Build the UI of the App

How to Fetch Data from ChatGPT

How to Integrate the NextJS API Route

You did it! 🎉

Conclusion

10 Awesome JavaScript Libraries You Should Try Out

Conclusion

How to Build an Image Gallery with NextJS using the Pexels API and Chakra UI

What concepts & topics will we cover in this article?

Table of Contents

Prerequisites

How to Setup and Install Next.js

How to Generate the Pexels API Key

How to Add a Heading to the Gallery

How to Fetch Data from the Pexels API

How to Display Photos on the Page

How to Style Images with Chakra UI

How to Add Search Functionality to the Gallery

How to Add Dynamic Routes to Images

You did it! 🎉

Conclusion

How to Build a Markdown Previewer with React.js

Prerequisites

Setup

Design

A few things to note:

Inline Styles in React

Code

Installing Dependencies

Headings

<Badge className="text-align-center" variant="light"> Markdown Previewer Badge>

Sub Headings

TextArea

Marked.js

We did it! ?

What next?

What is dllhost.exe and COM Surrogate in Windows Task Manager? (Solved)

Should I remove COM Surrogate?

Checking the legitimacy of COM Surrogate

Common Errors

How can you fix these errors?

1. Update Codecs

2. Reset Internet Explorer

3. Check Disk For Errors

4. Re-register the DLLs

5. Rollback to the Previous Display Adapter Driver

6. Add dllhost.exe to the DEP(Data Execution Prevention) Exception

7. Switch to List or Details view / disable thumbnails

8. Update your Antivirus