⚡ Angular React Lists

• App using Ionic with React to store todo list items in a Firebase backend. App run successfully on an actual mobile device using Android Studio v3.6.2. Code from tutorial by Daniel Hampikian with custom code to hide Firebase database access data from Github.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular React Lists
  • 📄 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

• Simple database app that allows multiple users to Create, Read, Update and Delete (CRUD) text items to a Google Firebase database from PC or phone etc.

📷 Screenshots

📶 Technologies

• Ionic/React v5 used to create app
• React v17 JavaScript library
• Capacitor Android v2 cross-platform app run-time
• Google Cloud Firestore to store Todo items in a backend database
• Android Studio v3 to create Android app
• React Dev Tools Chrome extension to help with debugging etc.

💾 Setup - Development

• Install dependencies using npm i
• Add your own firestore config data file or install npm dotenv etc.
• Run ionic serve to open the dev server 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 in my case - see 'Inspiration' for helpful video)
• Run npx cap open android to start app in Android Studio
• 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

• extract from ItemList function with todo item and edit and delete sliding buttons

<IonList id="list">
  {value &&
    value.docs.map((doc) => {
      return (
        !loading && (
          <Item
            doc={doc}
            doEdit={(i) => {
              closeSlidingItems();
              doEdit(i);
            }}
            doDelete={(i) => {
              closeSlidingItems();
              doDelete(i);
            }}
            key={doc.id}
          />
        )
      );
    })}
</IonList>

🆒 Features

• Android Studio used to run app on an actual phone (Realme 5 Pro)

📋 Status & To-Do List

• Status: Working app, run successfully on an Android mobile device. Updated april 2021
• To-Do: Use to develop a more complex app

👏 Inspiration

• Daniel Hampikian Youtube Video: How to make an ionic 5 react app with firebase cloud firestore and capacitor: mobile and web app dev
• Tim Buchalka Youtube video: Windows - Install Android Studio

📁 License

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

✉️ Contact

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