https://github.com/jeanbuhendwa/meal-app
The Meal app that can Send and receive data from an API that give more information about the recipe
https://github.com/jeanbuhendwa/meal-app
css3 html5 javascript webpack
Last synced: 2 months ago
JSON representation
The Meal app that can Send and receive data from an API that give more information about the recipe
- Host: GitHub
- URL: https://github.com/jeanbuhendwa/meal-app
- Owner: jeanbuhendwa
- License: mit
- Created: 2023-03-13T14:14:52.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-16T20:59:33.000Z (about 3 years ago)
- Last Synced: 2024-04-14T05:42:34.383Z (about 2 years ago)
- Topics: css3, html5, javascript, webpack
- Language: JavaScript
- Homepage: https://jeanbuhendwa.github.io/Meal-app/dist/
- Size: 403 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📗 Table of Contents
- [📖 Meal app project](#about-project)
- [🛠 Built With](#built-with)
- [Tech Stack](#tech-stack)
- [Key Features](#key-features)
- [🚀 Live Demo](#live-demo)
- [💻 Getting Started](#getting-started)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [Install](#install)
- [Usage](#usage)
- [Run tests](#run-tests)
- [Deployment](#triangular_flag_on_post-deployment)
- [👥 Authors](#authors)
- [🔭 Future Features](#future-features)
- [🤝 Contributing](#contributing)
- [⭐️ Show your support](#support)
- [🙏 Acknowledgements](#acknowledgements)
- [❓ FAQ (OPTIONAL)](#faq)
- [📝 License](#license)
> In this Meal app setup project we have developed meale app that can Send and receive data from an API. Html, Css and JavaScript project for the meal list app, using webpack and ES6 features.
> It has been written plain HTML markup with general layout of the wireframe, because we are going to implement styles in the following steps.designed the wireframe as a guide.
**[Meal app project]** is the main part of javascript project which inluded how to use Gitflow, webpack, ES6, Just test library and API.
> The main tech stack and included to apply to this project are:
Client
- Html
- CSS
- Javascript
- Webpack bundler
- HtmlWebpackPlugin
- style-loader and css-loader
- style-loader and css-loader
> This project has the following features
- design the basic structure of home page
- Popup for comments page
- like button counter
- comments counter
- [Demo Video Outlines](https://drive.google.com/file/d/17GW-uFuncroC3aTtyRXP39xRp7tFBdza/view?usp=share_link)
- [Live Demo Link](https://jeanbuhendwa.github.io/javascript-capstone/dist/)
To get a local copy up and running, follow these steps.
### Prerequisites
In order to run this project you need:
Open terminal on the same folder of the project and run:
```sh
npm install
```
Initialize npm install webpack loaclly, and install the webpack-cli
```sh
npm install webpack webpack-cli --save-dev
```
setting up HtmlWebpackPlugin
```sh
npm install --save-dev html-webpack-plugin
```
To build and run the project from /src to /dist use
```sh
npm run build
```
To run the project automatically loading up the page use
```sh
npm start
```
To Post and Get Data use one popular site like HOPPSCOTCH
```sh
navigate https://hoppscotch.io/
```
### Setup
Clone this repository to your desired folder:
```sh
cd my-folder
git clone https://github.com/jeanbuhendwa/javascript-capstone.git
```
### Install
Install this project with:
```sh
cd javascript-capstone
npm install
```
### Usage
To run the project, open index.html in /dist directory with browser
### Run tests
To run tests, run the following command:
To check for html errors run:
```sh
npx hint .
```
To check for css errors run:
```sh
npx stylelint "**/*.{css,scss}"
```
To check for js errors run:
```sh
npx eslint .
```
### Deployment
Deployed using Github Pages.
👤 **Jean Jacques Buhendwa**
- GitHub: [@jeanbuhendwa](https://github.com/jeanbuhendwa)
- Twitter: [@JeanjacqueI](https://twitter.com/JeanjacqueI)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/johnbuhendwa/)
👤 **Brhanu Hailu**
- GitHub: [@brhanuhailu](https://github.com/brhanuhailu)
- Twitter: [@tigraycountry](https://twitter.com/TigrayCountry)
- LinkedIn: [LinkedIn](https://www.linkedin.com/in/brhanu-hailu-85578a246/)
> Add function for Clear all list.
- [ ] put,Get, Post and cut data from API
- [ ] Use ES6 Modularity
Contributions, issues, and feature requests are welcome!
Feel free to check the [issues page](https://github.com/brhanuhailu/Leaderboard/issues).
> we are so excited to accept you feedback to improve my profession.
If you like this project like it.
we would like to thank Microverse organization and the mealdb api owner.
This project is [MIT](https://github.com/jeanbuhendwa/javascript-capstone/blob/dev/LICENSE) licensed.
(Check the LICENSE file)