Watchlog

About the Project 💡 Inspiration We've all had that moment when we discover an interesting movie or TV show, promise ourselves we'll watch it later, and eventually forget about it. Keeping track of what we've watched, what we're currently interested in, and what's next on our list can quickly become disorganised. That's where Watchlog comes in. I wanted to build a simple, intuitive platform that brings my movie and TV show tracking into one place. Rather than relying on scattered notes or trying to remember everything, Watchlog provides a dedicated space to manage watchlists and maintain a personal viewing history. ⚙️ What It Does Watchlog is a movie and TV show tracking application that allows users to:

Discover titles: Search for movies and television shows using data from TMDB.
Manage watchlists: Keep track of titles they intend to watch.
Record viewing history: Maintain a personal record of watched content.
Explore title details: View information such as posters, backdrops, ratings, genres, runtimes, and television series details.
Keep track of everything: Store watchlists and viewing history locally, allowing the data to persist between visits on the same browser. The goal is straightforward: make managing your entertainment preferences effortless. 🛠️ How I Built It I built Watchlog using React, TypeScript, and Vite, integrating The Movie Database (TMDB) API to retrieve movie and television show information. Here's the technology stack:
React: To build a component-based, interactive user interface.
TypeScript: To introduce type safety and make application logic more structured and maintainable.
Vite: To provide a fast development environment and build process.
TMDB API: To retrieve movie and television show information, including posters, ratings, genres, and other metadata.
localStorage: To persist watchlists and viewing history in the browser.
Vercel: To deploy and host the application. One of the central aspects of the implementation was handling movies and television shows as distinct media types. Although they share several properties, they also have different identifiers and metadata. I had to account for these differences to ensure that searching, displaying details, and tracking titles worked correctly. 🧠 What I Learned Building Watchlog was an opportunity to move beyond simply learning about web development and actually apply it to a functional project. Throughout the process, I gained practical experience with:
Building interactive interfaces using React and TypeScript.
Integrating an external REST API into a frontend application.
Managing application state across different sections of a website.
Persisting user data using browser storage.
Handling different data structures for movies and television shows.
Understanding environment variables, production builds, and deployment through Vercel.
Debugging issues that emerged when different parts of the application interacted. Perhaps most importantly, I began to understand that building an application involves considerably more than making its individual features work. Those features must also work together coherently. 🚧 Challenges I Faced The development process came with its fair share of challenges.
Handling different media types Movies and television shows have overlapping attributes, but their metadata and identifiers are not identical. Structuring the application's data and logic to accommodate both required careful handling of media types.
Managing application state One issue I encountered involved search results remaining visible when navigating to other sections, such as the watchlist or viewing history. Resolving these behavioural inconsistencies required a better understanding of state management and component interactions in React.
Making data persist I wanted users to retain their watchlists and viewing history even after refreshing the page. Implementing browser-based persistence helped me understand how application state can be stored and restored using localStorage.
Deployment and configuration Getting an application running locally is only one part of the process. Configuring environment variables, handling API integration, and deploying the production build through Vercel introduced me to the practical considerations involved in making a web application accessible online. Each challenge taught me to approach development as an iterative process: identify the problem, investigate its cause, implement a solution, and test the result. 🚀 What's Next? Watchlog is a functional first version, but there is plenty of room to grow. Potential future improvements include more advanced filtering and sorting, personal ratings, viewing statistics, enhanced discovery features, and cloud-based synchronisation across devices. For now, the focus is on building a reliable foundation and making the core tracking experience intuitive. 🎬 Final Thoughts Watchlog started as an idea to solve a familiar, everyday problem. Building it gave me the opportunity to work with modern web technologies, integrate an external API, troubleshoot real implementation issues, and deploy a working application. It is a reminder that a useful project doesn't necessarily need to solve a monumental problem. Sometimes, it starts by making a small part of everyday life a little more organised.