Real-time Poll app using Redis, WebSocket, Node.js and React

ashiqsultan

Mohamed Ashiq Sultan

Posted on August 27, 2022

Real-time Poll app using Redis, WebSocket, Node.js and React

Overview of My Submission

Architecture diagram
Architecture diagram
For the hackathon I have build a full stack Poll application which uses various Redis modules to implement microservice architecture. The application lets users to create polls and share it with others. Once users cast their vote they can view the results in real-time i.e the poll result graph in Frontend would get updated real-time for all users as votes are being casted.

Redis Modules used in the app

  1. RedisJSON
  2. Hash
  3. List as queue
  4. pub/sub

Note: The detailed documentation can be found in the Readme file of the GitHub repository embedded. This post contains only the minimal info required for hackathon submission.

I have used Node.js for the backend and React for the frontend. I have used Socket.io for implementing Websocket and also used socket.io Redis adapter for multi node deployments thus making this a complete horizontally scalable solution.

Submission Category:

Microservice Mavens (I believe my submission can also be considered under MEAN/MERN Mavericks πŸ˜„)

Video Explainer of My Project

Language Used

TypeScript / Node.js

Link to Code

The project consists of three repositories

  1. Poll API
  2. Socket Service
  3. Frontend

GitHub logo ashiqsultan / pollboard-backend

Poll board is a simple poll app build using Redis. This repo is the API service for the application

Poll Board Real-time Poll app

The application lets users to create polls and share it with others. Once users cast their vote they can view the results in real-time i.e the poll result graph in Frontend would get updated real-time for all users as votes are being casted.

Architecture Diagram

Architecture Diagram

Homepage

Homepage

Vote page

App Screenshot

Create new Poll page

Create new Poll page

TODO Overview video (Optional)

Here's a short video that explains the project and how it uses Redis:

IMAGE ALT TEXT HERE

How it works

The application consists of three repositories

  1. Poll API Service (Current Repo).
  2. Socket service
  3. Frontend

Poll API Service

The API server is responsible for all CRUD operations on Poll entity.

Socket Service

The socket service uses Socket.IO . All users are connect to a socket room. The room name is the poll id they are answering for.

Frontend

As you guessed it is the frontend application build with React as a SPA. It…

Additional Resources / Info

I have always wanted to work with Redis for a long time and thanks to this Hackathon as it served as the best time to learn and build a small project using Redis. I spent all the weekends of this month to plan the application. I realized that Redis stack provides a lot of modules so I need pick the right one for my needs. Thanks to the detailed docs and resources by the Redis team. Also a special thanks for the RedisInsight team its such a useful tool for Redis beginners I found it similar to the MongoDB Compass.

Homepage

Homepage

Vote page

App Screenshot

Create new Poll page

Create new Poll page


πŸ’– πŸ’ͺ πŸ™… 🚩
ashiqsultan
Mohamed Ashiq Sultan

Posted on August 27, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related