Infinite Scrolling Friends List

Getting Started

For dev, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

For view, visit here.

Objectives

• Implement the following external design:

Landing page

Friends page, filter button

Filter popup

Apply filter

Filtered view

Loading

• Build app with the Next.js starter project, which includes the React framework. Exclude other use of external component or helper libraries.
• Create mock data to simulate loading, handle pagination, and filtering.
• Add fade animations to the loader component.
• Deploy app with cloud server platform, Vercel.