78 lines
1.8 KiB
Markdown
78 lines
1.8 KiB
Markdown
|
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);
|