feat(docs): add pagination tutorial and related files

src/routes/docs/tutorials/pagination/step-1/+page.markdoc

@@ -1,19 +1,19 @@
 ---
 layout: tutorial
-title: Build a todos app with React
-description: Learn about using pagination in a React app using Appwrite backend.
+title: Build a todos app with react
+description: Learn about using pagination in a react app using appwrite backend.
 step: 1
 difficulty: beginner
 readtime: 10
 ---
 
-**Task App(working title)**: An app to track all your tasks that you'll need to get done. In this tutorial, you will build the Task app with Appwrite and React.
+**Todos App**: An app to track all your todos that you'll need to get done. In this tutorial, you will build the todos app with appwrite and react.
 
 # Overview {% #overview %}
 **What is pagination in web development and why is it important?**
- Pagination is a technique used in web development to divide a large dataset into smaller manageable chunks. This practice significantly enhances user experience by facilitating easy navigation through the dataset, making the data consumption less overwhelming. It's a common feature in data-rich applications, such as search engines and task management systems, offering numerous benefits like reduced load times, easier data management, and a cleaner, more organized user interface.
+ Pagination is a technique used in web development to divide a large dataset into smaller manageable chunks. This practice enhances user experience by facilitating easy navigation through the dataset, making the data consumption less overwhelming. It's a common feature in data-rich applications, such as search engines and task management systems, offering benefits like reduced load times, easier data management, and a cleaner, more organized user interface.
 
- In this tutorial, while building the Task App using Appwrite and React, you will implement some pagination methods that Appwrite offers to manage the display of tasks efficiently, ensuring a user-friendly interface that allows users to navigate through their tasks effortlessly.
+ In this tutorial, while building the Todos app using Appwrite and React, you will use some pagination methods that Appwrite offers to manage the display of tasks efficiently, ensuring a user-friendly interface that allows users to navigate through their tasks effortlessly.
 
 # Concepts {% #concepts %}
 

src/routes/docs/tutorials/pagination/step-10/+page.markdoc

@@ -1,7 +1,7 @@
 ---
 layout: tutorial
-title: Next Steps
-description: Run your React project built with Appwrite
+title: Next steps
+description: Run your react app built with appwrite
 step: 10
 ---
 
@@ -14,4 +14,5 @@ Run your project
 
  open [http://localhost:3000](http://localhost:3000) in your browser.
 
- # Further Resources {% #further-resources %}
+ # Further resources {% #further-resources %}
+Read more about it in the [pagination docs here](/docs/products/databases/pagination).

src/routes/docs/tutorials/pagination/step-2/+page.markdoc

@@ -1,21 +1,21 @@
 ---
 layout: tutorial
 title: Create app
-description: Create a React app project and integrate with Appwrite.
+description: Create a react app project and integrate it with appwrite.
 step: 2
 ---
 
 # Create React project {% #create-react-project %}
 
-Create a React app with the `npm create` command.
+Create a react app with the `npm create` command from [vite](https://vitejs.dev/).
 
 ```sh
 npm create vite@latest tasks-app -- --template react && cd tasks-app
 ```
 
 # Add dependencies {% #add-dependencies %}
 
-Install the JavaScript Appwrite SDK.
+Install the JavaScript Appwrite Web SDK.
 
 ```sh
 npm install appwrite

src/routes/docs/tutorials/pagination/step-3/+page.markdoc

@@ -1,7 +1,7 @@
 ---
 layout: tutorial
-title: Set up Appwrite
-description: Import and initialize Appwrite for your react application.
+title: Set up appwrite
+description: Import and initialize appwrite for your react application.
 step: 3
 ---
 # Create project {% #create-project %}
@@ -30,7 +30,7 @@ You can skip optional steps.
 
 # Initialize Appwrite SDK {% #init-sdk %}
 
-To use Appwrite in our React app, we'll need to find our project ID. Find your project's ID in the **Settings** page.
+To use Appwrite in our react app, we'll need to find our project ID. Find your project's ID in the **Settings** page.
 
 {% only_dark %}
 ![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
@@ -40,7 +40,10 @@ To use Appwrite in our React app, we'll need to find our project ID. Find your p
 {% /only_light %}
 
 Create a new file `src/lib/appwrite.js` to hold our Appwrite related code.
->Only one instance of the `Client()` class should be created per app.
+
+{% info title="One Client() instance per an app" %}
+Only one instance of the `Client()` class should be created per an app.
+{% /info %}
 
 Add the following code to it, replacing `<YOUR_PROJECT_ID>` with your project ID.
 

src/routes/docs/tutorials/pagination/step-4/+page.markdoc

@@ -1,12 +1,12 @@
 ---
 layout: tutorial
 title: Add database
-description: Add a database to your React application using Appwrite Web SDK.
+description: Add a database to your react application using appwrite web SDK.
 step: 4
 ---
 
 # Create collection {% #create-collection %}
-In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas.
+In Appwrite, a collection of documents stores the data. You can think of it like a filing cabinet. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas.
 
 {% only_dark %}
 ![Create project screen](/images/docs/tutorials/dark/idea-tracker-collection.png)

src/routes/docs/tutorials/pagination/step-5/+page.markdoc

@@ -1,24 +1,25 @@
 ---
 layout: tutorial
-title: Environment Setup
-description: setup the environment for seeding the database
+title: Environment setup
+description: Setup the environment for seeding the database
 step: 5
 ---
 
 # Seeding the collection {% #seeding-the-collection %}
-Now we need to create a script that will create documents from a setup.json file.Create a new file `./db/setup.js` in the root of the project directory and add the following code to it.
+Now we need to create a script that will create documents from a setup.json file.Create a new file `./db/setup.js` in the root of the project directory to hold our related code.
+
+Add the following code to it, replacing `[YOUR_DATABASE_ID]` and `[YOUR_COLLECTION_ID]` with your project ID and collection ID.
 
 ```js
 import { databases } from "../src/lib/appwrite.js";
 import { ID } from "appwrite";
 
-export const TODOS_DATABASE_ID = "651c4c0bdba5256614d1";
-export const TODOS_COLLECTION_ID = "651c4c2e1e86c8de7f13";
+export const TODOS_DATABASE_ID = "[YOUR_DATABASE_ID]";
+export const TODOS_COLLECTION_ID = "[YOUR_COLLECTION_ID]";
+const dataURL = "https://jsonplaceholder.typicode.com/users/1/todos";
 
 async function seedCollection() {
-  const response = await fetch(
-    "https://jsonplaceholder.typicode.com/users/1/todos",
-  );
+  const response = await fetch(dataURL);
   const data = await response.json();
   console.log("Starting to seed collection...");
   try {
@@ -34,7 +35,7 @@ async function seedCollection() {
           completed: item.completed,
         },
       );
-      console.log(promise);
+      console.log(`${promise.title} has been added to the collection`);
     }
     console.log("Seeding collection done!");
   } catch (error) {
@@ -46,9 +47,9 @@ seedCollection();
 
 ```
 
-# Add Seed script to Package.json {% #add-seed-script %}
+# Add seed script to package.json {% #add-seed-script %}
 
-Open the project's Package.json file and go to the `scripts` and add the following script to the list.
+Open the project's package.json file and go to the `scripts` and add the following script to the list.
 
 ```sh
  "db:seed": "node ./db/setup.js",
@@ -60,4 +61,4 @@ You can now open a terminal and run the following command.
 npm run db:seed
 ```
 
-you should see the command running in the terminal.When it's done check the collection to see it populated with the data.
+You should see the command running in the terminal.When it's done check the collection to see it populated with the data.

src/routes/docs/tutorials/pagination/step-6/+page.markdoc

@@ -1,10 +1,10 @@
 ---
 layout: tutorial
 title: Adding tasks
-description: Add tasks to your React application using Appwrite
+description: Add tasks to your react application using appwrite
 step: 6
 ---
-# Add Tasks context {% #add-todos-page %}
+# Add tasks context {% #add-tasks-context %}
 
 Now we need to display our Todos to the page. In React, we can use [context](https://reactjs.org/docs/context.html) to share data between components. We'll use context and create a simple custom hook to manage out tasks.
 
@@ -53,13 +53,13 @@ export function TasksProvider(props) {
 ```
 we will add more functionality to the context later
 
-# Basic Routing
+## Basic Routing {% #basic-routing %}
 
 First, wrap the `main` element with the `TasksProvider` component.
 
 Update `src/App.jsx` to the following code.
 
-```jsx
+```js
 import { TasksProvider } from "./lib/context/tasks";
 import { Tasks } from "./pages/Tasks";
 
@@ -76,13 +76,13 @@ function App() {
 export default App;
 ```
 
-# Tasks page
+### Tasks page {% #tasks-page %}
 
-We are able to create the Tasks page.This will show users a list of tasks that is just a small chuck of the large dataset.
+We are now able to create the Tasks page that will show users a list of tasks that is a small chuck of the large dataset.
 
 Create a new file `src/pages/Tasks.jsx` and add the following stub code to it.
 
-```jsx
+```js
 import { useTasks } from "../lib/context/tasks";
 export function Tasks() {
   const tasks = useTasks();
@@ -101,4 +101,6 @@ export function Tasks() {
     </section>
   );
 }
-```
+```
+
+In the next two steps, we will explore how to use offset or cursor pagination in our application.

src/routes/docs/tutorials/pagination/step-7/+page.markdoc

@@ -1,13 +1,14 @@
 ---
 layout: tutorial
-title: Implementing the Offset Pagination
-description: Learn about using offset pagination in a React app using Appwrite backend.
+title: Implementing the offset pagination
+description: Discover offset pagination. The react app will access our appwrite backend using offset pagination.
 step: 7
 ---
+In this step, we will discover how to add the offset pagination method to our app.
 
-# What is Offset Pagination? {% #what-is-offset-pagination %}
+# What is offset pagination? {% #what-is-offset-pagination %}
 
-Offset Pagination is widely used in databases and online APIs to extract specific subsets of data from a bigger whole.It requires you to tell it where to start ("offset") and how many records to get ("limit"). In the context of software applications, offset pagination is a technique that may be employed to facilitate the navigation of content by incorporating forward and back buttons on a given page.
+Offset pagination is widely used in databases and online APIs to extract specific subsets of data from a bigger whole.It requires you to tell it where to start ("offset") and how many records to get ("limit"). In the context of software applications, offset pagination is a technique that may be employed to facilitate the navigation of content by incorporating forward and back buttons on a given page.
 
 In Appwrite, offset pagination can be achieved using the `Query.limit()` and `Query.offset()` methods. Here is an example using Appwrite's `listDocuments()` command to list the next four tasks:
 
@@ -26,11 +27,11 @@ this will run and retrieve the next four tasks starting at task-5
 # Implementation {% #implementation %}
 
 
-# Task context
+## Task context {% #task-context %}
 
-by updating the contents of `src/lib/context/tasks.jsx` with the following:
+By updating the contents of `src/lib/context/tasks.jsx` with the following code, replacing `[YOUR_DATABASE_ID]` and `[YOUR_COLLECTION_ID]` with your project ID and collection ID.
 
-```jsx
+```js
 import { createContext, useContext, useEffect, useState } from "react";
 import { databases } from "../appwrite";
 import { Query } from "appwrite";
@@ -110,12 +111,12 @@ export function TasksProvider(props) {
 }
 ```
 
-# Tasks page
+## Tasks page {% #tasks-page %}
 
-In order to utilize offset pagination in our app, we want a "forward" and "back" buttons that will allow us to move through our dataset. Also we want to have a way to show the current page too. We will add these pieces of UI to the Tasks page and use the `useTasks` hook to handle the navigation and the UI will have the following:
-* a "back" button that will handle subtracting a given page limit from the offset and will be disabled when at the beginning of the dataset.
+For offset pagination in our app, we need "forward" and "back" buttons to navigate our dataset. We also want to display the current page. The Tasks page will contain the following UI, with navigation handled by the `useTasks` hook:
+* a "back" button that will handle subtracting a given page limit from the offset and disabled when at the beginning of the dataset.
 * a span tag that will show the current page.
-* a "forward" button that will handle adding a given page limit to the offset and will be disabled when we reach the end of the dataset.
+* a "forward" button that will handle adding a given page limit to the offset and disabled when we reach the end of the dataset.
 
 Update the Tasks page in `src/pages/Tasks.jsx` to the following:
 
@@ -178,4 +179,6 @@ function Pagination(props) {
   );
 }
 
-```
+```
+
+In the next step, we will replace our current pagination method with the cursor pagination method.