NextWatch - A Persistent Cinematic Discovery Engine & Personalized Film Vault for your next Watch. banner

NextWatch - A Persistent Cinematic Discovery Engine & Personalized Film Vault for your next Watch.

Created by: abhiadhikari2009
2 devlogs
2h 19m 2s

NextWatch is a high-performance, API-driven discovery engine designed to streamline the cinematic search experience. Built as a foundational prototype for a future AI-integrated content studio, it leverages the TMDB API to provide real-time filter…

NextWatch is a high-performance, API-driven discovery engine designed to streamline the cinematic search experience. Built as a foundational prototype for a future AI-integrated content studio, it leverages the TMDB API to provide real-time filtering and data retrieval. The architecture is engineered with React and Vite, featuring a robust Global State management system via the Context API and persistent data storage through browser LocalStorage. It focuses on a minimalist, “Stealth-Mode” UI/UX to ensure a premium user experience without the clutter of traditional movie databases.

This project uses AI

I only used Ai when i was really stuck on some bugs and couldnt solve them at all. I am learning React and the best way to do is learning by doing and since there was no one to help me i used AI only when i was stuck at some point. I also used all the texts that were generated by AI like in this READ me files.

Demo Repository

README

Loading README...
abhiadhikari2009
abhiadhikari2009 shipped NextWatch - A Persistent Cinematic Discovery Engine & Personalized Film Vault for your next Watch.
1 day ago

Shipped this project!

I built NextWatch, a cinematic discovery engine and personal film vault. The foundational architecture is built on React and Vite. The hardest part was figuring out environment-specific pathing within GitHub Codespaces—moving from a local Mac to a cloud-based Linux workspace broke my asset paths, but I successfully re-mapped the module resolutions so the Vite dev server could correctly serve my CSS and JSX. I’m really proud of the dedicated API service layer I built using async/await to fetch real-time data from the TMDB database, making the entire Single Page Application (SPA) feel incredibly smooth.

abhiadhikari2009
abhiadhikari2009 worked on NextWatch - A Persistent Cinematic Discovery Engine & Personalized Film Vault for your next Watch.
1 day ago
1h 25m logged

Architecture Overhaul & Persistence Integration

Today I transitioned the project from a basic frontend build to a globally-connected application. Key accomplishments include:

Global State Management: Implemented the React Context API to create a unified data stream across the entire component tree, enabling seamless interaction between the discovery gallery and the user’s queue.

Performance Optimization: Integrated Lazy State Initialization within my custom Context Provider. This allows the application to read from LocalStorage synchronously during the initial mount, eliminating UI flickers and redundant re-renders.

Stealth UI Overhaul: Refined the design system by removing tutorial-based CSS gradients and nested containers. I established a consistent, dark-slate theme with solid hex-accented salmon triggers for a cleaner, more modern look.

DevOps Workflow: Resolved a complex Git head-sync conflict to secure the 12-file architectural update in version control.

Attachment
Attachment
0
abhiadhikari2009
abhiadhikari2009 worked on NextWatch - A Persistent Cinematic Discovery Engine & Personalized Film Vault for your next Watch.
1 day ago
0h 53m logged

Today was a deep dive into the foundational architecture of my Movie Database application. Following the “Tech With Tim” roadmap, I successfully implemented a multi-page navigation system using react-router-dom. This allows the app to feel seamless as a Single Page Application (SPA), handling transitions between the “Home” gallery and the “Favorites” section without any browser reloads.

A major part of the session involved setting up a dedicated API service layer. I wrote asynchronous JavaScript functions using fetch and async/await to interface with the TMDB database. This creates a clean “brain” for the app that can handle real-time data fetching.

I also overcame a significant technical hurdle regarding environment-specific pathing within GitHub Codespaces. Moving from a local Mac to a cloud-based Linux workspace required me to re-map asset paths and handle module resolution issues to ensure the Vite dev server could correctly serve my CSS and JSX files.

While I’m following the tutorial as a baseline, I am already planning to make this project significantly more interactive. I intend to build a more custom, high-end UI that will eventually serve as the dashboard for my future AI-driven wildlife photography studio.

Attachment
Attachment
0