FastAPI is a Python web framework that is well-known for its speed and performance. In this article, we’ll be building a real-time voting system using FastAPI and Next.js. The application will allow users to create polls and vote on them in real-time, and we’ll use Tailwind CSS for styling and SqlModel for database interactions.
But first, if you prefer, you can watch this video that I have made on the same topic as the video version of this article.
Let’s see step by step how I created this real-time polling application
Setting up the Backend
We’ll start by creating a brand new FastAPI project and setting up our database connection. We’ll then create the required models for this application using SqlModel, which combines the power of Pydantic and SQLAlchemy under the hood. Here are all the models we need.\
Poll model to store all the polls.
Options model that holds selectable answers to those polls.
Vote model to save all votes.
Besides these models, there are few REST endpoints exposed by the application.
A GET endpoint to get all the polls created by current user
Another GET endpoint to fetch a poll by id.
A DELETE endpoint to delete a poll
A POST endpoint to vote for a specific option
Adding websocket endpoint
Handling websocket connection is very easy in FastAPI. Here is the code for only websocket endpoint that my real-time polling application exposes.
First, there is a path paramter that represents the id of the poll that the user is currently on. That mean the backend should send any updates to this poll in real-time to the incoming connection. Then there is a simple database query to check if a question with that id actually exists. Otherwise, there would be dangling connections in the memory which is not what you would want.
After that, simply accept that connection and handover the connection to the manger.
The connection manger, is a separate class which is created to keep all the connection logic in the single place. Here is how that class looks like.
It just keep track of all the questions and their connected clients in a dictionary where keys are the ids of polls and value is the set of all the WebSocket connections. It’s better keep connections in a set rather than list to avoid duplicate entries and liner delete operation.
Sending real-time updates
Now whenever a new vote is created for a poll, updated information is posted to all the connected clients for that particular poll to update the UI in real-time.
Setting up the Frontend
We’ll use Next.js for the frontend of our application. We’ll create a simple UI where users can create polls and vote on them. We’ll use Tailwind CSS to styling.
We’ll create three main pages for this application:
- Polls home page to display all polls created by the current user.
- Polls create page.
- Polls vote page to vote on a particular poll.
These pages simply fetch the data they are interested in via REST endpoints and display it on the UI.
Polls details page is worth looking at. This page is rendered at q/[qid] dynamic route. Here qid is the id of the post. This id will be used to fetch the data for the current poll and display it.
Once we’ve the poll id, we are ready to open the websocket connection to the backend. Use the id from params connect to the websocket endpoint. Attach an event listener to to the websocket instance to update the state on the frontend when a new vote is casted on the poll.
The application will allow users to create polls and vote on them in real-time, and we’ll use Tailwind CSS for styling and SqlModel for database interactions. With FastAPI’s WebSocket functionality, we’ll ensure that all connected clients receive real-time updates when a poll is updated. This tutorial is perfect for developers looking to learn more about FastAPI and real-time communication in web development.
Again, if you like, you can watch this video to get more details and see the demo application.
FastAPI Websockets | Create real-time polling app with FastAPI | abdadeel — YouTube
Link to GitHub repo 👇
mabdullahadeel/fast-vote: A real-time voting app using FastAPI
