AnimeHub is a React and TypeScript-based project that serves as an anime catalogue, allowing users to search for and view detailed information on various anime. It utilizes Chakra UI for a sleek, responsive user interface and React Query for efficient data fetching and state management. Built with Vite for a fast development experience, this application leverages the Jikan API, which is an unofficial MyAnimeList API, to fetch anime data.
Check out the live demo of AnimeHub to see the application in action.
- Anime Search: Users can search for anime by title or genre.
- Detailed Information: View detailed information about each anime, including synopsis, characters, rating, and airing dates.
- Filtering Options: Users can filter anime by score, most scored, and favorites to easily find top-rated or preferred anime.
- Responsive Design: A user-friendly interface that adapts to various screen sizes, built with Chakra UI.
- Data Fetching: Utilizes React Query for efficient and easy data fetching, caching, and updating.
- React 17+
- TypeScript 4.0+
- Vite for fast development and build
- Chakra UI for styling and layout
- React Query for data fetching management
- Jikan API for fetching anime data
To install and run AnimeHub locally, follow these steps:
# Clone the repository
git clone https://github.com/samuelpresse/AnimeHub
# Install dependencies
npm install
# Run the application in development mode
npm run dev