CineFlix

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Tools
    • Key Features
• 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors

• 🎥 Video Summary
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ (OPTIONAL)
• 📝 License

⚔ CineFlix

CineFlix is about building group web application based on external APIs. An API is selected to provide data on popular movies on which the webapp is built around. The webapp will have 2 user interfaces:

• A home page showing a list of movies with a 'like' button attaached to it.
• A popup window with more information on the movie and also allows viewers to make comments on the movie.

🛠 Built With

Tech Stack

Frontend

• HTML
• CSS
• Linters
• GitHub Flow
• Git Flow
• Javascript
• Webpack

Tools

Code Convention, Code Analysis

• ESLint
• Webhint
• Stylelint
• Lighthouse
• node_modules checker

Version Control, CI/CD, Hosting Service

• Github Pages
• Github Actions
• Gt

IDE, Desktop Apps, Other Tools

• Visual Studio Code
• Github Desktop

Key Features

• Button Interactions (i.e. hover, etc.)
• Attractive Images & Design
• Dynamic page (data is retrieved from JSON file)
• Update DOM content using APIs

(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

In order to run this project you need:

• GitHub Account
• Git installed on your system
• Install all dependencies
• Code Editor

Setup

Clone this repository to your desired folder, write the following commands in git bash

  cd my-folder
  git clone https://github.com/davidolanrewaju/CineFlix

Usage

To run the project, execute the following command:

  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 i webpack webpack-cli webpack-dev-server --save-dev

Run tests

To run tests, run the following command:

  npx hint .
  npx stylelint "**/*.{css,scss}"
  npx eslint .
  npm run build

(back to top)

👥 Authors

👤 David Olanrewaju

• GitHub: @davidolanrewaju
• Twitter: @ola_dayve
• LinkedIn: David Olanrewaju

👤 Emmanuel Steven

• GitHub: @emmanuelsteven
• Twitter: @CjayStev
• LinkedIn: steven emmanuel

(back to top)

🎥 Video Summary

This is a video summary on the aim of the features implemented.
Click this link to get a brief introduction on CineFlix.

(back to top)

🤝 Contributing

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 hit the like button and also hit me up if you need a collaborator on any side projects you're working on.

(back to top)

🙏 Acknowledgments

Special thanks to:

• Spencer
• Bawa
• Adams for there support in completing this project.

(back to top)

❓ FAQ (OPTIONAL)

• How did you set up your project?

  • Installed all dependencies given by Microverse (stylelint, webhint, lighthouse)

• How do I clone your report for use?

  • Open git bash and enter "git clone https://github.com/davidolanrewaju/Leaderboard.git"

(back to top)

📝 License

This project is MIT licensed.

(back to top)