{"id":20129245,"url":"https://github.com/bungambohlah/dicoding-webpack-webcomponent-food","last_synced_at":"2026-04-10T07:39:27.441Z","repository":{"id":109768886,"uuid":"563693979","full_name":"bungambohlah/dicoding-webpack-webcomponent-food","owner":"bungambohlah","description":"Simple food recipes app using Webpack 5 (+ Plugins) + Tailwindcss + HTML 5 Web Component ","archived":false,"fork":false,"pushed_at":"2022-11-14T01:41:47.000Z","size":1105,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-13T08:33:31.083Z","etag":null,"topics":["custom-elements","custom-elements-v1","customelements","html5","tailwindcss","web-components","webcomponent","webpack","webpack5"],"latest_commit_sha":null,"homepage":"https://foodrecipes.afif.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bungambohlah.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-09T06:07:44.000Z","updated_at":"2024-12-18T23:17:31.000Z","dependencies_parsed_at":"2023-03-21T14:35:58.665Z","dependency_job_id":null,"html_url":"https://github.com/bungambohlah/dicoding-webpack-webcomponent-food","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"taniarascia/webpack-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bungambohlah%2Fdicoding-webpack-webcomponent-food","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bungambohlah%2Fdicoding-webpack-webcomponent-food/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bungambohlah%2Fdicoding-webpack-webcomponent-food/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bungambohlah%2Fdicoding-webpack-webcomponent-food/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bungambohlah","download_url":"https://codeload.github.com/bungambohlah/dicoding-webpack-webcomponent-food/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241572987,"owners_count":19984402,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","custom-elements-v1","customelements","html5","tailwindcss","web-components","webcomponent","webpack","webpack5"],"created_at":"2024-11-13T20:33:02.919Z","updated_at":"2025-10-03T15:22:43.503Z","avatar_url":"https://github.com/bungambohlah.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🍚🍰 Simple Food Recipes\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)\n\nSimple food recipes app that provide food recipes information from [TheMealDB](https://themealdb.com) using sensible webpack 5 boilerplate using Babel, PostCSS and Sass.\n\n## Table of Contents\n\n- [🍚🍰 Simple Food Recipes](#-simple-food-recipes)\n  - [Table of Contents](#table-of-contents)\n  - [Installation](#installation)\n  - [Usage](#usage)\n    - [Development server](#development-server)\n    - [Production build](#production-build)\n  - [Features](#features)\n  - [Dependencies](#dependencies)\n    - [webpack](#webpack)\n    - [Babel](#babel)\n    - [Loaders](#loaders)\n    - [Plugins](#plugins)\n    - [Linters](#linters)\n  - [Link](#link)\n  - [Author](#author)\n  - [License](#license)\n\n## Installation\n\nClone this repo and npm install.\n\n```bash\nnpm i\n```\n\n## Usage\n\n### Development server\n\n```bash\nnpm start\n```\n\nYou can view the development server at `localhost:3005`.\n\n### Production build\n\n```bash\nnpm run build\n```\n\n\u003e Note: Install [http-server](https://www.npmjs.com/package/http-server) globally to deploy a simple server.\n\n```bash\nnpm i -g http-server\n```\n\nYou can view the deploy by creating a server in `dist`.\n\n```bash\ncd dist \u0026\u0026 http-server\n```\n\n## Features\n\n- [webpack](https://webpack.js.org/)\n- [Babel](https://babeljs.io/)\n- [Sass](https://sass-lang.com/)\n- [PostCSS](https://postcss.org/)\n- [TheMealDB](https://themealdb.com/)\n\n## Dependencies\n\n### webpack\n\n- [`webpack`](https://github.com/webpack/webpack) - Module and asset bundler.\n- [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for webpack\n- [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for webpack\n- [`webpack-merge`](https://github.com/survivejs/webpack-merge) - Simplify development/production configuration\n- [`cross-env`](https://github.com/kentcdodds/cross-env) - Cross platform configuration\n\n### Babel\n\n- [`@babel/core`](https://www.npmjs.com/package/@babel/core) - Transpile ES6+ to backwards compatible JavaScript\n- [`@babel/plugin-proposal-class-properties`](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties) - Use properties directly on a class (an example Babel config)\n- [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) - Smart defaults for Babel\n\n### Loaders\n\n- [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files with Babel and webpack\n- [`sass-loader`](https://webpack.js.org/loaders/sass-loader/) - Load SCSS and compile to CSS\n  - [`sass`](https://www.npmjs.com/package/sass) - Node Sass\n- [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) - Process CSS with PostCSS\n  - [`postcss-preset-env`](https://www.npmjs.com/package/postcss-preset-env) - Sensible defaults for PostCSS\n- [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolve CSS imports\n- [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM\n\n### Plugins\n\n- [`clean-webpack-plugin`](https://github.com/johnagan/clean-webpack-plugin) - Remove/clean build folders\n- [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) - Copy files to build directory\n- [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) - Generate HTML files from template\n- [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin) - Extract CSS into separate files\n- [`css-minimizer-webpack-plugin`](https://webpack.js.org/plugins/css-minimizer-webpack-plugin/) - Optimize and minimize CSS assets\n- [`terser-webpack-plugin`](https://www.npmjs.com/package/terser-webpack-plugin) - Minify/minimize Javascript\n- [`imagemin-webpack-plugin`](https://www.npmjs.com/package/imagemin-webpack-plugin) - Compress/minimize all images (jp(e)g, png, gif, and svg) files\n- [`mangle-css-class-webpack-plugin`](https://www.npmjs.com/package/mangle-css-class-webpack-plugin) - Minimize and obfuscates the class name (include tailwindcss) in the production mode\n\n### Linters\n\n- [`eslint`](https://github.com/eslint/eslint) - Enforce styleguide across application\n- [`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier) - Implement prettier rules\n    - - [`prettier`](https://github.com/prettier/prettier) - Dependency for `prettier-webpack-plugin` plugin\n- [`eslint-import-resolver-webpack`](https://github.com/benmosher/eslint-plugin-import/tree/master/resolvers/webpack) - Throw exceptions for import/export in webpack\n\n## Link\n\nVisit at [foodrecipes.afif.dev](https://foodrecipes.afif.dev)\n\n## Author\n\n- [Afif Abdillah Jusuf](https://afif.dev)\n\nHello there 👋🏻, my name is Afif Abdillah Jusuf and I'm a Full-Stack Developer.\n\nI'm currently working as a Software Engineer.\n\nGraduated from Politeknik Elektronika Negeri Surabaya as Associate Degree in Informatics Engineering.\n\nNice to meet you.\n\nVisit my personal site at [afif.dev](https://afif.dev).\n\n## License\n\nThis project is open source and available under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbungambohlah%2Fdicoding-webpack-webcomponent-food","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbungambohlah%2Fdicoding-webpack-webcomponent-food","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbungambohlah%2Fdicoding-webpack-webcomponent-food/lists"}