Back to HomeTinkering Playground Logo
Poll Architecture Template
Build Instruction Prompt (Start from Scratch)

Copy and use this prompt to generate the live poll functionality:

Objective: Implement a two-phase live polling system using React and Firestore from scratch. 1. Data Entity: Define a "PollSubmission" entity with an "answers" object (map) and a "submittedAt" timestamp. 2. Firestore Collection: Create a collection named "poll_live-202605". 3. Security Rules: Allow public 'read' and 'create' access for this collection. 4. Phase 1 (Voting): - Render a RadioGroup with 5 options: Elon Musk, Sam Altman, Mark Zuckerberg, Dario Amodei, Demis Hassabis. - On submission, write the selected option to Firestore and set a "voted" flag in localStorage. - Do not show any statistics or results during this phase. 5. Phase 2 (Results): - If the localStorage flag is present, hide the voting form and show the results view. - Use the 'useCollection' hook to fetch all submissions in real-time. - Aggregate the counts for each option and display them using a Horizontal Bar Chart (Recharts). - Include a "Refresh" button that manually re-fetches data using 'getDocs'. - Include a "Reset Vote" button that removes the flag from localStorage and returns the user to Phase 1. 6. Error Handling: Use a central error emitter to catch and display FirestorePermissionErrors via a toast notification.

Note: Ensure that the transitions between phases are handled by local state and that the "voted" state persists across browser refreshes using localStorage.