Real-Time Polling App with WebSockets

Project roadmap

1. 01

   Define shared event types

   ~1.5h

   Set up a monorepo (for example with npm workspaces) with shared, server and client packages. In shared, define the Poll type (room code, question, options with vote counts and status draft, open or closed) and the Socket.IO event interfaces (ClientToServerEvents and ServerToClientEvents), such as createPoll, joinRoom, vote, openPoll, closePoll and pollUpdated. Done when: both server and client compile using the shared types.

2. 02

   Build the server

   ~2.5h

   Build an Express server with Socket.IO typed with the shared interfaces. Hosts create polls (getting a random 6-character room code and a secret host token), participants join rooms, and votes are accepted only while the poll is open and for valid options. Broadcast updated results to the room after each vote. Keep polls in memory with an expiry. Done when: a script with socket.io-client can create a poll, join and vote.

3. 03

   Build the host view

   ~2h

   Build a React page for hosts to create a poll (a question and 2 to 8 options, validated), see the room code and a join link, open and close voting, and watch results as a live bar chart with vote counts and percentages. Only the holder of the host token can control the poll. Done when: a host can create, open and close a poll and see live results.

4. 04

   Build the participant view

   ~2h

   Build a mobile-friendly page where participants enter the room code (or open the link), see the question and options, vote with one tap, and then see live results. Show clearly when the poll isn't open yet or has closed. Done when: several phones or browser tabs can join and vote, and everyone sees results update instantly.

5. 05

   Prevent duplicate votes and handle reconnects

   ~2h

   Give each participant a random id stored in localStorage and sent when joining, and record one vote per participant id per poll on the server (a second vote is rejected, or replaces the first if you allow changing votes). On reconnect, rejoin the room automatically and receive the current state. Rate limit events per connection. Done when: refreshing the page doesn't allow a second vote, and reconnecting shows the latest results.

6. 06

   Write an end-to-end test

   ~2h

   Write an automated test (with Vitest and socket.io-client) that starts the server, creates a poll as a host, connects 20 participants, opens the poll, casts votes including duplicates and votes for invalid options, closes it, and checks every client received the same final results and that votes after closing were rejected. Done when: the test passes reliably.

Resources

• DocsSocket.IO documentation
• DocsSocket.IO: TypeScript
• DocsSocket.IO: rooms
• DocsReact: quick start
• Docsnpm workspaces