Building bedav.org

First thing’s first, this is not a tutorial to build a website. I will just be talking about the technologies, platforms and libraries I’ve used and why I chose them.

What is bedav.org?

bedav.org is a website I’ve been working on for around 3 weeks now. It shows the availability of Hospital Beds for covid patients in hospitals across Bangalore.

The hospitals can be sorted by their distance from your location, or based on the availability of beds in the general ward, High Dependency Unit, Intensive Care Unit or Ventilators. You can also filter between Private Hospitals, Private Medical Colleges, Government Hospitals, Government Medical Colleges and Covid Care Centers. The address, phone number and website for each hospital are also available on the website. The website is not available for all the hospitals.

You can also search for hospitals, and soon you will be able to search for localities within the cities and the hospitals in a certain area.

Even though it is currently only in Bangalore, I’m looking to expand quickly to other cities.

The Front End

React was the framework (or rather a library) that I used to build it. Why not Vue or Angular? Well, I already knew React, wanted more experience working with it and the more I do, the more I fall in love with it. I haven’t worked with Vue or Angular although I have looked into example applications and their documentation. And I like the React way of thinking i.e. as individual reusable and isolated components. I liked the idea of not having separate files for CSS, HTML and JavaScript, and having all the code related to a certain part of the application in a single place.

Now, it’s pretty clear that React is not a full-fledged framework and at some point, you will need to use other libraries.

For routing the obvious choice was react-router. However, the problem with react-router is that it unmounts the component every time the page is routed to another URL. For example, when a user clicks on a hospital and goes back the data is refetched as the hospitals table component is unmounted and mounted again. To fix this I made use of another library called react-live-route (along with react-router) which only hides the component rather than unmounting it. Using react-live-route I was able to reduce the number of round trips to the server and make the user experience better and faster as it preserves the state the previous page was in, including the scroll.

For state management, redux is again the most obvious choice but I made good with the built in Context API and hooks as they were more than enough for this project.

I created a GraphQL API in the backend (scroll down for more info) that serves the data to the front end. To query and store this data I used Relay (a GraphQL Client Library for React by Facebook). Why not Apollo? I just wanted to explore Relay.

I made use of the Google Maps Javascript SDK using react-google-maps to integrate Google Maps into the website to show the hospitals location. react-google-maps made the integration really easy.

For styling, I decided to use styled-components as I like the idea of having all the code related to a component in a single file/area and you don’t have to spend time thinking about class/id names!

The Back End

I used Python with Django to make the backend. There wasn’t really a decision to make as I’m comfortable with python and Django and I haven’t yet looked into Express and Node.

One hiccup I faced along the way was the lack of extensibility of the Django ORM. To efficiently select the latest data I had to use SQL Inner Joins with Subqueries which are not supported by the Django ORM. I tried other methods using the ORM, however, all of them required a lot more than one request to the Database. I’ve heard that explicit Inner Joins and Subqueries are possible with SQLAlchemy and I will look into it.

Initially, I was using MySQL as the database and later on switched to PostgreSQL. I did this as I had to use Geodjango which made use of the PostGIS extension to calculate the distance between the Users location and the hospital when querying for the data. If I used MySQL, the distance would’ve had to be calculated on the Server side rather than Database, making it much slower and a lot less efficient. The hospitals’ location is stored as a Point geometry object in PostgreSQL which made it possible to calculate the distance using the <-> operator of PostGIS.

The GraphQL API was built using graphene, a python implementation of GraphQL.

The Data

The data for Bangalore is collected from the BBMP (the cities municipality) website. I wrote a script to scrape the website using requests and Beautiful Soup 4 and upload the data to the database.

I also wrote scripts to make use of Google Maps’ Geocoding and Places API to get the hospitals coordinates, address, phone number and website.

Production and Deployment

The Django Server is deployed using Gunicorn and Ngninx. I followed this great tutorial on Digital Ocean Community to get started and later on looked into the Nginx documentation and made some changes like enabling gzip compression and HTTP2.

The website is currently deployed on the Google Cloud Platform on a single Debian VM (I actually thought it was Ubuntu until after a few hours through the setup).

The HTTPS routing, PostgreSQL and Nginx server are all on the same VM. I know it’s not the best option, but expanding is definitely not cheap lol.

If the municipality website has the data already displayed, why create another one doing the same thing?

In addition to just showing you the available beds, you can sort and filter through the hospitals, directly get directions and contact info from the website and sort by distance so you can find the hospital closest to you. And obviously a better UI, specially on a mobile device.

What’s Next?

Expanding to other cities, providing an overview for entire cities and creating an API so anyone can use the data to analyze, explore or use it in any way they like.

I am also planning on open sourcing the front end project on GitHub, so that anyone and everyone can contribute to it. For now, if you’re interested in connecting or contributing, drop me a mail at shreyas.sreenivasa@gmail.com. Any sort of feedback would also be appreciated :)

Oh and I’m definitely adding a dark mode.

Update: The website now has information on hospitals in Pune, Maharashtra