Awesome

Infinite Scroll Demo

<p align="center"> <img src="https://user-images.githubusercontent.com/46474346/138585064-5a8d7e92-ab4e-4845-8620-91ddbc31d066.png" width="200px"> </p> <p align="center"> A simple React JS + Appwrite project to demonstrate infinite scroll paging. </p>

Demo

https://user-images.githubusercontent.com/46474346/138588734-fbc26a33-ab23-4297-a449-082efbde9bce.mp4

Run locally

Install Appwrite by following the installation guide.
Open the Appwrite console and create a new project.
Navigate to Database and add a new Collection called Photos.
Add the following rules and permissions:

Rules:

Label	Key	Type	Required	Array
Username	`username`	Text	`true`	false
Avatar	`avatar`	URL	`true`	false
Location	`location`	Text	`false`	false
Image	`imageUrl`	URL	`true`	false

Permissions:

Read Access: *

Write Access: *

Clone this repo

  git clone https://github.com/SakshiUppoor/infinite-scroll-demo.git
  cd infinite-scroll-demo

Install dependencies

  npm install

From the Appwrite console, note down the API Endpoint, Project ID and Collection ID of the Photos Collection and enter these in src/config.js.
The project is ready to run! :rocket:

  npm start

Acknowledgements

Appwrite - End-to-end Backend Server
Faker.js - Mock user data for demo
Lorem Picsum - Mock photos for demo