WatchLur
Design, Development
Entertainment
Description
Watchlur is a movie database website similar to IMDb or TMDB.
Originally, this project was created in collaboration with Arkan for the web design competition at Telkom DEVORIA Season 1. My role was UI/UX Designer & Frontend Developer, while Arkan focused on Frontend Development & PWA.
Later, in late 2024 - now (this project is still work in progress), I decided to redesign and rebuild the project from scratch as a way to explore design concepts, learning, and enhance my skills in Next.js 14 App Router, Server Component, TypeScript, React Query, animations, and more.
Detail Project
Role
UI/UX Designer, Frontend Developer
Team
Danis Zaidan
Technology
Explore Movies and TV Series
Find millions of movies and TV series in our database movie library. Get inspired with now playing, top rated, popular, and many more.
Media Gallery
Organizes and displays trailers, videos, and images related to a movie or TV series, allowing users to explore videos and images in a visually engaging format.
Advanced Search
Allows users to refine movie and TV series searches using filters and sorting options. It also categorizes results into Movies, TV Series, and People, making it easier and find relevant content.
Movie Overview & Details
This feature provides key movie information, including title, rating, duration, genres, and synopsis, along with production details such as director, writers, budget, revenue, etc.
Cast & Crew
View the full list of actors, directors, and crew members for each movie or TV show. Get details about their roles and explore their filmography.
More Features
to Explore
Loading Effect & Caching
Watchlur uses skeleton loading for a smooth experience while fetching data. With TanStack Query caching, previously loaded data is stored, reducing refetching and speeding up page loads.
Hover Detail Card
Watchlur uses skeleton loading for a smooth experience while fetching data. With TanStack Query caching, previously loaded data is stored, reducing refetching and speeding up page loads.
Responsive Design
Watchlur is fully responsive, ensuring an optimal viewing experience across all devices, from desktops to tablets and smartphones, with a seamless and adaptive layout.
Infinite Scroll
Enables seamless browsing and smooth experience of movie and TV series lists by dynamically loading more content as users scroll. It utilizes useInfiniteQuery from TanStack Query.
Watch Provider
The Watch Provider feature helps users find where to stream, rent, or buy movies with direct links from JustWatch via TMDB.
Watch Trailer
The Trailer Preview feature lets users watch official movie trailers directly via embedded YouTube videos.
