Giter Site home page Giter Site logo

kawalcovid19 / wargabantuwarga.com Goto Github PK

View Code? Open in Web Editor NEW
553.0 13.0 166.0 5.49 MB

Inisiatif warga untuk berbagi informasi seputar fasilitas kesehatan dan alat kesehatan untuk COVID-19.

Home Page: https://www.wargabantuwarga.com

License: MIT License

JavaScript 6.86% TypeScript 88.88% CSS 0.45% Shell 0.03% HTML 3.79%
covid-19 website nextjs react hacktoberfest tailwindcss react-testing-library cypress

wargabantuwarga.com's Introduction

Warga Bantu Warga

All Contributors

codecov CI Deploy Web Perf Check

A society initiative to circulate information about health facilities and devices for COVID-19.

Purpose, Principles, and Guidelines

The purpose of this website is to republish publicly accessible Google Docs to be more mobile-friendly and performant.

Why using Google Docs?

We are using Google Docs so that our content contributors can collaborate easily without the hassle of conventional CMSes.

Principles

What we're striving for:

✅ Performance

Our website must be high-performant because our audience is spread across Indonesia with varying types of devices and network speed. A good measurement of it is Google's Core Web Vitals.

✅ Accessibility

Our website must be accessible so that we can reach more users and help more people.

✅ Up-to-date Information

Any information posted on our website must be up-to-date to the latest version that our content editors published. We can tolerate delays to a certain degree for the sake of web performance, but it should be limited to less than an hour.

✅ Iterative, Incremental Changes

Software development is complex, cognitive work. The simpler we can make something, then generally the easier it is to do. Similarly, the less amount of moving parts a software component has, the less prone it is to errors, and the less maintenance burden it gives us.

One of the simplest ways to reduce complexity is to reduce the scope. We can often postpone the less valuable parts of a large issue and do them later in order to get the most valuable parts into our user's hands faster.

What we're going against:

❌ Counter-productive Cosmetics

We can't afford to hurt web performance or to provide outdated information just for the sake of the beauty of the website.

❌ Expensive Functionalities

We must carefully consider any additional client-side libraries that we include on the website. Unless its benefits outweigh the trade-off that we have to pay, we should avoid adding the functionality. Even if it is proven to be beneficial, we should strive to implement it in the best possible way. An excellent example of it is Google Analytics.

❌ Unmeasured Improvements

For any improvements on the website, we should continuously measure its impact on the Core Web Vitals. If proven to hurt the metrics, we should revert the changes and find another way to implement them without degrading the performance.

Testing Guidelines

In general, these are three guidelines that we need to pay attention to:

  1. Query priorities
  2. Testing appearance and disappearance
  3. Opting in for interactions instead of events

Please ensure that all queries and assertions in your test files comply with those testing guidelines.

Getting Started

To get started running the project locally, please follow the steps below.

First, clone the repository.

git clone https://github.com/kawalcovid19/wargabantuwarga.com.git

Then, install dependencies and fetch data to your local machine. Note that we use Yarn, not npm.

cd wargabantuwarga.com
yarn install
yarn mirror-box

Finally, run the development server.

yarn dev

Open http://localhost:3000 with your browser to see the result.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Frequently Used Tools

Supporters

Special thanks goes to our supporters.

Netlify GitBook Logo Cypress

Contributing

See our contribution guidelines in these languages:

When contributing to our project, please use English when communicating with other people in issues and/or pull requests. Click here to read why. (Bahasa Indonesia)

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Zain Fathoni

💻 📆 📖 👀 ️️️️♿️ 🤔 🚧 🧑‍🏫 🛡️ 🔧 🌍

Resi Respati

💻 🎨 ️️️️♿️ 📖 🤔 🚧 🧑‍🏫 📆 👀 🛡️ 🔧 🌍

ekamuktia

🐛 💻 🤔 🚧 👀

Eka

💻 🎨 🤔 🚧 👀

Irfan Maulana

🐛 💻 🤔 🚇 🚧 🧑‍🏫 👀

Aditya Purwa

💻 🤔 🚇 🚧 🔧

Hani Husamuddin

💻

nibraswastaken

💻 🚇 🔧 🤔

Kalwabed Rizki

📖 🌍 💻

ihsanrabb

💻

Gilbert Emerson

⚠️

Muhammad Irwan Andriawan

📖 🤔 🐛

Tjandra Darmo

📖

Cristopher

💻 📖

Faiz Azmi Rekatama

💻 🔧

ardiwilda

🖋

Kevin Mingtarja

💻

Rengga Prakoso Nugroho

🖋

Fatih Kalifa

📖 🎨 👀 💻

Bara E. Brahmantika

🤔 🚇 📆

Kukuh Sulistyo

💻

ekiriandra-seo

🤔

Syauqy Nurul Aziz

💻 📖

Muhammad Fauzan

📖 💻 🤔

Hendra Agil Syaputra

💻

Burhan Ahmed

💻

Mukhlis

📖

Kristoporus Nathan Wilianto

💻

Abui

💻

ramarahmanda

🤔 💻

Mohammad Hamzehei

💻

Doni Rubiagatra

⚠️

Umar Hadi Siswanto

📖

Widi-ps

🐛

Ryan Adhi

💻 📖

Bakhtiar Amaludin

💻 🐛

Adam Akbar

💻 🛡️

IGN Bagus Dimas W.

💡 🔣 📖

Nasrul Gunawan

💻

Yusuf

💻

Nur Fadillah Fajar

💻

R.M. Reza

💻

Adinda Praditya

🛡️ 📖

Albarra Naufala Erdanto

🐛 💻

Adib Firman

⚠️

Rangga Putra Pertama

🔧

Anvaqta Tangguh Wisesa

💻

Afif Alfiano

⚠️

M. Zakiyuddin Munziri

💻

FortressValkyrie

💻 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

wargabantuwarga.com's People

Contributors

abui-am avatar adityapurwa avatar allcontributors[bot] avatar apraditya avatar ardiwilda avatar asaadam avatar dekwahdimas avatar dependabot[bot] avatar ekafyi avatar ekamuktia avatar emer7 avatar faizrktm avatar fzn0x avatar grikomsn avatar hanihusam avatar ihsanrabb avatar irfan-maulana-tkp avatar kalwabed avatar kevinmingtarja avatar kodiakhq[bot] avatar mazipan avatar maziyank avatar namchee avatar nkristoporus avatar resir014 avatar ryanadhi avatar snyk-bot avatar syauqy avatar tjandrad avatar zainfathoni avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wargabantuwarga.com's Issues

Getting a blank page on the first page load

Description

In the iOS Safari browser, I keep getting a blank page on the first load, usually right after a deployment when the server cache is refreshed after fetching new data from the Google Docs.

The page is only rendered after refreshing the page.

Expected Behaviour

The page should have been rendered ok the first load of the page, without requiring any refresh.

Additional Information

A blank page in the browser usually indicates an unhandled runtime error.

We might need to add a Sentry integration to gather more information about the bug. KawalCOVID19 has a Sentry License to integrate with.

Serve database structure from on the wargabantuwarga.com static files infrastructure instead of merely linking to the Google Spreadsheets files

Description

Currently, the data that we presented on the wargabantuwarga.com is fetched directly from Google Docs and Google Suite infrastructure, which might limit the performance and access when accessed nationwide.

Implementation Model

Perhaps use cache feature, to allow us to fetch the cached data from our server, of which we call the Google Suite server only once per 15 minutes. That way we don't have to call the GSuite every time the user is visiting the web.

Current Tasks

Migrate the home page from Google Docs to Netlify CMS

Overview

Based on the Website Improvements #23 discussion, we are planning to migrate our Google Docs-based CMS into a proper Headless CMS. This would provide more granular controls over the HTML structure that we're rendering on the page that allows us to style the website flexibly.

Implementation Model

  • Use Tina Cloud as the WYSIWYG headless CMS and store the content into Markdown files within this repository.

Current Tasks

SEO Strategy To Reach More People

No Aspect From To Reason
1 Title Tag Warga Bantu Warga Warga Bantu Warga | Informasi Faskes   & Alkes Untuk Covid 19 It provides more clarity and comply   widely known SEO standards
2 Meta Description Inisiatif warga untuk berbagi informasi seputar fasilitas   kesehatan dan alat kesehatan untuk COVID-19 Inisiatif warga untuk berbagi informasi seputar fasilitas   kesehatan & alat kesehatan untu COVID-19. WargaBantuWarga memudahkan   publik mencari & mengakses informasi Better appearance and description on   Google Search
3 H1 pada image Saat ini image tidak mengandung H1 Beri H1 pada image di bagian atas Every page must have 1 h1 and contain target keyword related   to the page
4 Ubah H1 Menjadi H3 H1: Daftar Isi h3: Daftar Isi Better structure (from Google point of view)
5 Ubah H1 Menjadi H2 h1: Situs Informasi Kontak Penanganan COVID-19: Pemerintah dan   Inisiatif Warga h2: Situs Informasi Kontak Penanganan COVID-19: Pemerintah dan   Inisiatif Warga Better structure (from Google point of view)
6 Ubah H1 Menjadi H3 h1: Daftar Kontak Fasilitas Alat Kesehatan per Provinsi (   Lihat selengkapnya di sini ) h3: Daftar Kontak Fasilitas Alat Kesehatan per Provinsi (   Lihat selengkapnya di sini ) Better structure (from Google point of view)
7 Ubah H1 Menjadi H3 h1: Isolasi Mandiri: Apa yang harus dilakukan? h3: Isolasi Mandiri: Apa yang harus dilakukan? Better structure (from Google point of view)
8 Ubah H1 Menjadi H3 h1: Laman Edukasi COVID-19 h3: Laman Edukasi COVID-19 Better structure (from Google point of view)
9 Ubah H1 Menjadi H3 h1: Donasi dan Penggalangan Dana h3: Donasi dan Penggalangan Dana Better structure (from Google point of view)
10 Ubah H1 Menjadi p atau div Ada space kosong dengan menggunakan h1 ubah menjadi p atau div Empty space better use p or div (as long as not use heading no   problem)
11 OpenGraph Title Warga Bantu Warga Warga Bantu Warga | Informasi Faskes & Alkes Untuk Covid   19 Better description on Social Media and when user share on   WhatsApp
12 OpenGraph Description Inisiatif warga untuk berbagi informasi seputar fasilitas   kesehatan dan alat kesehatan untuk COVID-19 Inisiatif warga untuk berbagi informasi seputar fasilitas   kesehatan & alat kesehatan untu COVID-19. WargaBantuWarga memudahkan   publik mencari & mengakses informasi Better description on Social Media and when user share on   WhatsApp
13. Give rel="nofollow" to all external links

Task List

Add minor mobile UI improvement in province pages

Description

Add minor UI improvement in province pages that enhances readability, especially in mobile/small screen views.

  1. update list headings font weight from 500 (font-medium) to 600 (font-semibold)
  2. remove "pada" in "Terverifikasi pada" (detail below)
    • 2b. switch icon order to left in mobile views
  3. align location icons to top

Rationale for removing "pada" in "Terverifikasi pada" copy text:

  • datetime is not always present
  • if present, the text still makes sense "Terverifikasi 17 Juli 2021"
  • more concise

(1) list heading font weight example

www_wargabantuwarga_com_provinces_dkijakarta-1_Moto_G4___2__png_and_www_wargabantuwarga_com_provinces_dkijakarta-1_Moto_G4___1__png

(2) - (3) example

Screen Shot 2021-07-17 at 15 25 31

Related to #68

Implementation Model

Update Tailwind CSS classes, add custom styles if needed.

Ready to provide PR if approved.

Explain why we're using English in GitHub Issues & PRs

The reasons we're using English in GitHub Issues & PRs:

  1. It's more natural for software engineers to communicate in English because it involves many technical terms in English. Trying to translate them into Bahasa Indonesia posing a risk of miscommunication, while keeping them in English requires us to do a lot of italic formatting, according to PUEBI.
  2. It accustoms the contributors, which are mostly Indonesian, to communicate in English. It is important to increase our English reading and writing skills because the vast majority of the global open-source communities are using Engish as the main language.
  3. It makes this project easier to be recognised globally. So if we need to get more support from the global communities, they could easily understand what we are doing and help us out with their access and competence. e.g., providing us free credits for their services, advocating us to global leaders, or contributing directly to our codebase.

Add reporting button, to report any information that no longer relevant, or has poor quality.

Description

As a user who is searching for relevant and high-quality information related to Covid-19, I want the wargabantuwarga to display the most accurate information only so that I don't waste time when trying to get in touch and use the information only to find out that the information is outdated or misleading.

Acceptance Criteria

Given that a user who has information related to inaccuracy and poor quality of the information provided by Wargabantuwarga

When users found poor information, they can click on prominent laporkan data bermasalah on every FAQ page.

Then the user will be redirected to: https://docs.google.com/forms/d/e/1FAIpQLSeDdZLMD9RTfOiKMItNb8542KAO5w3x9O2ZFQmNyff1rYRZvQ/viewform

Require A QA To Test?

Yes

Implementation Model

There's an existing implementation already for the ContactPage.
Please refer to #138 as a reference.

Tasks

  • Create design for laporkan button on each FAQ page
  • ...
  • ...

Implement top navigation and breadcrumbs

Description

Implement top navigation, breadcrumbs and page header to create a responsive, mobile-first design.

Implementation Model

We'll use UI components from Tailwind UI

Tasks

  • Application shell
  • Page headers (with breadcrumbs
  • Ensure all components are responsive (mobile-first)

Build a mobile-first responsive design for Warga Bantu Warga

Overview

Description

As a user who uses the mobile browser to visit the website I want all important information on the web to be mobile friendly so I can easily be accessing it using my relatively small mobile screen size, per instruction here: https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

Acceptance Criteria

“Given a user that mainly browses using a mobile browser, when I visited the WargaBantuWarga website and click on google sheet link then the information is displayed in a mobile-friendly way that at least scored 90 on the accessibility score at web.dev audit”

See guidelines here: https://web.dev/accessible/ and https://tailwindcss.com/docs/responsive-design

Also, please use the following resources to ensure easier component building and design consistency:

Require A QA To Test?

yes

Requirement

List all requirements that necessary to be detailed in the ticket

  • Create the design using mobile-first responsive design principles
  • Enable text compression and make sure that font is visible during load
  • Make sure all button or interactive element size is at least 48x48px

Current tasks

Add Sentry Integration

Description

We need a way to capture runtime errors like #21.

Implementation Model

KawalCOVID19 has a Sentry license that we can integrate with. Please let @zainfathoni know if you want to work on this issue.

Please bear in mind that the integration should be done while minimizing its impact on the Core Web Vitals.

Tasks

  • Prepare the Sentry project
  • Implement the integration #42
  • Ensure that there's no significant performance degradation in the Deployment Previews on Netlify

SEO Improvement for Province & Contact Pages

Description

Improve SEO strategy for province & contact page for better searchability

Implementation Model

  • Use Next SEO to set page meta & open graph data
  • Deciding the rule/pattern for each page meta/open graph title & description
    For example:
    On province page, the title use "Informasi Faskes & Alkes untuk COVID-19 di Provinsi (Nama Provinsi)" rule
    On contact page, with "(Penyedia) - (Keterangan) di (Lokasi)" rule e.g. "Ambulans rumah sakit advent - Ambulans di Bandar Lampung"
    Still have no idea for description part. Need suggestion from SEO expert, also need to consider character length for both title & description.
  • Change slug for contact page
    Currently there's no id on each contact data, and the slug is based on row order.
    I'm not sure how the data is updated, but if a row is removed on the source sheet and a user already shared the contact page url, the url may link to different contact from what the user intended.
    Using slug from contact penyedia name can be a better option, as it's more SEO friendly too. But, if this data can be updated, then different strategy should be considered.
  • Add title property on the link (esp. internal one)
  • Give rel="nofollow" to external links
  • Create sitemap.xml

Optimize banner image in Home & FAQs pages

Description

Currently the Home and FAQ pages use this banner image: https://firebase-kanvas.imgix.net/warga_bantu_warga/hero_banner.png?auto=format,compress,enhance&fm=pjpg&cs=tinysrgb&fit=scale

Implement following performance improvements on banner image:

  • responsive image with srcset to load image size based on screen
  • blurred placeholder

Objective:

  • Faster load and use less data
  • Improve LCP in Lighthouse check

Related to #68

Implementation Model

Use the next/image component to load the image.

Ready to provide PR if approved.

Implement global navigation to replace the image header

Description

The current global header is an image.

Implementation Model

Approach 1

Similar to kcov19's mobile navigation, we'll have a header w/ the current page name, as well as a bottom navigation.

image

Approach 2

Mobile version of simple navbar from Tailwind UI

image

Tasks

  • Find an SVG version of the WBW logo
  • #132
  • Add app navigation

Adding GTM to enable us to track information click rate on the wargabantuwarga

Description

We probably need to start adding analytical tools to wargabantuwarga.com, because has multiple information entry, we need to track which clicks or which information is most relevant to the user, this will eventually be useful for us to enhance the information structure of the web, to ensure the most important information is displayed first.

Job Story

When the user is accessing, I want the Google Tag Manager to be triggered there, so that we can track each user’s clicks to gather data about user navigation.

Acceptance Criteria

Use the following criteria example

Functional Criteria: "GTM with id GTM-5X4ZPBX to be triggered on this page"

Non-functional Criteria: "Paste this code as high in the <head> of the page as possible:

<!-- Google Tag Manager --><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-5X4ZPBX');</script><!-- End Google Tag Manager --> "

Non-functional Criteria: Additionally, paste this code immediately after the opening <body> tag: <!-- Google Tag Manager (noscript) --><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5X4ZPBX"height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><!-- End Google Tag Manager (noscript) -->

Performance Criteria: "To have minimum impact on performance use the afterInteractive or onLazyLoad see: https://nextjs.org/docs/basic-features/script

Require A QA To Test?
Yes

Optional Information
Here is the GA4 ID: 278712353

Current Tasks

  • #36
  • Integrate GA property into the GTM
  • Setup click event triggers on GTM

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.