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

Overview

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 you'd like to watch. You're welcome to visit the Live Demo link provided to test it out yourself :)

screenshot

We have used the tvMaze api to get ourselves data pertaining to several movies and then store the user's reservations and comments regarding those movies using the involvement api.

Built With

  • HTML / SASS / JavaScript / Webpack / Jest

Live Demo

Video presentation

Getting Started

To launch the project locally:

Step 1:

  • Clone this repo locally using git in the command line and the following command

    git clone https://github.com/zhadier/Rent-A-Movie

  • Alternatively, you can just download the complete zip file and extract the folder in your directory

Step 2:

  • Open the cloned/extracted folder in a code editor of your choice
  • Run npm install (npm and node are prerequisites)(downloads all dependencies)
  • Run npm start (To show the results in live server)
  • Run npm test (To see jest testing results)

Authors

👤 Zeeshan Haider

👤 *Gaby Sanchez

🤝 Contributing

Contributions, issues, and feature requests are welcome and highly encouraged! We feel that your input is what helps us grow so you're always Welcome :)

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project! We would love to hear your thoughts and ideas 🖤

Acknowledgments

  • The Involvement and Tvmaze apis were used to make this project

📝 License

This project is MIT licensed.

Comments
  • Javascript Capstone

    Javascript Capstone

    Project

    • Create the home page for movies getting information from API TVMaze.
    • Create comments popup getting information from involvement API.
    • Save new comments into involvement API.
    • Create reservations popup getting information from involvement API.
    • Save new reservations into involvement API.
    • Create a counter function to get the number of comments and/or reservations to display it on its pages.
    • Test the counter function of comments using Jest.
    • Use of Gitflow.
    • Use of webpack.
    • Use of JavaScript testing library (Jest).
    opened by gabyse1 0
  • Documentation

    Documentation

    The following changes were implemented in this PR.

    • Added documentation and loom video

    Thanks for taking the time to review the project

    • I personally love optional suggestions so please do leave some 😄
    opened by zhadier 0
  • Multiple sections

    Multiple sections

    The following changes were implemented in this PR.

    • Added About and BluRay sections to the website

    Thanks for taking the time to review the project

    • I personally love optional suggestions so please do leave some 😄
    opened by zhadier 0
  • All items counter

    All items counter

    The following changes were implemented in this PR.

    • A counter function to count all movies on the homepage.
    • Showed total items on the page using the counter function
    • Added slight styling to the header
    • Added testing for the counter function

    Thanks for taking out the time to review this project 🧨

    It really is appreciated :)

    • Note: I personally love optional suggestions so please do leave some 😄
    opened by zhadier 0
  • Display comments

    Display comments

    Changes to the project

    • Update comments layout and its styles
    • Create functions to consume involvement API for comments.
    • Create functions to display comments and add new comments
    opened by gabyse1 0
  • Like functionality

    Like functionality

    The following changes were implemented in this branch

    • Getting data from the Involvement API to show the item likes and combines them with the data from the base API.
    • 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.
    • Styling for the like button
    • Resolution of conflict issues

    Thanks for taking out the time to review this project 🧨

    It really is appreciated :) ❤️

    • Note: I personally love optional suggestions so please do leave some 😄
    opened by zhadier 0
  • Comments interface

    Comments interface

    Changes to the project

    • Create a basic layout for the modal window.
    • Add basic styles to the modal window.
    • Get movie data from TVMaze API using async functions.
    • Create even listener to call comments modal window from home page.
    opened by gabyse1 0
  • Display homepage

    Display homepage

    The following changes were implemented in this branch

    • added fontawesome for like icon
    • update index.js to display cards"
    • added functions to get data from tvMaze api
    • added functionality to display movies from list of movies
    • added basic styling to home page

    Thanks for taking out the time to review this project 🧨

    It really is appreciated :) ❤️

    • Note: I personally love optional suggestions so please do leave some 😄
    opened by zhadier 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 zhadier 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 zhadier 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 zhadier 0
Owner
Zeeshan Haider
Electrical Engineer | Front-end developer BS EE from NUST CEME | JavaScript | C++ | Python | Chess & Football enthusiast | Open to new opportunities
Zeeshan Haider
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
Tasty is a website that displays a number of recipes and allows users to leave likes and comments on their favourite meals.

Tasty Tasty is a website that displays a number of recipes and allows users to leave likes and comments on their favourite meals. Requirements Build a

Manel Hammouche 5 Aug 3, 2022
A website which displays a list of movies and allows the user to leave a comment and like.

Movie-website Description Mobile Version Desktop Version "Movie-website" is a website which display movies from TVmaze api allowing users to like and

Ushindi Gedeon 3 Nov 7, 2022
A NodeJs service which allows you to create a movie based on it's title (additional movie details will be fetched) and fetch all created movies.

movies-api A NodeJs service which allows you to create a movie based on it's title (additional movie details will be fetched) and fetch all created mo

Ugochukwu Ejiogu 2 Mar 27, 2022
Application for organizing, rating, and sharing TV series and movies that you are watching or would like to watch.

Watch This! We're living in an age of virtually unlimited ntertainment options, and keeping up with it all can be a little overwhelming. Using the Wat

Brian Bagley 2 Jun 13, 2022
An open source movie library platform for viewing movie info and saving movies for later.

GoodWatch An open source movie library platform for viewing movie info and saving movies for later. How to get started? Fork and clone the repo. Then

null 13 Apr 28, 2022
🦉The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave.

?? The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave. How

Guilherme Assemany 18 Feb 10, 2022
A free e-library for developer to read and upload ebooks they would like to share with the community and help other developers grow.

Techlib ?? Techlib A free e-library for developer to read and upload ebooks they would like to share with the community and help other developers grow

Paschal 20 Dec 15, 2022
zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

Marto.eth 10 Aug 25, 2022
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
This project uses JavaScript to request resources from PokeApi and Involvement API to display a stunning website about Pokemons.

POKEDEX CAPSTONE Web page used to retrieve information about Pokemons using Pokeapi v2 This project implements the involvement API and the Pokeapi to

Leonardo Pareja Pareja 7 Jun 13, 2022
This website utilizes JavaScript, HTML, and CSS to allow the user to create a to-do list that they can add to, remove from, and edit.

todo Description the project. "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to

Emily Robertson 8 Jul 23, 2022
A web applicaton called 'MOVTIME' where you can come to stream movies by consuming the TMDB movie API

End result Click here : https://movtime-movie-app.netlify.app/ Figma design File Click here: https://www.figma.com/file/4IbpmTU6jtpRKdpbFmt4i8/Web-Des

Eniola Odunmbaku 12 Nov 11, 2022
Keep track of the movies you've watched and create your own movies lists!

Cinematek Keep track of the movies you've watched and create your own movies lists! All the movies informations are provided by The Movie Database Dep

Caroline Oliveira 8 May 23, 2022
To-do list" is an app that helps to organize your day. the user simply lists the things that needs to done and the app allows the to mark them as complete when they are done. Made with webpack, JavaScript ES6 , HTML 5 and CSS 3.

Todo-list project This is a Microverse project that entails a to-do-list. Built With HTML CSS Javascript Webpack VS code Live Demo (if available) Live

Youta Lactio Christabelle 10 Aug 3, 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
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