What it does

Sustainacity is a website that aims to do exactly what its slogan says - make cities and communities more sustainable. It does this in two key ways. The first is by providing a platform for users to share acts by themselves that are environmentally friendly and habits that are sustainable, therefore motivating and encouraging others to do similar things. Second, it provides an interface where users can easily discover nearby organizations that are doing things that promote environmental sustainability and can help citizens live more sustainably as well. Users interested in learning about environmental sustainability themselves can ask the EcoBot, a chatbot that is always ready to answer your questions about living sustainably.

Project Architecture

All pages of the website utilize Bootstrap for formatting and making the website responsive. Flask and Python are used for the backend of the website. Firebase is used for the Database of the website, specifically the posts. Google Dialogflow is used for the chatbot and LeafletJS for the map. Heroku is used to host the website. We chose these tools for mostly two reasons: time and versatility. Firebase is really easy to get started with on the site. We chose Python and Flask because again they are really easy to get going with, and most of our team had some kind of a grasp of Python. Heroku was chosen, because of there fantastic Github connection we were set up on the web in minutes, with little need for configuration. Bootstrap was a great way to get started with a great looking frontend, especially through the wonderful Bootstrap Studio.


Posts is a place for you to show environmentally sustainable things you have been doing. It is meant to use Firebase to hold the details of the presented posts, alongside user data.


The 'Organisations' page consists of two main components - a map featuring locations of organizations, and the same organizations in a list with more details. The map was built using LeafletJS, a JavaScript library for interactive maps. The locations and organizations were entered into a JSON-like structure in the JavaScript of the organizations' page. The program loops through these entries and places them on the map in addition to populating the list with them. (All entries were manually sourced by the developers of this project, as were their details. In the future, we expect organizations to reach out to our team to have themselves verified and featured on the website).


The EcoBot was built using Google Dialogflow. It is trained to answer questions about 10 broad topics related to sustainability, each of which have multiple unique answers that were sourced from a variety of websites and edited for clarity and context. EcoBot's logo was built using icons from fontawesome.com, edited in the Pixlr photo editor.

Challenges I ran into

Over the course of the development cycle for this hackathon, we faced numerous issues and challenges. The one major challenge we faced was having to effectively start over from scratch about a day before the deadline. This was due to the unavailability of a key API required for the functioning of this project, without which our project would be crippled. This was naturally a crushing blow to us, as we had lost 24 hour's worth of excellent work and bug-fixing. However, due to a fruitful brainstorming session amongst team members and excellent work the next day, we were able to create SustainaCity, a product that far exceeds what was our wildest expectations at the start of the hackathon. Even this did not knock us from completing the project to the best of our abilities. Posts, on the other hand, was the hardest part of the project due to the complexities of getting the Firebase to link with the webserver. At the time of writing this, this part still isn't completely solid. Another hard part was getting the Flask files to serve, the HTML, alongside the CSS and Javascript, which decided to fail in the final hour of testing, we ended up switching to a single page format, which still didn't work.

What's next for SustainaCity

We want to take SustainaCity to the next level and have various plans for this. Our primary aim is to expand the user base to drive the generation of more posts as well as have more organizations promote their initiatives and help communities live more sustainably. Through this, we hope to further our goal of making communities and cities more sustainable by the sharing of acts and initiatives of the people. We plan to fix, improve and expand the features we failed to complete within the three days of the hackathon

How to view?

You can view the site in a web browser, but starting with the homepage.html file in the Templates folder, you can then use this to navigate the site. Sadly the proper version failed to be glued together and working in time, but feel free to look around the other files, to try and get a view of what we are trying to achieve and what progress has been made on the parts that haven't been completed.

Share this project: