An ultra-minimalist, luxury dark cinematic streaming and media discovery platform built using Next.js, React 19, Tailwind CSS v4, and the TMDB API.
👉 Explore the Live App: meowly.vercel.app
Meowly is a state-of-the-art cinematic web application that redefines digital media exploration. Utilizing an absolute black (#000000) canvas, glowing background radial gradients, crystal-clear glassmorphic panels, and bold white highlights, Meowly delivers a bespoke, theater-like atmosphere. It brings movie trailers, series episodes, production studios, actor timelines, and community reviews into a single, cohesive, luxury interface with highly responsive, fluid micro-animations.
- Adaptive Multi-Server Video Player: Stream movies and TV shows instantly through a custom
VideoPlayersupporting multiple source servers, theater mode, autoplay overrides, and seamless quality selection. - Resume Playback: Pick up exactly where you left off. The app remembers your viewing progress across multiple seasons and movies.
- Trailer Modals: Instant overlays that play high-definition YouTube trailers, teasers, and clips directly inside the browser.
- Season & Episode Trackers: Elegant interactive episode dropdowns and carousels showcasing episode runtimes, release dates, and high-res stills.
- Production Studios Catalog: A dedicated explorer for iconic entertainment conglomerates like Marvel, Pixar, Walt Disney, Warner Bros, A24, and Studio Ghibli.
- TV Networks Grid: Browse premium streaming channels (Netflix, HBO, Disney+, Apple TV+, Prime Video) with dynamic media feeds.
- Infinite Scroll Delivery: Fluid, modern paging utilizing the browser's native
IntersectionObserverto append additional shows and movies in real-time as you browse.
- Watchlist: Save your favorite titles for later inside a clean, beautiful horizontal row sync.
- Recently Played Carousel: Instant access to your watch history directly on the home page so you can resume active media in one click.
- No-Lag Client Syncing: Uses an optimized dual-layered in-memory cache system to bypass slow localStorage reads and dispatches custom state-update events (
watchlistUpdated,recentlyPlayedUpdated) for smooth multi-tab sync.
- Unified Instant Search: Rapidly search and parse results across multi-layered queries: Movies, TV Shows, Actors, Directors, and Production Companies.
- Refined Genre and Date Filters: Deep discovery tools that sort matching movies by release year, genre tags, popularity, ratings, or custom criteria.
- Dynamic Title Hero Carousel: An auto-sliding dashboard on the landing page that pulls trending items and asynchronously resolves dynamic title typography logos for an authentic theatre feel.
- Moctale API Integration: Incorporates a custom scraper powered by
got-scrapingthat asynchronously pulls, sanitizes, and displays authentic movie and show reviews directly on details dashboards.
- Ad Blocker Detection: A subtle, helpful overlay dialog that alerts users if aggressive ad blockers are interfering with streaming server endpoints, ensuring reliable video playback.
- Exit Page Transitions: Fluid entry and exit page animations designed with
framer-motionfor a true app-like experience.
The project is structured around standard Next.js App Router conventions:
meowly/
├── public/ # Core assets, favicons, logos
├── src/
│ ├── app/ # Next.js Routes & Server Pages
│ │ ├── actions.ts # Central server actions (TMDB, Moctale Scraper)
│ │ ├── awards/ # Oscars and awards timelines
│ │ ├── categories/ # Custom genre lists
│ │ ├── collection/ # TMDB movie collections route
│ │ ├── companies/ # Production company directory pages
│ │ ├── company/ # Selected company detailed media list
│ │ ├── dmca/ # DMCA and legal disclaimer compliance
│ │ ├── layout.tsx # Root layout, fonts, custom hooks
│ │ ├── loading.tsx # Global dynamic skeleton loaders
│ │ ├── movies/ # Film catalog pages
│ │ ├── network/ # TV Network detail feeds
│ │ ├── people/ # Star actors directory list
│ │ ├── person/ # Detailed celebrity biographies and timelines
│ │ ├── tv/ # Series exploration directory
│ │ ├── watch/ # Dual-server cinema page route
│ │ └── watchlist/ # User bookmark and watchlist layout
│ │
│ ├── components/ # Reusable React components
│ │ ├── ui/ # Atom level custom components
│ │ ├── AdBlockerPopup.tsx
│ │ ├── AmbientBackground.tsx
│ │ ├── CompanyDetailsClient.tsx
│ │ ├── DetailsHero.tsx
│ │ ├── EpisodeList.tsx
│ │ ├── Hero.tsx # Auto-scroller marquee
│ │ ├── MoctaleReviews.tsx
│ │ ├── MovieCard.tsx # Thumbnail hover container
│ │ ├── Navbar.tsx # Glassmorphic responsive header
│ │ ├── PageTransition.tsx
│ │ ├── VideoPlayer.tsx # Multi-server player
│ │ └── WatchContainer.tsx
│ │
│ └── lib/ # Core utilities and data caches
│ ├── storage.ts # Watchlist & History sync mechanics
│ ├── tmdb.ts # Core TMDB Client with retry fallback logic
│ └── utils.ts # Tailwind style mergers
│
├── tailwind.config.ts # Tailwind CSS properties
├── tsconfig.json # Strict TypeScript settings
└── package.json # Core scripts and dependencies
- Front-End Framework: Next.js 16 (App Router)
- UI Library: React 19
- Styling Engine: Tailwind CSS v4
- Animations: Framer Motion v12
- Iconography: Lucide React
- Network & Requests: Got Scraping (Server-side reviews API client)
- Metadata Provider: The Movie Database (TMDB) API
Follow these steps to run a copy of Meowly on your machine:
git clone https://github.com/utkarshgupta188/meowly.git
cd meowlynpm installCreate a .env.local file in the root directory and append your TMDB API token and credentials:
# TMDB Developer API Key (Create at https://www.themoviedb.org/settings/api)
TMDB_API_KEY=your_tmdb_api_key_here
# (Optional) Moctale Integration cookies
MOCTALE_COOKIE=your_moctale_auth_token_herenpm run devOpen http://localhost:3000 with your browser to experience the site live!
Contributions are always welcome to improve features, refine animations, or optimize streams!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This product uses the TMDB API but is not endorsed or certified by TMDB. All video streaming servers are third-party embeds; Meowly does not host, upload, or own any video streams on its servers.
For copyright removals, please refer to our integrated DMCA Compliance Page.
Made with 💚 by Utkarsh Gupta