Infinite Scroll Pagination Tutorial with Firestore (part 1)

Hey gang, in this inifinite scrolling pagination tutorial, we'll see how to implement pagination with firestore.

Timestamps
0:00 - Introduction & setup
3:45 - Setting up Firebase
6:24 - Fetching data
13:16 - Ordering & limiting data
15:12 - Loading more data
20:58 - Removing event listeners

🐱‍👤🐱‍👤 JOIN THE GANG -
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Course Files:

🐱‍💻 🐱‍💻 Helpful Links:

🐱‍💻 🐱‍💻 Social Links:

[esmaydogdu]

Thanks for the amazing content!
My only note is, startAfter only accepts references, so for the first batch, giving the 0 parameter breaks it.
I managed to achieve this by creating two functions:
1. Loading First Batch on page load
2. Loading more content

[Cho]

I got the notification about this video from YouTube last night. I couldn't wait to watch it, but I couldn't because I was working. It's wonderful as other your series are. Now, all of the words out of your mouth make sense to me. I am happy that I have grown up like this. Thank you so much! You are the lighthouse that shows me the way to be a "Ninja"!
BTW, You have only one part of Firebase remained untouched by you, Firebase Cloud Messaging. I have been waiting for it for a long time. I have learned from you, Firebase Auth, Cloud Firestore, Functions, Clound Storage, and Hosting, but Cloud Messaging. It's the last puzzle of Firebase that I need to complete the goal of being a "Firebase Ninja". I'm honor to be your student and live in the same world as yours now. Thank you again, Master!

[JonsonNcube]

I bought the Modern JavaScript udemy course from Net Ninja and everything just makes so much sense. I never dreamed I would ever be a JS ninja, but look at me now 😎🙏🏾

[StarBattle]

Oh wow, I just finished watching your firestore tutorial and was about to watch the auth, and this comes out 😆

[donodu]

Man, you are doing an amazing job... I have been watching your tutorials for a few years now, and I will start my first job as a web ninja developer next week. I am so proud of it, and so grateful to you, for all the free quality content you created. Can't wait to receive my first pay so that I can supporte you on Patreon.
Thanks man ❤️

[chriswhincop]

As ever, so helpful and clear, Shaun. You're a star. Thanks for everything!

[nobir]

It's been a while you used "woaah" sound in the intro ... I missed it so much ❤️

[anniecenter]

Great tutorial as always! Also, I love Brandon Sanderson’s stuff, so great choice there

[lukem]

I'm really getting into firebase! This is really good 👌 thanks for the firebase content!

[christian-schubert]

For those who don't want to depend on more or less closed backend platforms like Firebase, I recommend looking into LazyLoading utilizing Intersection Observers.

[mahinhossen]

It's the thing I needed. Thanks a lot shaun

[AnshumanKP]

Man I was looking for this since days! Thanks Ninja

[igorskyflyer]

AHAHAHAHAHA, 00:02 this transition was EPIC. 😂😂😂😂😂😂
Use it more, please. ✌️

And yeah, a great tutorial, AGAIN. Mate, you can't make a bad tutorial, "poor" you. 😋😏

[IcyIndia]

Great, Thank for it. Once again FIRESTORE explosion.

[ahmadalharbi]

Thank you Shaun . Please give us a time to catch up with all your courses 🤣

[ninjanav]

thank you so much sir .. you made something seemingly so complex .. easy for us all to understand!!! Legend! :D

[nepalcodetv]

would love to see advanced next.js tutorial series (ssg, ssr, api).. Great Content

[jassieeeee]

For me it was necessary to have two separate queries.
(1) Query for the first batch (without the startAfter)
(2) Query for loading more content (exact same query, but with startAfter()

So that is just what @Esma Aydogdu said.

Thank you!

[igdev]

11:08 I don't really understand how "+=" work, when I try "=" then if I click load more button it don't show any more card?

[sheikhabubakar]

Thank u so much and love you sir from Pakistan