Final project submition

.eslintrc.json

@@ -0,0 +1,25 @@
+{
+    "env": {
+      "browser": true,
+      "es6": true,
+      "jest": true
+    },
+    "parser": "babel-eslint",
+    "parserOptions": {
+      "ecmaVersion": 2018,
+      "sourceType": "module"
+    },
+    "extends": ["airbnb-base"],
+    "rules": {
+      "no-shadow": "off",
+      "no-param-reassign": "off",
+      "eol-last": "off",
+      "import/extensions": [ 1, {
+        "js": "always", "json": "always"
+      }]
+    },
+    "ignorePatterns": [
+      "dist/",
+      "build/"
+    ]
+  }

.github/workflows/linters.yml

@@ -0,0 +1,63 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  lighthouse:
+    name: Lighthouse
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Lighthouse
+        run: npm install -g @lhci/cli@0.7.x
+      - name: Lighthouse Report
+        run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
+  webhint:
+    name: Webhint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Webhint
+        run: |
+          npm install --save-dev hint@6.x
+          [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
+      - name: Webhint Report
+        run: npx hint .
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup Stylelint
+        run: |
+          npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
+          [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
+      - name: Stylelint Report
+        run: npx stylelint "**/*.{css,scss}"
+  eslint:
+    name: ESLint
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+      - name: Setup ESLint
+        run: |
+          npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
+          [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
+      - name: ESLint Report
+        run: npx eslint .
+

.hintrc

@@ -0,0 +1,18 @@
+{
+    "connector": {
+      "name": "local",
+      "options": {
+        "pattern": ["**", "!.git/**", "!node_modules/**"]
+      }
+    },
+    "extends": ["development"],
+    "formatters": ["stylish"],
+    "hints": [
+      "button-type",
+      "disown-opener",
+      "html-checker",
+      "meta-charset-utf-8",
+      "meta-viewport",
+      "no-inline-styles:error"
+    ]
+  }

.stylelintrc.json

@@ -0,0 +1,11 @@
+{
+    "extends": ["stylelint-config-standard"],
+    "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
+    "rules": {
+      "at-rule-no-unknown": null,
+      "scss/at-rule-no-unknown": true,
+      "csstree/validator": true
+    },
+    "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css"]
+  }
+

README.md

@@ -2,41 +2,84 @@
 
 # Yuriy Chamkoriyski & Bonke Gcobo Javascript capstone project
 
-> API-based webapp
+> API-based webapp from Module 2 at Microverse
 
-# Wireframe of App
+## Wireframe requirements
 
-## The Home Page  low fidelity
+### The Home Page low fidelity
 ![Home.png](./Home.png)
 
-## The low fidelity for comment pop up page
+### The low fidelity for comment pop up page
 ![ForComments.png](./ForComments.png)
 
+## Actual screenshot
+![Screenshot](./src/Screenshot.png)
 
+## Video presentation
+[Video link](https://youtu.be/QOhLsW7cuFU)
 
 ## 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. 
+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](https://www.notion.so/Involvement-API-869e60b5ad104603aa6db59e08150270) 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)
+ 1) Copy this Link `https://github.com/Hombre2014/JS_Capstone_project.git`
  2) Open your terminal or command line
- 3) [git clone](https://github.com/Hombre2014/JS_Capstone_project.git)
- 4) Open the folder with your code editor
+ 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
+- Technologies used: Git, webpack, Jest
 
 ## Live Demo
 
-- Not deployed yet.
+- [Live demo link](https://chamkoriyski.me/JS_Capstone_project/dist)
 
 ## Getting Started
 
@@ -45,7 +88,7 @@ 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)
+- A text editor (preferably Visual Studio Code)
 - Browser
 
 ### Setup
@@ -59,33 +102,40 @@ To get a local copy up and running follow these simple example steps.
 
 ### Usage
 
-- Clone the repository using "git clone git@github.com:Hombre2014/Webpack-Setup.git"
-- Change directory into the project folder
-- Run npm install
-- Run npm start
+- 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
 
-- N/A
+- 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
 
-## Author
+## Authors
 
 👤 **Yuriy Chamkoriyski**
 
 - GitHub: [@Hombre2014](https://github.com/Hombre2014)
 - Twitter: [@Chamkoriyski](https://twitter.com/Chamkoriyski)
 - LinkedIn: [axebit](https://linkedin.com/in/axebit)
 
+👤 **Bonke Gcobo**
+
+- GitHub: [@BonkeGcobo](https://github.com/BonkeGcobo)
+- Twitter: [@bonkegcobo](https://twitter.com/bonkegcobo)
+- LinkedIn: [Bonke Gcobo](https://www.linkedin.com/in/bonke-gcobo-28a763125/)
+
 ## 🤝 Contributing
 
 Contributions, issues, and feature requests are welcome!
 
-Feel free to check the [issues page](https://github.com/Hombre2014/Webpack-Setup/issues).
+Feel free to check the [issues page](https://github.com/Hombre2014/JS_Capstone_project.git/issues).
 
 ## Show your support
 

dist/index.html

@@ -1,11 +1,56 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Webpack Exercise</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script src="https://kit.fontawesome.com/f83a08773e.js" crossorigin="anonymous"></script>
+  <link href="http://fonts.cdnfonts.com/css/cocogoose" rel="stylesheet">
+  <link href="//db.onlinewebfonts.com/c/796e2db2256ddfab47394211f41ac410?family=Acumin+Pro" rel="stylesheet"
+    type="text/css" />
+  <title>Movies</title>
 <script defer src="main.js"></script></head>
+
 <body>
-    <h1>Hello webpack!</h1>
+  <header class="header-section">
+    <div class="appName">
+      <h1 class="appTitle">Movie Library</h1>
+    </div>
+
+    <div class="botHeader">
+      <div class="logoContainer">
+      </div>
+
+      <ul class="menuItems">
+        <li>Movies <span class="movies-counter"></span></li>
+        <li>Shows</li>
+        <li>Series</li>
+      </ul>
+    </div>
+  </header>
+  <hr>
+  <div class="modal"></div>
+  <main class="Shows">
+  </main>
+
+  <footer class="footer">
+    <h3>Developed by</h3>
+    <div class="dev">
+      <h3>Bonke</h3>
+      <div class="media-links">
+        <a href="https://www.linkedin.com/in/bonke-gcobo-28a763125/" title="LinkedIn"><i class="fab fa-linkedin-in fa-1x"></i></a>
+        <a href="https://github.com/BonkeGcobo"><i class="fab fa-github-square fa-1x" title="Github"></i></a>
+      </div>
+    </div>
+    <span id="and">&</span>
+    <div class="dev">
+      <h3>Yuriy</h3>
+      <div class="media-links">
+        <a href='https://www.linkedin.com/in/axebit/'><i class="fab fa-linkedin-in fa-1x" title="LinkedIn"></i></a>
+        <a href="https://github.com/Hombre2014"><i class="fab fa-github-square fa-1x" title="Github"></i></a>
+      </div>
+    </div>
+  </footer>
 </body>
+
 </html>