Kiwi-Kart

Inspiration

As students, we always struggle with budgeting, especially when it comes to groceries. According to CBC, Canadians spend $3720 a year on impulse buys. Additionally, transportation accounts for about 24% of Canada’s total greenhouse gas emissions. This challenge inspired me to consider how technology can help students make more informed and sustainable choices. By integrating price comparison tools with carbon footprint tracking, we can not only save money but also become more aware of our environmental impact. This aligns with SDG 12 (Responsible Consumption and Production) and SDG 13 (Climate Action) by promoting mindful spending and reducing unnecessary travel emissions associated with grocery shopping.

What it does

Kiwi (Keep It Within) Kart is a price comparison tool that uses your geographic location and grocery list input to search for the best store within a chosen radius. Based on which mode of transportation you pick, Kiwi Kart will calculate estimated CO₂ emissions produced from traveling to and from the supermarket. It uses the distance between the user’s current location and the store (measured in kilometers) combined with the mode of transportation, for example, walking, biking, public transit, or driving a car.

How we built it

We built Kiwi (Keep It Within) Kart using HTML, CSS, and JavaScript, combining our ideas through a lot of trial and error. We started by designing the layout and basic user interface, then added features like grocery list input, price comparison display, and location-based search using the browser’s geolocation API. To calculate the carbon footprint, we programmed a simple function that multiplies the round-trip distance by the estimated CO₂ emission factor of the selected transportation mode. Throughout the process, we collaborated by sharing files and testing updates, even though we faced challenges like file overwrites and version mismatches. We also used the help of ChatGPT, Claude AI, Co-pilot, and Gemini to help with out process.

Challenges we ran into

We are all inexperienced in web development, and this was the first time any of us had ever worked on a project like this. Naturally, there were many moments of confusion and countless error messages along the way. On top of that, we had never worked together before, which made it challenging to coordinate tasks and manage our workflow. We often ran into problems like file overwrites and not receiving the most updated versions of each other’s code, which caused setbacks and confusion. And to be very honest, till today, we don't even know what we did. But hey, it worked out!

Accomplishments that we're proud of

We are porud that in the end of the day we created a web that works and hopefully it will be able to help and be developed into something better

What we learned

We learned a lot through this project because most of us didn’t have much web development experience at the start. Our goal was to build a website that compares the cheapest prices, and along the way we picked up a better understanding of the tools and technologies behind it.

First, we worked with HTML, which is basically the backbone of a webpage. It let us structure all the content, like the headings, text, and buttons, so everything had a place. Then we used CSS to style the site. That’s where we learned how small changes like colors, fonts, and how layout can completely change how the website feels and how easy it is to use. After that, we added JavaScript, which brought the site to life. It allowed us to add interactivity, like making sure things respond when users click or type.

On top of that, we learned how to use GitHub to collaborate. Push and pull commands were new to us, but they helped us work as a team without overwriting each other’s changes. It also gave us a taste of how real developers keep track of code and work together.

We even explored FastAPI, which showed us how the back end of a website works. It was interesting to see how it connects with the front end to deliver data quickly and efficiently, especially since that’s what made our project useful for price comparisons.

Overall, this project didn’t just teach us how to code a website, it showed us the full process of building something from scratch, from the front end to the back end, and even how to manage teamwork using tools like GitHub.

What's next for Kiwi-Kart

Looking ahead, we hope to continue improving Kiwi (Keep It Within) Kart by enhancing its features and usability. Our next goal is to integrate real-time store data through APIs, allowing users to see live price updates instead of static inputs. We also plan to refine the carbon footprint calculator by including more transportation options and emission data for delivery services. In the future, we’d like to turn Kiwi Kart into a mobile-friendly app with account features, allowing users to track their grocery spending habits and sustainability progress over time. Ultimately, we aim to make responsible shopping both accessible and engaging for students and everyday consumers.