JavaScript capstone project

.babelrc.json

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

.eslintrc.json

@@ -0,0 +1,26 @@
+{
+ "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"
+ }],
+ "import/no-cycle": [2, { "ignoreExternal": true }]
+ },
+ "ignorePatterns": [
+ "dist/",
+ "build/"
+ ]
+}

.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/[email protected]
+ - 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 [email protected]
+ [ -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 [email protected] [email protected] [email protected] [email protected]
+ [ -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 [email protected] [email protected] [email protected] [email protected]
+ [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
+ - name: ESLint Report
+ run: npx eslint .
+ 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 @@
+node_modules

.hintrc.json

@@ -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,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/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
+}

README.md

@@ -0,0 +1,167 @@
+<a name="title"></a>
+
+<!-- TITLE -->
+
+# 🏷️ Delicious Meals App
+
+This is the capstone project in the second module of the **Microverse** program.
+<br/>
+Check the below contents for further details about this project.
+
+<!-- CONTENTS -->
+
+# 📗 Contents
+
+- [Description](#description)
+- [Instructions](#instructions)
+- [Authors](#authors)
+- [Future](#future)
+- [Contributions](#contributions)
+- [Support](#support)
+- [Acknowledgements](#acknowledgements)
+- [License](#license)
+
+<!-- DESCRIPTION -->
+
+<a name="description"></a>
+
+# 📖 Description
+
+This project is a simple meal recipes app with `ES6` modules and bundled with `WebPack`.
+It consumes data from two external `API`s and follows `GitFlow` workflow.
+Data is loaded with asynchronous calls using `async` functions & `promises`.
+Unit testing is applied during this project using `Jest` framweork.
+All project files are contained in `src` directory.
+Also config linters for (`HTML` / `CSS3` / `JavaScript`) in the `.github` folder.
+
+📌 **Live Demo:**
+- See the project live from [here](https://mahammad-mostafa.github.io/delicious-meals-app/dist).
+- Check the presentation video from [here](https://drive.google.com/file/d/1iQXqlGEEQ7VRIuIBgGGwm4gcyA74OB6O).
+
+📌 **Tech Stack:**
+- Page strucutre is built with `HTML5`
+- Styling is built with `CSS3`
+- Dynamic content is built with `JavaScript`
+- Bundling is done with `WebPack`
+- Unit testing is done with `Jest`
+
+📌 **Key Features:**
+- Single page app with all content loaded dynamically
+- Responsive layout with all screen sizes
+- Meal recipes data is fetched from TheMealDB api
+- Interaction data is fetched from involvement api
+- Each item displays (thumbnail image / recipe title / total likes)
+- Two buttons available (comments / reservations)
+- Comment button opens a popup to display item details and comments
+- New comments are displyed automatically with name & date
+- Reservation button opens a popup to display item details and reservations
+- New reservations are displyed automatically with name & date
+
+<p align="right"><a href="#title">back to top</a></p>
+
+<!-- INSTRUCTIONS -->
+
+<a name="instructions"></a>
+
+# 🛠️ Instructions
+
+You can easily download or fork this repository and work on it immadiately!
+
+📌 **Prerequisites:**
+- `NodeJS` for installing & running all packages 
+
+📌 **Setup:**
+- Install all dependencies with `npm`
+```
+npm install
+```
+- For live development on `localhost:8080` run:
+```
+npm run start
+```
+
+📌 **Deployment:**
+- You can deploy this project by uploading files in the `dist` folder to a live server.
+- Create the distribution build using this command:
+```
+npm run build
+```
+
+<p align="right"><a href="#title">back to top</a></p>
+
+<!-- AUTHORS -->
+
+<a name="authors"></a>
+
+# 👥 Authors
+
+📌 **Mahammad:**
+- [GitHub](https://github.com/mahammad-mostafa)
+- [Twitter](https://twitter.com/mahammad_mostfa)
+- [LinkedIn](https://linkedin.com/in/mahammad-mostafa)
+
+📌 **Bruno:**
+- [GitHub](https://github.com/kambereBr)
+- [Twitter](https://twitter.com/kambereBr)
+- [LinkedIn](https://www.linkedin.com/in/bruno-kambere-399447138/)
+
+📌 **Felipe:**
+- [GitHub](https://github.com/Felipe-Perez-Ferraro)
+
+<p align="right"><a href="#title">back to top</a></p>
+
+<!-- FUTURE -->
+
+<a name="future"></a>
+
+# 🔭 Future
+
+Some additional features I may implement in the project:
+- [ ] Using `CSS` preprocessors and their relevant loaders
+- [ ] Implement two `WebPack` configurations for production & development
+
+<p align="right"><a href="#title">back to top</a></p>
+
+<!-- CONTRIBUTIONS -->
+
+<a name="contributions"></a>
+
+# 🤝🏻 Contributions
+
+Wish to contribute to this project?
+<br/>
+Contributions, issues, and feature requests are more than welcome!
+<br/>
+Feel free to check the [issues](../../issues) page too.
+
+<p align="right"><a href="#title">back to top</a></p>
+
+<!-- SUPPORT -->
+
+<a name="support"></a>
+
+# ⭐️ Support
+
+Like this project? Show your support by starring!
+
+<p align="right"><a href="#title">back to top</a></p>
+
+<!-- ACKNOWLEDGEMENTS -->
+
+<a name="acknowledgements"></a>
+
+# 🙏🏻 Acknowledgements
+
+I thank everyone at **Microverse** for guiding me through this project.
+
+<p align="right"><a href="#title">back to top</a></p>
+
+<!-- LICENSE -->
+
+<a name="license"></a>
+
+# 📝 License
+
+This project is [MIT](LICENSE.md) licensed.
+
+<p align="right"><a href="#title">back to top</a></p>

dist/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Delicious Meals</title><script defer="defer" src="main.js"></script></head><body><header><nav class="container"><h1 id="logo"><span class="icon-logo"></span>Delicious Meals</h1><button class="icon-menu" type="button"></button><ul id="menu"></ul></nav></header><main class="container"><section id="list"><ul id="list-block"></ul></section><section id="popup"><div id="popup-block"><button id="popup-close" class="icon-close" type="button"></button> <img id="popup-image" alt=""/><h2 id="popup-title"></h2><p id="popup-description"></p><h3 id="popup-list-title"></h3><ul id="popup-list"></ul><h3 id="popup-form-title"></h3><form id="popup-form-comment" class="popup-form"><input type="hidden" name="item_id"/> <input name="username" placeholder="your name" required/> <textarea name="comment" placeholder="your insights" required></textarea> <button type="submit">Comment</button></form><form id="popup-form-reservation" class="popup-form"><input type="hidden" name="item_id"/> <input name="username" placeholder="your name" required/> <input type="date" name="date_start" placeholder="start date" required/> <input type="date" name="date_end" placeholder="end date" required/> <button type="submit">Reserve</button></form></div></section><section id="loader"><span class="icon-loader"></span></section></main><footer><p class="container">Created by Microverse under CC license</p></footer></body></html>