Going out to eat with friends is a great way to catch up and enjoy each other's company. But it can be a hassle to find a place that everyone likes. Dinder helps you find a place that everyone agrees on.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
Like Tinder for food, Dinder uses swipe matching to decide on the perfect place for your next meal. Users are able to create accounts and log in, set profile information and location details, and swipe through a deck of restaurants tailored to their occasion. Each card in the deck contains real-time establishment data sourced from Google Maps which is stored alongside user votes on the backend → DinderIsServed.
iPhone.14.Pro.Max-Simulator_02-24-2023.at.04.24.mp4
Show Images
You’ll need to have modern versions of node.js (LTS >=16.18 recommend) and yarn or npm installed.
- Install packages with
yarnornpx expo install. - Copy environment variables so you can safely add secrets if necessary:
cp .env.example .env
- Run
yarn startornpx expo startto start the bundler. - Open the project in a React runtime to try it:
- iOS →
yarn iosornpx expo run:ios - Android →
yarn androidornpx expo run:android
- iOS →
Dinder is a passion project that solves a problem that many can relate to. I enjoy building fun, engaging things that add value to people’s lives. The idea driving Dinder fits this bill and is an excellent excuse to learn and play with new & exciting technologies. I initially started building the app for the browser, leveraging Next.js as a React framework and serverless API. However, I knew its true user experience was destined for mobile phones. This codebase is now a viable user-facing client for Dinder’s new life as a native app on iOS, Android— and eventually web-based platforms.
This project was made using React Native and Expo. I used TailwindCSS for styling and Tanstack Query (React Query) for handling data communications with the backend, DinderIsServed. The Google Maps Places API was used to autocomplete feast locations & get detailed restaurant data.
Why Expo vs. plain React Native?
- For many reasons, but mostly: Time
- Expo takes care of a lot of the tedious aspects of RN development - e.g. pod installs, adjusting native iOS & Android code for specific packages
- Allowing me to strategically focus on building features
- Eventually, I would like to implement the web compiler for this project as well
This full-stack project was a great way to learn about React/React Native for the frontend and building a Node + Express API server in TypeScript for the backend. I learned how to use react-query to keep client/server data in sync, and even for global state management. I also learned how to use the Google Maps Places API to autocomplete location searches, and how to use Tailwind utility classes in a React Native mobile app.
- Dinder offered an opportunity to learn about developing mobile applications using Expo and React Native.
- Practiced full-stack development to gain a deeper understanding of how the frontend and backend components interact with each other.
- Built a custom REST API server for the backend in order to meet business logic requirements.
- Strengthend my understanding of the overall architecture of modern JS applications.
- Practiced working with third-party APIs on both the client and server-side by making requests, parsing responses, and handling errors.
- Learned how to use Tanstack/React Query as to optimize data fetching, caching, and synchronization.
- The project also taught me how to create context providers to share authentication information across multiple components.
- Learned how to use Tailwind utility classes in a React Native mobile app.
- The project provided opportunities to practice my debugging skills by identifying and fixing bugs in both the frontend and backend.
- Learned how to deploy code to multiple environments, such as development, staging, and production.
With time, I plan to add the following features:
- Add a "Winner" screen to display winning restuarant after voting closes.
- Implement list of other users/friends to optionally add to new feasts.
- Switch remaining touchableOpacities to pressables
- Implement 'react-native-fast-image’ to replace RN’s Image component (even FB doesn’t use)
- Restyle homescreen for when no feast is selected to instruct the user to choose or create a new one
- Add tooltip if user presses disabled button when current feast is not closed
- Feastscreen: add error if editing or deleting a feast they don't own (status code 401)
- Save image for feast location and display it in the feasts list
- Use 'flashlist' instead of flatlist for better performance
- Add a feature so users can filter restaurants by various criteria
- Add options for that criteria in the feast creation form & persist in the database
- Add a feature so users can save their favorite restaurants
- Add automatic dark mode support
- Use 'react-native-haptic-feedback' to add a vibration effects
- Refactor the code to use TypeScript for better type safety
- Add Detox E2E testing
- Add more detailed documentation
See the open issues for a full list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Andrew Tapper - @thinktapper - andrew@tapper.codes
Backend | REST API Server: https://github.com/thinktapper/DinderIsServed
Parent Project: https://github.com/thinktapper/dinder
Distributed under the GNU GPLv3. See LICENSE for more information.