Repository: felipeAguiarCode/netflix-clone-2.0
Branch: main
Commit: c53339782bcb
Files: 10
Total size: 6.8 KB
Directory structure:
gitextract_vzoler65/
├── .gitignore
├── package.json
├── public/
│ ├── index.html
│ ├── scripts/
│ │ ├── api.js
│ │ ├── home.js
│ │ └── scroll.js
│ └── styles/
│ ├── reset.css
│ └── style.css
└── src/
├── app.js
└── server.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules/
================================================
FILE: package.json
================================================
{
"name": "netflix-clone-3.0",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.2"
}
}
================================================
FILE: public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/style.css">
<title>NETFLIX: HOME</title>
</head>
<body>
<!--navbar-->
<nav class="navbar">
<img src="images/logo.png" alt="logo" class="logo">
<div class="join-box">
<p class="join-msg">Séries & Filmes ilimitados</p>
<button class="btn join-btn">Assinar Agora</button>
<button class="btn">Entrar</button>
</div>
</nav>
<!-- main section -->
<header class="main">
<h1 class="heading">Filmes</h1>
<p class="info">Filmes para assistir com toda a familia</p>
<!-- movie list -->
<!-- <div class="movie-list">
</div> -->
</header>
<script src="scripts/api.js"></script>
<script src="scripts/home.js"></script>
<script src="scripts/scroll.js"></script>
</body>
</html>
================================================
FILE: public/scripts/api.js
================================================
const api_key = "d19a1946970f98fae002af7545322879"
const img_url = "https://image.tmdb.org/t/p/w500"
const genres_list_http = "https://api.themoviedb.org/3/genre/movie/list?"
const movie_genres_http = "https://api.themoviedb.org/3/discover/movie?"
================================================
FILE: public/scripts/home.js
================================================
const main = document.querySelector(".main")
fetchGenresList()
function fetchGenresList() {
const url = genres_list_http + new URLSearchParams({
api_key: api_key
})
fetch(url)
.then(res => res.json())
.then(data => {
data.genres.forEach(item => {
fetchMoviesListByGenres(item.id, item.name)
});
})
.catch(err => console.log(err))
}
const fetchMoviesListByGenres = (id, genres) => {
const url = movie_genres_http + new URLSearchParams({
api_key: api_key,
with_genres: id,
page: Math.floor(Math.random() * 3) + 1
})
fetch(url)
.then(res => res.json())
.then(data => {
const category = genres.replace("_", " ")
makeCategoryElement(category, data.results)
})
.catch(err => console.log(err))
}
const makeCategoryElement = (category, data) => {
const categoryHTML = `
<div class="movie-list">
<button class="pre-btn">
<img src="images/prev.png" alt="previous button">
</button>
<h1 class="movie-category">${category.replace("_", " ")}</h1>
<div class="movie-container" id="${category}">
</div>
<button class="next-btn">
<img src="images/next.png" alt="next button">
</button>
</div>
`
main.innerHTML += categoryHTML
makeCards(category, data)
}
const makeCards = (category, data) => {
const movieContainer = document.getElementById(category.replace(" ", "_"));
data.forEach((item, index) => {
if (!item.backdrop_path) {
item.backdrop_path = item.poster_path
if (!item.backdrop_path) {
return
}
}
const movieHTML = `
<div class="movie">
<img src="${img_url}${item.backdrop_path}" alt="poster">
<p class="movie-title">${item.title}</p>
</div>
`
movieContainer.innerHTML += movieHTML
if (index == data.length - 1) {
setTimeout(() => {
setupScrooling()
}, 100)
}
})
}
================================================
FILE: public/scripts/scroll.js
================================================
const setupScrooling= () =>{
const container = [...document.querySelectorAll(".movie-container")]
const nextBtn = [...document.querySelectorAll(".next-btn")]
const prevBtn = [...document.querySelectorAll(".pre-btn")]
container.forEach((item, i)=>{
let containerDimensions = item.getBoundingClientRect()
let containerWidth = containerDimensions.width
nextBtn[i].addEventListener('click', ()=>{
item.scrollLeft += containerWidth
})
prevBtn[i].addEventListener('click', ()=>{
item.scrollLeft -= containerWidth
})
})
}
================================================
FILE: public/styles/reset.css
================================================
*{
margin:0;
padding: 0;
border: 0;
text-decoration: none;
box-sizing: border-box;
}
================================================
FILE: public/styles/style.css
================================================
body{
width: 100%;
position: relative;
background: #181818;
font-family: 'roboto', sans-serif;
}
.navbar{
width: 100%;
height: 60px;
position: fixed;
top:0;
z-index: 9;
background: #000;
padding: 0 2.5vw;
display: flex;
align-items: center;
}
.join-box{
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
height: auto;
margin-left: auto;
}
.join-msg{
color:#fff;
text-transform: uppercase;
}
.logo{
height: 80px;
}
.btn{
border: 1px solid #fff;
border-radius: 2px;
background: none;
color:#fff;
height: 35px;
padding: 0 10px;
margin-left: 10px;
text-transform: uppercase;
cursor: pointer;
}
.join-btn{
background: #dd0e15;
border-color: #dd0e15;
}
.main{
position: relative;
margin-top: 60px;
width: 100%;
padding:20px 2.5vw;
color:#fff;
}
.heading{
text-transform: capitalize;
font-weight: 900;
font-size: 50px;
}
.info{
width: 50%;
font-size: 20px;
margin-top: 10px;
}
.movie-list{
width: 100%;
height: 250px;
margin-top: 40px;
position: relative;
}
.movie-category{
font-size: 20px;
font-weight: 500;
margin-bottom: 20px;
text-transform: capitalize;
}
.movie-container{
width: 100%;
height: 250px;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
display: flex;
}
.movie-container::-webkit-scrollbar{
display: none;
}
.movie-category::-webkit-scrollbar{
display: none;
}
.movie{
flex:0 0 auto;
width: 24%;
height: 200px;
text-align: center;
margin-right: 10px;
margin-top: 30px;
cursor: pointer;
position: relative;
}
.movie img{
width: 100%;
height: 170px;
object-fit: cover;
}
.movie p{
text-transform: capitalize;
height: 20px;
overflow: hidden;
}
.pre-btn,
.next-btn{
position: absolute;
height: 200px;
top:50%;
transform: translateY(-50%);
width: 2.5vw;
background: #181818;
border:none;
outline: none;
opacity: 0.5;
}
.pre-btn:hover,
.next-btn:hover{
opacity: 1;
}
.pre-btn{
left: -2.5vw;
}
.next-btn{
right: -2.5vw;
}
.pre-btn img,
.next-btn img{
width: 20px;
height: 20px;
object-fit: contain;
}
================================================
FILE: src/app.js
================================================
const express = require("express");
const path = require("path");
function createApp() {
const app = express()
const publicDirectoryPath = path.join(__dirname, "public")
app.use(express.static(publicDirectoryPath))
return app;
}
function startServer() {
const app = createApp();
app.get("/", (req, res) => {
const indexPath = path.join(__dirname, "public", "index.html")
res.sendFile(indexPath)
})
return app
}
module.exports = startServer()
================================================
FILE: src/server.js
================================================
const app = require("./app");
const port = 3333;
app.listen(port, () => {
console.log(`Server start up on port ${port}!`);
});
gitextract_vzoler65/
├── .gitignore
├── package.json
├── public/
│ ├── index.html
│ ├── scripts/
│ │ ├── api.js
│ │ ├── home.js
│ │ └── scroll.js
│ └── styles/
│ ├── reset.css
│ └── style.css
└── src/
├── app.js
└── server.js
SYMBOL INDEX (3 symbols across 2 files)
FILE: public/scripts/home.js
function fetchGenresList (line 5) | function fetchGenresList() {
FILE: src/app.js
function createApp (line 4) | function createApp() {
function startServer (line 13) | function startServer() {
Condensed preview — 10 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (8K chars).
[
{
"path": ".gitignore",
"chars": 13,
"preview": "node_modules/"
},
{
"path": "package.json",
"chars": 281,
"preview": "{\n \"name\": \"netflix-clone-3.0\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"index.js\",\n \"scripts\": {\n \"te"
},
{
"path": "public/index.html",
"chars": 1027,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\""
},
{
"path": "public/scripts/api.js",
"chars": 248,
"preview": "const api_key = \"d19a1946970f98fae002af7545322879\"\nconst img_url = \"https://image.tmdb.org/t/p/w500\"\nconst genres_list_h"
},
{
"path": "public/scripts/home.js",
"chars": 1925,
"preview": "const main = document.querySelector(\".main\")\n\nfetchGenresList()\n\nfunction fetchGenresList() {\n const url = genres_list_"
},
{
"path": "public/scripts/scroll.js",
"chars": 566,
"preview": "const setupScrooling= () =>{\n const container = [...document.querySelectorAll(\".movie-container\")]\n\n const nextBtn = ["
},
{
"path": "public/styles/reset.css",
"chars": 94,
"preview": "*{\n margin:0;\n padding: 0;\n border: 0;\n text-decoration: none;\n box-sizing: border-box;\n}"
},
{
"path": "public/styles/style.css",
"chars": 2177,
"preview": "body{\n width: 100%;\n position: relative;\n background: #181818;\n font-family: 'roboto', sans-serif;\n}\n\n.navbar{\n wid"
},
{
"path": "src/app.js",
"chars": 474,
"preview": "const express = require(\"express\");\nconst path = require(\"path\");\n\nfunction createApp() {\n const app = express()\n cons"
},
{
"path": "src/server.js",
"chars": 131,
"preview": "const app = require(\"./app\");\nconst port = 3333;\n\n\napp.listen(port, () => {\n console.log(`Server start up on port ${por"
}
]
About this extraction
This page contains the full source code of the felipeAguiarCode/netflix-clone-2.0 GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 10 files (6.8 KB), approximately 2.3k tokens, and a symbol index with 3 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.