We were inspired by the React workshop for beginners here at Hack the Valley 3. We wanted to use this library as soon as possible. We thought that making an e-commerce site would be a fun project to implement React.

What it does

As of writing this, Nutrionia offers a catalog of food items that can be added to your cart. In reality, it's just a basic e-commerce site but we're planning on adding some unique features such as nutrition information provided by API calls that provide nutritional information as well as computer vision to analyze our products.

How we built it

We mostly used JS with React. The majority of animations were created with the Anime.js library and we used Google Cloud Platform to identify food items with computer vision.

Challenges we ran into

We wanted to collect mock data through an API for our e-commerce website but we never received their authentication so we had to create our own mock data.

Another challenge we faced was getting animations to work properly from Anime.js. It was difficult for us to wrap our head around what was going on at first but eventually, with a lot of trial and error, we managed to get through it.

Accomplishments that we're proud of

We're really proud of the aesthetics of our client. Our last hackathon had the worst possible UI imaginable. This only being our 2nd hackathon, I think we really made an improvement and we're all really proud of that.

What we learned

We were planning on working with React for a very long time, and what better time to start learning than at a hackathon with workshops on it?

What's next for Nutrionia

We were thinking about continuing Nutrionia and adding filters in regards to nutritional information. Perhaps you wanted to sort items by calories or carbohydrates, we'd love to do that.

Share this project: