Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/LuisED18/proyecto-pagina-peliculas/llms.txt

Use this file to discover all available pages before exploring further.

Pelisgo is a dark-themed movie and TV series browser built entirely with plain HTML, CSS, and vanilla JavaScript — no frameworks, no build tools, no runtime dependencies. It solves a simple problem: giving developers, students, and movie enthusiasts a minimal, readable codebase they can clone, run instantly in any browser, and extend freely. Whether you’re learning how to consume a REST API with native fetch(), building out a personal watchlist UI, or just want a fast way to browse what’s popular on TMDB right now, Pelisgo gives you a clean, functional starting point.

​
Key Features

Popular Movies

Browse the current TMDB popular movies list, rendered as a responsive poster-card grid with title and release year.

TV Series

Switch to the TV series catalogue with a single navigation click. The same card UI adapts automatically to series metadata.

Real-Time Search

Type in the search bar and results update live after three characters — no button press needed, no page reload.

Genre Navigation

A dropdown nav menu exposes genre categories (Acción, Terror, Comedia, and more) ready to be wired to filtered TMDB endpoints.

​
Architecture Overview

Pelisgo intentionally keeps its footprint as small as possible. The entire project is three HTML pages, one shared JavaScript module, and one stylesheet:
FileRole
index.htmlMovies page — navbar, card grid scaffold, and a <script> tag loading main.js
series.htmlTV series page — structurally identical to index.html; content differs via URL-based detection in main.js
generos.htmlGenres page — currently a placeholder file pending implementation of filtered TMDB genre endpoints
js/main.jsSingle shared module that handles all TMDB API calls, card rendering, and search events for both pages
css/styles.cssGlobal stylesheet — dark theme reset, sticky header, card grid, hover effects, and responsive breakpoints
There is no routing library, no component framework, and no module bundler. Both HTML pages load js/main.js via a plain <script> tag with the defer attribute: 
<!-- Both index.html and series.html end with this identical line -->
<script src="js/main.js" defer></script>
When the script runs, it inspects the current URL to decide what content to fetch — a single file drives both pages.

​
How Page Detection Works

The key to Pelisgo’s shared-module design is a two-line URL check at the top of js/main.js. Immediately after declaring the API constants, the script reads window.location.pathname and checks whether the string 'series' appears in it: 
// DETECCIÓN: ¿Estamos en series.html o index.html?
// Esto busca la palabra "series" en la URL de tu navegador
const esPaginaSeries = window.location.pathname.includes('series');
const tipo = esPaginaSeries ? 'tv' : 'movie';
The resolved tipo variable ('tv' or 'movie') is then interpolated directly into every TMDB endpoint string. When a visitor is on index.html, tipo is 'movie' and the popular endpoint becomes /movie/popular. When they navigate to series.html, tipo becomes 'tv' and the same code hits /tv/popular instead: 
// Populares (Pelis o Series)
endpoint = `${BASE_URL}/${tipo}/popular?api_key=${API_KEY}&language=es-ES&page=1`;
The same switch applies to the search endpoint and to which metadata fields are read — item.title vs item.name for display titles, and item.release_date vs item.first_air_date for years: 
const titulo = esPaginaSeries ? item.name : item.title;
const fechaOriginal = esPaginaSeries ? item.first_air_date : item.release_date;
This pattern means every feature — popular listing, live search, card rendering — is automatically bifurcated across both pages with zero duplicated logic.

​
Tech Stack

LayerChoiceNotes
MarkupPlain HTML5Three .html files; no templating engine
StylingPlain CSS3One styles.css file; CSS Flexbox for layout and grid
LogicVanilla JavaScript (ES2017+)async/await, native fetch(), DOM manipulation
DataTMDB REST API v3https://api.themoviedb.org/3 — JSON responses, no SDK
BuildNoneOpen index.html directly in a browser
DependenciesNoneZero node_modules, zero package.json
All network requests use the browser-native fetch() API inside an async/await function, keeping the code concise and easy to follow: 
const respuesta = await fetch(endpoint);
const datos = await respuesta.json();

if (datos.results) {
    mostrarCards(datos.results);
}
A valid TMDB API key (v3 auth) is required to run Pelisgo. The app will silently return no results if the key is missing or invalid. Sign up for a free key at themoviedb.org — see the Quickstart for step-by-step instructions.

Build docs developers (and LLMs) love

Get started for freeTalk to us