How maharajan07/live-polling-system works
Purpose and Entry Points
This is a full-stack, single-session live polling and chat system for teacher and student roles. The React client starts at client/src/main.jsx, renders the application shell in client/src/App.jsx, and connects to real-time services through client/src/socket.js. The Node/Express and Socket.IO server entry point is server/index.js; it also serves the production client build from client/dist.
Client Application Shell and Role Flow
client/src/App.jsx owns high-level client state and routes users into teacher or student experiences rather than using a separate page-based router. Role-specific UI is implemented by client/src/components/TeacherPanel.jsx and client/src/components/StudentPanel.jsx; supporting home/join state is in client/src/components/Home.jsx. A student identity is intended to be unique per browser tab, establishing the client-side boundary between participants.
Teacher Poll Authoring and Session Control
The teacher workflow is centered on client/src/components/TeacherPanel.jsx, with poll input captured by client/src/components/QuestionForm.jsx and aggregate state rendered by client/src/components/ResultPanel.jsx. Teachers launch timed questions, observe live answer counts, and can remove students. Poll creation is gated by the completion of the active poll, making the server-managed poll lifecycle a central control boundary.
Student Answering and Result Consumption
client/src/components/StudentPanel.jsx receives the active question, lets the student submit an answer, and transitions to results after submission or poll timeout. client/src/components/ResultPanel.jsx is the shared presentation boundary for live/finished poll outcomes. A removal event is represented by client/src/components/KickedOut.jsx, preventing a removed participant from continuing normal session interaction.
Real-Time Transport and Server Authority
Socket.IO is the primary control and data channel, initialized client-side in client/src/socket.js and handled server-side in server/index.js. The server is the authority for connected participants, active poll state, submitted answers, timer/completion events, chat broadcasts, and student removal. Clients emit user actions and react to broadcast state/events; no persistent database layer is present in the repository, so session data is likely process-memory scoped.
Chat Subsystem
Chat is a parallel real-time interaction flow available to both roles. client/src/components/ChatPopup.jsx provides the client chat surface, while client/src/socket.js transports messages to and from server/index.js. Role-aware message rendering distinguishes teacher and student contributions without requiring HTTP refreshes.
Runtime, Build, and Deployment Boundary
The frontend is a Vite-built React application (client/package.json, client/vite.config.js) whose production assets are committed under client/dist/index.html and client/dist/assets. The backend is a Node.js Express runtime with Socket.IO (server/package.json, server/index.js) and serves the built SPA in production. The documented deployment target is Render; the externally exposed server must support both static asset delivery and persistent WebSocket-compatible Socket.IO connections.
Main entry points: App.jsx App shell & role state · index.js Express + Socket.IO server · TeacherPanel.jsx Teacher controls · socket.js Socket client
Components 14
React client
- Client entry
client/src/main.jsx - App shell & role state · Routes users into teacher or student flows without page routing.
client/src/App.jsx - Home & join · Establishes role and tab-scoped student identity.
client/src/components/Home.jsx - Teacher controls · Controls poll lifecycle and student removal.
client/src/components/TeacherPanel.jsx - Question authoring
client/src/components/QuestionForm.jsx - Student answering · Submits answers and transitions on completion or timeout.
client/src/components/StudentPanel.jsx - Live results
client/src/components/ResultPanel.jsx - Chat popup · Renders role-aware chat messages.
client/src/components/ChatPopup.jsx - Removal state
client/src/components/KickedOut.jsx - Socket client
client/src/socket.js
Node real-time server
- Express + Socket.IO server · Owns in-memory participants, polls, answers, timers, chat, and removal events.
server/index.js - In-memory session state · State is scoped to the server process; no database is present.
Build & hosting
- Vite production build
client/vite.config.js - Built SPA assets · Production React assets served by Express.
client/dist/index.html
Connections 18
- Client entry → App shell & role state: renders
- App shell & role state → Home & join: starts at
- App shell & role state → Teacher controls: teacher role
- App shell & role state → Student answering: student role
- Teacher controls → Question authoring: authors polls
- Teacher controls → Live results: observes counts
- Student answering → Live results: consumes outcome
- App shell & role state → Chat popup: opens
- App shell & role state → Removal state: removal event
- Teacher controls → Socket client: poll and removal actions
- Student answering → Socket client: answers
- Chat popup → Socket client: messages
- Socket client → Express + Socket.IO server: Socket.IO events · Bidirectional real-time control and broadcast channel.
- Express + Socket.IO server → In-memory session state: manages
- Express + Socket.IO server → Live results: poll updates
- Express + Socket.IO server → Removal state: removal broadcast
- Vite production build → Built SPA assets: produces
- Built SPA assets → Express + Socket.IO server: served in production