Code Monkey home page Code Monkey logo

khalatevarun / cinemaplus Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 64.1 MB

CinemaPlus is a fully responsive webapp 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.

Home Page: https://cinemaplus.varunkhalate.me/

HTML 2.91% JavaScript 87.53% CSS 9.44% Shell 0.12%
movies tv-series api reactjs material-ui front-end pwa

cinemaplus's Introduction

Logo

Entertainment Hub

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.

Features

  • 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.

Technologies Used

  • ReactJS
  • Material UI
  • The Movie Database API

Screenshots

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

Learnings

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.

cinemaplus's People

Contributors

khalatevarun avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.