Restaurant System: Implementing the Capstone Project

.babelrc

@@ -0,0 +1,9 @@
+{
+    "env": {
+        "test": {
+            "plugins": [
+                "@babel/plugin-transform-modules-commonjs"
+            ]
+        }
+    }
+}

.eslintrc.json

@@ -0,0 +1,27 @@
+{
+    "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/",
+      "node_modules/",
+      "babel.config.js"
+    ]
+  }

.github/workflows/linters.yml

@@ -0,0 +1,70 @@
+name: Linters
+
+on: pull_request
+
+env:
+  FORCE_COLOR: 1
+
+jobs:
+  lighthouse:
+    name: Lighthouse
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+      - name: Setup Lighthouse
+        run: npm install -g @lhci/cli@0.11.x
+      - name: Lighthouse Report
+        run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
+  webhint:
+    name: Webhint
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.x"
+      - name: Setup Webhint
+        run: |
+          npm install --save-dev hint@7.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-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.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-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: "18.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 ./src/**/*.js
+  nodechecker:
+    name: node_modules checker
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - name: Check node_modules existence
+        run: |
+          if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+coverage/

.hintrc

@@ -0,0 +1,18 @@
+{
+    "connector": {
+      "name": "local",
+      "options": {
+        "pattern": ["**", "!.git/**", "!dist", "!coverage", "!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,20 @@
+{
+    "extends": ["stylelint-config-standard"],
+    "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
+    "rules": {
+      "at-rule-no-unknown": [
+        true,
+        {
+          "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
+        }
+      ],
+      "scss/at-rule-no-unknown":  [
+        true,
+        {
+          "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
+        }
+      ],
+      "csstree/validator": true
+    },
+    "ignoreFiles": ["build/**", "dist/**", "coverage/**", "node_modules/", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
+  }

README.md

@@ -1,2 +1,231 @@
-# Restaurant-System
-An API based webapp that uses MealsDB.
+Meals
+<a name="readme-top"></a>
+
+<div align="center">
+    <img src="icons/meals.png" alt="logo" width="140"  height="auto" />
+    <br/>
+  <h3><b>Restaurant Management System</b></h3>
+</div>
+
+<!-- TABLE OF CONTENTS -->
+
+# 📗 Table of Contents
+
+- [📖 About the Project](#about-project)
+  - [🛠 Built With](#built-with)
+    - [Tech Stack](#tech-stack)
+    - [Key Features](#key-features)
+  - [🚀 Live Demo](#live-demo)
+  - [📹 Video Presentation](#video-presentation)
+- [💻 Getting Started](#getting-started)
+  - [Setup](#setup)
+  - [Prerequisites](#prerequisites)
+  - [Install](#install)
+  - [Usage](#usage)
+  - [Run tests](#run-tests)
+  - [Deployment](#deployment)
+- [👥 Authors](#authors)
+- [🔭 Future Features](#future-features)
+- [🤝 Contributing](#contributing)
+- [⭐️ Show your support](#support)
+- [🙏 Acknowledgements](#acknowledgements)
+- [📝 License](#license)
+
+<!-- PROJECT DESCRIPTION -->
+
+# 📖 Meals Project <a name="about-project"></a>
+
+**Restaurant Management System** displays a number of recipes retrieved from the TheMealDB. A user can also leave likes and comments on a specific recipe. All data is preserved thanks to the external [Involvement API](https://microverse.notion.site/Leaderboard-API-service-24c0c3c116974ac49488d4eb0267ade3). 
+
+## 🛠 Built With <a name="built-with"></a>
+- [x] HTML
+- [x] CSS
+- [x] ES6
+- [x] Webpack
+- [x] External APIs ([TheMealDB](https://www.themealdb.com/api.php) and [Involvement API](https://microverse.notion.site/Leaderboard-API-service-24c0c3c116974ac49488d4eb0267ade3))
+- [x] Jest
+
+### Tech Stack <a name="tech-stack"></a>
+
+<details>
+  <summary>Client</summary>
+  <ul>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a></li>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a></li>
+    <li><a href="https://www.javascript.com/">ES6</a></li>
+    <li><a href="https://webpack.js.org/">Webpack</a></li>
+    <li><a href="https://www.themealdb.com/api.php">TheMealDB API</a></li>
+  </ul>
+</details>
+<!-- Features -->
+
+### Key Features <a name="key-features"></a>
+
+- Display all recipes from the TheMealDB API.
+- Show the number of recipes in the website.
+- Like a recipe.
+- Show the number of likes on a recipe.
+- Leave user comments on a recipe.
+- Display the number of recipes.
+
+<!-- ![Screenshot](./images/Screenshot%202.png) -->
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- LIVE DEMO -->
+
+## 🚀 Live Demo <a name="live-demo"></a>
+
+- [Live Demo](https://rmiyoyo.github.io/Restaurant-System/)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- VIDEO PRESENTATION -->
+
+## 📹 Video Presentation <a name="video-presentation"></a>
+
+- [Video Presentation](https://drive.google.com/file/d/1GLGXQFNTHjPoIUBMbBX0e0LPXIo6jzvr/view?usp=sharing)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- GETTING STARTED -->
+
+## 💻 Getting Started <a name="getting-started"></a>
+
+To get a local copy up and running, follow these steps.
+
+### Prerequisites
+
+In order to run this project you need:
+
+- A Chrome browser
+- Node
+- npm
+
+### Setup
+
+Clone this repository to your desired folder:
+
+
+```sh
+cd my-folder
+git clone git@github.com:rmiyoyo/Restaurant-System.git
+```
+
+### Install
+
+Install the prerequisites this project using:
+
+```sh
+cd Restaurant-System
+```
+```bash
+npm start
+```
+
+### Usage
+
+To run the project:
+
+```bash
+npm install
+```
+
+### Run tests
+
+To run tests after setting up the linters, run the following command:
+
+```sh
+npx hint .
+```
+```sh
+npx stylelint "**/*.{css,scss}"
+```
+```bash
+npx eslint .
+```
+
+<!--
+Example command:
+
+```sh
+  bin/rails test test/models/article_test.rb
+```
+--->
+
+### Deployment
+
+You can deploy this project using:
+
+- Run index.html on your preferred browser.
+
+<!--
+Example:
+
+```sh
+
+```
+ -->
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- AUTHORS -->
+
+## 👥 Authors <a name="authors"></a>
+
+👤 **Raphael Miyoyo**
+
+- GitHub: [Raphael Miyoyo](https://github.com/rmiyoyo)
+- Twitter: [@r_miyoyo](https://twitter.com/r_miyoyo)
+- LinkedIn: [LinkedIn](https://linkedin.com/in/raphael-miyoyo)
+
+## 👥 Authors <a name="authors"></a>
+
+👤 **Stanley Osagie Ramos**
+
+- GitHub: [Stanley Osagie Ramos](https://github.com/sagieramos)
+- Twitter: [@sagieramos](https://twitter.com/sagieramos)
+- LinkedIn: [LinkedIn](https://www.linkedin.com/in/sagieramos/)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- FUTURE FEATURES -->
+
+## 🔭 Future Features <a name="future-features"></a>
+
+- [ ] **Deploy to a live server**
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- CONTRIBUTING -->
+
+## 🤝 Contributing <a name="contributing"></a>
+
+Contributions, issues, and feature requests are welcome!
+
+Feel free to check the [issues page](../../issues/).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- SUPPORT -->
+
+## ⭐️ Show your support <a name="support"></a>
+
+If you like this project, create a pull request or hit us up on [@r_miyoyo](https://twitter.com/r_miyoyo) and [@sagieramos](https://twitter.com/sagieramos)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- ACKNOWLEDGEMENTS -->
+
+## 🙏 Acknowledgments <a name="acknowledgements"></a>
+
+- We appreciate you for having a look at our project! :100:
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- LICENSE -->
+
+## 📝 License <a name="license"></a>
+
+- This project is [MIT](./LICENSE) licensed. </br>
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>