Project Description

“NcRA: North Carolina Recycling Aide” is a website that helps people to find and get directions to nearby solid waste facilities in state of North Carolina based on their current location. It has a maps-search page and data viewing page. On the maps-search page, you can search the nearby solid waste facilities based on waste types and actions, see the detailed information of a selected facility and get directions to the facility. On the data viewing page, you can view, search and download the solid waste facilities you are interested in. The download support both Excel and PDF formats. The website is developed in Python 3.9 using Flask micro-framework, as well as Flask-Restful, Kendo UI for jQuery, Google Maps API. The source code is hosted on GitHub (https://github.com/yayazhao/RecyclingAide/), and the website is hosted on Heroku (https://recycling-aide.herokuapp.com/).

Why Do I Do This Project?

Recycling can help to protect environments indefinitely. But sometime its not easy to find the right facilities. My parents often spend a lot of time on searching when they need to deliver some wastes, for example, used papers, light bulbs, printer toners. Google maps is a great tool, but to use it properly you need to first know the appropriate keywords for a search, especially when you want to deliver multiple types of wastes. And often there is too much irrelevant information shown. Below is a screenshot for a search using key words “waste papers battery toner”. It does give a recycling center back, but we still don’t know if it can accept the three types of wastes.

On the other hand, some government sites can provide accurate information but are not so user friendly. Below is a screenshot that shows a search using “battery” as keyword on the North Carolina Waste Management Site Locator Tool site. It did not show what I want to find, and it only brought up one facility.

That is why I did this project: do a search based on current location, according to waste types and actions, and show a bunch of nearest facilities.

Implementation

I started the implementation from data collection. Then I chose Flask framework to build the website, Flask-Restful to provide data services, Kendo UI for jQuery to provide front end support, and Google Maps API to provide the map services. GitHub was also chosen to host the code, Heroku to host the website, and JetBrains PyCharm as the IDE to do development.

The Data

After an extensive search, I chose the Solid Waste Facility Lists dataset from NC DEQ as the starting point.

The Website

The whole website is developed as a Flask App using Python 3.9. The main file is the app.py in the root folder. Web pages are developed as JINJA templates in the templates folder, static contents are served from the static folder, data providing code resides in the data folder, and the routing code locates in the service folder. All the required Python packages are kept in the requirements.txt in the root folder. The website is hosting on Heroku and run by Gunicorn. A Procfile is kept in the root folder to guide Gunicorn to start the web application. The website supports HTTPS. The certificate related files are in the root folder: server and server.key.

The Data Services

The facility list is saved in the data folder as CSV file. The file sw_facility_dao.py is used to load the CSV file. On top of it, the data is served to front end using the RESTful API using Flask-Restful.

The Front End

JINJA2 and HTML5 are used to provide the overall layouts. Google Maps API is used to provide the maps services. Kendo UI for jQuery is used to manage the frontend data and views, and provide some advanced UI components (the multiple tabs and the data grids etc.).

Results

At last, the website gets developed and deployed onto Heroku. It can be accessed from https://recycling-aide.herokuapp.com/.

The Maps Search Page

The default page is the maps search page. It shows the nearest facilities to the current location of the web browser being used. The maps search uses Google Maps. Once the search page displayed, besides the standard Google Maps tool buttons, you can see two dropdown lists and one search button on the middle top of the map. The left dropdown can be used to specify for the waste type, and the right dropdown list for the waste action. After the waste type or action changed, if you click the search button, the corresponding nearest facilities will be shown on the map. If you click on a facility mark on the map, additional detailed information will be shown, including a link that leads you to Google Maps direction page.

The Data Page

In case people want to see the solid waste facility data, a page for that is also provided. The page has a data gird to show the facility list, including a facility’s county, waste type, phone number etc. It is paginated and number of the facilities per page can be customized. It also provides a search tool to search and display the related facilities only. The data can also be downloaded as Excel or PDF file.

Future Work

There is a huge space to improve this application. In the future, I plan to do the below enhancements:

  1. Integrating with more datasets, ultimately to cover all the states in the United States instead of only North Carolina,
  2. Developing smart phone Apps to support real time navigation,
  3. Developing a Siri-like voice conversation softbot to interface with the smart phone Apps.

Built With

Share this project:

Updates