nomnom

Inspiration

We were inspired to build NomNom for one main reason. When we are bored, it is always difficult for us to decide what to do. And, as we are both very passionate about food, what better way than to develop a platform that finds you recipes based on your mood!

What it does

The purpose of NomNom is to generate food recipes based on one’s mood. When you visit the site, you will see six different moods available: happy, sad, adventurous, angry, bored, and anxious. When you click either of these buttons, a random list of recipe suggestions is generated based on your mood. You can view the recipe by clicking the "view recipe" button. We have one additional feature on this web app. On the top-right corner of the webpage, there is a “Find Sweets Near You” button. When you click this, it will take you to a page that has a map. You will be asked if your location could be accessed, and if you click allow, around 20 nearby dessert-related restaurants have a marker on them. When you click the marker, on the blue/purple box to the left of the webpage, the food place’s name, address, and website pop-up. You can also see the place’s ratings.

How we built it

NomNom was built using HTML, CSS, and React JS. We used three APIs, the Google Maps API, Places API, and Tasty API. The Google Maps and Places API were used via Google Cloud.

We split the work with Aditi working on the Maps portion and Archi working the React JS and UI.

HTML was used to implement the Google Maps and Places APIs.

Challenges I ran into

We came across a handful of obstacles when building NomNom. One main obstacle we faced while was generating the recipe suggestions. One of the main aspects of the application, recipe generation, was difficult to start because of errors with integrating the Tasty API. However, after extensive googling and playing around with the JS fetch API, we figured out how to get the data properly. With the Google Maps API, we faced some issues with the panel and marker displays. The markers were not appearing as they should and the panel was not showing the full website URL. To fix the panel problem, we had to make a few changes to the CSS. For the Maps markers problem, we had to fix and change some variables in the HTML code.

Accomplishments that I'm proud of

Upon the completion of this project, there are several accomplishments we are proud of. First of all, we were able to successfully use APIs, which none of us were too experienced in doing. Secondly, we learned how to geolocate a user using the Google Maps API in HTML, by using the property of W3C Geolocation standard navigator. Moreover, we were able to further develop our skills in React JS.

We were introduced to and able to work with many different topics, which we are both very proud of.

What I learned

We learned how to use the Google Maps, Places, and Rapid APIs. Both of us were able to further enhance our knowledge on APIs and Google Cloud. Throughout the process of developing NomNom, we came across various errors. As a team, we were, together, able to troubleshoot and fix the issues. Moreover, we both were able to learn more about working in React JS. As none of us are very experienced with implementing APIs in React JS, we were able to walk through many tutorials and find our way through.

One key topic we learned in this hackathon, in terms of the Google Maps and Places API, was how to geolocate users. When you want to access a user’s location, you must identify their location, which we learned and did through HTML.

Overall, participating in “New Hacks, who this?” really helped us both in enhancing our coding skills and knowledge to build a cool application!

What's next for nomnom

We have several ideas in mind to take NomNom a step forward. We want to change the way nearby locations show up on the “R U Hungry” page. Instead of having them appear when you click a marker, we want all the locations to show up in a list and allow users to move forward from there. Also, we would want to custom style the Google Map to make it more appealing and website-themed. For the recipe suggestion aspect, we will add options to add dietary restrictions and allergies.