covidarmy/frontend

The frontend for covid.army

frontend's Issues

Add a loader to the screen when the results are being fetched

When the user selects a city and resource, currently the no tweets found text is shown for a few milliseconds before the tweets are rendered. Maybe having a loader would be better?

Implement SWR

Currently we're not using any server state libraries like swr or react-query which can lead to unecessary refetching on rerenders.

Task: Implement SWR to manage server state

New addition to Menu bar

A Beta version of Fraud detection is live at: https://verifynum.herokuapp.com/

For the time being, untill we start rendering frauds in realtime, we could add a new option in our menu with name 'Resource Verifier (Beta)' hyperlinked to the above mentioned URL.

The UX for selecting cities broke

Not seeing the search bar and dropdown on the first load. Have to click on the change button first to bring it up. Please fix.

Addition of Fraud Listing Page!

User should manually enter the number of the fraud he has encountered. This will create multiple sources of information and will help us in maintaining a clean list of resources.

Suggestions are welcomed!

Volunteer login + dashboard

Frontend scope:

• Login page: Ability to log into the dashboard via a social login (Twitter/Facebook/Google)
• Dashboard:
  • Add leads
  • Report leads
  • Delete added leads

Backend scope: TBD

Implement NextJS ISR for faster load times

Currently, the tweets are being fetched from the client. That can be fixed if we move the API calling to getStaticProps and use it as the default value on the state.

Success Metrics Dashboard

Create a dashboard which shows number of visitors per day, unique users, # of verified resources at any given instance and how it has increased over a period of time.

Change in Nav Bar layout on mobile view

• burger menu to be moved to the left
• logo to be in center
• share button to be on the right
• translate button similar to the one on liferesources.in (both on phone and web view)

Deploy NextJS app to Cloud Run

Add disclaimer

Setup Discussion on this repo

reference: https://docs.github.com/en/discussions/quickstart

Remove "change" button on resource filter container

The change button creates a lot of friction. If someone's looking for oxygen leads they might also be looking for ICU beds and vice versa.

Difficult to look for oxygen beds

Add back "All" resource filter button

The all tab also serves as a "update check" page where the user can see when the tweets were last updated

If they go directly to a resource and see say in Remdesivir the last tweet came in 50 minutes ago, they would assume it's not updated and leave

Improve frontend repo documentation

Need to change and update the documentation and readme on FE repo

Issue with persistent filter choices

The new change in persistent filters blocks half of the screen on small screen phones. When the user scrolls up, the navbar and city sections should scroll up along with it too so that it frees up some space for showing the tweets. Scrolling down will bring the navbar and city screen back.

Attaching a video of the same issue.

Persistent.filter.scroll.issue.on.small.screen.MP4

Some text changes on team page

Change "Our Team" to "Our Volunteers"

Remove "Let's meet with our team members"

Persist filters choices

We should persist filters, though we are redirecting to a page for every resource city combination usually, people would only remember the URL which is covid.army, if they see their filters reset then it would cause more anger and panic

Allahabad fix

Change Spelling of Allahbad to Allahabad on both frontend and backend API.

Rank resources on website and take feedback from users regarding the leads

Users should be able to give us feedback regarding the leads being shown on the website so we can refine our dataset.

We can have the following prompts on the frontend. These prompts can pop up when user clicks the phone number being shown in the lead and goes to the teleprompting screen. Once they come back we can show these in the popup.

---

Helpful: if they pick up and say that they have stock

Unresponsive: if the number is out of reach, busy or did not pick up

Out Of Stock: if they don’t have any more of the resource type available

Invalid: if the number is wrong and they are not providing the selected resource type

Update The Frontend's compatibility with the updated resources list

covidarmy/backend#79

Updated Resources List:
https://github.com/covidarmy/backend/blob/dev/data/resources.json

Implement fuzzy search for all 1400 locations

Currently we only have ~30 locations that are displayed on the frontend. However, the location list on the backend is being updated to support 1400 locations and it is not feasible to display all 1400 locations on the screen.

Task: Implement more accurate fuzzy search so less results show up for certain combinations to avoid using the entire screen space.

Frontend Deployment Vercel

Implement internationalization using react-i18next/next-i18n

The end user should be able to switch between Hindi and English. Internationalization can be implemented either using Next's inbuilt i18n routing or react-i18next.

The downside with Next's i18n routing is that it is routing based so there will be separate links for /en and /hi.

Redirect to home page on navbar logo click

Fix disclaimer text

Remove the word collectively in the first line of the disclaimer

Setup CI/CD with Cloud Run

Deploy frontend on Vercel

Add a Fraud Disclaimer to the top of the page

“Please beware of fraudsters”.

Ensure Frontend's compatibility with the updated "Tweet" schema

Sample Response Object:

{
  phone: [
  "8860687002"
  ],
  email: [ ],
  _id: "609836eb33300904cbdd19bd",
  __v: 0,
  category: "oxygen",
  city: "Delhi",
  createdAt: "2021-05-07T17:21:00.899Z",
  created_by: "ThinkTink - Covid Help",
  created_on: 1620566031000,
  district: "Delhi",
  last_verified_on: null,
  resource_type: "Oxygen Cylinder",
  state: "Delhi",
  updatedAt: "2021-05-09T13:14:01.358Z",
  verification_status: "Verified",
  tweet_id: "1391380897530789891",
  tweet_url: "https://twitter.com/ThinkTinkAcad/status/1391380897530789891",
  author_id: "1294376827058712577",
  text: "7 L OXYGEN CONCENTRATOR AVAILABLE in #Delhi Contact: 8860687002 ✅Verified by volunteer at 6:15pm 9 May #Delhi #OxygenConcentrator #Covid19IndiaHelp",
  likes: 0,
  retweets: 0,
  author_followers: 356,
  manual_parsing_required: false
}

Missing images in /about page

So many images are missing in /about page.

Add tab for our github repo

We should start inviting devs to contribute and share feedback here. Open communication would help prevent more distributed resources.

Add powered by Vercel on the website

We need to give credit to Vercel in order to get a sponsored account from them for being an open source project.

Instructions on what needs to be done can be found here

Revamp location / resource selection flow

Currently users get confused because we show the choose location and choose resource containers on first load itself. To reduce complexity the user should only see "select location" container first and should only be shown the resource selection tab after location has been selected.

Additionally, we could also fetch user location via GPS on the user's device. However, this would require us to somehow match the user's coordinates with the locations available in our list.

Custom preview thumbnails for each City + Resource shareable link similar to the one on Figma

Decouple SVG and reuse

Context:
Currently majority of the icons are SVG, ex: Search Icon, Down Icon, etc.
And these SVG are directly inserted inside the respective component, ex: LocationFilter has 2-3 svg component inside its return statement

Problem:

1. A few of these svg which can be reused are re-written again and again
2. Increase in the file length of the component which makes them unreadable
3. Errors showing in the browser console, since the naming of svg attributes do not match react conventions =>
   

Acceptance Criteria:

• Separate SVG components into component / file of their own
• Import these SVG components and use as other react components

Addition of Report Button

Add a report button to each tweet which is rendered, which on clicking will send data to an EndPoint which will then parse the tweet and add the numbers present to fraud list.

Remove share button

We should add PWA support.

It would make sense for users to be able to add our application on their home screen, and get added benefits like maybe being able to send native notification updates and add offline functionality.

Since our stack is already nextjs based. We should look into next-seo to add pwa support rather than building it from scratch. Suggestions open!