Inspiration

In 2021, the United Nations said that climate change is the biggest threat to our world as we know it. We as people have the power to shape the world and try to fight this. Toronto is a city with vibrant culture, traditions, and people. The city is a hub for eco-friendly businesses, and initiatives. We must all work together to try to restore the world to how it was before pollution immensely increased the speed of climate change. That is what inspired us to create ShopGreen.

What it does

ShopGreen provides an easy-to-use directory to green businesses within the City of Toronto! Simply pick from our categories and type a location to be given a list of businesses you can shop at and know you are supporting ethical practices.

How we built it

In our webpage, we used React for the frontend and Flask for the backend. In terms of data processing, we used Python to extract the CSV dataset, and perform computations on it. From there, we created a MySQL server with the Google Cloud API to store the data in an efficient and easy-to-manage way.

Challenges we ran into

There were a number of challenges we ran into throughout the creation of our project. This was our first time using many of our developer tools in this way, and we had to learn these in a very short time span. Neither of us had really used React for any of our projects, so we had to spend a lot of time learning how it works. Similarly, it was a challenge to connect the React frontend to the Flask backend. We had some challenges with the ports but were able to resolve them through consulting mentors and reading documentation.

Accomplishments that we're proud of

We are most proud of the growth we've experienced over the past 36 hours. When we began this project, neither of us really understood what we were doing, yet we've now learned an entirely new framework and figured out how to attach endpoints to a different back-end framework. We learned how to use the Google Cloud API, and spent an entire weekend learning.

What we learned

This hackathon was very learning intense for all of our group members. None of us knew how to use React prior to this Hackathon. A lot of our time was spent browsing the documentation and watching beginner videos on how to use the framework. After we learned the basics of how it works, we figured out how to tie it to Flask for the back-end. Our team already had a bit of experience working with Flask, but never alongside a front-end framework. We also learned how to remotely connect to a VM with the Google Cloud API, and how to use their Cloud SQL service.

What's next for ShopGreen

We would absolutely like to continue building upon this project in the future. After UofTHacks, we plan to add the features we did not have time to add this weekend. We plan to implement geocoding to find a list of a certain number of businesses near you, and to have the output formatted in a user-friendly way.

Share this project:

Updates