{"id":21244079,"url":"https://github.com/aaronksaunders/react-course-firebase-hooks-app","last_synced_at":"2025-07-06T08:37:09.780Z","repository":{"id":39369990,"uuid":"210765610","full_name":"aaronksaunders/react-course-firebase-hooks-app","owner":"aaronksaunders","description":"Sample app using firebase-hooks and react-hooks api to manage a list of things","archived":false,"fork":false,"pushed_at":"2023-01-04T11:19:06.000Z","size":2593,"stargazers_count":16,"open_issues_count":21,"forks_count":9,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-11T14:08:04.054Z","etag":null,"topics":["create-react-app","firebase","firebase-hooks","react-hooks","react-hooks-demo","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronksaunders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-25T05:51:40.000Z","updated_at":"2022-10-03T19:17:03.000Z","dependencies_parsed_at":"2023-02-02T10:01:26.110Z","dependency_job_id":null,"html_url":"https://github.com/aaronksaunders/react-course-firebase-hooks-app","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Freact-course-firebase-hooks-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Freact-course-firebase-hooks-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Freact-course-firebase-hooks-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Freact-course-firebase-hooks-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronksaunders","download_url":"https://codeload.github.com/aaronksaunders/react-course-firebase-hooks-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225653652,"owners_count":17502941,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["create-react-app","firebase","firebase-hooks","react-hooks","react-hooks-demo","reactjs"],"created_at":"2024-11-21T01:15:43.847Z","updated_at":"2024-11-21T01:15:44.350Z","avatar_url":"https://github.com/aaronksaunders.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## react-course-firebase-hooks-app\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n---\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/aaronksaunders/ionic-react-auth-firebase/master/screenshots/Screen%20Shot%202020-04-22%20at%206.12.57%20PM.png\" width=\"66%\" /\u003e\n  \u003c/p\u003e\n  \u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\u003ca href=\"https://www.youtube.com/playlist?list=PL2PY2-9rsgl3OHIMYb1AzVG5wADUxOmUW\"\u003eClick To View Ionic React Video Playlist\u003c/a\u003e\u003c/strong\u003e\n  \u003c/p\u003e\n---\n\n\u003e Make sure you check the branches, there are different feature implemented in the branches\n\u003e - Master - implements react firebase hooks for reading and writing data to firebase\n\u003e - With Authentication - implements a Firebase Login Flow\n\u003e - Capacitor Ionic - implements the solution using ionic framework components and capacitor for mobile deployment\n\u003e - Capacitor - implements the solution using capacitor for mobile deployment\n\nSample app integrating firebase with a react application using react hooks api and [React Firebase Hooks](https://github.com/CSFrequency/react-firebase-hooks) - A set of reusable [react hooks](https://reactjs.org/docs/hooks-intro.html) for [Firebase](https://firebase.google.com/docs/web/setup?authuser=0).\n\n\u003cimg src=\"Screen Shot 2019-09-25 at 1.59.32 AM.png\" width=600 /\u003e\n\n\n## Getting A Collecting of Things\n\nThis is from firebase-hooks, it allows us to query all of the item from the `things` collection in the database in descending order based on the creation data. the `value` will containg the results of the query that we will loop through to render the list items\n```javascript\n  const [value, loading, error] = useCollection(\n    firebase\n      .firestore()\n      .collection(\"things\")\n      .orderBy(\"createdOn\", \"desc\"),\n    {\n      snapshotListenOptions: { includeMetadataChanges: true }\n    }\n  );\n```\n## Getting a Specific Thing\n\nWe use the firebase-hooks to get a specific object using the id of the object we want to retrieve\n```javascript\n  // get a document if there is an initial value\n  const [value, loading, error] = useDocument(\n    firebase.firestore().doc(\"things/\" + objectId),\n    {\n      snapshotListenOptions: { includeMetadataChanges: true }\n    }\n  );\n```\n\n## Adding Or Updating a Specific Thing\n\nif editing then we use the firebase-hooks to get the specific object using the\n`initialValue` property that is passed to the component\n```javascript\n  // get a document if there is an initial value\n  const [value, loading, error] = useDocument(\n    firebase.firestore().doc(\"things/\" + initialValue),\n    {\n      snapshotListenOptions: { includeMetadataChanges: true }\n    }\n  );\n```\nWhen saving the thing, determine if it is a new object or an existing object by checking to see if there was an `initialValue` provided as a property. If there was, then we have an object id so we need to update the object and not create a new object\n```javascript\n  /**\n   * on save determine if it is a new object or an existing object\n   * by check to see if there was an initial value provided\n   */\n  const onSave = async () =\u003e {\n    let collectionRef = firebase.firestore().collection(\"things\");\n\n    if (initialValue) {\n      await collectionRef\n        .doc(initialValue)\n        .set({ name: thing, updatedOn: new Date().getTime() }, { merge: true });\n      setThing(\"\");\n      clear();\n    } else {\n      await collectionRef\n        .doc(initialValue)\n        .add({ name: thing, createdOn: new Date().getTime() });\n      setThing(\"\");\n      clear();\n    }\n  };\n  ```\n\n## Deleting A Specific Thing\nThere is no firebase-hook to delete an object, we just used the firebase javascript api to remove the object\n```javascript\n  /**\n   * deletes item from firebase database using the id\n   * of teh object\n   *\n   * @param {*} id\n   */\n  const doDelete = id =\u003e {\n    firebase\n      .firestore()\n      .collection(\"things\")\n      .doc(id)\n      .delete();\n  };\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Freact-course-firebase-hooks-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronksaunders%2Freact-course-firebase-hooks-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Freact-course-firebase-hooks-app/lists"}