Movie Search

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

Containing:

• NavBar

• A page to search for movies by title:

  • SearchBar component:
    • Input for Title
    • Submit button
    • Clear button
  • List of results:
    • Title
    • Year
    • Type (Filter out "series"?) - hidden ?
    • Poster
    • imdbID - hidden Error Handling component

• A page for individual movie details:

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

External API Docs: OMDB

Built on:

Next.js Server side rendering for search results 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

State Management:

Using React Context + simple useState management because Redux is cool for a good number of things, especially larger apps that need a central, client-side store to manage many peices of state in one place, as well as helper functions to manage data functions and state mutation. - React Context in combination with simple state managment hooks like useState or useReducer is powerful enough for most small apps that only need to manage a small amount of state in separate places. 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:

• Error when testing components using NextJS Image
• Jest cannot test form actions - this is how we would test our SearchBar component fully in a unit test. E2E testing should be able to cover this though