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:
  - searchParams to string 
    -  Object.entries(searchParams)
    .map(
      ([key, value], i, arr) =>
        `${key}=${value}${i < arr.length - 1 ? "&" : ""}`
    )
    .toString();

  - SearchBar component:
    - Input for Title
    - Submit button
    - Clear 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/network requests and eliminate the need for state-management on data returned from the external API.

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:

- FavoriteContext - favorites, setFavorites

- FavoriteProvider - A wrapper for FavoriteContext.Provider with local state that we can render client-side and pass children through to make use of server-side rendering for child components (interleaving)

- FavoriteBtn - a client-side component rendering a button and using useContext(FormContext) to consume favorites and setFavorites - filter favorites by id to prevent duplicats/allow removing from list.

Known issues: 
  * https://github.com/vercel/next.js/issues/65161
  * https://github.com/vercel/next.js/issues/54757