https://github.com/kv4biz/anime-palace

Your favorite anime, all in one place.
https://github.com/kv4biz/anime-palace

anime api infinite-scroll nextjs14 server-actions server-side-rendering shikimori-api tailwindcss

Last synced: about 1 month ago
JSON representation

Your favorite anime, all in one place.

• Host: GitHub
• URL: https://github.com/kv4biz/anime-palace
• Owner: kv4biz
• Created: 2024-09-14T18:50:39.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-09-14T19:18:13.000Z (5 months ago)
• Last Synced: 2024-11-09T03:16:58.772Z (3 months ago)
• Topics: anime, api, infinite-scroll, nextjs14, server-actions, server-side-rendering, shikimori-api, tailwindcss
• Language: TypeScript
• Homepage: https://anime-palace.vercel.app
• Size: 2.85 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Anime Viewer with Infinite Scroll

![Banner](./public/hero.png)

Welcome to the Anime Palace! This web application allows users to explore a wide range of anime, with an infinite scroll feature for seamless browsing. The app uses server-side actions in Next.js to fetch popular anime data from the Shikimori API, ensuring an optimized and smooth user experience.

## Features

- **Infinite Scroll**: Automatically load more anime as you scroll down the page.

- **Server Actions**: Efficient data fetching with server-side rendering for faster performance.

- **Popular Anime List**: Discover anime ranked by popularity.

- **Responsive Layout**: Optimized for all screen sizes, from mobile to desktop.

- **Smooth Animations**: Engaging hover effects and transitions using Framer Motion.

- **Real-time Updates**: Fetches the latest anime data from the Shikimori API.

## Benefits of Server-Side Rendering (SSR)

- **Improved Performance**: By utilizing server actions, data is fetched and rendered on the server before being sent to the client, reducing load times and improving performance.

- **SEO Optimization**: Since the content is pre-rendered on the server, it is more accessible for search engine crawlers, improving the visibility of your app in search results.

- **Enhanced User Experience**: Server-side rendering ensures that users receive fully rendered pages on their initial load, improving the overall experience, especially for slower networks.

## Technologies Used

- **Next.js**: React framework with built-in support for server-side rendering.

- **Shikimori API**: Source of anime data.

- **Tailwind CSS**: Utility-first CSS framework for styling.

- **Framer Motion**: Animation library for smooth transitions and hover effects.

## Future Enhancements

- **Filter Options**: Add more filtering capabilities (e.g., genre, release year).

- **User Accounts**: Allow users to save favorite anime and create watchlists.

- **Detailed Anime Pages**: Add individual anime detail pages with more information.