Meal Gallery is an innovative app that allows you to discover a variety of delicious meals from around the world. Whether you're an experienced chef or simply a food enthusiast, this app is perfect for you.
- Built With 🛠
- Key Features 🏷️
- Screenshot 📷
- Live Demo🚀
- Prerequisites 🧱
- Setup ⚙️
- Install 🏗️
- Usage 📂
- Author 👤
- Contributing 🤝
- Show your support 🌟
- Acknowledgements 🙏
- FAQ ❓
- License 📝
- HTML5 markup to build raw structure of this web page
- CSS3 custom properties, FlexBox, Grid to make the website visually attractive
- Javascript
- Linters for coding convention and coding formating
- Webpack
The Meal Gallery app showcases mouthwatering images of appetizing dishes accompanied by detailed descriptions. You can explore various categories such as main courses, desserts, regional specialties, and much more.
Below is an overview of the app.
This project is hosted on GitHub pages, so if you want to check it online, please click 😊 here.
This is our video presentation.
In order to run this project you need:
- A Github account
- Node JS
- Webpack
- A web browser to view output e.g Microsoft Edge.
- An IDE e.g Visual studio code.
- A terminal.
Clone this repository:
git clone https://github.com/mariegrace31/Meal_Gallery.git
Navigate to the folder
cd Meal_Gallery
Checkout the branch
git checkout main
Install all dependencies:
npm installRun the following code to fixed possible JavaScript linter errors:
npx eslint . --fix
Open page in browser
$ open dist/index.htmlYou can reach us using these following links:
- Twitter: @nelly_telli
- LinkedIn: Nelly T.:
- Twitter: @mariegracebmg
- LinkedIn: Marie Grâce Bahati
If you have suggestions 📝, ideas 🤔, or bug reports 🐛, please feel free to open an issue on GitHub. Remember, every contribution, no matter how big or small, makes a difference.
Thank you for taking the time to explore my GitHub project! Your support means a lot to ux. If you find my project valuable and would like to contribute, here are a few ways you can support me:
-
Star the project ⭐️: Show your appreciation by starring this GitHub repository. It helps increase visibility and lets others know that the project is well-received.
-
Fork the project 🍴 🎣: If you're interested in making improvements or adding new features, feel free to fork the project. You can work on your own version and even submit pull requests to suggest changes.
-
Share with others 🗺️: Spread the word about this project. Share it on social media, mention it in relevant forums or communities, or recommend it to colleagues and friends who might find it useful.
We would like to express our sincere gratitude to Microverse, the dedicated reviewers, and collaborators. Your unwavering support, and feedbacks have played an immense role in making this journey a resounding success. Thank you for being an integral part of our achievements.
-
What is Webpack
- Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included.
-
Why should we use Webpack
- Webpack goes through your package and creates what it calls a dependency graph which consists of various modules which your webapp would require to function as expected. Then, depending on this graph, it creates a new package which consists of the very bare minimum number of files required, often just a single bundle.js file which can be plugged in to the html file easily and used for the application. It makes our code shorter, cleaner and compiles different javascript module.
This project is MIT licensed.