• Start by creating or using an existing Firebase project in the Firebase Console.
• Head over to the Firestore Database section and set up your database.
• Add some data to Firestore that you'll use for pagination.

• First, install the Firebase SDK in your project.

  npm install firebase
  

• Then, initialize Firebase in your application code.
  ```
  import firebase from 'firebase/app';
  import 'firebase/firestore';

const firebaseConfig = {
// Your Firebase config object
};

if (!firebase.apps.length) {
firebase.initializeApp(firebaseConfig);
}

const db = firebase.firestore();

<div style="color:#0065ff"><h3>Step 3: Define a Page Size Variable</h3></div>

- Set a constant variable for the number of documents to retrieve per page.

const PAGE_SIZE = 10;

<div style="color:#0065ff"><h3>Step 4: Fetch the First Page</h3></div>

- Create a function to fetch the first set of documents from Firestore.

async function fetchFirstPage() {
const firstPageQuery = db.collection('yourCollection')
.orderBy('yourField')
.limit(PAGE_SIZE);
const documentSnapshots = await firstPageQuery.get();

// Store the last document for future use
const lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];

// Use the data as required
const data = documentSnapshots.docs.map(doc => doc.data());
console.log(data);

return lastVisible;
}

- Call the function.

let lastVisible = await fetchFirstPage();

<div style="color:#0065ff"><h3>Step 5: Fetch the Next Page</h3></div>

- Create a function to fetch the subsequent pages.

async function fetchNextPage(lastVisible) {
const nextPageQuery = db.collection('yourCollection')
.orderBy('yourField')
.startAfter(lastVisible)
.limit(PAGE_SIZE);
const documentSnapshots = await nextPageQuery.get();

const lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];

const data = documentSnapshots.docs.map(doc => doc.data());
console.log(data);

return lastVisible;
}

- Call the function to get the next page.

lastVisible = await fetchNextPage(lastVisible);

<div style="color:#0065ff"><h3>Step 6: Handling Edge Cases</h3></div>

- Check if there are no more documents to fetch.

async function fetchNextPage(lastVisible) {
const nextPageQuery = db.collection('yourCollection')
.orderBy('yourField')
.startAfter(lastVisible)
.limit(PAGE_SIZE);
const documentSnapshots = await nextPageQuery.get();

if (documentSnapshots.empty) {
console.log('No more documents to fetch');
return null; // No more pages
}

const lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];

const data = documentSnapshots.docs.map(doc => doc.data());
console.log(data);

return lastVisible;
}

<div style="color:#0065ff"><h3>Step 7: Optional - Implement Previous Page Functionality</h3></div>

- Store the last visible documents for each fetched page to enable navigating back to the previous pages.
- Create a function to fetch the previous page using stored last visible documents from prior pages.

let pageCursors = []; // Will contain the last documents of each page for navigation

async function fetchFirstPage() {
const firstPageQuery = db.collection('yourCollection')
.orderBy('yourField')
.limit(PAGE_SIZE);
const documentSnapshots = await firstPageQuery.get();

const lastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
pageCursors.push(null); // No previous page for the first page

const data = documentSnapshots.docs.map(doc => doc.data());
console.log(data);

return lastVisible;
}

async function fetchNextPage(lastVisible) {
const nextPageQuery = db.collection('yourCollection')
.orderBy('yourField')
.startAfter(lastVisible)
.limit(PAGE_SIZE);
const documentSnapshots = await nextPageQuery.get();

if (documentSnapshots.empty) {
console.log('No more documents to fetch');
return lastVisible;
}

const newLastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];
pageCursors.push(lastVisible); // Store the current lastVisible for possible back navigation

const data = documentSnapshots.docs.map(doc => doc.data());
console.log(data);

return newLastVisible;
}

async function fetchPreviousPage(currentPageIndex) {
if (currentPageIndex <= 0) {
console.log('Already on the first page');
return;
}

const lastVisible = pageCursors[currentPageIndex - 1]; // Get the lastVisible from the previous page
pageCursors.pop(); // Remove the last page cursor as we navigate back

const previousPageQuery = db.collection('yourCollection')
.orderBy('yourField')
.endBefore(lastVisible) // Use endBefore to move back
.limitToLast(PAGE_SIZE);
const documentSnapshots = await previousPageQuery.get();

const newLastVisible = documentSnapshots.docs[documentSnapshots.docs.length - 1];

const data = documentSnapshots.docs.map(doc => doc.data());
console.log(data);

return newLastVisible;
}

// Usage Example
let currentPageIndex = 0;
let lastVisible = await fetchFirstPage();

document.getElementById('nextButton').addEventListener('click', async () => {
currentPageIndex++;
lastVisible = await fetchNextPage(lastVisible);
});

document.getElementById('previousButton').addEventListener('click', async () => {
currentPageIndex--;
lastVisible = await fetchPreviousPage(currentPageIndex);
});