AnimeVault is a modern, fully server-rendered anime listing and browsing platform built with Next.js 14. Its main purpose is to provide a beautiful, performant, and interactive interface for anime enthusiasts to discover and browse anime, leveraging up-to-date data from open APIs. This project demonstrates advanced Next.js features such as Server Actions, infinite scroll, dynamic routing, Framer Motion animations, and seamless deployment with Vercel.
Whether you want to learn how to build a fast React application with the latest Next.js features, or are looking for a skeleton to launch your own content-driven site, this repository is an excellent starting point.
- Live Demo: https://anime-vault-arnob.vercel.app/
- Features
- Project Structure
- Technology Stack
- Screenshots
- Getting Started
- Project Structure Walkthrough
- Key Commands
- API & References
- Main Functionalities & How It Works
- Keywords
- Contributing
- License
- Additional Notes
- Next.js 14 with Server Actions: Utilizes the latest Next.js features for server-side logic and high performance.
- Server-Side Rendering (SSR): All pages are rendered on the server for SEO and speed.
- Infinite Scroll: Seamless data loading as the user browses through the anime list.
- Framer Motion Animations: Smooth, modern transitions and UI effects.
- Responsive and Mobile-Friendly: Works perfectly on desktops, tablets, and phones.
- Live Data Fetching: Connects to public anime APIs (such as Shikimori) for real-time anime information.
- Modern UI/UX: Clean, attractive interface with dynamic routing and animated transitions.
- Easy Deployment: Ready to deploy on Vercel or any Node.js-supported hosting.
- Extensible Structure: Modular codebase, ideal for learning, modification, and extension.
AnimeVault--NextJS/
├── app/ # Main Next.js app folder (pages, layouts, server actions, API handlers)
│ ├── page.js # Main landing page
│ └── ... # Other app-specific files (routes, layouts, etc.)
├── components/ # Reusable UI or logic building blocks (Cards, Lists, etc.)
├── public/ # Static assets (images, icons, etc.)
├── styles/ # Global and modular CSS/Tailwind files
├── .eslintrc.json # ESLint configuration
├── .gitignore # Files & folders to ignore in git
├── next.config.js # Next.js configuration
├── package.json # Project dependencies and scripts
├── package-lock.json # Dependency lock file
├── postcss.config.js # PostCSS configuration (for Tailwind, etc.)
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
├── README.md # Project documentation
└── ...
Note: This structure is based on top-level results. For a complete file/folder list, visit the GitHub UI.
- Next.js 14 – React-based framework for SSR/SSG, server actions, and routing
- React – Component-based UI library
- Framer Motion – Animation and transition library
- react-intersection-observer – For implementing infinite scroll
- Tailwind CSS – Utility-first CSS framework (configured via tailwind.config.ts)
- Node.js – JavaScript runtime for server execution
- Vercel – Cloud deployment platform
- TypeScript – For type safety (configured via tsconfig.json)
See images at the top of this README for a visual preview!
- Node.js (Recommended: Latest LTS) – Download Node.js
- A package manager: npm, yarn, pnpm, or bun
-
Clone the repository:
git clone https://github.com/arnobt78/AnimeVault--NextJS.git cd AnimeVault--NextJS -
Install all dependencies:
npm install # or yarn install # or pnpm install # or bun install
You may also want to install project-specific dependencies (if not auto-installed):
npm i framer-motion react-intersection-observer
Start the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 in your browser to view the app.
The app supports hot-reloading; any code changes will reflect instantly.
Here is a walkthrough of the key folders and files:
- /app/: The main Next.js app folder. Includes page routes, layouts, and server actions.
page.js: Entry point for the main landing page. This is where most homepage logic resides.- Other files: Additional route files (e.g.,
/app/anime/[id]/page.jsfor anime details), layouts, and API handlers.
- /components/: Contains reusable UI components (e.g., AnimeCard, Loader, Navbar). Helps keep code modular and DRY.
- /public/: All static assets like images, icons, and favicon.
- /styles/: CSS or Tailwind files for global and modular styling.
- Config files:
.eslintrc.json,next.config.js,tailwind.config.ts,postcss.config.js,tsconfig.jsonfor project setup and linting.
| Command | Action |
|---|---|
npm run dev |
Start development server |
npm run build |
Build production assets |
npm start |
Start production server |
- Anime Data Source:
Shikimori API Documentation - Tutorial Reference:
YouTube Walkthrough
AnimeVault uses Next.js 14’s server components and server actions for fetching anime data and handling user actions. This ensures fast page load, SEO optimization, and secure data fetching.
Example server action (pseudo-code):
// In app/page.js (or a server action file)
export async function fetchAnimeList(page = 1) {
const res = await fetch(`https://shikimori.one/api/animes?page=${page}`);
return res.json();
}Utilizing react-intersection-observer, the app detects when the user scrolls near the bottom and loads more anime entries on-the-fly.
Example usage:
import { useInView } from 'react-intersection-observer';
const { ref, inView } = useInView();
useEffect(() => {
if (inView) {
// Fetch next page
}
}, [inView]);Smooth transitions and UI effects are implemented using Framer Motion.
import { motion } from 'framer-motion';
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5 }}
>
{/* Anime Card Content */}
</motion.div>Next.js routing lets each anime have its own detail page (e.g., /anime/123). Dynamic routes are defined in /app/anime/[id]/page.js.
- Clean and mobile-friendly design using Tailwind CSS.
- Responsive layouts for all devices.
- Loading indicators and error handling for better UX.
The app is Vercel-ready. Simply connect the repo to Vercel and deploy!
Next.js React SSR Anime API Infinite Scroll Framer Motion Server Actions Vercel Node.js react-intersection-observer Modern Web App
Pull requests and contributions are welcome! Please fork the repository and submit your PR.
This project is for educational and demo purposes. For more information, contact the repository owner.
- Uses
next/fontfor optimized font loading. - Bootstrapped with
create-next-app. - For a more detailed file/folder list, visit the GitHub Repository.