{"id":18614965,"url":"https://github.com/andrewjbateman/ionic-react-lists","last_synced_at":"2026-04-25T21:32:19.332Z","repository":{"id":52798320,"uuid":"254340550","full_name":"AndrewJBateman/ionic-react-lists","owner":"AndrewJBateman","description":":clipboard: 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. Uses Firebase 'realtime-database'","archived":false,"fork":false,"pushed_at":"2024-11-19T02:15:07.000Z","size":2011,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-17T01:34:29.560Z","etag":null,"topics":["android-studio","crud-application","firebase-database","ionic-react","ionic5","javascript","todoapp","tutorial-code"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndrewJBateman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-04-09T10:28:22.000Z","updated_at":"2022-01-11T21:59:49.000Z","dependencies_parsed_at":"2025-02-18T03:44:58.321Z","dependency_job_id":"04e1f76f-6d1d-44d3-b1a5-aee943c8b97a","html_url":"https://github.com/AndrewJBateman/ionic-react-lists","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AndrewJBateman/ionic-react-lists","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-react-lists","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-react-lists/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-react-lists/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-react-lists/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/ionic-react-lists/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-react-lists/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32278249,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T18:29:39.964Z","status":"ssl_error","status_checked_at":"2026-04-25T18:29:32.149Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android-studio","crud-application","firebase-database","ionic-react","ionic5","javascript","todoapp","tutorial-code"],"created_at":"2024-11-07T03:27:39.398Z","updated_at":"2026-04-25T21:32:19.326Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","readme":"# :zap: Angular React Lists\n\n* 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](https://www.youtube.com/watch?v=-RtrbNJxOfQ) with custom code to hide Firebase database access data from Github.\n* **Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/ionic-react-lists?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/ionic-react-lists?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/ionic-react-lists?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/ionic-react-lists?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Angular React Lists](#zap-angular-react-lists)\n  * [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal_strength: Technologies](#signal_strength-technologies)\n  * [:floppy_disk: Setup - Development](#floppy_disk-setup---development)\n  * [:floppy_disk: Setup - Build, Android Studio](#floppy_disk-setup---build-android-studio)\n  * [:computer: Code Examples](#computer-code-examples)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: Status \u0026 To-Do List](#clipboard-status--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:file_folder: License](#file_folder-license)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n* 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.\n\n## :camera: Screenshots\n\n![Example screenshot](./img/pc.png)\n![Example screenshot](./img/firebase.png)\n![Example screenshot](./img/android_studio.png)\n![Example screenshot](./img/phone.jpg)\n\n## :signal_strength: Technologies\n\n* [Ionic/React v5](https://www.npmjs.com/package/@ionic/react) used to create app\n* [React v17](https://reactjs.org/) JavaScript library\n* [Capacitor Android v2](https://capacitor.ionicframework.com/docs/) cross-platform app run-time\n* [Google Cloud Firestore](https://firebase.google.com/products/firestore) to store Todo items in a backend database\n* [Android Studio v3](https://developer.android.com/studio) to create Android app\n* [React Dev Tools Chrome extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related) to help with debugging etc.\n\n## :floppy_disk: Setup - Development\n\n* Install dependencies using `npm i`\n* Add your own firestore config data file or install npm dotenv etc.\n* Run `ionic serve` to open the dev server at `http://localhost:8100/`\n\n## :floppy_disk: Setup - Build, Android Studio\n\n* Run `ionic build` to create build files\n* If you don't have it already then Install Android Studio (on Windows 10 in my case - see 'Inspiration' for helpful video)\n* Run `npx cap open android` to start app in Android Studio\n* 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 \u0026 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'\n\n## :computer: Code Examples\n\n* extract from `ItemList` function with todo item and edit and delete sliding buttons\n\n```javascript\n\u003cIonList id=\"list\"\u003e\n  {value \u0026\u0026\n    value.docs.map((doc) =\u003e {\n      return (\n        !loading \u0026\u0026 (\n          \u003cItem\n            doc={doc}\n            doEdit={(i) =\u003e {\n              closeSlidingItems();\n              doEdit(i);\n            }}\n            doDelete={(i) =\u003e {\n              closeSlidingItems();\n              doDelete(i);\n            }}\n            key={doc.id}\n          /\u003e\n        )\n      );\n    })}\n\u003c/IonList\u003e\n```\n\n## :cool: Features\n\n* Android Studio used to run app on an actual phone (Realme 5 Pro)\n\n## :clipboard: Status \u0026 To-Do List\n\n* Status: Working app, run successfully on an Android mobile device. Updated april 2021\n* To-Do: Use to develop a more complex app\n\n## :clap: Inspiration\n\n* [Daniel Hampikian Youtube Video: How to make an ionic 5 react app with firebase cloud firestore and capacitor: mobile and web app dev](https://www.youtube.com/watch?v=-RtrbNJxOfQ)\n* [Tim Buchalka Youtube video: Windows - Install Android Studio](https://www.youtube.com/watch?v=xrCr0A9DIMw)\n\n## :file_folder: License\n\n* This project is licensed under the terms of the MIT license.\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: gomezbateman@yahoo.com\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fionic-react-lists","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fionic-react-lists","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fionic-react-lists/lists"}