Projects
Explore my portfolio of projects across different technologies.
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.
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.
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.
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(
This approach reduced API calls by approximately 80% during active typing while maintaining the feel of instant search results.
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);
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
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(
This ensures users don't lose their place when navigating between pages, and new filters automatically reset to page 1.
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:
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=
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 ()
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.