You can find the deployed project at thetrashpanda.com.
| Mark Artishuk | Mark Halls | Carlo Jose Lucido | Colin Bazzano | |
|---|---|---|---|---|
 |
|
|
|
Trash Panda is an app that helps you to recycle better. You may search through a list of categories, enter in a material to our search bar, or (soon) use your camera to scan and item to discover how to properly dispose of your material! A lot of things end up in garbage bags sent off to the landfill when they might have a better way of being disposed. With Trash Panda, you will become wiser at disposing items and be better to our planet!
- Ability to navigate through categories to select your material and receive it's proper disposal method.
- Ability to search for your exact item and learn it's proper disposal method.
- Ability to use your device's camera to find what your item is, then proper disposal.
- Using any method above, then find a location nearby that may accept item (if applicable).
- Discover name, hours, phone, and address of location in which your item may be brought to for disposal.
- React in tandem with the other libraries below help achieve PWA application standards.
- Ability to make our app work as a Single Page Application.
- React helps to make clean and fast applications for our users.
- Apollo Client helps achieve PWA application standards.
- Apollo Client with GraphQL makes for easy access to the needed data from our backend/Earth911 API.
- Apollo Hooks alongside React hooks makes for quality and clean code.
- GraphQL plays a large part towards achieving PWA application standards.
- GraphQL's tidy data structuring makes accessing data very easy and clean.
- GraphQL allows you to only grab the information you need.
- styled-components makes for easy CSS-in-JS.
- Clever naming of components makes for much easier reading.
- Flexibility with styling to make our app look the best it can.
Front end deployed to Trash Panda
Back end built using:
- Apollo Server makes for a great backend when paired with GraphQL
- Ability to use such tools as Apollo Dev Tools for quick testing of our backend
- Great structuring of requests using their typeDefs.
- Amazing structure building for the backend.
- Tools such as graphiql that allow us to quickly test our requests to ensure they return the proper data.
- Creates very easy requests that the front end can use to display data.
- Used to tie together our backend with a config file.
- Allows us to use PostgreSQL for our deployed application.
- Easy to use migration and seed system.
- Used as a bundler in replace of webpack
- Doesn't use a config file to allow for easy setup
In order for the app to function correctly, the user must set up their own environment variables. There should be a .env file containing the following:
* earth911_secret - Used to pass along an API Key as supplied by Earth911.
SKIP_PREFLIGHT_CHECK - used to skip any preflight checks for our application. Set to true.
|
To test our application, we used the react testing suite from apollo. This allows us to mock a provider and test our Graphql/Apollo functionality within our React app.
From the great mind of Kent C. Dodds, is react testing library. A brilliant way to test your React components in a way that allows for proper testing coverage.
Jest is an industry standard way of testing. We implemented it along with the aforementioned testing dependencies. We did not use express with our application.
npm i - used to install all dependencies.
npm run startDev - used to get the application running
npm run test - used to begin testing of the front end.
When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
Please note we have a code of conduct. Please follow it in all your interactions with the project.
If you are having an issue with the existing project code, please submit a bug report under the following guidelines:
- Check first to see if your issue has already been reported.
- Check to see if the issue has recently been fixed by attempting to reproduce the issue using the latest master branch in the repository.
- Create a live example of the problem.
- Submit a detailed bug report including your environment & browser, steps to reproduce the issue, actual and expected outcomes, where you believe the issue is originating from, and any potential solutions you have considered.
We would love to hear from you about new features which would improve this app and further the aims of our project. Please provide as much detail and information as possible to show us why you think your new feature should be implemented.
If you have developed a patch, bug fix, or new feature that would improve this app, please submit a pull request. It is best to communicate your ideas with the developers first before investing a great deal of time into a pull request to ensure that it will mesh smoothly with the project.
Remember that this project is licensed under the MIT license, and by submitting a pull request, you agree that your work will be, too.
- Ensure any install or build dependencies are removed before the end of the layer when doing a build.
- Update the README.md with details of changes to the interface, including new plist variables, exposed ports, useful file locations and container parameters.
- Ensure that your code conforms to our existing code conventions and test coverage.
- Include the relevant issue number, if applicable.
- You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you.
These contribution guidelines have been adapted from this good-Contributing.md-template.
See Backend Documentation for details on the backend of our project.