A personal movie and TV series tracking application built with React and Vite. Track your watched content, rate what you've seen, and discover new movies and series with a Netflix-inspired interface.
- Modern Search Popup: Click-to-activate search with full-screen popup overlay
- TMDB Integration: Real movie/series data from The Movie Database API
- Glass Morphism UI: Beautiful blurred popup with backdrop effects
- Smart Debouncing: 500ms delay for optimal search performance
- Background Lock: Prevents scrolling while popup is active
- Sticky Header: Search controls remain accessible while browsing results
- Three-Tier Rating: Love This! (Award icon), I Like It (Thumbs Up), Not For Me (Thumbs Down)
- Outline Icons: Consistent outline styling using Lucide React icons
- Quick Rating: Rate directly from search results or your collection
- Visual Indicators: Rating badges on all movie/series cards
- Personal Library: All your rated content stored locally
- Advanced Filtering: Filter by type (Movies/Series), rating (Love/Like/Dislike), or view all
- Multiple Sort Options:
- Recently Watched (default)
- By Title (A-Z)
- By Year (Latest first)
- By Rating (Best TMDB ratings first)
- Smart Reset: Separate reset buttons for search and collection filters
- Netflix-Style Design: Dark theme with red accents and premium styling
- Modern Header Layout: Left-aligned logo, search field, and right-aligned stats
- Glass Morphism Effects: Blurred backgrounds with subtle transparency
- Responsive Layout: Seamless experience across mobile, tablet, and desktop
- Custom Dropdowns: Styled dropdowns with custom arrows and proper spacing
- Smooth Animations: Hover effects and transitions throughout
- High-Resolution Images: w1280 quality images in detail modals
- Visual Hierarchy: Clean spacing and subtle border separations
- LocalStorage: All ratings and data persist between sessions
- Automatic Sync: Changes saved immediately
- Data Recovery: Reliable data loading with fallback handling
Integrated stats in the top navigation showing:
- Total: Complete count of watched items
- Movies: Movie count with white styling
- Series: TV series count with white styling
- Love: Purple-colored count of loved content
- Like: Green-colored count of liked content
- Dislike: Red-colored count of disliked content
- Frontend: React 19.1.1
- Build Tool: Vite 7.1.2
- Styling: Tailwind CSS 4.1.12
- Icons: Lucide React 0.542.0
- Code Quality: ESLint with React plugins
- Node.js (v14 or higher)
- npm or yarn
-
Clone the repository
git clone https://github.com/baliomega/nextflix.git cd nextflix -
Install dependencies
npm install
-
Set up TMDB API (Required for real data)
- Get an API key from The Movie Database
- Copy
.env.exampleto.env:cp .env.example .env
- Add your API key to
.env:VITE_TMDB_API_KEY=your_actual_api_key_here
-
Start development server
npm run dev
-
Open in browser Navigate to
http://localhost:5173/nextflix/
npm run dev- Start development servernpm run build- Build for productionnpm run lint- Run ESLintnpm run preview- Preview production build
- Click the search field in the header to open the search popup
- Type in the popup search field to find movies or TV series
- Browse results in the beautiful glass morphism popup
- Click on any result to view detailed information
- Rate the content using the three rating options
- Your rated content automatically appears in "Your Collection"
- Filter: Use the dropdown filters to narrow down your collection
- Sort: Choose how you want your collection organized
- Reset: Use the reset button to clear all collection filters
- 🏆 Love This! - Your absolute favorites
- 👍 I Like It - Content you enjoyed
- 👎 Not For Me - Content that wasn't your taste
The app requires a TMDB API key to fetch real movie/TV data:
- Get API Key: Register at The Movie Database
- Configure: Add your key to the
.envfile:VITE_TMDB_API_KEY=your_actual_api_key_here - Restart: Restart the development server to apply changes
Note: Without a valid API key, the app will use fallback mock data.
- Data is stored in browser's localStorage under the key
nextflix-data - No external database required - everything runs client-side
- 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
NextFlix is fully responsive and optimized for:
- 📱 Mobile: Single column layout with touch-friendly interactions
- 📟 Tablet: Multi-column grid with balanced spacing
- 🖥️ Desktop: Full grid layout with hover effects
- 🖥️ Large Desktop: Edge-to-edge design with proper content centering
- Header: Modern three-section layout (Logo | Search | Stats)
- Spacing: Generous padding and margins throughout
- Borders: Subtle 20% opacity white separators
- Glass Morphism: Blurred backgrounds with backdrop filters
- Primary: Netflix Red (
#dc2626) - Background: Pure Black (
#000000) - Glass Elements: Translucent black with blur effects
- Stats Colors: Purple (Love), Green (Like), Red (Dislike)
- Text: White and Gray variants with proper contrast
- Logo: Large, bold Netflix-style branding
- Headers: Clean hierarchy with proper spacing
- Interactive: Consistent sizing and spacing
- Stats: Compact, readable number display
This project is licensed under the MIT License - see the LICENSE file for details.
- Design Inspiration: Netflix UI/UX
- Icons: Lucide React
- Movie Data: The Movie Database (TMDB)
- Built with: Vite and React
Made with ❤️ and lots of ☕
For questions or support, please open an issue on GitHub.