DEV Community

Mohamed Ashiq Sultan
Mohamed Ashiq Sultan

Posted on

11 1

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


Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly — using the tools and languages you already love!

Learn More

Top comments (0)

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Dive into this informative piece, backed by our vibrant DEV Community

Whether you’re a novice or a pro, your perspective enriches our collective insight.

A simple “thank you” can lift someone’s spirits—share your gratitude in the comments!

On DEV, the power of shared knowledge paves a smoother path and tightens our community ties. Found value here? A quick thanks to the author makes a big impact.

Okay