Infinite Scroll
summary
Discover thousands of anime, features infinite scroll and Server-side data fetching in Client mode
tech stack
Next JS
React
TypeScript
Html
Tailwind CSS
Shikimori api
Framer motion
published date
last edited time
website link
Front End
Front end done with Next Js 14.2 app router
Back End
Anime data provided by shikimori.one it's a free api
Features
Scroll endlessly and find Anime Title, Poster and it’s Rating
Integration with third-party API
On-Demand Data Fetching
- Data is fetched on the server based on client demand.
- Initially, 8 anime cards are shown.
- When the user scrolls, a fetch request is sent to the API.
- A loading spinner is displayed during this process.
- Another 8 anime cards are then shown.
- Shimmer effect is used while images are loading.
- Smooth loading animations are implemented with Framer Motion.
- Infinite scrolling allows continuous fetching and displaying of new anime cards.
Fully Responsive Design
The design is fully responsive for all devices, implemented with TailwindCSS.
What I Learned in This Project
- Integrated a third-party API .
- Implemented on-demand data fetching on server side.
- Used loading shimmer and skeleton techniques.
- Achieved Infinite Scroll.