Skip to main content

​
What is ReactFlix?

ReactFlix is a full-featured movie streaming platform that allows users to browse, rent, and purchase movies. Built with React 19 and modern web technologies, it provides a Netflix-like experience with an intuitive interface for discovering and managing your movie collection.

​
Key Features

Movie Catalog

Browse through a curated collection of movies with detailed information including cast, ratings, duration, and trailers.

Search & Filter

Powerful search functionality to find movies by title, director, or cast member, with category-based filtering.

Rent or Buy

Flexible options to either rent movies for a limited time or purchase them permanently.

Personal Library

Manage your rented and purchased movies with dedicated management pages and rental extensions.

​
Technology Stack

ReactFlix is built with modern web technologies:
  • React 19.2.4 - Latest React with improved performance and concurrent features
  • React Router DOM 7.13.1 - Client-side routing for seamless navigation
  • React Scripts 5.0.1 - Zero-configuration build tooling
  • LocalStorage API - Persistent data storage for rentals and purchases

​
Architecture Overview

ReactFlix follows a component-based architecture with clear separation of concerns: 
src/
├── components/          # Reusable UI components
│   ├── Header.jsx       # Navigation and branding
│   ├── Footer.jsx       # Footer with links
│   ├── PeliculaCard.jsx # Movie card component
│   ├── PeliculaGrid.jsx # Grid layout for movies
│   ├── SearchBar.jsx    # Search input component
│   ├── CategoryFilter.jsx # Genre filter dropdown
│   ├── TrailerModal.jsx # Video trailer modal
│   ├── AlquilerButton.jsx # Rental action button
│   └── CompraButton.jsx # Purchase action button
├── pages/              # Route-level page components
│   ├── PrincipalPage.jsx # Home page with featured movies
│   ├── PeliculasPage.jsx # Full catalog with filters
│   ├── PeliculaDetailPage.jsx # Movie details page
│   ├── AlquileresPage.jsx # Rental management
│   └── ComprasPage.jsx # Purchase management
├── hooks/              # Custom React hooks
│   └── usePeliculaSearch.js # Search and filter logic
├── data/               # Mock data and constants
│   └── mockPeliculas.js # Movie database
└── styles/             # CSS stylesheets
    ├── App.css
    ├── components.css
    └── pages.css

​
Core Functionality

​
Movie Browsing

The application provides multiple ways to discover movies:
  • Featured Section - Showcases top-rated movies on the homepage
  • Full Catalog - Browse all available movies with grid layout
  • Search - Find movies by title, director, or actor name
  • Category Filters - Filter by genre (Science Fiction, Action, Drama, Crime)

​
Movie Details

Each movie includes comprehensive information: 
{
  id: 1,
  title: "Inception",
  director: "Christopher Nolan",
  year: 2010,
  genre: "Ciencia Ficción",
  duration: 148,
  synopsis: "A thief who steals corporate secrets...",
  image: "poster_url",
  trailerUrl: "youtube_embed_url",
  price: 12.99,
  alquilerPrecio: 3.99,
  rating: 8.8,
  language: "Inglés",
  cast: ["Leonardo DiCaprio", "Joseph Gordon-Levitt", "Elliot Page"]
}

​
Rental & Purchase System

  • Rentals - Temporary access with option to extend by 48 hours
  • Purchases - Permanent ownership with unlimited access
  • LocalStorage - Persists user’s library across sessions

​
Use Cases

ReactFlix is perfect for learning React concepts including:
  • Component composition and props
  • React Hooks (useState, useEffect, custom hooks)
  • Client-side routing
  • State management with LocalStorage
  • Responsive design patterns

​
Educational

Ideal for developers learning:
  • Modern React development patterns
  • Component architecture
  • State management techniques
  • Routing and navigation
  • API integration patterns (ready for backend connection)

​
Portfolio Projects

Showcase your skills by:
  • Extending the feature set
  • Integrating with real movie APIs (TMDB, OMDB)
  • Adding authentication and user profiles
  • Implementing payment processing
  • Adding reviews and ratings

​
What’s Next?

Quick Start

Get ReactFlix running locally in under 5 minutes

Installation

Detailed installation guide and prerequisites

Build docs developers (and LLMs) love

Get started for freeTalk to us