Anime Vault

Anime Vault is a sleek Next.js 14 application for browsing the most popular anime titles powered by the public Shikimori API. It ships with a bold hero section, animated cards, incremental loading, and a curated visual system built on Tailwind CSS.

Preview

Features

• Server Actions (fetchAnime) keep API calls secure and cache-aware.
• Responsive grid of AnimeCard components with subtle motion states.
• LoadMore entry point prepared for pagination / infinite scrolling.
• Custom favicon sourced from public/logo.svg to keep the brand consistent.
• Dark, high-contrast UI scaffolded directly inside the App Router layout.

Tech Stack

• Next.js 14 (App Router)
• React 18 + TypeScript
• Tailwind CSS 3
• Framer Motion (for future interaction polish)

Getting Started

1. Install dependencies

   npm install

2. Run the dev server

   npm run dev
   # visit http://localhost:3000

3. Build & preview

   npm run build
   npm start

Requires Node.js 18.17+ (matching Next.js 14 baseline).

Project Structure

anime_vault/
├─ app/
│  ├─ action.ts        # Server action proxying the Shikimori API
│  ├─ _data.ts         # Static seed data used by the grid
│  ├─ layout.tsx       # Global layout, fonts, favicon, shared sections
│  └─ page.tsx         # Home route rendering Hero, cards, and LoadMore
├─ components/         # Reusable UI primitives (Hero, AnimeCard, Footer, ...)
├─ public/logo.svg     # Source artwork used for the favicon & branding
├─ tailwind.config.ts  # Tailwind theme overrides
└─ package.json

API Notes

• Data is sourced from https://shikimori.one/api/animes.
• Adjust the page or limit params in fetchAnime to tune pagination.
• Handle rate limits gracefully; fetchAnime is a great place to add retries or caching if you expand the app.

Contributing

1. Fork & clone the repo.
2. Create a feature branch: git checkout -b feature/your-idea.
3. Commit with context-rich messages and open a PR.

License

This project is released under the MIT License. Feel free to remix it for your own anime dashboard, internal tooling, or demos.