TVMAZE API-based webapp, receives TV show episodes with all data about that TV show.

Related tags

Learning resource capstone-project2
Overview

Capstone Project 2

TVMAZE API-based webapp, receives TV show episodes with all data about that TV show. The Webapp has two interfaces: A home page, showing a list of Tv show episodes you can like. And a popup window with more data about the TV show that you can comment on.

Demo 📝

Interface 1
Interface 2

Built With

  • HTML, CSS, Javascript, Webpack, Jest, ES6.

Getting Started

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

Setup

  • Open terminal and clone the project: git clone https://github.com/Yazino12/capstone-project2.git
  • cd into the directory capstone-project2

Prerequisites

  • You need to have node.js installed in your system

Install

  • On your terminal run : npm i
  • For Webpack to build and bundle the app files : npm run build
  • For Webpack to start the development server : npm run start
  • In case you run into any errors please raise an issue.

Live

Authors

👤 Cédric Kossi

👤 Yasin

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Show your support

Give a ⭐️ if you like this project!

Credits

Acknowledgments

  • This was not possible without the help of Microverse.

📝 License

This project is MIT licensed.

Comments
  • Display list of items

    Display list of items

    In this pull:

    • Add show cards to the home page dynamically generating data from the API
    • Add structure to the cards
    • Install gh-pages and deploy to Github
    opened by Yazino12 2
  • Maze-Tv a video show streaming website

    Maze-Tv a video show streaming website

    In this pull:

    • Set up Gitflow
    • Set up web pack
    • Set up a JavaScript testing library (Jest)
    • Get a list of items with a unique item id
    • For a given item, get detailed information about it
    • Create page header
    • Create footer
    • Create the main part of the homepage
    • Create a comments popup
    • Display the number of likes for each item on the Homepage
    • Display comments for a given item on the Comments pop-up
    • Create feature: add new like
    • Create feature: add a new comment
    • Add all items counter on the Homepage
    • Add comments counter
    • Add tests for items counter
    • Add tests for comments counter

    Team members:

    1. @kosher9
    2. @Yazino12

    Links: Link to project Kanboard Link to live website Video Presentation

    opened by Yazino12 0
  • Find external API

    Find external API

    The base API: TVMAZE API

    This API has the following:

    • Get a list of items with a unique item id.
    • For a given item, get detailed information about it.
    • API provides image resources.

    The API endpoint that gives the data: Endpoint

    Also in this PR:

    • Edit the README.md adding a better description of the project.
    • Add MIT licence.
    • Add demo snapshots of what our product will look like "pictures will be updated later upon project completion".
    opened by Yazino12 0
  • Peer-to-Peer Review

    Peer-to-Peer Review

    STATUS: APPROVED :large_green_circle:

    Hi @kosher9 and @Yazino12 :wave:,

    I confirm all tests are implemented correctly and passing, Great job team :+1: Your project is well structured! There is nothing else to say other than... Happy coding :shipit: Congratulations! :tada:

    To Highlight :tada:

    • No linter errors. :heavy_check_mark:
    • GitHub flow is followed. :heavy_check_mark:
    • Professional README file. :heavy_check_mark:
    • PR has a good title and summary. :heavy_check_mark:
    Cheers and Happy coding!:clap::clap::clap: Feel free to leave any questions or comments in the PR thread if something is not 100% clear. Please, remember to tag me in your question so I can receive the notification. ------ As described in the [Code reviews limits policy](https://microverse.zendesk.com/hc/en-us/articles/1500004088561) you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using [this form](https://airtable.com/shrQAqnBwek5a0O0s). (Not automatically expanded because 4 MB is too large. You can expand it anyway or open it in a new window.)
    opened by EzekielUtshudi 0
  • Group capstone: set up your Kanban board

    Group capstone: set up your Kanban board

    Hello

    Here is the link to the project: Capstone project2 This team consists of two students: @kosher9 and @Yazino12.

    • Student A = @Yazino12
    • Student B = @kosher9
    opened by Yazino12 2
  • [0.5pt] Find external API - group task

    [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.
    opened by Yazino12 0
  • [4pt] - Display list of items on the Homepage - Student A

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

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

    Screenshot 2021-06-27 at 21 50 23

    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.

    opened by Yazino12 0
Owner
Yasin Warsame
Full-stack software developer, Tech enthusiast. Stack: JavaScript | Ruby | Rails | React | Redux. Currently looking for new opportunities.
Yasin Warsame
GitHub
JavaScript API based capstone project using TVmaze API for displaying and interacting with items from the data base.

Yuriy Chamkoriyski & Bonke Gcobo Javascript capstone project API-based webapp from Module 2 at Microverse Wireframe requirements The Home Page low fid

Yuriy Chamkoriyski 5 May 30, 2022
Rent-A Movie is a website based on movie renting. The user can leave likes, comments or make reservations for movies they would like to rent. Made using tvMaze API, Involvement API, HTML, SASS and JavaScript

Rent-A Movie "Rent-A Movie" is a website for movie renting where you can make reservations, add comments & likes or just get details about movies that

Zeeshan Haider 19 Aug 23, 2022
This project is a web app that uses the TVmaze API to retrieve data and display a list of items on the screen.

This project is a web app that uses the TVmaze API to retrieve data and display a list of items on the screen. It also enables people to like and comment on the broadcast. JavaScript, API, Bootstrap, HTML, and CSS3 were used to create this site.

Mihreteab Misganaw 2 Jan 10, 2022
This repo is a collection of code samples and links to previous twitch live stream sessions. If you have any ideas or suggestions for future episodes, feel free to open an issue.

Talk DEV to me Talk DEV to me is a monthly show on twitch.tv/aws hosted by Tiago Barbosa and Alex Melnyk, where we invite customers, partners, or Amaz

AWS Samples 122 Jan 6, 2023
Blog-webapp - A simple webapp prototype that serves tech news, blogs, and anything else a developer might want to learn or get help with

Blog Web app A simple webapp prototype that serves tech news, blogs, and anythin

Sachit Yadav 6 Nov 3, 2022
In this project we build a TVSeries website using Javascript, HTML, CSS and the TVMAze API. Each movie list on the page has a like and comments feature

MicroFLIX This project is a development about TV series, we fetched all data from TVmaze API, Users can like movies and also give a comment. All data

Bright Kweku Ahiadeke 7 Jul 25, 2022
RenderIf is a function that receives a validation as a parameter, and if that validation is true, the content passed as children will be displayed. Try it!

RenderIf RenderIf is a function that receives a validation as a parameter, and if that validation is true, the content passed as children will be disp

Oscar Cornejo Aguila 6 Jul 12, 2022
Simple WebApp that Show You A Cute Random Cats :D

RANDOM CAT How I worked on this project Hello Friends . Well , first i recently learn how Testing React components with Jest ,so i're i start a new pr

Siavash 2 Jun 10, 2022
Timetable app (webapp) for SLIIT students of all years

Build status: Timetable App (for SLIIT students) This web app is made for SLIIT students of all years and all specializations. The timetables of most

Pawan Senpura 20 Nov 26, 2022
A WebApp to make Obsidian Clippers or Bookmarklets - to capture webpages or data from the web

A WebApp to make Obsidian Clippers or Bookmarklets - to capture webpages or data from the web

Ganessh Kumar 30 Dec 4, 2022
An experimental syntax highlighter web app bot based on Telegram's WebApp update.

Syntax Highlighter WebApp Inspired by zubiden/tg-web-bot-demo. Try the demo bot running here: @syntaxyybot Recently Telegram released a big update for

Dunkan 12 Nov 8, 2022
This project is built with JavaScript, Webpack, HTML & CSS, Leaderboard api. When user clicks on Refresh button it hits the api and responds with the data, The user can also post data to the api

leaderboad Description the project. this project is about the leaderboad i did during Microverse to build a website for adding Data to the API and fet

Emmanuel Moombe 4 May 30, 2022
Script to fetch all NFT owners using moralis API. This script output is a data.txt file containing all owner addresses of a given NFT and their balances.

?? Moralis NFT Snapshot Moralis NFT API will only return 500 itens at a time when its is called. For that reason, a simple logic is needed to fetch al

Phill Menezes 6 Jun 23, 2022
It shows an effective way to correct bus arrival information using data analytics based on Amazon Serverless such as Kiness Data Stream, Kinesis Data Firehose, S3, and Lambda.

Amazon Serverless를 이용한 실시간 버스 정보 수집 및 저장 본 github repository는 버스 정보를 주기적으로 수집하여 분석할 수 있도록, Amazon Serverless인 Amazon Kinesis Data Stream, Kinesis Data

John Park 4 Nov 13, 2022
The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to the external Leaderboard API service. Build with Html, CSS, JS, API, and Webpack.

Kyrillos Hany 9 Mar 11, 2022
WebApp to provide you Free eBooks.

Bookies ?? About A Fully-fledged E-commerce web application integrated with stripe payment gateway from where You can buy or download eBooks, You also

Prateek Srivastava 15 Sep 10, 2021
💠 Webapp to see what time is in any timezone

Timero Webapp to see what time is in any timezone. Deploy https://ultirequiem.github.io/timero Characteristic Responsive Design Uses Packup as Bundler

Eliaz Bobadilla 7 May 15, 2022
This Webapp The Cinema of Movies displays a list of shows

This Webapp The Cinema of Movies displays a list of shows. The user is able to like any of the movies, and also read more information about each movie once he clicks on the comments button. Also, the user is able to leave a comment about any of the movies.

Tobin 7 Mar 16, 2022
A simple yet useful todo list webApp

A simple yet useful todo list webApp

Awais Anwar 8 Mar 5, 2022