Our Website
https://main--bruin-menu-checker.netlify.app/
Inspiration
We often find ourselves clicking through different dining hall menus, searching for one item in particular, which can take a lot of time. We thought other students might have this experience too, so we decided to create a website that would tell them when their favorite dishes would be offered! Our website could also help those trying to eat healthier or trying to incorporate certain foods into their diet, and we hope users find it useful!
What it does
Our website prompts the user to type in the dishes they're searching for, and suggestions pop up under the search bar with menu items that include the keyword entered. The user can input multiple menu items to see their availability all at the same time, or clear the result to check out each item individually. After entering, the dish appears under the dining halls that offer them during certain meal periods for the next six days!
How we built it
We used React framework, html, css, and Javascript to design and implement the logic for the script. The user inputs a menu item using a text box provided by React's Autosuggest and we linked an external JSON file that we wrote to output suggested search option. Using react to scour the detailed bruin menu, we checked the html for keywords that the user inputs. Upon finding the keyword, it will display the menu item on the webpage.
Challenges we ran into
We found front-end development to be especially challenging, as we had no prior experience. We had a two person team and we both inexperienced in CS (CS31 and CS32 students) so we lacked a lot of knowledge about conventional code writing, using libraries, frameworks, and formatting CSS. CSS was especially difficult since we have both only learned back-end code, so we essentially went in blind and used trial and error.
Accomplishments that we're proud of
We're proud of the websites functionality! We'll definitely be using the website in the future, and we hope other's will too! We're also proud of how we communicated throughout the process to come up with a design, implementation, and final product. Even though we struggled through the CSS, we were pretty happy with the eventual appearance of our website and it looks clean while working effectively.
What we learned
We learned that coding is challenging but also super fun! We gained lots of hands on experience working with css, js, and html for the first time, and we learned so much invaluable information.
What's next for Bruin Menu Checker
We hope to expand to other residential dining halls! We hope to account for more menu items in our suggested item search as we had to manually input each item into a JSON file. We also hope to improve the speed of the website so the user can get a quicker response upon searching for an item.
Log in or sign up for Devpost to join the conversation.