JavaScript API based capstone project using TVmaze API for displaying and interacting with items from the data base.

Overview

Yuriy Chamkoriyski & Bonke Gcobo Javascript capstone project

API-based webapp from Module 2 at Microverse

Wireframe requirements

The Home Page low fidelity

Home.png

The low fidelity for comment pop up page

ForComments.png

Actual screenshot

Screenshot

Video presentation

Video link

Description

The JavaScript capstone project is about building your own web application based on an external API. You will select an API that provides data about a topic that you like and then build the webapp around it.

Requirements

APIs

  • First, you need to find an API so you can 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.
  • You will use our Involvement API to record the different user interactions (likes, comments and reservations).

Interfaces

  • You should build these interfaces:
    • The home page.
    • The comments popup.
  • You should follow the layout of the wireframes provided. You should personalize the rest of the design including colors, typographies, spacings, etc.
  • Home page
    • When the page loads, the webapp retrieves data from:
      • The selected API and shows the list of items on screen.
      • The Involvement API to show the item likes.
    • Remember that your page should make only 2 requests:
      • One to the base API.
      • And one to the Involvement API.
    • 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.
    • Home page header and navigation similar to the given mockup.
    • Home page footer similar to the given mockup.
  • Comments popup
    • When the popup loads, the webapp retrieves data from:
      • The selected 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.

Counters

Counters We have counters in all the interfaces that show:

  • The number of items (home).
  • The number of comments (comments popup).

Technical set up

  • Set up the repository on GitHub and use Gitflow.
  • Set up webpack.
  • Set up a JavaScript testing library (Jest).

Instructions:

Cloning the repo to your local system (if you already have git, installed in your system)

  1. Copy this Link https://github.com/Hombre2014/JS_Capstone_project.git
  2. Open your terminal or command line
  3. Run the command: git clone https://github.com/Hombre2014/JS_Capstone_project.git
  4. Open the folder with your code editor: cd JS_Capstone_project
  5. Now You can edit the code and check the changes in the browser using Live Server

Built With

  • Major languages: HTML, CSS, JS
  • Frameworks: none
  • Technologies used: Git, webpack, Jest

Live Demo

Getting Started

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

Prerequisites

  • Internet connection and browser
  • A text editor (preferably Visual Studio Code)
  • Browser

Setup

  • For detail description of how to get started with webpack, please, look at: webpack

Install

Usage

  • Clone the repository using git clone https://github.com/Hombre2014/JS_Capstone_project.git
  • Change directory into the project folder: cd JS_Capstone_project
  • Run npm install
  • Run npm start
  • A new browser will open automatically with application loaded

Run tests

  • Test the number of movies loaded with Jest
  • Test the number of comments with Jest

Deployment

  • All the files necessary for deployment are in the /dist folder

Authors

đŸ‘€ Yuriy Chamkoriyski

đŸ‘€ Bonke Gcobo

đŸ€ 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

📝 License

This project is MIT licensed.

You might also like...

A Zotero add-on that scans your Markdown reading notes, tags the associated Zotero items, and lets you open notes for the Zotero items in Obsidian.

A Zotero add-on that scans your Markdown reading notes, tags the associated Zotero items, and lets you open notes for the Zotero items in Obsidian.

Zotero Obsidian Citations Adds colored tags to Zotero items that have associated Markdown notes stored in an external folder. Open an associated Markd

Jan 4, 2023

The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day today activies. Check out the live demo.

Todo List App The app helps you to add todo items to your list, mark completed ones and also delete finished items. Its a handy tool for your day toda

Apr 22, 2022

Deta Base UI - A place with more functionality for managing your Deta Base(s).

Deta Base UI - A place with more functionality for managing your Deta Base(s).

Deta Base UI - A place with more functionality for managing your Deta Base(s). ✹ Features: Total rows count Quick multi select (click and shift) Searc

Dec 29, 2022

A secondhand marketplace where you can post items for sale, interact with sellers, save items you are interested in.

A secondhand marketplace where you can post items for sale, interact with sellers, save items you are interested in.

Curbside - the secondhand market place that's actually pleasant to use Post items for sale, interact with sellers, save items you are interested in. A

Sep 9, 2022

This app is the capstone project we built at the end of our JavaScript module

This app is the capstone project we built at the end of our JavaScript module

This app is the capstone project we built at the end of our JavaScript module. It's a nostalgic interpretation of a pokedex, and we hope you enjoy it as much as we did putting it together. Go and catch 'em all!

Oct 19, 2022

This is a TV shows list website. It is a capstone project that was completed as part of Module 2 - JavaScript.

This is a TV shows list website. It is a capstone project that was completed as part of Module 2 - JavaScript.

Kanban Board Capstone Project This is a TV Shows web site source from TVmaze API. In the website, a user can click on heart icon and get it recorded i

Aug 11, 2022

Microverse Javascript Capstone Project

Microverse Javascript Capstone Project This is my second Capstone Project At Microverse. This is a Web App for displaying your Favorate Poke and it de

Jul 8, 2022

Get the best meals - JavaScript capstone project

 Get the best meals - JavaScript capstone project

Get the best meals - JavaScript capstone project Project in which you can give likes, comment on and reserve your best meals. Build using Test Driven

Jan 3, 2023

Awesome Books project : An online Book Library. Storing book information using local storage and displaying it as a list on HTML page

This is project is my based on building an online Book Library. Storing book information using local storage and displaying it as a list on html page

Nov 11, 2022
Comments
  • Final project submition

    Final project submition

    This is the final project pull request where all the requirements for the project have been implemented as follow:

    Description

    The JavaScript capstone project is about building your own web application based on an external API. You will select an API that provides data about a topic that you like and then build the webapp around it.

    Video presentation

    Video link

    Live Demo

    Live demo link

    Requirements

    APIs

    • First, you need to find an API so you can 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.
    • You will use our Involvement API to record the different user interactions (likes, comments and reservations).

    Interfaces

    • You should build these interfaces:
      • The home page.
      • The comments popup.
    • You should follow the layout of the wireframes provided. You should personalize the rest of the design including colors, typographies, spacings, etc.
    • Home page
      • When the page loads, the webapp retrieves data from:
        • The selected API and shows the list of items on screen.
        • The Involvement API to show the item likes.
      • Remember that your page should make only 2 requests:
        • One to the base API.
        • And one to the Involvement API.
      • 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.
      • Home page header and navigation similar to the given mockup.
      • Home page footer similar to the given mockup.
    • Comments popup
      • When the popup loads, the webapp retrieves data from:
        • The selected 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.

    Counters

    Counters We have counters in all the interfaces that show:

    • The number of items (home).
    • The number of comments (comments popup).

    Technical set up

    • Set up the repository on GitHub and use Gitflow.
    • Set up webpack.
    • Set up a JavaScript testing library (Jest).
    opened by Hombre2014 1
  • Comments display

    Comments display

    Hi there,

    • [ ] You have done a great job so far. Please try implementing the promises (async/await) in order to display the comments.
    Good luck mate!
    opened by DelhinRharl 1
  • Comments

    Comments

    Modal pop-up window is ready for review. It displays the information from the API:

    • the poster of the movie
    • The name of the movie
    • The released date
    • The language
    • The genre
    • The rating of the movie

    It also have the comments section with a form to submit a new comment

    opened by Hombre2014 0
Owner
Yuriy Chamkoriyski
Student at Microverse Full-stack web development program. Experience in front-end: HTML5, CSS3, JavaScript and WordPress. I am looking for the right opportunity
Yuriy Chamkoriyski
solana-base-app is a base level, including most of the common features and wallet connectivity, try using `npx solana-base-app react my-app`

solana-base-app solana-base-app is for Solana beginners to get them up and running fast. To start run : run npx solana-base-app react my-app change th

UjjwalGupta49 33 Dec 27, 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
TVMAZE API-based webapp, receives TV show episodes with all data about that TV show.

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.

Yasin Warsame 4 Aug 9, 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
Kyrillos Hany 14 Aug 10, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till mÀnniskor pÄ flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A single-page application that allow users to add their To Do items. The items could be checked as completed and the completed task can be removed. Built with JavaScript, HTML and CSS

To Do list Application This is a single page application that allows users to keep track of their tasks. Users can add the task and also check the che

Micheal Oguntayo 4 Oct 14, 2022