Helping families locate summer meal sites faster than ever before at Meals4KidsOk.org

In partnership with Hunger Free Oklahoma, Code for Tulsa has assembled this responsive web app allowing families to find summer meal sites quickly and efficiently, either at home or on the go!

The Summer Food Service Program is a federally-funded, state-administered program ensuring Children have Access to Nutritious Meals and Snacks When School is not in Session.

---

---

• Back-end Tech
• Front-end Tech
• Getting Started
• Deployment

---

---

Back-end Tech

This project was built with Firebase tools and some Google APIs. Specifically:

• Firebase Hosting: For static, single-page web app deployment
• Google Sheets API: The "database" is pulled from a client managed Google Sheet document. A view only copy of this spreadsheet available here
• Google Forms: Feedback on meal sites is gathered with a Google form—internal version available here // external version available here

Front-end Tech

This project was bootstrapped with Create React App and primarily relies on the following technologies:

• React: A JavaScript library for building user interfaces
• React Router: Declarative routing for React
• Leaflet: an open-source JavaScript library for mobile-friendly interactive maps
• React-Leaflet: ⚛️React components for 🍃Leaflet maps
• react-i18next: Internationalization for react done right. Using the i18next i18n ecosystem.
• Luxon: A powerful, modern, and friendly wrapper for Javascript dates and times.

Learn More about React

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Getting started

If you'd like to run a local version of the app, follow these instructions below:

Please note before cloning: You'll need special access to the firebase project to get things working properly—even locally. Please reach out if you're looking to contribute to this project or investigate further.

• Clone the repo, and in the root directory run yarn install to download all project depencies. (You may need to get Yarn if you haven't already...)
• Run yarn start to spin up a locally running version of the site.
• Make sure you have either placed the .env file from Code for Tulsa's 1Pass account into your root directory, OR edit the environment variables in App.tsx to link to appropriate API keys and resources.

Your .env file should look a little something like:

REACT_APP_GOOGLE_SHEET_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
REACT_APP_GOOGLE_SHEET_NAME_DEV=Locations_dev
REACT_APP_GOOGLE_SHEET_NAME=Locations

REACT_APP_GOOGLE_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
REACT_APP_GOOGLE_ANALYTICS_TRACKING_CODE=UA-xxxxxxxxx-x

Deployment

There are two environments, proof and production.

Please note before deploying: You'll need to have Firebase CLI installed. The account you sign into Firebase CLI with will also need permission for this Firebase project. Please reach out with any access requests.

To deploy the proof site, run:

yarn deploy-proof

To deploy the production site, run:

yarn deploy-production