DEV Community: Shivam Katare

Make User Management easier with Clerk + Supabase 🔥🔥

Shivam Katare — Tue, 03 Dec 2024 14:51:50 +0000

Handling user authentication and connecting to a database can be tough, especially with modern web apps. Clerk and Supabase are two great tools that make this process easier, providing smooth user management and scalable database options. In this article, we’ll learn, how to connect Clerk's authentication system with Supabase to build a strong and secure user management process.

So, without wasting a bit, let’s get started.

Initial Setup

The first thing that, we'll do is set up our Next.js project and install the necessary dependencies.

Install Dependencies

Run the following command to install Next.js on your machine.

npx create-next-app@latest

On installation, you'll see the following prompts:


What is your project named? my-app
Would you like to use TypeScript? No / Yes   => I picked no
Would you like to use ESLint? No / Yes => I picked yes
Would you like to use Tailwind CSS? No / Yes => I picked yes
Would you like your code inside a `src/` directory? No / Yes  => I picked no
Would you like to use App Router? (recommended) No / Yes  => I picked yes
Would you like to use Turbopack for `next dev`?  No / Yes  => I picked no
Would you like to customize the import alias (`@/*` by default)? No / Yes => I picked no
What import alias would you like configured? @/* => I picked @

Our next js has been installed, now let’s install clerk and supabase. Run this command to install clerk👇

npm i @clerk/nextjs

and this one to install supabase👇

npm i @supabase/supabase-js

We've installed the necessary dependencies, so now let's set up the Supabase and Clerk dashboards to ensure they work together.

Setup Clerk Dashboard

Click here to sign up for Clerk or sign in to your existing Clerk account.

If you've just created an account for the first time, you'll go straight to the authentication setup form.

If not, you'll be sent to your Clerk Dashboard. To make a new app, click on the Create application card to access the authentication setup form. Fill in all the details and also select social auth providers like Google, Github, Facebook, etc. whatever you want.

It will create your new clerk application on which you can start adding your users with their auth flow. Your dashboard will look like this. 👇

That’s it, clerk setup is done now let’s set up Supabase.

Setup Supabase Dashboard

Go to this link to sign in to your Supabase dashboard.

Now, go to this link to create a new Supabase project. Once your project is created, it should be visible in your dashboard like this.

Our supabase dashboard is also set. Now, let’s see the integration part.

Integrate Clerk

We've installed all our dependencies and set up both dashboards. Now, we'll integrate Clerk and Supabase into our app, one by one. We'll start with Clerk first, then move on to Supabase.

Before moving forward, let's look at the folder structure. I have added a few new files and folders that we will use later in this article.

Set Clerk Provider

The first thing we need to do is wrap our app in a <ClerkProvider /> so it can manage our auth state from the top of the hierarchy. The <ClerkProvider> component wraps your app to provide active session and user context to Clerk's hooks and other components.

Head over to your layout.js file, and wrap your main component into <ClerkProvider/> 👇

export default function RootLayout({ children }) {
  return (
    <ClerkProvider touchSession={false} >
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} 
          antialiased`}
      >
        {children}
      </body>
    </html>
    </ClerkProvider>
  );
}

ClerkProvider has several props. As you can see, I’ve added one prop called touchSession. By default, it's true, but you can set it to false. When it's false, it won't check the user session on every click. Otherwise, it will call an API each time to see if the user’s session is active. For a full list of ClerkProvider props, you can check it here.

Now, let's add sign-in and sign-up buttons. Clerk provides its own UI and components to make this process easier, like this 👇

import localFont from 'next/font/local';
import './globals.css';
import {
  ClerkProvider,
  SignedIn,
  SignedOut,
  SignInButton,
  UserButton,
} from '@clerk/nextjs';

// rest of your code

export default function RootLayout({ children }) {
  return (
    <ClerkProvider touchSession={false}>
      <html lang="en">
        <body
          className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
         <header>  // here you can use styling to style it a/c to your design
          <SignedOut>
            <SignInButton />
          </SignedOut>
          <SignedIn>
            <UserButton />
          </SignedIn>
        </header>
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

That’s it, now let’s set up env variables.

Setup clerk env

In the Clerk Dashboard, navigate to the Configure > API Keys page.

In the Quick Copy section, copy your Clerk publishable and secret key.

Paste your keys into your .env.local file.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=clerk_publishable_key
CLERK_SECRET_KEY=thiswillbeyoursecretkey

Middleware Setup

The last important step is to set up the middleware.

Middleware helps us protect our routes. For example, if we have three routes named login, dashboard, and about, and we don't want users to access the dashboard and about without logging in, auth middleware can help us with this.

For Clerk, we'll set up our middleware based on our route structure. Create a middleware.js file in your root folder and add this code 👇

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'
import { NextResponse } from 'next/server'

const isProtectedRoute = createRouteMatcher(['/user(.*)'])
const isPublicRoute = createRouteMatcher(['/'])

export default clerkMiddleware(async (auth, req) => {
  const { userId } = await auth()

  if (userId && req.nextUrl.pathname === '/') {
    const userUrl = new URL('/user', req.url)
    return NextResponse.redirect(userUrl)
  }

  if (isProtetedRoute(req)) {
    await auth.protect()
  }
})

Here, we're indicating that /user routes are protected. So, if any user tries to access this route without logging in, they will first be redirected to the / route to sign in or sign up.

The Clerk setup is complete. You can test your sign-in and sign-up process, and all your users will be visible on your Clerk dashboard.

Integrate Supabase

Now that we have our authentication flow set up, it's time to save our logged-in users in our Supabase database. When a user signs up in your app using the Clerk provider, Clerk will generate an authentication token and send it to Supabase using the Supabase project's JWT secret key.

You'll provide the Supabase JWT secret key to Clerk, and Clerk will share the auth token with Supabase. With this connection, you'll be able to save your user's unique user_id. After that, we can perform any CRUD operations.

Create Function

First, we'll create a function in our Supabase to request the user ID from Clerk. Then, we'll pass our Supabase JWT to Clerk, to connect them.

In the sidebar of your Supabase dashboard, go to Database > Functions.

Click on the Create New Function button 👇

Enter function name

Return type text

and add this definition

SELECT NULLIF(
    current_setting('request.jwt.claims', true)::json->>'sub',
    ''
)::text;

Scroll a bit, and turn on the advanced settings option

select language sql

Click Confirm to save it.

Next, create a user_id column in the table you want to secure. This column will be used in the RLS policies to only return or modify records related to the user's account. It will use the requesting_user_id_from_clerk() function we just created as its default value.

Go to the sidebar on the left and select Table Editor.
Select the table you wish to secure.
In the table, select the + column to add a new column.

Set the Name to user_id.
Set Type to text.
Set Default Value to requesting_user_id_from_clerk().

Select Save to create the column.

Make sure your RLS policy is enabled for that particular table.

In the top bar above the table, you can see the options to Enable RLS, Disable RLS, or Add New RLS Policy. Currently, I have one auth policy, so it shows 1 here.

Here you can see all your policies, click on the Create New Policy button

In this way, you can create an RLS policy for insert, delete, view, and update actions. As you can see, this RLS policy is for insert, and we are targeting public roles (point 4 in the screenshot).

Similarly, you can do the same for SELECT authenticated roles. like this 👇

Same for the UPDATE. This time, without check expression.👇

To learn more about RLS Policies, you can check out this guide of supabase.

Get JWT Token

Supabase's API requires an authentication token to allow users to access your data. Your Clerk project can generate these tokens, but it first needs the JWT secret key from your Supabase project. As we discussed earlier.

To get JWT Secret:

Go to Settings from the sidebar
Then click on the API Section.
Then, click on Reveal and copy the JWT Secret.

Now that we've finished the Supabase part, we'll create a Supabase JWT template on Clerk and integrate the JWT secret there.

Clerk JWT Template Setup

Go to your clerk dashboard, and head over to Clerk JWT Template. Click on the new template option.

Select Supabase.

Fill out 2 details here:

Name: If you have multiple Clerk projects and multiple JWT Templates for each project, make sure to give this name a slight difference from the others.
Then, paste your Supabase JWT Key into the signing key box below.

Now click save.

Great, now we have done almost everything important. Two things are left: setting up the environment for Supabase and integrating the Supabase client into our application. Then, we'll be ready to go.

Supabase Client Setup

Create a new folder in your root directory named lib and inside that create a file supabaseClient.js

And, add this code to it

import { createClient } from '@supabase/supabase-js';
// Function to create a Supabase client with Clerk authentication
export function createClerkSupabaseClient(session) {  
  return createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_KEY,
    {
      global: {
        fetch: async (url, options = {}) => {
          const clerkToken = await session?.getToken({
            template: "enter-your-jwt-clerk-template-name",
          });
          const headers = new Headers(options?.headers);
          headers.set("Authorization", `Bearer ${clerkToken}`);
          return fetch(url, { ...options, headers });
        },
      },
    }
  );
}

Here, we have two envs, so we'll add these to our .env.local file. Go to Settings > API and copy the project URL and anon key.

and paste them here in .env.local with clerk’s env variables.

NEXT_PUBLIC_SUPABASE_URL=""
NEXT_PUBLIC_SUPABASE_KEY=""
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=""
CLERK_SECRET_KEY=""

And, that’s it. We are good to go. Now you can run the server using yarn, npm, or pnpm. Whatever you choose. I am using npm.👇

npm run dev

Once the server starts, you can click on the Sign In button to log in. Without signing in, you won't be able to access /user/dashboard and /user/about, as we have set this restriction in our middleware.js file.

Conclusion

That’s it for today. In this article, we learn about how we can integrate Clerk's authentication system with Supabase in a Next.js app to build a secure user management process. We covered setting up the Next.js environment, installing necessary dependencies, configuring the Clerk and Supabase dashboards, implementing authentication, and authorization using middleware.

I hope you learn something from this blog, make sure to share it with your friends and community, and if you learn while reading it, make sure to give it a like and leave a comment. I write blogs and share content on JavaScript, TypeScript, Open Source, and other web development-related topics. Feel free to follow me on my socials. I'll see you in the next one.

BYE 👋

Useful Links:

Clerk get started guide: https://clerk.com/docs/quickstarts/setup-clerk

Supabase get started guide: https://supabase.com/docs/guides/getting-started

Clerk + Supabase Guide: https://clerk.com/docs/integrations/databases/supabase

Supabase + Clerk Guide: https://supabase.com/partners/integrations/clerk

Create Beautiful Scroll Animations Using Framer Motion

Shivam Katare — Sun, 27 Oct 2024 12:30:15 +0000

Introduction

Scrolling is something we do every day on our screens, but have you ever thought about how scrolling affects user experience? In today's world, scrolling has also become a way to give your users a smooth and satisfying experience. With tools like Framer Motion, developers can turn scrolling into an engaging and visually attractive experience.

Today, we will explore different ways to animate scrolling. We will learn about the types of scroll animations and how they are used. We’ll understand the pattern so that we can add scroll animations to any of our projects or sites.

We will create animations in Next.js using Framer Motion. If you prefer to use any other framework or library, you can use that.

So, without further delay, let’s get started.

Types of Scroll Animations

There are two types of scroll animations:

Scroll-linked animations: Animations that move or change based on how far you’ve scrolled, the element will update continuously as you scroll.
Scroll-triggered animations: A normal animation is triggered when an element enters or leaves the viewport.

With Framer motion, you can achieve both. Let’s understand both one by one.

Scroll-linked animations

Scroll-linked animations are animations where the progress or movement of an animation is directly linked up to how far the user has scrolled. In this type of animation, elements change continuously as the user scrolls.

It means if you are at point one then the animation will track you, and it will also be on point one. And, If you scroll and go to point two, the animation will follow you to that point.

Key Features

The animation is synchronized with the scroll progress.
As you scroll, the animation updates in real time based on how much you've scrolled.
These animations can involve moving, scaling, rotating, or changing the appearance of elements, usually using useScroll and useTransform hooks(we’ll learn about these ahead) in Framer Motion.

Scroll-triggered animation

Scroll-triggered animations happen when an element enters or leaves the specific viewport as you scroll. It means the animation starts only when the user scrolls to a specific part of the page.

So, if I am on point one and, I set a scroll-triggered animation for point three then this animation will occur at point three. This means that animation will triggered only when I reach that viewport(in this case it is point three)

To understand this, you can check this video👇. Here, you’ll see when that orange element comes in a viewport means it is completely visible on the screen and then, at that time, shows a navbar.

Key Features

Triggered by Scroll Position: The animation is activated once a specific scroll position is reached, rather than being continuously synced with the scroll, like scroll-linked animations. This is typically achieved using conditions like whileInView or onEnter.
Discrete Animations: Unlike scroll-linked animations, scroll-triggered animations happen at specific moments, like when an element enters or exits the viewport. These could include fade-ins, slide-ins, or other visual effects that occur once as the user scrolls past a certain point.
One-Time or Repeatable Animations: Scroll-triggered animations can be set to play only once when the element first comes into view, or they can repeat whenever the element enters the viewport again, depending on the use case.

  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />

What’s Next?

Now we understand these two types of scroll animations and their differences, let's start understanding the patterns used in creating these animations. This will allow you to add scroll animations to any of your projects.

First, we'll set up a project to understand this practically, and then we will create both types of animations.

Project Setup

Let's start by setting up our Next.js project with all the necessary dependencies. I am going to use StalkBlitz for this project but you can use VSCode too. Although all the steps I’ll tell you from the VSCode perspective so you can follow the steps.

Create a new Next.js project with TypeScript:

npx create-next-app@latest

On installation, you'll see the following prompts:

   What is your project named? my-app
   Would you like to use TypeScript? No / Yes
   Would you like to use ESLint? No / Yes
   Would you like to use Tailwind CSS? No / Yes
   Would you like to use `src/` directory? No / Yes
   Would you like to use App Router? (recommended) No / Yes
   Would you like to customize the default import alias (@/*)? No / Yes
   What import alias would you like configured? @/*

Install Framer Motion
```
  npm install framer-motion
```
Clean up default files.
Remove the default code in app/page.tsx. We’ll start from scratch to focus on our scroll animations. The file should look like this.
```
    'use client';

      export default function Home() {

          return (
           <div>

           </div>
         );
       }
```
Start the Development Server
```
    npm run dev
```

Create Scroll Animation

Now that our project is set up, we can create both types of scroll animations one by one. You can start writing code directly in app/page.tsx file or create a separate component and import all of them in app/page.tsx file.

Creating Scroll-Linked Animation

There are several examples of scroll-linked animation:

Scroll Progress Bar: A circular or linear progress bar that fills up as the user scrolls down the page.
Parallax Scrolling: Background images or elements move at different speeds relative to the foreground, creating a depth effect as you scroll.
Fade-In Elements: Content fades into view as the user scrolls.
Scale Transformations: Elements gradually increase or decrease in size based on scroll progress. etc.

Let’s create some animations. While creating any scroll-linked animation you'll frequently use these methods and hooks from framer motion.

Scroll Progress Detection (useScroll): Tracks the user's scroll position, typically returning a value from 0 to 1 that represents the progress down the page.
```
   const { scrollYProgress } = useScroll();
```
Transforming Scroll Data (useTransform): Maps the scroll position to specific animation properties like opacity, scale, or position. Use this to trigger animations like fading, moving, rotating, scaling, or color changes during the scroll.
```
   const scaleValue = useTransform(scrollYProgress, [0, 1], [1, 2]); // Example of scaling
   const opacityValue = useTransform(scrollYProgress, [0, 0.5, 1], [1, 0.5, 0]); // Example of fading out
```
Animating with Motion Elements: Wrap target elements with motion.div (or any motion component) and link the animation to the scroll progress.
```
    <motion.div style={{ scale: scaleValue }}>Animated Content</motion.div>
```

Transitions: Apply smooth transitions to make animations feel fluid and natural.

    <motion.div transition={{ duration: 0.8 }}>Smooth Transition</motion.div>

Initial and Final States: Use initial, animate, or style props to define how elements look initially, and control their final states with useTransform or animations linked to scrollYProgress.

    <motion.div
      initial={{ opacity: 0, y: 50 }} // Starting state
      whileInView={{ opacity: 1, y: 0 }} // When the element comes 
       into view
      transition={{ duration: 0.8 }}
    >
      Scroll to animate
    </motion.div>

Scroll Progress Bar

We'll start by creating a scroll progress bar. To do this, open your text editor, create a new component, and begin writing code in it.

import { motion, useScroll, useTransform } from 'framer-motion';

export default function ScrollProgress() {
  const { scrollYProgress } = useScroll();
  const progressValue = useTransform(scrollYProgress, [0, 1], [0, 1]);
  const strokeDasharray = useTransform(progressValue, [0, 1], [0, 283]);
  return (
    <div>
      <motion.svg
        className="fixed top-4 left-4"
        width="100"
        height="100"
        viewBox="0 0 100 100"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle
          cx="50"
          cy="50"
          r="45"
          stroke="rgba(255,255,255,0.2)"
          strokeWidth="10"
        />
        <motion.circle
          cx="50"
          cy="50"
          r="45"
          stroke="#00FF00"
          strokeWidth="10"
          strokeDasharray="283"
          strokeDashoffset="0"
          style={{ strokeDashoffset: strokeDasharray }}
          initial={{ strokeDashoffset: 283 }}
          animate={{ strokeDashoffset: 0 }}
        />
      </motion.svg>
    </div>
  )
}

Here we used:

useScroll: Provides the scroll position as a normalized value between 0 and 1.
useTransform: Maps the scroll progress to the specific value ranges we need, whether it's for the stroke dasharray of the progress circle or any other transformation we want to apply.
motion Components: We use Framer Motion's motion.circle to animate the stroke length in real-time based on scrolling.

Dynamic Scaling Text Animation

In this example, we will create a scroll-linked dynamic scaling effect for a text element using Framer Motion.

Tracking Scroll Progress: Similar to the progress bar, we use useScroll() to get the current scroll progress of the page. The scrollYProgress value ranges from 0 at the top to 1 when fully scrolled.
```
     const { scrollYProgress } = useScroll();
```
Transforming the Scroll Value to Control Scale: We use useTransform() to convert the scroll progress into a scale value that changes dynamically as the user scrolls. In this case, we map the scrollYProgress from [0, 0.5, 1] to scale values [1, 2, 1], it means the text will grow from its original size, double in size at the middle of the scroll, and shrink back as you reach the bottom.
```
   const scaleValue = useTransform(scrollYProgress, [0, 0.5, 1], [1, 2, 1]);
```
Animating the Text Element: Inside the motion.h1 component, we will use the scaleValue to the style property to smoothly animate the text scaling effect based on the scroll position. The text will "grow" and "shrink" as the user scrolls.
```
   <motion.h1
     style={{ scale: scaleValue }} // Applying the dynamic scale 
      based on scroll
     className="text-6xl font-bold text-white drop-shadow-lg"
   >
     Scroll to Scale
   </motion.h1>
```
Styling the Section: The text is centered within a full-screen section that has a background gradient to add visual appeal. The background creates a smooth gradient from purple to indigo, making the dynamic text stand out more.
```
   <div className="min-h-screen flex justify-center items-center 
    bg-gradient-to-b from-purple-600 to-indigo-800">
```

Concepts Used:

useScroll: We use this hook again to track the page’s scroll progress, which serves as the trigger for the animation.
useTransform: Here, we map the scroll progress to scale values, making the text grow or shrink smoothly during the scroll event.
motion Components: The motion.h1 the component is animated in real-time, with the scale dynamically adjusted as the scroll value changes.

We again used the same concepts. useScroll useTransform and motion. So, this is the part of scroll-linked. Now let’s create some scroll-triggered animations.

Creating Scroll-Triggered Animation

Scroll-triggered animation doesn't stick to work with a few examples. You can link scroll animation to specific components of the page. For example, I have a landing page with two elements and a div containing some text. Currently, there are no animations on the page, but I want to add animations that activate when the viewport comes into view.

For this, we will use scroll-triggered animations. As we learned earlier, scroll-triggered animations occur when a particular viewport comes into view. So, let’s add Framer Motion elements to this code.

import { motion, useScroll, useTransform } from 'framer-motion';

export default function ScrollOne() {
  return (
    <section className="min-h-screen flex flex-col justify-center items-center bg-gradient-to-br from-pink-500 to-yellow-500 text-center">
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.8, ease: 'easeOut' }}
      className="p-8 bg-white/90 shadow-2xl rounded-3xl max-w-lg"
    >
      <h1 className="text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-green-400 mb-6">
        Smooth Scroll Animation
      </h1>
      <p className="text-lg text-gray-700">
        This is a fade-in animation triggered by scrolling down. Enhance
        user experience by making content appear progressively as users
        scroll.
      </p>
    </motion.div>

    <motion.div
      initial={{ y: -100, opacity: 0 }}
      whileInView={{ y: 0, opacity: 1 }}
      transition={{ delay: 0.5, duration: 0.8 }}
      className="absolute top-[10%] text-2xl text-purple-200 font-semibold"
    >
      Top-to-Bottom Animated Text!
    </motion.div>
  </section>
  )
}

We import motion from framer-motion
The entire component is wrapped in a section element, it has some basic styling.
The <motion.div> which is the first motion div. It contains the main content (a heading and paragraph). It uses initial and whileInView to create a scroll-triggered animation:

initial={{ opacity: 0, y: 50 }}: Initially, the box is invisible (opacity: 0) and positioned 50 pixels down (y: 50).
whileInView={{ opacity: 1, y: 0 }}: When the user scrolls it into view, it becomes fully visible (opacity: 1) and moves to its normal position (y: 0).
transition={{ duration: 0.8, ease: 'easeOut' }}: The transition takes 0.8 seconds and eases out smoothly.

The content inside is styled with Tailwind classes, giving it padding, a background with 90% opacity, shadow, rounded corners, and a max width.
After that, we have a second motion div (Top-to-Bottom Animated Text). This <motion.div> animates some text that moves down from the top of the screen:

initial={{ y: -100, opacity: 0 }}: The text starts 100 pixels above its normal position and is invisible.
whileInView={{ y: 0, opacity: 1 }}: When it comes into view, it moves to its normal position and becomes fully visible.
transition={{ delay: 0.5, duration: 0.8 }}: There's a 0.5-second delay before the animation starts, giving a staggered effect.

The final output will look like this.

Conclusion

That’s it for today’s blog. We cover 2 types of animations with some methods used while creating these animations like: useScroll useTransition whileInView initial and final states and things like that.

All the code with more animation samples I have added in my StalkBliz project. You can check it out here and view more sample scroll animations with code. If you want to explore more props, methods, and examples of scroll animations, you can check out Framer Motion’s scroll docs here.

Thanks for reading this blog. If you learned something from it, please like and share it with your friends and community. I write blogs and share content on JavaScript, TypeScript, Open Source, and other web development-related topics. Feel free to follow me on my socials. I'll see you in the next one. Thank You :)

How to Create PDFs using React JS

Shivam Katare — Fri, 18 Oct 2024 06:13:27 +0000

Introduction

Sometimes, you need to save your app's tables or data as a PDF for easy sharing. With React PDF Renderer, you can easily turn your React components into high-quality PDFs. In this blog, we will learn how to make it simple to change your web content into shareable PDFs.

React PDF Renderer has its own set of components, which are a bit different from regular React components or HTML tags. But, its functionality is easy to understand. Once you learn the basics, you'll be able to use React PDF Renderer efficiently to create PDFs in your React apps. Before we get into the code, we'll first look at the main components provided by React PDF Renderer and see how they work.

Prerequisites

Basic knowledge of React
Node.js and npm installed on your machine
Familiarity with CSS
An existing React project set up(this we will cover)

With these basics, you are ready to start the process of converting your React components into PDFs.

React PDF Renderer Components

React PDF Renderer uses various components to help you convert React components into PDFs. Here are the key components and their uses:

Document: The root element for creating a PDF document.
Page: Represents a single page within the PDF.
View: A container element similar to a div in HTML.
Text: Used for rendering text within the PDF.
Image: Allows you to include images in your PDF.
Link: Enables clickable links within the PDF.

View Component:
- Use: Acts as a container for other components, similar to <div> in HTML.
- Styling Format: Supports styles such as width, height, margin, padding, background color, border, etc.
```
<View style={{ width: 100, height: 50, backgroundColor: 'blue' }} >
/* pdf content */
</View>
```
Text Component:
- Use: Renders text content within the PDF document.
- Styling Format: Supports font size, font family, font weight, text alignment, color, and other text-related styles.
```
<Text style={{ fontSize: 14, fontWeight: 'bold', color: 'black' }}>
Hello, World!
</Text>
```
Image Component:
- Use: Embed images into the PDF document.
- Styling Format: Supports properties like width, height, and source URL for the image.
```
<Image src="example.jpg" style={{ width: 200, height: 100 }} />
```
Page Component:
- Use: Defines individual pages within the PDF document.
- Styling Format: Supports properties like size, orientation, and margins for each page.
```
<Page size="A4" style={{ margin: 10 }}>Page Content</Page>
```
Link Component:
- Use: Creates hyperlinks within the PDF document.
- Styling Format: Supports defining the URL and styling options for the hyperlink.
```
<Link src="https://example.com" style={{ color: 'blue' }}>
  Click here
</Link>
```
Document Component:
- Use: Represents the entire PDF document.
- Styling Format: Supports global document settings such as page size, margins, and metadata.
```
<Document title="Example Document">
<Page>
  <Text>
      Content
  </Text>
</Page>
</Document>
```

These are the basic components that are used while working with React PDF. You can see a complete list of components with available valid props here.

Setting Up the Environment

You can start building your PDFs in your existing app, or you can use an online REPL specifically for React PDF. The advantage of an online React PDF REPL is that we can instantly view the preview of our code. Without this preview system, we would need to download the PDF each time to view it.

So, we will use the online REPL for React PDF because it allows us to preview our code changes instantly. This preview thing is great while creating a PDF, as it saves time and helps us catch errors early. Although, I will also cover how you can set up React PDF in your React application.

Let's create a new React application, install React PDF Renderer, and write our first line of code with it.

Open your terminal and run the following command to create a new React app using Create React App

npx create-react-app my-react-pdf-app

This command will create a new directory named my-react-pdf-app with a basic React setup.

cd my-react-pdf-app

Use npm to install the React PDF Renderer library.

npm install @react-pdf/renderer

Open the newly created project (my-react-pdf-app) in your favorite code editor (like VSCode). Create a new file named MyDocument.js in the src directory.

// src/MyDocument.js

import React from 'react';
import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'column',
    backgroundColor: '#E4E4E4',
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.page}>
      <View style={styles.section}>
        <Text>Section #1</Text>
      </View>
      <View style={styles.section}>
        <Text>Section #2</Text>
      </View>
    </Page>
  </Document>
);

export default MyDocument;

Open App.js and modify it to render the PDF document.

// src/App.js

import React from 'react';
import { PDFDownloadLink } from '@react-pdf/renderer';
import MyDocument from './MyDocument';

const App = () => (
  <div className="App">
    <header className="App-header">
      <PDFDownloadLink document={<MyDocument />} fileName="mypdf.pdf">
        {({ blob, url, loading, error }) =>
          loading ? 'Loading document...' : 'Download PDF now!'
        }
      </PDFDownloadLink>
    </header>
  </div>
);

export default App;

Open your terminal, make sure you are in the project directory, and start the development server.

npm start

Your default browser should automatically open and navigate to http://localhost:3000, where you will see a link to download the PDF.

But in this blog, we will use an Online Code REPL so that we can see the output instantly. Then, we can use the same code in our React app to download it. Both methods will give the same result.

Code PDF

So, we are going to code this PDF design. With this design, we will understand how all the components work. After that, you can code any PDF design.

So, till now, we understand that there are three major components for React PDF:

Document
Page
View

This PDF design is also divided into these three main components.

So, from the above diagram, I hope you understand what we need to build first. First, we will create a document using the <Document> component. Then, we will declare a <Page>, and after that, we will declare a <View> and start defining our components there.

Steps:

Basic Setup
Start with importing basic things and components we need to use for React PDF.

import React from 'react';
import { Page, Text, View, Document, StyleSheet, Image } from '@react-pdf/renderer';

Document Styling
Now we will style our document. Here, we will set how our entire document looks. We will use StyleSheet.create to define the styles for our PDF components. This is similar to CSS but written in JavaScript objects:

const styles = StyleSheet.create({
  page: {
    padding: 20,
    backgroundColor: '#ffffff'
  },
  section: {
    marginBottom: 20
  }
});
// we will add more style later on.

Here, we will use the page and section styles in our components like this.

<Page style={styles.page}>

Define Data
Define the data you want to display in the PDF document. This data can be dynamic and fetched from an API or a database:

const data = [
  {
    title: 'Attack on Titan',
    studio: 'Wit Studio',
    genre: 'Action, Dark Fantasy',
    releaseDate: '04-07-2013',
    status: 'Completed',
    rating: '9.0',
    cost: '$120'
  }
];

Create Document Component
Define the MyDocument component which will structure the PDF document. The name can be anything. It is our React component.

const MyDocument = () => {
 return (
   // Our pdf code will be here
     );
};
export default MyDocument;

The component returns JSX that describes the structure of the PDF document. So, in the return statement, we will start by using our first React PDF component, which is <Document />.

const MyDocument = () => {
 return (
     <Document>
       /* Here we will steup our page */
     </Document>
     );
};
export default MyDocument;

This creates a Black PDF Document.

Create PDF Pages
Now, let's start by creating pages for our PDF. Use the <Page> component to define pages. The number of <Page> components will determine the number of pages. For example, if you use two <Page> tags, your PDF will have two pages. If you have too much data for a single page, React PDF will automatically create additional pages as needed.

The <Page> component has several props, such as size, which defines the page size like A4, A2, A3, etc., along with many other props. You can see all page props here.

// Create Document Component
const MyDocument = () => {
  return (
    <Document>
      <Page size="A4" style={styles.page}>
        <View> 
          <Text>Hello</Text>
        </View>
      </Page>
    </Document>
  );
};
export default MyDocument;

Here, we use the <Page> component and add a size prop, giving it a value. We also use the style defined in our style object. Inside the <Page> component, we are using the <View> component, and within that, we are using the <Text> component to display the text "Hello." The output will look like this:

So, the View component works just like a div. For example, if you want a big box in your PDF divided into specific columns, and you want to give each column a different color, you just need a few View components and some styling. If you need to add text, use the Text component. To add an image, use the Image component. Check the code and output below.

// Create styles
const styles = StyleSheet.create({
  page: {
    padding: 20,
    backgroundColor: '#ffffff'
  },
  section: {
    marginBottom: 20
  },
  bigBox: {
    flexDirection: 'row',
    marginBottom: 20,
    borderWidth: 1,
    borderColor: '#000',
  },
  column: {
    flex: 1,
    padding: 10,
    borderWidth: 1,
    borderColor: '#000',
  },
  column1: {
    backgroundColor: '#ffcccc',
  },
  column2: {
    backgroundColor: '#ccffcc',
  },
  column3: {
    backgroundColor: '#ccccff',
  },
  text: {
    fontSize: 12,
  },
  image: {
    width: "auto",
    height: 100,
  },
  canvas: {
    width: '100%',
    height: 100,
    borderWidth: 1,
    borderColor: '#000',
    backgroundColor: '#e0e0e0',
  }
});

// Create Document Component
const MyDocument = () => {
  return (
      <Document>
    <Page size="A4" style={styles.page}>
      <View style={[styles.bigBox]}>
        <View style={[styles.column, styles.column1]}>
          <Text style={styles.text}>This is a text column</Text>
        </View>
        <View style={[styles.column, styles.column2]}>
          <Image
            style={styles.image}
            src="https://t3.ftcdn.net/jpg/07/24/53/02/360_F_724530208_783brjeXb7pllU2HefNMxNc1TynemreM.jpg"
          />
        </View>
        <View style={[styles.column, styles.column3]}>
          <View style={styles.canvas}>
            <Text style={styles.text}>Canvas section (Placeholder)</Text>
          </View>
        </View>
      </View>
    </Page>
  </Document>
  );
};

export default MyDocument;

Explanation

styles.bigBox: This style defines the main container that holds the three columns.
styles.column: This style defines the base style for each column, including padding and borders.
styles.column1, styles.column2, styles.column3: These styles define the background colors for each column.
styles.text: This style is used for the text inside the first column.
styles.image: This style is used for the image inside the second column.
styles.canvas: This style defines the placeholder canvas section inside the third column.

Here, each column is given a different background color for visual separation. The first column contains text, the second contains an image, and the third contains a placeholder for a canvas section.

So, for this, we just used the View, Text, and Image components. I hope you now understand that to create any component, we only need a few components to create a PDF in React. Now, let's return to our main design. We will use the same components and add some styling like flex, border styling, font styling, etc.

Let's create the header first. We need to use a View component as the header, apply some styles using flex, and add Image and Text components to it.

// src/MyDocument.js
import React from 'react';
import { Page, Text, View, Document, StyleSheet, Image } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    padding: 20,
    backgroundColor: '#ffffff'
  },
  section: {
    marginBottom: 20
  },
  headerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 20
  },
  headerText: {
    fontSize: 20,
    fontWeight: 'bold'
  },
  image: {
    width: 50,
    height: 50
  },
  date: {
    fontSize: 12,
    textAlign: 'right'
  },
});
// Create Document Component
const MyDocument = () => {
  return (
        <Document>
      <Page size="A4" style={styles.page}>
        <View style={styles.section}>
          <View style={styles.headerContainer}>
            <Image style={styles.image} src="https://static.vecteezy.com/system/resources/thumbnails/013/993/061/small/mugiwara-the-illustration-vector.jpg" />
            <Text style={styles.headerText}>Anime Report</Text>
            <Text style={styles.date}>{new Date().toLocaleDateString()}</Text>
            </View>
          </View>
      </Page>
    </Document>
  );
};

export default MyDocument;

You see, it's easy to grasp.

Let's code the table. To create tables using React PDF Renderer, we just need to use flex styling and the View and Text components. Each View component will contain one Text component, but you can add more Text components if needed.

The Main Structure

This code will create a table in a PDF document.

<View style={styles.table}>
  {/* Table Header */}
  <View style={styles.tableRow}>
    {/* Each Column Header */}
    <View style={styles.tableColHeader}>
      <Text style={styles.tableCellHeader}>Title</Text>
    </View>
    {/* More column headers... */}
  </View>
  {/* Table Rows */}
  {data.map((item, index) => (
    <View style={styles.tableRow} key={index}>
      {/* Each Column in a Row */}
      <View style={styles.tableCol}>
        <Text style={styles.tableCell}>{item.title}</Text>
      </View>
      {/* More columns... */}
    </View>
  ))}
</View>

Table Container
```
<View style={styles.table}>
```
This View acts as the main container for the entire table. The styles.table style will define how the table is displayed, like borders, padding, etc.
Table Header Row
```
<View style={styles.tableRow}>
```
This View represents a row in the table. The styles.tableRow style will apply to both the header row and each data row.
Column Headers
```
<View style={styles.tableColHeader}>
<Text style={styles.tableCellHeader}>Title</Text>
</View>
```
Each View inside the header row is a column header. The styles.tableColHeader style will define how the header cells look, such as their background color, borders, and text alignment. The Text component inside it contains the column's title and uses the styles.tableCellHeader style for text styling. Repeat this for each column header (e.g., Title, Studio, Genre, Release Date, Status, Rating, Cost).
Data Rows
```
{data.map((item, index) => (
<View style={styles.tableRow} key={index}>
 {/* Columns for each row */}
</View>
))}
```
Here, we use the map function to loop over an array called data. For each item in the array, it creates a new row in the table. The key attribute helps React manage the list of items efficiently.
Columns in Data Rows
```
<View style={styles.tableCol}>
<Text style={styles.tableCell}>{item.title}</Text>
</View>
```
Each View inside the data row is a column. The styles.tableCol style will define the appearance of the cells in the data rows, and the Text component inside displays the actual data. The styles.tableCell style is applied to the text for consistent styling. Repeat this for each column in the data row (e.g., item.title, item.studio, item.genre, item.releaseDate, item.status, item.rating, item.cost).

Table Code

// React PDF Renderer Component
import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
// Create styles
const styles = StyleSheet.create({
// after date styling....
table: {
  display: "table",
  width: "auto",
  borderStyle: "solid",
  borderWidth: 1,
  borderColor: '#bfbfbf'
},
tableRow: {
  flexDirection: "row"
},
tableColHeader: {
  width: "15%",
  borderStyle: "solid",
  borderWidth: 1,
  borderColor: '#bfbfbf',
  backgroundColor: '#f0f0f0'
},
tableCol: {
  width: "15%",
  borderStyle: "solid",
  borderWidth: 1,
  borderColor: '#bfbfbf'
},
tableCellHeader: {
  margin: 5,
  fontSize: 10,
  fontWeight: "bold"
},
tableCell: {
  margin: 5,
  fontSize: 10
},
footerContainer: {
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
  marginTop: 20
},
footerText: {
  fontSize: 12
},
totalCost: {
  fontSize: 12,
  fontWeight: 'bold'
}
});
const data = [
{
  title: 'Attack on Titan',
  studio: 'Wit Studio',
  genre: 'Action, Dark Fantasy',
  releaseDate: '04-07-2013',
  status: 'Completed',
  rating: '9.0',
  cost: '$120'
},
// You can add more or fetch data from an API or database
];
// Create Document Component
const MyDocument = () => (
<Document>
<Page size="A4">
   /* After header code */
  <View style={styles.table}>
    <View style={styles.tableRow}>
      <View style={styles.tableColHeader}>
        <Text style={styles.tableCellHeader}>Title</Text>
      </View>
      <View style={styles.tableColHeader}>
        <Text style={styles.tableCellHeader}>Studio</Text>
      </View>
      <View style={styles.tableColHeader}>
        <Text style={styles.tableCellHeader}>Genre</Text>
      </View>
      <View style={styles.tableColHeader}>
        <Text style={styles.tableCellHeader}>Release Date</Text>
      </View>
      <View style={styles.tableColHeader}>
        <Text style={styles.tableCellHeader}>Status</Text>
      </View>
      <View style={styles.tableColHeader}>
        <Text style={styles.tableCellHeader}>Rating</Text>
      </View>
      <View style={styles.tableColHeader}>
        <Text style={styles.tableCellHeader}>Cost</Text>
      </View>
    </View>
    {data.map((item, index) => (
      <View style={styles.tableRow} key={index}>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>{item.title}</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>{item.studio}</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>{item.genre}</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>{item.releaseDate}</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>{item.status}</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>{item.rating}</Text>
        </View>
        <View style={styles.tableCol}>
          <Text style={styles.tableCell}>{item.cost}</Text>
        </View>
      </View>
    ))}
  </View>
</Page>
</Document>
);
export default MyDocument;

Here, we've created a simple table with headers and data rows. Each item in the data array becomes a row in the table, and each property of the item becomes a cell in that row. The styling makes sure the table looks neat and professional in the PDF document.

Now, at the end, we can code a footer. The code below creates a footer with an image and a text displaying the total cost.

// style code after table styles...

  footerContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop: 20
  },
  footerText: {
    fontSize: 12
  },
  totalCost: {
    fontSize: 12,
    fontWeight: 'bold'
  }

//... After table code add footer

<View style={styles.footerContainer}>
  <Image style={styles.image} src="https://static.vecteezy.com/system/resources/thumbnails/013/993/061/small/mugiwara-the-illustration-vector.jpg" />
  <Text style={styles.totalCost}>Total Cost: ${calculateTotalCost()}</Text>
</View>

This View acts as the main container for the footer. The styles.footerContainer style defines how the footer is displayed, including its layout, padding, margin, and alignment. The Image component displays an image, while the Text component shows the total cost.

Conclusion

In this blog, we covered how to use React PDF Renderer to convert React components into high-quality PDFs. We covered the key components, including Document, Page, View, Text, Image, and Link, and explained their uses and styling. We covered, creating a basic PDF document, adding pages, styling, and building complex structures like tables and footers. By following this, you can easily transform your web content into shareable PDFs using React.

Official React PDF Renderer Docs

React PDF Renderer NPM

Complete Code

Speaking at a Tech Event for the First Time: My Experience

Shivam Katare — Wed, 14 Aug 2024 15:16:24 +0000

The first time for anything always feels special. It could be the first interview, the first job offer, the first salary, or anything else. The first time feels special because it gives us new learnings, new perspectives, and new ways to think about our next steps. In this blog, I am going to share my first-time experience as a speaker at a tech event and my first in-person meetup. The best part is, I attended my first tech event as a speaker.

So, without further delay, let's get started.

Introduction

I am Shivam, a recently graduated computer science student, currently working as a frontend developer at an American-based startup. I love contributing to open-source projects, writing technical blogs, and being part of a community. With this passion, I always wanted to share my learnings at a tech event. Finally, I got the chance to speak at a tech event on June 29, 2024 (yeah😅, I know I am publishing this a bit late, but better late than never). This date will always be memorable. I learned a lot and shared a lot. Let's explore all of that in the next sections.

The Conference

The conference that allowed me to speak at an in-person event was JSLovers. For those who don't know, JSLovers is a well-known tech meetup community for JavaScript developers. It's a place where JavaScript enthusiasts gather to share knowledge, learn about the latest trends and network with like-minded individuals.

I had the chance to speak at their Delhi meetup on the topic of React 19. My presentation was titled "React 19 and the Chamber of Secrets," and I covered topics of React 19 features, including server components, asset loading, actions, and enhanced hooks.

Deciding to apply

In my third year of college (2023), I got to know about tech conferences. The first one I discovered was React India. At that time, I was looking for a job and landed on the React India website because they were hiring volunteers. I applied but unfortunately didn't get selected. After applying, I started exploring their website and realized that these events not only feature experienced speakers but also welcome knowledgeable first-time speakers.

I applied with a very poor CFP (Call for Proposals) because I didn't know how to write a good one, so it was rejected. However, from that experience, I set a goal. I realized that these events are a great opportunity to meet industry professionals, gain knowledge, and build confidence by speaking at events. From that point on, I applied to many conferences. Finally, JSLovers CFP was selected, and I got a chance to speak at a JSLovers Meetup. On May 30th, I saw their post mentioning that they had opened a CFP form, and a month earlier, my CFP had been rejected by ReactNexus.

So, I was fully motivated, thinking, "Now I know how to avoid those mistakes and write a better CFP." I followed the tweet and filled out the form.

// Detect dark theme var iframe = document.getElementById('tweet-1796164721638334933-984'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1796164721638334933&theme=dark" }

And yay🥳!!! It got selected. But how did this one get selected and not the others? What did I write in this CFP? and how was the experience? Let's explore all of this in the next section.

Experience

I had an online demo session with the JSLovers team when I received the email. During this session, I received feedback and suggestions to improve my presentation. After adding their input, I was very excited about the talk. The event was initially scheduled for June 22nd but was later moved to June 29th.

On June 28th, I was nervous. I was worried about what would happen at the event, how I would start conversations with people I didn't know, where I would find a place to sit, and what I should say when I got there. I had never been to an in-person event before, and because I'm a bit shy and introverted, these thoughts made me feel anxious. I would appreciate any tips on handling these kinds of situations, so please share your advice in the comments below.

I woke up around 4 AM, got ready, and took the metro at 6:30 AM. Despite my nervousness, I was ready to hit the stage.

// Detect dark theme var iframe = document.getElementById('tweet-1806853503194955952-178'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1806853503194955952&theme=dark" }

I reached the destination. There were only a few people there (I arrived too early 😅), so I thought about recording some videos, but my shyness stopped me.

I sat down without talking to anyone, just thinking about how I would talk to everyone. After 15 minutes, people started arriving, including the organizers. Meeting them made me feel a bit better. The event began about 20 minutes later. I was set to speak second, and I felt pretty good about what I was going to talk about. I was excited for my turn to speak.

The first talk finished, and my name was announced. As I walked up to the stage, I felt a bit nervous again, but once I grabbed the mic, all my nervousness disappeared.

It was just me, my talk, and the audience with their questions and appreciation. My talk lasted about 40-45 minutes and went great. When I finished, everyone applauded and appreciated my talk. It felt like a hero moment, standing in front of everyone and receiving their appreciation for the effort that we made.

After that, a 30-minute break for networking began, and I connected with many people. We talked about jobs, tech, and personal views on various topics. It felt like we had known each other for a long time. It was a great experience.

Following the break, there were two more talks about Polyfills and TypeScript. After those talks, the event ended. We took a group photo, clicked pictures with everyone, and then headed back home.

// Detect dark theme var iframe = document.getElementById('tweet-1808386771484340430-535'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1808386771484340430&theme=dark" }

Learnings

My first time speaking at a tech event was a really valuable experience. I learned a lot and gained some important lessons.

Preparation is key: The online demo session with the JSLovers team was crucial. Their feedback helped me refine my presentation and boosted my confidence. Always be open to constructive criticism and use it to improve your content.
Embrace nervousness: It's normal to feel anxious before your first speaking engagement. Instead of trying to get rid of these feelings, use them as positive energy. Remember, a bit of nervousness can keep you alert and focused.
Confidence grows on stage: Even though I was nervous at first, I felt more confident once I started speaking. Trust in your preparation and your understanding of the topic.
Networking is priceless: The connections made during the networking break were a highlight of the event. These interactions can lead to future opportunities, collaborations, or simply enriching professional relationships.
Community support: The tech community, especially at events like these, is supportive and encouraging to newcomers. Don't hesitate to put yourself out there.
Follow-up matters: After the event, I realized the importance of following up with the connections I made. Whether through LinkedIn or email, maintaining these relationships can be beneficial for future collaborations or opportunities.

Speaking at this tech event was about more than just giving a talk; it was about personal growth, engaging with the community, and professional development. These experiences have boosted my confidence for future speaking engagements and improved my approach to professional interactions in the tech world.

For future events, I am very excited and am now learning more to prepare myself for big tech events. I have submitted my CFP for React India 2024 and am 🤞hoping for the best.

Writing an Effective CFP: How I Got Selected

I am not experienced in writing CFPs, but below are a few things that I learned by writing many CFPs and learning from their rejections:

Focus on the "How" and "Why," not just the "What": When selecting topics for your CFP, don't just choose to tell your audience "WHAT." Try to include "HOW" and "WHY" too. For example, if you choose React as your topic, don't just focus on "What is React?" Instead, mention and focus on:

Why React?
Why do we need it?
Is it really better or necessary? If yes, how?
What problems does it solve?

Organizers want to choose talks that make sense and provide value to their audience. Put yourself in the attendees' shoes - they expect great talks that offer valuable insights.

Be specific and unique: Highlight what makes your talk different from others on similar topics. Share personal experiences or unique perspectives that can add value to the audience.

Clear and concise title: Create a title that accurately represents your talk and catches attention. Avoid clickbait but make it intriguing.

Let's say you're giving a talk about optimizing React applications for better performance. Here are a few examples of how you could craft the title:

Bad (too vague): "Making React Better"
Bad (clickbait): "The ONE WEIRD TRICK to Make Your React App Lightning Fast!"
Good: "React Performance Optimization: Strategies for Faster Apps"

A good example is easy to understand, gets to the point without using too many words, and makes you interested in what it has to offer. It should be informative but not try to trick you into clicking on it, and it should be something that would appeal to people who work with React.

Well-structured description: Provide a clear outline of what you'll cover. Use bullet points to break down the main topics you'll discuss.

Highlight takeaways: Clearly state what the audience will learn or gain from your talk. This helps organizers understand the value you're bringing.

Proofread and edit: Ensure your proposal is free of grammatical errors and typos. A well-written CFP demonstrates professionalism and attention to detail.

Submit early: Don't wait until the last minute. Early submissions often get more attention and consideration.

Learn from rejections: If your CFP doesn't get selected, don't be discouraged. Ask for feedback when possible and use it to improve future submissions.

For this particular CFP that got selected, I made sure to apply these principles. I focused not just on explaining React 19, but on why it's important, how it differs from previous versions, and what problems it solves for developers. I structured my proposal to show that I would provide practical insights and not just theoretical knowledge.

Remember, when writing a CFP, approach it from an attendee's point of view. Submit a talk proposal that you would be excited to attend yourself. The goal isn't just to get selected; it's to share valuable learning with others and contribute meaningfully to the tech community.

By following these things and continuously improving my CFP writing skills, I was able to create a proposal that resonated with the event organizers and ultimately led to my selection as a speaker.

Conclusion

That's it for this blog, I hope you enjoy reading it. I write blogs and share content on JavaScript, TypeScript, Open Source, and other web development-related topics. Feel free to follow me on my socials. I'll see you in the next one. Thank You :)

How to Create Dynamic Email Contact Form in Next.js Using Resend and Zod

Shivam Katare — Sat, 10 Aug 2024 09:53:53 +0000

Introduction

Next.js is a powerful full-stack framework that allows us to build applications with both frontend and backend features. It's very flexible and can be used for everything from simple static websites to complex web apps. Today, we will use Next.js to build an email contact form.

Forms are a key part of any website, letting users interact with the application. Whether it's for signing up, logging in, giving feedback, or collecting data, forms are vital for user experience. Without forms, a full-stack application wouldn't be able to gather and process user input properly.

In this blog, I will show you how to create an email contact form using Next.js, Resend, and Zod (for form validation). We will cover setting up the project, designing the form, handling form submissions, and creating a separate API route. By the end, you will know how to build and add forms to your Next.js apps, ensuring your web app works well and is easy to use.

So, without further delay, let's get started.

What is Resend?

Resend is a modern email API for developers. It's designed to make sending emails from your applications simple, reliable, and scalable. Unlike traditional email services, Resend is built with developers in mind, offering a straightforward API that integrates seamlessly with various programming languages and frameworks, including Next.js.

In our Next.js form project, we'll use Resend to send emails. When a user submits the form, we'll use Resend's API to send a confirmation email or process the form data as needed.

What is Zod?

Zod is a powerful tool for your data. It's a TypeScript-first library that helps you define and check the shape of your data. Think of it as setting rules for your data and then making sure the data matches those rules before you use it.

If you're using TypeScript (and if you're not, you should consider it!), Zod plays nicely with it. It can automatically infer TypeScript types from your schemas, which is a huge time-saver. While TypeScript checks types at compile-time, Zod does it at runtime. This means you can catch data issues that might slip through static type checking. You can use Zod for all sorts of data validation scenarios, from simple form inputs to complex API responses.

Project Setup

Let's start by setting up our Next.js project with all the necessary dependencies. We'll use TypeScript for type safety, Tailwind CSS for styling, Ant Design for UI components, Zod for form validation, and Resend for email functionality.

Create a new Next.js project with TypeScript:

npx create-next-app@latest my-contact-form --typescript
cd my-contact-form

Install additional dependencies:

yarn add antd zod resend react-icons

Setup Environment variables

For sending an email, we will use Resend, so we need the Resend API key. Before starting our server, let's go to Resend and get our API keys. Click here to go to the Resend site, and click the sign-in button.

After signing in, you'll be redirected to this page. Here, you'll see all the emails you received from your form.

Here, click on the API Keys section

And, generate an API key by clicking on this 👇 button

Now, copy that API key and keep it safe. Next, open VSCode and create a new file named .env in your root folder. Add an environment variable there.

RESEND_API_KEY=yourapikeywillbehere

Now you can also run your server using this command.

yarn dev

Email Template Component

Let's start by creating an email template. This will be the template you receive when someone sends you an email via the contact form.

import * as React from 'react';

interface EmailTemplateProps {
  firstName: string;
  message: string;
}

export const EmailTemplate: React.FC<EmailTemplateProps> = ({
  firstName,
  message,
}) => (
  <div>
    <h1>Hello, I am {firstName}!</h1>
    <p>You have received a new message from your Portfolio:</p>
    <p>{message}</p>
  </div>
);

This simple React component defines the structure of the email that will be sent when someone submits the contact form. It takes two props: firstName and message. The component creates a personalized greeting using the first name and displays the submitted message.

Implementing Email Sending with Resend API

Here. we'll see how to implement email-sending functionality using the Resend API.

The Code Structure

First, let's look at where this code lives in our Next.js project:

app/
  ├── api/
  │   └── v1/
  │       └── send/
  │           └── route.ts

This structure follows Next.js 13's App Router convention, where API routes are defined as route handlers within the app directory.

This is our complete API route code 👇

import { EmailTemplate } from 'app/components/email-template';
import { NextResponse } from 'next/server';
import { Resend } from 'resend';
import { v4 as uuid } from 'uuid';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: Request) {
  try {
    const { name, email, subject, message } = await req.json();

    const { data, error } = await resend.emails.send({
      from: 'Contact Form <onboarding@resend.dev>',
      to: 'katare27451@gmail.com',
      subject: subject || 'New Contact Form Submission',
      reply_to: email,
      headers: {
        'X-Entity-Ref-ID': uuid(),
      },
      react: EmailTemplate({ firstName: name, message }) as React.ReactElement,
    });

    if (error) {
      return NextResponse.json({ error }, { status: 500 });
    }

    return NextResponse.json({ data, message: 'success' }, { status: 200 });
  } catch (error) {
    console.error('Error processing request:', error);
    return NextResponse.json({ error: 'Failed to process request' }, { status: 500 });
  }
}

Breaking Down the Code

Now, let's examine each part of the code:

import { EmailTemplate } from 'app/components/email-template';
import { NextResponse } from 'next/server';
import { Resend } from 'resend';
import { v4 as uuid } from 'uuid';

These import statements bring in the necessary dependencies:

EmailTemplate: A custom React component for our email content(That we already built above.
NextResponse: Next.js utility for creating API responses.
Resend: The Resend API client.
uuid: For generating unique identifiers.

const resend = new Resend(process.env.RESEND_API_KEY);

Here, we initialize the Resend client with our API key. It's crucial to keep this key secret, so we store it in an environment variable.

export async function POST(req: Request) {
  // ... (code inside this function)
}

This exports an async function named POST, which Next.js will automatically use to handle POST requests to this route.

const { name, email, subject, message } = await req.json();

We extract the form data from the request body. This assumes the client is sending a JSON payload with these fields.

const { data, error } = await resend.emails.send({
  from: 'Contact Form <onboarding@resend.dev>',
  to: 'katare27451@gmail.com',
  subject: subject || 'New Contact Form Submission',
  reply_to: email,
  headers: {
    'X-Entity-Ref-ID': uuid(),
  },
  react: EmailTemplate({ firstName: name, message }) as React.ReactElement,
});

This is where we'll get our emails! We use Resend's send method to dispatch the email:

from: The sender's email address.
to: The recipient's email address.
subject: The email subject, using the provided subject or a default.
reply_to: Sets the reply-to address to the form submitter's email.
headers: Includes a unique ID for tracking.
react: Uses our custom EmailTemplate component to generate the email content.

if (error) {
  return NextResponse.json({ error }, { status: 500 });
}

return NextResponse.json({ data, message: 'success' }, { status: 200 });

Here, we handle the response from Resend. If there's an error, we return a 500 status with the error details. Otherwise, we send a success response.

catch (error) {
  console.error('Error processing request:', error);
  return NextResponse.json({ error: 'Failed to process request' }, { status: 500 });
}

This catch block handles any unexpected errors, logs them, and returns a generic error response.

And that's it! We've set up our API route. The only thing left is to set up our logic and UI. Let's do that too 💪

Contact Page Component

In your app directory, create a new folder named contact-form and inside this folder, create a file named page.tsx.

app/
  ├── contact-form/
  │   └── page.tsx

Imports and Dependencies

First, import all necessary components from Ant Design, Next.js, and React Icons. We also import Zod for form validation.

import React from 'react';
import { Form, Input, Button, message, Space, Divider, Typography } from 'antd';
import Head from 'next/head';
import { FaUser } from 'react-icons/fa';
import { MdMail } from 'react-icons/md';
import { FaMessage } from 'react-icons/fa6';
import { z } from 'zod';
import Paragraph from 'antd/es/typography/Paragraph';

UI Layout and Design

Now, let's create our UI, and then we'll move on to the logic. Our form will look something like this.👇

In your page.tsx, after all the import statements, define a component and add a return statement first.

const ContactPage: React.FC = () => {
  return (
      <div className="max-w-3xl w-full space-y-8 bg-white p-10 rounded-xl shadow-2xl">
       /* our code will be here */
      </div>
  );
};

export default ContactPage;

Currently, we have just a simple div with a few tailwind styling now, we'll first add our heading part.

...

        <div>
          <h2 className="mt-1 text-center text-3xl font-extrabold text-gray-900">Get in Touch</h2>
          <p className="mt-1 mb-4 text-center text-sm text-gray-600">
            I'd love to hear from you! Fill out the form below to get in touch.
          </p>
        </div>

...

Now, let's add our input fields

 ...     
        <Form
          form={form}
          name="contact"
          onFinish={onFinish}
          layout="vertical"
          className="mt-8 space-y-6"
        >
          <Form.Item
            name="name"
            rules={[{ required: true, message: 'Please input your name!' }]}
          >
            <Input prefix={<FaUser className="site-form-item-icon" />} placeholder="Your Name" size="large" />
          </Form.Item>
          <Form.Item
            name="email"
            rules={[
              { required: true, message: 'Please input your email!' },
              { type: 'email', message: 'Please enter a valid email!' }
            ]}
          >
            <Input prefix={<MdMail className="site-form-item-icon" />} placeholder="Your Email" size="large" />
          </Form.Item>
          <Form.Item
            name="subject"
            rules={[{ required: true, message: 'Please input a subject!' }]}
          >
            <Input prefix={<FaMessage className="site-form-item-icon" />} placeholder="Subject" size="large" />
          </Form.Item>
          <Form.Item
            name="message"
            rules={[{ required: true, message: 'Please input your message!' }]}
          >
            <TextArea
              placeholder="Your Message"
              autoSize={{ minRows: 4, maxRows: 8 }}
            />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              disabled={isSubmitting}
            >
              {isSubmitting ? 'Sending...' : 'Send Message'}
            </Button>
          </Form.Item>
        </Form>
...

Here, in the above code firstly we added a Form Component. This is the main Form component from Ant Design. It has the following props:

<Form
  form={form}
  name="contact"
  onFinish={onFinish}
  layout="vertical"
  className="mt-8 space-y-6"
>
  {/* Form items */}
</Form>

form: Links the form to the form object created using Form.useForm().
name: Gives the form a name, in this case, "contact".
onFinish(we'll declare this function in our next section): Specifies the function to be called when the form is submitted successfully.
layout: Sets the form layout to "vertical".
className: Applies CSS classes for styling.

Then, we added a Form Items. Each Form.Item represents a field in the form. Let's look at the "name" field as an example.

<Form.Item
  name="name"
  rules={[{ required: true, message: 'Please input your name!' }]}
>
  <Input prefix={<FaUser className="site-form-item-icon" />} placeholder="Your Name" size="large" />
</Form.Item>

name: Specifies the field name.
rules: An array of validation rules. Here, it's set as required.
The Input component is used for text input, with a user icon prefix and a placeholder.

Similarly, we have Email and other fields.

<Form.Item
  name="email"
  rules={[
    { required: true, message: 'Please input your email!' },
    { type: 'email', message: 'Please enter a valid email!' }
  ]}
>
  <Input prefix={<MdMail className="site-form-item-icon" />} placeholder="Your Email" size="large" />
</Form.Item>

This field has an additional rule to ensure the input is a valid email address.

Subject and Message Fields: These are similar to the name field, with the message field using a TextArea component for multi-line input.

Then, we have a Submit Button to submit our form

<Form.Item>
  <Button
    type="primary"
    htmlType="submit"
    className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
    disabled={isSubmitting}
  >
    {isSubmitting ? 'Sending...' : 'Send Message'}
  </Button>
</Form.Item>

This is the submit button for the form. It's disabled when isSubmitting (we'll add this state in our next section) is true, and its text changes to "Sending..." during submission.

Form Submission Logic

So, in the logic part, we have a few things to do:

Setting up Zod schema for form validation
Adding new states
and, implementing a onFinish function

We'll start with setting up our schema first.

// Zod schema for form validation
const contactSchema = z.object({
  name: z.string().min(4, 'Name must be at least 4 characters').max(50, 'Name must not exceed 50 characters'),
  email: z.string().email('Invalid email address').regex(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/, "Email must be a valid format"),
  subject: z.string().min(5, 'Subject must be at least 5 characters').max(100, 'Subject must not exceed 100 characters'),
  message: z.string().min(20, 'Message must be at least 20 characters').max(1000, 'Message must not exceed 1000 characters'),
});

type ContactFormData = z.infer<typeof contactSchema>;

This part defines a Zod schema for form validation. As we already learned, Zod is a TypeScript-first schema declaration and validation library. The contactSchema object defines the structure and validation rules for the contact form:

name: Must be a string between 4 and 50 characters.
email: Must be a valid email address and match the specified regex pattern.
subject: Must be a string between 5 and 100 characters.
message: Must be a string between 20 and 1000 characters.

The ContactFormData type is inferred from the Zod schema, providing type safety for the form data.

Now, let's add 2 new states and implement our onFinish function.

const ContactPage: React.FC = () => {
  const [form] = Form.useForm<ContactFormData>();
  const [isSubmitting, setIsSubmitting] = React.useState(false);

  const onFinish = async (values: ContactFormData) => {
    setIsSubmitting(true);
    try {
      contactSchema.parse(values);

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

      if (!response.ok) {
        message.error('Failed to send message. Please try again.');
        setIsSubmitting(false); 
      }

      const data = await response.json();

      if (data.message === 'success') {
        message.success('Message sent successfully!');
        setIsSubmitting(false);
        form.resetFields();
      } else {
        throw new Error('Failed to send message');
      }
    } catch (error) {
      if (error instanceof z.ZodError) {
        error.errors.forEach((err) => {
          message.error(err.message);
          setIsSubmitting(false);
        });
      } else {
        message.error('Failed to send message. Please try again.');
        setIsSubmitting(false);
      }
    } finally {
      setIsSubmitting(false);
    }
  };

This part defines the ContactPage functional component:

It uses the Form.useForm hook to create a form instance.
It manages a isSubmitting state to track form submission status.
The onFinish function is called when the form is submitted:

It sets isSubmitting to true.
It uses contactSchema.parse(values) to validate the form data against the Zod schema.
If validation passes, it sends a POST request to /api/v1/send with the form data.
It handles the response, showing success or error messages accordingly.
If there's a Zod validation error, it displays the error message.
Finally, it sets isSubmitting back to false.

This setup ensures that the form data is validated on both the client-side (using Antd's form validation) and the server-side (using Zod schema validation) before sending the data to the server. It also manages the submission state and provides user feedback through success or error messages.

And, this is the complete code of our contact-form file 👇

"use client";

import React from 'react';
import { Form, Input, Button, message, Space, Divider, Typography } from 'antd';
import Head from 'next/head';
import { FaUser } from 'react-icons/fa';
import { MdMail } from 'react-icons/md';
import { FaMessage } from 'react-icons/fa6';
import { z } from 'zod';
import { Container } from 'app/components/container';
import Paragraph from 'antd/es/typography/Paragraph';

const { TextArea } = Input;
const { Text } = Typography;

// Zod schema for form validation
const contactSchema = z.object({
  name: z.string().min(4, 'Name must be at least 4 characters').max(50, 'Name must not exceed 50 characters'),
  email: z.string().email('Invalid email address').regex(/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/, "Email must be a valid format"),
  subject: z.string().min(5, 'Subject must be at least 5 characters').max(100, 'Subject must not exceed 100 characters'),
  message: z.string().min(20, 'Message must be at least 20 characters').max(1000, 'Message must not exceed 1000 characters'),
});

type ContactFormData = z.infer<typeof contactSchema>;

const ContactPage: React.FC = () => {
  const [form] = Form.useForm<ContactFormData>();
  const [isSubmitting, setIsSubmitting] = React.useState(false);

  const onFinish = async (values: ContactFormData) => {
    setIsSubmitting(true);
    try {
      contactSchema.parse(values);

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

      if (!response.ok) {
        message.error('Failed to send message. Please try again.');
        setIsSubmitting(false); 
      }

      const data = await response.json();

      if (data.message === 'success') {
        message.success('Message sent successfully!');
        setIsSubmitting(false);
        form.resetFields();
      } else {
        throw new Error('Failed to send message');
      }
    } catch (error) {
      if (error instanceof z.ZodError) {
        error.errors.forEach((err) => {
          message.error(err.message);
          setIsSubmitting(false);
        });
      } else {
        message.error('Failed to send message. Please try again.');
        setIsSubmitting(false);
      }
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
      <div className="max-w-3xl w-full space-y-8 bg-white p-10 rounded-xl shadow-2xl">
        <div>
          <h2 className="mt-1 text-center text-3xl font-extrabold text-gray-900">Get in Touch</h2>
          <p className="mt-1 mb-4 text-center text-sm text-gray-600">
            I'd love to hear from you! Fill out the form below to get in touch.
          </p>
        </div>
        <Form
          form={form}
          name="contact"
          onFinish={onFinish}
          layout="vertical"
          className="mt-8 space-y-6"
        >
          <Form.Item
            name="name"
            rules={[{ required: true, message: 'Please input your name!' }]}
          >
            <Input prefix={<FaUser className="site-form-item-icon" />} placeholder="Your Name" size="large" />
          </Form.Item>
          <Form.Item
            name="email"
            rules={[
              { required: true, message: 'Please input your email!' },
              { type: 'email', message: 'Please enter a valid email!' }
            ]}
          >
            <Input prefix={<MdMail className="site-form-item-icon" />} placeholder="Your Email" size="large" />
          </Form.Item>
          <Form.Item
            name="subject"
            rules={[{ required: true, message: 'Please input a subject!' }]}
          >
            <Input prefix={<FaMessage className="site-form-item-icon" />} placeholder="Subject" size="large" />
          </Form.Item>
          <Form.Item
            name="message"
            rules={[{ required: true, message: 'Please input your message!' }]}
          >
            <TextArea
              placeholder="Your Message"
              autoSize={{ minRows: 4, maxRows: 8 }}
            />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
              disabled={isSubmitting}
            >
              {isSubmitting ? 'Sending...' : 'Send Message'}
            </Button>
          </Form.Item>
        </Form>
      </div>
 );
};

export default ContactPage;

Testing

Till now, we're all set, now it's time to run and test our application.

Start your server:

yarn dev

First, let's try to hit the endpoint without filling out the form. As expected, the API doesn't get called, and we receive error messages.

Now, let's fill out the form

and hit the send button. It's in process.

Here we go, the message is sent. The sender receives a notification saying "Message sent," and the form is also refreshed.

The receiver also gets the message🥳

And that's it. We have successfully built an email contact form in Next.js using Resend and Zod.

Conclusion

In this article, we built a contact form using Next.js and implemented features like form validation with Zod and email functionality with Resend. We start by setting up the Next.js project, configuring necessary dependencies, and managing environment variables for secure API access.

Then, we designed the email template, set up an API route for handling email submissions, and implemented the frontend form with Ant Design components.

If you want to see a live preview of it, you can check it out here. I have implemented the same form in my portfolio.

Twitter

GitHub