Fullstack App With Next.Js and Supabase

Feedback is the bedrock of any forward-thinking organization. Feedback helps you as an organization figure out your customers' or users' reactions to your product or service.
However, while feedback is good, how you collect the feedback from your customers or users matters as much. Thanks to Formbricks, you now have targeted in-app surveys for generating consumer feedback or opinions!
In this tutorial, we will be building a simple webpage that allows for signup and login features using Supabase and Next.Js. We will then integrate an in-app survey using Formbricks.

Prerequisites

Before we start, make sure you have:

• Node.js installed on your machine
• A Supabase account
• A Formbricks account
• Basic knowledge of React and TypeScript

The complete code for this application can be found here.

Building A Simple Authentication App With Supabase And Next.Js

Step 1

Let's create a new Next.js project:

npx create-next-app@latest my-survey-app --typescript --tailwind --app
cd my-survey-app

Step 2

Install Supabase in your project directory:

npm install @supabase/supabase-js

Step 3:

Let us set up Supabase in the app.

First, create a .env.local file in your project root:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

To fetch the Supabse URL and Anon Key, you must be logged in to your Supabase dashboard. You will see them displayed on the dashboard.

Step 4:

Next is to create a Supabase client. In your project root directory, create a folder lib. In the folder, create a file supabaseClient.ts.

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

Step 5

Let's create the sign-up and login components.
In the project directory. there is an app folder. In that folder, you will create two files. One for the signup and one for the login.

Let's create and populate signup.tsx

import { useState } from "react";
import { supabase } from "../lib/supabase";
import { useRouter } from "next/router";

export default function SignUp() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const router = useRouter();

  const handleSignUp = async (e: React.FormEvent) => {
    e.preventDefault();
    const { error } = await supabase.auth.signUp({
      email,
      password,
    });

    if (error) {
      setError(error.message);
    } else {
      router.push("/login"); // Redirect to login after signup
    }
  };

  return (
    <div>
      <h1>Sign Up</h1>
      <form onSubmit={handleSignUp}>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <br />
        <label>Password:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <br />
        <button type="submit">Sign Up</button>
      </form>
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
}

Next, let's create and populate login.tsx

import { useState } from "react";
import { supabase } from "../lib/supabase";
import { useRouter } from "next/router";

export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const router = useRouter();

  const handleSignIn = async (e: React.FormEvent) => {
    e.preventDefault();
    const { error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });

    if (error) {
      setError(error.message);
    } else {
      router.push("/dashboard"); // Redirect to dashboard after login
    }
  };

  return (
    <div>
      <h1>Login</h1>
      <form onSubmit={handleSignIn}>
        <label>Email:</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
        <br />
        <label>Password:</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
        <br />
        <button type="submit">Login</button>
      </form>
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
}

Step 6

After testing our app above, and we are satisfied, it is time to move on to integrating Formbricks.
More information can be found on the Formbricks documentation page for Next.Js.

In our terminal, we will install Formbricks using NPM.

npm install @formbricks/js zod

Step 7

In this next step, we will initialize Formbricks in our app.
In the app folder in your project directory, create a new file named formbricks.tsx and populate with this,

"use client";

import { usePathname, useSearchParams } from "next/navigation";
import { useEffect } from "react";
import formbricks from "@formbricks/js/website";

export default function FormbricksProvider() {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  if (typeof window !== "undefined") {
    formbricks.init({
      environmentId: "<your-environment-id>",
      apiHost: "<api-host-url>",
    });
  }
}

The environmentId and apiHost are on your Formbricks account dashboard. When logged in, go to the "Configuration" page, and click on the "Website and App Connection" button. You should see your environmentId and apiHost below.

After you have done this, check your dashboard to see if the website has been connected to Formbricks successfully.
Your dashboard should look like this:

Step 8

You can now get your app running. Go to your terminal and run

npm run dev

On your console, you should see this message to indicate that Formbricks is up and running.

Setting Up Survey Targeting in Formbricks

The beautiful thing about Formbricks is that it lets you do the customizations from your dashboard!On the Formbricks dashboard, you will see a list of pre-customized surveys to get you started, or you can create your own from scratch.
Even for the pre-customized surveys, you are free to edit as much as you like. Play around with the survey questions or change the appearance and feel of the survey pop-up!
What's more is that you can customize survey triggers to either show to users with certain attributes, show at the click of a button, or show depending on what the user is doing on the page.
For the purposes of this tutorial, we will be displaying the survey or feedback form when a user clicks on the "Leave A Feedback!" button on the webpage.

On trigger the survey by clicking the button, the user gets shown the Formbricks feedback box.

As an extra measure of customization, I put all my favorite colors and specifications! 🤣

Best Practices for In-app Surveys

1. Timing is Everything

   • Don't show surveys immediately after a user visits your app or website
   • Set a delay or wait for specific user actions
   • Consider the user's journey and context

2. Targeting Strategy

   • Start with broad segments
   • Gradually refine based on user behavior
   • Use multiple conditions to ensure relevance

3. Survey Design

   • Keep surveys short and focused
   • Use clear, concise questions
   • Provide an easy way to dismiss the survey

4. Data Collection

   • Track survey completion rates
   • Monitor user feedback
   • Iterate based on response patterns

Conclusion

In this tutorial, we've successfully built a system that:

• Handles user authentication with Supabase
• Shows targeted surveys using Formbricks
• Provides a seamless user experience

The best part? It's completely free to get started, and you can scale as your needs grow.

Formbricks is entirely open-source and value added for the community! Support them by giving a star on Github! ⭐

Further Reading

• Supabase Documentation
• Formbricks Documentation
• Next.js Documentation