This is a movie explorer app built with Next.js, Tailwind CSS, Shadcn UI, and TypeScript, TanStack Query, V5 and Axios.
- Responsive layout for mobile and desktop.
- Browse popular movies.
- Search for movies by title.
- View movie details in a modal with beautiful design.
To get started, follow these steps:
- Clone the repository:
git clone https://github.com/n53337/movie-explorer.git- Install dependencies:
npm install
// or
yarn install- Rename the
.env.examplefile to.env.localand add your API token:
cp .env.example .env.local- Start the development server:
npm run dev- Open the App in your browser to view the app. and Voila! 🎉
The task was to build a movie explorer app that interacts with the TMDb API, retrieves movie data, and offers a smooth user experience with:
• Data Fetching using Axios
• Caching and Pagination via TanStack Query V5
• Modal windows for detailed views
• A search feature to explore specific movies.
I used TanStack Query V5 for its powerful caching capabilities. It reduces unnecessary API calls by caching previously fetched data. I also use custom hooks to make it easier to deal with the data fetching process.
I've implemented pagination using the useInfiniteQuery hook from TanStack Query V5. This hook allows you to fetch data in a paginated way. and i use the Intersection Observer API to trigger the loading of the next page when the user scrolls to the bottom of the current page.
I also Debouncing technique to avoid "request spamming", so the user can only make a request every 500ms.
I considered performance as a crucial aspect of the app, because it has so many assets (Images) to load, which can slow down the loading time. Espically for low network speeds. So I used the next/image component to optimize the image sizes. and the lazy loading technique, so that you only fetch images when they are needed.