legendvi / forkify

A recipe app with Vanila Javasript

Forkify

To Visit App: https://forkifyvicky.netlify.app/

Table of contents

• Title
• Table of contents
• Description
• Project assmed requirements
• Installation and Setup Instructions
• Reflection

Description:

This is a Recipe finder App which gives you a recipe for the food item searched

• This App is made using vanila , SCSS and
• This app is a frontend Application with two APIs.
• A GET api integration to get a list of dishes and recipe that matches the serach term
• A POST api to add new recipe
• The Recipe can be bookmarked and bookmarked recipe are shown even after refresh of browser window using Local Storage
• This app is bundled using parcel and deployed in Netlify

Project Assumed Requirements:

1. It should be a functional App with only single page
   • This was a little tricky as the app has to three features Get a list of recipes,add a new recipe,bookmark a recipe, and view a single recipe
   • It is designed to have a header where user can search, and the page is divided in two flex, one showing the list and other showing the details once a item is selected
   • To create a recipe and bookmark a recipe Modal is used
2. The Bookmarks should be preserved in case browser reloads
   • This is achived by storing all bookmarked recipes IDs in Local Storage
3. It should be accessable in all browsers and should be production ready
   • This is achived using parcel as a bundler to covert ES6 code and generate a optimized build which is deployed in Netlify a static website hosting platform

Project Screen Shot(s):

Intial Page:

Serach Reesults:

View Recipe:

Bookmarks:

Add Recipe:

Installation and Setup Instructions:

Clone down this repository. You will npm installed globally on your machine.

Installation:

npm install

To Start Server:

open index.html in browser

Reflection:

I started this project as I started learing React in Cognizant because I wanted to better learn how Vanila Javasript with html and CSS preprocessors

It was a two week long project, I particulary hit a block when the list of items required pagination to display, it was little tricky using only CSS, and JS

Forkify helped me learn how to build a functiona web application using simple html, CSS, and Javascript and to understand how javscript works which is the the language most web frameworks like React, Angular, Vue are build upon