MazTV

📗 Table of Contents

• 📖 About the Project
  • 🛠️ Built With
  • Tech Stack
  • Key Features
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐ Show your support
• 🙏 Acknowledgements
• 📝 License

📖 MazTV: web page that have diferent series obteins from a API

MazTV showcases TV series, enabling user interaction via likes and comments. Objective: Design home page interfaces and comments popup.

🛠️ Built With

Tech Stack

• HTML.
• CSS.
• JAVASCRIPT.

Key Features

• Dynamic Home Page: The web application displays a list of TV series retrieved from a selected API, along with their respective like counts using the Involvement API.
• Like Interaction: Users can interact with the series by clicking the "Like" button. The likes are recorded in the Involvement API, and the screen updates in real-time to reflect the changes.
• Comments Popup: A comments popup allows users to view and post comments for each TV series. The comments are fetched from the selected API, and users can submit new comments, which are then recorded in the Involvement API.
• Counters: Counters are implemented to display the number of series and comments in real-time on the home page and the comments popup, respectively.

(back to top)

💻 Getting Started

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

Prerequisites

In order to run this project you need the following tools:

• A modern web browser (Chrome, Firefox, Safari, Edge).
• An IDE (e.g.: Vscode, Sublime Text,...).
• A terminal (Git Bash).

Setup

Clone this repository to your desired folder by running the following commands in your terminal:

  cd your-prefered-folder-name

  git clone git@github.com:jlberbesi/JS-GROUP-CAPSTONE-PROJECT.git

Install

• Install this project with:

  cd Capstone-module2-Javacript

  npm init -y

  npm install --save-dev hint@7.x

  npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x

  npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x

  npm install html-webpack-plugin --save-dev

Usage

To run the project, execute the following command:

  Open the project in live server (VS Code) or Open the index.html file on your browser.

Run Linters tests

To run tests, run the following command:

  npx hint . --fix

  npx stylelint "**/*.{css,scss}" --fix

  npx eslint . --fix

🚀 Live Demo

• https://jlberbesi.github.io/JS-GROUP-CAPSTONE-PROJECT/dist/

(back to top)

👥 Authors

👤 José Luis Berbesi

• GitHub: @jlberbesi
• Twitter: @imberbesi
• LinkedIn: Jose Luis Berbesi

👤 Carlos Zambrano

• GitHub: @CarlosZ96
• Twitter: @ELZambrano2
• LinkedIn: @carlos-zambrano-845406173

(back to top)

🔭 Future Features

• Enhance the user experience by incorporating visually captivating designs and dynamic animations.
• Incorporate search and filtering features to simplify browsing through the TV series collection.

(back to top)

🤝 Contributing

All contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐ Show your support

If you like this project, please support me with a like or a star.

(back to top)

🙏 Acknowledgments

Thanks to my learning partners and the staff at Microverse.

(back to top)

📝 License

This project is MIT licensed.