{"id":24516679,"url":"https://github.com/manjillama/realtime-firestore-pagination-react","last_synced_at":"2026-05-10T17:11:23.688Z","repository":{"id":119616812,"uuid":"465207958","full_name":"manjillama/realtime-firestore-pagination-react","owner":"manjillama","description":"Get real time Firebase Firestore update along with pagination.","archived":false,"fork":false,"pushed_at":"2022-03-02T08:01:21.000Z","size":1281,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"dev","last_synced_at":"2025-01-22T01:28:50.369Z","etag":null,"topics":["firebase","firestore","reactjs","realtime-database","typescript"],"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/manjillama.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":"2022-03-02T07:52:17.000Z","updated_at":"2024-06-02T15:31:05.000Z","dependencies_parsed_at":null,"dependency_job_id":"7b821cb0-d3f7-4bf0-9e18-99fe0b7a3910","html_url":"https://github.com/manjillama/realtime-firestore-pagination-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manjillama%2Frealtime-firestore-pagination-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manjillama%2Frealtime-firestore-pagination-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manjillama%2Frealtime-firestore-pagination-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/manjillama%2Frealtime-firestore-pagination-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/manjillama","download_url":"https://codeload.github.com/manjillama/realtime-firestore-pagination-react/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243719356,"owners_count":20336596,"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":["firebase","firestore","reactjs","realtime-database","typescript"],"created_at":"2025-01-22T01:27:10.720Z","updated_at":"2026-05-10T17:11:23.630Z","avatar_url":"https://github.com/manjillama.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Firebase firestore real-time pagination example\n\n## Getting started\n\n\u003cdiv\u003e\n  \n  ![](./demo.gif)\n  \n\u003c/div\u003e\n\nIn this example demo app, we're fetching 4 posts at a time sorted by **createdAt** timestamp field in descending order. The real-time update listener is attached only for the first time fetched data. Hence, works only for newly created post with a **createdAt** timestamp of greater than initially fetched ones. New posts are showed at top of the list.\n\n### Add firebase configuration file\n\nGo to `./src/utils` folder and create a file with name `firebase-config.ts`. Add your firebase app configuration there. More info on getting started with firebase go to [https://firebase.google.com/docs/web/setup](https://firebase.google.com/docs/web/setup).\n\n```js\nexport const firebaseConfig = {\n  apiKey: \"\",\n  authDomain: \"\",\n  projectId: \"\",\n  storageBucket: \"\",\n  messagingSenderId: \"\",\n  appId: \"\",\n};\n```\n\n### Cloud Firestore\n\nHead to your Cloud Firestore console and create a `posts` collection. Add few documents with a field of `title` (string) and `createdAt` (timestamp) and you're good to go. When you run the application you should already see some posts already fetched.\n\n### Run application\n\n```sh\nyarn install # Install dependencies or npm install\n```\n\n```sh\nyarn start\n```\n\nor\n\n```sh\nnpm start\n```\n\nRuns the app in the development mode.\\\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\\\nYou will also see any lint errors in the console.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanjillama%2Frealtime-firestore-pagination-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmanjillama%2Frealtime-firestore-pagination-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmanjillama%2Frealtime-firestore-pagination-react/lists"}