[PAID BOUNTY - $440] Messenger Group Chat Poll Creation & Voting UI

[warpspeedopen-source]

Bounty Overview

Build a poll creation and voting feature for group chats in the warpSpeed app.

The feature should allow users to create polls directly from the group chat input area, send polls inline into the conversation, vote on options, view real-time results, and open a detailed “View Votes” bottom sheet.

The experience should feel smooth, intuitive, and consistent with modern messaging apps such as WhatsApp.

This bounty is part of the warpSpeed OPEN developer bounty programme.

Reward

$440

Difficulty

Medium

Main Skills

• React Native
• TypeScript
• Storybook
• UI Components
• Mobile Interaction Design
• Real-time UI States

Design Reference

https://xd.adobe.com/view/0cec7f20-eb33-402e-be87-f7e02753e028-59bf/

High-Level Scope

The selected developer will build a reusable poll feature for group chats.

The implementation should include:

• Poll creation from the group chat input action/arrow menu
• Poll question input
• Multiple answer options
• Support for up to 12 poll options
• Poll question limit of 255 characters
• Single-choice or multiple-choice voting support
• Inline poll message inside the chat conversation
• Direct voting from the chat
• Real-time result updates
• Visual result bars or progress indicators
• Vote percentage calculation based on total group participants
• “View Votes” action
• Bottom sheet showing detailed voting insights
• Voter profile previews
• Detailed voter list per option
• Persistent poll display in chat history
• Storybook components and composed view for the full user experience

Full technical requirements, submission rules, acceptance criteria, and final design expectations are available on the official bounty page.

View Full Bounty Details & Sign Up

To see the full bounty specification and apply, visit:

https://warpspeedopen.org/bounties

How to Claim

1. Open the bounty page.
2. Sign up as a developer.
3. Review the full bounty details and rules.
4. Return to this GitHub issue and comment:

"I have signed up and would like to claim this bounty."

A maintainer must confirm before work begins.

Important Rules

• Do not start work until a maintainer confirms your claim.
• Maximum 3 submission attempts.
• Minimum 90% specification match required for consideration.
• Payment is made only at 100% completion.
• Payment is processed only after the pull request is approved and merged.
• First code commit is required at the halfway mark between bounty start and bounty expiration.
• Code must be original or properly licensed.
• The official bounty page is the source of truth for full requirements, rules, and deadlines.

[nguyenthekr92-byte]

I have signed up and would like to claim this bounty.

[s0584273828-ctrl]

I have signed up and would like to claim this bounty.

Before I start implementation, could you please confirm a few points so I can align with the programme rules and avoid wasted work?

1. If this claim is accepted, is the bounty reserved for my GitHub handle until the agreed deadline, or can multiple developers submit competing PRs in parallel?
2. Where can I access the full technical specification and target repository for this bounty?
3. Is payout handled through Stripe or PayPal, and are there any KYC requirements before payment?
4. Are there examples of previously merged and paid warpSpeed OPEN bounty PRs that developers can review?

Once confirmed, I can scope the implementation and start with the required halfway commit.

[apoorva-01]

I have signed up and would like to claim this bounty.

[sriraajj-lab]

Bounty Solution Proposal

I've analyzed this issue and here's my proposed solution:

I'll provide a comprehensive solution for implementing Messenger Group Chat Poll Creation & Voting UI. This will be a React Native implementation with real-time Firebase integration.

1. Root Cause Analysis

The current codebase lacks:

• Poll data model and schema
• Poll creation UI components
• Poll display and voting interactions
• Real-time vote tracking
• View votes bottom sheet
• Poll message type support in chat

2. Step-by-Step Solution

Phase 1: Data Model & Backend

1. Define Firestore schema for polls
2. Create Poll data types
3. Setup Firebase functions for real-time updates

Phase 2: UI Components

1. Create Poll creation modal
2. Add poll button to chat input
3. Build inline poll display component
4. Implement voting interaction
5. Create "View Votes" bottom sheet

Phase 3: Integration

1. Connect polls to chat messages
2. Handle real-time updates
3. Implement vote persistence

3. Code Changes

File 1: src/types/poll.ts

export interface PollOption {
  id: string;
  text: string;
  voters: string[]; // user IDs
  voteCount: number;
}

export interface Poll {
  id: string;
  question: string;
  options: PollOption[];
  createdBy: string;
  createdAt: Date;
  expiresAt?: Date;
  allowMultipleVotes: boolean;
  totalVotes: number;
  isActive: boolean;
}

export interface PollMessage {
  type: 'poll';
  pollId: string;
  messageId: string;
  timestamp: Date;
}

File 2: src/models/PollModel.ts

import { db } from '../config/firebase';
import { 
  collection, 
  addDoc, 
  updateDoc, 
  doc, 
  query, 
  where, 
  onSnapshot,
  increment,
  arrayUnion,
  arrayRemove,
  getDoc,
  serverTimestamp 
} from 'firebase/firestore';
import { Poll, PollOption } from '../types/poll';

class PollModel {
  private static instance: PollModel;
  private listeners: Map<string, () => void> = new Map();

  static getInstance(): PollModel {
    if (!PollModel.instance) {
      PollModel.instance = new PollModel();
    }
    return PollModel.instance;
  }

  async createPoll(pollData: Omit<Poll, 'id' | 'totalVotes' | 'isActive'>): Promise<string> {
    const pollsRef = collection(db, 'polls');
    const docRef = await addDoc(pollsRef, {
      ...pollData,
      totalVotes: 0,
      isActive: true,
      createdAt: serverTimestamp(),
      options: pollData.options.map(opt => ({
        ...opt,
        voters: [],
        voteCount: 0
      }))
    });
    return docRef.id;
  }

  async voteOnPoll(pollId: string, optionId: string, userId: string): Promise<void> {
    const pollRef = doc(db, 'polls', pollId);
    const pollSnap = await getDoc(pollRef);
    const poll = pollSnap.data() as Poll;

    if (!poll) throw new Error('Poll not found');
    if (!poll.isActive) throw new Error('Poll is closed');

    // Remove previous votes if single vote
    if (!poll.allowMultipleVotes) {
      const prevVoteOption = poll.options.find(opt => opt.voters.includes(userId));
      if (prevVoteOption) {
        await updateDoc(pollRef, {
          [`options.${poll.options.indexOf(prevVoteOption)}.voters`]: arrayRemove(userId),
          [`options.${poll.options.indexOf(prevVoteOption)}.voteCount`]: increment(-1)
        });
      }
    }

    // Add new vote
    const optionIndex = poll.options.findIndex(opt => opt.id === optionId);
    await updateDoc(pollRef, {
      [`options.${optionIndex}.voters`]: arrayUnion(userId),
      [`options.${optionIndex}.voteCount`]: increment(1),
      totalVotes: increment(1)
    });
  }

  async removeVote(pollId: string, optionId: string, userId: string): Promise<void> {
    const pollRef = doc(db, 'polls', pollId);
    const pollSnap = await getDoc(pollRef);
    const poll = pollSnap.data() as Poll;

    const optionIndex = poll.options.findIndex(opt => opt.id === optionId);
    await updateDoc(pollRef, {
      [`options.${optionIndex}.voters`]: arrayRemove(userId),
      [`options.${optionIndex}.voteCount`]: increment(-1),
      totalVotes: increment(-1)
    });
  }

  subscribeToPoll(pollId: string, callback: (poll: Poll) => void): () => void {
    const pollRef = doc(db, 'polls', pollId);
    const unsubscribe = onSnapshot(pollRef, (snapshot) => {
      if (snapshot.exists()) {
        callback({ id: snapshot.id, ...snapshot.data() } as Poll);
      }
    });

    this.listeners.set(pollId, unsubscribe);
    return unsubscribe;
  }

  async closePoll(pollId: string): Promise<void> {
    const pollRef = doc(db, 'polls', pollId);
    await updateDoc(pollRef, { isActive: false });
  }

  cleanup(): void {
    this.listeners.forEach(unsubscribe => unsubscribe());
    this.listeners.clear();
  }
}

export default PollModel;

File 3: src/components/ChatInput/PollCreationModal.tsx

import React, { useState } from 'react';
import {
  Modal,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  FlatList,
  Alert,
  StyleSheet,
  Switch,
  KeyboardAvoidingView,
  Platform
} from 'react-native';

interface PollCreationModalProps {
  visible: boolean;
  onClose: () => void;
  onCreatePoll: (pollData: {
    question: string;
    options: string[];
    allowMultipleVotes: boolean;
  }) => void;
}

const MAX_OPTIONS = 10;
const MIN_OPTIONS = 2;

const PollCreationModal: React.FC<PollCreationModalProps> = ({
  visible,
  onClose,
  onCreatePoll
}) => {
  const [question, setQuestion] = useState('');
  const [options, setOptions] = useState<string[]>(['', '']);
  const [allowMultipleVotes, setAllowMultipleVotes] = useState(false);

  const addOption = () => {
    if (options.length < MAX_OPTIONS) {
      setOptions([...options, '']);
    }
  };

  const removeOption = (index: number) => {
    if (options.length > MIN_OPTIONS) {
      const newOptions = options.filter((_, i) => i !== index);
      setOptions(newOptions);
    }
  };

  const updateOption = (text: string, index: number) => {
    const newOptions = [...options];
    newOptions[index] = text;
    setOptions(newOptions);
  };

  const handleCreate = () 

---
*This solution was generated by [DenialsDoctor Hermes](https://denialsdoctor.com) — AI-powered claim denial management.*

[zhaog100]

👋 Hi! I am @zhaog100 (小米辣 🌶️). I would like to claim this bounty!

Plan:

1. Build poll creation UI from group chat input area
2. Implement inline poll sending into conversation
3. Add real-time voting with live results
4. Create detailed "View Votes" bottom sheet
5. Ensure WhatsApp-level UX smoothness

Skills: React Native, TypeScript, UI/UX, Real-time updates

[tanmayxchoudhary]

Parking this claim for now because the warpSpeed platform allows only 2 active bounty signups at a time. I will pick this up if an active slot opens.