About   |    Preview   |    Tech Stack   |    Features   |    Screenshots   |    License   |    Disclaimer

🍉 YumMeals

Icons made by Freepik

:calling: About

YumMeals is an online food ordering app that resembles a simpler version of similar modern large-scale apps such as Uber Eats and DoorDash. Core features include location searching with city names, which displays a list of restaurants found within the search results vicinity, along with user register/login authentication, a settings screen with customizable user avatar and the option to store restaurant(s) as favourites.

The app also comes with an ordering and payment feature which utilizes services from the Stripe API. Users can place orders from the restaurant menu and add them to the cart before checking out. The user interface for the payment input field, with a minimalist design, can be found alongside the cart summary for easy reference to the user's order summary during the checkout process.

The integrated Stripe payment service accepts any valid debit/ credit card. However, since this isn't a fully published production app, the payment feature is set to testing mode to mimic a real-life payment flow. For this, Stripe has provided a list of sample payment card details for testing purposes that users can use to make payments in this app.

Link to test card payment details provided by Stripe 👉  https://stripe.com/docs/testing#cards

:eyes: Preview

:1234: Instructions to Preview (iOS users, see note below)

1. Head over to the Google Play Store and download the Expo Go app

   • Link: https://play.google.com/store/apps/details?id=host.exp.exponent

2. Open the Expo Go app or simply go to the Expo website and follow the instructions to register for an Expo account

   • Note: You will need an account on Expo in order to view the app!

3. After completing step 1 and 2 above, open your device camera and scan the provided QR code in the link below:

   • Link: https://expo.io/@bernn/YumMeals (Published version of app hosted on Expo)

4. After scanning the QR code, the Expo Go app will automatically load up the app

   • Note: If this is your first time opening the app, it might take a while to load up. Please be patient!

5. Enjoy! The app should be successfully loaded by now. Please feel free to play around and test out its features. If for any reason the app couldn't be loaded or any of the features are breaking, please report the issue at the link below.

   • Link: https://github.com/BernStrom/YumMeals/issues

:bangbang: IMPORTANT! - Note for iOS users

Unfortunately, iOS users will not be able to preview the published app hosted on Expo. This issue is due to restrictions imposed by Apple and not by Expo itself.

Please refer to this Expo documentation link for further information on this restriction:

• Link: https://docs.expo.io/workflow/publishing/#on-ios-you-cant-share-your-published

Due to the nature of this project objective being an educational and experimental one in learning more about working with React Native and the Expo framework in a production-like environment mimicking a professional workflow, this app isn't built for distributing officially to either the Play Store or the App Store.

For this, please refer to the app screenshots below. A mixture of both screenshot pictures and GIFs is provided as an alternative for previewing the app.

:gear: Core Tech Stack

👉  Project Architecture Diagram

• :arrow_up_small:  Expo
• :electron: React Native
• :page_with_curl:  React Native Paper
• :link:  React Navigation
• :performing_arts:  Styled Components
• :fire:  Firebase Authentication & Cloud Functions
• :credit_card:  Stripe Payment API
• :world_map:  Google Places APIs

:sparkles: Main Features

• Register & Login authentication through email & password.
• Location search through cities around the world to discover restaurants.
• Customizable user avatar utilizing mobile device camera with user permissions.
• Online order placing and checkout, along with option for users to save restaurant(s) as their favourites.
• Payment processing and authentication through Stripe. (👉 List of test payment cards for this feature)

:camera_flash: Screenshots

:memo: License

This project is under the terms of the MIT license. For more information, please refer to the license documentation.

:warning: Disclaimer

The contents of these pages are provided as an information guide only. While every effort is made in preparing the material for publication, no responsibility is accepted by or on behalf of the owner(s) for any errors, omissions or misleading statements on these pages or any site to which these pages connect. Although every effort is made to ensure the reliability of listed sites this cannot be taken as an endorsement of these sites.