A modern, real-time polling application with distributed systems consistency visualization
|
See poll results update instantly as votes come in using Socket.io WebSocket technology. Beautiful neon-lime accent ( Interactive data visualization with Recharts showing vote distribution. |
Secure user authentication with Google Firebase Auth integration. Visualize distributed systems concepts:
Seamless experience on desktop, tablet, and mobile devices. |
| Technology | Purpose |
|---|---|
| React 18 + TypeScript | Core UI framework |
| Vite | Build tool & dev server |
| Tailwind CSS v4 | Utility-first styling |
| shadcn/ui | Accessible UI components |
| Socket.io-client | Real-time communication |
| Recharts | Data visualization |
| Lucide React | Modern icons |
| Sonner | Toast notifications |
| Technology | Purpose |
|---|---|
| Node.js + Express | REST API server |
| MongoDB | Database |
| Socket.io | WebSocket server |
| Firebase Admin | Token verification |
- Node.js 18+
- MongoDB instance
- Firebase project
# Clone the repository
git clone https://github.com/your-username/votenow.git
cd votenow
# Install frontend dependencies
npm install
# Install backend dependencies
cd backend
npm installCreate .env file in the backend folder:
MONGODB_URI=your_mongodb_connection_string
PORT=5000# Terminal 1: Start backend
cd backend
npm run dev
# Terminal 2: Start frontend
npm run devVisit http://localhost:5000 to access the application.
votenow/
├── src/
│ ├── components/
│ │ ├── consistency/ # Consistency visualization
│ │ │ ├── ConsistencyModeSelector.tsx
│ │ │ ├── ConsistencyStatusIndicator.tsx
│ │ │ └── NodeStatusPanel.tsx
│ │ ├── ui/ # UI components (shadcn)
│ │ ├── Navbar.tsx
│ │ ├── PollCard.tsx
│ │ └── ProtectedRoute.tsx
│ ├── contexts/
│ │ └── AuthContext.tsx # Firebase auth context
│ ├── hooks/
│ │ └── useSocket.ts # Socket.io hook
│ ├── pages/
│ │ ├── Home.tsx # Poll listing
│ │ ├── CreatePoll.tsx # Create new poll
│ │ ├── EditPoll.tsx # Edit existing poll
│ │ ├── PollDetail.tsx # Vote & view results
│ │ ├── Login.tsx # Authentication
│ │ └── Signup.tsx
│ ├── config/
│ │ └── api.ts # API configuration
│ └── utils/
│ └── pollStatus.ts # Poll status utilities
├── backend/
│ ├── server.js # Express + Socket.io server
│ └── package.json
└── dist/ # Production build (served by backend)
| Token | Color | Usage |
|---|---|---|
--primary |
#D4F469 |
Accent, buttons, highlights |
--background |
#050505 |
Page background |
--card |
#121212 |
Card backgrounds |
--foreground |
#FFFFFF |
Primary text |
--muted-foreground |
#9CA3AF |
Secondary text |
--border |
rgba(255,255,255,0.1) |
Subtle borders |
- Font: System fonts with Inter fallback
- Headings: White, bold
- Body: Gray-400 for readability
| Method | Endpoint | Description |
|---|---|---|
GET |
/api/polls |
Get all polls |
GET |
/api/polls/:id |
Get specific poll |
POST |
/api/polls |
Create poll |
PUT |
/api/polls/:id |
Update poll |
DELETE |
/api/polls/:id |
Delete poll |
POST |
/api/polls/:id/vote |
Submit vote |
GET |
/api/polls/:id/node-status |
Get node status |
| Event | Direction | Description |
|---|---|---|
join_poll |
Client → Server | Join poll room |
leave_poll |
Client → Server | Leave poll room |
update_poll |
Server → Client | Poll data updated |
This application demonstrates distributed systems consistency concepts:
All replica nodes are updated synchronously before returning to the client. Guarantees immediate consistency across all nodes.
Primary node is updated first, replicas are updated asynchronously with a small delay (100-500ms).
Updates are propagated through background sync every 5 seconds. Nodes may show different values temporarily but will eventually converge.
MIT License - feel free to use for learning or production!
Built with 💚 using React, Tailwind CSS, and Socket.io
