A high-performance, Netflix-inspired streaming application built for the modern web.
Experience cinema-quality streaming with zero latency.
HubPhim redefines the web streaming experience. Built with the latest Next.js 16 (App Router) and React 19, it delivers a seamless, app-like feel right in the browser. From an intelligent hero banner that showcases the highest-rated blockbusters to a lightning-fast video player, every detail is crafted for immersion.
- Immersive UI: Dark-themed, glassmorphism design inspired by industry leaders.
- Zero-Latency Navigation: Instant page transitions powered by Next.js App Router.
- Advanced Player: Custom HLS.js implementation supporting multi-server sources (Vietsub, Dubbed).
- Smart Resume: Automatically remembers playback position for every episode.
- Smart Hero Banner: Algorithmically selects Top Rated (>9.0) movies to feature.
- Instant Search: Live search results with visual previews and keyboard navigation.
- Deep Filtering: Browse by Genre, Country, Year, or Category (Series, Movies, Anime).
- Edge Optimized: Deployed on Cloudflare Pages for global sub-second response times.
- Core Web Vitals: Scoring 90+ on performance metrics.
- Resource efficiency: Lazy-loaded assets and aggressive code splitting.
| Core | UI & Styling | Infrastructure | Data & Media |
|---|---|---|---|
 |
 |
 |
PhimApi (REST) |
| TypeScript | CSS Modules | Edge Runtime | HLS.js (Streaming) |
| App Router | Lucide Icons | CI/CD Pipeline | Next/Image |
A scalable, modular structure designed for maintainability.
src/
├── 🎯 app/ # Next.js App Router (Routes & Layouts)
│ ├── (routes)/ # Categorized route groups
│ └── api/ # Edge API Routes
├── 🧩 components/ # Components following Atomic Design
│ ├── home/ # Hero, Feature Sections
│ ├── movie/ # Cards, Grids, Sliders
│ ├── player/ # Streaming Logic & Controls
│ └── ui/ # Shared Primitives (Buttons, Loaders)
├── 🪝 hooks/ # Custom React Hooks (e.g., useWatchHistory)
├── 🔌 services/ # API Integration Layer
├── 🌊 utils/ # Helpers & Constants
└── 📝 types/ # TypeScript Definitions
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone https://github.com/nhatphatt/hubphim.git cd hubphim -
Install dependencies
npm install
-
Run development server
npm run dev
Access the app at
http://localhost:3000.
This project maintains high standards through strict linting and organization:
- ✅ Type Safety: 100% strict TypeScript.
- ✅ Clean Code: No unused exports or dead code.
- ✅ Optimized Build: Minimal bundle size (<700KB gzipped).
- ✅ Best Practices: Semantic HTML & Accessibility focused.
Contributions are welcome! Please feel free to submit a Pull Request.
Crafted with passion by nhatphatt.