We were inspired by the growing need for tools to make shopping more efficient and safe, especially due to the current situation with COVID-19. We saw that people needed a way to ensure that the stores they wanted to visit had the products they wanted in stock, and that those stores would be open at the time they intended to visit. Additionally, we saw that we could make the shopping experience easier if people could plot out their routes, and see where to avoid by viewing other user's maps as well.

What it does

HeartMart offers users the ability to see if an item at a local store is in stock, as well as if the store is open. HeartMart gives users an opportunity to use Google Maps directly from the browser to explore nearby stores, and later offers a planning space to plot their route through the store to retrieve and pay for their products.

How we built it

We built HeartMart through the IDE with HTML/CSS/JS. We also used a Google Maps API, and Figma for designing the logo, theme colors, and store layouts.

Challenges we ran into

One of the biggest challenges for us was implementing the Maps API since we are both primarily front-end developers. One of our team members did a lot of experimenting and research to figure out how to connect Google services to the program. We also learned how to connect other external items like our Figma routes to the program through iframe commands.

Accomplishments that we're proud of

We are proud of the overall appearance and UI design of our project. We love how the project's color scheme ties everything together, and we are proud of the functionality of some of the features that we coded.

Since both of us are mainly front-end developers, we are especially proud of gaining some backend knowledge, including the implementation of APIs.

What we learned

We learned some basic code for back-end development, and expanded our knowledge on how to utilize Figma, in which we both had limited experience in. We also continued to improve our front-end web development skills in HTML and CSS, and picked up a few new CSS properties along the way!

What's next for HeartMart

In the future, we hope to keep improving the store and product search functions to recognize more stores and products. We also want to work on the back-end even for the route plotting feature so that everything works properly. We aim to implement a settings feature for users to change colors of the routes and layout to be inclusive of those who are colorblind or have different preferences. In addition, we hope to add a function that allows users to determine and limit the amount of time they will be in the store to promote efficiency and sustainability in buying less.

Prize categories

We are shooting for Best Overall Hack, Best General Hack, Popular Vote Winner, Best High School Hack, or the Top 1517 Fund Pick.

Built With

Share this project: