EasyPollVote [Dev Log #1]

#discuss #easypvdevlog #nextjs #react

Pokemon-themed test poll using Supabase

Welcome to the First DEV LOG!

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

What is EasyPollVote (EasyPV)?

It is an 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!

The Current Stack

This application is built using the Next.js + Supabase Template to start off!

Current Progress

Right now, it is bare bone and hard-coded. The main functionality is integrating the GET and POST requests from Supabase. Currently, there is only one table that takes the following:

Name (String)
Email (String)
Vote (String)

With that said, on the submission form, you only need to enter your name, email, and chose either Pikachu or Blastoise. This is currently hard coded to test out Supabase.

Note: Currently, there is no validation on whether you voted more than once. Therefore, you are able to vote more than once if you like!

When you submit the Form, it checks to see if you vote a specific Pokemon. If you did not select either, it will give you an error message that you need to Vote. Otherwise, it will perform a POST request.

if (formData.vote == "") { // All values need to be submitted
   setMessage("Error: Please select a Pokémon to vote for.");
} else { // Upload the data to the database via POST request
   const res = await fetch("/vote", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
   });

   if (!res.ok) {
      setMessage("Error: Form submission failed. Please try again.");
   } else { // Form has been submitted and reset the form
      setMessage("Form submitted successfully! Thank you for voting.");
      setFormData({ name: "", email: "", vote: "" });
   }
}

When displaying the votes, it preforms a GET request where it gets the total votes and then display the votes in the appropriate category.

useEffect(() => {
   async function fetchVotes() {

      const res = await fetch('/vote'); // your GET route
      const data = await res.json();

      // Count votes
      let pika = 0;
      let blast = 0;
      let totalVotes = 0

      data.TotalVotes.forEach((row: { Vote: string; }) => {
        if (row.Vote === 'Pikachu') pika++;
        if (row.Vote === 'Blastoise') blast++;
      });
      totalVotes = pika + blast;

      // Set the scores after calculation
      setTotalVotes(totalVotes);
      setPikachuVotes(pika);
      setBlastoiseVotes(blast);
      setLoading(false);
   }

   fetchVotes();
}, []);

All the requests to the database are located in the "Vote" folder, which contains the route.ts!

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!