Repository files navigation

Arecipe search and management web application built whilefollowingJonas Schmedtmann's "The Complete JavaScriptCourse".This is my own implementation to practicemodern JavaScript(ES6+), MVC architecture, and production-ready build tools.

saadnadeem07-forkify-app-js-zero-to-hero/├── README.md├── index.html├── package.json├── .prettierrc├── public/│   ├── data.json│   ├── R1.json│   ├── R2.json│   └── R3.json└── src/    ├── js/    │   ├── config.js    │   ├── controller.js    │   ├── helper.js    │   ├── model.js    │   └── views/    │       ├── addRecipeView.js    │       ├── bookmarksView.js    │       ├── paginationView.js    │       ├── previewView.js    │       ├── recipieView.js    │       ├── resultView.js    │       ├── searchView.js    │       └── view.js    └── sass/        ├── _base.scss        ├── _components.scss        ├── _header.scss        ├── _preview.scss        ├── _recipe.scss        ├── _searchResults.scss        ├── _upload.scss        └── main.scss

• Recipe Search -- Query thousands of recipes via theForkifyAPI.
• Detailed Recipe View -- Ingredients, cooking time, and servingsize.
• Adjust Servings -- Automatically recalculate ingredientquantities.
• Bookmarks -- Save favorite recipes in local storage.
• Add Your Own Recipes -- Upload custom recipes that persistlocally.
• Responsive UI -- Built with Sass and modular JavaScript.
• MVC Architecture -- Clean separation of model, view, andcontroller.

• HTML5,Sass (SCSS) -- Provided by the course starter files\
• Vanilla JavaScript (ES6+) --All JavaScript functionalityimplemented entirely by me\
• Parcel as the development build tool and bundler

• Node.js v14+\
• npm (bundled with Node)

# 1. Clone the repositorygit clone https://github.com/<your-username>/saadnadeem07-forkify-app-js-zero-to-hero.gitcd saadnadeem07-forkify-app-js-zero-to-hero# 2. Install dependenciesnpm install# 3. Start the development servernpm start

The app will be available athttps://saad-forkify-app-js.netlify.app/.

You can deploy this project on any static hosting platform such asNetlify,Vercel, orGitHub Pages.
(Optional: Add your live link once deployed.)

• Original concept and design byJonasSchmedtmann
• HTML/CSS/Sass starter files provided as part of the course.
• All JavaScript code written by me to implement the fullfunctionality.

This project is foreducational purposes only.Feel free to fork and modify, but please credit the original author.

https://saad-forkify-app-js.netlify.app/