NOTFLEX

A pixel-perfect, Netflix-inspired streaming frontend built with React + Vite + Tailwind CSS, powered by the TMDB API. Browse movies, TV shows, and anime — with a built-in video player, multi-source switcher, subtitle support, search, watchlist, and continue-watching tracking.

Features

• Hero billboard — random featured title with backdrop, rating, and action buttons
• Horizontal carousels — drag-to-scroll rows with arrow navigation
• 5+ content rows — Trending, Popular Movies, Popular TV, Action, Top Rated
• Anime tab — dedicated page with adult-content filtering
• Video player modal — embeds via multiple providers with source switcher
• Multi-source switcher — VidSrc.to · AutoEmbed · MultiEmbed · Vidking · VidSrc.me · EmbedSu · 2Embed
• Subtitle support — built-in CC for supported sources, EN/FR/AR param injection for VidSrc.me & EmbedSu
• TV season & episode selector
• Search overlay — All / Movies / TV / Anime tabs with debounced input
• Watchlist — saved to localStorage
• Continue Watching — progress tracked per title in localStorage
• Loading screen — animated logo with progress bar
• Mobile bottom tab bar — native app-style navigation on small screens
• Responsive — 6 cards/row on desktop, 2–3 on mobile

Tech Stack

Getting Started

Prerequisites

• Node.js v16 or higher — download at nodejs.org
• A free TMDB API key — get one at themoviedb.org/settings/api

1. Clone the repo

git clone https://github.com/SohaibArbiBakcha/Notflex.git
cd Notflex

2. Install dependencies

npm install

3. Add your TMDB API key

Open src/utils/api.js and replace the key on line 1:

const TMDB_KEY = 'YOUR_TMDB_API_KEY_HERE';

Tip: On TMDB go to Settings → API → add your domain to the allowed list so the key only works on your site.

4. Run the dev server

npm run dev

Open http://localhost:5173 in your browser.

5. Build for production

npm run build

Output goes to the dist/ folder — ready to deploy to any static host.

6. Preview the production build locally

npm run preview

Deploying

Vercel (recommended — free)

1. Push the repo to GitHub
2. Go to vercel.com → New Project → Import your repo
3. Vercel auto-detects Vite — click Deploy

Netlify

1. Push the repo to GitHub
2. Go to netlify.com → Add new site → Import from Git
3. Build command: npm run build
4. Publish directory: dist

GitHub Pages

npm install -D gh-pages

Add to package.json scripts:

"deploy": "npm run build && gh-pages -d dist"

Then run:

npm run deploy

Project Structure

Notflex/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── Card.jsx              # Movie/TV/Anime card with hover overlay
│   │   ├── ContinueWatching.jsx  # Continue watching row
│   │   ├── Hero.jsx              # Billboard hero section
│   │   ├── LoadingScreen.jsx     # Animated boot screen
│   │   ├── Navbar.jsx            # Top bar + mobile bottom tab bar
│   │   ├── PlayerModal.jsx       # Video player + source/subtitle switcher
│   │   ├── Row.jsx               # Horizontal scrollable row with arrows
│   │   ├── SearchOverlay.jsx     # Full-screen search with tabs
│   │   ├── TVControls.jsx        # Season & episode selector
│   │   └── Toast.jsx             # Notification toast
│   ├── hooks/
│   │   └── useToast.js
│   ├── utils/
│   │   └── api.js                # TMDB fetcher, embed URL builder, sources
│   ├── App.jsx                   # Page router + all data fetching
│   ├── index.css                 # Tailwind base + custom utilities
│   └── main.jsx                  # React entry point
├── index.html
├── tailwind.config.js
├── vite.config.js
└── package.json

Color Palette

Video Sources

Contributing

Pull requests are welcome. For major changes please open an issue first.

1. Fork the repo
2. Create your branch: git checkout -b feature/my-feature
3. Commit your changes: git commit -m 'add my feature'
4. Push: git push origin feature/my-feature
5. Open a Pull Request

License

MIT — free to use, modify, and distribute.

Disclaimer

NOTFLEX does not host any video content. All media information is fetched from TMDB. Video playback is provided by third-party embed services. This project is for educational purposes only.