Inspiration

Along with the obvious health implications of the COVID-19 pandemic, the virus brought with it other issues such as job loss, financial instability, loneliness in isolation, and lessened interaction with people. Noticing the adverse effects of the COVID-19 pandemic, I thought it was essential that there exists a community-centric platform where people can start an open discussion, post uplifting content, seek help with regards to COVID-19 and most importantly stay updated with latest developments, guidelines, and instructions.

What it does

My main intention to create this website was to develop an interconnected community for the people of my country to communicate on, stay updated with reliable information, and create a well-informed community in order to battle COVID-19. I designed the website such that it serves as a model for other localized communities to use.

The website is broadly divided into two tabs- "Dashboard" and "Discussion", using a user-friendly UI design.

In the Dashboard tab, users have easy access to live data (updated every hour automatically) presenting the current case summary, historic case summary, charts, and reliable information from the Ministry of Health in order to address the issue of misinformation. In the Discussion tab, people can voice out their doubts, questions, or concerns regarding COVID-19 and the more important part is that they should be heard by people belonging to the same community.

Let's say someone wants to know about the testing procedure and how the process works, they can just ask in the discussion page and someone who has gone through the process can brief them on it. Perhaps, a local organization is looking for volunteers or donations, they can post it on this platform for visibility. There could be a scenario where an elderly couple is in need of medicines but can't leave their home due to a high risk of infection, they can just post it on the discussion page and a good Samaritan could help them out!

Overall, using such a community-based website:

  1. Citizens can stay informed about COVID-19 developments at a community level and reliable information that matter to them the most since the website only includes information about their community.
  2. People can ask for help, advice, suggestions, volunteers, donations from a community that is more likely to offer help.

How I built it

I used the create-react-app and Javascript to build the entire interface along with Bootstrap-react for the front end. The data is pulled from reliable APIs such as the disease.sh, which gets it information from the JHU dataset and WHO dataset. I also used the React Router to route between the two tabs on the webpage.

Challenges I ran into

The major task for me was to find a reliable dataset that I can use to display the live stats on my website. Another trivial but important challenge I faced was that the numeric data isn't formatted with a comma (,) between the thousands. For example, the data had a value 109272 but I wanted it to be displayed as 109,272 for easy reading. I used the count-up library to solve this issue. Another challenge was to design my code such that the page rendered only after I got a response from the API call.

Accomplishments that I'm proud of

I'm proud that I was able to make my website super user-friendly using a UI that can be easily navigated and used. I'm also super proud that the website is responsive to all screen sizes and adjusts automatically.

What I learned

All of my coding experience before this project was solely python and C++, but for this project, I pushed myself and learned the process of web development and how to use the React framework to easily create functional web apps that are fast and effective. I also learned how to make a website responsive to screen sizes and include accessibility features.

What's next for COVID-19 Bahrain Tracker and Discussion

Perhaps in the future, the website can collaborate with local community relief organizations and provide a direct messaging feature so that they contacted directly in case of emergency help. One of the important things I have kept in mind while developing this web application is that it serves as a model for other local communities to start their own localized COVID-19 tracker and discussion web pages.

Built With

Share this project:

Updates