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);