2.4 KiB
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();
- Object.entries(searchParams)
.map(
([key, value], i, arr) =>
-
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
- Movie component:
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: