UCSD Smart Dining Services

A user-friendly and intuitive platform for viewing optimal entree meals within a given calorie range across various dining halls in UC San Diego.

Comment

UCSD Smart Dining Services

By Shravan Hariharan, Shungo Najima, Max Cohen, and Elias Fang

The ideation process started a week before the hackathon for us, in small pep talks. Before our proper brainstorming meetup, our ideas were an app or website that allowed users to find study groups with people from their class and an app or website that students could use to sell used textbooks. Either way, even before our brainstorming session, it was evident that our focus was on the UCSD community and UCSD students in particular.

In the brainstorming session, we came up with several more ideas, and we came down to create an app or website that had one of four functions. In the end, we decided to make an app that would recommend food options depending on calorie amounts that users inputted.

  • [ ] Subtitles to podcasts
  • [ ] Picture to text (.ppt)
  • [ ] Win hackathons
  • [X] Calorie app

Within the first hour after the commencement of the hackathon, we assigned roles, came up with what the front-end and back-end would develop, and figured out what languages and tools we’d used for the project. In the end, Shungo and Elias were assigned to front-end development and Shravan and Max were assigned to back-end dev.

As mentioned, the front-end portion of our project was covered primarily by Shungo and Elias. Since we were responsible for what the user sees, our main inspirations came from nice looking websites. In particular, we took inspirations from the UCSD HDH site itself. One feature we particularly liked about the site is the fact that it used high-quality pictures of food as backgrounds, and hence we implemented pictures of food on backgrounds of all pages. To do this, we used vanilla HTML/CSS to code, but we came across some challenges along the way. The first was the formatting. We decided to use a font that we downloaded, but some browsers and devices didn’t support the font. That changed the font to be the default San Serif font, which messed with the layout of the site since the San Serif font is slightly smaller. Another problem we faced was connecting front to back-end – vanilla HTML/CSS to Node.js, precisely – and we had to convert everything to EJS. During the process, we learned the impracticality and inflexibility of vanilla HTML/CSS, and while we didn’t learn the most significant skills within HTML/CSS, we learned from mentors that learning the ever-growing React would be a good idea, and it is our goal moving forward.

Shravan and Max utilized Node.js, Express.js, and Google Firebase in order to accomplish the back-end tasks of connecting pages and web-scraping, but not without challenges either. With little to no previous knowledge of JavaScript, let alone the understanding of the cryptic paradigms of Node or Express, it was difficult for the both of them to build a sustainable back-end that effectively scrapes the HDH website and communicates with the front-end and the database. Shravan was in charge of the architecture of the back-end and its ability to interact with the other components, while Max designed the web scraping technologies using the Cheerio library and manipulating the JSON data structures in a way that is readable by the database.

Conclusively, the app we made is called Smart Dining Services, and it web scrapes calorie values from the HDH website and allows users to find foods within the desired calorie range. In the end, we were all able to learn a lot from this hackathon and we’ll continue to foster our love and knowledge for computer science.

Share this project:

Updates