Fullstack InfiniteScroll using React as Frontend and Django as Backend

Backend is created using Django and contains list of 500 Company dummy data in database with images to test Infinite scroll, Pagination and Lazy loading of Image

All image are rendered using a Custom Image Component created using IntersectionObserver Api To LAzy Load Images when Image is in view else render a placeholder so that not all images are loaded on page load to give performance boost

Frontend is create using React and Contains 4 Routes

"/" route contains normal pagination with a View More Button (User have to click view more to load more data)

"/paginator"** route containg pagination with page number (User can click on page no to view that page)

"/infinite-scroller"** route contain infinite scroller to lazyLoad data as soon as user scroll to bottom using Javascript Intersection Observer Api

"/swr"** route contains infinite scroller using useSWR

Steps to run Backend Server

git clone https://github.com/gmrzone/FullstackInfiniteScroll.git
cd Backend

Create Virtual Environment

python -m venv env

Activate Virtual Environment

source env/bin/activate

install dependencies

pip install -r requirements.txt

Run Server

python manage.py runserver

Steps to run Frontend Server

After cloning, change directory to Frontend

cd frontend

install dependencies

npm install

Run Server

npm start

open this link in Browser http://127.0.0.1:3000/