Clash Voting System is a real-time web app where users vote between two photos (called a “clash”), leave comments, and see updates instantly. It’s built for high performance and smooth user experience.
The backend runs on Node.js, handling API requests and business logic. Data is stored in PostgreSQL, which keeps records of users, photos, votes, and comments. Redis is used as a fast in-memory store for caching vote counts and for pub/sub to help broadcast live updates. Background tasks like analytics updates are managed using BullMQ, a powerful job queue system. Socket.IO handles real-time communication so users see live vote counts and new comments as they happen. The frontend is built with Next.js, a React framework that makes it easy to create fast, modern web pages. Everything runs inside Docker containers for easy setup and deployment.
- Vote between two photos
- Comment on clashes
- Real-time updates for votes and comments
- Easy local development with Docker
When a user votes, the backend stores the vote in PostgreSQL and updates counters in Redis. The server sends real-time updates to all users in the same clash room via Socket.IO. Comments are saved in PostgreSQL and also broadcast live so everyone sees new messages instantly.
-
Clone the repository:
git clone https://github.com/yourusername/clash-voting.git cd clash-voting -
Create a
.envfile:POSTGRES_USER=clash POSTGRES_PASSWORD=clashpw POSTGRES_DB=clashdb REDIS_HOST=redis REDIS_PORT=6379 -
Start services:
docker-compose up --build
-
Access the app:
- Frontend → http://localhost:3000
- Backend API → http://localhost:5000
- Open the frontend URL in your browser.
- Browse clashes and select one to vote on.
- Click the photo you want to support.
- Add comments to share your thoughts.
- Watch votes and comments update live.
- Refresh anytime to get the latest data.
MIT