All Projects → AnselemOdims → MazeFlix

AnselemOdims / MazeFlix

Licence: MIT License
MazeFlix is an entertainment hub where you can find the latest and your favorite TV shows. You can view the details of the show, like a show or even comment. You can also see other comments which might give you a general idea about what people think about the show. It is built with HTML, CSS and JavaScript with data from the TvMaze API(tv show d…

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to MazeFlix

responsive-css-grid
A super-lightweight, responsive, 8-column grid based on box-sizing
Stars: ✭ 46 (+100%)
Mutual labels:  responsive, pure-css
Sickchill
Less rage, more chill.
Stars: ✭ 2,166 (+9317.39%)
Mutual labels:  tv, shows
qmlcore-tv
Smart TV PureQML plugin (LG, Samsung, OperaTV, AndroidTV, Hisense)
Stars: ✭ 23 (+0%)
Mutual labels:  tv
design-studio one-page-template
Free responsive flat designed one page template
Stars: ✭ 67 (+191.3%)
Mutual labels:  responsive
native-app
🍿 🕐 🎞 React Native App for the PCT environment
Stars: ✭ 39 (+69.57%)
Mutual labels:  shows
jekyll-grid
Jekyll theme (used on 25x52.com) displays posts in a grid. Ideal for projects
Stars: ✭ 63 (+173.91%)
Mutual labels:  responsive
BlueSkyTv
简单的安卓TV 超纯净
Stars: ✭ 17 (-26.09%)
Mutual labels:  tv
react-responsive-spritesheet
React component which helps you to easily apply responsive spritesheet animations on your project.
Stars: ✭ 82 (+256.52%)
Mutual labels:  responsive
aioneframework
Aione Framework: All-in-one lightweight mobile first front-end framework to design websites, web applications, mobile applications, progressive web applications having large number of examples, documentation, tutorials, community support, components.
Stars: ✭ 13 (-43.48%)
Mutual labels:  responsive
mobx-react-matchmedia
A React HOC with mediaqueries for responsive layout
Stars: ✭ 32 (+39.13%)
Mutual labels:  responsive
frames
🖼 A minimalistic take on responsive iframes in the spirit of Pym.js.
Stars: ✭ 19 (-17.39%)
Mutual labels:  responsive
GOSH-FHIRworks2020-React-Dashboard
🩺 Fully Responsive FHIR Dashboard written using @reactjs for NHS and GOSH hackathon
Stars: ✭ 21 (-8.7%)
Mutual labels:  responsive
i-Cut
🔨 个人技术栈
Stars: ✭ 18 (-21.74%)
Mutual labels:  responsive
pi-uhf-tv-station
Build your own UHF TV stations using a Raspberry Pi
Stars: ✭ 44 (+91.3%)
Mutual labels:  tv
breakpoints-js
Awesome Breakpoints in JavaScript. (bootstrap supported)
Stars: ✭ 70 (+204.35%)
Mutual labels:  responsive
image-processing-pipeline
An image build orchestrator for the modern web
Stars: ✭ 43 (+86.96%)
Mutual labels:  responsive
ml-stack-nav
Customizable, responsive, accessible, easy-to-use multi-level stack navigation menu with slide effect.
Stars: ✭ 20 (-13.04%)
Mutual labels:  responsive
awrora-starter
Landing page template built with one of most popular javascript library Vue.JS, Vuetify (Material Design) and Nuxt.JS with SSR.
Stars: ✭ 38 (+65.22%)
Mutual labels:  responsive
vue-resize-text
A vue directive which automatically resize font size based on element width.
Stars: ✭ 65 (+182.61%)
Mutual labels:  responsive
bootstrap-4-react
Bootstrap 4 React components
Stars: ✭ 19 (-17.39%)
Mutual labels:  responsive

MazeFlix

MazeFlix is an entertainment hub where you can find the latest and your favorite TV shows. You can view the details of the show, like a show or even comment. You can also see other comments which might give you a general idea about what people think about the show. It is built with HTML, CSS and JavaScript with data from the TvMaze API(tv show data) and the Involvement API(likes and comments)

Project Presentation

Presentation Link

Mini Demo

screenshot

Additional description about the project and its features.

Built With

  • Major languages (HTML, CSS, JavaScript)

  • Frameworks (None)

  • Technologies used

    - Webpack(Code Bundlng et al)
    - Jest(for testing)
    - Git(version control)
    - ESLint(JavaScript linting)
    - WebHint(linting tool)
    - Stylelint(style linting)

Live Demo

Website Link

Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

  • A text editor(preferably Visual Studio Code)

Install

Usage

Clone this repository

$ git clone [email protected]:AnselemOdims/MazeFlix.git
$ cd MazeFlix

Run project

$ npm install
$ npm run start # this will make webpack watching for your changes in code
$ npm run test #This is to run the tests on the count method

Open page in browser

$ open dist/index.html

Interaction with the TvMaze API

  • Each new query for TV shows is done with the GET method using the BASEURL
      https://api.tvmaze.com/
    

To get all shows that the title begin with 'a', GET request will be made to the below URL

  https://api.tvmaze.com/search/shows?q=a

Interaction with the Involvement API

  • Each new query for Involvement API is done using the below as the BASEURL

      https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/
    
  • To create a new app, a POST request is made to the API using the endpoint

      /apps/

    This returns the appID

      abc234

    Likes

  • A POST request is made to the API when a user clicks on the like button using this endpoint:

    Endpoint

      /apps/:app_id/likes/

    body parameters

    { 
        "item_id": "item1"
    }

    Return value for POST action: 201 status (created)

  • The GET request returns data in JSON format like this:

    [
      {
          "likes": 5,
          "item_id": "item1"
      },
      {
          "likes": 10,
          "item_id": "item2"
      }
    ]

Comments

  • A POST request is made to the API when a user clicks on the like button using this endpoint:

    Endpoint

      /apps/:app_id/comment/

    body parameters

    {
      "item_id": "item1",
      "username": "Jane",
      "comment": "Hello"
    }

    Return value for POST action: 201 status (created)

  • The GET request returns data in JSON format like this:

    Endpoint

      /apps/abc234/comments?item_id=item1

    It returns

    [
      {
          "comment": "This is nice!",
          "creation_date": "2021-01-10",
          "username": "John"
      },
      {
          "comment": "Great content!",
          "creation_date": "2021-02-10",
          "username": "Jane"
      }
    ]

Authors

👤 Anselem Odimegwu

👤 Mubarak Ibrahim

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].