A real-time collaborative survey and form filling service that allows multiple participants to complete the same form simultaneously (similar to Google Docs for for document editing).
- Frontend – React + TypeScript + SurveyJS (
survey-core,survey-react-ui), Vite - Backend – Node + Express + Socket.IO
- Storage – In-memory (MVP, no database or authentication)
- Participants join a room using its identifier.
- The server stores the survey schema and current responses in memory.
- When a participant changes a value, the
onValueChangedevent in SurveyJS is triggered, and the update is broadcast to other participants via Socket.IO. - Clients apply incoming updates using
survey.setValue(). - An
applyingRemoteflag prevents update loops (seepackages/client/src/sync.ts). - Conflicts are resolved using a last-write-wins strategy at the individual question level.
- The Express server hosts both the client application and Socket.IO on a single port in both development and production.
- In development, Vite runs in middleware mode with HMR.
- In production, the server serves the built client assets from
client/distand provides SPA fallback routing.
See packages/server/src/index.ts.
npm install
npm run devThe application is available at http://localhost:3001. The first startup may take longer while Vite optimizes dependencies.
To test collaboration, open the application in two browser tabs using the same room identifier and edit the survey simultaneously.
npm run build
npm startnpm run build compiles the server and builds the client application. npm start serves the production build and Socket.IO on http://localhost:3001.
Use the PORT environment variable to override the default port.
npm test
npm run test:e2enpm test– Unit tests (Vitest) for the server, sockets, and client synchronization logic.npm run test:e2e– End-to-end tests (Playwright) that verify collaborative editing across two browser contexts.
Before running E2E tests for the first time, install Playwright browsers:
npm run test:e2e:installpackages/shared/events.ts– Shared Socket.IO event definitions.packages/server/src/index.ts– Express and Socket.IO server.packages/server/src/RoomManager.ts– In-memory room state and conflict resolution.packages/client/src/CollaborativeSurvey.tsx– Room management and survey rendering.packages/client/src/sync.ts– SurveyJS ↔ Socket.IO synchronization.