Create a poll app using NextJS

Intro

In this tutorial, we'll make a poll app using NextJS, Prisma and MySQL. You can find the final code in the end of this article.

Prerequisites

You need some basic understanding of NextJS and TypeScript.

Getting Started

First, we clone our starter code

git clone https://github.com/Posandu/nextjs-starter.git .

Then, we install the dependencies

npm install

After some time, we can run the development server

npm run dev

You can now view the app at (http://localhost:3000)[http://localhost:3000] and you should see the following:

Database

We will be using a SQL database for this project. For running queries, we will be using Prisma. Prisma is an ORM that allows us to run queries simply. I will be using MySQL for this project, but you can use any SQL database you want.

So first, we need to install the Prisma CLI

npm install prisma --save-dev

Then, we need to initialize the Prisma CLI

npx prisma init

This will create a prisma folder in the root directory. Inside this folder, we will find a schema.prisma file. This file contains the schema of our database. We will be using the following schema for this project:

model Poll {
  id        Int      @id @default(autoincrement())
  title     String
  createdAt DateTime @default(now())
  choices   String
}

model Vote {
  id        Int      @id @default(autoincrement())
  pollId    Int
  choice    String
}

That is, we have a Poll model and a Vote model. The Poll model contains the title of the poll and the choices. The Vote model contains the poll id, the choice, and the id of the vote.

Now set your data credentials in the .env file.

DATABASE_URL="myqsl://USER:PASSWORD@HOST:PORT/DATABASE?schema=public"

After that, we need to migrate our database. This will create the tables in our database.

npx prisma migrate dev

Now the tables are created, we need to install the Prisma client

npm install @prisma/client

Now create a file utils/prisma.ts and add the following code:

import { PrismaClient } from "@prisma/client";

// PrismaClient is attached to the `global` object in development to prevent
// exhausting your database connection limit.
//
// Learn more:
// https://pris.ly/d/help/next-js-best-practices

let prisma: PrismaClient;

if (process.env.NODE_ENV === "production") {
  prisma = new PrismaClient();
} else {
  // @ts-ignore
  if (!global.prisma) {
    // @ts-ignore
    global.prisma = new PrismaClient();
  }
  // @ts-ignore
  prisma = global.prisma;
}
export default prisma;

This will create a singleton instance of the Prisma client. This will prevent us from creating multiple instances of the Prisma client. Now if you go to index.tsx and import the client, you should see autocompletion for the Prisma client.

UI

Let's create a header that we will use on all the pages. Create a file components/header/index.tsx and add the following code:

import ColormodeToggle from "@/colormodeToggle";
import { Box, Button, Flex } from "@chakra-ui/react";
import Link from "next/link";

const Header = () => {
  return (
    <Flex mt={6}>
      <Box>
        <Link href="/">
          <Button variant="ghost">Polls</Button>
        </Link>
      </Box>

      <Box ml="auto">
        <Link href="/createPoll">
          <Button mr={4}>Create Poll</Button>
        </Link>

        <ColormodeToggle />
      </Box>
    </Flex>
  );
};

export default Header;

The header will look like this:

Now let's create a page for creating a poll. Create a file pages/createPoll.tsx and add the following code:

import {
  Alert,
  Button,
  Container,
  Flex,
  Heading,
  Input,
  Stack,
  StackItem,
} from "@chakra-ui/react";
import type { NextPage } from "next";
import Header from "@/header";
import { useState } from "react";
import { AddIcon, DeleteIcon } from "@chakra-ui/icons";

const Home: NextPage = () => {
  const [title, setTitle] = useState("Do you like this poll?");
  const [options, setOptions] = useState(["Yes", "No"]);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const submit = () => {
    setError("");

    // Validate title
    if (title.length < 5 || title.length > 60) {
      setError("Title must be between 5 and 100 characters");
      return;
    }

    // Validate options
    if (options.some((option) => option.length < 1 || option.length > 60)) {
      setError("Options must be between 1 and 30 characters");
      return;
    }

    // ... TODO: Send to API
  };

  return (
    <Container maxW="container.lg">
      <Header />

      <Container maxW="container.md" mt={6} shadow="lg" p={8} rounded="2xl">
        <Heading mb={4}>Create Poll</Heading>

        <Heading my={4} size="md">
          Title (Max 60)
        </Heading>

        <Input
          placeholder="Poll Title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />

        <Heading my={4} size="md">
          Options (Minimum 2, Maximum 10)
        </Heading>
        <Stack spacing={4}>
          {options.map((option, index) => (
            <StackItem key={index}>
              <Flex>
                <Input
                  placeholder="Option"
                  value={option}
                  onChange={(e) => {
                    const newOptions = [...options];
                    newOptions[index] = e.target.value;
                    setOptions(newOptions);
                  }}
                />

                <Stack direction="row" ml={2}>
                  <Button
                    onClick={() => {
                      const newOptions = [...options];
                      newOptions.splice(index, 1);
                      setOptions(newOptions);
                    }}
                    disabled={options.length <= 2}
                    colorScheme="red"
                    variant="ghost"
                  >
                    <DeleteIcon />
                  </Button>

                  <Button
                    onClick={() => {
                      const newOptions = [...options];
                      newOptions.push("");
                      setOptions(newOptions);
                    }}
                    disabled={
                      options.length >= 10 || index !== options.length - 1
                    }
                    colorScheme="green"
                  >
                    <AddIcon />
                  </Button>
                </Stack>
              </Flex>
            </StackItem>
          ))}
        </Stack>

        {error && (
          <Alert mt={4} status="error">
            {error}
          </Alert>
        )}

        <Button
          mt={4}
          colorScheme="blue"
          onClick={submit}
          isLoading={loading}
          disabled={loading}
        >
          Create Poll
        </Button>
      </Container>
    </Container>
  );
};

export default Home;

The page will look like this:

This page also has validation for the title and options. The validation is pretty simple, but it's good enough for now.

Now let's create a page for viewing a poll. Create a file pages/poll/[id].tsx and add the following code:

import Header from "@/header";
import {
  Button,
  Container,
  Heading,
  Progress,
  Stack,
  StackItem,
} from "@chakra-ui/react";
import type { NextPage } from "next";
import { useRouter } from "next/router";
import { useState } from "react";

const Home: NextPage = () => {
  const router = useRouter();
  const { id } = router.query;

  const [pollData, setPollData] = useState({
    title: "Sample Poll",
    options: [
      {
        name: "Sample Option",
        votes: 40,
      },
      {
        name: "Sample Option 2",
        votes: 60,
      },
    ],
  });

  const [voted, setVoted] = useState(false);
  const [loading, setLoading] = useState(false);

  const totalVotes = pollData.options.reduce(
    (acc, option) => acc + option.votes,
    0
  );

  const maxIndex = pollData.options.reduce((acc, option, index) => {
    if (option.votes > pollData.options[acc].votes) {
      return index;
    }
    return acc;
  }, 0);

  const castVote = (index: number) => {
    setLoading(true);

    // TODO
    setTimeout(() => {
      setLoading(false);
      setVoted(true);
    }, 4000);
  };

  return (
    <Container maxW="container.lg">
      <Header />

      <Container maxW="container.md" mt={6} shadow="lg" p={8} rounded="2xl">
        <Heading my={4}>{pollData.title}</Heading>
        {voted ? (
          <Stack spacing={4} mb={4}>
            {pollData.options.map((option, index) => (
              <StackItem key={index} pos="relative">
                <Progress
                  colorScheme={index === maxIndex ? "green" : "blue"}
                  value={option.votes}
                  height="8"
                  max={totalVotes}
                />
                <Heading size="sm" pos="absolute" top="0" mt="1" ml="2">
                  {option.name}
                </Heading>
              </StackItem>
            ))}
          </Stack>
        ) : (
          <Stack spacing={2} mb={4}>
            {pollData.options.map((option, index) => (
              <Button
                key={index}
                onClick={() => castVote(index)}
                isLoading={loading}
                loadingText="Casting Vote"
                disabled={loading}
              >
                {option.name}
              </Button>
            ))}
          </Stack>
        )}
      </Container>
    </Container>
  );
};

export default Home;

The page will look like this:

Now, we've done the frontend. Let's move on to the backend.

Backend

We will create 3 API endpoints for our backend. The first one will be for creating a poll. The second one will be for getting a poll. The third one will be for voting in a poll.

The first is for creating a poll. Create a file pages/api/createPoll.ts and add the following code:

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
import prisma from "$/prisma";

type Data = {
  message: string;
  error: boolean;
  data?: any;
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  // Check if the request is a POST request
  if (req.method !== "POST") {
    res.status(200).json({ message: "Method not allowed", error: true });
    return;
  }

  // Check if the parameters `title` and `options` are present
  if (!req.body.title || !req.body.options) {
    res.status(200).json({ message: "Missing parameters", error: true });
    return;
  }

  const { title, options } = req.body;

  // Check if the title is not empty
  if (title.length < 5 || title.length > 60) {
    res.status(200).json({
      message: "Title must be between 5 and 60 characters",
      error: true,
    });
    return;
  }

  // Check if the options are not empty
  if (options.length < 2 || options.length > 10) {
    res.status(200).json({
      message: "You must provide between 2 and 10 options",
      error: true,
    });
    return;
  }

  // Check if the options are not empty
  if (
    options.some((option: string) => option.length < 1 || option.length > 60)
  ) {
    res.status(200).json({
      message: "Options must be between 1 and 60 characters",
      error: true,
    });
    return;
  }

  // Create the poll
  const data = await prisma.poll.create({
    data: {
      title,
      choices: options.join(","),
    },
  });

  res.status(200).json({ message: "Poll created", error: false, data });
}

This endpoint will create a poll in the database. It will also return the poll ID. We will use this ID to get the poll data and to vote in the poll.

Now, quickly go to the createPoll.tsx and replace the submit function with the following code:

const submit = () => {
  setError("");

  // Validate title
  if (title.length < 5 || title.length > 60) {
    setError("Title must be between 5 and 100 characters");
    return;
  }

  // Validate options
  if (options.some((option) => option.length < 1 || option.length > 60)) {
    setError("Options must be between 1 and 30 characters");
    return;
  }

  type Data = {
    message: string;
    error: boolean;
    data?: any;
  };

  // API
  fetch("/api/createPoll", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      title,
      options,
    }),
  })
    .then((res) => res.json())
    .then((res) => {
      const resp: Data = res as any as Data;

      if (resp.error) {
        setError(resp.message);
      } else {
        window.location.href = `/poll/${resp.data.id}`;
      }
    });
};

If you go to the /createPoll page, you will see that the poll is created and you are redirected to the poll page.

So I make sure it was created by opening prisma studio.

npx prisma studio

It works 😄

Now, let's create the second endpoint. This endpoint will be for getting a poll. Create a file pages/api/getPoll.ts and add the following code:

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";
import prisma from "$/prisma";

type Data = {
  message: string;
  error: boolean;
  data?: any;
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  // Check if the request is a POST request
  if (req.method !== "POST") {
    res.status(200).json({ message: "Method not allowed", error: true });
    return;
  }

  // Check if the parameter `id` is present
  if (!req.body.id) {
    res.status(200).json({ message: "Missing parameters", error: true });
    return;
  }

  const { id } = req.body;

  // Get the poll
  const data = await prisma.poll.findUnique({
    where: {
      id: parseInt(id),
    },
  });

  // Check if the poll exists
  if (!data) {
    res.status(200).json({ message: "Poll not found", error: true });
    return;
  }

  res.status(200).json({ message: "Poll found", error: false, data });
}

After creating this endpoint, edit the poll/[id].tsx file and add the following code inside the function

// ... imports
import { useEffect, useState } from "react";

useEffect(() => {
  fetch(`/api/getPoll/`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      id,
    }),
  })
    .then((res) => res.json())
    .then((_data) => {
      type Data = {
        message: string;
        error: boolean;
        data?: any;
      };

      const data: Data = _data;

      if (!data.error) {
        const options = data.data.choices.split(",").map((choice: any) => {
          return {
            name: choice,
            votes: 0,
          };
        });

        setPollData({
          ...data.data,
          options,
        });

        setLoading(false);
      }
    });
}, [id]);

This code will fetch the poll data from the database and set it to the pollData state. If no poll is found, it will just keep the loading state as true. (Trolling the user 😂)

Now, the last step is to update the poll/[id].tsx file to show the poll data. You can replace the whole file with the following code:

import Header from "@/header";
import {
  Button,
  Container,
  Heading,
  Progress,
  Spinner,
  Stack,
  StackItem,
} from "@chakra-ui/react";
import type { NextPage } from "next";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

const Home: NextPage = () => {
  const router = useRouter();
  const id = router.query.id;

  type Vote = {
    choice: string;
    votes: number;
  };

  type Poll = {
    title: string;
    choices: string[];
    id: string;
  };

  const [poll, setPoll] = useState<Poll>({} as Poll);
  const [votes, setVotes] = useState<Vote[]>([]);
  const [loading, setLoading] = useState(true);
  const [voted, setVoted] = useState(false);
  const [totalVotes, setTotalVotes] = useState(0);

  useEffect(() => {
    if (document.cookie.includes("voted_" + id)) {
      setVoted(true);
    }

    if (id) {
      fetch(`/api/getPoll`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ id }),
      })
        .then((res) => res.json())
        .then(({ data }) => {
          data.choices = data.choices.split(",");
          setPoll(data);
          setLoading(false);

          const votes: Vote[] = [];

          data.choices.forEach((choice: any) => {
            const obj = {
              choice,
              votes: [...data.votes].filter((vote) => vote.choice === choice)
                .length,
            };

            votes.push(obj);
          });

          setVotes(votes);
          setTotalVotes(data.votes.length);
        });
    }
  }, [id]);

  function castVote(option: string) {
    fetch(`/api/castVote`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ option, id: poll.id }),
    })
      .then((res) => res.json())
      .then(({ data }) => {
        const votes: Vote[] = [];

        poll.choices.forEach((choice) => {
          const obj = {
            choice,
            votes: [...data].filter((vote) => vote.choice === choice).length,
          };

          votes.push(obj);
        });

        setVotes(votes);
        setVoted(true);
        setTotalVotes(data.length);

        document.cookie = "voted_" + id + "=true";
      });
  }

  return (
    <Container maxW="container.lg">
      <Header />

      <Container maxW="container.md" mt={6} shadow="lg" p={8} rounded="2xl">
        {loading && <Spinner size="xl" />}

        {!loading && (
          <>
            <Heading my={4}>{poll.title}</Heading>
            {voted ? (
              <Stack spacing={4} mb={4}>
                {poll.choices.map((option, index) => (
                  <StackItem key={index} pos="relative">
                    <Progress
                      colorScheme={"blue"}
                      value={
                        votes.find((vote) => vote.choice === option)?.votes
                      }
                      height="8"
                      max={totalVotes}
                    />
                    <Heading size="sm" pos="absolute" top="0" mt="1" ml="2">
                      {option} (
                      {votes.find((vote) => vote.choice === option)?.votes})
                    </Heading>
                  </StackItem>
                ))}
              </Stack>
            ) : (
              <Stack spacing={2} mb={4}>
                {poll.choices.map((option) => (
                  <Button
                    key={option}
                    onClick={() => castVote(option)}
                    isLoading={loading}
                    loadingText="Casting Vote"
                    disabled={loading}
                  >
                    {option}
                  </Button>
                ))}
              </Stack>
            )}
          </>
        )}
      </Container>
    </Container>
  );
};

export default Home;

Now save it and you're done!

Conclusion

In this tutorial, we learned how to create a full-stack poll app using Next.js, TypeScript, and MySQL. We learned how to create a Next.js app and how to connect the Next.js app to the database. You can also add more features to this app like user authentication, IP address tracking, and more. I hope you enjoyed this tutorial. If you have any questions, feel free to ask them in the comments section below. Thanks for reading!

You can also support me by following me on Twitter and GitHub.

Also code is available on GitHub.