{"id":29245785,"url":"https://github.com/arnobt78/animevault-sever-action--nextjs","last_synced_at":"2025-07-03T22:38:16.669Z","repository":{"id":257402016,"uuid":"858161381","full_name":"arnobt78/AnimeVault-Sever-Action--NextJS","owner":"arnobt78","description":"Anime-Vault is a NextJS 14 Server Side App with Server Actions, Infinite Scroll, and Framer-Motion Animations, which displays the lists of all anime from Server Side API. This project aims to define, understand, separate, and implement Server Side Actions and Clint Side Actions in NextJS and deploy on Vercel.","archived":false,"fork":false,"pushed_at":"2025-06-29T11:41:51.000Z","size":1559,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-29T12:33:18.892Z","etag":null,"topics":["anime","anime-api","anime-list","client-side-rendering","framer-motion","infinite-scrolling","nextjs","nextjs14","nextjs14-typescript","server-client-application","server-side-api","server-side-rendering","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"https://anime-vault-arnob.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-16T12:20:11.000Z","updated_at":"2025-06-29T11:41:54.000Z","dependencies_parsed_at":"2025-06-29T12:43:33.067Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/AnimeVault-Sever-Action--NextJS","commit_stats":null,"previous_names":["arnobt78/anime-vault","arnobt78/animevault--nextjs","arnobt78/animevault-nextjs-webpage","arnobt78/animevault-sever-action--nextjs"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/AnimeVault-Sever-Action--NextJS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FAnimeVault-Sever-Action--NextJS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FAnimeVault-Sever-Action--NextJS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FAnimeVault-Sever-Action--NextJS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FAnimeVault-Sever-Action--NextJS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/AnimeVault-Sever-Action--NextJS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FAnimeVault-Sever-Action--NextJS/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263415911,"owners_count":23463109,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anime","anime-api","anime-list","client-side-rendering","framer-motion","infinite-scrolling","nextjs","nextjs14","nextjs14-typescript","server-client-application","server-side-api","server-side-rendering","tailwindcss","typescript"],"created_at":"2025-07-03T22:38:15.164Z","updated_at":"2025-07-03T22:38:16.660Z","avatar_url":"https://github.com/arnobt78.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AnimeVault Server Action - NextJS\n\n![project25](https://github.com/user-attachments/assets/08b14faa-3e9a-4fb2-a794-2e82c35980ac) ![Screenshot 2024-09-16 at 13 57 39](https://github.com/user-attachments/assets/b0ea18a0-e6cd-4d69-b222-018de87b8fe9)\n\n---\n\n## Project Summary\n\nAnimeVault 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.\n\nWhether 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.\n\n- **Live Demo:** https://anime-vault-arnob.vercel.app/\n\n---\n\n## Table of Contents\n\n- [Features](#features)\n- [Project Structure](#project-structure)\n- [Technology Stack](#technology-stack)\n- [Screenshots](#screenshots)\n- [Getting Started](#getting-started)\n  - [Prerequisites](#prerequisites)\n  - [Installation](#installation)\n  - [Running the Project](#running-the-project)\n- [Project Structure Walkthrough](#project-structure-walkthrough)\n- [Key Commands](#key-commands)\n- [API \u0026 References](#api--references)\n- [Main Functionalities \u0026 How It Works](#main-functionalities--how-it-works)\n- [Keywords](#keywords)\n- [Contributing](#contributing)\n- [License](#license)\n- [Additional Notes](#additional-notes)\n\n---\n\n## Features\n\n- **Next.js 14 with Server Actions:** Utilizes the latest Next.js features for server-side logic and high performance.\n- **Server-Side Rendering (SSR):** All pages are rendered on the server for SEO and speed.\n- **Infinite Scroll:** Seamless data loading as the user browses through the anime list.\n- **Framer Motion Animations:** Smooth, modern transitions and UI effects.\n- **Responsive and Mobile-Friendly:** Works perfectly on desktops, tablets, and phones.\n- **Live Data Fetching:** Connects to public anime APIs (such as Shikimori) for real-time anime information.\n- **Modern UI/UX:** Clean, attractive interface with dynamic routing and animated transitions.\n- **Easy Deployment:** Ready to deploy on Vercel or any Node.js-supported hosting.\n- **Extensible Structure:** Modular codebase, ideal for learning, modification, and extension.\n\n---\n\n## Project Structure\n\n```\nAnimeVault--NextJS/\n├── app/                # Main Next.js app folder (pages, layouts, server actions, API handlers)\n│   ├── page.js         # Main landing page\n│   └── ...             # Other app-specific files (routes, layouts, etc.)\n├── components/         # Reusable UI or logic building blocks (Cards, Lists, etc.)\n├── public/             # Static assets (images, icons, etc.)\n├── styles/             # Global and modular CSS/Tailwind files\n├── .eslintrc.json      # ESLint configuration\n├── .gitignore          # Files \u0026 folders to ignore in git\n├── next.config.js      # Next.js configuration\n├── package.json        # Project dependencies and scripts\n├── package-lock.json   # Dependency lock file\n├── postcss.config.js   # PostCSS configuration (for Tailwind, etc.)\n├── tailwind.config.ts  # Tailwind CSS configuration\n├── tsconfig.json       # TypeScript configuration\n├── README.md           # Project documentation\n└── ...\n```\n\n\u003e **Note**: This structure is based on top-level results. For a complete file/folder list, visit the [GitHub UI](https://github.com/arnobt78/AnimeVault-Sever-Action--NextJS/tree/main).\n\n---\n\n## Technology Stack\n\n- **Next.js 14** – React-based framework for SSR/SSG, server actions, and routing\n- **React** – Component-based UI library\n- **Framer Motion** – Animation and transition library\n- **react-intersection-observer** – For implementing infinite scroll\n- **Tailwind CSS** – Utility-first CSS framework (configured via tailwind.config.ts)\n- **Node.js** – JavaScript runtime for server execution\n- **Vercel** – Cloud deployment platform\n- **TypeScript** – For type safety (configured via tsconfig.json)\n\n---\n\n## Screenshots\n\nSee images at the top of this README for a visual preview!\n\n---\n\n## Getting Started\n\n### Prerequisites\n\n- **Node.js** (Recommended: Latest LTS) – [Download Node.js](https://nodejs.org/en/)\n- **A package manager**: npm, yarn, pnpm, or bun\n\n### Installation\n\n1. **Clone the repository:**\n\n    ```bash\n    git clone https://github.com/arnobt78/AnimeVault--NextJS.git\n    cd AnimeVault--NextJS\n    ```\n\n2. **Install all dependencies:**\n\n    ```bash\n    npm install\n    # or\n    yarn install\n    # or\n    pnpm install\n    # or\n    bun install\n    ```\n\n    You may also want to install project-specific dependencies (if not auto-installed):\n\n    ```bash\n    npm i framer-motion react-intersection-observer\n    ```\n\n### Running the Project\n\nStart the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n# or\nbun dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) in your browser to view the app.\n\n\u003e The app supports hot-reloading; any code changes will reflect instantly.\n\n---\n\n## Project Structure Walkthrough\n\nHere is a walkthrough of the key folders and files:\n\n- **/app/**: The main Next.js app folder. Includes page routes, layouts, and server actions.\n  - `page.js`: Entry point for the main landing page. This is where most homepage logic resides.\n  - Other files: Additional route files (e.g., `/app/anime/[id]/page.js` for anime details), layouts, and API handlers.\n- **/components/**: Contains reusable UI components (e.g., AnimeCard, Loader, Navbar). Helps keep code modular and DRY.\n- **/public/**: All static assets like images, icons, and favicon.\n- **/styles/**: CSS or Tailwind files for global and modular styling.\n- **Config files**: `.eslintrc.json`, `next.config.js`, `tailwind.config.ts`, `postcss.config.js`, `tsconfig.json` for project setup and linting.\n\n---\n\n## Key Commands\n\n| Command                 | Action                         |\n|-------------------------|-------------------------------|\n| `npm run dev`           | Start development server       |\n| `npm run build`         | Build production assets        |\n| `npm start`             | Start production server        |\n\n---\n\n## API \u0026 References\n\n- **Anime Data Source:**  \n  [Shikimori API Documentation](https://shikimori.one/api/doc/1.0/animes/index)\n- **Tutorial Reference:**  \n  [YouTube Walkthrough](https://www.youtube.com/watch?v=FKZAXFjxlJI)\n\n---\n\n## Main Functionalities \u0026 How It Works\n\n### 1. Server-Side Rendering and Server Actions\n\nAnimeVault 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.\n\n**Example server action (pseudo-code):**\n```js\n// In app/page.js (or a server action file)\nexport async function fetchAnimeList(page = 1) {\n  const res = await fetch(`https://shikimori.one/api/animes?page=${page}`);\n  return res.json();\n}\n```\n\n---\n\n### 2. Infinite Scroll\n\nUtilizing `react-intersection-observer`, the app detects when the user scrolls near the bottom and loads more anime entries on-the-fly.\n\n**Example usage:**\n```js\nimport { useInView } from 'react-intersection-observer';\n\nconst { ref, inView } = useInView();\n\nuseEffect(() =\u003e {\n  if (inView) {\n    // Fetch next page\n  }\n}, [inView]);\n```\n\n---\n\n### 3. Framer Motion Animations\n\nSmooth transitions and UI effects are implemented using Framer Motion.\n\n```js\nimport { motion } from 'framer-motion';\n\n\u003cmotion.div\n  initial={{ opacity: 0 }}\n  animate={{ opacity: 1 }}\n  transition={{ duration: 0.5 }}\n\u003e\n  {/* Anime Card Content */}\n\u003c/motion.div\u003e\n```\n\n---\n\n### 4. Routing and Dynamic Pages\n\nNext.js routing lets each anime have its own detail page (e.g., `/anime/123`). Dynamic routes are defined in `/app/anime/[id]/page.js`.\n\n---\n\n### 5. Modern UI/UX\n\n- Clean and mobile-friendly design using Tailwind CSS.\n- Responsive layouts for all devices.\n- Loading indicators and error handling for better UX.\n\n---\n\n### 6. Deployment\n\nThe app is Vercel-ready. Simply connect the repo to Vercel and deploy!\n\n---\n\n## Keywords\n\n`Next.js` `React` `SSR` `Anime API` `Infinite Scroll` `Framer Motion` `Server Actions` `Vercel` `Node.js` `react-intersection-observer` `Modern Web App`\n\n---\n\n## Contributing\n\nPull requests and contributions are welcome! Please fork the repository and submit your PR.\n\n---\n\n## License\n\nThis project is for educational and demo purposes. For more information, contact the repository owner.\n\n---\n\n## Additional Notes\n\n- Uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) for optimized font loading.\n- Bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).\n- For a more detailed file/folder list, visit the [GitHub Repository](https://github.com/arnobt78/AnimeVault-Sever-Action--NextJS/tree/main).\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fanimevault-sever-action--nextjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fanimevault-sever-action--nextjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fanimevault-sever-action--nextjs/lists"}