MovieFlex

A modern movie discovery app built with React, featuring advanced filtering, pagination, and real-time trending analytics powered by The Movie Database (TMDB) API and Appwrite.

Overview

Movlix was born out of my desire to create a more intuitive movie discovery experience while exploring modern React patterns and real-time data management. What started as a simple movie search app evolved into a platform that tracks user behavior and surfaces trending content based on actual search patterns.

Purpose

I built Movlix to solve the common problem of endless scrolling through movie catalogs without meaningful filtering options. More importantly, I wanted to experiment with real-time analytics and see how user search behavior could create a dynamic trending system.

Key Features

• Smart Search with Debouncing: Real-time search with optimized API calls
• Advanced Filtering System: Filter by genre, release year, rating, and multiple sort options
• Intelligent Pagination: Smooth navigation through thousands of movies with smart scroll positioning
• Real-time Trending Analytics: Dynamic trending section based on actual user search patterns
• Detailed Movie Modals: Rich movie information with cast, budget, and production details

Technical Highlights

• Performance-optimized React: Implemented debounced search and memoized callbacks to minimize unnecessary re-renders
• Real-time Database Integration: Used Appwrite to track search analytics and generate trending content
• Responsive Design: Mobile-first approach with custom CSS grid layouts
• Error Handling & Loading States: Comprehensive error boundaries and skeleton loading components

Technical Implementation

Search & Debouncing System

One of the most important technical decisions I made was implementing proper search debouncing to prevent API spam while maintaining a responsive user experience.

// Custom debouncing implementation using react-use
import { useDebounce } from "react-use";

function App() {
  const [searchTerm, setSearchTerm] = useState("");
  const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");

  // Wait for user to stop typing for 500ms before making API call
  useDebounce(() => setDebouncedSearchTerm(searchTerm), 500, [searchTerm]);

  // Fetch movies when debounced term changes
  useEffect(() => {
    fetchMovies(debouncedSearchTerm, currentPage);
  }, [debouncedSearchTerm, currentPage, fetchMovies]);
}

This approach reduced API calls by approximately 80% during active typing while maintaining the feel of instant search results.

Advanced Filtering Architecture

I designed the filtering system to be both user-friendly and technically efficient, combining multiple filter types into a single API request:

// Dynamic API endpoint construction based on search vs. discovery
const fetchMovies = useCallback(async (query = "", page = 1) => {
  let endpoint;
  const params = new URLSearchParams({ page: page.toString() });

  if (query) {
    // Search mode - prioritize search relevance
    endpoint = `${API_BASE_URL}/search/movie`;
    params.append('query', query);
  } else {
    // Discovery mode - apply all filters
    endpoint = `${API_BASE_URL}/discover/movie`;
    params.append('sort_by', filters.sortBy);
    
    if (filters.genre) params.append('with_genres', filters.genre);
    if (filters.year) params.append('primary_release_year', filters.year);
    if (filters.minRating) params.append('vote_average.gte', filters.minRating);
  }

  const response = await fetch(`${endpoint}?${params}`, API_OPTIONS);
  // ... error handling and state updates
}, [filters]);

Real-time Trending Analytics

The trending system was particularly interesting to implement. I created a real-time analytics engine that tracks search patterns and surfaces the most popular content:

// Appwrite integration for search analytics
export const updateSearchCount = async (searchTerm, movie) => {
  try {
    // Check if search term already exists
    const result = await database.listDocuments(DATABASE_ID, COLLECTION_ID, [
      Query.equal("searchTerm", searchTerm),
    ]);

    if (result.documents.length > 0) {
      // Increment existing count
      const doc = result.documents[0];
      await database.updateDocument(DATABASE_ID, COLLECTION_ID, doc.$id, {
        count: doc.count + 1,
      });
    } else {
      // Create new tracking document
      await database.createDocument(DATABASE_ID, COLLECTION_ID, ID.unique(), {
        searchTerm,
        count: 1,
        movie_id: movie.id,
        poster_url: `https://image.tmdb.org/t/p/w500/${movie.poster_path}`,
      });
    }
  } catch (error) {
    console.error("Error updating search count:", error);
  }
};

Smart Pagination with UX Focus

const handlePageChange = (page) => {
  setCurrentPage(page);
  // Smart scroll positioning - scroll to movies section, not top of page
  const moviesSection = document.querySelector(".all-movies");
  if (moviesSection) {
    moviesSection.scrollIntoView({ behavior: "smooth", block: "start" });
  }
};

// Reset pagination when filters change
useEffect(() => {
  setCurrentPage(1);
}, [debouncedSearchTerm, filters]);

This ensures users don't lose their place when navigating between pages, and new filters automatically reset to page 1.

Code Examples

Component Architecture Pattern

I established a clean component architecture that separates concerns and promotes reusability:

// Filter component with controlled state management
function Filter({ filters, setFilters }) {
  const handleFilterChange = (key, value) => {
    setFilters(prev => ({
      ...prev,
      [key]: value
    }));
  };

  const clearFilters = () => {
    setFilters({
      genre: "",
      year: "",
      sortBy: "popularity.desc",
      minRating: ""
    });
  };

  return (
    <div className="filter-section">
      {/* Dynamic genre selector */}
      <select 
        value={filters.genre}
        onChange={(e) => handleFilterChange("genre", e.target.value)}
      >
        <option value="">All Genres</option>
        {genres.map(genre => (
          <option key={genre.id} value={genre.id}>
            {genre.name}
          </option>
        ))}
      </select>
    </div>
  );
}

Error Handling and Loading States

I implemented comprehensive error handling with user-friendly loading states:

// Skeleton loading component for better perceived performance
function MovieListSkeleton({ count = 8 }) {
  return (
    <div className="movie-grid">
      {Array.from({ length: count }).map((_, index) => (
        <div key={index} className="movie-card-skeleton">
          <div className="skeleton-poster-main" />
          <div className="skeleton-card-content">
            <div className="skeleton-card-title" />
            <div className="skeleton-card-meta">
              <div className="skeleton-card-rating" />
              <div className="skeleton-card-lang" />
              <div className="skeleton-card-year" />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Modal System with Accessibility

I created an accessible modal system with proper focus management and escape key handling:

useEffect(() => {
  const handleEscape = (event) => {
    if (event.key === "Escape") onClose();
  };

  if (isOpen) {
    document.addEventListener("keydown", handleEscape);
    // Prevent background scroll
    document.body.style.overflow = "hidden";
  }

  return () => {
    document.removeEventListener("keydown", handleEscape);
    document.body.style.overflow = "";
  };
}, [isOpen, onClose]);

Technical Learnings

New Concepts Mastered

• Real-time Database Integration: Working with Appwrite taught me about NoSQL document structures and real-time data synchronization
• Advanced React Patterns: Implemented proper useCallback and useMemo patterns for performance optimization
• API Rate Limiting: Learned the importance of debouncing and efficient API usage patterns
• Modern CSS Techniques: Explored CSS Grid, custom properties, and responsive design without frameworks

API Integration

• The Movie Database (TMDB): Comprehensive movie data including cast, crew, and metadata
• Custom Analytics: Real-time search tracking and trending calculations

Project Highlights

This project represents my journey in building a production-ready React application with real-time features. The combination of external API integration, custom analytics, and performance optimization challenges made it an excellent learning experience in modern web development.

The trending analytics system, in particular, demonstrates how user behavior data can create dynamic, engaging experiences. Seeing movies rise and fall in the trending list based on actual search patterns was incredibly satisfying to implement.

---

Built with ❤️ as a learning project to explore modern React patterns and real-time data management.