- 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.js
to start server- Run
npm run start
orionic serve
to open the frontend athttp://localhost:8100/
- Run
ionic build
to 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.jsx
IonFab 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