Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sahinmeric/anime-finder
A Next.js-based web application for searching anime titles using the AniList GraphQL API. Built with Tailwind CSS for responsive design and Apollo Client for managing GraphQL queries.
https://github.com/sahinmeric/anime-finder
anilist-api apollo graphql nextjs tailwindcss
Last synced: about 1 month ago
JSON representation
A Next.js-based web application for searching anime titles using the AniList GraphQL API. Built with Tailwind CSS for responsive design and Apollo Client for managing GraphQL queries.
- Host: GitHub
- URL: https://github.com/sahinmeric/anime-finder
- Owner: sahinmeric
- Created: 2024-09-07T01:04:41.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2024-09-23T22:01:17.000Z (4 months ago)
- Last Synced: 2024-10-31T11:05:43.394Z (3 months ago)
- Topics: anilist-api, apollo, graphql, nextjs, tailwindcss
- Language: TypeScript
- Homepage: https://anime-finder-tan.vercel.app
- Size: 317 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Anime Finder
## Live Demo: https://anime-finder-tan.vercel.app
Anime Finder is a simple web application that allows users to search for anime using the AniList GraphQL API. It displays information such as the anime's title, description, episode count, genres, and cover image.
## Features
- **Anime Search**: Users can search for anime by name.
- **Responsive Design**: The app is fully responsive and works across different devices.
- **Tailwind CSS**: The UI is styled using Tailwind CSS for a modern and clean look.
- **Next.js**: This project uses Next.js for server-side rendering and routing.
- **GraphQL & Apollo Client**: Fetches data using Apollo Client and the AniList GraphQL API.
## Technologies Used
- **Next.js**: A React framework for building server-side rendered applications.
- **Apollo Client**: A GraphQL client that helps manage data fetching.
- **Tailwind CSS**: A utility-first CSS framework for building custom designs.
- **Vercel**: Deployed using Vercel for seamless hosting and deployment.
## Getting Started
### Prerequisites
To run this project locally, you need to have the following installed:
- Node.js
- Yarn or npm
### Installation
1. Clone the repository:
```bash
git clone https://github.com/yourusername/anime-finder.git
```
1. Clone the repository:
```bash
git clone https://github.com/yourusername/anime-finder.git
```
2. Navigate to the project directory:
```bash
cd anime-finder
```
3. Install dependencies:
```bash
npm install
```
4. Run the Application:
```bash
npm run dev
```
5. Open http://localhost:3000 to view the application in your browser.
### Deployment
This project is deployed on Vercel. For any future updates, push your changes to the branch connected to Vercel, and the redeployment will occur automatically.
### Features
- Anime Search: Allows users to search for anime by name.
- Responsive Design: Fully responsive and works across all devices.
- Next.js & Tailwind CSS: Built using Next.js with Tailwind CSS for styling.
- GraphQL & Apollo Client: Uses Apollo Client and the AniList GraphQL API for fetching data.
### Future Improvements
- Favorites: Enable users to save favorite anime.
- Pagination: Add pagination to manage large search results.
- Additional Search Filters: Provide filtering by genres, release years, and more.
### Licence
This project is licensed under the MIT License. See the LICENSE file for details.
## Contact
- **LinkedIn**: [LinkedIn](https://www.linkedin.com/in/your-profile/)