Inspiration
We wanted to discover more about Montreal and enjoy its vibrant downtown area, but we often struggle making plans, so we came up with Meal Mates. This app allows you to like and save local restaurants as well as find matching restaurants with your friends. This is the perfect solution to our issue because now we can just scroll through interesting restaurants, and when we find a match, we know we have a friend who is also interested in visiting the same place. The only step left is to reach out to them!
What it does
Meal Mates allows users to swipe through restaurant images sourced from the Google Maps API, showcasing photos curated by the owners. Much like Tinder, you can swipe left to discard a restaurant or swipe right to save it to your list of liked restaurants. Users can search for other users using their usernames and follow them, which unlocks the ability to see a list of restaurants that both users have liked. If you swipe right on a restaurant that a friend has also saved, the app notifies you of a match and saves it in a dedicated section for matched restaurants. Additionally, the app includes a section for restaurants you have saved individually and features a login/signup page. Once logged in, the page transforms into a profile, unlocking the app's full functionality.
How we built it
We divided the work between frontend and backend teams. The backend team set up the database using Django REST API and SQLite to handle user and restaurant data. They also created tables to store relationships, such as which users saved which restaurants and which users follow each other. The frontend team focused on building a mobile app using React Native and integrating it with the backend via API calls for data persistence.
To collect initial restaurant data, we used the Google Maps API. This involved parsing image links and ensuring we retrieved high-quality owner-curated images. Once the framework was ready, we integrated all components by connecting the backend and frontend through POST, DELETE, and GET API calls.
Challenges we ran into
We encountered challenges at every stage. On the backend, none of us had prior experience with Django REST API, so we had to learn everything from scratch, including how to set up the database and manage relationships between tables. Planning the database schema and ensuring it captured all necessary relationships was particularly tricky.
On the frontend, we faced challenges as well, particularly in handling app navigation and connecting the UI with the backend. The data collection process from Google API posed another hurdle, as the API provides a mix of random user posts and owner-curated images. Extracting the right images required manual parsing due to time constraints.
The biggest challenge was integrating the frontend and backend—making API calls from the app to query the database and posting user actions to update the records. We also had to overcome task splitting and version control difficulties, as coordinating work and merging changes in GitHub required practice and mistakes before settling on an efficient workflow.
Accomplishments that we're proud of
We’re especially proud of creating a fully functional full-stack mobile app despite having no prior experience with either backend or frontend development. Setting up a working database and connecting it to the frontend with functional API calls was a major achievement. Additionally, we successfully implemented user authentication and session management and learned new frontend libraries like Expo, NativeWind, and React Native.
What we learned
This project was an incredible learning experience. We gained skills in Django REST API, SQLite, and React Native, and became familiar with using the Google Maps API to extract and process data.
What's next for MealMates
We would like to add a larger dataset of restaurants to increase the diversity, for the purposes of the project we worked with ~50 local restaurants but ideally we would have enough to cover at least most of Montreal.
Another thing we would like to add is to improve the restaurants recommendation algorithm. Lastly we would like to add an interactive map where you can view where the restaurants you liked are located.
Built With
- css
- django
- django-rest
- expo.io
- google-image-search
- google-places
- javascript
- nativewind
- python
- react-native
- sqlite
- tailwind
- typescript
Log in or sign up for Devpost to join the conversation.