{"id":19222837,"url":"https://github.com/rendy752/meal-app","last_synced_at":"2026-04-29T16:01:40.158Z","repository":{"id":214023448,"uuid":"735352837","full_name":"Rendy752/Meal-App","owner":"Rendy752","description":"Meal themed website that utilizes public API","archived":false,"fork":false,"pushed_at":"2024-01-04T10:56:47.000Z","size":2690,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-04T20:46:14.531Z","etag":null,"topics":["ajax","eslint","materializecss","npm-package","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://rendyp-meal.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rendy752.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2023-12-24T15:49:43.000Z","updated_at":"2024-01-03T02:50:25.000Z","dependencies_parsed_at":"2025-01-04T20:45:41.472Z","dependency_job_id":"0d29f475-983d-4560-b628-60f5ff2773aa","html_url":"https://github.com/Rendy752/Meal-App","commit_stats":null,"previous_names":["rendy752/meal-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rendy752%2FMeal-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rendy752%2FMeal-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rendy752%2FMeal-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rendy752%2FMeal-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rendy752","download_url":"https://codeload.github.com/Rendy752/Meal-App/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240298400,"owners_count":19779281,"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":["ajax","eslint","materializecss","npm-package","vanilla-javascript"],"created_at":"2024-11-09T15:05:34.857Z","updated_at":"2026-04-29T16:01:40.141Z","avatar_url":"https://github.com/Rendy752.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MealApp\n\u003cp align=\"center\"\u003e\u003ca href=\"https://rendyp-meal.vercel.app\" target=\"_blank\"\u003e\u003cimg src=\"src/images/logo.png\" width=\"400\" alt=\"MealApp Logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n## Project Description\nMealApp is a web application built entirely with **vanilla JavaScript**, leveraging the [TheMealDB API](https://www.themealdb.com/api.php) to provide users with a rich experience of exploring meals from around the world. The app allows users to browse meals, filter them by categories or ingredients, view detailed recipes, and watch instructional videos. It features a responsive design, modern UI with Materialize CSS, and a modular architecture using Web Components.\n\nThe project is designed to be lightweight, performant, and developer-friendly, with a focus on clean code and modern JavaScript practices. It uses Webpack for bundling, Babel for transpilation, and ESLint for code quality assurance.\n\n## Features\n- **Meal Exploration**: Browse a variety of meals with a random meal display on the homepage.\n- **Search Functionality**: Search for meals by keyword using a sleek search bar.\n- **Category Filtering**: Explore meals categorized by cuisine types (e.g., Italian, Mexican).\n- **Ingredient-Based Search**: View meals based on specific ingredients.\n- **Detailed Meal View**: Access detailed meal information, including ingredients, instructions, and embedded YouTube videos.\n- **Responsive Design**: Fully responsive UI, optimized for mobile, tablet, and desktop devices using Materialize CSS.\n- **Interactive UI**: Features collapsible lists, modals, sliders, and tooltips for an engaging user experience.\n- **Loading \u0026 Error Handling**: Displays loading animations and user-friendly error messages during API calls.\n\n## Screenshot\n![collage_3_4](https://github.com/user-attachments/assets/d544c2c6-0707-41c4-90aa-bd7140262c70)\n*Caption: The MealApp overall screen*\n\n## Tech Stack\n- **Frontend**: Vanilla JavaScript, Web Components\n- **Styling**: Materialize CSS, Material Icons\n- **Build Tools**: Webpack, Babel, Terser (for minification)\n- **Linting**: ESLint\n- **API**: TheMealDB API\n- **Dependencies**:\n  - `materialize-css`: For responsive UI components\n  - `material-icons`: For iconography\n  - Webpack plugins: `html-webpack-plugin`, `clean-webpack-plugin`, `terser-webpack-plugin`\n  - Loaders: `css-loader`, `style-loader`, `file-loader`, `babel-loader`\n\n## Project Structure\n```\nmealapp/\n├── dist/                    # Output directory for bundled files\n├── src/                     # Source code\n│   ├── images/              # Static assets (e.g., logo.png, screenshot.png)\n│   │   └── logo.png         # Application logo\n│   ├── script/              # Main JavaScript logic\n│   │   └── component/       # Web Components (nav-bar, meal-list, etc.)\n│   │   └── data/            # API data fetching logic\n│   │   └── view/            # View logic (e.g., main.js)\n│   ├── style/               # CSS styles\n│   │   └── style.css        # Main stylesheet\n│   └── index.html           # Entry HTML file\n├── .eslintrc.json           # ESLint configuration\n├── .gitignore               # Git ignore file\n├── .gitattributes           # Git attributes file\n├── package.json             # Project metadata and scripts\n├── package-lock.json        # Lock file for dependencies\n└── README.md                # Project documentation\n```\n\n## Installation\nTo set up the project locally, follow these steps:\n\n1. **Clone the Repository**:\n   ```bash\n   git clone https://github.com/your-username/mealapp.git\n   cd mealapp\n   ```\n\n2. **Install Dependencies**:\n   Ensure you have [Node.js](https://nodejs.org/) installed, then run:\n   ```bash\n   npm install\n   ```\n\n3. **Run Development Server**:\n   Start the development server with hot reloading:\n   ```bash\n   npm run start-dev\n   ```\n   Open `http://localhost:8080` in your browser.\n\n4. **Build for Production**:\n   Generate an optimized production build:\n   ```bash\n   npm run build\n   ```\n   The output will be in the `dist/` directory.\n\n## Usage\n- **Home Page**: Displays a random meal on load. Use the search bar to find specific meals by name.\n- **Navigation**: Use the top navbar or floating action button to switch between *Meals*, *Categories*, and *Ingredients* sections.\n- **Meal Details**: Click on a meal to view its details in a modal, including ingredients, instructions, and a YouTube video (if available).\n- **Categories**: Browse meals by category, with collapsible sections showing category descriptions and related meals.\n- **Ingredients**: Explore ingredients and view meals that use them (note: Ingredients section is under maintenance).\n\n## Development\n- **Adding New Features**: Create new Web Components in the `src/script/component/` directory and import them in `src/script/view/main.js` or relevant files.\n- **API Integration**: Extend `MealData`, `CategoriesData`, or `IngredientsData` in `src/script/data/` for additional API endpoints.\n- **Styling**: Update `src/style/style.css` for custom styles, ensuring compatibility with Materialize CSS.\n- **Linting**: Run `npm run lint` to check code quality with ESLint.\n\n## Contributing\nContributions are welcome! Please follow these steps:\n1. Fork the repository.\n2. Create a new branch (`git checkout -b feature/your-feature`).\n3. Make your changes and commit (`git commit -m 'Add your feature'`).\n4. Push to the branch (`git push origin feature/your-feature`).\n5. Open a Pull Request.\n\n## License\nThis project is licensed under the [ISC License](LICENSE).\n\n## Author\n**Rendy Pratama**\n\n## Acknowledgments\n- [TheMealDB](https://www.themealdb.com/) for providing the free meal API.\n- [Materialize CSS](https://materializecss.com/) for the responsive UI framework.\n- [Webpack](https://webpack.js.org/) for bundling and build optimization.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frendy752%2Fmeal-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frendy752%2Fmeal-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frendy752%2Fmeal-app/lists"}