This is a real-time voting application where users can propose topics and vote on them in real-time. The application utilizes Redis and Socket.IO to ensure all connected clients are instantly updated with the latest voting data.
- Real-Time Voting: Users can propose topics, vote on them, and see the results update in real-time.
- Socket.IO Integration: Clients are notified immediately when new topics are added or votes are cast.
- Redis: Used as the main data store to track votes and topics, with Upstash serving as the Redis hosting platform.
- Separation of Concerns: The project is structured with two distinct folders:
- Client: Built using Next.js 14 and ShadCN-UI.
- Server: A Node.js Express server that manages the backend API and handles socket communication.
Here are some previews of the Real-Time Voting Application:
root/
├── client/
│ ├── app/
│ ├── components/
│ ├── utils/
│ ├── bun.lockb
│ ├── package.json
│ └── ...
└── server/
├── index.ts
├── bun.lockb
├── package.json
└── ...
-
client/: This folder contains the frontend part of the application.- Built with Next.js 14.
- Uses ShadCN-UI for consistent and easy-to-use UI components.
- Connects to the backend through API calls and listens for real-time updates using Socket.IO.
-
server/: This folder contains the backend part of the application.- Built with Node.js and Express.js.
- Uses Socket.IO for real-time communication between the server and the client.
- Stores voting data in Redis, hosted by Upstash.
- Next.js 14
- ShadCN-UI
- Redis (for client-side state management)
- Node.js
- Express.js
- Socket.IO
- Redis (for real-time data storage and pub/sub functionality)
- Upstash Redis: Hosted Redis service that powers real-time updates and state management for both client and server.
-
Bun: Ensure that you have Bun installed. You can install it by running:
curl -fsSL https://bun.sh/install | bash -
Redis Upstash Account: You need an Upstash Redis account. You can # here.
- Navigate to the
clientdirectory:
cd client- Install the dependencies using Bun:
bun install- Configure the environment variables:
- Create a
.env.localfile in theclientfolder with the following content:
NEXT_PUBLIC_UPSTASH_REDIS_REST_URL=<YOUR_UPSTASH_REDIS_REST_URL>
NEXT_PUBLIC_UPSTASH_REDIS_REST_TOKEN=<YOUR_UPSTASH_REDIS_REST_TOKEN>
NEXT_PUBLIC_SOCKET_SERVER_URL=<YOUR_SERVER_URL>- Start the development server:
bun devThe client will be running at http://localhost:3000.
- Navigate to the
serverdirectory:
cd server- Install the dependencies using Bun:
bun install- Configure the environment variables:
- Create a
.envfile in theserverfolder with the following content:
REDIS_CONNECTION_STRING=<YOUR_UPSTASH_REDIS_CONNECTION_STRING>
SOCKET_PORT=<YOUR_SOCKET_PORT>- Start the server:
bun startThe server will be running on the port specified in your .env file.
- Visit the frontend at
http://localhost:3000. - Create a new topic or vote on an existing one.
- All clients connected to the application will receive real-time updates as votes are cast or new topics are created.
- You can open multiple browser windows to test the real-time functionality. Whenever you vote in one window, the updates will be reflected in all other connected windows in real-time.
The frontend can be deployed on any platform that supports Next.js application, such as Vercel, Netlify, or similar services.
The backend can be deployed on platforms like Heroku, Railway, or Vercel.
Make sure to adjust the environment variables to reflect your production URLs and settings when deploying.
Contributing are welcome! Feel free to submit a pull request, or open an issue on discuss potential changes or new features.
This project is licensed under MIT License - see the LICENSE file for details.