🎌 Anime GraphQL App

A full-stack Anime Tracker built using React, Apollo Client, and GraphQL

---

✨ GraphQL Pagination Strategies Showcase

This app demonstrates various GraphQL pagination strategies:

Strategy	Icon	Description
Offset-based	📄	Traditional pagination with page numbers
Cursor-based	🔗	Forward navigation using cursors
Relay-style	🎯	Bi-directional with forward & backward
Infinite Scroll	🔄	Auto-loading content as you scroll

You can Create, Read, Update, and Delete anime entries — with a clean UI and smooth pagination.

---

🔗 Live Demo

🌐 anime-graphql-app.vercel.app

---

📦 Features

🎯 Core Features 📋 Full CRUD on anime list 💅 Beautiful and simple React UI 🧠 Educational project for GraphQL beginners ⚡ Real-time updates with Apollo Client

🔄 Pagination Types 🔁 Offset pagination (limit + offset) 🔗 Cursor pagination (after + limit) 🎯 Relay-style pagination (after/before, first/last) 🔄 Infinite scroll using Relay-style

---

📂 Folder Structure

anime-graphql-app/
├── 🗄️ backend/               # Apollo Server (GraphQL)
│   ├── 📊 data.js            # Static anime data
│   ├── 📋 schema.js          # TypeDefs + Resolvers
│   └── 🚀 index.js           # Server entry point
│
└── 💻 frontend/              # React + Apollo Client
    ├── 🧩 components/        # AnimeCard, Forms, Pagination UIs
    ├── 🔍 graphql/           # Queries and mutations
    ├── 📱 pages/             # Views like AnimeList
    └── ⚛️ App.js             # Main App

---

⚙️ Getting Started (Local Setup)

✅ Make sure Node.js and npm are installed on your machine.

1. 📥 Clone the repository

git clone https://github.com/your-username/anime-graphql-app.git
cd anime-graphql-app

2. 🚀 Start the Backend (GraphQL Server)

cd backend
npm install
node index.js

3. 💻 Start the Frontend (React App)

Open a new terminal tab or window:

cd frontend
npm install
npm start

✅ Now the app should be running and connected to your GraphQL backend.

---

📚 Read the Blog

Want to understand how pagination works in GraphQL with Apollo Client?

---

🛠️ Tech Stack

Frontend

Backend

Data

---

🤝 Contributing

If you find bugs or want to suggest improvements, feel free to fork and raise a PR.

Contributions are welcome! 🎉

---

Happy Coding! 🚀✨