Git Product home page Git Product logo

covid-maps's Introduction

covid-maps

Covid Maps is a crowd-sourced app that helps you track the latest information on essential services operating around you during the Covid-19 shutdowns.

πŸ‘©β€πŸ’» Contributing to the project πŸ‘¨β€πŸ’»

Developers looking to contribute to this project can get started by filtering for good-first-issues

Once you've gotten a hang of the code base, check out the Prioritized Feature List which has also been pinned on the Issues Board

Join our WhatsApp Developer group to engage with the team working on this project.

Pushing your changes

  • Comment on the issue you are working on to inform others.
  • Fork the repo. Build the feature.
  • Send in a PR when done!

Project structure

  • React app: The frontend is built on React, built with the create-react-app scaffolding
    • Using react-router for navigation (docs)
    • Google Maps for a bunch of stuff
    • Bootstrap (with the react-bootsrap package) for basic css styling
  • Nodejs/Express server: The server dir has a basic web service that runs on top of PostgreSQL
    • PostgreSQL is the primary data store for the app
    • For more info on the server, see the server README.md

Usage

The app requires Node.js to be installed locally. Once you have Node, run the following from the project directory. This would setup the local dev server on http://localhost:3000.

npm install
npm start

Strictly optional: setup Prettier in your editor for code formatting.

Deployments

We have continuous deployment on every push to master with a Netlify integration. Give a minute or two for the changes to deploy after a push.

The app is deployed at https://peaceful-rosalind-47c3e2.netlify.com

Location input - test scenarios

  1. "Update info" flow from homepage -> submit.
  2. Type on search field on submit
  3. Drag marker
  4. Drag map (marker stays in the center; "mobile friendly drag")

Formatting with Prettier

npx prettier --write --trailing-comma none --arrow-parens avoid src/**/*.js

covid-maps's People

Contributors

amit-rirev avatar anshul-mittal1 avatar arjunattam avatar arrian avatar asanjeevrao avatar daviddhas avatar eragon512 avatar piyush85 avatar preetjdp avatar sampoorna avatar siddddhant avatar siddharth11 avatar wederribas avatar xsihe avatar

Stargazers

 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

covid-maps's Issues

Database integration

  • need to be able to query the google sheets file
  • need to be able to submit to the google sheets file
  • explore alternatives if the above two don't work out

Form fields for v1

define what fields we input, what are their types, and show them on the UI

will be used by #3 to send data to the google sheet

Navigation bar / header UI

need a simple to use navigation experience between the home and submit pages. all the elements are in place, they need to be put into a nicer looking UI

Improved responsive layout

currently the web app is responsive, but built primarily for mobile. it would be nice to be able to have a good desktop look and feel as well.

Site branding

we need

  • name for the website
  • domain name
    • domain name integration with netlify
  • optionally: icon/favicon

Show query results on the map

depends on #3

from the to-do

  • Pull relevant geohash data from database and show it as Pins on the Map. Pins update as maps move

Store selection

Store selection largely is going to happen in three ways IMO

  • Discovery through the pins we drop on the home-screen when the user opens up
  • User explicitly indicates the name of the store by typing it in
  • User applies a set of filters to discover a store on the home-map

Filters could include

  • Store timings (expected to be open at "xx pm" or "for next 30 mins")
  • Item availability (for e.g. Pharmacy or "has toilet paper")
  • How crowded it is / Has home delivery
  • Usually accurate / updated information
  • Verified store contact number

Set up the location input fields

in the form, inputting the text fields is fairly simple to do. getting location input needs more work, but is critical for easy and location relevant data entry.

  • we have the current location thing hooked up
  • we want to have a location / address field which is powered by google maps suggestions
    • the map and the location input field should be in sync
    • this would require some react work + google maps API integration

Information authenticity / staleness

The core use-case of the product is driven by information authenticity which Google Maps currently doesn't have - what is the status of the store right now / in a while (open / closes at) and information on stocks. Information on crowds / queues is "bonus".

We need to constantly check for information authenticity - sometimes the data itself at time of entry is accurate but is now "stale" (no longer true)

We can combat this in a few ways:

  • Get user who is inputting to put "expected" values (expect stocks to last till / store to be open till etc) as an explicit signal
  • For entries that are questionable / entering into the stale zone, we get other consumers to ratify them
  • We could hypothetically also associate a trust score with a consumer (if a lot of posts of yours in the past have been found accurate, you get a higher score and vice-versa) and surface posts of consumers with higher scores at the top. Trust score could hypothetically get also built by consumers sharing more information about themselves (connecting linkedin / sharing an ID proof etc)

We also need to find ways in which we can communicate the staleness / authenticity

  • We show data in red / yellow / green depending on how close to accuracy we think it is?

Better geolocation handling

quick notes on geolocation

  • ideally we should not prompt for location permissions when the app is launched
    • make that more explicit
  • speed up map load? seems to be stuck if the current location is not available
  • race condition in updating map's center fixed!

Add information from G Maps to location card

From the to-dos file

  • Show a location card on Home Screen corresponding to the chosen pin on map (or closest pin if no pin is chosen)
  • Pull relevant information fields on location card from G Maps (Timings, distance, etc.)
  • Pull relevant information fields on location card from DB (category, review responses organized by time)
  • Add an 'Update' action on the location card that takes you to the Submit page with location pre-filled

Proactively seek user inputs

Given that upto date & accurate information is going to be key, we can proactively seek user inputs.

Accuracy of location of store

  • Seek input from any user in proximity if the store is actually there

Identify if the user is the near store (lat long verified)

  • Check if the user is at the store
  • Prompt for inputs - either all information / information that is not currently available
  • Reward points to the user for updating

Localization / i18n

If we're focused on India, the app should show text in Hindi/Kannada, in addition to English

Location Search & Map on Form page - minor fixes needed

  1. Add a clear button or select all text when cursor is placed on a filled location field
  2. Currently when you start clearing text, it start autosearch again, so you think you're not cleaing anything
  3. Even after clearing all text, it populates with the whole address again, so what you're typing goes to the end
  4. Can we hide the small box below the Map that shows 'geolocation is not enabled'. Normally it shows lat long which is also too useful
  5. When you drag maps, looks like it always returns an address and never a store name. If that's the case, we should not pre-populate the store name

Form page- minor fixes

Change /submit to /update
Re-load the page when users click on 'Update a Store' from /update page

Adopting a uniform style - Update a Store CTA & Update button

notes from the call

  • [done] branding
    • remove toilet-paper-app
  • location input
  • [done] share your experience flow
  • UI for home page
  • [done] submit button on the nav bar
  • [done] timestamp - formatting, humanize

Future

  • zero state for the case where city has no results
  • store info
    • open or not
    • item available
    • contact
    • directions - go to gmaps
    • accuracy of data

No prompts for location on iOS

It seems opening the page inside iOS messenger web view doesn’t even ask for geo permissions. Need to fix that as well.

User reward / motivation for posting

Ideally the flywheel for UGC gets kicked off if there is a user-reward.

Reward can be of different kinds:

  • xx people found your post helpful
  • yy people viewed your post
  • zz people liked your post
  • you've gotten xx points for helping so many people. Points can be used to level up to a "pro"/ "ninja" user etc

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.