A modern, full-stack anime streaming and tracking platform built with Next.js, MUI and Node.js. Discover, track, and explore your favorite anime series with a beautiful, responsive interface.
- Anime Discovery: Browse trending, seasonal, and featured anime
- Advanced Search: Filter by genre, year, status, and more
- Anime Details: Comprehensive information including synopsis, characters, music themes, and recommendations
- Personal Watchlists: Create and manage your anime collections
- User Authentication: Secure registration, login, and password recovery
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- JWT-based authentication
- Email verification with OTP
- Password reset functionality
- Premium user roles and permissions
- Admin dashboard for user management
- Rate limiting with Redis support
- Cloudflare Turnstile CAPTCHA integration
- Request caching and optimization
- CORS protection
- Data validation and sanitization
- Comprehensive logging system
- Material-UI components with custom theming
- Dark and light mode support
- Skeleton loading states
- Mobile-first responsive design
- Framework: Next.js 15.2.4
- UI Library: Material-UI (MUI) v7
- State Management: Redux Toolkit
- Icons: Iconify and MUI Icons
- Runtime: Node.js
- Framework: Express.js
- Database: MongoDB with Mongoose ODM
- Authentication: JWT (JSON Web Tokens)
- Password Hashing: bcryptjs
- Email Service: Nodemailer
- Caching: Node-cache & Redis (optional)
- Web Scraping: Cheerio for MyAnimeList data
- Logging: Winston
- Deployment: Vercel-ready configuration
- Environment Management: dotenv
- Process Management: Nodemon (development)
- Security: Helmet, CORS, Rate limiting
- Node.js (v18 or higher)
- MongoDB database
- npm or yarn package manager
git clone https://github.com/Debojit-mitra/Sugoi-Web.git
cd Sugoi-Webcd server
npm install
# Create environment file
cp .env.example .env
# Edit .env with your configuration (see Environment Variables section)
# Start the server
npm run devcd ../client
npm install
# Create environment file
cp .env.example .env
# Edit .env with your configuration
# Start the development server
npm run dev- Frontend: http://localhost:3000
- Backend API: http://localhost:5000
# Server Configuration
NODE_ENV=development
PORT=5000
# Database
MONGO_URI=mongodb://localhost:27017/sugoi-web
# JWT Configuration
JWT_SECRET=your-super-secret-jwt-key
JWT_EXPIRE=30d
# Email Configuration (for notifications)
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_SECURE=false
EMAIL_USER=your-email@gmail.com
EMAIL_PASSWORD=your-app-password
EMAIL_FROM_NAME=Sugoi
EMAIL_FROM_ADDRESS=your-email@gmail.com
# Redis (Optional - for distributed caching)
REDIS_URL=redis://localhost:6379
# Security
CORS_ORIGIN=http://localhost:3000
RATE_LIMIT_WINDOW_MS=900000
RATE_LIMIT_MAX=100
# Cloudflare Turnstile (for CAPTCHA)
TURNSTILE_SECRET_KEY=your-turnstile-secret
TURNSTILE_ENABLED=true
# Cache Control
DISABLE_CACHE=false# API Configuration
NEXT_PUBLIC_API_URL=http://localhost:5000/api/v1
# Cloudflare Turnstile
NEXT_PUBLIC_TURNSTILE_SITE_KEY=your-turnstile-site-keyThe backend is configured for deployment on various platforms:
Vercel:
- The
vercel.jsonconfiguration is included - Set environment variables in your Vercel dashboard
- Deploy directly from your Git repository
Other Platforms:
# Build and start for production
npm run startVercel (Recommended):
cd client
npm run build
npm run startThe backend provides a comprehensive REST API with the following endpoints:
POST /api/v1/auth/register- User registrationPOST /api/v1/auth/login- User loginPOST /api/v1/auth/logout- User logoutPOST /api/v1/auth/forgot-password- Password reset requestPOST /api/v1/auth/reset-password/:token- Reset passwordPOST /api/v1/auth/verify-otp- Verify email OTP
GET /api/v1/anime/trending- Get trending animeGET /api/v1/anime/seasonal- Get seasonal animeGET /api/v1/anime/search- Search anime with filtersGET /api/v1/anime/:id- Get anime detailsGET /api/v1/anime/:id/characters- Get anime charactersGET /api/v1/anime/:id/recommendations- Get recommendations
GET /api/v1/user/profile- Get user profilePUT /api/v1/user/profile- Update user profileGET /api/v1/user/watchlist- Get user's watchlistPOST /api/v1/user/watchlist- Add to watchlistDELETE /api/v1/user/watchlist/:id- Remove from watchlist
GET /api/v1/admin/users- Get all usersPUT /api/v1/admin/users/:id- Update userDELETE /api/v1/admin/users/:id- Delete userGET /api/v1/admin/stats- Get platform statistics
For detailed API documentation, see Backend Documentation.
Backend:
npm run dev- Start development server with nodemonnpm start- Start production server
Frontend:
npm run dev- Start development server with Turbopacknpm run build- Build for productionnpm start- Start production server
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the ISC License.
- MyAnimeList for anime data
- Material-UI for the component library
- Next.js for the React framework
- Express.js for the backend framework
Important
This is a personal project created for educational and portfolio purposes. The application scrapes data from MyAnimeList (MAL) without explicit permission from MAL. This project is not intended for commercial use and should only be used for learning and demonstration purposes. Please respect the terms of service of MyAnimeList and consider obtaining proper permissions before deploying this application publicly or using it for commercial purposes.
If you encounter any issues or have questions, please open an issue on the GitHub repository.
Made with ❤️ by Debojit