Anifire: Anime streaming website

This project is in development as for now.

Introduction

Welcome to the Awesome Anime Website, your go-to destination for watching anime without any annoying ads. This project is created for educational purposes only.

🎉 Dive into the captivating world of anime without interruptions! This website provides a seamless streaming experience, free from distracting advertisements. Enjoy your favorite anime series and movies with ease.

Features

• Next.js app router with TypeScript for easier adaptation and faster learning for beginners.
• Explore a vast anime library without any popups or ads.
• Get information while hovering over anime images (using popovers).
• Minimal design to keep the application lightweight.
• SEO implementation that allows users to search "AniFire" on Google and find the site.
• Google Images can scrape images and videos from the AniFire website.
• Toggle between subbed and dubbed anime without page reloading (using Zustand for state management).
• Improved error handling (as of the latest update).
• Users can watch their favorite shows without interruption.
• Auto skip intro and outro options on player.
• Watch history feature to make it easier for users to pick up where they left off (using Zustand with storage persistence).
• Continue watching anime from where you left off (stored in localStorage).
• Responsive design that works on all screen sizes (using TailwindCSS to simplify styling—because I love TailwindCSS).
• Reusable components (I've created many components using ShadCN, not all of them, but enough to save time—don’t worry, I know how to build them from scratch 😅).
• Since I’m working solo on this project, implementing new features takes some time (would love if someone could help).

Where Used What (Libraries):

• Next.js:

• The entire application is wrapped with Next.js (using the app/ router) and TypeScript.

• Why use Next.js instead of Vite-ReactJS or CRA (Create React App)?: While Vite and CRA are great choices, I chose Next.js for its built-in features like server-side rendering (SSR) and static site generation (SSG). Another key reason is to leverage next-auth for authentication and its seamless integration with React.

• TailwindCSS:

• My relationship with TailwindCSS has deepened ❤️ (One-sided love).

• While I prefer using Tailwind for its utility-first approach, I can still work with plain CSS, SCSS, or frameworks like Bootstrap when needed.

• Zustand (for application state management):

• Zustand provides a simple and lightweight state management solution without requiring the wrapping of the entire application in providers (like React Context does). It allows for global state management in a very intuitive way.

• Persist state on localStorage:

  • For:
  • Storing the user’s watch history, including video progress and playback timeline.
  • Storing UI preferences like sidebar menu toggle states.
  • Storing player settings such as "Skip Intro," "Skip Outro," and "Auto Next" options.

• TanStack Query (formerly React Query):

• TanStack Query is a data-fetching library that allows for efficient and powerful data synchronization with the server, offering features like caching, pagination, and automatic re-fetching.

• Used useMutation for making changes to data (e.g., on paginated data or API requests) like search results, categories, and genres.
• Mostly used useQuery for fetching data efficiently and caching the results to minimize unnecessary API calls.

• Also used useQueries to fetch data from multiple APIs simultaneously (such as fetching carousel data and scheduled anime data).

• ShadCN UI Components:

• ShadCN is a utility-first, highly customizable set of React UI components designed to improve development speed and consistency. It provides ready-made components like buttons, modals, etc.

• ArtPlayer:

• ArtPlayer is a highly customizable HTML5 video player designed for streaming media. It is used as the core player for AniFire to stream anime episodes without interruptions and offer a smooth playback experience.

• React Icons:

• React Icons is a library that provides a collection of SVG icons that are customizable and easy to use within React applications. These are used to display various icons in the AniFire UI.

• Prettier Formatter:

• Prettier is an opinionated code formatter that helps maintain consistent code formatting throughout the project, making the code easier to read and ensuring consistency across developers' contributions.

For local development

• Clone the repository.

bash git clone https://github.com/Zeddxx/ani-fire.git

• Install the npm or yarn or pnpm.

bash npm install or yarn add or pnpm install

• Add the .env on root directory.

  [!TIP] path: root to anifire outside the app directory

## This should be a aniwatch api of ritesh repo (without last slash /)
NEXT_PUBLIC_BASE_ANIME_URL=E.G -> base_url/api/v2/hianime

TODO'S

• [ ] Add Dashboard
• [ ] User authentication.
• [ ] Add commenting feature
• [ ] Add nested comments.
• [ ] Implement admin dashboard functionality.
• [ ] Share buttons.
• [ ] Added Dub functionality.
• [x] Episode next and previous button.
• [ ] Theater mode
• [ ] Focus mode.
• [ ] Store users wishlist anime into database.
• [ ] SEO implementation.

Credits

• ghostRitesh for aniwatch api.
• HiAnime 👋.