Cursor pagination, a normalised store and a new-posts banner
After p11 arrives, an offset request for "page 2" returns p8 again (a duplicate), while the cursor ("after p8") returns p7, p6, p5. The new post waits behind the banner until clicked, so the list never jumps under the reader.
A news feed is an endless, personalised list that keeps growing at the top while the user scrolls down; the design rests on cursor pagination, a normalised store, a virtualised list, a new-posts banner instead of jumping content, optimistic likes and careful image loading.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add an end-of-feed message to the cursor example: when cursor is null after at least one page, show You're all caught up.
Make the like rollback announce the error and clear it after the next successful like.
Explain it without notes
Why do feeds use cursor pagination instead of offset pagination?
What does it mean to normalise feed data, and what does it buy you?
How would you handle new posts arriving while the user is reading?
Design the like button: what happens on click, on failure, and on a double click?
How do you keep a feed fast after the user has scrolled through 1,000 posts?
Preview
Console
Nothing logged yet.Expected console output
feed: p10, p9, p8
offset page 2: p8, p7, p6
cursor page: p7, p6, p5
feed: p10, p9, p8, p7, p6, p5
feed: p11, p10, p9, p8, p7, p6, p5