EasyPollVote [개발 로그 #1]

Source: Dev.to

첫 번째 DEV LOG에 오신 것을 환영합니다!

전체 스택 애플리케이션 **EasyPollVote (EasyPV)**의 첫 번째 Dev Log에 오신 것을 환영합니다!

EasyPollVote (EasyPV)란?

EasyPollVote는 맞춤 설문을 만들고 비공개 링크를 공유하여 누구나 투표할 수 있게 해주는 가벼운 설문 앱이며, 계정이 필요 없습니다.

예시:
설문은 “고양이와 강아지 중 어느 쪽을 좋아하시나요?” 라고 물을 수 있으며, 옵션은 “고양이” 또는 “강아지” 입니다. 설문을 만든 뒤 링크를 공유하면 투표자는 즉시 선택을 제출할 수 있습니다.

Note: 기능 세트는 시간이 지나면서 변할 수 있습니다.
Current focus: Supabase 사용법 학습.

현재 스택

이 프로젝트는 Next.js + Supabase 템플릿을 기반으로 시작되었습니다.

현재 진행 상황

현재 이 앱은 하드코딩된 값들만 있는 기본 프로토타입이며, 주요 기능은 Supabase와 GET 및 POST 요청을 통합하는 것입니다.

데이터베이스 테이블

제출 양식은 현재 이름, 이메일, 그리고 피카츄 또는 블라스토이즈 중 하나를 선택하도록 요청합니다. 검증이 최소화되어 있어 사용자가 여러 번 투표할 수 있습니다.

POST 요청 (투표 제출)

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: "" });
   }
}

GET 요청 (투표 총합 표시)

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) => {
        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();
}, []);

모든 데이터베이스 상호작용은 /api/vote 폴더에 위치합니다 (예: route.ts).

공식 웹사이트

여기에서 실시간 프로젝트를 살펴보세요:

테스트를 위해 가짜 이메일과 이름을 자유롭게 사용하세요. 모든 것이 의도대로 작동하며, 피드백을 매우 환영합니다!

질문/댓글/피드백이 있나요? 여러분의 의견을 듣고 싶습니다!

Note: 이 게시물은 대학에서 모니터링하고 있어, 저장소는 초여름까지 비공개 상태입니다.