- Used React and tailwind ,TMDB API to implement imdb clone.
- It contains features like searching,sorting ,pagination, bookmarks.
- Local storage was used to sync data across multiple plages
- React router DOM was used to perform navigation
- Pages : we have Two pages
- Home Page -> List of movies β
- Header -> links to Movies, favourites β
- banner -> First movie ka banner β
- List of trending movies β
- Pagination β
- Favourites Page: * Header -> links to Movies, favourites * Genres list * Searchbar, no of items modifier * Favourite movies : sorting,β * deletion feature * Pagination
- Home Page -> List of movies β
-
How to make a (Ajax)request in react and render that data on ui
- React ->life cycle methods
-
Favourite page features that are highly used:
- Pagination,
- group by,
- sorting,
- searching
-
Multiple pages -> Routing
-
Practice : communication between multiple components
-
Sending data from one page to another
*I will not focus on ui
-
Trending Movies : They are sourced from TMDB api
- Data Availabe from TMDB API
- Movies Img src
- Movie name
- Genre -> Type of movie
- Rating
- Popularity
- Data Availabe from TMDB API
-
data file : movies.js
-
get small prepend in backdrop path (normal image ): https://image.tmdb.org/t/p/w500/
-
Banner image prepend : https://image.tmdb.org/t/p/original
let genreids = { 28: 'Action', 12: 'Adventure', 16: 'Animation', 35: 'Comedy', 80: 'Crime', 99: 'Documentary', 18: 'Drama', 10751: 'Family', 14: 'Fantasy', 36: 'History', 27: 'Horror', 10402: 'Music', 9648: 'Mystery', 10749: 'Romance', 878: 'Sci-Fi', 10770: 'TV', 53: 'Thriller', 10752: 'War', 37: 'Western' }
- sort by popularity β
- Searching β
- Pagination β
- Sending message from movies to favourite to movies -> like dislike(movies page) , localstorage
- Group by Genre
- Deletion of movies in favourites -> delete (fav), skip??
- Deployment on firebase ** share it's code -> mon : 5 to 7 tailwind ** Pending : Styling
- npm run build
- go to firebase console
- create project -> put the name -> don't add analytics
- go to cmd -> npm i -g firebase-tools
- firebase login -> browser will open -> login
- firebase init
- proceed -> y
- option -> hosting -> space then enter
- existing -> choose -=> space press then
- spa-> y
- rewrite-> n
- firebase deploy
- npm run build
- firebase init
- proceed -> y
- option -> hosting -> space then enter
- existing -> choose -=> space press then
- spa-> y
- rewrite-> n
- firebase deploy