philakit

Inspiration

Our team was inspired by the lack of resources funneled to nonprofit organizations and causes that truly bring about a positive impact in our world. We have created philakit to encourage people to not only purchase products that are environmentally friendly but provide them with a community of like-minded people and resources to find nonprofit organizations to donate to. We want to promote mindful, ethical, and community-building consumption that goes against the grain.

What it does

There are two main components of philakit. First is the web application which allows a user to create an account, post blogs, and find resources to help them better spend their money. In addition, we have built a philakit chrome extension, which reads in the url of the user's current page and gives them recommendations of nonprofit organizations that work to better the environmental areas the product degrades. It also displays the ESG of the company listing the product to promote mindfulness and awareness around its environmental impact. Through the chrome extension, the user can access the philakit website as well.

How we built it

Our project uses many technologies in conjunction. The data processing was implemented through python, leveraging numerous APIs and web-page parsing methodologies to extract the necessary data of the product, company, relevant non-profits, and current crises occurring internationally. This back-end data processing communicated with our front-end site through Flask, leveraging HTTP GET and POST requests to take inputs from the site and push relevant data to it. The chrome extension was built using Typescript for styling and webpack to configure and build the extension. For user authentication and storage of blog posts, Firebase Auth and Firestore were leveraged. Finally, the web application was built using React.js, react-router-dom, Axios, and react-iframes and was deployed via Surge. Our team split up work by person: Tammy and Hallie created the React frontend, Chely implemented Firebase and the Chrome Extension, and Kory handled data parsing.

Challenges we ran into

During the development of philakit, we ran into trouble ensuring that the various versions of technologies used were compatible. For example, we had to troubleshoot an error with react-router-dom and firebase that prevented the two from connecting; updating react-router-dom from version 5 to version 6 ended up solving the problem. Implementing a smooth and robust full-stack experience was difficult as well. Leveraging a new technology like Flask to have the front- and back-end communicate meant learning a substantial amount of new syntax, thinking of API calls at a low level, and working as a team to understand both ends of the project as a whole.

Accomplishments that we're proud of

Within 36 hours, we were able to create a sophisticated full-stack web application that leverages relevant technologies to promote good for our society and the economy. This was possible thanks to effective communication, ensuring intermediary deadlines were met, and approaching version control management with organization and frequency. Each member of our team has learned a variety of skills, both in the technical and personal sectors. This project has magnified the importance of communication, collaboration, and open-mindedness in software development.

What we learned

Many of the technologies utilized were new to members of our team. Webpack, Flask, and Typescript functionality had to be troubleshot, tested, and examined as we learned their functionalities and drawbacks. The full-stack application we have implemented has given us a better perspective on the components required to deliver a product that is functional, scalable, and impactful

What's next for philakit

There are many nexts for philakit. In the future, we hope to implement an even more sophisticated match-making system between products and charities that leverages natural language processing and ML classification. We also hope to expand our dataset and serialize/deserialize the information we collect into local and cloud-based servers, making the information we collect and process even more comprehensive. As for the chrome extension, we hope to improve its UI and integration with a variety of websites.

On the front-end side of things, we plan to make our webpage dynamic so it can be easily accessed on any device. We would also like to make the blog a more interactive place by adding a comment functionality, enabling users to connect with others around the world. As a general note, we hope to continue improving our design, carrying some of the styles that we added to our profile page and login/sign-up pages throughout the rest of the site.