If you want to build a website using the HiAnime API from this GitHub repository: https://github.com/yahyaMomin/hianime-API, and make it similar to Lovable.dev AI (a simple, lovable interface), here's a full prompt/plan for what you might want to build, followed by code to get started:💡 Prompt/Project Idea"Build a clean, user-friendly anime streaming/search website using the HiAnime API. The site should have a modern, minimal design like lovable.dev, where users can:Search anime by nameView trending or recent episodesClick on an anime to see its episodesStream an episode using the embed playerInclude light/dark mode toggle, responsive layout, and fast-loading interface."🔧 Tech Stack:Frontend: React + Tailwind CSS (for clean UI like lovable.dev)Backend: Optional (API is already public)API: HiAnime API⚙️ Features:🔍 Anime Search🆕 Latest Episodes📺 Watch Anime via Embed🌙 Dark/Light Mode⚡ Smooth transitions (using Framer Motion or Tailwind transitions)⚗️ Example Frontend Code (React + Tailwind)npx create-react-app hianime-ui cd hianime-ui npm install axios npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p tailwind.config.js:content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [], App.jsimport React, { useState } from "react"; import axios from "axios"; function App() { const [query, setQuery] = useState(""); const [results, setResults] = useState([]); const searchAnime = async () => { const res = await axios.get(https://hianime-api.vercel.app/anime/search?q=${query}); setResults(res.data.results || []); }; return ( <div className="min-h-screen bg-white dark:bg-gray-900 text-black dark:text-white p-4"> <h1 className="text-2xl font-bold mb-4">HiAnime Search</h1> <input className="w-full p-2 border dark:bg-gray-800 rounded" type="text" placeholder="Search anime..." value={query} onChange={(e) => setQuery(e.target.value)} /> <button onClick={searchAnime} className="mt-2 px-4 py-2 bg-blue-600 text-white rounded"> Search </button> <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6"> {results.map((anime) => ( <div key={anime.id} className="bg-gray-100 dark:bg-gray-800 p-2 rounded"> <img src={anime.image} alt={anime.title} className="w-full rounded" /> <h2 className="mt-2 text-sm">{anime.title}</h2> </div> ))} </div> </div> ); } export default App; 🧪 Test API (try in browser):Search anime:https://hianime-api.vercel.app/anime/search?q=one%20pieceRecent episodes:https://hianime-api.vercel.app/anime/recent-episodesWould you like me to generate a full deployable site (e.g., Vercel + React) or help you set up a full anime viewing page with episode lists and video playback?
I'll help you build a clean, modern anime streaming website using the HiAnime API with a design inspired by lovable.dev. Let's create a Next.js application with Tailwind CSS for styling and the AI SDK for any potential AI features we might want to add later.
I've created a modern anime streaming website using Next.js with the App Router and Tailwind CSS for styling. The application has a clean, minimal design inspired by lovable.dev with a focus on user experience and performance.
The application uses the HiAnime API for all data:
#FF3366) to differentiate from typical blue interfacesYou can deploy this application to Vercel with a single click using the "Deploy" button in the top right corner of the UI.
I'll fix the API error by updating the endpoints and adding better error handling. The issue is that some endpoints might not exist or have different paths than expected.
I've fixed the API error by implementing several improvements:
next: { revalidate } to reduce API callsThe application should now work even if some API endpoints are unavailable, and users will see helpful messages instead of crashes.