🔎 Anime Search App

✨ Features

• 🎴 Minimalist Interface — Clean, card-based layout for fast anime browsing.
• 🪩 Interactive Animations
  • Anime.tsx — Features items with a subtle glowing edge effect, adding a dynamic visual touch.
  • AnimeDetail.tsx — Implements a 3D hover tilt effect for images, creating an immersive and responsive feel.
• ⚡ Smooth Transitions — Subtle animations enhance the experience without slowing it down.
• 📱 Fully Responsive — Seamlessly adapts across desktop, tablet, and mobile screens.
• 🧭 User-Centered Design — Focused on simplicity, readability, and intuitive navigation.
• 🔍 Powered by Jikan API — Fetches accurate and updated anime information directly from MyAnimeList.

🛠 Tech Stack

• Frameworks & UI → React, Tailwind CSS, shadcn/ui, Aceternity UI
• Animations → React Bits, Framer Motion
• APIs & Integrations → Jikan API

🚀 Getting Started

Prerequisites

• React.js (v19.2.3 or later) (Upgrade React: npm install react@latest react-dom@latest)
• Node.js (v24.12.0 or later)
• npm

Installation

1. Clone the repository

   git clone https://github.com/Yapphy26/anime-search-app.git

2. Go into the project

   cd anime-search-app

3. Install dependencies

   npm install

4. Run the app, start the development server

   npm run dev

5. Visit http://localhost:4000 in your browser.

🌐 Deployment

This site is deployed with Vercel. To deploy your own version:

1. Push your code to GitHub
2. Connect the repo to Vercel
3. Vercel will build and deploy automatically

📄 License

This project is licensed under the MIT License.

⭐️ Bonus Implementation

• 🪩 Interactive Animations
  • Anime.tsx — Features items with a subtle glowing edge effect, adding a dynamic visual touch.
  • AnimeDetail.tsx — Implements a 3D hover tilt effect for images, creating an immersive and responsive feel.
• 📱 Fully Responsive — Seamlessly adapts across desktop, tablet, and mobile screens.

🏁 Goals

• ✅ Project uses npm only (no yarn/pnpm)
• ✅ npm install and npm run dev starts the app successfully
• ✅ Dev server runs on port 4000
• ✅ No environment variables required
• ✅ Project is deployed and accessible via live URL
• ✅ All core functionality works as described
• ✅ Code is written in TypeScript
• ✅ Redux is properly implemented for state management
• ✅ If bonus features implemented, they are listed in README under "Bonus Implementation" header