A simple app that allows users to search for movies by title, review the search results and navigate to a movie’s detail page.

It contains:

• Navbar

• A page to search for movies by title:

  • SearchBar component:
    • Input for Title (Year & Plot too?)
    • Submit button
    • Cear button
  • List of results - paginated so we might need a pagination component:
    • Title
    • Year
    • Type (Filter out "series"?) - hidden ?
    • Poster
    • imdbID - hidden Error Handling component

• A page for individual movie details:

  • Movie component:
    • Title
    • Year
    • Rated
    • Released
    • Runtime
    • Genre
    • Director
    • Writer
    • Actors
    • Plot
    • Language
    • Country
    • Awards
    • Poster
    • Ratings: [ { Source } ]
    • Metascore
    • imdbRating
    • imdbVotes
    • imdbID
    • Type
    • DVD
    • BoxOffice
    • Production
    • Website
    • Response

External API Docs: https://www.omdbapi.com/

Built on: Next.js Server side rendering for list & movie details to hide api token - Could possibly use Route Handler

Switched to Tailwindcss for styling. Was using chakra ui components but it isn't server-side render friendly

Using React Context because Redux is cool for a good number of things, but when built correctly - React Context is powerful enough for most apps. It can be layered if need be, but for this example we will stick with a simple context:

Since we're using server side rendering for pages that fetch data, we don't need a lot of state management. We can implement Context in a client component for managing "Favorites" for a user if we'd like this might look like:

favorites/page.tsx

cosnt FavoriteContext = createContext({ favorites, addFavorite })

const FavoriteProvider = ()=>{ // local state management return (

) }

const { searchResults } = useContext(FavoriteContext);