anselemodims / mazeflix Goto Github PK

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)

Home Page: https://anselemodims.github.io/MazeFlix/

License: MIT License

JavaScript 70.27% CSS 28.34% HTML 1.39%

tv shows api javascript webpack pure-css responsive

mazeflix's Introduction

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

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

Git
Node

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

GitHub: github
LinkedIn: LinkedIn

👤 Mubarak Ibrahim

GitHub: github
LinkedIn: LinkedIn

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

mazeflix's People

Contributors

Stargazers

Watchers

Forkers

imubarak234

mazeflix's Issues

[4pt] - Create feature: add new comment - Student B

Implement the "add new comment" form on the Comments pop up according to the wireframe:

When the user clicks on the "Comment" button, the data is recorded in the Involvement API and the screen is updated.

[3pt] - Display comments for a given item on the Comments pop-up - Student B

When the popup loads, the webapp retrieves data from the Involvement API to show the item comments.

This task does not include the counter of the comments.

[3pt] - Add tests for reservations counter - Student C

Make sure that function for the reservations counter is covered with unit tests using Jest.

[4pt] - Create feature: add new comment - Student B

Implement the "add new comment" form on the Comments pop up according to the wireframe:

When the user clicks on the "Comment" button, the data is recorded in the Involvement API and the screen is updated.

[4pt] -Display Comments pop up with selected item's details - Student B

Create a comments popup only with the top section (displaying details of the selected item)

When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.

Add event to button prepared by your teammate that will open your popup. You need to communicate with your team member to make sure that you do not block each other (most likely the easiest solution is to merge the list of items feature to the dev branch before you try to add that event).

[3pt] - Add reservations counter - Student C

Even if the API gives you the number of reservations you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Reservations pop up.

[3pt] - Add tests for comments counter - Student B

Make sure that function for the comments counter is covered with unit tests using Jest.

[3pt] - Add tests for items counter - Student A

Make sure that function for the items counter is covered with unit tests using Jest.

[3pt] - Add tests for comments counter - Student B

Make sure that function for the comments counter is covered with unit tests using Jest.

[3pt] - Add all items counter on the Homepage - Student A

Even if the API gives you the number of items, you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Homepgae.

[4pt] - Display Reservations pop up with selected item's details - Student C

Create a reservations popup only with the top section (displaying details of the selected item)

When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.

[3pt] - Add reservations counter - Student C

Even if the API gives you the number of reservations you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Reservations pop up.

[4pt] - Create feature: add new comment - Student B

Implement the "add new comment" form on the Comments pop up according to the wireframe:

When the user clicks on the "Comment" button, the data is recorded in the Involvement API and the screen is updated.

[3pt] - Add tests for items counter - Student A

Make sure that function for the items counter is covered with unit tests using Jest.

[4pt] - Display number of likes for each item on the Homepage - Student A

When the page loads, the webapp the Involvement API to show the item likes and combines them with the data from the base API.

Remember that your page should make only 2 requests:

one to the base API
and one to the Involvement API.

This task does not include displaying the likes button (heart icon on the wireframe) for each item.

[0.5pt] Add footer - group task

Create footer according to the wireframe:

[0.5pt] Add header - group task

Create page header according to the wireframe:

[3pt] - Add comments counter - Student B

Even if the API gives you the number of comments you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Comments pop up.

[3pt] - Add tests for reservations counter - Student C

Make sure that function for the reservations counter is covered with unit tests using Jest.

[4pt] - Create feature: add new reservation - Student C

Implement the "add new reservation" form on the Reservations pop up according to the wireframe:

When the user clicks on the "Reserve" button, the data is recorded in the Involvement API and the screen is updated

[3pt] - Add tests for comments counter - Student B

Make sure that function for the comments counter is covered with unit tests using Jest.

[3pt] - Add tests for items counter - Student A

Make sure that function for the items counter is covered with unit tests using Jest.

[3pt] - Add all items counter on the Homepage - Student A

Even if the API gives you the number of items, you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Homepgae.

[3pt] - Add tests for items counter - Student A

Make sure that function for the items counter is covered with unit tests using Jest.

[3pt] - Add comments counter - Student B

Even if the API gives you the number of comments you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Comments pop up.

[0.5pt] Find external API - group task

Find an API to base the development of the webapp around it. The API should allow you to

Get a list of items with a unique item id (or generate the unique id).
For a given item, get detailed information about it.
choose an APIs that doesn't need authentication. if you select an API that requires authentication, you should implement it on your own. Also, if you select an API that provides image resources your webapp will be more visual.

[4pt] -Display Comments pop up with selected item's details - Student B

Create a comments popup only with the top section (displaying details of the selected item)

When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.

[3pt] - Add tests for comments counter - Student B

Make sure that function for the comments counter is covered with unit tests using Jest.

[3pt] - Create feature: add new like - Student A

When the user clicks on the Like button of an item (on Homepage), the interaction is recorded in the Involvement API and the screen is updated.

[3pt] - Add comments counter - Student B

Even if the API gives you the number of comments you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Comments pop up.

[4pt] - Display list of items on the Homepage - Student A

Create the main part of the homepage that keeps the layout from the wireframe:

When the page loads, the webapp retrieves data from the selected API and shows the list of items on screen with the basic data (e.g. title + image).

Prepare also "Comments" and "Reservations" buttons. They should be doing nothing - just being displayed.

This task does not include displaying the number of likes for each item.

This task does not include the counter of the items.

[4pt] - Create feature: add new reservation - Student C

Implement the "add new reservation" form on the Reservations pop up according to the wireframe:

When the user clicks on the "Reserve" button, the data is recorded in the Involvement API and the screen is updated

[3pt] - Add tests for reservations counter - Student C

Make sure that function for the reservations counter is covered with unit tests using Jest.

[4pt] - Display number of likes for each item on the Homepage - Student A

When the page loads, the webapp the Involvement API to show the item likes and combines them with the data from the base API.

Remember that your page should make only 2 requests:

one to the base API
and one to the Involvement API.

This task does not include displaying the likes button (heart icon on the wireframe) for each item.

[4pt] - Display Reservations pop up with selected item's details - Student C

Create a reservations popup only with the top section (displaying details of the selected item)

When the popup loads, the webapp retrieves data from the selected API and shows details about the selected item.

[0.5pt] Add header - group task

Create page header according to the wireframe:

[3pt] - Display reservations for a given item on the Reservations pop-up - Student C

When the popup loads, the webapp retrieves data from the Involvement API to show the item's reservations.

This task does not include the counter of the reservations.

[4pt] - Create feature: add new reservation - Student C

Implement the "add new reservation" form on the Reservations pop up according to the wireframe:

When the user clicks on the "Reserve" button, the data is recorded in the Involvement API and the screen is updated

[3pt] - Add all items counter on the Homepage - Student A

Even if the API gives you the number of items, you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Homepgae.

[0.5pt] Set up the project with Webpack and Jest- group task

Set up Gitflow
Set up webpack
Set up a JavaScript testing library (Jest)

[3pt] - Create feature: add new like - Student A

When the user clicks on the Like button of an item (on Homepage), the interaction is recorded in the Involvement API and the screen is updated.

[0.5pt] Add footer - group task

Create footer according to the wireframe:

[0.5pt] Set up the project with Webpack and Jest- group task

Set up Gitflow
Set up webpack
Set up a JavaScript testing library (Jest)

[3pt] - Add reservations counter - Student C

Even if the API gives you the number of reservations you will create a specific function to calculate it.

Make sure that the correct number is displayed on the Reservations pop up.

[4pt] - Display list of items on the Homepage - Student A

Create the main part of the homepage that keeps the layout from the wireframe:

When the page loads, the webapp retrieves data from the selected API and shows the list of items on screen with the basic data (e.g. title + image).

Prepare also "Comments" and "Reservations" buttons. They should be doing nothing - just being displayed.

This task does not include displaying the number of likes for each item.

This task does not include the counter of the items.

anselemodims / mazeflix Goto Github PK

mazeflix's Introduction

MazeFlix

Project Presentation

Mini Demo

Built With

Live Demo

Getting Started

Prerequisites

Install

Usage

Clone this repository

Run project

Open page in browser

Interaction with the TvMaze API

Interaction with the Involvement API

Likes

Endpoint

Comments

Endpoint

Endpoint

Authors

🤝 Contributing

Show your support

📝 License

mazeflix's People

Contributors

Stargazers

Watchers

Forkers

mazeflix's Issues

Recommend Projects

Recommend Topics

Recommend Org