Implement Search, Sort, Filter and Pagination in React JS with MERN Project | Node JS | MongoDB

preview_player
Показать описание
What's up Guys,

Today we gonna be building this awesome project with MERN stack. By building this project you gonna learn how to create API which handle pagination, sort, filter and search. Yes, all of this in one API. And we also gonna learn how to call this API and show the data in beautiful UI from frontend with React.

Why do we need to build API's like this. Because By adding search, filter with pagination makes it easier for the user to find what he is looking. I'm so excited to build this project for you guys, I hope you too. Before we jump into our vscode those who new to this channel I highly recommend you to subscribe and like this video. So without wasting time

Let's Get Started....

╔═╦╗╔╦╗╔═╦═╦╦╦╦╗╔═╗
║╚╣║║║╚╣╚╣╔╣╔╣║╚╣═╣
╠╗║╚╝║║╠╗║╚╣║║║║║═╣
╚═╩══╩═╩═╩═╩╝╚╩═╩═╝

Chapters :
---------------------------------------------------
00:00 - Intro
03:25 - Integrate API
10:04 - Search
12:04 - Table
18:34 - Pagination
23:06 - Sort
27:55 - Filter
---------------------------------------------------

---------------------------------------------------------------------------------------------
Music by Hotham
Music supported by #backgroundmusicwithoutlimitations
@Background Music Without Limitations

Image by upklyak on Freepik
---------------------------------------------------------------------------------------------
Рекомендации по теме
Комментарии
Автор

Thanks for the great content.💯❤️

One suggestion: Please show the browser in between your changes, so we can understand what's changing on the webpage when you do a change in the editor.

ztrixx
Автор

thanks for the amazing tutorial. Your style of presentation is kind of perfect. Subtle styles with simple to understand approach, yet energetic pace with powerful content. You are doing everything right. Please keep up the good work.

anujupadhyay
Автор

one of the great content in filtering data from api and making api.

ayushkumar
Автор

bro realy awsome video great one little suggesion it will be good if you show the ui after each implementation like after implementing pagenation checking if it works .. like that good work bro keep going

gnair
Автор

Great class and the editing was very didactic

rafaeldamasco
Автор

Thank you for the video. But there is a rather serious bug, for example, if we have 4 pages and I am now on page 4 and doing filtering, there are 2 pages, but the request goes to page 4 and nothing is displayed as a result. How can I fix this, please tell me

gladiatorrussia
Автор

If you go to page no. 4 and then search something then it will give results of page no. 4.

abhishekmohan
Автор

Super nice, neat editing skills! May I ask what software are you using?

dcm_r
Автор

thanks for making and upload this great tutorial

loverphp
Автор

Used this video to try and implement a search bar, but having an issue where I keep receiving "setSearch is not a function" when I try to type in the box, even though I have it implemented the exact same way as shown.
Any idea what might be the issue there?

Edit: More specifically, it's happening inside the onChange in the input of the index.jxs file.

IrulewithLucas
Автор

How can one implement dynamic route to each of the data whick clicked? can u make a video for that?

tundeakinola
Автор

hi thanks for the great video explanation can you also teach us how to do search on click in this project and add reset button

BTW great editing skills

AshishKumar-snky
Автор

passing props may be a bad idea you should've use redux instead

edge