- App using the very latest Ionic 6 with React to show Yelp REST API data with locations on a map
- Tutorial example code from Alan Montgomery, Senior React Dev with changes to code and SCSS colors.
- Note: to open web links in a new window use: ctrl+click on link
- Yelp REST API key required
- New Ionic 6 bottom sheet drawer modal used to show list of places, activated by an Ionfab button
- Restaurant Finder Ionic-React UI app by Alan Montgomery used to try out new Ionic 6 bottom sheet drawer modal
- Yelp REST API http calls made using Axios from express app
Server.js
-
Ionic/React v6 used to create app
-
React v17 JavaScript library
-
Capacitor v1 cross-platform app runtime
-
React Dev Tools Chrome extension to help with debugging etc.
-
React Context to pass data down the component tree
-
React Hook State to use state
-
Yelp Developers REST API - key required
-
pigeon-maps v0.19.7 ReactJS maps without external dependencies
-
Axios v0.21.1 promise based HTTP client for the browser and node.js
- Install dependencies using
npm i - Add Yelp API key to
server.js node server.jsto start server- Run
npm run startorionic serveto open the frontend athttp://localhost:8100/
- Run
ionic buildto create build files - If you don't have it already then Install Android Studio (on Windows 10 Home in my case)
- Connect mobile device to Android Studio via USB. To go into dev mode on Realme 5 Pro mobile phone connected via USB to Android: Go to 'About Phone'/'Version Baseband & Kernal' in phone settings then click 7 times on 'Version' and enter phone access code. Go to Settings/Additional Settings/Developer options and enable 'USB debugging'
Tab1.jsxIonFab button activates IonModal that opens to display Yelp REST API search data and can be swiped to close
<IonFab vertical="bottom" horizontal="start" slot="fixed" onClick={() => setShowListModal(!showListModal)} > <IonFabButton> <IonIcon icon={list} /> </IonFabButton> </IonFab> <IonModal isOpen={showListModal} onDidDismiss={() => setShowListModal(false)} swipeToClose={true} initialBreakpoint={0.6} breakpoints={[0, 0.6, 1]} backdropBreakpoint={0.6} > <ListModal hideModal={() => setShowListModal(false)} searchTerm={searchTerm} search={setSearchTerm} records={results} /> </IonModal>- Status: Working
- To-Do: Nothing
- Alan Montgomery: First look at the Ionic Bottom Sheet Drawer with map - Ionic V6 Beta (React)
- Github: ionic-restaurant-finder
- N/A
- Repo created by ABateman, email: gomezbateman@yahoo.com