restaurant-app-reactNative

A cross-platform mobile app for a restaurant. Built using React Native and the Expo SDK. The backend is handled by json-server + ngrok.

The app allows to:

• browse dishes in the menu
• view restaurant info
• make a table reservation for a specific date and time. Submitting a reservation creates a notification on the mobile device and creates a wen event in the device's calendar.
• use swipe gestures: swiping left on an item in the menu allows to add that dish to favorites; swiping right brings up the form for submitting a comment
• register in the app. During registration users can select an avatar from their device's gallery or make a photo with the device's camera
• log in. Logging in enables users to submit comments to dishes and add items to their personal list of favorite dishes

See the screenshots folder for in-app screens.

Frontend

Implemented as a React Native app. Navigation is done via React Navigation (a Drawer Navigator is set up to contain multiple Stack Navigators). Application state is managed by Redux.

Technologies used

• ES6 JavaScript
• React Native
• Redux
• Expo SDK

Backend

Implemented using a json-server and ngrok. Json-server allows to serve the data via localhost. Ngrok allows to generate a forwarding address for localhost (this is needed because React Native is unable to work with localhost directly).

Usage

I haven't submitted the app to the iOS App Store and Google Play Store yet, so currently the app can only be run locally.

To run the app locally:

Set up ngrok

• download and install ngrok following the instructions at https://ngrok.com/download
• start an HTTP tunnel forwarding to your local port (e.g. 3005):

./ngrok http 3005

• edit baseUrl in react-native-client/shared/baseUrl.js to contain the address generated by ngrok.

Set up json-server

• npm install json-server -g
• cd json-server
• start a json-server serving the JSON data from the db.json file and static files from the json-server/public folder:

json-server --watch db.json -p 3005

This would start the json-server at port number 3005 (the same port that was configured by ngrok).

Start the client

• Make sure the mobile device and the computer are connected to the same Wi-Fi network
• install the Expo client app on your mobile device
• cd react-native-client
• npm install
• npm start
• scan the QR-code with the mobile device's camera and open it in the Expo client app.