PHMagandang araw sa inyo, mga Ka-PHC!
Gusto ko lang pong ibahagi at ipagmalaki itong project na binuo ko mula sa simula, isang streaming web app na pinangalanan kong NikzFlix. Malaking tulong po ito sa aking pag-aaral sa web development, at labis kong ikinagagalak ang naging resulta.
Sana po ay magustuhan ninyo!
Sana po ay nagustuhan ninyo ang aking proyekto. Bukas po ako para sa inyong mga puna at mungkahi para mas mapabuti pa ito.
Maraming salamat, mga Ka-PHC!
Live Demo:
You do not have permission to view the full content of this post. Log in or register now.
## NikzFlix Changelog - October 21, 2025
###
New Features
* Curated Collections:
* Added predefined lists of movies/shows (e.g., "Halloween Horrors", "Mind-Bending Sci-Fi") defined in
* These collections are now fetched and displayed as special rows on the HomePage.
* "Because You Watched..." Recommendations:
* Added a new recommendations row on the HomePage based on the user's last watched item.
* Uses the TMDB recommendations API and the user's watch history.
###
Improvements
* Smart TV / Keyboard Navigation:
* Implemented full keyboard and D-Pad remote navigation for posters, buttons, and modal elements.
* Added clear visual focus styles (borders, scaling) using CSS
* Implemented automatic font size scaling for large TV screens (1080p, 4K) using CSS media queries.
* Video Banner:
* Replaced the static image banner on the HomePage with an auto-playing YouTube trailer background using
* Includes a fallback to the static backdrop image if a trailer isn't found.
* Improved logic to find trailers (searches for "Trailer", "Teaser", or any YouTube video).
* Genre Highlighting on Hover:
* Posters now display up to 3 associated genres at the bottom when hovered over.
* Smoother Row Scrolling:
* Updated the row scrolling mechanism to use
* Updated scroll arrow icons to use FontAwesome chevrons.
* UI Polish & Consistency:
* Standardized the appearance (background, hover effect) of secondary buttons (like "Add to List", Season/Episode selectors, "Clear Data" buttons) using CSS variables for a consistent look.
###
Bug Fixes
* Drama Page Source:
* Resolved CORS errors by removing reliance on blocked external APIs (
* Updated
* Adjusted
Gusto ko lang pong ibahagi at ipagmalaki itong project na binuo ko mula sa simula, isang streaming web app na pinangalanan kong NikzFlix. Malaking tulong po ito sa aking pag-aaral sa web development, at labis kong ikinagagalak ang naging resulta.
Sana po ay magustuhan ninyo!
- Moderno at Astig na UI/UX: Maganda at malinis na user interface na may pagpipiliang Dark/Light mode para laging kumportable ang iyong mga mata.
- Pag-browse ng mga Pelikula at TV Show: Makakapili mula sa libu-libong palabas galing sa TMDB API. Mayroon itong malinaw na mga kategorya tulad ng Trending, Popular, Anime, at Asian Dramas.
- Multi-Source Video Player: Hindi ka mabibitin dahil maraming mapagpipiliang video sources para sa bawat pelikula o episode.
- Live TV (IPTV) Player: Manood ng mga Live TV channel, kasama na ang mga local at international. Mayroon din itong search function para mahanap agad ang channel na gusto mo.
- User Accounts at Syncing: Maaaring mag-register at mag-login. Ang iyong data tulad ng "My List" at "Continue Watching" ay naka-save online gamit ang Firebase Firestore para ma-access sa iba't ibang device.
- Tampok na "My List": I-save ang iyong mga paboritong palabas para mabilis mong mabalikan anumang oras.
- "Continue Watching" at Watched History: Awtomatikong tinatandaan ng app kung saang bahagi ka ng isang series huminto. Mayroon ding checkmark ang mga palabas na natapos mo nang panoorin.
- Live Visitor Counter: Makikita mo sa ibabang bahagi ng page (footer) kung ilang users ang online sa kasalukuyan, gamit ang Firebase Realtime Database.
- Advanced Search at Genre Filter: Mabilis na maghanap ng palabas gamit ang search bar o i-filter ito base sa gusto mong genre.
- Personalized häçker Greeting: Bago mag-load ang site, may isang astig na "häçker-style" na pagbati na sasalubong sa mga "Ka PHCorner"!
- Anti-DevTools Screen: Subukan mong buksan ang DevTools (F12) sa aking app at may sorpresang lalabas.
Isang maliit na security feature para sa mga mahilig mag-inspeksyon.
- Frontend: ReactJS
- Styling: Tailwind CSS
- Backend & Database: Firebase (Auth, Firestore, Realtime Database)
- API: The Movie Database (TMDB) API
Sana po ay nagustuhan ninyo ang aking proyekto. Bukas po ako para sa inyong mga puna at mungkahi para mas mapabuti pa ito.
Maraming salamat, mga Ka-PHC!
Live Demo:
You do not have permission to view the full content of this post. Log in or register now.
## NikzFlix Changelog - October 21, 2025
###
New Features* Curated Collections:
* Added predefined lists of movies/shows (e.g., "Halloween Horrors", "Mind-Bending Sci-Fi") defined in
config.js.* These collections are now fetched and displayed as special rows on the HomePage.
* "Because You Watched..." Recommendations:
* Added a new recommendations row on the HomePage based on the user's last watched item.
* Uses the TMDB recommendations API and the user's watch history.
###
Improvements* Smart TV / Keyboard Navigation:
* Implemented full keyboard and D-Pad remote navigation for posters, buttons, and modal elements.
* Added clear visual focus styles (borders, scaling) using CSS
:focus states for better visibility.* Implemented automatic font size scaling for large TV screens (1080p, 4K) using CSS media queries.
* Video Banner:
* Replaced the static image banner on the HomePage with an auto-playing YouTube trailer background using
ReactPlayer.* Includes a fallback to the static backdrop image if a trailer isn't found.
* Improved logic to find trailers (searches for "Trailer", "Teaser", or any YouTube video).
* Genre Highlighting on Hover:
* Posters now display up to 3 associated genres at the bottom when hovered over.
* Smoother Row Scrolling:
* Updated the row scrolling mechanism to use
scrollBy({ behavior: 'smooth' }) for a much smoother animation when clicking the arrow buttons.* Updated scroll arrow icons to use FontAwesome chevrons.
* UI Polish & Consistency:
* Standardized the appearance (background, hover effect) of secondary buttons (like "Add to List", Season/Episode selectors, "Clear Data" buttons) using CSS variables for a consistent look.
###
Bug Fixes* Drama Page Source:
* Resolved CORS errors by removing reliance on blocked external APIs (
api.consumet.org, api.xyrastream.live).* Updated
DramaPage.jsx to use the reliable TMDB API endpoint for "Popular Asian Dramas".* Adjusted
DramaDetailPage.jsx to fetch details from TMDB; removed non-functional episode list/player logic (playback now handled via Modal).- Modal Play Functionality: Fixed issue where playing Movies from the modal did not correctly update the "Continue Watching" list.
- React Key Warnings: Fixed duplicate
keyprop warnings in skeleton loaders for rows. - Component Prop Errors: Fixed
ReferenceErrorrelated to passingonOpenModalprop incorrectly inApp.jsx. - Minor Syntax Errors: Corrected minor syntax issues (e.g., missing closing tag) in JSX.
