📚 Documentation: Pagination

[gewenyu99]

💭 Description

Appwrite Databases can be paginated in many ways.

While we have this page: /docs/products/databases/pagination, but this is a reference style page, not a tutorial.

Goal

Interactive tutorial focused on one of the client platforms of Web, Flutter, Android, and Apple, showcasing good pagination practices.

Content

1. Server SDK/CLI script to set up an example database with test data.
2. Setup a simple test project in Web, Flutter, Android, or Apple
3. Show offset pagination with forward, back, and page numbers
4. Show cursor pagination with a load more button
5. Discuss tradeoffs of each approach.
6. Added to src/routes/docs/tutorials

How to contribute

Pitch an outline detailing each page you plan to add and headings within, and ask to be assigned. Open a PR after the outline has been approved.

The Appwrite team will collaborate with you on the outline and PR.

Thanks for taking the time to make our documentation better 🙏

👀 Have you spent some time to check if this issue has been raised before?

• [X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• [X] I have read the Code of Conduct

[timDeHof]

Hey @gewenyu99 and @Haimantika, I would like to contribute to this issue! Here's the detailed outline for the docs!

Outline: Adding Pagination to Idea Tracker

1. Adding Pagination to Idea Tracker

1. Overview
   • Brief overview of the project's objective to demonstrate pagination
   • Explanation of the importance of pagination in handling large datasets
2. Prerequisites
   • Appwrite account and environment set up
   • Have gone through the "Build Idea Tracker with React" tutorial or clone the completed copy of project GitHub Repository

     2. Setup of the environment

3. Seeding the collection
   • Detailed instructions on seeding the collection with sample data using server SDK or CLI
   • code snippets and explanation to populate the collection with initial sample data
4. Displaying Ideas Page
   • Detailed instructions for creating the Ideas page
   • code snippets and explanation for creating a basic UI to display the list of ideas and for fetching and displaying the first set of ideas from the collection

     3. Implementing Offset Pagination

5. Introduction
   • Explanation of the Offset Pagination and its use cases
6. Implementation
   • Detailed instructions for adding forward and backward buttons and page numbers to the Ideas page UI.
   • Detailed instructions for adding the logic to fetch and display different pages of ideas
   • Code snippets and explanation for adding offset Pagination with appwrite

     4. Implementing the Cursor Pagination

7. Introduction
   • Explanation of the Cursor Pagination and its use cases
8. Implementation
   • Detailed instructions for adding a "Load More" button to the UI
   • Detailed instructions for adding the logic to fetch and display more ideas as the user request
   • Code snippets and explanation for adding Cursor Pagination wit appwrite

     5. Discussion on Trade-offs

     • Comparing offset and cursor pagination regarding performance, use cases, and ease of implementation.
     • Discussing when to use each pagination method based on the application's requirements.

       6. Next Steps

9. Conclusion
   • Recap of key takeaways from the project
   • Encouragement to explore further and optimize pagination based on the project needs.
10. Additional Resources
    • Link to the reference documentation on pagination
    • Link to the Github repository to see a version of this project with either pagination
    • Links to community forums or discussions for further assistance.

This project outline will be formatted similar to /doc/tutorials/react and will provide a focused approach to understanding and implementing pagination in the Idea Tracker using Appwrite and the web platform.

Here is some of my past work:

Blogs:

• How to deploy the Face Recognition API for free with Render - Alternative To Heroku
• ReelWatch: Appwrite X Hashnode Hackathon

[tessamero]

hi @timDeHof, I assigned it to you, however, I will need @gewenyu99 to give you the thumbs up before moving forward. You should hear back first thing tomorrow :)

[gewenyu99]

@timDeHof Amazing outline. I will quote you as an example for what outlines should look like ❤️

A few points:

• There's a third mode, where we do pagination, with a next and previous page buttons, and display a "current page" only with cursor pagination ;) This one is a little tougher, but it would benefit a lot of people as well.
• I would stick with React + Node.js if you are using some server script for ease of understanding.

Otherwise you should be good to start!

[gewenyu99]

@timDeHof Another potential suggestion, how do you feel building an app without authentication, and not have this depend on the Ideas tracker project? Might be easier for those just interested in pagination?

[timDeHof]

Thank you @tessamero for assigning this to me. I will begin working on it.

Thank you @gewenyu99 for the compliment on the outline. The third mode sounds really cool hybrid of the two and will like to work on it at a later time.

Last night, I played around with seeding sample data to the idea tracker cloud database by adding a seed() function to the ideasProvider like this:

Also I added a button to the homepage to initiate it. The code I wrote was like this:

This worked and I was thinking of adding a ternary operation to have it only show when ideas state is empty or just ask the user to remove it after checking if the database is filled.

I like the suggestion of building an new app without authentication and separate from the ideas tracker project, like a todo app or contacts app maybe. I was just thinking of this tutorial being an addon to that project. But I could just follow the appwrite setup page in the react tutorial.

[gewenyu99]

Thank you @tessamero for assigning this to me. I will begin working on it.

Thank you @gewenyu99 for the compliment on the outline. The third mode sounds really cool hybrid of the two and will like to work on it at a later time.

Last night, I played around with seeding sample data to the idea tracker cloud database by adding a seed() function to the ideasProvider like this:

Also I added a button to the homepage to initiate it. The code I wrote was like this:

This worked and I was thinking of adding a ternary operation to have it only show when ideas state is empty or just ask the user to remove it after checking if the database is filled.

I like the suggestion of building an new app without authentication and separate from the ideas tracker project, like a todo app or contacts app maybe. I was just thinking of this tutorial being an addon to that project. But I could just follow the appwrite setup page in the react tutorial.

Yeah, I'd personally like to have this tutorial be independent of other tutorials purely because it'll have a more contained scope.

Another point is that we will probably use a Node.js SDK to create the DB, collection, and documents used for mock/demo data with an API, just to show good practices. Having demo/seed data type code in frontend could be misleading and a bad practice for new developers.

WDYT?

[timDeHof]

@gewenyu99 that sounds like a great idea.

Were you thinking of something similar to JSONPlaceHolder's /todos resources? Here is the link to https://jsonplaceholder.typicode.com/ or I found this website called mockaroo for generating mock data. If so, I could probably use JSONPlaceHolder's /todos to seed a database.

WDYT?

I have already started writing this tutorial for building a todo app using Appwrite cloud and React. But I can easily make the changes to use node-appwrite

[gewenyu99]

@timDeHof I would prefer lower dependency where possible. JSONPlaceHolder is a good idea, but make sure you make it an adaptor pattern, so it can be replaced easily if JSON Place Holder goes down.

I have already started writing this tutorial for building a todo app using Appwrite cloud and React. But I can easily make the changes to use node-appwrite

This is fine, what I was thinking was providing a setup script, like setup.json where it uses the Node.js SDK and setups their Appwrite project.

Thoughts?

[tessamero]

closing issue as the PR was merged, great job!