Welcome to Anime World! This project showcases a list of popular animes using the latest Next.js 14.2.3 features, including server actions and Framer Motion for animations. As a software engineer with a passion for clean and efficient code, I found this project both enlightening and enjoyable to create. The primary objective here is to demonstrate how to effectively use server components with selective client-side rendering for seamless performance and stunning visuals.
- 📜 Server Actions: Efficiently fetch and display anime data from the server.
- 🎨 Framer Motion: Smooth and eye-catching animations for an enhanced user experience.
- 💾 Next.js 14.2.3: Leverage the latest capabilities of Next.js 14.2.3 for optimal performance.
- 📱 Responsive Design: Adaptable layout for all screen sizes, from mobile to desktop.
- 🔄 Infinite Scroll: Dynamically load more anime as you scroll down the page.
- 👀 InView Detection: Utilize
react-intersection-observerto efficiently load more content when the user scrolls to the bottom of the page.
To get started with Anime World, follow these steps:
-
Clone the repository:
git clone https://github.com/khairislama/anime-world.git cd anime-world -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open http://localhost:3000 in your browser to see the app in action.
Once the application is running, you can:
- ✅ Explore Anime: Browse through the grid of popular anime.
- ✅ Load More: Scroll down to automatically load more anime.
- ❌ Search by anime name: type anime title in the search input at the top (only from view).
- 🤔 Add Search Functionality: Allow users to search for specific anime.
- 🤔 Enhanced Animations: Experiment with more complex Framer Motion animations.
- 🤔 Detailed Anime Page: Create a detailed view for each anime with more information.
Anime World is a modern and efficient way to explore popular anime, leveraging the latest technologies and best practices. I hope you find it as enjoyable to use and extend as I did to create. Feel free to contribute or provide feedback!
Feel free to reach out with any questions, suggestions, or to share your own experiments:
Happy Coding! 🚀