{"id":24553740,"url":"https://github.com/zeddxx/ani-fire","last_synced_at":"2025-04-06T03:05:19.604Z","repository":{"id":218533606,"uuid":"740561159","full_name":"Zeddxx/ani-fire","owner":"Zeddxx","description":"AniFire is an anime watching website where you can watch any anime for almost free.","archived":false,"fork":false,"pushed_at":"2025-02-07T10:37:08.000Z","size":88127,"stargazers_count":106,"open_issues_count":2,"forks_count":41,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-06T03:05:10.963Z","etag":null,"topics":["anifire","anime-streaming","next-auth","nextjs14","postgresql","redis","rtk-query","supabase","tailwindcss","typescript","zustand"],"latest_commit_sha":null,"homepage":"https://ani-fire.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Zeddxx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-01-08T15:42:54.000Z","updated_at":"2025-04-04T19:41:43.000Z","dependencies_parsed_at":"2024-11-10T16:17:10.521Z","dependency_job_id":"80bc3635-f55a-4cf9-9b8a-79e2cf579382","html_url":"https://github.com/Zeddxx/ani-fire","commit_stats":null,"previous_names":["zeddxx/ani-fire"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zeddxx%2Fani-fire","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zeddxx%2Fani-fire/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zeddxx%2Fani-fire/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Zeddxx%2Fani-fire/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Zeddxx","download_url":"https://codeload.github.com/Zeddxx/ani-fire/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247427005,"owners_count":20937200,"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":["anifire","anime-streaming","next-auth","nextjs14","postgresql","redis","rtk-query","supabase","tailwindcss","typescript","zustand"],"created_at":"2025-01-23T02:15:05.182Z","updated_at":"2025-04-06T03:05:19.580Z","avatar_url":"https://github.com/Zeddxx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e [!IMPORTANT]\n\u003e As of now, this project is marked as completed and will only receive minor changes, as I am busy with other work. If there are any fellow maintainers who can help improve this project further, please reach out to me. Peace out 🕊️\n\n\u003ch1 align=\"center\"\u003e\n  \u003cimg align=\"center\" src=\"/public/anifire-icon.png\" alt=\"anifire logo\" width=\"66\" /\u003e \u003c/br\u003e\n  Anifire: Anime streaming website\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ci\u003e\n This project is in development as for now.\n\u003c/i\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/NextJs-Typescript-blue\" alt=\"typescrpt badge\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/NextAuth%20Credentials-8A2BE2\" alt=\"next-auth\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Supabase-386641\" alt=\"supabase\" /\u003e\n  \u003cbr/\u003e\n  \u003cimg src=\"https://img.shields.io/badge/react%20tanstack%20query-E63946\" alt=\"tanstack\" /\u003e\n\u003c/p\u003e\n\n\u003ch2 align=\"center\"\u003e\n  Introduction\n\u003c/h2\u003e\n\u003cp align=\"center\"\u003e\n  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.\u003c/br \u003e\n  🎉 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.\n\u003c/p\u003e\n\n## Features\n\n- Next.js app router with TypeScript for easier adaptation and faster learning for beginners.\n- Explore a vast anime library without any popups or ads.\n- Get information while hovering over anime images (using popovers).\n- Minimal design to keep the application lightweight.\n- SEO implementation that allows users to search \"AniFire\" on Google and find the site.\n- Google Images can scrape images and videos from the AniFire website.\n- Toggle between subbed and dubbed anime without page reloading (using Zustand for state management).\n- Improved error handling (as of the latest update).\n- Users can watch their favorite shows without interruption.\n- Auto skip intro and outro options on player.\n- Watch history feature to make it easier for users to pick up where they left off (using Zustand with storage persistence).\n- Continue watching anime from where you left off (stored in localStorage).\n- Responsive design that works on all screen sizes (using TailwindCSS to simplify styling—because I love TailwindCSS).\n- 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 😅).\n- Since I’m working solo on this project, implementing new features takes some time (would love if someone could help).\n\n## Where Used What (Libraries):\n\n- **Next.js**:\n\n  - The entire application is wrapped with Next.js (using the `app/` router) and TypeScript.\n  - **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.\n\n- **TailwindCSS**:\n\n  - My relationship with TailwindCSS has deepened ❤️ (One-sided love).\n  - While I prefer using Tailwind for its utility-first approach, I can still work with plain CSS, SCSS, or frameworks like Bootstrap when needed.\n\n- **Zustand (for application state management)**:\n\n  - 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.\n  - **Persist state on `localStorage`**:\n    - For:\n      - Storing the user’s watch history, including video progress and playback timeline.\n      - Storing UI preferences like sidebar menu toggle states.\n      - Storing player settings such as \"Skip Intro,\" \"Skip Outro,\" and \"Auto Next\" options.\n\n- **TanStack Query** (formerly React Query):\n\n  - 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.\n  - Used `useMutation` for making changes to data (e.g., on paginated data or API requests) like search results, categories, and genres.\n  - Mostly used `useQuery` for fetching data efficiently and caching the results to minimize unnecessary API calls.\n  - Also used `useQueries` to fetch data from multiple APIs simultaneously (such as fetching carousel data and scheduled anime data).\n\n- **ShadCN UI Components**:\n\n  - 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.\n\n- **ArtPlayer**:\n\n  - 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.\n\n- **React Icons**:\n\n  - 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.\n\n- **Prettier Formatter**:\n  - 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.\n\n## For local development\n\n- Clone the repository.\n\n  ```bash\n  git clone https://github.com/Zeddxx/ani-fire.git\n  ```\n\n- Install the npm or yarn or pnpm.\n\n  ```bash\n  npm install or yarn add or pnpm install\n  ```\n\n- Add the `.env` on root directory.\n  \u003e [!TIP]\n  \u003e path: root to anifire outside the app directory\n\n```bash\n## This should be a aniwatch api of ritesh repo (without last slash /)\nNEXT_PUBLIC_BASE_ANIME_URL=E.G -\u003e base_url/api/v2/hianime\n```\n\n## TODO'S\n\n- [ ] Add Dashboard\n- [ ] User authentication.\n- [ ] Add commenting feature\n  - [ ] Add nested comments.\n- [ ] Implement admin dashboard functionality.\n- [ ] Share buttons.\n- [ ] Added Dub functionality.\n- [x] Episode next and previous button.\n  - [ ] Theater mode\n  - [ ] Focus mode.\n- [ ] Store users wishlist anime into database.\n- [ ] SEO implementation.\n\n## Credits\n\n- [ghostRitesh](https://github.com/ghoshRitesh12) for aniwatch api.\n- [HiAnime](https://hianime.to) 👋.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeddxx%2Fani-fire","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeddxx%2Fani-fire","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeddxx%2Fani-fire/lists"}