Build a Real-Time Voting System with Strapi & Instant DB: Part 2

Introduction

In Part 1 of this tutorial series, we successfully created and customized our Strapi CMS backend to create polls and votes and connect those newly created records to the currently authenticated user. We also integrated Instant DB and created new vote records for the authenticated user using the Instant DB admin SDK.

In this part, we'll create the frontend part of our application with Next.js and integrate our Strapi 5 backend. We will also set up Instant DB Client to get real-time updates whenever a vote is submitted.

For reference purposes, here's the outline of this blog series:

• Part 1: Integrate Instant DB and Strapi for Creating Votes
• Part 2: Connecting the Next.js frontend with Strapi and Instant DB Client.

Step 1: Setting up a new Next.js project

Install Next.js

We'll start a new Next.js app by running the following command:

npx create-next-app@latest

On installation, we'll see the following prompts:

npx create-next-app@latest
✔ What is your project named? … votes-client
✔ 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
...

Install Other Dev Dependencies

Now, we'll navigate to the newly created directory and install a few more packages:

npm install @instantdb/react zustand

• zustand is a lightweight state management library in React that makes managing and sharing state across components easier. It will be useful for sharing our authenticated user state across components.
• @instantdb/react is Instant DB's React SDK that allows us to use Instant DB's realtime features in our React app.

Let's also install a few dev dependencies:

npm install -D prettier prettier-plugin-tailwindcss @tailwindcss/forms

• prettier-plugin-tailwindcss: A plugin for Prettier that sorts your Tailwind CSS classes. It organizes Tailwind utility classes in a specific order to maintain consistency across the project.
• @tailwindcss/forms: A Tailwind CSS plugin that provides utility classes for styling form elements.

Finally, let's set up Shadcn UI for reusable components we can copy and paste into our app:

npx shadcn@latest init

And follow the prompts:

Need to install the following packages:
shadcn@2.1.0
Ok to proceed? (y) y

✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Zinc
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating app/globals.css
✔ Installing dependencies.
✔ Created 1 file:
  - lib/utils.ts

Success! Project initialization completed.
You may now add components.

Let's add a few components we'll be using in this project:

npx shadcn@latest add avatar drawer sonner

Now that we've installed what we need for this project, let's set it up.

Create Environment Variables

Create a new .env file and enter the URL to the Strapi API:

# .env
NEXT_PUBLIC_API=http://localhost:1337

Set up Types for the project

Since this is a TypeScript project, we can create a file to keep all type definitions which we can then import into the components that require them.

Create a new file - ./types/index.ts:

1// ./types/index.ts
2
3type User = {
4  id: number;
5  documentId: string;
6  username?: string;
7  email?: string;
8  provider?: string;
9  confirmed?: boolean;
10  blocked?: boolean;
11  createdAt?: string;
12  updatedAt?: string;
13  publishedAt?: string;
14  locale?: null;
15};
16type Option = {
17  id: number;
18  documentId: string;
19  value: string;
20  createdAt: string;
21  updatedAt: string;
22  publishedAt: string;
23  locale: null;
24};
25type Vote = {
26  id: number;
27  documentId: string;
28  createdAt: string;
29  updatedAt: string;
30  publishedAt: string;
31  locale: string | null;
32  option: Option;
33  user?: User;
34};
35type Poll = {
36  id: number;
37  documentId: string;
38  question: string;
39  createdAt: string;
40  updatedAt: string;
41  publishedAt: string;
42  locale: null;
43  options: Option[];
44  votes: Vote[];
45  user?: User;
46};
47type VoteData = {
48  id: number;
49  documentId: string;
50  createdAt: string;
51  updatedAt: string;
52  publishedAt: string;
53  locale: string | null;
54  option: Option;
55  poll: Poll;
56};
57type Meta = {
58  pagination: {
59    page: number;
60    pageSize: number;
61    pageCount: number;
62    total: number;
63  };
64};
65type PollsResponse = {
66  data: Poll[];
67  meta: Meta;
68};
69type PollResponse = {
70  data: Poll;
71};
72type OptionResponse = {
73  data: Option;
74};
75type VotesResponse = {
76  data: VoteData[];
77  meta: Meta;
78};
79type VoteResponse = {
80  data: VoteData;
81};
82type InstantDBVote = {
83  user: {
84    documentId: string;
85    username: string;
86    email: string;
87  };
88  poll: {
89    question: string;
90    documentId: string;
91  };
92  option: {
93    value: string;
94    documentId: string;
95  };
96  createdAt: string;
97};
98type InstantDBSchema = {
99  votes: InstantDBVote;
100};
101export type {
102  User,
103  Option,
104  Vote,
105  Poll,
106  Meta,
107  PollsResponse,
108  PollResponse,
109  OptionResponse,
110  VotesResponse,
111  VoteResponse,
112  VoteData,
113  InstantDBVote,
114  InstantDBSchema,
115};

Set up REST Request Utility Function

Let's create a utility function that can make requests and handle error responses from the Strapi API. Create a new file - ./utils/restRequest.ts:

1// ./utils/restRequest.ts
2// Define a generic type for options passed into the request
3
4type RestRequestOptions<B> = {
5  url: string; // URL endpoint to which the request is sent
6  method?: "GET" | "POST" | "PUT" | "DELETE" | "PATCH"; // HTTP method (default is "GET")
7  headers?: Record<string, string>; // Optional headers for the request
8  body?: B; // Optional body for the request, can be any type
9};
10// A generic fetch wrapper function that handles REST API requests
11async function restRequest<T, B = undefined>({
12  url,
13  method = "GET", // Default method is GET
14  headers = {}, // Default headers are an empty object
15  body, // Optional body for requests like POST or PUT
16}: RestRequestOptions<B>): Promise<T> {
17  try {
18    // Send a fetch request with the provided options
19    const response = await fetch(url, {
20      method, // Use the specified HTTP method
21      headers: {
22        "Content-Type": "application/json", // Set content type to JSON by default
23        ...headers, // Merge additional headers passed in
24      },
25      body: body ? JSON.stringify(body) : undefined, // Stringify the body if provided
26    });
27    // If the response is not successful, parse and throw an error
28    if (!response.ok) {
29      const errorData = await response.json(); // Parse the error response
30      console.log("🚨🚨🚨🚨 ~ error data:", errorData); // Log error details
31      throw new Error(
32        errorData?.message || errorData?.error?.message || response.statusText
33      ); // Throw the error with a message
34    }
35    // If the response status is 204 (No Content), return an empty object
36    if (response.status === 204) {
37      return {} as T;
38    }
39    // Parse the successful response as JSON and return it
40    const data = (await response.json()) as T;
41    return data;
42  } catch (error) {
43    console.error("Error in restRequest:", error); // Log any errors that occur during the request
44    throw error; // Rethrow the error to be handled by the caller
45  }
46}
47
48export default restRequest;

This utility function, restRequest, is a generic wrapper for making HTTP requests with fetch, supporting various HTTP methods (GET, POST, PUT, DELETE, PATCH) and customizable headers and request bodies. It handles errors by checking the response.ok status and throwing detailed error messages when the request fails. If the response is successful, it returns the parsed JSON data. If the response status is 204 (No Content), it returns an empty object.

Set up a User Store with Zustand

Create a new file - ./store/useUserStore.ts and enter the following:

1// ./store/useUserStore.ts
2
3import { User } from "@/types";
4import { create } from "zustand";
5// define the UserStore type
6type UserStore = {
7  user: User | null;
8  setUser: (user: User | null) => void;
9};
10// create the UserStore
11export const useUserStore = create<UserStore>((set) => ({
12  // initialize the user to null
13  user: null,
14  // define the setUser function to update the user
15  setUser: (user) => set({ user }),
16}));

Here, we set up a Zustand store for managing user data in a React application. The useUserStore is created using zustand’s create function, which defines a store with two key properties:

• user: Initialized as null, this holds the current user’s information. The type User | null allows it to either be a User object or null if no user is logged in.
• setUser: A function that updates the user state. It takes a User object or null as an argument and updates the user state using the set function from zustand.

Step 2: Set up Authentication

First, we'll create an AuthForm component to handle register and login. Create a new file - ./components/Auth/Form.tsx:

1// ./components/Auth/Form.tsx
2// Import necessary modules and hooks
3"use client"; // Enables client-side rendering in a Next.js app
4import { useUserStore } from "@/store/useUserStore"; // Zustand store for managing user state
5import { Loader } from "lucide-react"; // Loader icon from the lucide-react library
6import Link from "next/link"; // Link component for navigation
7import { useRouter } from "next/navigation"; // Next.js hook for programmatic navigation
8import { useState } from "react"; // React hook for managing local component state
9import { toast } from "sonner"; // Toast notifications for showing feedback
10import { db } from "@/utils/instant"; // InstantDB client for interacting with the database
11import restRequest from "@/utils/restRequest"; // Utility function for making REST API requests
12import {
13  LoginBody,
14  LoginResponse,
15  RegisterBody,
16  RegsiterResponse,
17} from "@/types"; // Types for login and registration
18// Function to handle user login using the Strapi API
19const loginUser = async ({ identifier, password }: LoginBody) => {
20  try {
21    // Send login request to Strapi API
22    const data = await restRequest<LoginResponse, LoginBody>({
23      url: `${process.env.NEXT_PUBLIC_API}/api/auth/local`,
24      method: "POST",
25      headers: {
26        "Content-Type": "application/json",
27      },
28      body: {
29        identifier,
30        password,
31      },
32    });
33    return data;
34  } catch (error) {
35    // Log and throw any errors that occur
36    console.log("🚨🚨🚨🚨 ~ loginUser error:", error);
37    throw error;
38  }
39};
40// Function to handle user registration using the Strapi API
41const registerUser = async ({ username, email, password }: RegisterBody) => {
42  try {
43    // Send registration request to Strapi API
44    const data = await restRequest<RegsiterResponse, RegisterBody>({
45      url: `${process.env.NEXT_PUBLIC_API}/api/auth/local/register`,
46      method: "POST",
47      body: {
48        username,
49        email,
50        password,
51      },
52      headers: {
53        "Content-Type": "application/json",
54      },
55    });
56    return data;
57  } catch (error) {
58    // Log and throw any errors that occur
59    console.log("🚨🚨🚨🚨 ~ register error:", error);
60    throw error;
61  }
62};
63// AuthForm component to handle both login and registration
64const AuthForm: React.FC<{
65  type: "login" | "register"; // The form type: "login" or "register"
66}> = ({ type }) => {
67  const router = useRouter(); // Use Next.js router for navigation
68  const { setUser } = useUserStore(); // Zustand store function to set the user
69  // State variables for form fields and loading state
70  const [username, setUsername] = useState("");
71  const [email, setEmail] = useState("");
72  const [password, setPassword] = useState("");
73  const [loading, setLoading] = useState(false);
74  // Handle form submission for both login and registration
75  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
76    e.preventDefault(); // Prevent the default form submission
77    if (type === "login") {
78      // Handle login case
79      return toast.promise(
80        loginUser({ identifier: email.trim(), password: password.trim() }),
81        {
82          loading: (() => {
83            setLoading(true); // Set loading state to true
84            return "Logging in..."; // Display loading message
85          })(),
86          success: (data) => {
87            // On success, store JWT, user info, and InstantDB token in localStorage
88            localStorage.setItem("token", data.jwt);
89            localStorage.setItem("user", JSON.stringify(data.user));
90            localStorage.setItem("instantDBToken", data.instantdbToken);
91            setUser(data.user); // Set user in Zustand store
92            db?.auth.signInWithToken(data.instantdbToken); // Authenticate with InstantDB
93            router.push("/"); // Redirect to the homepage
94            return "Logged in successfully";
95          },
96          error: (err) => {
97            // Handle errors and display error message
98            console.log("🚨🚨🚨🚨 ~ handleSubmit ~ err", err);
99            return err.message; // Display error in toast notification
100          },
101          finally: () => {
102            setLoading(false); // Reset loading state
103          },
104        }
105      );
106    }
107    if (type === "register") {
108      // Handle registration case
109      return toast.promise(
110        registerUser({
111          username: username.trim(),
112          email: email.trim(),
113          password: password.trim(),
114        }),
115        {
116          loading: (() => {
117            setLoading(true); // Set loading state to true
118            return "Registering..."; // Display loading message
119          })(),
120          success: (data) => {
121            // On success, store JWT, user info, and InstantDB token in localStorage
122            localStorage.setItem("token", data.jwt);
123            localStorage.setItem("user", JSON.stringify(data.user));
124            localStorage.setItem("instantDBToken", data.instantdbToken);
125            setUser(data.user); // Set user in Zustand store
126            db?.auth.signInWithToken(data.instantdbToken); // Authenticate with InstantDB
127            router.push("/"); // Redirect to the homepage
128            return "Registered successfully";
129          },
130          error: (err) => {
131            // Handle errors and display error message
132            console.log("🚨🚨🚨🚨 ~ handleSubmit ~ err", err);
133            return err.message; // Display error in toast notification
134          },
135          finally: () => {
136            setLoading(false); // Reset loading state
137          },
138        }
139      );
140    }
141  };
142  return (
143    <>
144      {/* Form for login or registration */}
145      <form
146        onSubmit={handleSubmit}
147        className="border border-zinc-200 bg-zinc-50 p-4 lg:p-6"
148      >
149        <div className="wrapper flex flex-col gap-8">
150          {/* Show username field only for registration */}
151          {type === "register" && (
152            <div className="form-control">
153              <label htmlFor="username">Username</label>
154              <input
155                type="text"
156                name="username"
157                id="username"
158                onChange={(e) => setUsername(e.target.value)}
159                value={username}
160                className="form-input"
161                required
162              />
163            </div>
164          )}
165          {/* Email input field */}
166          <div className="form-control">
167            <label htmlFor="email">Email</label>
168            <input
169              type="email"
170              name="email"
171              id="email"
172              onChange={(e) => setEmail(e.target.value)}
173              value={email}
174              className="form-input"
175              required
176            />
177          </div>
178          {/* Password input field */}
179          <div className="form-control">
180            <label htmlFor="password">Password</label>
181            <input
182              type="password"
183              name="password"
184              id="password"
185              onChange={(e) => setPassword(e.target.value)}
186              value={password}
187              className="form-input"
188              required
189            />
190          </div>
191          {/* Submit button */}
192          <div className="action-cont">
193            <button
194              disabled={!email.trim() || !password.trim() || loading}
195              className="btn"
196              type="submit"
197            >
198              {type === "login" ? "Login" : "Register"}
199              {loading && <Loader className="icon animate-spin" />}
200            </button>
201          </div>
202        </div>
203      </form>
204      {/* Display link to switch between login and registration */}
205      {type == "login" ? (
206        <p className="mt-6">
207          Don&apos;t have an account?{" "}
208          <Link className="underline" href="/register">
209            Create one
210          </Link>
211        </p>
212      ) : (
213        <p className="mt-6">
214          Already have an account?{" "}
215          <Link className="underline" href="/login">
216            Login
217          </Link>
218        </p>
219      )}
220    </>
221  );
222};
223export default AuthForm;

The AuthForm component is designed to handle both user registration and login using the Strapi API.

Depending on the form type, either "login" or "register," the component collects user credentials (username, email, password), submits them to the Strapi API, and stores the returned JWT token and user information in the browser's localStorage for session management. It also integrates with Instant DB for database authentication.

The form provides feedback via toast notifications to inform the user about the status of the process (loading, success, or error).

Create SiteHeader Component

The site header component will show the site name/logo, some navigation links, and the user's username when logged in. Create a new file - ./components/Site/Header.tsx:

1// ./components/Site/Header.tsx
2"use client"; // This enables client-side rendering for this component.
3import { useUserStore } from "@/store/useUserStore"; // Import the Zustand store to access user state.
4import Link from "next/link"; // Import Link from Next.js for navigation.
5import { useEffect } from "react"; // Import useEffect to run code on component mount.
6const SiteHeader = () => {
7  // Extract user state and setUser function from Zustand store
8  const { user, setUser } = useUserStore();
9  // Handles user logout by clearing localStorage and resetting the user state.
10  const handleLogout = async () => {
11    localStorage.removeItem("user"); // Remove user data from local storage.
12    localStorage.removeItem("token"); // Remove authentication token from local storage.
13    localStorage.removeItem("instantDBToken"); // Remove InstantDB token from local storage.
14    setUser(null); // Update the Zustand store to reflect no user is logged in.
15    window.location.reload(); // Refresh the page to update the UI.
16  };
17  useEffect(() => {
18    // On component mount, retrieve user from localStorage if present and set it in the store.
19    const user = localStorage.getItem("user");
20    if (user) {
21      setUser(JSON.parse(user)); // Parse the JSON string and set the user state in the store.
22    }
23  }, [setUser]); // Effect runs when component mounts, no dependencies.
24  return (
25    <header className="sticky top-0 w-full bg-white border-b border-b-zinc-200 p-4">
26      {/* Container for the site header */}
27      <div className="wrapper mx-auto flex w-full max-w-3xl items-center justify-between">
28        {/* Logo or site name that links back to the homepage */}
29        <Link href="/">
30          <figure>
31            <h1 className="text-lg font-bold">Votes.</h1>
32          </figure>
33        </Link>
34        {/* Navigation section */}
35        <nav className="site-nav">
36          <ul className="flex items-center gap-4">
37            {/* Conditional rendering based on user login status */}
38            {user ? (
39              // If user is logged in, display a welcome message and logout button
40              <>
41                <li>
42                  <p className="truncate">
43                    Welcome, <strong>{user.username}</strong>
44                  </p>
45                </li>
46                <li>
47                  <button onClick={handleLogout}>Logout</button>
48                </li>
49              </>
50            ) : (
51              // If user is not logged in, show login and register links
52              <>
53                <li>
54                  <Link href="/login">Login</Link>
55                </li>
56                <li>
57                  <Link href="/register">Register</Link>
58                </li>
59              </>
60            )}
61          </ul>
62        </nav>
63      </div>
64    </header>
65  );
66};
67export default SiteHeader;

Here, the SiteHeader component is responsible for rendering the navigation header. It uses Zustand to manage user state via the useUserStore hook.

When the component mounts, the useEffect hook checks if a user is stored in localStorage and updates the app's user state with setUser. If a user is logged in, it displays a welcome message along with a "Logout" button; otherwise, it shows links to the login and registration pages.

The handleLogout function clears user-related data from localStorage, sets the user state to null, and reloads the page to update the UI. Links for navigation are created using the Link component from Next.js.

Set Up Site Layout

Now that we have created a few of our basic components, let's set up the app layout. In the ./app/layout.tsx file:

1// ./app/layout.tsx
2// Import global CSS styles and necessary components
3import "./globals.css"; // Imports global CSS file for styling
4import { Toaster } from "@/components/ui/sonner"; // Imports a custom Toaster component for notifications
5import SiteHeader from "@/components/Site/Header"; // Imports the header component for the site
6import { Metadata } from "next"; // Type definition for page metadata in Next.js
7// Define metadata for the page, including title and description for SEO purposes
8export const metadata: Metadata = {
9  title: "Votes.", // Title of the webpage
10  description: "Express your opinion with Votes and polls.", // Brief description of the site
11};
12// Root layout component that wraps the entire application
13export default function RootLayout({
14  children, // Accepts children components to be rendered within the layout
15}: Readonly<{
16  children: React.ReactNode; // Defines the type for children, which are React components
17}>) {
18  return (
19    <html lang="en">
20      {" "}
21      {/* Sets the language attribute for the HTML document */}
22      <body>
23        <SiteHeader /> {/* Renders the SiteHeader component at the top */}
24        <Toaster richColors theme="system" className="bg-white" />{" "}
25        {/* Renders the Toaster for displaying notifications, using system theme */}
26        {children} {/* Renders any child components passed into the layout */}
27      </body>
28    </html>
29  );
30}

With that, we should have something like this:

Next, we'll create the authentication pages.

Create Register Page

Create a new file - ./app/register/page.tsx:

1// ./app/register/page.tsx
2
3// Import the AuthForm component which will handle the registration form
4import AuthForm from "@/components/Auth/Form";
5
6// Define a functional component for the Register page
7const RegisterPage = () => {
8  return (
9    <main> {/* The main content of the page */}
10      <header className="site-section"> {/* A header section for the page title */}
11        <div className="wrapper"> {/* Wrapper to contain and center the content */}
12          <h1 className="text-3xl lg:text-7xl">Register</h1> {/* Large heading for the page title, with responsive sizing */}
13        </div>
14      </header>
15
16      <section className="site-section"> {/* A section to contain the registration form */}
17        <div className="wrapper mx-auto max-w-3xl"> {/* Wrapper that centers the content and limits the width to 3xl */}
18          <AuthForm type="register" /> {/* Renders the AuthForm component with "register" as the type for the form */}
19        </div>
20      </section>
21    </main>
22  );
23};
24
25// Export the RegisterPage component to be used in the application
26export default RegisterPage;

With that, we should have something like this:

Let's see it in action:

Nice.

Create Login Page

Similarly, create a new file - ./app/login/page.tsx:

1// ./app/login/page.tsx
2// Import the AuthForm component which will handle the registration form
3import AuthForm from "@/components/Auth/Form";
4// Define a functional component for the Login page
5const LoginPage = () => {
6  return (
7    <main>
8      {/* The main content of the page */}
9      <header className="site-section">
10        {/* A header section for the page title */}
11        <div className="wrapper">
12          {/* Wrapper to contain and center the content */}
13          <h1 className="text-3xl lg:text-7xl">Login</h1>
14          {/* Large heading for the page title, with responsive sizing */}
15        </div>
16      </header>
17      <section className="site-section">
18        {/* A section to contain the registration form */}
19        <div className="wrapper mx-auto max-w-3xl">
20          {/* Wrapper that centers the content and limits the width to 3xl */}
21          <AuthForm type="login" />
22          {/* Renders the AuthForm component with "login" as the type for the form */}
23        </div>
24      </section>
25    </main>
26  );
27};
28// Export the LoginPage component to be used in the application
29export default LoginPage;

With that, we should have something like this:

Let's see it in action:

Awesome.

When you check the local storage from the devtools you should see that the user data, JWT and InstantDB token are all saved:

Next, we'll quickly set up InstantDB in our app.

Step 3: Initialize InstantDB

The first step is to initialize Instant.

Add your App ID to your .env:

NEXT_PUBLIC_API=http://localhost:1337
NEXT_PUBLIC_INSTANT_APP_ID=ee543ff6-c9cf-4a8b-9dc0-504994f3860a

Create a new file - ./utils/instant.ts:

1import { init } from "@instantdb/react";
2import { InstantDBSchema } from "@/types";
3
4// ID for app: Voting App
5const APP_ID = process.env.NEXT_PUBLIC_INSTANT_APP_ID as string;
6
7export const db = init<InstantDBSchema>({ appId: APP_ID });

Now, we can import and call the db function whenever we need it.

Step 4: Create Poll Components

We'll create all the components we need for viewing and creating Polls.

Create Poll Form Component

Create a new file - ./components/Poll/Form.tsx and enter the following code:

1// ./components/Poll/Form.tsx
2// Import necessary React hooks and libraries
3import { useState } from "react"; // React hook to manage component state
4import { toast } from "sonner"; // Importing toast notification from sonner
5import { OptionResponse, PollResponse } from "@/types"; // Type definitions for API responses
6import restRequest from "@/utils/restRequest"; // Utility function for making API requests
7import { useRouter } from "next/navigation"; // Router hook for navigation
8import { Loader, X } from "lucide-react"; // Icons for loading and remove option
9// Async function to create a poll, accepts question, options, and token as parameters
10const createPoll = async ({
11  question,
12  options,
13  token,
14}: {
15  question: string;
16  options: string[];
17  token: string;
18}) => {
19  try {
20    // API URLs for creating polls and options
21    const pollUrl = `${process.env.NEXT_PUBLIC_API}/api/polls?populate=*`;
22    const optionUrl = `${process.env.NEXT_PUBLIC_API}/api/options?populate=*`;
23    // Create options by making API requests for each one
24    const optionsResponses = await Promise.all(
25      options.map(async (option) => {
26        return await restRequest<OptionResponse, { data: { value: string } }>({
27          url: optionUrl,
28          method: "POST",
29          headers: {
30            Authorization: `Bearer ${token}`,
31          },
32          body: {
33            data: {
34              value: option, // The option text
35            },
36          },
37        });
38      })
39    );
40    // Create the poll by sending the question and option IDs
41    const pollResponse = await restRequest<
42      PollResponse,
43      { data: { question: string; options: string[] } }
44    >({
45      url: pollUrl,
46      method: "POST",
47      headers: {
48        Authorization: `Bearer ${token}`,
49      },
50      body: {
51        data: {
52          question, // Poll question
53          options: optionsResponses.map((response) => response.data.documentId), // Map the option IDs
54        },
55      },
56    });
57    return pollResponse; // Return the created poll response
58  } catch (error) {
59    console.log("🚨🚨🚨🚨 ~ createPoll ~ error", error); // Log any errors
60    throw error; // Rethrow the error to handle it in the calling function
61  }
62};
63// Component for rendering individual options with a remove button
64const OptionItem: React.FC<{
65  option: string;
66  updateRemoveOption: (option: string) => void; // Callback to remove the option
67}> = ({ option, updateRemoveOption }) => {
68  return (
69    <li className="inline-flex w-fit items-center justify-between border border-zinc-200 bg-zinc-100">
70      <span className="px-4">{option}</span> {/* Display option text */}
71      <button
72        className="btn h-full grow"
73        onClick={() => {
74          updateRemoveOption(option); // Trigger option removal when button is clicked
75        }}
76      >
77        <X className="icon" />{" "}
78        {/* Display the 'X' icon for removing the option */}
79      </button>
80    </li>
81  );
82};
83// Main PollForm component
84const PollForm: React.FC = ({}) => {
85  const router = useRouter(); // Hook to navigate between pages
86  const [question, setQuestion] = useState<string>(""); // State to manage the poll question
87  const [options, setOptions] = useState<string[]>([]); // State to manage poll options
88  const [option, setOption] = useState<string>(""); // State to manage the current option input
89  const [loading, setLoading] = useState<boolean>(false); // State to manage loading state
90  // Function to add the current option to the options list
91  const addOption = () => {
92    setOptions([...options, option]); // Add the current option to the options array
93    setOption(""); // Clear the input field
94  };
95  // Function to handle the creation of a poll
96  const handleCreatePoll = () => {
97    // Display a toast notification during the poll creation process
98    toast.promise(
99      createPoll({
100        question,
101        options,
102        token: localStorage.getItem("token") || "", // Retrieve the token from local storage
103      }),
104      {
105        loading: (() => {
106          setLoading(true); // Set loading state to true while the request is being processed
107          return "Creating poll..."; // Loading message
108        })(),
109        success: (data) => {
110          // Reset the form upon success
111          setQuestion(""); // Clear the question
112          setOptions([]); // Clear the options
113          setOption(""); // Clear the option input
114          router.push(`/poll/${data.data.documentId}`); // Redirect to the created poll page
115          return "Poll created!"; // Success message
116        },
117        error: (error) => {
118          return error.message; // Display error message in the toast
119        },
120        finally: () => {
121          setLoading(false); // Reset loading state after completion
122        },
123      }
124    );
125  };
126  return (
127    // Form for creating a poll
128    <form
129      onSubmit={(e) => {
130        e.preventDefault(); // Prevent default form submission
131        handleCreatePoll(); // Trigger poll creation
132      }}
133      className="border border-zinc-200 bg-zinc-50 p-4 lg:p-6"
134    >
135      <div className="wrapper flex flex-col gap-4">
136        <div className="form-control">
137          <label htmlFor="question">Question</label>{" "}
138          {/* Label for question input */}
139          <input
140            type="text"
141            id="question"
142            name="question"
143            value={question} // Bind input value to the question state
144            onChange={(e) => setQuestion(e.target.value)} // Update state when input changes
145          />
146        </div>
147        <div className="form-control">
148          <label htmlFor="option">Option</label> {/* Label for option input */}
149          <div className="flex">
150            <input
151              type="text"
152              id="option"
153              name="option"
154              value={option} // Bind input value to the option state
155              onChange={(e) => setOption(e.target.value)} // Update state when input changes
156            />
157            <button className="btn" type="button" onClick={addOption}>
158              Add
159            </button>{" "}
160            {/* Button to add the option to the list */}
161          </div>
162          <ul className="flex gap-2">
163            {/* Map through the options array to display each option */}
164            {options.map((option) => (
165              <OptionItem
166                key={option}
167                option={option} // Pass option text
168                updateRemoveOption={(option) => {
169                  setOptions(options.filter((opt) => opt !== option)); // Remove option from the list
170                }}
171              />
172            ))}
173          </ul>
174        </div>
175        <div className="action-cont">
176          {/* Button to submit the form and create the poll */}
177          <button className="btn" type="submit" disabled={loading}>
178            Create Poll
179            {loading && <Loader className="icon animate-spin" />}{" "}
180            {/* Show loader while processing */}
181          </button>
182        </div>
183      </div>
184    </form>
185  );
186};
187export default PollForm; // Export the PollForm component

Here we have three main parts to the component: 1. createPoll: - This is an asynchronous function that handles the core logic for creating a poll. It first creates options by making separate API calls for each poll option, storing the resulting IDs. Then, it sends a final API request to create the poll itself, linking it to the generated options. This function also includes error handling for any issues during the API request process. 2. OptionItem: - This component renders each option in a list format. It displays the option's text and a remove button that, when clicked, triggers a callback function (updateRemoveOption) to remove the option from the poll. 3. PollForm: - The main component that renders the form for creating a poll. It maintains the state for the poll question, current options, and handles form submission. The form also includes logic to display loading states, handle adding/removing options, and show notifications using the toast library when creating a poll. This component ties everything together, managing user input and interactions.

Create Poll Drawer Component

This component will be used to show or hide the Poll Form. Create a new fil - ./components/Poll/Drawer.tsx:

1// ./components/Poll/Drawer.tsx
2// Import necessary components from the drawer UI library
3import {
4  Drawer,
5  DrawerClose,
6  DrawerContent,
7  DrawerDescription,
8  DrawerFooter,
9  DrawerHeader,
10  DrawerTitle,
11  DrawerTrigger,
12} from "@/components/ui/drawer";
13import PollForm from "./Form";
14// The PollDrawer component is a wrapper that displays a drawer containing the poll creation form.
15const PollDrawer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
16  return (
17    // Main Drawer component that toggles the drawer UI
18    <Drawer>
19      {/* The trigger that opens the drawer, renders the passed child element */}
20      <DrawerTrigger asChild>
21        {children || <button>Open Drawer</button>}
22      </DrawerTrigger>
23      {/* The content inside the drawer */}
24      <DrawerContent className="bg-white">
25        {/* A wrapper to control the drawer's width and center it */}
26        <div className="wrapper mx-auto w-full max-w-3xl">
27          {/* Drawer header contains the title and description */}
28          <DrawerHeader>
29            <DrawerTitle>Create a new poll</DrawerTitle>
30            <DrawerDescription>
31              Fill in the form below to create a new poll.
32            </DrawerDescription>
33          </DrawerHeader>
34          {/* Drawer body contains the poll creation form */}
35          <div className="p-4">
36            <PollForm />
37          </div>
38          {/* Drawer footer with a cancel button that closes the drawer */}
39          <DrawerFooter>
40            <DrawerClose asChild>
41              <button className="btn w-full grow">Cancel</button>
42            </DrawerClose>
43          </DrawerFooter>
44        </div>
45      </DrawerContent>
46    </Drawer>
47  );
48};
49export default PollDrawer;

• DrawerTrigger: This element wraps around the child component to open the drawer when clicked.
• DrawerContent: Contains the content displayed in the drawer (header, form, and footer).
• DrawerHeader: Provides a title and description for the drawer.
• PollForm: The form for creating a poll is embedded inside the drawer.
• DrawerFooter: Contains a button to close the drawer using DrawerClose.

Now that we have the form and the drawer for displaying the form ready, let's create the home page.

Create the Home Page

Create a new file - ./components/Home/Page.tsx:

1// ./components/Home/Page.tsx
2// Use client-side rendering
3"use client";
4import PollDrawer from "@/components/Poll/Drawer"; // Import the PollDrawer component for creating new polls
5import { PollsResponse } from "@/types"; // Import the PollsResponse type for typing the polls data
6import restRequest from "@/utils/restRequest"; // Import the utility function for making API requests
7import { Plus } from "lucide-react"; // Import the Plus icon from Lucide
8import { useEffect, useState } from "react"; // Import React hooks for managing state and side effects
9// Function to fetch polls from the API
10const getPolls = async ({ token }: { token: string }) => {
11  // Construct the API URL for fetching polls with related data
12  const pollsUrl = `${process.env.NEXT_PUBLIC_API}/api/polls?populate\[votes\][populate][0]=option&populate[options]=*`;
13  // Make a request to the API to fetch polls
14  const pollsResponse = await restRequest<PollsResponse>({
15    url: pollsUrl,
16    headers: {
17      Authorization: `Bearer ${token}`, // Set the Authorization header with the token
18    },
19  });
20  return pollsResponse; // Return the polls data
21};
22const HomePage = () => {
23  const [polls, setPolls] = useState<PollsResponse | null>(null); // State to hold the fetched polls data
24  const [loading, setLoading] = useState<boolean>(true); // State to track loading status
25  // Function to handle fetching polls with error handling
26  const handleGetPolls = async (token: string) => {
27    try {
28      const data = await getPolls({ token }); // Call the getPolls function
29      setPolls(data); // Set the fetched polls data to state
30      setLoading(false); // Set loading to false after fetching
31    } catch (error) {
32      console.log("🚨🚨🚨🚨 ~ handleGetPolls ~ error", error); // Log any errors that occur
33    } finally {
34      setLoading(false); // Ensure loading is false in the end
35    }
36  };
37  // useEffect to fetch polls when the component mounts
38  useEffect(() => {
39    const token = localStorage.getItem("token"); // Retrieve the token from local storage
40    if (!token) {
41      return setLoading(false); // If no token, set loading to false
42    }
43    handleGetPolls(token); // Fetch polls if token is available
44  }, []);
45  return (
46    <main>
47      <header className="site-section">
48        <div className="wrapper flex w-full items-center justify-between gap-6">
49          <h1 className="text-4xl lg:text-7xl">Polls</h1> {/* Page title */}
50          <PollDrawer>
51            <button className="btn max-lg:pl-2">
52              {" "}
53              {/* Button to open the poll creation drawer */}
54              <span className="max-lg:hidden">Create a new poll</span>
55              <Plus className="icon" /> {/* Plus icon */}
56            </button>
57          </PollDrawer>
58        </div>
59      </header>
60      <section className="site-section">
61        <div className="wrapper">
62          {loading ? ( // Conditional rendering based on loading state
63            <p>Loading...</p>
64          ) : polls ? ( // If polls data is available
65            <p>{polls.data.length} polls found</p> // Display the number of polls found
66          ) : (
67            <p>No polls found. Make sure you are logged in.</p> // Message if no polls are found
68          )}
69        </div>
70      </section>
71    </main>
72  );
73};
74export default HomePage;