An Movie Search Application Built with the IMDB API

• Build the web app using Vue
• The Web app will use the OMDB API
• Have a search bar at the top of the page from where a user can search for a movie.
• The search results should be displayed as a movie in a way that showcases the title, the cover image, and links to the details about the movie.
• Freedom to decide what your UI and UX should look like.

• Ensure that you have Node.js and NPM installed locally

yarn install

yarn serve

yarn test:unit

yarn build

http:https://localhost:8080

• VueJS
• CSS / SCSS

• SearchBar: The SearchBar component is used to allow users input a search term.

import { SearchBar } from "@/components"

The SearchBar has the following props: modelView, handleSearch

• MovieCard: The MovieCard Component is designed to display the initial of the movie after search.

import { MovieCard } from "@/components"

The MovieCard has the following props: type, poster, title, genre, year, imdbRating, rottentomatoes

• MovieDetailModal: The MovieDetailModal is designed to display all the details of a movie.

import { MovieDetailModal } from "@/components"

The MovieDetailmodal has the following props: type, poster, title, genre, year, imdbRating, rottentomatoes, plot, writers, director, runtime, rated, awards, language, show

• Tag: The Tag components is for aesthetics, to help display unique set of data.

import { Tag } from "@/components"

The Tag has the following props: text

• NoResult: The NoResult components is for used to alert the user that there was no result after a search.

import { NoResult } from "@/components"

The NoResult has the following props: message

• Loader: The Loader component is used to improve UX, it shows the user that data is getting fetched.

import { Loader } from "@/components"

• Footer: The Footer components displays meta data.

import { Footer } from "@/components"

The UI design for this app was inspired by

• Fink Movie - https://www.figma.com/community/file/879798185346840008
• MovieBox - https://www.figma.com/community/file/1030753090086308330
• Netflix - https://www.netflix.com

MIT License