Dining App

Home Page
Dashboard Page

Inspiration

It can get cumbersome and annoying to have to open up a web browser to check what the campus dining halls have to offer, especially as I'm walking towards a dining hall, and want to quickly browse to check where I'm going. Not only that, but my boyfriend doesn't eat cheese, and he has to carefully check the dining hall menus before choosing a dining hall he can comfortably eat at, which can be difficult, given how unorganized the campus website is, and how many choices there are. Knowing these problems, we decided to make an app to ease these problems!

What it does

This app allows you to view real-time data, filtered with customizable settings, to help students choose the best dining hall and meals for each day.

How we built it

We used react native (mainly jsx code) to create our full-stack application and our data came from UCSB's Dining Menu API. We also used expo-go to simulate our application locally. Note: If you wish to try it out, you may need to download Expo Go/XCode on your device, and when cloning our repo, please also don't forget to npm i before doing npx expo start

Challenges we ran into

We initially had a hard time getting data to be in sync with the filters for which the user will give input, which required extra attention and devotion to getting our React hooks like useState() and useEffect() to work as smoothly as possible. Another challenge we ran into was parsing and transforming our data from the JSON format we retrieved from the API to reusable, custom React components. However, we were able to resolve this issue through in-depth research and consulting with the mentors.

Accomplishments that we're proud of

We successfully parsed our API data into React Native
We successfully synced user filters with the rendering of our app ## What we learned In this hackathon, we learned how to work with HTTPS APIs, parse JSON data, and use them to create custom React Native components. We also gained experience in working with asynchronous functions, React hooks, and react-navigation. ## What's next for Dining App We hope to make our app even more personalized and customizable for our users. Our app has the potential for data analytical models that can recommend specific meals to a user each day such that they cater to their food intolerances, taste, and busy schedules. Additionally, we hope to enhance the specificity of the data we retrieve, such as getting the ingredients for each meal, to their nutritional values. Last, we hope to launch our App so that it may be available to all UCSB students who wish to have a nice meal throughout their busy day.