Going out to eat with someone is an easy way to further bonds with your significant other, family member, or even an old friend you haven't seen in a while. But sometimes, we just can't seem to figure out or agree on where to eat. We, too, have experienced this issue hundreds of times. Finally, we've decided to take charge and make something that will help us choose. Where are we going for dinner??? (Applies for take-out too! Stay safe everyone!)

What it does

Dindle is a cross-platform mobile app that brings some excitement and fun to the process of deciding where to eat. Users sign in after creating an account, and then either host a session by entering a city and state or join a session by entering a host's username. Once a session is initiated and both parties are on the app, a selection of the same restaurants in the designated city will show up on both parties' phones. The app displays a swipe-able card containing the name of the restaurant, a corresponding picture, the price range, the rating, the number of reviews, and a link to the restaurant's Yelp page. Users can then swipe through this list, swiping left for "Nope, not eating here", or swiping right for "Yep, this is it!" Once the users finally "match" by swiping right on the same restaurant, it will pop up on their screen with the same information as well as a button that they can tap on to get directions to this place. Though the users are not obligated to pick the restaurant that they matched on, it's a fun way to help decide where on earth they should go eat!

How we built it

We used Javascript and React Native to build this cross-platform application. The app uses Yelp to supply restaurant information. It uses Firebase for authentication and the primary database to store user information and restaurant selections.

Challenges we ran into

Agnes: Since it was my first time working with React Native (I'm also not familiar with Javascript), it was challenging to work with the styling of screens in the application. I focused on the UI, so I ran into a lot of issues where text was going off screen or containers weren't being spaced properly. That took a lot of time, and I also had to find some other UI components that matched with what we needed. A great find was the module that we used for the swiping mechanism. 10/10 would recommend :)

Gary: This is my second time working with React Native, and I was able to apply previous knowledge of using the Yelp API to this app as well. I focused on the backend and I also had experience with Firebase + React Native integration, so that part went by quickly, although there were small issues with inserting data into the Firebase realtime database at times. The toughest part was figuring out how to work with Firebase databases to implement the connection process (hosting/joining a matching session), and we ran into a ton of bugs there.

Accomplishments that we're proud of

Branding: The name is based on the word "kindle" (kind of a spin-off on Tinder, since our app is Tinder-esque) and "dinner" combined. The logo also is welcoming and we thought that the small details of color exuded warmth and positive energy too!

Connection process: Firebase can be difficult to work with when it comes to storing slightly more complex relational data. We're very proud that we were able to get it to work with Firebase instead of resorting to other backend options.

What we learned

Agnes: React Native is also an awesome framework for building cross-platform mobile apps! I'm used to using Flutter, so I understand basic concepts of mobile app development, but it was cool to see and compare the pros and cons of Flutter and React Native while creating the UI for this application. I am definitely really interested in learning more and becoming an expert in it and will be pursuing more projects that I can try using React Native.

Gary: Firebase is a powerful tool! But it was hard to work with so I will be looking for other databases and alternatives when it comes to React Native. Something we discarded but considered was using Heroku to host a PSQL database with an API layer on top, but since we only had two people in our team, we decided to stick with Firebase, since I had more experience in working with it and I was in charge of the backend.

What's next for dindle

Since we're all still quarantined, we will definitely have time to make this app more robust and hopefully when we can go out to eat again, we can encourage our friends to try it when they're stuck and don't know what to eat.

Try It out



firebase, javascript, react-native, yelp

Devpost Software Identifier