Skip to content
Backprojects / anime-banks.mdx
Solo Developer · 2024

Anime Banks — Next.js 14 Catalog

Source
Problem
I wanted a hands-on reference implementation of the newest Next.js App Router features — Server Actions, server-side data fetching, and smooth motion — in a single cohesive app.
Solution
A modern anime discovery app built entirely on Next.js 14 with React Server Components, Server Actions for progressive enhancement, infinite scroll, and Framer Motion transitions.
Results
  • Zero client-side data-fetching libraries — pure RSC + Server Actions
  • Smooth infinite scroll with no layout shift
  • Fully responsive, animated UI
Next.js 14
React Server Components
Server Actions
TypeScript
Framer Motion
Tailwind CSS

Overview

A modern, server-rendered anime catalog that doubles as my playground for the latest App Router patterns.

Highlights

  • React Server Components first. Data is fetched on the server; the client bundle stays tiny.
  • Server Actions power interactions without hand-rolled API routes.
  • Infinite scroll implemented with an intersection observer and server actions, carefully avoiding cumulative layout shift.
  • Framer Motion adds entrance and layout transitions that feel native.

This is a good answer to "do you have experience with React Server Components?" — yes, and here's a complete app built on them.

All projects