DEV Community

Cover image for Building a Beautiful Product Onboarding πŸ‘‹ with Next.JS , Framer Motion, and Tailwind CSS
Marc Seitz
Marc Seitz

Posted on

Building a Beautiful Product Onboarding πŸ‘‹ with Next.JS , Framer Motion, and Tailwind CSS

What you will find in this article?

Sahil's tweet

Product onboarding is super crucial for the first user experience. Building a captivating onboarding experience can be a key factor in the success of your product. As onboarding lead users to value. Ideally.

So, it took me couple of days to figure out, research and found out what is the perfect onboarding for project I am building.

This tutorial walks you through how to create an effective and beautiful onboarding process using Next.js, Framer Motion and Tailwind CSS.

  1. What steps to include in onboarding
  2. Where to find the onboarding examples from other projects.
  3. Framer Motion in action

Papermark - the first dynamic open-source alternative to DocSend.

Just a quick background. Papermark is the dynamic open-source alternative to DocSend. We basically help to manage secure document sharing, including real-time analytics. All of it is open-source.

I would be super happy if you could give us a star! And let me know in the comments if you love onboarding we are building today πŸ‘‡
https://github.com/mfts/papermark

Papermark onboarding

Setting up Next.js with TypeScript and Tailwindcss

We are using create-next-app to generate a new Next.js project. We'll also be using TypeScript and Tailwind CSS, so we'll select those options when prompted.



npx create-next-app

# ---
# you'll be asked the following prompts
What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
# select `Y` for typescript
Would you like to use ESLint with this project?  Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias


Enter fullscreen mode Exit fullscreen mode

Onboarding Best Practises

I found full examples of different onboarding flows on Onboarding Love.

Onboarding Love Screenshot

Define what is the value for my product where I want to bring users.

Value for user: to see the analytics on shared document. So I need to bring them as close as possible to it during the onboaridng.

Building onboarding

Are you ready to jump in? Here's a breakdown of the steps we will go through in this article:

  1. Step: Welcome Window
  2. Step: Questionnaire about Document Type
  3. Step: Document Upload
  4. Step: Create and Share Link
  5. Step: Celebrate with Confetti!

In each step, I'll provide you with the corresponding code so you can follow along, learn, and maybe even build your own onboarding process! Don't worry, you don't need to be an expert in Next.js, Framer Motion or Tailwind CSS. I'll guide you through every step of the way.

Step 1: Welcome Window

After successful signup, present users with a welcome window. This includes a brief animated gif and description oon Papermark. I used Next.js for rendering and controlling this window and animations can be managed using a library like Framer Motion.



// components/welcome/intro.tsx
import { motion } from "framer-motion";
import STAGGER_CHILD_VARIANTS from "./stagger-variants";

export default function Intro() {

  return (
    <motion.div
      className="z-10"
      exit={{ opacity: 0, scale: 0.95 }}
      transition={{ duration: 0.3, type: "spring" }}
    >
      <motion.div
        variants={{
          show: {
            transition: {
              staggerChildren: 0.2,
            },
          },
        }}
        initial="hidden"
        animate="show"
        className="[...]"
      >
        <motion.h1
          className="[...]"
          variants={STAGGER_CHILD_VARIANTS}
        >
          Welcome to Papermark
        </motion.h1>
        <motion.p
          className="max-w-md text-gray-200 transition-colors sm:text-lg"
          variants={STAGGER_CHILD_VARIANTS}
        >
          Papermark gives you the power to share documents with your clients and see analytics on how they interact with them.
        </motion.p>
        <motion.button
          variants={STAGGER_CHILD_VARIANTS}
          className="[...]"
        >
          Get Started
        </motion.button>
      </motion.div>
    </motion.div>
  );
}



Enter fullscreen mode Exit fullscreen mode

Welcome Screen

Step 2: Questionnaire about Document Type

The next step is one question questionnaire to understand the type of documents the user intends to upload.

I think it is a good practise to ask a questions users. But dont over do it.

This information can be valuable for customizing their experience or for analytical purposes. Tailwind CSS can be used to create a simple and visually appealing form for this step.



// components/welcome/questionnaire.js
import { motion } from "framer-motion";
import STAGGER_CHILD_VARIANTS from "./stagger-variants";

export default function Next() {
  return (
    <motion.div
      className="[...]"
      variants={{
        hidden: { opacity: 0, scale: 0.95 },
        show: {
          opacity: 1,
          scale: 1,
          transition: {
            staggerChildren: 0.2,
          },
        },
      }}
      initial="hidden"
      animate="show"
      exit="hidden"
      transition={{ duration: 0.3, type: "spring" }}
    >
      <motion.div
        variants={STAGGER_CHILD_VARIANTS}
        className="flex flex-col items-center space-y-10 text-center"
      >
        <p>Papermark</p>
        <h1>Which document do you want to share today?</h1>
      </motion.div>
      <motion.div
        variants={STAGGER_CHILD_VARIANTS}
        className="..."
      >
        <button>
          <PresentationChartBarIcon />
          <span>Pitchdeck</span>
        </button>
        <button>
          <DocumentIcon />
          <span>Another document</span>
        </button
      </motion.div>
    </motion.div>
  );
}



Enter fullscreen mode Exit fullscreen mode

Questionnaire Screen

Step 3: Upload Document

The core functionality of my app is turning a document into a sharable link, so in onboarding I would like users to submit document.

Guide the user to upload their first document. You can create a simple upload interface using Next.js. Once the document is uploaded, store the document in the database.



// components/welcome/upload.tsx
import { motion } from "framer-motion";
import { useState } from "react";
import DocumentUpload from "../document-upload";
import STAGGER_CHILD_VARIANTS from "./stagger-variants";

export default function Upload() {
  const [currentFile, setCurrentFile] = useState<File | null>(null);

  const handleSubmit = async (event: any) => {
    event.preventDefault();

    // handle the file upload here
  };

  return (
    <>
     <motion.div
       className="z-10 flex flex-col space-y-10 text-center"
       variants={{
         hidden: { opacity: 0, scale: 0.95 },
         show: {
           opacity: 1,
           scale: 1,
           transition: {
             staggerChildren: 0.2,
           },
         },
       }}
       initial="hidden"
       animate="show"
       exit="hidden"
       transition={{ duration: 0.3, type: "spring" }}
     >
       <motion.div
         variants={STAGGER_CHILD_VARIANTS}
         className="flex flex-col items-center space-y-10 text-center"
       >
         <h1 className="[...]">
           Upload your document
         </h1>
       </motion.div>
       <motion.div variants={STAGGER_CHILD_VARIANTS}>
         <main className="mt-8">
           <form
             encType="multipart/form-data"
             onSubmit={handleSubmit}
             className="flex flex-col"
           >
             <DocumentUpload
               currentFile={currentFile}
               setCurrentFile={setCurrentFile}
             />

             <div className="flex justify-center">
               <button type="submit">Upload Document</button>
             </div>
           </form>
         </main>
       </motion.div>
     </motion.div>
    </>
  );
}




Enter fullscreen mode Exit fullscreen mode

Image description

Step 4: Shareable link is ready.

After the document upload, I prompt the user to share a unique shareable link for their document. As soon as they sahre it they get to value. You can use a UUID package to generate a unique identifier for each document uploaded.

Extra: Add a celebration

Finally, you can celebrate the user's successful onboarding with a small animation, such as a confetti shower. This can be implemented using a library like react-confetti.

And bring the user into the core application, like a dashboard.



// pages/celebrate.tsx
import Confetti from 'react-dom-confetti';

export default const EndOnboarding = () => {
const [celebrate, setCelebrate] = useState<boolean>(false);

return (
<div>
<Confetti active={celebrate} />
<button onClick={() => setCelebrate(true)}>Celebrate!</button>
</div>
);
};

Enter fullscreen mode Exit fullscreen mode




Conclusion

Wuhuuu this is the onboarding!

It's important to rely on best practice and other product onboarding flows. This one is inspired by dub.sh's welcome journey.

With the help of Next.js, Framer Motion, and Tailwind CSS, we've created an engaging and user-friendly onboarding experience for Papermark.

Thank you for reading. I am Marc, an open-source enthusiast. I am building papermark.io - the dynamic open-source alternative to DocSend.

Happy coding, friends!

Looking at stars ⭐️

If this article helped you better understand how to create an onboarding experience with Next.js, Framer Motion and Tailwind CSS, please give us a star! And let me know your thoughts in the comments. ❀️

https://github.com/mfts/papermark

Image description

Top comments (6)

Collapse
 
fmerian profile image
flo merian

great job, @mfts!

I had the opportunity to work on the first-time user experience at Specify, and benchmarked how some dev-first companies welcomed their users.

FWIW I recently published my key takeaways here. hope it helps!

Collapse
 
mfts profile image
Marc Seitz

Wow just saw this @fmerian really good summary. Linear's onboarding is πŸ”₯

Collapse
 
shnai0 profile image
Iuliia Shnai

Onboarding is hard and underrated.

But this one looks super clean, good job.

Collapse
 
mfts profile image
Marc Seitz

Thanks Iuliia. I used to neglect onboarding. But I think having a simple 3-4 steps flow makes it really easy to implement in any project.

Collapse
 
audn profile image
Audun Hilden

you forgot to include STAGGER_CHILD_VARIANTS

Collapse
 
mfts profile image
Marc Seitz

Check out the GitHub repo, it's open-source :)
github.com/mfts/papermark/blob/da0...