/movies-search

This app will allow you to search for movies and tv shows.

Primary LanguageJavaScriptMIT LicenseMIT

demo status deploy test

Screenshot of the app

Movies Search App

Next.js React JavaScript Tailwind CSS Just-Debounce-It React Hot Toast Vercel

This app will allow you to search for movies and tv shows. It uses OMDb API to fetch the data and display it.

Demo · Report issue · Suggest something

Table of Contents

Features

  • 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.

Tech Stack

Getting Started

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_key

Then run the following commands to install the dependencies and start the development server:

npm install
npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Demo

You can check out the demo:

demo