A modern, React-based streaming website for anime and cartoons with real-time data scraping from watchanimeworld.in. Features include advanced search, category filtering, URL persistence, and a YouTube-style mobile interface.

• 🎬 Real-time Content: Scrapes anime and cartoon data from watchanimeworld.in
• 🔍 Advanced Search: YouTube-like search with live suggestions and history
• 📱 Mobile-Optimized: Expandable search bar and responsive design
• 🎯 Category Sections: Browse by Franchise, Network, Language
• 📊 Ranked Shows: Most-watched shows with visual rankings
• 🆕 Latest Episodes: Newest episode releases
• 🔗 URL Persistence: Shareable links for searches and categories
• 🎨 Modern UI: Glassmorphism, smooth animations, dark theme

• Node.js (v14 or higher)
• npm (v6 or higher)

1. Clone the repository

git clone https://github.com/AprajitSarkar/anime-old-cartoon-api.git
cd anime-old-cartoon-api

2. Install frontend dependencies

npm install

3. Install backend dependencies

cd server
npm install
cd ..

Option 1: Run Both Servers Separately

1. Start the backend server (Terminal 1):

cd server
npm run dev

Backend will run on http://localhost:3001

2. Start the frontend (Terminal 2):

npm run dev

Frontend will run on http://localhost:5173

Option 2: One-Command Start (if configured)

npm run dev

3. Open in browser: Navigate to http://localhost:5173

anime-old-cartoon-api/
├── server/                    # Backend Express server
│   ├── scrapers/             # Web scraping modules
│   │   ├── homepageScraper.js
│   │   ├── categoryScraper.js
│   │   ├── searchScraper.js
│   │   ├── videoScraper.js
│   │   ├── categorySectionsScraper.js
│   │   └── rankingScraper.js
│   ├── server.js             # Main server file
│   └── package.json
├── src/                      # Frontend React application
│   ├── components/           # React components
│   │   ├── YouTubeHeader.jsx
│   │   ├── VideoFeed.jsx
│   │   ├── VideoPlayer.jsx
│   │   ├── CategoryCarousel.jsx
│   │   ├── RankedShows.jsx
│   │   └── LatestEpisodes.jsx
│   ├── context/             # React Context
│   │   └── VideoContext.jsx
│   ├── data/                # API integration
│   │   └── animeData.js
│   └── main.jsx             # App entry point
├── index.html
├── package.json
└── README.md

• React with Vite
• Material-UI (@mui/material)
• Framer Motion (animations)
• React Router DOM (URL routing)

• Node.js with Express
• Axios (HTTP requests)
• Cheerio (HTML parsing for scraping)
• CORS (cross-origin requests)

• Collapsed by default on mobile (<600px)
• Click search icon to expand
• Back button to collapse
• Auto-focus on expansion

• Horizontal scrollable sections
• Franchise, Network, Language categories
• Click to filter content

• Search: ?search=naruto
• Category: ?category=Movies
• Shareable links that maintain state

• Top 10 most-watched
• Large rank number overlays
• Glassmorphism effects

Create a .env file in the root directory:

VITE_API_URL=http://localhost:3001

Create a .env file in the server directory:

PORT=3001
SOURCE_WEBSITE=https://watchanimeworld.in

This project scrapes content from watchanimeworld.in.

• This is an educational project demonstrating web scraping techniques
• All content belongs to the original website and its respective owners
• The scraping respects the website's structure and doesn't overload servers
• iframe URLs are cleaned to remove tracking parameters

• Data Source: watchanimeworld.in - All anime and cartoon content
• Design Inspiration: YouTube mobile interface
• Icons: Material-UI Icons
• Animations: Framer Motion

This project is for educational purposes only.

• All scraped content belongs to watchanimeworld.in
• All anime and cartoon rights belong to their respective owners
• This code is provided as-is for learning web scraping and React development

• Video player may show AdBlock warnings (from iframe sources)
• Some videos may require disabling browser extensions
• Scraping depends on source website structure (may break if site updates)

• Related content sidebar when playing videos
• User accounts and watch history
• Offline video downloads
• Multi-language subtitles
• PWA (Progressive Web App) support

Contributions welcome! Please:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open a Pull Request

For questions or issues, please open a GitHub issue.

Disclaimer: This project is for educational purposes. Please support official anime streaming platforms.