agallio / ina-covid-bed Goto Github PK

Covid bed availability for all provinces in Indonesia

JavaScript 95.49% CSS 4.42% Shell 0.09%

covid-19

ina-covid-bed's Introduction

ina-covid-bed

This project is no longer maintained and has been made publicly accessible in an archived state.

In the early days of the COVID-19 pandemic, I stumbled upon a way to scrape bed availability data from a government website and decided to share my findings on Twitter. My tweet quickly gained traction, receiving many retweets and likes.

One of the people who saw my tweet was @masbagal, who was inspired to create a web app that would make this information more easily accessible to the public. @yogiw joined the project and added a map page to the web app, while @pveyes implemented geolocation support.

@irsyaadbp stepped in and purchased the domain bed.ina-covid.com, which was then assigned to the web app. @galihlprakoso helped us to make the site more discoverable with the best SEO.

As more and more collaborators joined the project, new ideas and bug fixes were implemented, and the project eventually evolved into a real API endpoint that served not just to supply the information to users but also as an example for those learning to code.

Thanks to the help from @memetj_, the project eventually reached the hands of influencers like @jejouw and started to gain even more visibility.

As the number of COVID-19 cases began to decline in 2022, many hospitals began to have more available beds, and the project started to become less relevant. Now in 2023, the project has been archived, but it will always be available for others to see, learn from, and build upon in the future.

I am grateful to everyone who contributed to this project and helped to make it a success. Thank you!

All Contributors & Collaborators
@masbagal	@yogiw
@pveyes	@irsyaadbp
@galihlprakoso	@memetj_
@kelilipan	@beliga44
@syauqy	@dorman99
@ekafyi	@codingki

Inspiration

ina-covid-bed's People

Contributors

Stargazers

Watchers

ina-covid-bed's Issues

Add SEO

Description

Add basic SEO such as opengraph image, title, description. So when users share the link it shows some useful information.

Implementation Model

Maybe we can use next-seo or we can add them natively with Next.js <Head> component.

Small margin between hospital name search field and nearest provinces

Description

Expected Behaviour

Add more margin.

Add dark mode

Description

Self-explanatory. Add dark mode to all pages.

Implementation Model

Use the chakra-ui dark mode feature. Add a toggle button in the upper right of the page.

Optimize user current location marker on map

Description

Optimize user current location marker on map.

Implementation Model

If there's no user location marker, then add it. If users click the location button again, remove the old marker and add a new marker to the newest location.

Re-use "search" component from main page to reduce bundle size

Add the nearest province component to the map page

Description

Add the nearest province component to the map page.

Implementation Model

Make the component reusable.

Show the distance between user's location and the hospital location

Description

Show the distance between user's location and the hospital location in the HospitalCard.

Implementation Model

I don't have any design iteration for this. It's up to you. The important thing is that the user can understand how far the hospital is from its location.

Map only shows the available hospitals

Description

Only show the available hospitals on the map page

Safari iOS full height overlap

Description

On Safari iOS the 100vh height is not rendered correctly. The page should be a full browser height with no vertical scroll, but on Safari it doesn't.

Expected Behaviour

All pages or components that use 100vh height should adapt to Safari WebKit implementation of full-height page.

See it here

Add info text when API doesn't response after 10s

Description

Add info text when API doesn't yet response after 10s. Because right now, API response is being cache for only 5 minutes. When the cache expires, users have to get the data directly from the API endpoint that scrape SIRANAP page. Because of the large dataset these provinces listed below is very slow to scrape:

jawa_barat: 9s-11s
banten: 8s-12s
jawa_tengah: 10s-15s
jawa_timur: 10s-12s

Without the info text, users doesn't know that this loading gonna resolve at the end.

Implementation Model

Add info text in the loading screen, at the bottom of the loading animation. The info text would be something like "Pengambilan data memerlukan waktu yang lebih lama. Mohon tunggu" or if you have any idea on how to say that we're needed more time to fetch data, just comment.

Add last updated info in hospital card

Description

Add last updated info in hospital card.

Implementation Model

The API returns updated_at_minutes that can be used. Its value is the hospital's last updated information for the availability of the bed. Its value is in minutes. So it should be displayed as:

If updated_at_minutes > 60, shows Diperbarui x jam yang lalu
If updated_at_minutes <= 60, shows Diperbarui x menit yang lalu

Convert UI to Chakra

#17

API is very slow

I know the origin application by Kemenkes was very slow.

But when try to improve the experience from the existing applications, it's better to not just improve the UI but also improve the speed.

Some of recommendation:

Cache the API for 5-10 minute
Serve static data and add a cronjob to update the latest static data in every 5-10 minutes

5-10 minutes is just an estimation, if you afraid with the data validity, just start with a very short time, if you think okay, you can increase the cache expiration along the way.

Refine province when using geo location

Description

When using geo location to define province, show alternatives of nearby provinces.

Reasons:

Geo location is not accurate
People are living near province border
- Example case 1: they maybe easier to go to Tangerang rather than Jakarta
- Example case 2: hospital in Jogja ran out of capacity, they search in Central Java (Solo or Klaten)

Implementation Model

Show 2 alternatives nearby selected geo province
When navigating to alternative, keep geo data to be able to sort nearest hospital

Add API timeout handler

Description

Add handler when the API is timeout.

Expected Behaviour

Vercel only limits the network request time to 10s, otherwise it will stop and returns gateway timeout. Handle it with refresh button or something that users know that they must refresh the page. Or make the API caching expires longer (but the data accuracy is decreasing).

Add get user location & sort the data from the nearest location

Description

Get user location from the browser, and then calculate the distance from the user's location to every available hospital.

Implementation Model

I think it's more easy to implement at the list page first, and then after that we can replicate the behavior to the map page. We can use haversine formula to calculate the distance.

function deg2rad(deg: number) {
  return deg * (Math.PI / 180);
}

export function getDistanceFromLatLonInKm(lat1: number, lon1: number, lat2: number, lon2: number) {
  const R = 6371; // Radius of the earth in km
  const dLat = deg2rad(lat2 - lat1); // deg2rad below
  const dLon = deg2rad(lon2 - lon1);
  const a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  const d = R * c; // Distance in km
  return d.toFixed(2);
}

Tasks

Add button to get current location
Clicking the button will get the nearest province
Redirect to /[province] page with geo info
Update data to sort by geo info if any

Fix dark mode contrast on href links & buttons

Description

Fix dark mode contrast on href links & buttons.

Expected Behaviour

Make the links and buttons more contrast to the users. Use WCAG color contrast tool to check the contrast.

Map doesn't show any hospitals in first render if data is served from cache

Description

Map doesn't show any hospitals in first render if data is served from cache (swr).

Expected Behaviour

Map shows hospitals in that province.

Data is inconsistent

Description

The data is inconsistent. Some of the hospital has a false address and details.

Add API rate limiter

Description

Add API rate limiter.

Implementation Model

We can use the Next.js example that use lru-cache for our reference.

Add dark mode to bottom sheet in map page

Description

Add dark mode to the hospital list bottom sheet in map page.

Implementation Model

Use chakra-ui dark mode.

Social Media Share

Description

You may add the social media button to share the entire page or just one of the hospitals...
It's just an idea... 😅

Implementation Model

Tasks

Share Button for:

[ Instagram ] https://instagram.com
[ Facebook ] https://facebook.com
[ Twitter ] https://twitter.com

Make links in mapbox feature box (hospital info) more prominent

Description

Currently the hotline link and the detail (Siranap) link are styled like the surrounding text. Users may not be aware these are clickable.

Proposed feature: make the links more prominent so users are aware of the possible actions.

Implementation Model

Modify the markup and either inline the new CSS styles or add them to global CSS

Happy to submit PR if this is considered necessary. Other UI suggestions welcome.

Some Province can't reload

Description

Getting Error on params prov=jawa_timur, jawa_barat, jawa_tengah :

An error occurred with your deployment

FUNCTION_INVOCATION_TIMEOUT

Display the hospital data even when the bed capacity is full

Description

Keep the hospital data even when the bed capacity is full, but handle the rendered card differently. Let's modify the HospitalCard that when the bed is full, it has some info like "Kamar IGD Penuh" or other words similar to that. Give it some red border or something, but with less visibility so the the bed available still being the card that's highlighted to the users. I'll sort the data from the most available to none, if needed.

agallio / ina-covid-bed Goto Github PK

ina-covid-bed's Introduction

ina-covid-bed

Inspiration

ina-covid-bed's People

Contributors

Stargazers

Watchers

Forkers

ina-covid-bed's Issues

Description

Implementation Model

Description

Expected Behaviour

Description

Implementation Model

Description

Implementation Model

Description

Implementation Model

Description

Implementation Model

Description

Description

Expected Behaviour

Description

Implementation Model

Description

Implementation Model

Description

Implementation Model

Description

Expected Behaviour

Description

Implementation Model

Tasks

Description

Expected Behaviour

Description

Expected Behaviour

Description

Description

Implementation Model

Description

Implementation Model

Description

Implementation Model

Tasks

Description

Implementation Model

Description

Description

Overview

Current Tasks

Description

Recommend Projects

Recommend Topics

Recommend Org