Skip to content

MovieHolms is a responsive platform that has a huge collection of movies, series, and celebrity content. This platform has been developed using TMDb API, React.js, and Tailwind.

Notifications You must be signed in to change notification settings

CodingByGopal/React-MovieHolms

Repository files navigation

MovieHolms — Ratings, Reviews, and Where to Watch the Best Movies & TV Shows

MovieHolms is the biggest and most authoritative source for movie, TV, and celebrity content collection platform. The website is responsive and completely free to use. You can find ratings and details for the newest movies and TV shows and you can watch trailers and other relevant videos too within the platform. Get similar movie/series recommendations, and learn where to watch across hundreds of streaming providers.

Development And Optimizations

MovieHolms has been developed using React.js and Tailwind CSS. It has many features of modern UI example react top loading bar and react-loader-spinner, skeleton loading while fetching data from API, lazy image loading, and so on. For providing smooth animations, skeleton loading, and lazy image loading, Intersection observer API has been used. Custom hooks and components have been created to keep the code methodology 'DRY'. One of the most popular slider packages "SWIPER.JS" has been used which provides amazing UI design. MovieHolms is loaded with Image optimization, data fetching optimization, intersection observer API features, and so many other modern UI features. All components have been hand coded as no component library was used to design components.

Api

MovieHolms uses the TMDb Api as source of data

Resource

Font: https://fonts.google.com/

Icons: https://fontawesome.com/

Color Palettes: https://coolors.co/ , https://yeun.github.io/open-color/

Contrast check: https://coolors.co/contrast-checker/112a46-acc8e5

Illustrations: https://storyset.com/

Html Entity: https://tools.w3cub.com/html-entities

Images: https://www.pexels.com/ , https://unsplash.com/

Favicon: https://realfavicongenerator.net/

Tinst and shades: https://maketintsandshades.com/

Image design: https://www.adobe.com/express/create/banner

Placeholder: https://placeholderimage.dev/

Image handling: (compress,resize etc.): https://squoosh.app/

Features Check: https://caniuse.com/

Tech Stack

Client: React, TailwindCSS

Packages: swiper.js, react-player, react-top-loading-bar, react-loader-spinner , react-router-dom

Run Locally

Install dependencies

  npm install

Start the server

  npm run start

Preview

Hero

Movies series actors search details-page Trailer seriesseasons actors-details all videos

Hi, my name is Gopal ji! 👋

developer

🚀 About Me

I'm a front-end web developer. I'm the developer of MovieHolms Website.

🛠 Skills

React.js, Next.js ,ngular.js,TypeScript, Bootstrap,SASS,Tailwind css, Javascript, HTML, CSS,