Back to Home
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.