This app will allow you to search for movies and tv shows. It uses OMDb API to fetch the data and display it.
- Has a form with a search input and a submit button.
- Show a list of movies with title, year and poster.
- Grid responsive layout.
- Fetch data from OMDb API.
- Prevent same search from being made twice.
- Search is made while typing.
- Has a debounce function to prevent too many requests.
- Use React Hot Toast to show notification messages.
- Images skeleton loading.
- Vercel (Deployment)
- Next.js 13 App Router
- React 18
- JavaScript
- Water.css
- Just-Debounce-It
- React Hot Toast
- Tailwind CSS
This is a Next.js project bootstrapped with create-next-app.
To run this project locally, you have to clone the repository.
You will need an API to get movies for example OMDb API and get an API Key. Once you have your key, create a .env.local file in the root of the project and add the following:
NEXT_PUBLIC_URL_PATH=your_url_path
NEXT_PUBLIC_API_KEY=your_api_keyThen run the following commands to install the dependencies and start the development server:
npm installnpm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can check out the demo: