TV Shows Web App - A web application based on an external API which contains information about TV shows

Related tags

Learning resource tv-shows
Overview

TV Shows Web App

In this project we build a web application based on an external API which contains information about TV shows. Also this web app let you like the shows that you like the most and comment what you think about them making use of an involvement API to save this interaction information.

Built With

  • HTML and CSS
  • Webpack and Npm
  • JavaScript: ES6, Modular, Async.
  • API fetch.
  • Tested with Jest.

TV Shows Live Demo

Press here to see the TV Shows Live Demo

Getting Started

To get a local copy up and running copy the SSH key of the repository and make a 'git clone' inn your terminal, then run an npm install so you will have all the dependencies required. After that you will be able to deploy this project locally.

👤 Authors

👤 Williams Colmenares

👤 Diego Yon

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

Acknowledgments

  • Microverse Module 2 JavaScript.
  • Base API for the TV Shows TVMazeAPI
  • Involvement API Link

📝 License

This project is MIT licensed.

Comments
  • JavaScript capstone project - API-based TV Shows webapp v 1.0

    JavaScript capstone project - API-based TV Shows webapp v 1.0

    In this capstone project, we build our own web application based on an external API. We selected an API that provides data about TV Shows and then build the web app around it.

    Presentation Video

    To make it we made use of the following features:

    • JavaScript to make websites dynamic and build basic single-page apps.
    • ES6 syntax, modules, callbacks, and promises.
    • Webpack.
    • AAA pattern for unit tests.
    • Gitflow.
    • Solve simple git conflicts.
    • Send and receive data from an API.
    • API documentation.
    • Perform a code review for each other.

    Interfaces Added:

    • The home page.
    • The comments popup.

    Home page: When the page loads, the web app retrieves data from:

    • The API, and shows the list of shows on screen.
    • The Involvement API to show the shows likes.

    Interactions:

    • When the user clicks on the Like button of an item, the interaction is recorded in the Involvement API and the screen is updated.
    • When the user clicks on the "Comments" button, the Comments popup appears.

    Comments popup

    • When the popup loads, the web app retrieves data from:
    • The API, and shows details about the selected item.
    • The Involvement API to show the item comments.
    • When the user clicks on the "Comment" button, the data is recorded in the Involvement API and the screen is updated.
    opened by williamscch 0
  • Add structure of the nav bar and some style

    Add structure of the nav bar and some style

    In this PR I added the structure of the navbar and some styles, I think we should do more styles but it is fine to start... Then we can create another project item for styling.

    opened by williamscch 0
  • [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 williamscch 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 williamscch 0
  • [4pt] -Display Comments pop up with selected item's details - Student B

    [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)

    Screenshot 2021-06-27 at 22 10 45

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

    opened by williamscch 0
Owner
Williams Colmenares
Preparing myself on @microverseinc to be a Full-Stack Developer. Passionate to learn new things every day. Currently looking for new opportunities.
Williams Colmenares
GitHub https://wdavidcch.github.io/capstone-project/dist
This project contains a leader board for a game which contains players name and list and store them on API build with HTML, CSS, JS and API

Leaderboard This App is a Game Leaderboard app Which is created by JavaScript and the big picture of this application is using API. Build With ??‍?? .

Sahar Saba Amiri 5 Dec 15, 2022
The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API, showing data about Italian foods and we used Used involvement API to record the different user interactions (likes, comments).

taste-food The Taste food web app is our JavaScript capstone project, Taste food is a web application based on an external food API TheMealDB, showing

Kyrillos Hany 14 Aug 10, 2022
This project is a Web application based on an external API. The API provides data about music (including artists, albums, etc) that users can access on-demand. This project was built with ES6, HTML and CSS and it is a SPA.

Capstone M2: Music App This project is a Web application based on the music API Napster built with ES6, HTML and CSS and it is a SPA. This API provide

Karla Delgado 12 Aug 29, 2022
The repository shows the compiler (simulator) of the Little Man Computer, which also contains some programs in the LMC programming language for implementing different functions.

Little Man Computer The repository shows the compiler (simulator) of the Little Man Computer, which also contains some programs in the LMC programming

Cow Cheng 2 Nov 17, 2022
This repository is about building a web application based on an external API.

This repository is about building a web application based on an external API. We will select an API that provides data about a topic that we like and then build the webapp around it. The webapp will have 2 or 3 user interfaces. A Home Page, a popup window with more data and a reservation window.

Muhammad Ashraf 4 Nov 11, 2022
🍺 A public REST API for retrieving information about Systembolaget's products, and which products that are available in which store

?? systembolaget-api A public REST API for retrieving information about Systembolaget's products, and which products that are available in which store

Daniel Cronqvist 9 Nov 22, 2022
Using Webpack and external API, this website saves and shows players' scores and allows the submission of new scores.

Microverse Students Leaderboard Microverse Students Leaderboard project that displays scores submitted by different students. All data is preserved in

Romina Patiño 5 Aug 19, 2022
The Main Purpose The main purpose of creating an anaonline information system, as an effort responsive to the management of the data of the Members of the Persis Youth based on information technology systems

landing-page-pp landing-page-pp.vercel.app #The Main Purpose The main purpose of creating an anaonline information system, as an effort responsive to

Hilman Firdaus 6 Oct 21, 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. This is a project for learning purposes which I'll practice medium-fidelity wireframes to create a UI.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Tiago Lelinski Marin 6 Aug 4, 2022
A leaderboard website which displays scores submitted by different players. It also allows you to submit your score. All data is preserved in the external game API.

Leaderboard LeaderBoard Built With HTML JavaScript CSS webpack Getting Started clone this repository. $ cd Leaderboard. $ npm run build . $ npm start

ahmednazirmusah 3 Oct 13, 2022
This is a JavaScript leaderboad list app. In this project I used Webpack and ES6 modules. As well as HTML, and CSS for styling the app. When submitting the scores the data is preserved thanks to the external Leaderboard API service.

Leaderboard App In this project the leaderboard app allows you to create games and the user can submit their names and scores into the app to keep tra

Erick Hans 5 Oct 26, 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
To-do-List website is a page that contains information about listed shores and things to do .

Project Name To-do-List Description the project. To-do-List website is a page that contains information about listed shores and things to do . Built W

PIESIE YEBOAH 8 Aug 8, 2022
Awsome books website is a page that contains information about list of books with the title and author names.

Project Name Awsome_Books-ES6 Description the project. Awsome books website is a page that contains information about list of books with the title and

Laasri Said 9 Oct 14, 2022
To-do-List website is a page that contains information that you already listed of shores and things to do.

Project Name To-do-List Description the project. To-do-List website is a page that contains information that you already listed of shores and things t

Laasri Said 9 Oct 14, 2022
The Meal DB web application displays a list of meals that provided by an external API.

The Meal DB The Meal DB web application displays a list of meals that provided by an external API. The users can like a meal, leave some comments or m

Behnam Aghaali 5 Mar 12, 2022
This application provides the CDK project and a frontend that allows you to build a serverless chat application based on API Gateway's WebSocket-based API feature.

Serverless chat application using ApiGateway Websockets This project lets you provision a ready-to-use fully serverless real-time chat application usi

AWS Samples 60 Jan 3, 2023
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
It's a javascript Class which contains utility methods that simplify working with google maps web SDK

About GoogleMapsJSHelper It's a javascript Class which contains utility methods that simplify working with google maps web SDK Note: i used ES7 Class

Sami Alateya 6 Jul 23, 2022