mahammad-mostafa / delicious-meals

This is the capstone project for the second module in Microverse program. It is a group project which is about meal recipes app.

🏷️ Delicious Meals

This is the capstone project of the second module in the Microverse program.
Check the below contents for further details about this project.

📗 Contents

• Description
• Instructions
• Authors
• Future
• Contributions
• Support
• Acknowledgements
• License

📖 Description

This project is a simple meal recipes app with ES6 modules and bundled with WebPack. It consumes data from two external APIs and follows GitFlow workflow. Data is loaded with asynchronous calls using async functions & promises. Unit testing is applied during this project using Jest framework. All project files are contained in src directory & and live build in dist directory. Also config linters for (HTML / CSS3 / JavaScript) in the .github folder.

📌 Live Demo:

• See the project live from here.
• Check the presentation video from here.

📌 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
• Fixed header & footer elements with scrolling content
• 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 displayed automatically with name & date
• Reservation button opens a popup to display item details and reservations
• New reservations are displayed automatically with name & date
• Transition effects while loading both list items & popup window
• Display an animated loader during all network calls

back to top

🛠️ Instructions

You can easily download or fork this repository and work on it immadiately!

📌 Prerequisites:

• NodeJS for installing & running all packages

📌 Installation:

• Install all dependencies with npm

npm install

📌 Development:

• For live development on localhost:8080 run:

npm run start

📌 Testing:

• To run unit tests use:

npm run test

📌 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

back to top

👥 Authors

📌 Mahammad:

• GitHub
• Twitter
• LinkedIn

📌 Bruno:

• GitHub
• Twitter
• LinkedIn

📌 Felipe:

• GitHub

back to top

🔭 Future

Some additional features I may implement in the project:

• Using CSS preprocessors and their relevant loaders
• Implement two WebPack configurations for production & development

back to top

🤝🏻 Contributions

Wish to contribute to this project?
Contributions, issues, and feature requests are more than welcome!
Feel free to check the issues page too.

back to top

⭐️ Support

Like this project? Show your support by starring!

back to top

🙏🏻 Acknowledgements

I thank everyone at Microverse for guiding me through this project.

back to top

📝 License

This project is MIT licensed.

back to top