EasyPollVote [Dev Log #4]

Welcome to the Forth DEV LOG!

Welcome to the forth Dev Log of my full stack application called EasyPollVote (EasyPV)!

What is EasyPollVote (EasyPV)?

A Next.js application where the ultimate goal is having the convenience to create your own poll and share it for others to vote on your custom poll!

For example, a user can create their own poll. Their poll can be something like "Do you like Cats or Dogs?" following the two options users can vote on "Cats" or "Dogs". Then, they will be able to send the private link to anyone and the voters can vote on it without the need to create an account!

That is the whole goal. Do note that this goal may change as time goes on!

The current goal is to learn about the use of Supabase!

Current Progress

Nothing new other than cleaning up code. @sylwia-lask made a poll and here are the results!

As mention in the last Dev Log, I will now be discussing how the Custom Polls work!

Part 1

Here is the HTML code based on the image above:

<form onSubmit={handleSubmit} className="w-full p-4 sm:p-6 md:p-8">
    <h2 className="text-xl font-semibold text-center p-4 sm:p-5 border-4 border-indigo-200 border-b-indigo-500">
        Create a Poll
    </h2>

    <div className="mt-5 mb-5 justify-center">
        {/* TITLE */}
        <label>
            <h1>Poll Title</h1>

            <input
                type="text"
                placeholder="Poll Title (required)"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
                className="w-full mb-4 p-3 border"
                required
            />
        </label>

        <label>
            <h1>Poll End Date</h1>

            {/* END DATE */}
            <input
                type="datetime-local"
                value={endDate}
                onChange={(e) =>
                    handleEndDateChange(e.target.value)
                }
                className={`w-full mb-1 p-3 border ${endDateError ? "border-red-500" : ""
                    }`}
                required
            />
        </label>

        {/* ERROR */}
        {endDateError && (
            <p className="text-red-500 text-sm mb-3">
                {endDateError}
            </p>
        )}
    </div>

    {/* OPTIONS */}
    <label className="block mb-2 font-medium">
        Poll Options
    </label>

    <div className="w-full mb-4 p-4 sm:p-6 border">
        {options.map((opt, index) => (
            <div
                key={index}
                className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mb-3"
            >
                <input
                    type="text"
                    placeholder={`Option ${index + 1}`}
                    value={opt.text}
                    onChange={(e) =>
                        handleOptionChange(
                            index,
                            e.target.value
                        )
                    }
                    className="flex-1 p-3 border"
                    required={index < 2}
                />

                <div className="flex gap-2">
                    <input
                        type="color"
                        value={opt.color}
                        onChange={(e) =>
                            handleColorChange(
                                index,
                                e.target.value
                            )
                        }
                        className="w-12 h-12 p-1 border cursor-pointer"
                    />

                    {index >= 2 && (
                        <button
                            type="button"
                            onClick={() =>
                                removeOption(index)
                            }
                            className="px-3 py-3 bg-red-500 text-white"
                        >
                            ✕
                        </button>
                    )}
                </div>
            </div>
        ))}

        {options.length < 4 && (
            <button
                type="button"
                onClick={addOption}
                className="w-full mb-2 p-3 border"
            >
                + Add Option
            </button>
        )}
    </div>

    {/* SUBMIT */}
    <button
        type="submit"
        disabled={loading || !!endDateError}
        className="w-full bg-blue-500 text-white py-3 disabled:bg-gray-400"
    >
        {loading ? "Submitting..." : "Submit"}
    </button>

    {message && (
        <p className="text-sm text-center mt-3">
            {message}
        </p>
    )}
</form>

In this form, we have the main functionalities:

"handleSubmit"
"setTitle"
"handleEndDateChange"
"handleOptionChange" and "handleColorChange"
"addOption" and "removeOption"

I will be discussing in reverse order.

"addOption" and "removeOption"

Nothing big is going on. Basically, the user have the option to create up to 4 options for the voter to vote on and being able to delete the options as well:

// Add/Remove options (max 4, min 2)
const addOption = () => {
    if (options.length < 4) {
        setOptions([...options, { text: "", color: "#a855f7" }]); // Add option
    }
};
const removeOption = (index: number) => {
    if (options.length <= 2) return;
    setOptions(options.filter((_, i) => i !== index)); // Remove option
};

"handleOptionChange" and "handleColorChange"

Speaking of options, you have the ability to enter a name for that option and the color associate with it.

// Poll options w/ color associated with each option
const handleOptionChange = (index: number, value: string) => {
    const updated = [...options];
    updated[index].text = value;
    setOptions(updated);
};
const handleColorChange = (index: number, color: string) => {
    const updated = [...options];
    updated[index].color = color;
    setOptions(updated);
};

"handleEndDateChange"

Based on the input, it get stored:

const handleEndDateChange = (value: string) => {
    setEndDate(value);
    setEndDateError(validateEndDate(value)); // Validate the date
};

"setTitle"

Just storing in a variable :)

"handleSubmit"

I save the biggest one for last!

// Handling submit of the form
const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setMessage("");


    const filteredOptions = options.filter(
        (opt) => opt.text.trim() !== ""
    );

    try {
        // duplicate check uses filtered options only
        for (let i = 0; i < filteredOptions.length; i++) {
            for (let j = i + 1; j < filteredOptions.length; j++) {
                if (filteredOptions[i].text.trim().toLowerCase() === filteredOptions[j].text.trim().toLowerCase()) {
                    setMessage("Options cannot be identical!");
                    setLoading(false);
                    return;
                }
            }
        }

        const isoEndDate = new Date(endDate).toISOString();

        // POST request one all the validation is complete
        const res = await fetch("/api/poll", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                title,
                options: filteredOptions,
                endDate: isoEndDate,
            }),
        });

        const data = await res.json();

        if (!res.ok) {
            throw new Error(data.error || "Something went wrong");
        }

        const pollUrl = `${window.location.origin}/poll/${data.pollId}`;

        setMessage(
            "Poll created successfully! Share this link: " + pollUrl
        );

        // reset form
        setTitle("");
        setEndDate("");
        setEndDateError("");
        setOptions([
            { text: "", color: "#22c55e" },
            { text: "", color: "#3b82f6" },
        ]);
    } catch (err: any) {
        setMessage(err.message);
    } finally {
        setLoading(false);
    }
};

The first big thing it it does is ensuring there are no duplicate values in the options section. If there are no duplicate names, we then proceed to set the date to an ISO and do a POST request on api/poll.

// POST request one all the validation is complete
const res = await fetch("/api/poll", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
    },
    body: JSON.stringify({
        title,
        options: filteredOptions,
        endDate: isoEndDate,
    }),
});

It uploads the title, options, and its enddate of the poll.

Once the user submits the form, it generates a link for the user to share with others to vote on their poll!

const pollUrl = `${window.location.origin}/poll/${data.pollId}`;

setMessage(
    "Poll created successfully! Share this link: " + pollUrl
);

In the api/poll/route.ts, it only has a single POST request:

export async function POST(req: Request) {
    try {
        const body = await req.json();

        const { title, options, endDate } = body;

        // 1. Validate input
        if (!title || !endDate || !options || options.length < 2) {
            return NextResponse.json(
                { error: "Invalid input" },
                { status: 400 }
            );
        }

        // 2. Validate ISO date (already normalized from client)
        const normalizedEndDate = new Date(endDate);

        if (isNaN(normalizedEndDate.getTime())) {
            return NextResponse.json(
                { error: "Invalid date format" },
                { status: 400 }
            );
        }

        if (normalizedEndDate.getTime() <= Date.now()) {
            return NextResponse.json(
                { error: "End date must be in the future" },
                { status: 400 }
            );
        }

        // 3. Insert Poll
        const { data: pollData, error: pollError } = await supabase
            .from("Poll")
            .insert([
                {
                    PollTitle: title,
                    Poll_EndDate: endDate,
                    Poll_Ended: false,
                },
            ])
            .select()
            .single();

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

        // 4. Insert Options
        const optionsPayload = options.map(
            (opt: { text: string; color: string }) => ({
                poll_id: pollData.id,
                option_text: opt.text,
                option_color: opt.color || "#a855f7",
                Votes: 0,
            })
        );

        const { error: optionsError } = await supabase
            .from("VoteOptions")
            .insert(optionsPayload);

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

        return NextResponse.json({ pollId: pollData.id });

    } catch (err: any) {
        return NextResponse.json(
            { error: err.message || "Server error" },
            { status: 500 }
        );
    }
}

Pretty much we do an insert in two tables where we insert into the Poll table and insert to the VoteOptions table, where the VoteOption has a Foriegn key linked to the Poll.

You may also noticed this part, which we will get to later:

Poll_Ended: false,

Part 2

When the user linked on an existing poll, this is what the structure look like:

{/* RESULTS */ }
<div className="p-4 sm:p-6 md:p-8">
    <h1 className="text-center text-xl font-semibold">
        Total Votes: {totalVotes}
    </h1>

    {options.map((opt) => {
        const votes = Number(opt.Votes) || 0;
        const percentage =
            totalVotes > 0 ? (votes / totalVotes) * 100 : 0;

        return (
            <div
                key={opt.id}
                className="flex justify-between items-center p-4 sm:p-5 shadow-md outline outline-black/5 dark:bg-gray-800 border-2 border-gray-80 dark:border-gray-700 m-2"
                style={{
                    background: `linear-gradient(to right, ${opt.option_color} ${percentage}%, transparent ${percentage}%)`,
                }}
            >
                <span className="font-medium bg-black text-white px-2 py-1 rounded text-sm sm:text-base">
                    {opt.option_text}: {votes}
                </span>
            </div>
        );
    })}
</div>

{/* VOTING FORM */ }
{
    !hasVoted && !pollEnded && (
        <form
            onSubmit={handleVote}
            className="p-4 sm:p-6 md:p-8 flex flex-col gap-2"
        >
            <h1 className="font-medium mb-2">Choose your Vote!</h1>

            {options.map((opt) => (
                <label
                    key={opt.id}
                    className="flex items-center gap-2 p-2 border-2 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
                >
                    <input
                        type="radio"
                        name="vote"
                        value={opt.id}
                        checked={selected === opt.id}
                        onChange={() => setSelected(opt.id)}
                        className="cursor-pointer"
                    />

                    <span className="flex-1 text-sm sm:text-base">
                        {opt.option_text}
                    </span>
                </label>
            ))}

            <button
                type="submit"
                disabled={loading}
                className="w-full bg-blue-500 text-white py-3 disabled:bg-gray-400 mt-5"
            >
                {loading ? "Submitting..." : "Submit Vote"}
            </button>
        </form>
    )
}

{/* MESSAGE */ }
{
    (message || hasVoted) && (
        <p className="mt-4 text-center text-sm p-4 sm:p-5">
            {message}
        </p>
    )
}

It is structured similar to the Demo Poll I discuss on the last Dev Log. Most of it is trying to fetch data from the database and displaying it in the UI.

In another component, we have a timer set. If the timer has reach the end date (where the user has set the end date), it will set the boolean to true and it will remove the ability to vote on that poll.

const now = new Date();
const end = new Date(poll.Poll_EndDate);
const pollEnded = now >= end;

// update DB if not already ended
if (pollEnded && !poll.Poll_Ended) {
    await supabase
        .from("Poll")
        .update({ Poll_Ended: true })
        .eq("id", poll.id);
}

Note: The feature of auto delete a poll will be implemented in the future.

And that's it! Future developments will continue after the end of the Spring Semester! I appreciate the feedback from the community and feel free to provide feedback if you haven't already!

Official Website

If you would love to see the project yourself, feel free to check out the link here: https://easypollvote.vercel.app

I recommend to put a fake email and a fake name if you are using the app. Everything works as intended! Check it out and feedback is greatly appreciated!

Any questions/comments/feedback? I would love to hear from you!

Note: This post is monitored by the University and therefore the repository is currently private until the early Summer!

推荐订阅源

DEV Community