DEV Community

Cover image for 🚀 Build Your Own Anime Explorer with HTML, Tailwind & the Jikan API!
Ashish prajapati
Ashish prajapati

Posted on

🚀 Build Your Own Anime Explorer with HTML, Tailwind & the Jikan API!

#webdev #javascript #api #css

Are you an anime fan and a web dev? Why not combine both and build something epic? 💥

Introducing AnimeForge – a fully responsive web app that shows top-rated anime, movies, and even lets you search and view detailed info using the Jikan API (MyAnimeList Unofficial API). This project is built with HTML, Tailwind CSS, and JavaScript – no frameworks, just clean code and otaku energy! ⚔️👨‍💻

🌟 Features

✅ Explore top-rated anime series

✅ Browse anime movies

✅ View full anime details (genre, episodes, rating, synopsis, etc.)

✅ Dark / Light Theme Toggle 🌗

✅ Live Search functionality 🔍

✅ Responsive layout with Tailwind CSS

✅ Built with 🧠 and ❤️ by a fellow otaku

🧪 Tech Stack

  • 📄 HTML5
  • 🎨 Tailwind CSS
  • 🔥 Vanilla JavaScript
  • 📡 Jikan API – for anime data

🖼️ Screenshots

All UI is responsive and works great on mobile & desktop.

Home Page
Home Page 2
About Page

Anime Series
Anime Movies

📂 Project Structure 

AnimeForge/
├── index.html             # Top Anime Page
├── movies.html            # Movie Page
├── anime.html             # Anime Details Page
├── about.html             # About Me Page
├── theme_change.js        # Dark mode logic
├── screenshorst/          # Screenshots
└── README.md / LICENSE
Enter fullscreen mode Exit fullscreen mode

🔧 How It Works

We use the Jikan REST API to fetch:

  • 📺 Top anime series → https://api.jikan.moe/v4/top/anime?type=tv
  • 🎬 Top anime movies → https://api.jikan.moe/v4/anime?type=movie
  • 🔍 Search anime by name → https://api.jikan.moe/v4/anime?q={search}

All cards are dynamically generated using plain JS DOM magic. Clicking on a card opens anime.html?id=XXXX, fetches full info, and renders a beautiful detail view.

💡 Live Demo

🚀 https://animeforge.netlify.app/

📁 Or just clone it and run locally:

git clone https://github.com/Anticoder03/animeforge.git
cd animeforge
open index.html
Enter fullscreen mode Exit fullscreen mode

🙋‍♂️ About the Developer

Hey! I'm Ashish Prajapati – a full-stack learner, anime lover, and terminal ninja from 🇮🇳
Built this as a fun side project to combine code + anime 👨‍💻⚔️

📜 License

Licensed under the MIT License. Use it, remix it, share it freely 🪄

“Anime taught me never to give up. Code made me unstoppable.” – Ashish (Anticoder03)

✨ Let’s Connect!

💬 Drop a comment if you liked it or want more anime-themed dev content.
💡 Thinking of building a React/GSAP version next — who’s in?

Top comments (0)