agallio / ina-covid-bed Goto Github PK
View Code? Open in Web Editor NEWCovid bed availability for all provinces in Indonesia
Covid bed availability for all provinces in Indonesia
Add API rate limiter.
We can use the Next.js example that use lru-cache for our reference.
Only show the available hospitals on the map page
Fix dark mode contrast on href links & buttons.
Make the links and buttons more contrast to the users. Use WCAG color contrast tool to check the contrast.
Show the distance between user's location and the hospital location in the HospitalCard
.
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.
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.
All pages or components that use 100vh height should adapt to Safari WebKit implementation of full-height page.
See it here
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:
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.
Add handler when the API is timeout.
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).
When using geo location to define province, show alternatives of nearby provinces.
Reasons:
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.
Map doesn't show any hospitals in first render if data is served from cache (swr).
Map shows hospitals in that province.
Self-explanatory. Add dark mode to all pages.
Use the chakra-ui dark mode feature. Add a toggle button in the upper right of the page.
Add basic SEO such as opengraph image, title, description. So when users share the link it shows some useful information.
Maybe we can use next-seo or we can add them natively with Next.js <Head>
component.
Add last updated info in hospital card.
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:
updated_at_minutes
> 60, shows Diperbarui x jam yang lalu
updated_at_minutes
<= 60, shows Diperbarui x menit yang lalu
Add back to homepage button from map page.
Get user location from the browser, and then calculate the distance from the user's location to every available hospital.
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);
}
/[province]
page with geo infoOptimize user current location marker on map.
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.
Getting Error on params prov=jawa_timur, jawa_barat, jawa_tengah :
An error occurred with your deployment
FUNCTION_INVOCATION_TIMEOUT
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.
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.
You may add the social media button to share the entire page or just one of the hospitals...
It's just an idea... ๐
Share Button for:
Add dark mode to the hospital list bottom sheet in map page.
Use chakra-ui dark mode.
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.
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.
The data is inconsistent. Some of the hospital has a false address and details.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.