{"componentChunkName":"component---src-templates-github-repo-temp-js","path":"/github/notflex","result":{"data":{"repo":{"name":"Notflex","description":"","url":"https://github.com/SohaibArbiBakcha/Notflex","homepage":"","language":"JavaScript","stars":0,"forks":0,"topics":[],"updatedAt":"2026-04-30T19:20:13Z","readmeHtml":"<h1 id=\"notflex\">NOTFLEX</h1>\n<p>A pixel-perfect, Netflix-inspired streaming frontend built with <strong>React + Vite + Tailwind CSS</strong>, powered by the <strong>TMDB API</strong>. Browse movies, TV shows, and anime — with a built-in video player, multi-source switcher, subtitle support, search, watchlist, and continue-watching tracking.</p>\n<hr>\n<h2 id=\"features\">Features</h2>\n<ul>\n<li><strong>Hero billboard</strong> — random featured title with backdrop, rating, and action buttons</li>\n<li><strong>Horizontal carousels</strong> — drag-to-scroll rows with arrow navigation</li>\n<li><strong>5+ content rows</strong> — Trending, Popular Movies, Popular TV, Action, Top Rated</li>\n<li><strong>Anime tab</strong> — dedicated page with adult-content filtering</li>\n<li><strong>Video player modal</strong> — embeds via multiple providers with source switcher</li>\n<li><strong>Multi-source switcher</strong> — VidSrc.to · AutoEmbed · MultiEmbed · Vidking · VidSrc.me · EmbedSu · 2Embed</li>\n<li><strong>Subtitle support</strong> — built-in CC for supported sources, EN/FR/AR param injection for VidSrc.me &amp; EmbedSu</li>\n<li><strong>TV season &amp; episode selector</strong></li>\n<li><strong>Search overlay</strong> — All / Movies / TV / Anime tabs with debounced input</li>\n<li><strong>Watchlist</strong> — saved to localStorage</li>\n<li><strong>Continue Watching</strong> — progress tracked per title in localStorage</li>\n<li><strong>Loading screen</strong> — animated logo with progress bar</li>\n<li><strong>Mobile bottom tab bar</strong> — native app-style navigation on small screens</li>\n<li><strong>Responsive</strong> — 6 cards/row on desktop, 2–3 on mobile</li>\n</ul>\n<hr>\n<h2 id=\"tech-stack\">Tech Stack</h2>\n<table>\n<thead>\n<tr>\n<th>Tool</th>\n<th>Version</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>React</td>\n<td>18.2</td>\n</tr>\n<tr>\n<td>Vite</td>\n<td>4.4</td>\n</tr>\n<tr>\n<td>Tailwind CSS</td>\n<td>3.4</td>\n</tr>\n<tr>\n<td>react-icons (Lucide)</td>\n<td>5.6</td>\n</tr>\n<tr>\n<td>TMDB API</td>\n<td>v3</td>\n</tr>\n</tbody></table>\n<hr>\n<h2 id=\"getting-started\">Getting Started</h2>\n<h3 id=\"prerequisites\">Prerequisites</h3>\n<ul>\n<li><strong>Node.js</strong> v16 or higher — download at <a href=\"https://nodejs.org\">nodejs.org</a></li>\n<li>A free <strong>TMDB API key</strong> — get one at <a href=\"https://www.themoviedb.org/settings/api\">themoviedb.org/settings/api</a></li>\n</ul>\n<hr>\n<h3 id=\"1-clone-the-repo\">1. Clone the repo</h3>\n<pre><code class=\"language-bash\">git clone https://github.com/SohaibArbiBakcha/Notflex.git\ncd Notflex\n</code></pre>\n<hr>\n<h3 id=\"2-install-dependencies\">2. Install dependencies</h3>\n<pre><code class=\"language-bash\">npm install\n</code></pre>\n<hr>\n<h3 id=\"3-add-your-tmdb-api-key\">3. Add your TMDB API key</h3>\n<p>Open <code>src/utils/api.js</code> and replace the key on line 1:</p>\n<pre><code class=\"language-js\">const TMDB_KEY = &#39;YOUR_TMDB_API_KEY_HERE&#39;;\n</code></pre>\n<blockquote>\n<p><strong>Tip:</strong> On TMDB go to Settings → API → add your domain to the allowed list so the key only works on your site.</p>\n</blockquote>\n<hr>\n<h3 id=\"4-run-the-dev-server\">4. Run the dev server</h3>\n<pre><code class=\"language-bash\">npm run dev\n</code></pre>\n<p>Open <a href=\"http://localhost:5173\">http://localhost:5173</a> in your browser.</p>\n<hr>\n<h3 id=\"5-build-for-production\">5. Build for production</h3>\n<pre><code class=\"language-bash\">npm run build\n</code></pre>\n<p>Output goes to the <code>dist/</code> folder — ready to deploy to any static host.</p>\n<hr>\n<h3 id=\"6-preview-the-production-build-locally\">6. Preview the production build locally</h3>\n<pre><code class=\"language-bash\">npm run preview\n</code></pre>\n<hr>\n<h2 id=\"deploying\">Deploying</h2>\n<h3 id=\"vercel-recommended--free\">Vercel (recommended — free)</h3>\n<ol>\n<li>Push the repo to GitHub</li>\n<li>Go to <a href=\"https://vercel.com\">vercel.com</a> → New Project → Import your repo</li>\n<li>Vercel auto-detects Vite — click <strong>Deploy</strong></li>\n</ol>\n<h3 id=\"netlify\">Netlify</h3>\n<ol>\n<li>Push the repo to GitHub</li>\n<li>Go to <a href=\"https://netlify.com\">netlify.com</a> → Add new site → Import from Git</li>\n<li>Build command: <code>npm run build</code></li>\n<li>Publish directory: <code>dist</code></li>\n</ol>\n<h3 id=\"github-pages\">GitHub Pages</h3>\n<pre><code class=\"language-bash\">npm install -D gh-pages\n</code></pre>\n<p>Add to <code>package.json</code> scripts:</p>\n<pre><code class=\"language-json\">&quot;deploy&quot;: &quot;npm run build &amp;&amp; gh-pages -d dist&quot;\n</code></pre>\n<p>Then run:</p>\n<pre><code class=\"language-bash\">npm run deploy\n</code></pre>\n<hr>\n<h2 id=\"project-structure\">Project Structure</h2>\n<pre><code>Notflex/\n├── public/\n│   └── favicon.ico\n├── src/\n│   ├── components/\n│   │   ├── Card.jsx              # Movie/TV/Anime card with hover overlay\n│   │   ├── ContinueWatching.jsx  # Continue watching row\n│   │   ├── Hero.jsx              # Billboard hero section\n│   │   ├── LoadingScreen.jsx     # Animated boot screen\n│   │   ├── Navbar.jsx            # Top bar + mobile bottom tab bar\n│   │   ├── PlayerModal.jsx       # Video player + source/subtitle switcher\n│   │   ├── Row.jsx               # Horizontal scrollable row with arrows\n│   │   ├── SearchOverlay.jsx     # Full-screen search with tabs\n│   │   ├── TVControls.jsx        # Season &amp; episode selector\n│   │   └── Toast.jsx             # Notification toast\n│   ├── hooks/\n│   │   └── useToast.js\n│   ├── utils/\n│   │   └── api.js                # TMDB fetcher, embed URL builder, sources\n│   ├── App.jsx                   # Page router + all data fetching\n│   ├── index.css                 # Tailwind base + custom utilities\n│   └── main.jsx                  # React entry point\n├── index.html\n├── tailwind.config.js\n├── vite.config.js\n└── package.json\n</code></pre>\n<hr>\n<h2 id=\"color-palette\">Color Palette</h2>\n<table>\n<thead>\n<tr>\n<th>Token</th>\n<th>Value</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>Primary</td>\n<td><code>#1a6fff</code></td>\n</tr>\n<tr>\n<td>Background</td>\n<td><code>#141414</code></td>\n</tr>\n<tr>\n<td>Deep Black</td>\n<td><code>#000000</code></td>\n</tr>\n<tr>\n<td>Text</td>\n<td><code>#FFFFFF</code></td>\n</tr>\n<tr>\n<td>Muted Text</td>\n<td><code>#B3B3B3</code></td>\n</tr>\n<tr>\n<td>Accent</td>\n<td><code>#E50914</code></td>\n</tr>\n<tr>\n<td>Anime</td>\n<td><code>#f97316</code></td>\n</tr>\n</tbody></table>\n<hr>\n<h2 id=\"video-sources\">Video Sources</h2>\n<table>\n<thead>\n<tr>\n<th>Source</th>\n<th>Movies</th>\n<th>TV Shows</th>\n<th>Subtitles</th>\n</tr>\n</thead>\n<tbody><tr>\n<td>VidSrc.to</td>\n<td>✓</td>\n<td>✓</td>\n<td>Built-in CC</td>\n</tr>\n<tr>\n<td>AutoEmbed</td>\n<td>✓</td>\n<td>✓</td>\n<td>Built-in CC</td>\n</tr>\n<tr>\n<td>MultiEmbed</td>\n<td>✓</td>\n<td>✓</td>\n<td>Built-in CC</td>\n</tr>\n<tr>\n<td>Vidking</td>\n<td>✓</td>\n<td>✓</td>\n<td>Built-in CC</td>\n</tr>\n<tr>\n<td>VidSrc.me</td>\n<td>✓</td>\n<td>✓</td>\n<td>EN / FR / AR</td>\n</tr>\n<tr>\n<td>EmbedSu</td>\n<td>✓</td>\n<td>✓</td>\n<td>EN / FR / AR</td>\n</tr>\n<tr>\n<td>2Embed</td>\n<td>✓</td>\n<td>✓</td>\n<td>—</td>\n</tr>\n</tbody></table>\n<hr>\n<h2 id=\"contributing\">Contributing</h2>\n<p>Pull requests are welcome. For major changes please open an issue first.</p>\n<ol>\n<li>Fork the repo</li>\n<li>Create your branch: <code>git checkout -b feature/my-feature</code></li>\n<li>Commit your changes: <code>git commit -m &#39;add my feature&#39;</code></li>\n<li>Push: <code>git push origin feature/my-feature</code></li>\n<li>Open a Pull Request</li>\n</ol>\n<hr>\n<h2 id=\"license\">License</h2>\n<p>MIT — free to use, modify, and distribute.</p>\n<hr>\n<h2 id=\"disclaimer\">Disclaimer</h2>\n<p>NOTFLEX does not host any video content. All media information is fetched from <a href=\"https://www.themoviedb.org\">TMDB</a>. Video playback is provided by third-party embed services. This project is for educational purposes only.</p>\n"}},"pageContext":{"slug":"notflex"}},"staticQueryHashes":["793344833"]}