TV Maze App

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ (OPTIONAL)
• 📝 License

📖 [TV AMAZE APP ]

[TV Amaze App] TV Amaze App is a SPA app that leverages REST methods to provide users with an immersive experience in exploring and interacting with a vast collection of TV series. By incorporating likes, comments, and reservation functionalities, this app allows users to engage with their favorite shows and effectively manage their viewing schedule. Powered by ES6 modules, Webpack, babel and the utilization of async/await and Promises, TV Maze App delivers a seamless and efficient user experience. The app was built using plain javascript and express to hightlight the skills to construct SPA apps without frameworks. Moreover I used docker, docker compose and bash script to automate the deployment process in wherever the app is running. Just run the script to deploy the app in wherever cloud provider you are using and enjoy the app.

Tech Stack

HTML

CSS

Javascript

Webpack

Express

ES6 Modules

REST API

Async/await

Promises

Babel

Git

Github actions

Docker

Docker Hub

Docker Compose

Bash Script

Key Features

• [HTML & CSS Best practices]
• [Responsive Design]
• [REST API]
• [USER LIKES]
• [USER COMMENTS]
• [USER RESERVATIONS]
• [ES6 Modules]
• [Webpack Bundling ]
• [Express Server to handle routing]
• [Docker and Docker Compose]
• [Bash Script to automate deployment]
• [CI and CD Deployment with Netlify]

Series List:

TV Amaze App fetches data from the TV Maze API and displays an extensive list of TV series to users. The app employs REST methods to efficiently retrieve and present series information, including title, genre, summary, and rating. The well-organized series list provides users with a seamless browsing experience. Render different series by genre and search series by title.

Likes:

Users can express their preferences and indicate their favorite series by utilizing the "Like" feature. This functionality is achieved through REST methods, enabling users to interact with the app and curate their personal collection of liked shows. By utilizing async/await and Promises, the app ensures smooth and responsive liking functionality.

Comments Popup:

TV Amaze App enables users to engage in discussions and share their thoughts on specific TV series by leaving comments. Leveraging REST methods, users can interact with the app to post comments, fostering a community-driven environment. The implementation of ES6 modules and async/await allows for seamless handling of comment-related operations in a popup window.

(back to top)

🚀 Live Demo

• Live Demo Link

(back to top)

💻 Getting Started

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

Prerequisites

To run this project you need the following tools:

• [VS Code ]
• [Git and GitHub ]
• [Nodejs ]
• [Express ]
• [docker and docker compose ]
• [Docker Hub ]
• [Bash Script ]
• [openssl to generate self signed certificates ]
• [Webpack Installation ]
• [CI CD Netlify Bot Instalation]
• [Nodejs ]

Setup

Clone this repository to your desired folder:

 cd TV-AMAZE-APP
 git clone git@github.com:alyconr/TV-AMAZE-APP.git

Install

Install this project with:

Lighthouse run

    npm install -g @lhci/cli@0.7.x

Webhint:

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

Stylelint:

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

Eslint

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

Webpack

     npm init -y
     npm install webpack webpack-cli --save-dev

Webpack Css loader

     npm install --save-dev style-loader css-loader

Webpack html loader

     npm install --save-dev html-loader

Webpack html plugin

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

Webpack dev server

     npm install --save-dev webpack-dev-server

Babel Dependency loader

     npm install --save-dev babel-loader

Minify CSS: To reduce the size of your CSS file by removing unnecessary characters such as whitespace and comments.

     npm install --save-dev css-minimizer-webpack-plugin

Split Js : If your JS file is large, splitting it into smaller modular files can help improve the loading time.

     npm install --save-dev terser-webpack-plugin

Split CSS: If your CSS file is large, splitting it into smaller modular files can help improve the loading time.

     npm install mini-css-extract-plugin --save-dev

Babel core

     npm install --save-dev @babel/core @babel/preset-env

Express and body-parser

     npm install --save express body-parser

Concurrent, the npm package for running multiple commands in parallel

     npm install --save-dev concurrently

Usage

To run locally run the following command:

Development mode

    npm run build-dev
    npm run devserver-reload    

Production mode

    npm run build-prod
    npm run server-prod

Run tests

To run tests, run the following command:

To test the Stylelint linter:

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

To test the Webhint:

    npx hint .

To test the ESLint linter:

    npx eslint .

Deployment

Local deployment using Docker:

In root project folder run the following command:

    docker  build -t TV-Maze-App nginx/Dockerfile .

Then run the following command:

    docker -it --name tvapp  run -p 443:443 -p 80:80 -v ./dist:/usr/share/nginx/html -d TV-Maze-App

Be sure to replace the path of your project dist folder

If you want to use docker hub image repository, run the following command:

    docker pull 810129/tvapp
    docker -it --name tvapp  run -p 443:443 -p 80:80 -v ./dist:/usr/share/nginx/html -d 810129/tvapp

Local deployment using Docker-compose:

In root folder run the following command:

    docker compose up -d

The above command will deploy the app in localhost on port 443 and 80 through dockerized nginx webserver.

Cloud Production deployment:

In root folder run the following command:

    bash deployment.sh -u username -i ipaddress -d Namefolder -e environment

The arguments are:

• -u username
• -i ipaddress
• -d Namefolder
• -e environment (prod or dev) respectively

With the last script, the app will be deployed to any cloud provider you want to use, you only need the IP address and the right permission to access it.

(back to top)

👥 Authors

JEYSSON CONTRERAS

👤 Author1

• GitHub: @alyconr
• LinkedIn: LinkedIn

(back to top)

🔭 Future Features

• [Personalized Recommendations]
• [Advanced Search Filters]
• [Notifications and Reminders]

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

Write a message to encourage readers to support your project

If you like this project please give one start.

(back to top)

🙏 Acknowledgments

I would like to thank God for giving me the strength to carry out this project.

(back to top)

(back to top)

📝 License

This project is MIT licensed.

(back to top)