⚡ Ionic React Example

• 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

📄 Table of contents

• ⚡ Ionic React Example
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup * Development
  • 💾 Setup * Build, Android Studio
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• 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

📷 Screenshots

📶 Technologies

• Ionic/React v6 used to create app

• Ionic Colour generator

• 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

💾 Setup * Development

• Install dependencies using npm i
• Add Yelp API key to server.js
• node server.js to start server
• Run npm run start or ionic serve to open the frontend at http://localhost:8100/

💾 Setup * Build, Android Studio

• 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'

💻 Code Examples

• 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>

🆒 Features

• Side navigation drawer

📋 Status & To Do List

• Status: Working
• To-Do: Nothing

👏 Inspiration

• Alan Montgomery: First look at the Ionic Bottom Sheet Drawer with map - Ionic V6 Beta (React)
• Github: ionic-restaurant-finder

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: [email protected]