{"id":45658842,"url":"https://github.com/codeforboston/plogalong","last_synced_at":"2026-02-24T08:57:50.567Z","repository":{"id":34397624,"uuid":"172821607","full_name":"codeforboston/plogalong","owner":"codeforboston","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-09T12:37:48.000Z","size":4686,"stargazers_count":22,"open_issues_count":65,"forks_count":37,"subscribers_count":12,"default_branch":"develop","last_synced_at":"2025-10-09T06:22:25.044Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codeforboston.png","metadata":{"funding":{"custom":"https://www.codeforamerica.org/donate-to-a-brigade?utm_campaign=CodeforBoston\u0026utm_source=github"},"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-27T01:43:09.000Z","updated_at":"2023-08-14T08:01:05.000Z","dependencies_parsed_at":"2023-01-15T07:01:05.950Z","dependency_job_id":null,"html_url":"https://github.com/codeforboston/plogalong","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codeforboston/plogalong","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeforboston%2Fplogalong","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeforboston%2Fplogalong/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeforboston%2Fplogalong/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeforboston%2Fplogalong/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codeforboston","download_url":"https://codeload.github.com/codeforboston/plogalong/tar.gz/refs/heads/develop","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codeforboston%2Fplogalong/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29777477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T04:54:30.205Z","status":"ssl_error","status_checked_at":"2026-02-24T04:53:58.628Z","response_time":75,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-24T08:57:49.276Z","updated_at":"2026-02-24T08:57:50.548Z","avatar_url":"https://github.com/codeforboston.png","language":"JavaScript","funding_links":["https://www.codeforamerica.org/donate-to-a-brigade?utm_campaign=CodeforBoston\u0026utm_source=github"],"categories":[],"sub_categories":[],"readme":"# Plogalong\n\n  ***Plogalong*** is an app for iOS and Android designed to encourage new and\n  existing [ploggers](https://en.wikipedia.org/wiki/Plogging) to record the litter they pick up while walking,\n  running, or exercising outdoors.\n\n  This is a project of [Code for Boston](https://www.codeforboston.org). If you would like to get involved\n  in helping us develop the app, join us at the next [Hack Night](https://www.meetup.com/Code-for-Boston/), and we can\n  help you get started.\n\n  We're in the beginning stages of development, but we have a very detailed\n  [Mockup](https://marvelapp.com/96b0bd4/screen/53564903).\n\n## Architectural Overview\n\n  - React-Native + Expo: React Native is built on the same bones as React for\n  web, except that instead of building user interfaces from DOM elements, you\n  use platform-native views (UIViews on iOS, Views on Android). Expo is a\n  managed version of React Native that includes a library of components known to\n  be compatible with each other. It adds some tooling that help in the\n  development cycle.\n\n  - Redux for managing local state\n\n  - Database - Firebase\n\n  - Authentication - Firebase\n\n## Setup Instructions\n\n  - Clone this repository ([How To Clone A Git Repository](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository))\n\n  - Node (10.x or 12.x) -- ensure that you have a recent version installed - https://nodejs.org/en/download/ **Please use a LTS (even) version**\n  \n  - Make sure that /usr/local/bin is in your $PATH by opening Terminal and typing in echo $PATH (if it's not, follow directions here: https://opensource.com/article/17/6/set-path-linux)\n\n  - (iOS) Install [Xcode](https://apps.apple.com/us/app/xcode/id497799835?mt=12)\n    _This may take a while... why not go plogging for an hour?_\n    \u003cbr\u003e...then launch it at least once so that you can agree to its Terms and\n    Conditions.\n\n\n  - (Android) Install [Android Studio](https://developer.android.com/studio/) and\n  create a virtual device.\n\n    [See here](https://docs.expo.io/versions/v32.0.0/workflow/android-studio-emulator/) for detailed instructions \n    To create a virtual device from the Android welcome screen, click configure\u003eAVD Manager \n    To edit your virtual device selection from somewhere other than the welcome screen, click on the AVD Manager icon in the\n    toolbar on the top right (looks like a phone with a green android alien)\n    \u003cbr\u003e_n.b. Since this app will be deployed on the Google Play Store, \n    when creating a virtual device in the AVD Manager, try to choose a device that \n    has the triangular Google Play Store icon next to it._\n    Download an available system image\n    \n  - (Optional) Install `yarn`: https://yarnpkg.com/lang/en/docs/install/\n\n  - Install Expo: `npm install expo-cli --global` or `yarn global add expo-cli`\n  npm install expo-cli --global)\n\n  - Configure Firestore connection: create a new file in the `firebase/` folder, name it `config.js`.\n  Add the proper values to `firebase/config.js` by copying \n  in the new config info (which you can find pinned in the #plogalong Slack \n  channel).\n  \n  - Install node modules: `npm install` or `yarn install`\n\n  - If you need to install an additional dependency, that dependency's documentation may give you instructions for using `npm` or `yarn`.  If you encounter problems with the npm installation, using the yarn installation might work better.  There are also instances when you may need to do `npm install` after pulling in new changes from the CfB master branch.\n\n  - If you're planning on running this on an Android simulator, you'll have to install the Expo app via the simulated \n  device's Google Play Store. To do so, open Android Studio, open the AVD Manager (icon looks like a phone with a green\n  Android alien in the top right toolbar), click the Play button under \"Actions\" to launch the simulator. You can then open\n  the Google Play Store on the simulated device. Now search for the Expo app and install it to the simulated device. You may\n  have to launch the simulator from Android Studio each time you want to run the app via Expo.\n\n  - In a terminal window, navigate to the root directory of your local clone of\n    this repository. Type `expo start` to launch Metro bundler and Expo's\n    browser-based developer tools.\n\n  - While Expo runs, you can type `i` to run the app in the iOS simulator. In order to use the Android emulator, launch \n  the Android Virtual Device emulator via Android studio (described above), then type `a` at the terminal to run the app in\n  the\n    Android emulator. You can also use Expo's local web interface to launch the app.\n    \n    If you type 'i' and get an error, run 'sudo xcode-select -s /Applications/Xcode.app'\n   \n  - To run Plogalong on an iOS device: \n  \u003cbr\u003e1. Install Expo on your iOS device from the App Store. \n  \u003cbr\u003e2. Connect both your computer and your iOS device with same Wi-Fi. \n  \u003cbr\u003e3. In Expo XDE in your browser, select Connection \u003e LAN\n  \u003cbr\u003e4. Use the Camera App on your iOS (iOS 11+)Device or any QR code reader (iOS 9 \u0026 10) to scan the QR Code.\n  \u003cbr\u003e5. Your QR code reader / Camera App, will ask if you want to launch the \n  App in Expo Client App, select \"Yes\"\n  \u003cbr\u003e6. Plogalong should load accordingly\n  \n  - To run Plogalong on an Android device: \n  \u003cbr\u003e1. Install Expo on your Android device from the Google play store. \n  \u003cbr\u003e2. In Expo XDE in your browser, select Connection \u003e Tunnel. Wait for a new link and QR code to generate below the connection options, and then click on the link to copy it to your clipboard.\n  \u003cbr\u003e3. Open Expo on your Android device. If you are on an emulated Android device, then select Open from Clipboard. Otherwise, select Scan QR Code.\n  \u003cbr\u003e4. There should be a message saying 'Building JavaScript Bundle as the Application loads.\n  \u003cbr\u003e5. Boom! You're ready to Plog.\n  \n## API Keys\n\n### Firebase\n\n#### Using the shared Firebase project\n\nCheck on our Slack channel for the shared configuration file. Save it to\n`firebase/config.js`.\n\n#### Setting up your own Firebase project\n\n1. Install Firebase CLI: `npm install -g firebase-tools`\n2. In the `firebase/project` directory, run `firebase login`. If prompted, log\n   in to your Firebase account.\n3. Choose the project to use:\n   - An existing project: Run `firebase use --add` and follow the prompts. (I\n     use the alias `\"default\"`.)\n   - A new project: Run `firebase projects:create` and follow the prompts\n4. In `firebase/project/functions` run `npm install`.\n5. Deploy with `firebase deploy`. (See `firebase deploy --help` for additional\n   options.)\n   \n**Additional setup:** see the section on SendGrid below.\n\n#### Local Configuration\n\nSome Firebase features require additional configuration in the shared app config\n(`app.config.js`). When building, you can optionally specify a\n`LOCAL_CONFIG_FILE` environment variable. If given, it should be set to the path\n(relative to the working directory) of a JS module that exports a config object.\nSee `app.config.js` for the keys you can override.\n\n### SendGrid\n\n**What it's for**: this API is used to send certain transactional emails: for\nexample, user feedback.\n\n#### Get API Key\n\n1. [Create an account](https://sendgrid.com)\n2. In the SendGrid dashboard, open [API keys](https://app.sendgrid.com/settings/api_keys)\n3. Create a new API key. If you choose to customize the access levels, set \"Mail\n   Send\" to Full Access.\n4. Copy the API key\n   \n##### Sender Authentication\n\n1. Open the [Sender\nAuthentication](https://app.sendgrid.com/settings/sender_auth) page under\nSettings\n2. Choose \"Authenticate Your Domain\" and follow the instructions\n\n\n#### Configure Firebase\n1. In this repo, cd to `firebase/project`\n2. Set the email configuration options: \n  ```bash firebase functions:config:set\n  plogalong.sendgrid_api_key=SG.xxxxxxx plogalong.admin_email=xxxxxx \n  ``` \n\n  Replace `SG.xxxxxxx` with the API key you got earlier. The\n  `plogalong.admin_email` option determines the email address that will receive\n  admin alerts (comment submissions, for instance). It will also be the sender\n  email unless you provide a separate `plogalong.sender_email` option. In either\n  case, you must complete \"Sender Authentication\" (above) for the sender domain\n  or address.\n  \n### OpenWeatherMap (optional)\n\n**What it's for**: this API is used to populate the Current Weather box on the\nPlog screen\n\n**What to do**: Register for a free account on [Open Weather](https://openweathermap.org/api \"Open Weather API\"). Copy your key\nfrom the \"API Keys\" tab and paste it into the `openWeatherMapKey` of your `config.json` file.\n\n## Updating\n\n- After a pull request is merged, it may specify that node_modules will need \nto be deleted. When this is the case, delete the `node_modules` folder on your \nlocal repo and execute `yarn install` in your terminal.\n\u003cbr\u003e_n.b. if you are using npm, execute `npm install` instead of `yarn install`_\n\n- The time may come when you will have to update Expo on your simulator. To do \nso on the iOS simulator, execute `expo client:install:ios` in your terminal. If it \ndoesn't take on the first try, try once more. If you're still stuck after two \ntimes, consult an expert.\n\n## Remote Debugging\nDebugging Plogalong should be no different than debugging any other React Native project, but below are some useful tools for your convenience.\n### Option 1: React-DevTools\nIf you're already familiar with debugging React web apps via Chrome DevTools, this is pretty similar. The [React Native documentation](https://reactnative.dev/docs/debugging#chrome-developer-tools) points out that \"the React Developer Tools Chrome extension does not work with React Native\" and offers a standalone version of React Developer Tools for debugging. \n#### Installation\nThe steps for installation can be found [here](https://reactnative.dev/docs/debugging#react-developer-tools).\n\n### Option 2: React Native Debugger\nSimilar to React-DevTools is the [React Native Debugger published on GitHub](https://github.com/jhen0409/react-native-debugger) by user jhen0409. This standalone app is based on the DevTools in Option 1 above, but may provide more functionality.\n#### Installation\nFor installation via Homebrew, you can follow the [README instructions](https://github.com/jhen0409/react-native-debugger#installation). \n\u003cbr\u003eOtherwise, you can simply download the appropriate prebuild binary from the [release page](https://github.com/jhen0409/react-native-debugger/releases) (choose the .dmg file for macOS and .exe for Windows)\n#### Usage\n1. Open React Native Debugger app, and notice that the default port is set to 8081. With this default window open, select Debugger \u003e New Window (or more simply ⌘T or Ctrl+T) to change the port to 19001. Confirm the new packager port.\n2. Fire up the Plogalong app via `expo start` just like you always do.\n3. Navigate to the Expo Developer Menu with a shake gesture (Ctrl ⌘ Z in an iOS Simulator, Cmd+M in an Android Emulator), and select \"Debug Remote JS\" from the menu that pops up on the device.\n4. The React Native Debugger should connect and you'll see console.log() statements print in the console, be able to inspect elements by triggering the Expo Developer Menu (shake gesture \u003e Toggle Element Inspector), and set breakpoints in the Debugger by navigating to Sources \u003e Page \u003e RNDebuggerWorker.js\n5. When you're finished, you'll save yourself some trouble the next time you start Plogalong if you remember to \"Stop Remote Debugging\" via the Expo Developer Menu (shake gesture).\n\n## How to Contribute\n\n  Join us on the Code for Boston Slack. We're in the [#plogalong](https://slack.com/app_redirect?channel=CDQDBALUR \"Open in Slack\") channel.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeforboston%2Fplogalong","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodeforboston%2Fplogalong","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodeforboston%2Fplogalong/lists"}