{"id":25867212,"url":"https://github.com/sans-script/anime-vault","last_synced_at":"2025-06-21T08:40:02.108Z","repository":{"id":248037764,"uuid":"827580398","full_name":"sans-script/anime-vault","owner":"sans-script","description":"This project leverages Next.js 14 to build a server-side rendered application featuring Server Actions for backend logic, Infinite Scroll for dynamic data loading, and Framer Motion for smooth animations. I developed this application for educational purposes following a tutorial from JavaScript Mastery on YouTube.","archived":false,"fork":false,"pushed_at":"2024-07-12T01:00:03.000Z","size":1552,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-02T03:35:26.710Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://anime-vault-flame-kappa.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/sans-script.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}},"created_at":"2024-07-12T00:11:39.000Z","updated_at":"2024-08-16T01:20:05.000Z","dependencies_parsed_at":"2024-07-12T02:09:36.091Z","dependency_job_id":"14270d0f-a64b-4d2a-b9e5-1ea2bc6a4fb5","html_url":"https://github.com/sans-script/anime-vault","commit_stats":null,"previous_names":["sans-script/anime_vault"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sans-script/anime-vault","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fanime-vault","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fanime-vault/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fanime-vault/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fanime-vault/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sans-script","download_url":"https://codeload.github.com/sans-script/anime-vault/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sans-script%2Fanime-vault/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261095027,"owners_count":23108758,"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":[],"created_at":"2025-03-02T03:34:25.083Z","updated_at":"2025-06-21T08:39:57.091Z","avatar_url":"https://github.com/sans-script.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Next.js 14 Server Side App with Server Actions, Infinite Scroll \u0026 Framer Motion Animations\n\nThis project leverages Next.js 14 to build a server-side rendered application featuring Server Actions for backend logic, Infinite Scroll for dynamic data loading, and Framer Motion for smooth animations.\n\n### Server Actions\n\nNext.js 14 introduces Server Actions to seamlessly integrate server-side logic into the application flow. In the provided example, `fetchAnime` function in `action.ts` demonstrates fetching anime data from the Shikimori API (Application Programming Interface) server-side:\n\n```typescript\n\"use server\";\n\nimport { AnimeProp } from \"@/components/AnimeCard\";\n\nexport const fetchAnime = async (page: number) =\u003e {\n  const response = await fetch(\n    `https://shikimori.one/api/animes?page=${page}\u0026limit=8\u0026order=popularity`\n  );\n  const data = await response.json();\n\n  return data.map((item: AnimeProp, index: number) =\u003e (\n    \u003cAnimeCard key={item.id} anime={item} index={index} /\u003e\n  ));\n};\n```\n\n### Infinite Scroll\n\nThe `LoadMore.tsx` component showcases Infinite Scroll functionality using `react-intersection-observer` to trigger data fetching as the user scrolls:\n\n```tsx\nimport { useEffect, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { fetchAnime } from \"@/app/action\";\nimport AnimeCard from \"./AnimeCard\";\n\nlet page = 2;\n\nfunction LoadMore() {\n  const { ref, inView } = useInView();\n  const [data, setData] = useState\u003cJSX.Element[]\u003e([]);\n\n  useEffect(() =\u003e {\n    if (inView) {\n      fetchAnime(page).then((res) =\u003e {\n        setData((prevData) =\u003e [...prevData, ...res]);\n        page++;\n      });\n    }\n  }, [inView]);\n\n  return (\n    \u003c\u003e\n      \u003csection className=\"grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-10\"\u003e\n        {data}\n      \u003c/section\u003e\n\n      \u003csection className=\"flex justify-center items-center w-full\"\u003e\n        \u003cdiv ref={ref}\u003e\n          \u003cimg\n            src=\"/spinner.svg\"\n            alt=\"spinner\"\n            width={56}\n            height={56}\n            className=\"object-contain\"\n          /\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n    \u003c/\u003e\n  );\n}\n\nexport default LoadMore;\n```\n\n### Framer Motion Animations\n\nThe `AnimeCard.tsx` component employs Framer Motion to animate the appearance of anime cards with smooth transitions:\n\n```tsx\nimport Image from \"next/image\";\nimport { MotionDiv } from \"./MotionDiv\";\n\nconst variants = {\n  hidden: { opacity: 0 },\n  visible: { opacity: 1 },\n};\n\nfunction AnimeCard({ anime, index }: Prop) {\n  return (\n    \u003cMotionDiv\n      className=\"max-w-sm rounded relative w-full\"\n      variants={variants}\n      initial=\"hidden\"\n      animate=\"visible\"\n      transition={{\n        delay: index * 0.25,\n        ease: 'easeInOut',\n        duration: 0.5\n      }}\n    \u003e\n      {/* Anime card content */}\n    \u003c/MotionDiv\u003e\n  );\n}\n\nexport default AnimeCard;\n```\n\n`MotionDiv.tsx`\n\n```tsx\n\"use client\";\n\nimport { motion } from \"framer-motion\";\n\nexport const MotionDiv = motion.div;\n\n```\n\n### Summary\n\nNext.js 14 enables building robust server-side rendered applications with integrated Server Actions for backend operations, Infinite Scroll for dynamic content loading, and Framer Motion for enhancing user interface interactions with smooth animations. This combination enhances both performance and user experience in modern web applications.\n\n### Metadata\n\n- Title: Build Modern Next 14 Server Side App with Server Actions, Infinite Scroll \u0026 Framer Motion Animations\n\n- URL: https://www.youtube.com/watch?v=FKZAXFjxlJI\n\n### Notes\n\n- Next.js server-side app with server actions, infinite scroll, and Framer Motion animations\n\n- 🔍 Server actions in Next.js simplify API calls and business logic handling, streamlining development processes and reducing code complexity.\n\n- 🔁 Infinite scroll implementation improves user engagement by seamlessly loading content as the user scrolls, enhancing the overall browsing experience.\n\n- 🎨 Framer Motion integration allows for smooth and visually appealing animations within Next.js components, enhancing the app's aesthetic and interactivity.\n\n- 🛠️ Balancing server-side rendering with client-side animations ensures a harmonious user experience, leveraging the strengths of both approaches effectively.\n\n- 📊 Leveraging server actions for data fetching optimizes performance and responsiveness, enabling efficient handling of dynamic content updates.\n\n- 💡 Tailoring animations to specific app features enhances user engagement and interaction, creating a more immersive and enjoyable user experience.\n\n- 🚀 Understanding the practical benefits of server actions in real-world app development scenarios empowers developers to create efficient and dynamic applications.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsans-script%2Fanime-vault","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsans-script%2Fanime-vault","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsans-script%2Fanime-vault/lists"}