⚡ Ionic React Firebase

• App using Ionic with React to store data in a Firebase backend. All code from tutorial by codedamn
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Ionic React Firebase
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• React Effect Hook used to manually change the DOM, equivalent of lifecycle methods componentDidMount, componentDidUpdate & componentWillUnmount combined.
• Uses ion-toast notifications

📷 Screenshots

📶 Technologies

• Ionic/React v5
• React v17 JavaScript library
• React Redux v7
• React Dev Tools Chrome extension

💾 Setup

• Install dependencies using npm i
• Create your own firebase console project and add firebaseConfig to firebaseConfig.ts
• Run ionic serve to open the dev server at http://localhost:8100/

💻 Code Examples

• login function from login.tsx

async function login() {
    setBusy(true)
    const res: any = await loginUser(username, password)
    if (res) {
      console.log('login res', res)
      dispatch(setUserState(res.user.email))
      history.replace('/dashboard')
      toast('You have logged in')
    }
    setBusy(false)
  }

🆒 Features

• React Effects - componentDidMount, componentDidUpdate & componentWillUnmount combined, and embrace JavaScript closures
• Redux reducers used to modify state
• DOM Window object browser session history used to navigate
• React Redux useDispath method used to dispatch actions

📋 Status & To-Do List

• Status: Tutorial completed - all 26 videos completed. Register and Login functions work however when routed to /dashboard just shows a blank screen. Do not update.
• To-Do: Solve issue of /dashboard page - likely an issue with 'dispatch' in Dashboard.tsx.

👏 Inspiration

• CodeDamn Youtube Video Series: Ionic + React + Firebase #1 to #26
• Ionic api list of people to use in app
• Eslint doc: disallow variable redeclaration (no-redeclare)

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com