https://github.com/simandrew/forkify-app-js

Forkify App JavaScript
https://github.com/simandrew/forkify-app-js

Last synced: 10 months ago
JSON representation

Forkify App JavaScript

• Host: GitHub
• URL: https://github.com/simandrew/forkify-app-js
• Owner: SimAndrew
• License: mit
• Created: 2023-09-25T16:04:47.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-03T11:06:52.000Z (about 2 years ago)
• Last Synced: 2025-01-12T11:32:17.413Z (12 months ago)
• Language: JavaScript
• Homepage: https://forkify-application-js.netlify.app/
• Size: 260 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## Forkify application

---

### About:

Forkify Recipe Application is a recipe web application using the Forkify API to allow user to: search, view, modify,

bookmark and add recipes.

### Features:

* Search an ingredient to recieve a list of recipes containing that ingredient.

* Change serving size and amount of ingredients.

* Bookmark or unbookmark the selected recipe and store with LocalStorage.

* Create your own recipe and store it as user recipe, automatically bookmarks it.

* LocalStorage keeps the data when users exit the app.

You can try here: [forkify-application-js.netlify.app/](https://forkify-application-js.netlify.app/)

---

### Sample task, photo:

Search recipes

![Forkify1](https://github.com/SimAndrew/forkify-app-js/assets/44125451/24d807df-58b4-42e3-bee4-5245f355eaca)

Add recipe

![Forkify2](https://github.com/SimAndrew/forkify-app-js/assets/44125451/1fb7a7ec-c767-4b0e-aff9-847d81b8add9)

Project built using the Model-View-Controller (MVC) Architecture:

![model-view-controller](https://github.com/SimAndrew/forkify-app-js/assets/44125451/d37b8dae-1bc9-4fa4-8448-48147f682c90)

![forkify-flowchart-part-3](https://github.com/SimAndrew/forkify-app-js/assets/44125451/854178f4-6d5c-4e53-89d0-1b0dbe56619a)

Recipe loading Architecture:

![forkify-architecture-recipe-loading](https://github.com/SimAndrew/forkify-app-js/assets/44125451/0b946950-3ef6-4449-b958-69cb7380032a)

---

### Technologies:

* HTML

* CSS, SASS

* JavaScript

* Parcel js, Babel

* Forkify API

  [forkify-api](https://forkify-api.herokuapp.com/v2)

* Hosted on Netlify

---

### Run the app

* Clone a project:

```

https://github.com/SimAndrew/forkify-app-js.git

```

* Open project code in your editor.

* Install the dependencies:

```

npm install

```

* Run the project, enter into the terminal

```

npm run start

```

* Build the project, enter into the terminal

```

npm run build

```