A Movie Searcher frontend app has built with Next.js framework. The app allows users to search for movies and list the findings. If the user click to a movie title, the app navigate to the given movie details page. The details page shows a brief overview about the movie. Additionally, the details page also contains 2 links, which let the user to navigate to imdb or wikidata pages and get more informations about the given movie. The app uses TMDB API to fetch informations from TMDB database.
- Allow user to search for movies
- Fetch data with TMDBW API usages
- Next.js framework is used
- Tailwind CSS is used without any UI library to style the app
- TanStack query is used to manage API fetches and cache the results
- Render-as-you-fetch approach is used
- Responsive design
- Clone the repository
- Run
npm installcommand in your terminal - Create .env file and add enviromental variables:
NEXT_PUBLIC_TMDB_API_KEY= - Run
npm run devcommand in your terminal - Server running at
http://localhost:3000/
- TMDB documentation:
- Loading screen approaches (Fetch-than-render, Render-as-you-fetch, Suspense):
- React
- React DOM
- Lucide Icons
- Typescript
- Tailwind CSS
- TanStack Query
- Sharp Image optimalization
- Next.js
