Feature/merges

MIT.md

@@ -0,0 +1,7 @@
+## Copyright 2023, Hamid & Mershark
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this project and associated documentation files, to deal in the project without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the project, and to permit persons to whom the project is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the project.
+
+THE PROJECT IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE project OR THE USE OR OTHER DEALINGS IN THE PROJECT.

README.md

@@ -1,3 +1,6 @@
+
+![Capstone2](https://github.com/mershark/Microverse-capstone-2/assets/113654948/4509b1ae-3485-43cc-8ebb-b8898ff65b7a)
+
 <a name="readme-top"></a>
 
 <div align="center">
@@ -29,25 +32,67 @@
 - [📝 License](#license)
 
 
-# 📖 Set Up Project With Webpack <a name="about-project"></a>
+# 📖 Microverse Capstone Project 2 <a name="about-project"></a>
+
+> In our JavaScript capstone project, we built a dynamic web application using an external [API](https://www.themealdb.com/api.php). The webapp featured a home page with a list of "likeable" items, a comments popup for more information. We followed best JavaScript practices, used ES6 syntax, modules, and webpack. Our project included unit tests, code reviews, and integrated the Involvement API for user interactions.
 
-In this project I build a simple yet powerful webpack boilerplate, which can be used as a starting point in a project. 
+## Built With
 
-## 🛠 Built With <a name="built-with"></a>
+- HTML
+- CSS
+- JAVASCRIPT
 
 ### Tech Stack <a name="tech-stack"></a>
 
+> 
+
+<details>
+  <summary>Markup Language</summary>
+  <ul>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a></li>
+  </ul>
+</details>
+
+<details>
+<summary>Style</summary>
+  <ul>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a></li>
+  </ul>
+</details>
+
+<details>
+<summary>Layout</summary>
+  <ul>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
+  </ul>
+</details>
+
+<details>
+<summary>Interaction and Dynamic HTML</summary>
+  <ul>
+    <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">Javascript</a></li>
+  </ul>
+</details>
+
+<details>
+<summary>Module Bundler</summary>
+  <ul>
+    <li><a href="https://webpack.js.org/">Webpack</a></li>
+  </ul>
+</details>
+
 <details>
-  <summary>Client</summary>
+<summary>Testing</summary>
   <ul>
-    <li><a href="">HTML, CSS and JavaScript</a></li>
+    <li><a href="https://jestjs.io/docs/getting-started">Jest</a></li>
   </ul>
 </details>
 
+
 ### Key Features <a name="key-features"></a>
 
-- Has HTML template to use.
-- You can view live edit in your localhost while editing.
+- **Like A Meal**
+- **Comment On A Meal**
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -57,31 +102,51 @@ To get a local copy up and running, follow these steps.
 
 ### Prerequisites
 
-In order to run this project you need:
-NPM installed
-Any code editors
+In order to run this project you need the following tools:
+- Node.js on your computer
+- Code editor e.g.: VScode
 
 ### Setup
 
-Clone this repository to your desired folder by.
-- cd my-folder
-- git clone [https://github.com/mershark/webpack-to-bundle-JavaScript]
-- cd my-project
+Clone this repository to your desired folder by running the following commands in your terminal:
 
+```sh
+  cd your-prefered-folder-name
+
+  git clone https://github.com/mershark/Microverse-capstone-2.git
+```
 
 ### Install
 
-Installation is completed once the repository and cloned into your local machine.
+- Install this project with:
+
+```sh
+  cd Microverse-capstone-2
+
+  npm install or npm i
+```
 
+- Run an optimized build for prodction:
+```
+  npm run build
+```
 
 ### Usage
 
-To run the project launch index.html in your browser
+To run the project, execute the following command:
+
+```sh
+  npm start
+
+```
 
 ### Run tests
 
 To run tests, run the following command:
-npx stylelint "**/*.{css,scss}
+
+```sh
+  npm run test
+```
 
 ### Deployment
 
@@ -90,19 +155,40 @@ You can deploy this project by transferring the files in your local repository o
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
+<!-- VIDEO WALKTHROUGH -->
+
+## 🚀 Video Walkthrough <a name="live-demo"></a>
+
+([Click here](https://drive.google.com/file/d/1_pBcQuip5oGkJKRvn-AYbmCB6UbvPWf_/view?usp=sharing))
+
+
+<!-- LIVE DEMO -->
+
+## 🚀 Live Demo Website <a name="live-demo"></a>
+
+([Click here](https://mershark.github.io/Microverse-capstone-2/dist/))
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 ## 👥 Authors <a name="authors"></a>
 
 👤 **Mershark Takyi**
 
 - GitHub: [@githubhandle](https://github.com/mershark)
-- LinkedIn: [LinkedIn](https://www.linkedin.com/in/mershark/)
+- LinkedIn: [Profile link](https://www.linkedin.com/in/mershark/)
+
+
+👤 **Hamid Azim**
+
+- GitHub: [@hamidazim321](https://github.com/hamidazim321)
+- Twitter: [@hamidazim321](https://twitter.com/hamidazim321)
 
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 ## 🔭 Future Features <a name="future-features"></a>
-- [ ] **More templates**
+- [ ] **Contacts Papge**
+- [ ] **About Page**
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
@@ -124,6 +210,7 @@ Give a ⭐️ if you like this project!
 
 - Thanks to the Microverse team for the great curriculum.
 - Thanks to the Code Reviewer(s) for the insightful feedback.
+- Thanks to our coding partners, the morning session team and standup team for their coperation.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ],
+};

dist/index.html

@@ -1 +1,29 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Wbpack Exercise</title><script defer="defer" src="index.bundle.js"></script></head><body><h1>Hello webpack!</h1></body></html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <title>My Meals</title>
+<script defer src="runtime.bundle.js"></script><script defer src="main.bundle.js"></script></head>
+<body>
+  <nav id="Navbar">
+    <div id="brand">
+      <img src="" alt="logo" id="logo">
+    </div>
+    <ul id="nav-list">
+      <li class="nav"><a href="#" id="nav-dishes">Dishes</a></li>
+      <li class="nav"><a href="#">Contacts</a></li>
+      <li class="nav"><a href="#">About</a></li>
+    </ul>
+  </nav>
+  <main id="meals"></main>
+	<footer>
+    <div>
+      <p>
+        Created by Hamid and Mershark under CC License
+      </p>
+    </div>
+  </footer>
+</body>
+</html>