sawocangkring/sda.untukkita.id

Inisiatif independen informasi vaksinasi COVID-19 dan faskes di kota Sidoarjo.

UntukKita - Informasi Vaksinasi Sidoarjo

untukkita.sda is an initiative to provide vaccination information and health services needed by the people of Sidoarjo during the pandemic. Based on our quick observations, we get the result that there is still no portal that focuses on providing vaccination information and health services. From this, we have the initiative to create a portal that can make it easier for the public to get information on vaccinations, facilities and health services for COVID-19.

In practice, we collect data (aggregation) from various credible sources, such as social media of the official or city government or the relevant agency unit. We perform quick validation of the information obtained by matching content and credible data sources.

The core team for untukkita.sda itself consists of student volunteers from Sidoarjo and the community with backgrounds in technology and data. Currently, the team for untukkita.sda consists of 5 members. We welcome contributions from the community in improving our quality in helping the community both in the scope of data, relations and technology.

Visit UntukKita Sidoarjo Website

Getting Started

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

First, clone the repository.

git clone https://github.com/untukkita-id/sda.untukkita.id.git

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

cd sda.untukkita
yarn install
yarn fetch-data

Finally, run the development server.

yarn dev

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

Technical Details

The project is built with NextJS and Tailwind CSS.

Project Dependencies and Environment:

• Node.js v14.x
• Yarn
• Netlify
• Git
• GitHub Actions
• Font Awesome 5

Any contributions are welcome. Please read the contributing file for more information.

Find us

• Instagram Account
• Github Repository
• Data Source

sda.untukkita.id's Issues

feat: Data Source Pages

Summary

Add data source linked to Google Data Studio and Public Excel Link, if we could do some features, add graph to display current progress.

FEAT: About us page & Privacy and Data Policy & Contact Us

Summary

Add essential team and project information like About us, Data Policy and Contact Us Pages

References

• https://nextjs.org/blog/markdown

feat: Blog Post System

Detailed Description

Create Content Management System and make path for blog information.

Context

Possible Implementation

Using Netlify CMS and Markdown Loader

References

• https://github.com/masives/netlifycms-nextjs
• https://www.netlifycms.org/

build: azure Functions API instead calling gapi

Detailed Description

Use Azure Function API instead of calling GAPI V4, It makes non maintainer can fetch the datalake content without knowing any Google Sheets API Key to start the development.

Scope of Changes

• Entire Data Fetcher

References

• http://api.untukkita.my.id/api/
• https://github.com/untukkita-id/api-agregator

feat: Vaksinasi Feeds Page

Summary

Add pages for vaccination feeds that retrive data every six hours from the Google Sheets API

feat: split lighthouse assertions between PR and Prod

LHCI Runs for production and Pull Request must have different assertion. Some LH assertion production are not compatible with Netlify Preview Deployment Environment.

Detailed Description

Based on several runs on LHCI PR, some of important assertion are failed in netlify preview environment, but it succeed when runs on netify production. Current non comatible rules are

• is-crawable
• first-meaningful-paint
• uses-rel-preconnect

Context

It makes better pull request reviewe process because it return valid CI Check in preview development.

Possible Implementation

1. Create two LH Assertion file.
2. Disable non-compatible rules for netlify preview assertions file
3. Implement to GH Actions

feat: Blog System - Netlify CMS

Detailed Description

Use Netlify CMS as content manager for blog post using git-gateway netlify identity

Context

Make easier for content creator to make blog posts without touching any git workflow.

References

• https://www.netlifycms.org/docs/nextjs/
• https://www.netlifycms.org/docs/git-gateway-backend/
• https://www.npmjs.com/package/netlify-cms-app
• https://nextjs.org/blog/markdown
• https://nextjs.org/docs/basic-features/data-fetching
• #33
• #34

fix: Navigation Button State

chore: use absolute import for pages components

Possible Implementation

1. Add javascript config

// ./jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

2. Remove any directory level changes to absolute import

// Before

const PageTitle = dynamic(() => import('../components/page-title'));
const HomeMenu = dynamic(() => import('../components/home/home-menu'));
const Footer = dynamic(() => import('../components/footer'));
const Header = dynamic(() => import('../components/header'));

// After

const PageTitle = dynamic(() => import('components/page-title'));
const HomeMenu = dynamic(() => import('components/home/home-menu'));
const Footer = dynamic(() => import('components/footer'));
const Header = dynamic(() => import('components/header'));

References

https://nextjs.org/docs/advanced-features/module-path-aliases

Fasilitas Kesehatan Pages

feat: Angka Statistik COVID-19

testing: add basic e2e testing for pages

Detailed Description

Craft testing unit to validate every pages already declared siteInfo or metaTags pageBuilder component params. Making sure the SEO score in mind.

Optional

If anyone could make any PRs regarding this issues and have plenty time to do it, It would be nice to create a11y on components & pages.

References

• https://reactjs.org/docs/testing.html
• https://nextjs.org/docs/testing
• https://blog.logrocket.com/react-end-to-end-testing-jest-puppeteer/
• https://docs.cypress.io/guides/component-testing/framework-configuration#Next-js
• https://dev.to/ashconnolly/how-to-quickly-add-jest-to-your-next-js-app-1h32
• https://dev.to/maciekgrzybek/testing-next-js-pages-1jai

FEAT: Use SSG Instead Client Side Rendering on faskes pages

Overview

Due to Netlify Functions Pricing is based on usage, and current page rendering method is quite heavy in API Request, we should defer Client Rendering on Fasilitas Kesehatan Pages.

Context

Current Netlify pricing is Pay-As-You-Go and it would become disasters when someone trying to flood the API without any Rate Limiting / caching.

Possible Implementation

Use Server Side Rendering on build process instead of Client Side Rendering, and disable any API Routes.

Refers:

• https://www.netlify.com/pricing/#add-ons-functions
• https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
• https://nextjs.org/docs/basic-features/data-fetching#when-should-i-use-getserversideprops

EPIC: Website Initial Release

Overview

Initial content and basic checklist for website initial release.

Current Tasks

• #17
• #18
• #19
• #16
• #20
• #23

User Experienc

• #21
• Dynamic Page Title

Technical Task

• #14

FAQ

refactor: create page builder components

Detailed Description

Use pagebuilder to insert pages common components in single chunks

Context

Better DX

fix: strict rule for script CSP

Detailed Description

It would be nice to make the script-src looks nice in CSP Evaluator using strict dynamic. I still figuring it out when deployed in netlify.

It already have A Grade in security headers check but it is not enough because the site is static generated

References

• https://content-security-policy.com/strict-dynamic/
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src