MovieFlix is a Movie and TV discovery web app built for users who want a fast, visual way to find popular movies and TV shows through trailers, recommendations, cast information, and personalized media lists.
The app is built with React + Vite, styled with Tailwind CSS, powered by the TMDB API, authenticated with Supabase Google OAuth, and deployed on Netlify.
MovieFlix focuses on discovery first. Users can browse trending movies and TV shows, watch trailers, view cast and recommendation data, and save content to their own account when logged in.
Signed-in users can manage their personal entertainment activity, including:
- Continue Watching
- Watchlist
- Comments
The goal is to create a streaming-platform-style experience for discovering what to watch next, while keeping the project structured, scalable, and portfolio-ready.
Recent updates include:
- Added static informational pages: About, Contact, Disclaimer, DMCA, Privacy Policy, and Terms
- Improved the browse experience with category filtering, media-type switching, and updated row components
- Added save buttons and share actions for user media cards
- Added SEO metadata support through dedicated
src/components/SEOutilities and pages - Added person news, filmography, and cast detail enhancements on person pages
- Added site-level assets for search engines and PWA metadata:
public/robots.txt,public/site.webmanifest, andpublic/sitemap.xml - Updated Netlify deployment and configuration support for the serverless person news function
- Browse trending movies and TV shows
- Explore popular movie and TV sections
- Discover content by category, genre, year, and country
- Search across movies, TV shows, and people
- View recommendations related to selected titles
- Responsive interface for desktop, tablet, and mobile
- Navigate with clean, readable dynamic routes
- Watch trailers directly from movie and TV detail pages
- YouTube embeds powered by TMDB video data
- Automatically displays available trailer content
- Graceful fallback when trailer data is unavailable
- Detail layout adapts based on whether a trailer exists
Users who sign in with Google can access personalized app features:
- Create and manage their profile
- Add titles to a watchlist
- Track continue-watching items
- Leave comments on movie or TV detail pages
- Keep user-specific data synced through Supabase
Each movie or TV show has a dedicated details page with:
- Backdrop and poster images
- Title, overview, rating, runtime, genres, and release date
- Official trailer playback when available
- Cast section with actor profile links
- More Like This recommendations
- SEO metadata using
react-helmet-async
MovieFlix also includes actor and cast profile pages with:
- Biography
- Birthday and birthplace
- Known-for information
- Filmography
- Cast member news through a Netlify serverless function and GNews API
The home page gives users a streaming-style landing experience with:
- Hero banner featuring highlighted content
- Trending movie and TV rows
- Popular movie and TV rows
- Provider-inspired content sections such as Netflix, Disney Plus, and HBO Max
- Horizontally scrollable rows
- Reusable media cards
- Hover animations and card overlays
The search and browse experience allows users to:
- Search movies, TV shows, and cast members
- Browse content by category
- Filter by genre, year, and region
- Load more results without overwhelming the interface
- Move between search results, browse pages, and detail pages smoothly
Authenticated users can manage their personal library through Supabase-backed features:
- Watchlist for titles they plan to watch
- Continue Watching for partially watched or saved progress items
- Comments for sharing thoughts on specific titles
- React 19
- Vite 4
- Tailwind CSS 4
- React Router DOM 7
- react-helmet-async
- TMDB API for movie, TV, trailer, cast, and recommendation data
- Supabase for authentication and user-specific data
- Google OAuth through Supabase Auth
- Netlify Functions for serverless API support
- GNews API for cast/person news
- Netlify for hosting and deployment
- Git and GitHub for version control
The app also uses a Netlify serverless function:
netlify/functions/person-news.js- fetches person news from GNews
MovieFlix uses Supabase with Google authentication to manage user sessions and personalized features.
Authenticated features include:
- Watchlist management
- Continue Watching tracking
- User comments
/- Home/login- Authentication/account- User profile/my-list- Watchlist, and continue watching/search- Search and discovery/watch/movies- Popular movies/watch/tv- Popular TV shows/browse/:category- Browse category pages/watch/:slug/:mediaType/:id- Movie or TV details/watch/:slug/:id- Person profile/about- About page/contact- Contact page/disclaimer- Disclaimer page/dmca- DMCA page/privacy- Privacy policy page/terms- Terms and conditions page
MovieFlix uses a dark cinematic design inspired by modern streaming platforms.
Design principles include:
- Responsive dark interface
- Red accent color for calls to action and active states
- Responsive spacing and layout behavior
- Reusable card, row, banner, and section components
- Smooth hover states and transitions
- Mobile-friendly navigation
- Clear visual hierarchy for posters, titles, metadata, and actions
MovieFlix is designed for:
- Desktop
- Tablet
- Mobile
Responsive behavior includes adaptive grids, scrollable content rows, mobile-friendly navigation, fluid images, and adjusted spacing for smaller screens.
- Reusable components reduce duplicated UI logic
- API calls are organized through service modules
- Images use TMDB image sizes appropriate for cards and detail pages
- Lazy-loaded routes
- Route-based pages avoid loading unrelated views
- Load-more behavior prevents rendering too many results at once
- Vite provides fast local development and optimized production builds
npm installCreate a .env file in the project root and add the required keys:
VITE_TMDB_API_KEY=your_tmdb_api_key_here
VITE_SUPABASE_URL=your_supabase_project_url_here
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key_here
GNEWS_API_KEY=your_gnews_api_key_here
VITE_PUBLIC_SITE_URL=your_website_url
VITE_SHARETHIS_PROPERTY_ID=your_sharethis_property_idnpm run devOpen the local URL shown in the terminal.
npm run build
npm run previewRecommended Netlify settings:
- Build command:
npm run build - Publish directory:
dist
Add the required environment variables in Netlify project settings:
VITE_TMDB_API_KEY=your_tmdb_api_key_here
VITE_SUPABASE_URL=your_supabase_project_url_here
VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_anon_key_here
GNEWS_API_KEY=your_gnews_api_key_here
VITE_PUBLIC_SITE_URL=your_website_url
VITE_SHARETHIS_PROPERTY_ID=your_sharethis_property_id- Core UI is functional
- Dynamic routing is working
- Movie and TV detail pages are implemented
- Trailer system is integrated
- Recommendations are implemented
- Search and discovery flows are active
- Supabase Google authentication is implemented
- Logged-in user features are being connected or refined
- Continue Watching, Watchlist, and Comments are key personalized features
Planned improvements for MovieFlix:
- show streaming provider availability
- Improve global search experience
Allen Uy
GitHub: @JustWorkIT
Movie metadata, posters, backdrops, cast information, recommendations, and trailer data are provided by the TMDB API.
This project is for educational and portfolio purposes.