A one stop destination for movies and tv series
Entertainment Hub is a fully responsive website where you can find trending movies and tvseries, read the plot, know the cast crew and event watch the trailers of the same. You can also search for movies/tv series in the search page.
- Trending - Trending page displays all the trending moviea and tv series.
- Movies - Movies page displays all the movies. It also has an option to search for movies based on different genres.
- TV Series - TV Series page displays all the movies. It also has an option to search for tv series based on different genres.
- Search - Search page facilitates searching for both movies and tv series based on the text entered.
- Details - Displays the plot, cast crew and link to trailer of the movie/series selected.
- ReactJS
- Material UI
- The Movie Database API
Following is a sneak peek of how the interface looks. To use the website live, head on over to the link
| Quick preview | Details |
|---|---|
 |
 |
| Movies | TV Series |
|---|---|
 |
 |
| Search | Trending |
|---|---|
 |
 |
This is my first project in react. After completing a small introductory course on react i decided to apply the concepts in order to have a good grasp on them.
-
React
- Router - Collection of navigational components that compose declaratively with your application. The component was used to have a separate url for "movies", "trending", "tv series" and "search" components.
- State Hook - Allows you to have state variables in functional components.
- Effect Hook - The hook that manages side-effects in functional React components. Mainly used to make API calls and fetch the required data.
- Alice carousel - A React component for building content galleries, content rotators and any React carousels. The componenet is used for displaying the cast crew of every movie/tv series in caruosel fashion.
-
Material UI
- Chips - Compact elements that represent an input, attribute, or action. User for genres in "movies" and"tv series" components.
- Bottom navigation - Bottom navigation bars allow movement between primary destinations in an app.
- Badges - Generates a small badge to the top-right of its child(ren). Used to display the ratings of the each movie/tv series.
- Pagination - Enables the user to select a specific page from a range of pages
- Modal - Provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else. Used to disply the details of any movie/tv series.
- Theme Provider - Helps to customise the material ui theme.