Skip to content

Anime site using React.JS .Look up specific animes and details page

Notifications You must be signed in to change notification settings

splendorgg/react-anime-site

Repository files navigation

Anime Site Using React

Overview

This is a feature-rich anime website clone built using React. The site includes features like a search bar to look up specific titles and details page that shows information about each anime.

Project Walk-Through

Home Page

ScreenShot

  • Top 10 airing animes ordered by ratings

ScreenShot

  • Trending Animes

ScreenShot

  • Anime images display section
  • Latest anime episodes and genres

Anime Detail Page

ScreenShot

  • Detailed Information: Each anime's synopsis, episode count, rating, and other key details.
  • Similar Animes: Recommended titles based on genre.
  • Top Airing: Current popular shows for easy access to trending content.

ScreenShot

  • Anime Search

Technology Used

  • React.js with Vite for fast build and dev environments
  • React Router for seamless navigation between pages
  • Axios for making API requests
  • React Icons for a visually appealing UI
  • React Popper for positioning tooltips and popups
  • Swiper for smooth carousels and slide effects
  • Ant Design for consistent styling and component usage
  • EsLint for code consistency and quality
  • Jikan API (v4) for up-to-date anime data

How to Install

  1. Ensure you have Git and Node (v20.17.0) installed.

  2. Clone the repository and install the dependencies:

# Clone this repository
git clone https://github.com/splendorgg/react-anime-site.git

# Go into the repository
cd react-anime-site

# Install dependencies
npm install

# Run the project
npm run dev