DEV Community: Abdul Basit

Build Next.js Auth Pages UI in 10 Minutes with Flexy UI

Abdul Basit — Mon, 03 Mar 2025 09:31:02 +0000

Building authentication pages (login, sign-up, and forgot password) from scratch can be time-consuming. However, with Flexy UI, you can set up beautiful and fully functional authentication pages in just 10 minutes.

In this article, I'll walk you through the process of integrating Flexy UI components into a Next.js 15 application.

Step #1: Set Up a Next.js Application

First, create a new Next.js 15 project. Open your terminal and run:

npx create-next-app@latest

We will name the project nextjs-auth-ui

Note: Do not install Tailwind CSS from the terminal while creating project. We'll set it up manually.

Install Tailwind CSS & Lucide React

Follow the official Tailwind CSS installation guide for Next.js. Additionally, install Lucide React for icons or any other icon library of your choice:

npm install lucide-react

Now, let's structure the application.

Step #2: Structure the Application

For authentication pages, create the following folder structure and files inside your Next.js 15 project:

📂 root
 ├── 📂 app
 │   ├── 📂 auth
 │   │   ├── 📂 login
 │   │   │   ├── page.tsx
 │   │   ├── 📂 signup
 │   │   │   ├── page.tsx
 │   │   ├── 📂 forgot-password
 │   │   │   ├── page.tsx
 │
 ├── 📂 components
 │   ├── input.tsx
 │   ├── button.tsx
 │   ├── app-logo.tsx

This structure ensures code reusability and maintains clean organization.

Step #3: Create the Login Page

Visit Flexy UI Login Page and copy the login page code.

The provided code is written for React, but we can easily adapt it to Next.js.

Login Page Code

import DummyLogo from "@/components/app-logo"
import Button from "@/components/button"
import Input from "@/components/input"
import { Lock, Mail } from "lucide-react"
import { ChangeEvent, FormEvent, useState } from "react"

function Login() {
    const [user, setUser] = useState({ email: '', password: '' })
    const [errors, setErrors] = useState({ email: '', password: '' })
    const [showLoader, setShowLoader] = useState(false)

    const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
      const { name, value } = e.target
      setUser({ ...user, [name]: value })
      setErrors({ ...errors, [name]: '' })
    }

    const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
      event.preventDefault()

      let newErrors = { email: '', password: '' }

      if (!user.email.trim()) {
        newErrors.email = 'Please enter a valid email.'
      }

      if (!user.password.trim()) {
        newErrors.password = 'Password cannot be empty.'
      }

      if (newErrors.email || newErrors.password) {
        setErrors(newErrors)
        return
      }

      setShowLoader(true)

      // Mimic API request
      setTimeout(() => {
        setShowLoader(false)
        console.log('Login successful:', user)
        alert('Login successful!')
      }, 2000)
    }

    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="w-full max-w-md rounded-lg bg-white p-6">
          <DummyLogo />
          <h2 className="mb-8 text-center text-2xl font-semibold text-gray-800">Login to Flexy UI</h2>
          <form onSubmit={handleSubmit} className="">
            <Input
              type="email"
              label="Email"
              name="email"
              placeholder="Please enter your email"
              value={user.email}
              onChange={handleChange}
              error={errors.email}
              icon={<Mail size={20} />}
            />
            <div>
              <Input
                type="password"
                label="Password"
                name="password"
                placeholder="Please enter your password"
                value={user.password}
                onChange={handleChange}
                error={errors.password}
                icon={<Lock size={20} />}
              />
              {/* Forgot Password Link */}
              <div className="mb-4 text-right">
                <a href="/forgot-password" className="text-sm text-blue-600 hover:underline">
                  Forgot Password?
                </a>
              </div>
            </div>
            <Button text="Sign in" loading={showLoader} disabled={showLoader} />
          </form>
          {/* Sign-up Link */}
          <div className="mt-4 text-center">
            <span className="text-sm text-gray-600">New here? </span>
            <a href="/signup" className="text-sm font-medium text-blue-600 hover:underline">
              Sign up
            </a>
          </div>
        </div>
      </div>
    )
  }

  export default Login

Now, paste the login page code from Flexy UI into auth/login/page.tsx We will update it for Next.js once we will done with structure.

Reusable Components

The Login Page depends on three reusable components:

Input (Custom input field)
Button (Custom button component)
AppLogo (Dummy logo or app logo component)

Create these components inside the components folder.

Input Compnent

import { ChangeEvent } from "react"

interface InputProps {
    type: 'text' | 'number' | 'email' | 'password'
    label?: string
    value: string | number
    name: string
    placeholder: string
    error?: string
    disabled?: boolean
    onChange: (e: ChangeEvent<HTMLInputElement>) => void
    icon?: React.ReactNode
  }

  const Input: React.FC<InputProps> = ({
    type,
    name,
    disabled,
    placeholder,
    label,
    value,
    onChange,
    error,
    icon,
    ...props
  }) => {
    return (
      <div className="mb-6">
        {label && (
          <label htmlFor={label} className="mb-1.5 block text-sm font-medium text-[#344054]">
            {label}
          </label>
        )}
        <div className="relative flex items-center">
          {icon && <span className="absolute left-3 text-[#667085]">{icon}</span>}
          <input
            type={type}
            name={name}
            id={label}
            placeholder={placeholder}
            value={value}
            onChange={onChange}
            disabled={disabled}
            className={`w-full rounded-lg border border-[#D0D5DD] px-4 py-2.5 pl-10 text-gray-700 placeholder:text-[#667085] focus:border-blue-200 focus:outline-none focus:ring-2 focus:ring-blue-200 ${
              error && 'ring-2 ring-red-200'
            }`}
            {...props}
          />
        </div>
        {error && <p className="ml-3 mt-1 block text-sm text-red-600">{error}</p>}
      </div>
    )
  }

  export default Input

Button Component

import { LoaderCircle } from "lucide-react"

type ButtonProps = {
    text: string
    loading?: boolean
    disabled?: boolean
  }

  const Button: React.FC<ButtonProps> = ({ text, loading = false, disabled }) => {
    return (
      <button
        className="w-full  cursor-pointer rounded-lg border   border-neutral-800 bg-neutral-800 px-4 py-2 text-white hover:border-gray-700 hover:bg-gray-900 disabled:cursor-not-allowed disabled:bg-gray-300 disabled:text-gray-500
        "
        type="submit"
        disabled={disabled}>
        {!loading ? (
          text
        ) : (
          <LoaderCircle className="inline-block animate-spin text-center" color="#fff" />
        )}
      </button>
    )
  }

  export default Button

App Logo

const DummyLogo = () => (
  <div className="mb-4 flex justify-center">
    <span className="text-3xl font-bold text-yellow-500">⚡</span>
  </div>
)

export default DummyLogo

Once done, your Login Page UI should be ready.

Step #4: Create the Sign-Up Page

Visit Flexy UI Sign-Up Page and copy the code. Paste it into auth/signup/page.tsx.

import DummyLogo from "@/components/app-logo"
import Button from "@/components/button"
import Input from "@/components/input"
import { Lock, Mail, UserRound } from "lucide-react"
import { ChangeEvent, FormEvent, useState } from "react"

function Signup() {
    const [user, setUser] = useState({ name: '', email: '', password: '' })
    const [errors, setErrors] = useState({ name: '', email: '', password: '' })
    const [showLoader, setShowLoader] = useState(false)

    const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
      const { name, value } = e.target
      setUser({ ...user, [name]: value })
      setErrors({ ...errors, [name]: '' })
    }

    const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
      event.preventDefault()

      let newErrors = { name: '', email: '', password: '' }

      if (!user.name.trim()) {
        newErrors.name = 'Please enter your name.'
      }

      if (!user.email.trim()) {
        newErrors.email = 'Please enter a valid email.'
      }

      if (!user.password.trim()) {
        newErrors.password = 'Password cannot be empty.'
      }

      if (newErrors.name || newErrors.email || newErrors.password) {
        setErrors(newErrors)
        return
      }

      setShowLoader(true)

      // Mimic API request
      setTimeout(() => {
        setShowLoader(false)
        console.log('Signup successful:', user)
        alert('Signup successful!')
      }, 2000)
    }

    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="w-full max-w-md rounded-lg bg-white p-6">
          <DummyLogo />
          <h2 className="mb-8 text-center text-2xl font-semibold text-gray-800">
            Sign up to Flexy UI
          </h2>
          <form onSubmit={handleSubmit} className="">
            <Input
              type="text"
              label="Full Name"
              name="name"
              placeholder="Please enter your full name"
              value={user.name}
              onChange={handleChange}
              error={errors.name}
              icon={<UserRound size={20} />}
            />
            <Input
              type="email"
              label="Email"
              name="email"
              placeholder="Please enter your email"
              value={user.email}
              onChange={handleChange}
              error={errors.email}
              icon={<Mail size={20} />}
            />
            <Input
              type="password"
              label="Password"
              name="password"
              placeholder="Please enter your password"
              value={user.password}
              onChange={handleChange}
              error={errors.password}
              icon={<Lock size={20} />}
            />
            <div className="mt-10">
              <Button text="Create an account" loading={showLoader} disabled={showLoader} />
            </div>
          </form>
          {/* Login Link */}
          <div className="mt-4 text-center">
            <span className="text-sm text-gray-600">Already have an account? </span>
            <a href="/login" className="text-sm font-medium text-blue-600 hover:underline">
              Log in
            </a>
          </div>
        </div>
      </div>
    )
  }

export default Signup

Since we already have the Input and Button components, we don’t need to recreate them. Simply import and use them on the sign-up page.

Sign-Up Page UI

Your sign-up page should now be functional with Flexy UI.

Step #5: Create the Forgot Password Page

Visit Flexy UI Forgot Password Page and copy the code. Paste it into auth/forgot-password/page.tsx.

Just like before, import and use the existing Input and Button components.

import DummyLogo from "@/components/app-logo"
import Button from "@/components/button"
import Input from "@/components/input"
import { Mail } from "lucide-react"
import { ChangeEvent, FormEvent, useState } from "react"

const ForgotPassword = () => {
    const [email, setEmail] = useState('')
    const [error, setError] = useState('')
    const [loading, setLoading] = useState(false)
    const [success, setSuccess] = useState(false)

    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
      setEmail(e.target.value)
      setError('')
    }

    const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
      e.preventDefault()

      if (!email.trim()) {
        setError('Please enter a valid email.')
        return
      }

      setLoading(true)

      setTimeout(() => {
        setLoading(false)
        setSuccess(true)
      }, 2000)
    }

    return (
      <div className="flex min-h-screen items-center justify-center">
        <div className="mx-3 w-full max-w-lg rounded-lg border border-green-200 p-6 sm:p-10">
          <DummyLogo />
          <h2 className="mb-12 text-center text-2xl font-semibold text-gray-800">Forgot Password?</h2>

          {success ? (
            <p className="mb-6 text-center text-green-600">
              Email has been sent. Please check your inbox.
            </p>
          ) : (
            <form onSubmit={handleSubmit}>
              <Input
                type="email"
                label="Email Address"
                name="email"
                placeholder="Enter your email"
                value={email}
                onChange={handleChange}
                error={error}
                icon={<Mail size={20} />}
              />
              <Button text="Reset Password" loading={loading} disabled={loading} />
            </form>
          )}

          <div className="mt-4 text-center">
            <a href="/login" className="text-sm font-medium text-blue-600 hover:underline">
              Back to Login
            </a>
          </div>
        </div>
      </div>
    )
  }

export default ForgotPassword

Forgot Password Page UI

Once completed, your forgot password page should be ready.

Step #6: Convert Components to Next.js

Since Flexy UI is designed for React, we need to make minor modifications to adapt the components for Next.js:

Add 'use client' at the top of components using state.
Replace <a> tags with Next.js Link components and link to relevant pages.
Replace <img> tags with Next.js Image components for optimized images.

Final Code for Auth Pages

If you followed along and need the final Next.js code, here are the routes:

route: http://localhost:3000/auth/login

Login Page Next.js Code (`auth/login/page.tsx`)

'use client'
import DummyLogo from '@/components/app-logo'
import Button from '@/components/button'
import Input from '@/components/input'
import { Lock, Mail } from 'lucide-react'
import Link from 'next/link'
import { ChangeEvent, FormEvent, useState } from 'react'

function Login() {
  const [user, setUser] = useState({ email: '', password: '' })
  const [errors, setErrors] = useState({ email: '', password: '' })
  const [showLoader, setShowLoader] = useState(false)

  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
    const { name, value } = e.target
    setUser({ ...user, [name]: value })
    setErrors({ ...errors, [name]: '' })
  }

  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
    event.preventDefault()

    let newErrors = { email: '', password: '' }

    if (!user.email.trim()) {
      newErrors.email = 'Please enter a valid email.'
    }

    if (!user.password.trim()) {
      newErrors.password = 'Password cannot be empty.'
    }

    if (newErrors.email || newErrors.password) {
      setErrors(newErrors)
      return
    }

    setShowLoader(true)

    // Mimic API request
    setTimeout(() => {
      setShowLoader(false)
      console.log('Login successful:', user)
      alert('Login successful!')
    }, 2000)
  }

  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="w-full max-w-md rounded-lg bg-white p-6">
        <DummyLogo />
        <h2 className="mb-8 text-center text-2xl font-semibold text-gray-800">Login to Flexy UI</h2>
        <form onSubmit={handleSubmit} className="">
          <Input
            type="email"
            label="Email"
            name="email"
            placeholder="Please enter your email"
            value={user.email}
            onChange={handleChange}
            error={errors.email}
            icon={<Mail size={20} />}
          />
          <div>
            <Input
              type="password"
              label="Password"
              name="password"
              placeholder="Please enter your password"
              value={user.password}
              onChange={handleChange}
              error={errors.password}
              icon={<Lock size={20} />}
            />
            {/* Forgot Password Link */}
            <div className="mb-4 text-right">
              <Link href="/auth/forgot-password" className="text-sm text-blue-600 hover:underline">
                Forgot Password?
              </Link>
            </div>
          </div>
          <Button text="Sign in" loading={showLoader} disabled={showLoader} />
        </form>
        {/* Sign-up Link */}
        <div className="mt-4 text-center">
          <span className="text-sm text-gray-600">New here? </span>
          <Link href="/auth/signup" className="text-sm font-medium text-blue-600 hover:underline">
            Sign up
          </Link>
        </div>
      </div>
    </div>
  )
}

export default Login

Sign-Up Page Next.js Code (`auth/signup/page.tsx`)

route: http://localhost:3000/auth/signup

'use client'
import DummyLogo from '@/components/app-logo'
import Button from '@/components/button'
import Input from '@/components/input'
import { Lock, Mail, UserRound } from 'lucide-react'
import Link from 'next/link'
import { ChangeEvent, FormEvent, useState } from 'react'

function Signup() {
  const [user, setUser] = useState({ name: '', email: '', password: '' })
  const [errors, setErrors] = useState({ name: '', email: '', password: '' })
  const [showLoader, setShowLoader] = useState(false)

  const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
    const { name, value } = e.target
    setUser({ ...user, [name]: value })
    setErrors({ ...errors, [name]: '' })
  }

  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {
    event.preventDefault()

    let newErrors = { name: '', email: '', password: '' }

    if (!user.name.trim()) {
      newErrors.name = 'Please enter your name.'
    }

    if (!user.email.trim()) {
      newErrors.email = 'Please enter a valid email.'
    }

    if (!user.password.trim()) {
      newErrors.password = 'Password cannot be empty.'
    }

    if (newErrors.name || newErrors.email || newErrors.password) {
      setErrors(newErrors)
      return
    }

    setShowLoader(true)

    // Mimic API request
    setTimeout(() => {
      setShowLoader(false)
      console.log('Signup successful:', user)
      alert('Signup successful!')
    }, 2000)
  }

  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="w-full max-w-md rounded-lg bg-white p-6">
        <DummyLogo />
        <h2 className="mb-8 text-center text-2xl font-semibold text-gray-800">
          Sign up to Flexy UI
        </h2>
        <form onSubmit={handleSubmit} className="">
          <Input
            type="text"
            label="Full Name"
            name="name"
            placeholder="Please enter your full name"
            value={user.name}
            onChange={handleChange}
            error={errors.name}
            icon={<UserRound size={20} />}
          />
          <Input
            type="email"
            label="Email"
            name="email"
            placeholder="Please enter your email"
            value={user.email}
            onChange={handleChange}
            error={errors.email}
            icon={<Mail size={20} />}
          />
          <Input
            type="password"
            label="Password"
            name="password"
            placeholder="Please enter your password"
            value={user.password}
            onChange={handleChange}
            error={errors.password}
            icon={<Lock size={20} />}
          />
          <div className="mt-10">
            <Button text="Create an account" loading={showLoader} disabled={showLoader} />
          </div>
        </form>
        {/* Login Link */}
        <div className="mt-4 text-center">
          <span className="text-sm text-gray-600">Already have an account? </span>
          <Link href="/auth/login" className="text-sm font-medium text-blue-600 hover:underline">
            Log in
          </Link>
        </div>
      </div>
    </div>
  )
}

export default Signup

Forgot Password Page Next.js Code (`auth/forgot-password/page.tsx`)**

route: http://localhost:3000/auth/forgot-password

'use client'
import DummyLogo from '@/components/app-logo'
import Button from '@/components/button'
import Input from '@/components/input'
import { Mail } from 'lucide-react'
import Link from 'next/link'
import { ChangeEvent, FormEvent, useState } from 'react'

const ForgotPassword = () => {
  const [email, setEmail] = useState('')
  const [error, setError] = useState('')
  const [loading, setLoading] = useState(false)
  const [success, setSuccess] = useState(false)

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value)
    setError('')
  }

  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()

    if (!email.trim()) {
      setError('Please enter a valid email.')
      return
    }

    setLoading(true)

    setTimeout(() => {
      setLoading(false)
      setSuccess(true)
    }, 2000)
  }

  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="mx-3 w-full max-w-lg rounded-lg border border-green-200 p-6 sm:p-10">
        <DummyLogo />
        <h2 className="mb-12 text-center text-2xl font-semibold text-gray-800">Forgot Password?</h2>

        {success ? (
          <p className="mb-6 text-center text-green-600">
            Email has been sent. Please check your inbox.
          </p>
        ) : (
          <form onSubmit={handleSubmit}>
            <Input
              type="email"
              label="Email Address"
              name="email"
              placeholder="Enter your email"
              value={email}
              onChange={handleChange}
              error={error}
              icon={<Mail size={20} />}
            />
            <Button text="Reset Password" loading={loading} disabled={loading} />
          </form>
        )}

        <div className="mt-4 text-center">
          <Link href="/auth/login" className="text-sm font-medium text-blue-600 hover:underline">
            Back to Login
          </Link>
        </div>
      </div>
    </div>
  )
}

export default ForgotPassword

In just 10 minutes, you have built Next.js authentication pages using Flexy UI! 🚀

If you are looking for professional, beautifully designed UI components, visit Flexy UI to speed up your development process.

Happy coding! 🎉

Open source Next.js Developer Portfolio Template [Modern + Responsive]

Abdul Basit — Wed, 12 Feb 2025 12:24:59 +0000

A good developer portfolio has 4 essential features:

Appears on Google search
Grabs attention with an eye-catching design
Includes four main sections: tagline, projects, services, and skills
Includes blogs to showcase understanding of topics

Flexy Dev is a Next.js portfolio template designed with Tailwind CSS, built by an indie developer. Clone from GitHub Repo

Live Demo of App

Folder Structure Overview

content: Contains data for projects. Add any additional section data here.
Components: All the UI components of app e.g. navbar, hero, projects, footer etc
src/services: Retrieves data (e.g., projects) using the fs module. Update this file if you change or modify the data source.
src/assets: Stores all assets, including images and icons, additionally you can add audio, video, and local fonts here.
src/hooks: Holds custom hooks.
src/lib/types.d.ts: Contains TypeScript types.
util/icons: Centralizes icons and images for easy updates.
appData: Includes app data, such as services and skills (including icons).
app/page.tsx: Root file of the app.
app/layout.tsx: Manages global and SEO configurations (e.g., fonts, head tags, analytics).

How to run a project?

After downloading the project, run npm install (or npm i) in the project directory to install dependencies.
Once dependencies are installed, start the server by running npm run dev.

Remember (Add .env file)

Add this line in .env.local file
NEXT_PUBLIC_SITE_URL=http://localhost:3000

Customizing the Template

Navbar
- File: navbar.tsx
  - Update the navbar name from john_doe to your name.
Hero Section
- File: hero.tsx
  - Edit the title, description, and optionally, replace the SVG with your image.
Projects Section
- File: content/projects
  - Replace the dummy projects with your own.
  - If you are modifying the properties or going to add new ones, then update types in types.d.ts.
Services Section
- File: appData
  - Add your services with relevant icons. If icons are missing, contact me on LinkedIn or via email.
Skills Section
- File: appData
  - Add your skills with relevant icons. Contact if you can’t find specific icons online.
Footer
- Location: Visit Flexy UI
  - You can replace the default footer or choose from additional variants from Flexy UI (simple or column footer).

Configuring Online Images

To display online images (e.g., from a CDN) in your deployed project, configure allowed image hostnames in next.config.js.

For demo purposes, we’re using Unsplash images. You can use any image host, but be sure to add the hostname in your configuration.

Replace 'unsplash' with your own image hostnames if using a different service.

Theming and Styling

We use Tailwind CSS for styling. In tailwind.config.ts, you can customize theme settings such as fonts, colors, and animations.

SEO & Branding

Favicon: Replace the default favicon with your own.
Metadata: Update meta title and description in layout.tsx.
SEO Files: robots.ts and sitemap.ts are included for search engines.
Open Graph Images:
- Replace opengraph-image.png and twitter-image.pngwith custom images.
- Alternatively, edit opengraph-image.tsx to generate images dynamically.

Premium Portfolio Template

The premium version of FlexyDev includes a Blog feature. You can write blogs in Markdown (.MDX) format, which also supports code snippets. You can find more details here.

Analytics

You can integrate analytics easily:

Simple Analytics or Vercel Analytics: Quick and easy to set up.
Google Analytics 4: Also straightforward.

Deployment Notes

Before deploying, add environment variables from .env.local wherever you are deploying:

NEXT_PUBLIC_SITE _URL: Set to your actual site URL (e.g., https://johndoe.com).
For local development, use the localhost URL.

Live Demo of App

Clone the code from GitHub

For any query or suggestion, I am available on LinkedIn or email me at basit@codevertiser.com

How to Build a Simple Chrome Extension to Search Selected Text on YouTube

Abdul Basit — Sun, 01 Sep 2024 15:20:15 +0000

Have you ever wanted to search for something you read on a webpage directly on YouTube?

With a Chrome extension, you can easily add this feature to your browser.

In this article, I'll walk you through how to create a simple Chrome extension that allows you to search any selected text on YouTube with just a click.

Building Chrome extensions can be a great way to customize your browsing experience. This extension is perfect for anyone who frequently uses YouTube to find videos related to text they read online. You’ll also learn the basics of how Chrome extensions work, which can help you build more complex extensions in the future.

Let's get started with creating your very first Chrome extension!

Which API to Use for Creating Chrome Extensions

Chrome extensions are built using the Chrome Extensions API, which is similar to web development. You’ll use HTML, CSS, and JavaScript to create your extension, and the Chrome Extensions API provides specific tools to interact with the browser, such as adding context menu items, opening new tabs, or modifying pages.

For this tutorial, we’ll be using the contextMenus API to add a right-click option that will search selected text on YouTube.

How to Start

The first step to building a Chrome extension is creating a folder that will hold all of your extension’s files. Inside this folder, you’ll need the following:

manifest.json: The configuration file that defines your extension.
background.js: A script that runs in the background of your extension.
(Optional) popup.html: If you want to create a popup window for your extension.

Let’s begin by creating the manifest.json file.

What is the `manifest.json` File?

The manifest.json file is the most important file in your Chrome extension. It tells Chrome what your extension does and how it should behave. Here’s a breakdown of the key parts of the manifest.json file:

jsonCopy code
{
  "manifest_version": 3,
  "name": "YouTube Text Search",
  "version": "1.0",
  "description": "Search selected text on YouTube.",
  "permissions": [
    "contextMenus",
    "tabs"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

Key Sections of `manifest.json`:

manifest_version: This defines the version of the Chrome Extensions API you're using. Currently, Chrome uses version 3.
name: The name of your extension, which will appear in the Chrome extensions manager.
version: The version number of your extension. Each time you update your extension, you'll increment this number.
description: A short description of what your extension does.
permissions: This section lists the permissions your extension needs to function. In this case, we need access to the contextMenus (to add a right-click menu) and tabs (to open new tabs).
background: This section specifies a background.js file that will run in the background and handle the logic of your extension. In this case, it manages the context menu and the search functionality.
action: This section defines a popup window for your extension. It’s optional for this tutorial, but you can add a simple HTML file here if you want a popup interface.

Step 1: Write the Background Script (`background.js`)

The background script will handle the logic for adding the context menu and performing the search. Here’s a basic version of background.js:

javascriptCopy code
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "searchOnYouTube",
    title: "Search on YouTube",
    contexts: ["selection"]
  });
});

chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "searchOnYouTube") {
    const query = info.selectionText;
    const youtubeSearchUrl = `https://www.youtube.com/results?search_query=${encodeURIComponent(query)}`;
    chrome.tabs.create({ url: youtubeSearchUrl });
  }
});

Step 2: (Optional) Create a Popup (`popup.html`)

This file is optional. It provides a simple interface for your extension when clicked. If you want to add a popup, create a basic popup.html file with some introductory text:

htmlCopy code
<!DOCTYPE html>
<html>
<head>
  <title>YouTube Text Search</title>
</head>
<body>
  <h1>Search Text on YouTube</h1>
  <p>Select text on any webpage, right-click, and choose "Search on YouTube."</p>
</body>
</html>

Step 3: How to Test Your Chrome Extension

Once you’ve created your manifest.json, background.js, and (optionally) popup.html, you’re ready to test your extension.

Open Chrome and go to chrome://extensions/.
Enable Developer mode by toggling the switch at the top right.
Click “Load unpacked” and select the folder that contains your extension files.
Now, go to any webpage, select some text, right-click, and choose “Search on YouTube.” A new tab should open with YouTube search results for your selected text.

Step 4: How to Upload Your Chrome Extension to the Chrome Web Store

If you’re happy with your extension and want to share it with the world, you can upload it to the Chrome Web Store. Here’s how:

Create a Zip File: Zip up your extension files (manifest.json, background.js, popup.html, and any other necessary files).
Go to the Chrome Web Store Developer Dashboard: Visit the Chrome Web Store Developer Dashboard and log in with your Google account.
Pay the Developer Fee: There is a one-time $5 fee to publish extensions on the Chrome Web Store.
Upload Your Zip File: Click “Add a new item” and upload your zipped extension.
Fill in the Details: Complete the form with your extension’s name, description, and other information.
Submit for Review: Once everything is filled in, submit your extension for review. Chrome will check your extension, and if it passes, it will be published on the Chrome Web Store.

Now you’ve built and published your very first Chrome extension! By following these steps, you’ve learned the basics of how Chrome extensions work, and you can now build more advanced extensions in the future. Happy coding!

5 Best ReactJS Projects for Beginners in 2024 [Source Code Included]

Abdul Basit — Fri, 30 Aug 2024 13:36:08 +0000

Since you are looking for beginner React projects, I will not scare you with jargon like debouncing, payment integration, testing, authentication, and authorization. We'll save those topics for another day.

The goal of this guide is clear; not just to give you project ideas but also to empower you to build them.

I won't bore you with traditional tips on mastering skills; instead, I'll share practical approaches and useful links.

In this guide, I won't provide random GitHub projects. These are the customized projects I built myself for people like you.

Keep reading!

If you want to build a project in Reactjs, you need to focus on two skills:

Creating the user interface.
Writing the logic to make the UI work.

In this article, I will guide you on both skills by giving you useful resources.

Not finished here;

At the end of the article, I will suggest 2 project ideas. If you build them, you can either flip them or, by adding some advanced features, you can charge a subscription.

After all, it will be a great addition to your portfolio.

Shall we start?

Prerequisite

First things first, React is built on top of JavaScript. If you're not good at JavaScript, learn it here first. The better your JavaScript, the better your React will be.

I assume you already know

what React is, and its advantages
how to create a React project using Vite or Create-React-App
how to create simple components in React.js
What are state and props, the rest of the things these projects will teach you

I have divided this guide into 3 sections;

Sharpen Your Axe: Learn how to build 6 most used and fundamentals reusable components in React.js
React Projects for Beginners: Challenge yourself to create 5 projects and improve your business logic skills
Micro SaaS React Project Ideas: Explore 2 ReactJS project ideas that can become micro SaaS

Are you ready?

Learn to Build 6 Reusable and Responsive Components in ReactJS

Since you are looking for beginner projects, I would highly recommend to go through these resources first, before moving toward real projects.

Learn how to build reusable components in React.js; it's a building block. It will take you less than an hour, and you will thank me later.

After going through these written tutorials, you will not only learn how to build a variety of UI components in ReactJS but also how to make it functional, reusable, and responsive.

Here is a list of React responsive UI components I will teach you to build step by step.

Input
Navbar
Progress Step
Editable Table
Custom Radio Button
Loading Spinner Button

Let's talk about them one by one and their importance.

1. Navbar

Reading Time: 9 Minutes

Creating a simple navbar for a website is a straightforward process. Start by creating a nav element with two additional tags (div): one for the logo and the other for a list of navigation elements. Then, make it flex using the CSS flexbox property, and you've got yourself a basic navbar.

However, the story doesn't end there.

To enhance its functionality, we need to make the navbar responsive and put it inside a container so it looks good on both mobile screens and larger displays.

Read about this and other valuable tips and tricks in the article on how to create a responsive navbar.

2. Input Component

Reading Time: 8 Minutes

In real-world projects, you have to deal with forms, and forms typically include input components.

By writing code for the input component, we ensure it is usable. To achieve this, we use props to handle various scenarios, such as when the user inputs incorrect values or leaves fields empty; we need to show an error.

In this article, you will explore how to build an input component in ReactJS with TypeScript.

3. Editable Table

Reading Time: 7 Minutes

While looking at big applications, you may wonder how certain features have been created. You can also create these kind of features. For this, you need to follow the baby steps.

In this article, you will be creating a table in ReactJS with editable text fields. Yes, it's simple; you need to understand the trick which will improve your React skills and help you to create big applications.

4. Custom Radio Button

Reading Time: 8 Minutes

Once again, in this article, you will learn another React trick; the technique to create a custom radio button in ReactJS.

UI/UX designers often design custom radio buttons. To make the UI look appealing they avoid the default radio button style we get by writing <input type="radio" /> code.

How do you make a custom radio button in ReactJS?

There is also a trick; read the article to add this technique to your arsenal.

5. Loading Spinner Button

Reading Time: 9 Minutes

We cannot neglect user experience while building the app. For example, if a user is on the login form after filling in the information, when the user hits the submit/login button, the request goes to the API and takes a couple of seconds to get the response.

During this time, it's important to engage the user. To achieve this, we need to show the loading spinner inside the submit button to let the user know it's processing.

If the concept is not clear to you, don't worry; read about the details in this article by writing code for the loading spinner button in ReactJS.

6. Progress Step Component

Reading Time: 11 Minutes

I am trying to add variations in components to get you able to create any type of React component in the future.

The progress step component comes into play when we need to guide users through a multi-step process, providing a clear visual indication of their current position and the steps remaining.

You may have seen the progress step component in an E-commerce app several times. Add this component to your bank as well.

If you have gone through all the above React components and learned how to build them, you are done with the first step, and you are all set to start writing logic and creating mini projects in ReactJS.

5 Beginner Friendly React Projects to Improve Business Logic

If you're searching for React project ideas for beginners, it means you want to avoid falling into tutorial hell. You don't want to follow tutorials line by line; instead, you aim to create something on your own.

The purpose of this guide is also the same, to empower you to build things in ReactJS without any help.

All the learning you will gain by building these 5 React projects will give you so much confidence that you will be able to build two of the famous apps in ReactJS, which can become a source of earning potential for you.

In these projects, you will be given a designed responsive UI in Reactjs, and you have to make it functional by writing business logic to improve your frontend skills.

List of ReactJS projects for beginners:

Text Analyzer Tool (Word Counter Plus)
React Password Generator
Random Quote App
React TypeScript CRUD App
React Memory Game

After completing these projects on your own, you will be able to perform all the tasks in React that a beginner has to do:

Fetch data from APIs
Handle forms effectively
Perform CRUD operations
Apply logic to strings, arrays, and objects
Good understanding of React useState, useEffect, and useRef hooks
Organize a scalable project and write clean code

And much more.

You can fork the starter project from GitHub.

1. Text Analyzer Tool

Estimated time to build: 2-7 hours

Core concepts you will learn:

How to deal with forms
How to use useState, useEffect, and useRef hooks

The Text Analyzer tool is a mini ReactJS beginner project that focuses on hooks and textarea.

In this project, you will calculate typed or pasted text values by applying logic to it.

The text area should calculate and show the following:

Words
Characters
Sentences
Paragraphs
Average Reading Time
Longest Word in Paragraphs
Number of Pronouns (List Provided)

Demo App

Text Analyzer Tool Project Details

2. React Typescript CRUD Tasklist App

Estimated time to build: 3-8 hours

Core concepts you will learn:

How to perform CRUD operation
How to pass props from child to parent and parent to child

If you ask me for fundamentals to learn, not only in React but in any language or framework, I would suggest “learn CRUD”; yes, all apps need CRUD functionality.

In the React TypeScript Tasklist project, you will create an application where users can create, read, update, and delete tasks.

Demo App

CRUD Typescript Tasklist Project Details

3. React Password Generator

Estimated time to build: 2-6 hours

In this challenge, you will develop logic for a password generator, that has the following features:

Creating and validating a strong password
Generating a password with specified strength and desired characters
Copying the password to the clipboard

It seems easy but all the above concepts are very important to create a big application in the future, so do not ignore this project.

Demo App

Password Generator Project Details

4. React Random Quote Generator

Estimated time to build: 2-5 hours

Core concepts you will learn:

Fetch data from the server
Share data on WhatsApp and Twitter

The Random Quote Generator is an easy beginner React project with API integration. How to interact with API data and display it in React.js is a fundamental skill that a beginner should have.

Demo App

Random Quote App Project Details

5. React Memory Game

Estimated time to build: 4-10 hours

I had a great time while creating the Memory Game project.

This project is purely focused on building logic skills. While writing the logic for the memory game, you'll need to handle various conditions, and you'll learn a lot. It will strengthen your logical thinking muscles.

Demo App

Memory Game Project Details

If you are looking for a working solution, you can download it from Gumroad for free.

React Project Ideas for Micro SaaS

In this guide, we first discussed how to build individual components in React. In the second section, we covered writing business logic for ReactJS projects and making the UI functional.

If you've followed these two steps, you have a solid understanding of how to build UI and write logic in React.js.

Congratulations! You're all set to build your very first React app that can be monetized through flipping or by displaying relevant ads or affiliate products.

Here are two ReactJS project ideas I'm going to talk about:

Beautify Screenshots - Project #1

Estimated time to build: 1-3 weeks - if you spend 3 hours or more daily.

Often, we need to share a screenshot of some portion of a web page on social media or with friends. There are apps that beautify these screenshots, for example, by adding a background, captions, positioning, and many other elements.

If you google the tool, you'll get the idea.

But remember, do not copy the UI and functionality exactly. Create your version of the app that serves better.

For example, you can create templates, add title and subtitle features, and allow users to add multiple images.

I hope you got the idea.

Dashboard for Listing App - Project #2

Estimated time to build: 2-4 weeks - if you spend 3 hours or more daily.

All startups and apps need a dashboard. There are some common functionalities that each dashboard has, for example, adding, editing, and deleting a product (a product could be anything).

Basically, you are building a dashboard for a listing app. E-commerce is a listing app, any kind of directory is a listing app.

But do not focus only on the UI (the internet is full of dashboard UIs), build a backend as well. You can use Firebase, Supabase, or Appwrite as a backend.

Add generic features that users can modify as per their requirements.

After building these projects you might face challenges in flipping or earning through ads or affiliate products, but the three gains you'll get are much better than failures:

A great addition to your portfolio.
Something you can talk about in an interview or community.
Your React skills will be upgraded, and you'll gain a lot of confidence.

Let me know via LinkedIn or email if this guide helps you.

What difficulties are you facing in your React journey?

I Published 4 Free ReactJS Coding Challenges: Build Functionality for Responsive UI

Abdul Basit — Mon, 12 Jun 2023 10:19:53 +0000

Front-end developers play multiple roles in software companies. If we categorize these roles, we will see two broad categories: UI developers and business logic developers. The UI developer implements the design, while the other implements the logic and makes the app functional.

The second one requires sound logic practice because you have to make UI work accordingly. We are here with some interesting Reactjs Challenges for you that will help you test your ReactJS skills.

These are basically coding challenges in which the user interface is already built in Reactjs and it is also responsive but not functional, and your job is to make them functional by writing business logic using Reactjs mainly Javascript.

In the section below "User Stories" are given so to make the UI functional you have to fulfill all the "User Stories".

Tech Stack: ReactJS with Typescript

Who Can Use these ReactJS Coding Challenges?

Beginner developers looking for a fun little frontend coding challenges to test their ReactJS logic-building skills
Developers interested in building small tools that they can convert into micro SAAS
Companies looking for ReactJS hiring challenges to assess their candidate's ReactJS coding skills

List of Reactjs Challenges

All challenges are free. I wanted the challenges to be different and designed them carefully. In each challenge, I have covered different skill sets of JavaScript and Reactjs, from the array to object, the string to regex, and Reactjs hooks.

Challenge #1: Text Analyzer Tool

It is an easy challenge in which you have to build logic for a text analyzer that will count the number of words, letters, paragraphs, and more of the text written in the textarea.

Challenge Description: https://www.codevertiser.com/react-online-word-sentences-counter/
Demo App: https://reactjs-text-analyzer.netlify.app/

Challenge #2: React Password Generator

This challenge is suitable for beginners as well. In this challenge, you will develop logic for a password generator, including options for creating and validating a password with a specified strength, copying the password, and passwords with desired characters.

Challenge Description: https://www.codevertiser.com/react-password-generator/
Demo App: https://reactjs-password-generator.vercel.app/

Challenge #3: Random Quote Generator

Challenge yourself to build a random quote generator using ReactJS and showcase your front-end development skills. Flourish your creativity with this fun code challenge! This challenge differs slightly from Text Analyzer and Password Generator because you need to fetch data from json-server using Axios.

Challenge Description: https://www.codevertiser.com/reactjs-challenge-3-random-quote-generator/
Demo App: https://react-random-quote-application.netlify.app/

Challenge #4: CRUD Typescript Tasklist App

This React Typescript Tasklist/Todo challenge requires you to perform CRUD operations with instructions to write clean, reusable, manageable, and scalable code. This challenge is different and more challenging than the last three challenges you have completed. If you can complete this ReactJS Typescript Tasklist challenge independently, you can be easily hired as an intern/junior React developer.

Challenge Description: https://www.codevertiser.com/reactjs-challenge-4-crud-tasklist-app/
Demo App: https://react-tasklist.vercel.app/

What to do when you complete ReactJS challenge?

Compare your code with mine: As there are many ways to do coding challenges and build logic, you can go through my code to compare and learn to write less lines of code.
Add to your Portfolio: You can also add these challenges to your portfolio, but after changing the overall layout of the tool. You can use your own theme and customize it in any way to make it more impressive. Since we are using themes for CSS, you only have to replace or add variables in the theme file.
Share on your Twitter handle: You can also share your answer or your experience of ReactJS coding challenge on Twitter by adding #codevertiser #100DaysOfCode (if you are following the journey), #frontEndChallenges #reactjsChallenges

Can you star the ReactJS Challenges GitHub repo?

I love creating free content that helps developers start their jobs and excel in their careers. Each challenge requires a lot of time to create.

First, I brainstorm the challenge idea. Then, I collaborate with a freelance UI/UX designer to design the idea. After that, I convert the design into code and write content for the challenge.

It's a lengthy process that requires time, energy, and resources.

By starring ReactJS Coding Challenges repository, you will motivate me to create more free content like this.

3 Advanced Methods to Measure Function Execution Time in JavaScript

Abdul Basit — Thu, 16 Mar 2023 15:28:17 +0000

In JavaScript, measuring the performance of a function can be a crucial aspect of optimizing your code. There are various ways to measure how long a function takes to execute, and in this article, we'll explore 3 of the most common methods. Whether you prefer using console timers, Date objects, or performance.now(), we'll provide you with practical examples that you can use to measure the time taken by your functions.

By the end of this article, you'll have a better understanding of how to measure your JavaScript code's performance and make informed decisions to optimize it.

1. Using console.time() and console.timeEnd():

These two methods can be used to start and stop a timer respectively. They can be used to measure the time taken by a function by calling console.time() before the function and console.timeEnd() after the function, and passing the same label to both methods. Here's an example:

console.time("myFunction");
// Call your function here
console.timeEnd("myFunction");

2. Using Date objects:

You can also measure the time taken by a function using Date objects. You can record the current time before and after the function call and subtract the two to get the time taken by the function. Here's an example:

const start = new Date();
// Call your function here
const end = new Date();
const timeTaken = end - start;
console.log(`Time taken: ${timeTaken}ms`);

3. Using performance.now():

The performance.now() method returns a high-resolution timestamp that can be used to measure the time taken by a function. You can record the current time before and after the function call and subtract the two to get the time taken by the function. Here's an example:

const start = performance.now();
// Call your function here
const end = performance.now();
const timeTaken = end - start;
console.log(`Time taken: ${timeTaken}ms`);

All of these methods can be useful in different scenarios, and you can choose the one that works best for you.

By implementing these techniques and regularly monitoring your code's performance, you can identify potential bottlenecks and improve your application's overall performance. We hope this article has provided you with a better understanding of how to measure your JavaScript code's performance and will help you write more efficient and optimized applications.

What methods do you use to optimize JavaScript functions? Share your strategies in the comment section below.

I Have Made A Free Reactjs Waitlist Template With Light and Dark Theme

Abdul Basit — Tue, 07 Jun 2022 13:56:42 +0000

GitHub

Live Preview

Current Version

Styled Components for styling
Structural and cleaner code
Isolated components, most of them can be used in any of your projects
No hard-coded color, we are using a theme file for colors
We used site data or dummy data folder for navbar, footer, and other components data

Future Updates

I am working on one more variant of the template
I may also add backend soon, so users can track who signup

If this template helps you in any way, please consider giving it a star on GitHub.

I would appreciate your feedback.

My Top 5 Methods To Develop UIs Faster in ReactJS

Abdul Basit — Sun, 18 Apr 2021 20:52:55 +0000

In an IT setup when a team comes up with a product idea, the first thing they do is the paperwork. Yes, they go through some documentation like feasibility reports, use cases, offering features, market research, and other related aspects of it.

After all the documentation stuff is done, they ask designers to design the application’s UI. As soon as the design is ready, frontend developers are asked to develop the UI of the app while the backend developer works on its APIs.

So being a frontend developer, let me walk you through the top 5 methods that I keep in mind and personally follow them to build UIs faster in ReactJS app, it may include:

Method#1 Analyze The Design
Method#2 Build Site Data
Method#3 Set State
Method#4 Integrate ESLint
Method#5 Integrate Storybook

Method#1: Analyze The Design, Understand The Designing Stuff

In this method, you have to analyze the design and think of various patterns to build the app’s UI. I spend at least 30 minutes analyzing and think of different strategies and patterns I can apply. I analyze the design based on three things, which are:

Searching For Wrappers - What do I mean by wrapper here? Wrapper is something that takes children as props. Let's say if we have a modal on 3 different places in our app that has the same design for title, close icon and margin, paddings. For that, I will make a ModalWrapper component. Similarly, we can make a wrapper for cards.

Let me walk you through one more example.

Let's say we have the same header and footer on each screen, so we make a layout wrapper something like this.

import Footer from '../Footer'
import Header from '../Header'

function Layout({ children }) {
  return (
    <div>
      <Header />
      {children}
      <Footer />
    </div>
  )
}

export default Layout

Reusable Components - My second step is, I try to note down what I can reuse in my application. For example, buttons, input with labels, errors, etc. The main idea of noting down all the reusable components is to create consistency and save time by not writing the same line of code again and again.

Reusable components are one that changes via props. (Wrappers are also reusable components but it takes children so l call it wrapper)

Understanding The Grid System - Designers build site using a grid. It will help us to make site responsive easily when it comes to smaller devices. Understanding the grid system is really important for responsiveness.

In order to make site responsive, we use flex, grid, or width in percentages for responsiveness depends on the scenario.

This is the only method that is going to take much of our time among all other methods. But, there is a reason for it. It sets the roadmap throughout the app and helps us structure our code.

Method#2: Build Site Data, Use The Dummy Data

While building UIs we often come across a list of data, since we don't have APIs ready, so in order to keep the process smooth and fast, I create the dummy data and map it, where needed. And also, put it in a new folder created by the name site-data.

When we will be integrating APIs, we will be deleting folders inside site-data.

But how you are gonna manage the site-data, it’s totally up to your choice!

Below is the snippet of how I build the site data folder for an example data (on the left) that I often encounter practically when designing the UIs:

Create an object there something like this and export it.

const employess = {
  header: [
    { title: '#' },
    { title: 'Name' },
    { title: 'Email' },
    { title: 'Phone' },
  ],
  body: [
    {
      id: 1,
      name: 'John Doe',
      email: 'john@email.com',
      phone: '1234567'
    },
    {
      id: 2,
      name: 'John Doe',
      email: 'john@email.com',
      phone: '1234567'
    },
    ....
  ]
}

export { employess }

This practice helps you to make your components clean and having a light version of CMS (if you like) for your app that can be easily managed.

Method#3: Set The State, Dealing With Overtime Data Changes

So whenever you come across a part of the design of an app that has to be interactive, especially using forms, checkboxes, dropdown, etc. Always try to set up a state for them to get the changed data from the users.

In the case of forms, I use console.log for all the form's values input on the submit button. It has been really super helpful and fast when I have to integrate the APIs.

Here is the example,

const UserProfile = () => {
  const [userProfile, setUserProfile] = useState({
    name: '', oldPassword: '', newPassword: '', email: ''
  })

  const onChangeProfile = (e) => {
    const { name, value } = e.target
    setUserProfile({ ...userProfile, [name]: value })
  }

  const onSaveProfile = (e) => {
    e.preventDefault()
    console.log('userProfile', userProfile)
  }

  const { name, oldPassword, newPassword, email } = userProfile

  return (
    <>
      ...
    </>
  )
}

Method#4: Integrate ESlint, Consistency Is The Key

Eslint really helps us to make our code consistent. They don't let us have unused imports or variables and force us to follow consistency all over the app. If single quotes then we have to use single quotes all over the app for Javascript and double quotes for attributes like className and props etc.

Most of the time, I use the Airbnb ESlint code convention to reduce the number of errors on the spot while saving a lot of time.

Method#5: Integrate Storybook, Fast Visual Testings

Storybook is great when we are building themes. It helps us build and test our component in isolation, by changing its props and responsiveness. It can serve other purposes as well, such as maintaining a component library, series of same designed components, sharing it within the team to get feedback, and so on.

When to use Storybook?

It really depends on requirements and kind of project we are working on. I don't use storybook for small apps or landing pages that consist of couple of screens.

To Sum Up…

Each of these methods has been practically implemented by myself and has been proven useful to build the UIs faster in ReactJS.

I hope this article will help you to build UIs in ReactJS. If my experience and knowledge that I’ve shared helped you in any way, please comment below.

5 Mistakes I Wish I Didn't Make As A Self-Taught Developer

Abdul Basit — Sat, 13 Mar 2021 16:42:44 +0000

Long story short, I did my bachelor in Mechanical Engineering, during my bachelor, I got interested in programming. Now I work as a MERN Stack developer in a well-established company.

When I look at a year or two ago, I realize I could do some things even better. I don't regret my choices, because this is something that has passed, but I don't want newbies to repeat the same mistakes.

Mistake#1. Rushing, not understanding things

I, being a self-taught programmer, loved the increasing green color of the course progress bar! To me, it felt like recognition or achievement of getting things done. I was curious enough to study multiple topics in one sitting. I was in a rush to learn all, apart from the fact, was it even worth it to learn in such a hurry?

Don't rush! If you have studied a concept, practice it. Spend some time on it, solve challenges then move forward.

Mistake#2. Focus on multiple technologies at a time

In the tech industry, every day, there is something new to learn. I, being an enthusiastic person, wanted to learn all at once. So along with ReactJS, I started to learn Python too. So half of the time that could have spent learning ReactJS, I was spending on Python. And this doesn't end here! At the end of 2019, I got distracted by the fame of Flutter, and so I started to learn that too!

Now, don't get me wrong. It's okay to learn multiple front-end languages. It’s how one can survive in the tech industry. What I am trying to say is, you must focus and master one thing at a time.

For example, if you are learning Reactjs don't get distracted by React Native, angular, or some other framework. If you are into python, then just spend time on python and related things, not PHP or dart. If you focus on multiple things, you'll be just a half-cooked dish! And I'm pretty sure, nobody likes that.

Mistake#3. Leaving things in the middle

Let's say I have got the idea to build a dashboard for my portfolio, and I started to work on it. But as soon as I bumped into an issue, I'll obviously try to solve it. But just after one try, I gave up!

Resolving a bug might take just a day, week, or even months. At worst, it can take a year – if it's a complex issue.

Anything is possible in programming, just learn to think like a programmer

Mistake#4. Didn't invest enough time, although it's available!

I used to spend learning on average two hours a day. Now when I think about it, I could have spent at least five hours or even more!

My piece of advice to you (and my past-self)! Start spending more time learning. When you got fewer responsibilities, it's easier to invest time in learning. As time goes by, the responsibilities will only tend to increase. So, utilize the present moment as much as you can.

More time and fewer responsibilities are blessings. Use it properly otherwise you will regret

Mistake#5. Didn't apply earlier

I wish somebody could have told me you can never be perfect. There will always be things you don't know. I was done with the basics of HTML and CSS in the middle of 2018. My next move should have been to find an internship (doesn't matter if unpaid) and learn JavaScript parallel. Maybe I couldn't find it but I should have tried.

Our skills grow faster when we work in an office environment with a bunch of awesome people, clients, and on live projects. We have to do what he (the client) likes not us. By the way, I started applying after learning the basics of Reactjs.
Doesn't matter if you have only 5 HTML & CSS landing pages. This should be live.

Craft your resume, update your LinkedIn, create a live portfolio, and apply!

Step 1 - Let's create a GraphQL server with Node.js

Abdul Basit — Sat, 07 Nov 2020 19:48:09 +0000

This is the first part of the series GraphQL in pieces.

A passionate programmer always adds new skills to his arsenal, besides enhancing his existing skills. Learning a new trending skill is like increasing a worth.

GraphQL is a structured query language, that helps us query only required data from a server. Less request on server means less cost.

Our today's task is to run a GraphQL server and query the data via GraphiQL (in-browser IDE for exploring GraphQL).

Before starting the series let's set our realistic end goal.

So in the next two months, our goal is to build a GraphQL powered API with authentication and authorization for real-world application.

Let's begin

Open your terminal and create a folder on your desired location mkdir folderName

go to your folder using command cd folderName

I am assuming you have nodejs installed and familiar with the basics of terminal.

Now we have to create a package.json file, the same as we do while we create a rest API.

We can create package.json file using the command npm init

I run npm init -y to skip the questions.

Now we have to install three dependencies

npm i express express-graphql graphql

Create the file server.js on root, some name it index.js, it's up to you.

Now require the packages we just installed in server.js file.

const { buildSchema } = require('graphql')

We just pull out buildSchema method out of graphql using ES6 destructuring, it will help us create the schema.

const { graphqlHTTP } = require('express-graphql')

This package helps us to create a graphql http server with express.

we also initialize express just like we do while writing rest API.

const app = express()

This is how our code looks like now.

const express = require('express')
const { buildSchema } = require('graphql')
const { graphqlHTTP } = require('express-graphql')

const app = express()

Creating the Schema

Query is for reading data. If we define a schema with a keyword query we can't mutate it, means we can't perform edit, update or delete actions.

We have used an exclamation mark with name: String! it means name is required, this can't be null.

const schema = buildSchema(`
  type Query {
    name: String!,
    designation: String
  }
`)

Resolver Function

GraphqQL schema needs to have a resolver function for each field, resolver function returns the result for that particular field it defines for.

I want whenever I query name, it should always return John. For that, I need to define a resolver function. If I won't, a default resolver will be set and that would be null. In case, if the field is required, like we have required name, and we didn't write a resolver function for that, GraphiQL will give us an error.

Just keep in mind Resolver also returns promise. We will see the implementation once we will be connected to database and ready to fetch the data.

const rootValue = {
  name: () => 'John',
  designation: () => 'Junior MERN Stack developer',
}

Create the server

app.use('/graphql', graphqlHTTP({
  schema,
  rootValue,
  graphiql: true,
}))

graphqlHTTP function accepts several options, for simplicity we defined only 3.

The first one is the schema we defined earlier
Second is resolver with named rootValue, this is an object, provides a resolver function for each API endpoint,
The third one is graqphiql to test our API end points.

In JavaScript, if the key values are same we write it only once, so instead of writing {schema: schema} we wrote it only once {schema}, this makes our code cleaner.

Let's run the server and listen to port 5000 using listen() method express provides us that returns http.Server function.

We provide a port as a first parameter and in callback we just console.log()

We are done, it's time to execute the code. For that, we will run a command node server.js in our terminal. You will get the log
Server is running at localhost:5000/graphql

Complete Code

const express = require('express')
const { buildSchema } = require('graphql')
const { graphqlHTTP } = require('express-graphql')

const app = express()

const schema = buildSchema(`
  type Query {
    name: String!,
    designation: String
  }
`)

const rootValue = {
  name: () => 'John',
  designation: () => 'Junior MERN Stack developer',
}

app.use('/graphql', graphqlHTTP({
  schema,
  rootValue,
  graphiql: true,
}))

const port = process.env.PORT || 5000

app.listen(port, () => console.log(`Server is running at localhost:${port}/graphql`))

In next article, we will learn about mutation and relation between queries, and simplify our code using Apollo Server with better graphql playground.

Your assignment is to execute all the code once on your own. Type the code, instead of copy, so you become familiar with the syntax. Go ahead, it will not take more than 5 minutes.

How to develop a Stopwatch in React JS with custom hook

Abdul Basit — Sun, 19 Jul 2020 16:09:49 +0000

In order to truly understand how things work we should break down the task into smaller pieces, this is what we are doing here. Our ultimate goal is to build a React Native Pomodoro clock App but first, we will build a stopwatch to understand how setInterval and clearInterval works in react with hooks then turn this stopwatch into a Pomodoro clock, and so on.

Let's start

Let's break down everything and build a boilerplate first.

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

const App = () => {
  const [timer, setTimer] = useState(0)
  const [isActive, setIsActive] = useState(false)
  const [isPaused, setIsPaused] = useState(false)
  const countRef = useRef(null)

  const handleStart = () => {
    // start button logic here
  }

  const handlePause = () => {
    // Pause button logic here
  }

  const handleResume = () => {
    // Resume button logic here
  }

  const handleReset = () => {
    // Reset button logic here
  }

  return (
    <div className="app">
      <h3>React Stopwatch</h3>
      <div className='stopwatch-card'>
        <p>{timer}</p> {/* here we will show timer */}
        <div className='buttons'>
          <button onClick={handleStart}>Start</button>
          <button onClick={handlePause}>Pause</button>
          <button onClick={handleResume}>Resume</button>
          <button onClick={handleReset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

A timer will start from 0 to onward by clicking the start button.

isActive is defined to see if the timer is active or not.

isPaused is defined to see if the timer is paused or not.

Initially, both values will be false. We have defined these values to conditionally render Start, Pause, and Resume button.

UseRef hook

useRef helps us to get or control any element's reference.

It is the same as we get the reference in vanilla javascript by using document.getElementById("demo") which means we have skipped virtual dom and directly dealing with browsers. Isn't the useRef hook is powerful?

If we run this code we will see the result like this. (CSS is included at the end of the article)

Now we have three tasks to do,

to write a function for each button
format the timer the way we see in stopwatch (00: 00: 00)
conditionally rendering the buttons

Start Function

The job of start function is to start the timer and keep incrementing until we reset or pause it.

For that, we will use setInterval method. setInterval runs as long as we don't stop it. It takes two parameters. A callback and time in milliseconds.

setInterval(func, time)

1000 ms = 1 second

const handleStart = () => {
  setIsActive(true)
  setIsPaused(true)
  countRef.current = setInterval(() => {
    setTimer((timer) => timer + 1)
  }, 1000)
}

As soon we will hit the start button, isActive and isPaused will become true and 1 will be added to timer values every second.

We set countRef current property to the setInterval function, which means we set the timerId in variable countRef, now we can use it in other functions.

We used countRef.current to get the current value of the reference.

Pause Function

setInterval keeps calling itself until clearInterval is called.

In order to stop or pause the counter we need to use clearInterval function. clearInterval needs one parameter that is id. We will pass countRef.current as arguement in clearInterval method.

const handlePause = () => {
  clearInterval(countRef.current)
  setIsPaused(false)
}

on pressing Pause button we will stop (not reset) the timer, and change isPaused state from true to false.

Resume Function

const handleResume = () => {
  setIsPaused(true)
  countRef.current = setInterval(() => {
    setTimer((timer) => timer + 1)
  }, 1000)
}

On resuming the timer we will start the timer from where it was paused and change isPaused from false to true.

Reset Function

const handleReset = () => {
  clearInterval(countRef.current)
  setIsActive(false)
  setIsPaused(false)
  setTimer(0)
}

Reset function will reset everything to its initial values. This button will not only stop the counter but also reset its value to 0.

Rendering Buttons Logic

Let's talk about start, pause, and resume button rendering logic.

Once the timer starts, the start button will change into Pause, if we pause the timer we will see Resume button. This is how stopwatches work or you may say how we want this to work.

How do we know which button to show?

For that, we have already defined two keys in our state. One isActive, and other one is isPaused

And both of them will be false initially.

If both keys will be false, we will show start button. It's obvious.

What happens in case of pause?

isActive will be true, isPaused will be false

Otherwise we will show resume button

We need to write nested if else condition. Either we show start or pause/resume button.

Formatting Timer

Another tricky part of app is to show the timer in this manner 00:00:00

For seconds

const getSeconds = `0${(timer % 60)}`.slice(-2)

For minutes

 const minutes = `${Math.floor(timer / 60)}`
 const getMinutes = `0${minutes % 60}`.slice(-2)

For hours

const getHours = `0${Math.floor(timer / 3600)}`.slice(-2)

We made the formatTime function for this, which returns seconds, minutes, and hours.

  const formatTime = () => {
    const getSeconds = `0${(timer % 60)}`.slice(-2)
    const minutes = `${Math.floor(timer / 60)}`
    const getMinutes = `0${minutes % 60}`.slice(-2)
    const getHours = `0${Math.floor(timer / 3600)}`.slice(-2)

    return `${getHours} : ${getMinutes} : ${getSeconds}`
  }

In react the button has disabled props that is false by default we can make it true by adding some logic. We made reset button disabled if the timer is set to 0 just by adding simple logic disabled={!isActive}

So far Complete Code

import React, { useState, useRef } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faClock } from '@fortawesome/free-regular-svg-icons'

import './App.css';

const element = <FontAwesomeIcon icon={faClock} />

const App = () => {
  const [timer, setTimer] = useState(3595)
  const [isActive, setIsActive] = useState(false)
  const [isPaused, setIsPaused] = useState(false)
  const increment = useRef(null)

  const handleStart = () => {
    setIsActive(true)
    setIsPaused(true)
    increment.current = setInterval(() => {
      setTimer((timer) => timer + 1)
    }, 1000)
  }

  const handlePause = () => {
    clearInterval(increment.current)
    setIsPaused(false)
  }

  const handleResume = () => {
    setIsPaused(true)
    increment.current = setInterval(() => {
      setTimer((timer) => timer + 1)
    }, 1000)
  }

  const handleReset = () => {
    clearInterval(increment.current)
    setIsActive(false)
    setIsPaused(false)
    setTimer(0)
  }

  const formatTime = () => {
    const getSeconds = `0${(timer % 60)}`.slice(-2)
    const minutes = `${Math.floor(timer / 60)}`
    const getMinutes = `0${minutes % 60}`.slice(-2)
    const getHours = `0${Math.floor(timer / 3600)}`.slice(-2)

    return `${getHours} : ${getMinutes} : ${getSeconds}`
  }

  return (
    <div className="app">
      <h3>React Stopwatch {element}</h3>
      <div className='stopwatch-card'>
        <p>{formatTime()}</p>
        <div className='buttons'>
          {
            !isActive && !isPaused ?
              <button onClick={handleStart}>Start</button>
              : (
                isPaused ? <button onClick={handlePause}>Pause</button> :
                  <button onClick={handleResume}>Resume</button>
              )
          }
          <button onClick={handleReset} disabled={!isActive}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

Let's clean up our code

I have realized we can extract our state and methods to a custom hook. This will make our code clean and reusable.

useTimer hook

In src folder, I have created one more folder hook and within hook I created a file useTimer.js

useTimer hook returns our state and all four functions. Now we can use it wherever we want in our app.

import { useState, useRef } from 'react';

const useTimer = (initialState = 0) => {
  const [timer, setTimer] = useState(initialState)
  const [isActive, setIsActive] = useState(false)
  const [isPaused, setIsPaused] = useState(false)
  const countRef = useRef(null)

  const handleStart = () => {
    setIsActive(true)
    setIsPaused(true)
    countRef.current = setInterval(() => {
      setTimer((timer) => timer + 1)
    }, 1000)
  }

  const handlePause = () => {
    clearInterval(countRef.current)
    setIsPaused(false)
  }

  const handleResume = () => {
    setIsPaused(true)
    countRef.current = setInterval(() => {
      setTimer((timer) => timer + 1)
    }, 1000)
  }

  const handleReset = () => {
    clearInterval(countRef.current)
    setIsActive(false)
    setIsPaused(false)
    setTimer(0)
  }

  return { timer, isActive, isPaused, handleStart, handlePause, handleResume, handleReset }
}

export default useTimer

utils

We can make our code cleaner by writing our vanilla javascript functions into utils folder.

For that, within src I created utils folder, and inside utils I created index.js file.

export const formatTime = (timer) => {
  const getSeconds = `0${(timer % 60)}`.slice(-2)
  const minutes = `${Math.floor(timer / 60)}`
  const getMinutes = `0${minutes % 60}`.slice(-2)
  const getHours = `0${Math.floor(timer / 3600)}`.slice(-2)

  return `${getHours} : ${getMinutes} : ${getSeconds}`
}

Timer.js

I copied code from App.js to Timer.js and render Timer.js inside App.js

This is how our folder structure will look like

import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faClock } from '@fortawesome/free-regular-svg-icons'

import useTimer from '../hooks/useTimer';
import { formatTime } from '../utils';

const element = <FontAwesomeIcon icon={faClock} />

const Timer = () => {
  const { timer, isActive, isPaused, handleStart, handlePause, handleResume, handleReset } = useTimer(0)

  return (
    <div className="app">
      <h3>React Stopwatch {element}</h3>
      <div className='stopwatch-card'>
        <p>{formatTime(timer)}</p>
        <div className='buttons'>
          {
            !isActive && !isPaused ?
              <button onClick={handleStart}>Start</button>
              : (
                isPaused ? <button onClick={handlePause}>Pause</button> :
                  <button onClick={handleResume}>Resume</button>
              )
          }
          <button onClick={handleReset} disabled={!isActive}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default Timer;

Doesn't it look cleaner now?

CSS

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");

body {
  margin: 0;
  font-family: "Quicksand", sans-serif;
  background-color: #eceff1;
  color: #010b40;
}

.app {
  background-color: #0e4d92;
  margin: 0 auto;
  width: 300px;
  height: 200px;
  position: relative;
  border-radius: 10px;
}

h3 {
  color: white;
  text-align: center;
  padding-top: 8px;
  letter-spacing: 1.2px;
  font-weight: 500;
}

p {
  font-size: 28px;
}

.stopwatch-card {
  position: absolute;
  text-align: center;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  width: 325px;
  height: 130px;
  top: 110px;
  left: 50%;
  transform: translate(-50%, -50%);
}

button {
  outline: none;
  background: transparent;
  border: 1px solid blue;
  padding: 5px 10px;
  border-radius: 7px;
  color: blue;
  cursor: pointer;
}

.buttons {
  display: flex;
  justify-content: space-evenly;
  width: 150px;
  margin: 0 auto;
  margin-top: 5px;
}

I want a little feedback if you would like to read the next article with typescript?

Since typescript is evolving and startups are preferring those who can type javascript with typescript.

In next part, we will transform this app to the Pomodoro clock.

Codepen Demo

Learn how to create React JS table with delete functionality using API and hooks

Abdul Basit — Mon, 25 May 2020 21:09:50 +0000

In this article, I will be using rest API ( JSON placeholder ) with fake data instead of static js object. Real apps work with APIs.

If you want to see the class based approach read this article.

Let's begin

Hooks are just like functions. We call it the same as we call functions

useState()

useState accept an argument that is initial value for the state and return two things current value and method for update the state property.

Declaing State

const [employees, setEmployees] = useState([])

its same as

const array = useState([])
const employees = array[0]
const setEmployees = array[1]

We wrote it in one line using array destructuring.

We define employees as an empty array, as soon we will hit the API, the state will change and put all the API data into employees array.

Get Data Function

const getData = async () => {
        let url = 'https://jsonplaceholder.typicode.com/users'

        const response = await axios.get(url)
        console.log('response', response)
        setEmployees(response.data)
    }

We are using axios for http requests.
We need to download axios through terminal.

npm i axios

We made the getData function async because it takes some time to fetch data from API. So we said wait until the data is loaded then save it in response variable.

In previous article we called api in componentDidMount but useEffect hook has replaced componentDidMount, useEffect is easier to read, and write.

useEffect(() => {
        getData()
    }, []) // don't forget this empty bracket it indicates the function will only run once when the component will load initially

For Table Header

const renderHeader = () => {
        let headerElement = ['id', 'name', 'email', 'phone', 'operation']

        return headerElement.map((key, index) => {
            return <th key={index}>{key.toUpperCase()}</th>
        })
    }

First of all, we will decide how many columns we need for our table and then define these values in an array. In our case we need 5 columns, now we will map over these values and output as th

Operation is for Edit and Delete functionality.

For Table Body

const renderBody = () => {
        return employees && employees.map(({ id, name, email, phone }) => {
            return (
                <tr key={id}>
                    <td>{id}</td>
                    <td>{name}</td>
                    <td>{email}</td>
                    <td>{phone}</td>
                    <td className='opration'>
                        <button onClick={() => removeData(id)}>Delete</button>
                    </td>
                </tr>
            )
        })
    }

Here you may have noticed the logic employees && employees.map, we are saying employees.map will only run if we have employee. Because it took some seconds to load the data from server, and if we will not write this logic our code will break, because employees array will be empty initially and map will not run on empty array, it won't have id, name and rest of the field, so it will through error.

Don't get confused with { id, name, email, phone } we just destructured the object.

We are also passing id as a parameter to removeData method.

Main return function

We just called both of our methods in our main return function.

return (
        <div>
            <h1 id='title'>React Table</h1>
            <table id='employee'>
                <thead>
                    <tr>{renderHeader()}</tr>
                </thead>
                <tbody>
                    {renderBody()}
                </tbody>
            </table>
        </div>
    )
}

Delete functionality

We can send four kinds of requests via axios

get
post
delete
put

For delete, we will send a delete request. As the name says we use this method to delete a record on the backend.

delete takes the url as a parameter with the specific id of the record we want to delete. We will send id as a parameter.

Some of the time JSON placeholder API don't accept delete request and you won't feel the change on frontend this is just for demo purpose.

const removeData = (id) => {
        let url = `https://jsonplaceholder.typicode.com/users/${id}`

        axios.delete(url).then(res => {
            const del = employees.filter(employee => id !== employee.id)
            setEmployees(del)
            console.log('res', res)
        })
    }

In our case, we can see data will be deleted on frontend but not on the backend. Because we can not manipulate JSON placeholder API. But if we have our own API that has delete feature too. It would just work fine.

To show the user, the data has been deleted we filtered the deleted object from frontend using higher-order filter method.

Refactoring Code

Organizing and refactoring code is essential. You may have noticed we have used URL in two different places, what if in future we need to change the URL? are we going to change from both places? no, we should have one common place where we define URL.

In real projects, we have a config file for that but for this one component base app, I will define URL on top of the file.
We also have to remove the consoles it was only for testing purposes.
We don't want initial div. For that, we will just use an empty bracket.

useApi custom hook

we can clean up our component and make code modular, just switching all of our business logic to a custom hook, useApi hook can be used in multiple places in our app.

import { useState, useEffect } from 'react'
import axios from 'axios'

export function useAPi(url) {
  const [data, setData] = useState([])

  useEffect(() => {
    getData()
  }, [])

  const getData = async () => {
    const response = await axios.get(url)
    setData(response.data)
  }

  const removeData = (id) => {
    axios.delete(`${url}/${id}`).then(() => {
      const del = data.filter((item) => id !== item.id)
      setData(del)
    })
  }

  return { data, removeData }
}

This is straightforward

We will pass API url as params.
Returns the data (this is our employee data) and removeData function.

Complete Code

import React from 'react'
import { useAPi } from '../../hooks/useApi'

const URL = 'https://jsonplaceholder.typicode.com/users'

const Table = () => {
  const { data, removeData } = useAPi(URL)

  const renderHeader = () => {
    let headerElement = ['id', 'name', 'email', 'phone', 'operation']

    return headerElement.map((key, index) => {
      return <th key={index}>{key.toUpperCase()}</th>
    })
  }

  const renderBody = () => {
    return (
      data &&
      data.map(({ id, name, email, phone }) => {
        return (
          <tr key={id}>
            <td>{id}</td>
            <td>{name}</td>
            <td>{email}</td>
            <td>{phone}</td>
            <td className="operation">
              <button className="button" onClick={() => removeData(id)}>
                Delete
              </button>
            </td>
          </tr>
        )
      })
    )
  }

  return (
    <>
      <h1 id="title">React Table</h1>
      <table id="employee">
        <thead>
          <tr>{renderHeader()}</tr>
        </thead>
        <tbody>{renderBody()}</tbody>
      </table>
    </>
  )
}

export default Table

Isn't it much cleaner? our business logic is completely separated now.

Styling

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");

body {
  font-family: "Quicksand", sans-serif;
  display: flex;
  justify-content: center;
  padding: 0;
  color: #4d4d4d;
}

#title {
  text-align: center;
}

#employee {
  border-collapse: collapse;
  border: 3px solid #ddd;
}

#employee td,
#employee th {
  border: 1px solid #ddd;
  padding: 12px;
}

#employee tr:hover {
  background-color: #ddd;
}

#employee th {
  padding: 10px;
  text-align: center;
  background-color: #4caf50;
  color: white;
}

.operation {
  text-align: center;
}

.button {
  border: none;
  outline: none;
  font-size: 11px;
  font-family: "Quicksand", sans-serif;
  color: #f44336;
  padding: 3px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #f44336;
  background-color: transparent;
}

.button:active {
  border: 1px solid blue;
}

Codepen Link
This is the codepen demo of the project

DEV Community: Abdul Basit

Build Next.js Auth Pages UI in 10 Minutes with Flexy UI

Step #1: Set Up a Next.js Application

Install Tailwind CSS & Lucide React

Step #2: Structure the Application

Step #3: Create the Login Page

Login Page Code

Reusable Components

Input Compnent

Button Component

App Logo

Step #4: Create the Sign-Up Page

Sign-Up Page UI

Step #5: Create the Forgot Password Page

Forgot Password Page UI

Step #6: Convert Components to Next.js

Final Code for Auth Pages

Login Page Next.js Code (auth/login/page.tsx)

Sign-Up Page Next.js Code (auth/signup/page.tsx)

Forgot Password Page Next.js Code (auth/forgot-password/page.tsx)**

Open source Next.js Developer Portfolio Template [Modern + Responsive]

Folder Structure Overview

How to run a project?

Remember (Add .env file)

Customizing the Template

Configuring Online Images

Theming and Styling

SEO & Branding

Premium Portfolio Template

Analytics

Deployment Notes

How to Build a Simple Chrome Extension to Search Selected Text on YouTube

Which API to Use for Creating Chrome Extensions

How to Start

What is the manifest.json File?

Key Sections of manifest.json:

Step 1: Write the Background Script (background.js)

Step 2: (Optional) Create a Popup (popup.html)

Step 3: How to Test Your Chrome Extension

Step 4: How to Upload Your Chrome Extension to the Chrome Web Store

5 Best ReactJS Projects for Beginners in 2024 [Source Code Included]

Prerequisite

Learn to Build 6 Reusable and Responsive Components in ReactJS

1. Navbar

2. Input Component

3. Editable Table

4. Custom Radio Button

5. Loading Spinner Button

6. Progress Step Component

5 Beginner Friendly React Projects to Improve Business Logic

1. Text Analyzer Tool

2. React Typescript CRUD Tasklist App

3. React Password Generator

4. React Random Quote Generator

5. React Memory Game

React Project Ideas for Micro SaaS

Beautify Screenshots - Project #1

Dashboard for Listing App - Project #2

I Published 4 Free ReactJS Coding Challenges: Build Functionality for Responsive UI

Who Can Use these ReactJS Coding Challenges?

List of Reactjs Challenges

Challenge #1: Text Analyzer Tool

Challenge #2: React Password Generator

Challenge #3: Random Quote Generator

Challenge #4: CRUD Typescript Tasklist App

What to do when you complete ReactJS challenge?

Can you star the ReactJS Challenges GitHub repo?

3 Advanced Methods to Measure Function Execution Time in JavaScript

1. Using console.time() and console.timeEnd():

2. Using Date objects:

3. Using performance.now():

I Have Made A Free Reactjs Waitlist Template With Light and Dark Theme

Current Version

Future Updates

My Top 5 Methods To Develop UIs Faster in ReactJS

Method#1: Analyze The Design, Understand The Designing Stuff

Method#2: Build Site Data, Use The Dummy Data

Method#3: Set The State, Dealing With Overtime Data Changes

Method#4: Integrate ESlint, Consistency Is The Key

Method#5: Integrate Storybook, Fast Visual Testings

Login Page Next.js Code (`auth/login/page.tsx`)

Sign-Up Page Next.js Code (`auth/signup/page.tsx`)

Forgot Password Page Next.js Code (`auth/forgot-password/page.tsx`)**

What is the `manifest.json` File?

Key Sections of `manifest.json`:

Step 1: Write the Background Script (`background.js`)

Step 2: (Optional) Create a Popup (`popup.html`)