Pagination React Express

Pagination React Express

Build simple pagination system using Express and React.

Handling 100k+ data with pagination system using Express as backend and React as frontend.

Limiting the data to be displayed on each page and also the page number to be displayed. And if the users don't find the data what are they looking for until the last page, they have to search for the data that they want. The search results will be displayed on the same page.

Limiting the data and page number is more efficient and the best practice for the pagination system.

Live demo : Not available yet.

Source code : GitHub

Features

• Pagination
• Limiting data to be displayed on each page
• Search data
• Server-side pagination

Tech Stack

• ExpressJS
• ReactJS
• react-paginate
• mysql2

Prerequisites

• NodeJS
• MySQL
• sequelize-cli
• nodemon

Installation and Usage

Clone the repository

1git clone https://github.com/raprmdn/learn-pagination-express-react.git
bash

cd into the directory

1cd learn-pagination-express-react
bash

Install the dependencies for both react-frontend and express

1npm install
bash

copy .env.example to .env for express and configure the required environment variables

1cp .env.example .env
bash

Create database

1sequelize db:create
bash

Run the migration

1sequelize db:migrate
bash

Run the seed

1# Run 10x times to generate 100k data
2sequelize db:seed:all
bash

Run the ExpressJS server

1npm run dev
bash

Run the ReactJS server

1npm start
bash

Screenshots

Pagination ReactJS ExpressJS

Set limit page

Search feature

Server-side pagination