GithubHelp home page GithubHelp logo

hackforla / food-oasis Goto Github PK

View Code? Open in Web Editor NEW
71.0 14.0 49.0 103.16 MB

Repository for the current redevelopment of the Food Oasis Los Angeles website

Home Page: https://foodoasis.la

License: GNU General Public License v2.0

JavaScript 53.38% HTML 0.33% CSS 4.52% PLpgSQL 24.51% Dockerfile 0.07% Shell 0.02% SCSS 4.50% TypeScript 12.67%
los-angeles food-deserts farmers-markets community-gardens hack-for-la code-for-america code-for-all civictechindex food-pantry community-project

food-oasis's Introduction

Food Oasis

Food Oasis is a community-driven platform dedicated to ensuring everyone has access to food pantries and meal programs when they need them most. Operating across several regions, including Los Angeles County, The Hawaiian Islands, Santa Barbara County, and McKinney, TX. The web application bridges the gap between individuals and essential food assistance services, creating a supportive network within various communities.

The codebase is fully open source, licensed under the GNU General Public License (GPL) Version 2. This project is a proud initiative of Hack for LA, under Civic Tech Structure.

How to contribute

Join us in making a difference:

  1. Start by Onboarding: Complete the Hack for LA Onboarding. Joining is free!
  2. Joining the Team: Read the onboarding section of our Wiki.
  3. Volunteer Opportunities:
    • Validate and maintain pantry and meal program data.
    • Provide UX/UI design support.
    • Assist with usability testing.
    • Engage in marketing to connect with community members.
    • Contribute as a developer (see Developer Instructions for guidance).

For more details, visit the Food Oasis Wiki.

food-oasis's People

Contributors

93belen avatar andyarensman avatar bbovenzi avatar bc-mikey avatar bfojas avatar dependabot[bot] avatar devnikesh avatar djbradleyii avatar edwann13 avatar entrotech avatar fancyham avatar gigicobos avatar hanapotski avatar hassenh1 avatar jafow avatar jenny-alexander avatar jmensch1 avatar junjun107 avatar kurikurichan avatar lucas-homer avatar marinemekhakyan avatar matthewbozin avatar nicholaspung avatar qiqicodes avatar rblaz001 avatar saumildhankar avatar sisi-in-tech avatar stdyrm avatar sthapa avatar virginiawu11 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

Watchers

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

food-oasis's Issues

Contact Outlet - Recycling Soil Amendments

Overview

Connecting with orgs to build our database of stakeholders.

Action Items

Find Hunger Relief Orgs and add to DB
Find any relevant Coalitions for this subcategory of industry and add to DB
Contact the organizations you have found and document the information in DB
Resources/Instructions

Outlet Database

Contact Outlet - Recycling Bio Fuel

Overview

Connecting with orgs to build our database of stakeholders.

Action Items

Find Hunger Relief Orgs and add to DB
Find any relevant Coalitions for this subcategory of industry and add to DB
Contact the organizations you have found and document the information in DB
Resources/Instructions

Outlet Database

Contact Connector - Volunteers

Validate correct opening hours

From jlipshin:
Hi FOLA friends. 🙂 Just something that I am noticing as I'm visiting food pantries and calling them: a lot of the data about opening hours is incorrect.

I've visited three food pantries in the downtown area and called probably 4-5 others. And the hours have consistently been off...

Any ideas for how we can validate correct opening hours in a way that isn't super time consuming?

Contact Connector - Gov't Policies

Contact Outlet - Pay As You Wish Cafes

Overview

Connecting with orgs to build our database of stakeholders.

Action Items

Find Hunger Relief Orgs and add to DB
Find any relevant Coalitions for this subcategory of industry and add to DB
Contact the organizations you have found and document the information in DB
Resources/Instructions

Outlet Database

Contact Connector - Food Storage

Contact Individual - Disabled

Contact Individual - Elderly

Add a “work in progress” notice or terms of use

Let’s inform users that the website is sort of in beta, and that they should confirm location, hours and other information before visiting a healthy food source. For example, they should call a food pantry to confirm they’re open before traveling to it.

We could place a small notice in the header, with more information on a page by itself. Here’s an example from gov.uk

https://www.gov.uk/help/terms-conditions

Shopify has a tool that may help…
https://www.shopify.com/tools/policy-generator

(@joshuazrobins got this task started.)

example-notice

Bonus points: Consider how this might relate to the Privacy Notice and Opt In

Contact Outlet - Care Centers

Tasks

Resources

Add a privacy notice and tracking opt-in

We’re doing a few things on the website that may require legal notices…

  • We ask users for their location when they perform a search.
  • We’re using Hotjar and Google Tag Manager to collect information about user’s activity on the website.

Here’s an example from the gov.uk website…
https://www.gov.uk/help/cookies

Shopify has a tool that may help…
https://www.shopify.com/tools/policy-generator

(@joshuazrobins got this task started.)

Bonus Points: Give users an option to opt-in to tracking. We have a do not track script that sort-of does this, based on the user’s browser settings.

example-notice

example-opt-in

Super Bonus points: Consider how this might relate to the Terms of Use

Contact Connector - Hunger Relief Orgs

Contact Donors - Supermarkets

Contact Individual - Family

Make home page load faster on small devices

The image at the top of the home page is gigantic, and may be using a lot of bandwidth on small devices. We could improve this by using the new srcset and sizes attributes of the image element to serve smaller files.

Here’s the template for the home page…
https://github.com/foodoasisla/site/blob/master/_layouts/home.html

The first step will be to create different size images from the original files…https://github.com/foodoasisla/site/tree/master/assets/images/photos

And the second step will be to serve the appropriate image for the user’s device.

Step 1: Create the images

It might be nice to store the different size images in folders, named by their pixel width. For example…

/assets/images/photos/1000-wide/1.jpg
/assets/images/photos/1000-wide/2.jpg
/assets/images/photos/1000-wide/3.jpg
/assets/images/photos/2000-wide/1.jpg
/assets/images/photos/2000-wide/2.jpg
/assets/images/photos/2000-wide/3.jpg

We could do this manually with a tool like Photoshop, or generate the images automatically with ImageMagick or GraphicsMagick.

Here’s a Node package that supports both libraries…
https://www.npmjs.com/package/gm

And here’s a working example, using Gulp…
https://gist.github.com/jimthoburn/9799536fc0294c027e8b03063ae56061

Step 2: Serve the appropriate image

Browsers have built-in responsive image features…
https://cloudfour.com/thinks/responsive-images-101-definitions/

These work best with <img /> elements, but we’re presently using a CSS background-image.

Here are a few ways we can solve this…
A. Switch to an <img /> element. (I can help with this.)
B. Use the experimental CSS image-set feature.
C. Use CSS media queries.
D. Manually check for screen size and resolution, and choose an image using JavaScript.

Option A is generally the ideal choice, since it puts the user and their device in control of what image should be downloaded. Options B and C might be easier to implement. I think Option D could also be good choice in this case–since we’re already using JavaScript to choose an image and add it to the page.

These properties may help…

Device Width
https://developer.mozilla.org/en-US/docs/Web/API/Screen/width

Device Pixel Ratio
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

Contact Individual - Live in Food Desert

Create versioning for website

Will help us keep track of improvements and announce releases.

  • What is our current version?
  • How will we increment versions?

Contact Outlet - Food Banks/Food Pantries

Contact Individual - Homeless

Contact Individual - Single Person

Make a printable map

Let’s add a print style sheet for the map page…
https://foodoasis.la/locations/

Here’s an example name and place for the file…

/assets/css/print.css

We can include it on the page, by adding a <link> element to the default template…
https://github.com/foodoasisla/site/blob/master/_layouts/default.html

For example…

<link rel="stylesheet" media="print" href="/assets/css/print.css" />

This should come after the other style sheets on the page, so it can override the rules inside them.

A simple improvement we can start with might be to disable the rules that limit the height of the list…

.has-active-map.location-list main {
  height: auto;
  overflow: visible;
}

That way, all of the list items will appear when printed.

Another improvement we can would be to replace the <canvas> element with an image, since most browsers will print an image, but will perhaps skip a canvas element when printing.

Here are a few resources that may help…

Once we have printable map, we may want to advertise the feature by adding a print button to the page. We could place this next the filter button. For example…

<li class="filter">…</li>
<li class="print"><button type="button" onclick="window.print();">Print</button></li>

From a design point, here's what that button can look like:
screen shot 2017-06-27 at 8 24 53 pm
print.svg.zip

Add a geolocate button that moves the “you are here” dot

Let’s add a button on the locations page that will find your position and refresh the map.

If you visit the locations page without entering your address, the map will try to guess your location…
https://foodoasis.la/locations/

If you do enter an address, the map will show that location instead…
https://foodoasis.la/locations/?address=San+Gabriel

In both cases, the map will stay fixed at that location.

geolocate-button

Let’s add a button that will look for your location and update the map and the list.

This could be as simple as refreshing the page (leaving out the address), to start with.

Bonus points: If no address is present, automatically update the location as you move around the city!

Extra bonus points: Add another button that lets you update the locations on the map after zooming and panning–similar to the “Redo search in map” feature on Yelp…
https://www.yelp.com/search?find_desc=tacos&find_loc=Los+Angeles%2C+CA&ns=1

Contact Donor - Manufacturers

Search for location by name

As a FOLA user I want to be able to search for a location by name, so that I can find a specific place

Not sure this is the most elegant solution, but if a user wants to search for a specific place, it is difficult/impossible right not unless they know the exact name. Adding a free text search to the "find" dropdown could solve this

This would be either/or - either they search by name or they search by the content types.

Another solution would be to make the "find" box always be a text input (no dropdown), but then we get back into issues of users not understanding what types of data we offer

screen shot 2017-07-18 at 3 17 51 pm

Contact Donor - Restaurant Company

Make it easier to get directions on the detail page

The detail pages have a map with the food source’s location, and a link a full-screen map page with directions (Google Maps).

We could make the map into a giant button that goes to the same place.

Or we could change the map on the page to include directions. Mapbox has an API that may help:
https://www.mapbox.com/api-documentation/#retrieve-directions

Bonus points: Consider using “Mapbox classic” instead of “Mapbox GL” on the detail page, to make it consistent with the locations page: https://foodoasis.la/locations/?address=San+Gabriel

Contact Connector - Distributors

Contact Outlet - Recycling Compost

Overview

Connecting with orgs to build our database of stakeholders.

Action Items

Find Hunger Relief Orgs and add to DB
Find any relevant Coalitions for this subcategory of industry and add to DB
Contact the organizations you have found and document the information in DB
Resources/Instructions

Outlet Database

Possibilities for anonymous user suggestions in the future

Instead of using the GitHub API to make commits on the user's behalf, which requires users have a GitHub account, a couple other options to look into are:

  • Use http://jlord.us/sheetsee.js/ to put user suggestions into a public Google spreadsheet
  • Maybe a GitHub integration would allow for anonymous contributions too?
  • Anonymous GitHub gists might also be a possibility? (probably would be too hacked together though!)
  • Maybe we could use Dropbox or another online storage option (see http://mavo.io/ for ideas too!)

Fix phone number format

Many of the locations on the website have a phone number with a missing space character. For example, the San Gabriel Mission

(626)457-3035

This should probably look like this instead…

(626) 457-3035

Or maybe this…

626-457-3035

A few ways we could solve this might be…

  1. Manually update the markdown files.
  2. Use Node.js to automatically update the markdown files. Here’s an example script that does something similar… https://github.com/foodoasisla/site/blob/master/_node/update-markdown.js
  3. Change the formatting when presenting the phone number in the Jekyll template and the JavaScript.

Bonus points:

Make phone numbers look nicer on summer lunch locations, that include a persons name…
https://foodoasis.la/summer-lunch/la-villa-mariposa/?type=summer-lunch

Super bonus points:

Make closed dates and field trip dates look more standard and nicer on summer lunch locations…

Contact Outlet - Shelters

Make it easy to verify a location’s address and coordinates

These two locations have a latitude and longitude that doesn’t match their address…

Let’s fix these and look for others with the same issue.

One approach might be to automatically generate a list that shows the latitude and longitude for each location in our data alongside a latitude and longitude from the Google Maps or Mapbox geolocation API (i.e. pass them the location address and see what comes back).

FOLA Latitude FOLA Longitude Google Maps Latitude Google Maps Longitude
42.1077661 -87.9903638 34.0498231 -117.9359278

If the coordinates are very different, we could flag that location for a human to double-check.

Here’s a Node.js script that may help…
https://github.com/foodoasisla/site/blob/master/_node/update-markdown.js#L84-L121

Consider showing a special message if a user is in a food desert (Halina’s idea)

The previous version of the map had food desert regions marked in red…
https://foodoasis.la/map-all-locations/

This might help Los Angeles residents understand that their home is in a food desert.

We could do something similar on the current locations page, by showing a message like “This location is in a food desert”–perhaps with a link to the FAQs page.

This message could appear if the latitude and longitude fall within a food desert region–assuming that’s not too hard to code.

Support filtering by future days/times

We currently have an option to filter the search result by what’s “open now”.
https://foodoasis.la/filters/?open=1

Let’s allow users to choose a day and time in the future, so they can plan a trip to a healthy food location.

A simple way to start might be to add two <select> elements–one with the days of the week (Monday–Sunday), and another with the hours of the day (midnight–11am and noon–11pm).

Here’s a script for the “open now“ feature that we have now…
https://github.com/foodoasisla/site/blob/master/assets/js/helpers.js#L99-L135

Bonus Points: Highlight today’s date in the list of hours for each location, and show a special notice if a location is opening soon, closing soon, or has already closed.

filter

open-now

closed

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.