A recipe website built for my girlfriend who loves cooking, using Sass, JavaScript, Parcel, and HTML

Related tags

React Forkify-App
Overview

Forkify-App

Live Link

Project Introduction

Forkify is a recipe web app using the Forkify API to allow users to search, view, modify, bookmark and add recipes.

Technologies used

  1. HTML5
  2. SCSS/CSS3
  3. JavaScript

External libraries and APIs:

Ways to reproduce

  • npm i
  • npm start
  • npm run build

Features

  • Query an ingredient to recieve a list of recipes containing that ingredient.

Fun-1

  • Change the servings size to alter the needed ingreident count proportionally.

fun-2

  • Easily bookmark or unbookmard the selected recipe.

fuc-3

  • Create your own recipes and store them as user recipes(use a special icon).

func-4

  • LocalStorage keeps the data when users exit the app.

fuc-5

Project Architecture

截屏2022-03-17 下午2.22.15

Built using the MVC Architecture. View class extends the rest of the components. Controller keeps bidirectional dataflow. Model makes http requests.

forkify-architecture-recipe-loading

forkify-flowchart-part-3

You might also like...

HTML CSS & React - Client side dynamic e-commerce website (stripe integrated)

HTML CSS & React - Client side dynamic e-commerce website (stripe integrated)

Furniture E-Commerce Project Description React front-end full operating dynamic and responsive E-Commerce shop including payment connection (stripe) B

Dec 27, 2022

A website built with React, Redux, and Tailwind for styling. The project is displaying a list of books, adding, and removing books.

A website built with React, Redux, and Tailwind for styling. The project is displaying a list of books, adding, and removing books.

Bookstore "Bookstore" is a website built with React, Redux, and Tailwind for styling. The project is displaying a list of books, adding, and removing

Dec 19, 2022

The Bookstore is a website similar to the "Awesome Books" website. Here we will create an MVP version of it that allows you to: Display a list of books, Add a book and Remove a selected book.

The Bookstore is a website similar to the

Book Store This is Book Store project. Built With HTML CSS JavaScript React Screenshot Live Demo Go Live 😎 Getting Started Open dev branch Open VSCod

May 3, 2022

Lucaslitton.me - Personal website built with ReactJS, Frontity, and WordPress.

lucaslitton This project was bootstrapped with Frontity. Table of Contents Launch a development server Create your custom theme Create a production-re

Jan 3, 2022

ReactJS-Travel-Website - This is a travel(adventure) website made with ReactJS.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 1, 2022

Juka Official Website built on top of Docusaurus/React Framework. Help us make it better!

Juka Programming Language Juka Programming Language website is built on top of Docusaurus 2. Feel free to contribute to our website! Any help is appre

Dec 24, 2022

Glam It Up website is built with real live data from the Make up API.

Glam It Up website is built with real live data from the Make up API.

Glam It Up website is built with real live data from the Make up API. The application displays a variety of beauty products such as lipsticks, bronzers, foundation among many other products. You can select any product type that is available and check it's description, price and name.

Jun 7, 2022

An eCommerce website that allows you to sign in and create an account and buy products and pay using PayPal and includes a dashboard that allows you to (add, update, and remove) a product...

An eCommerce website that allows you to sign in and create an account and buy products and pay using PayPal and includes a dashboard that allows you to (add, update, and remove) a product...

An eCommerce website that allows you to sign in and create an account and buy products and pay using PayPal and includes a dashboard that allows you to (add, update, and remove) a product...

Oct 1, 2022

React-app - Building volume rendering web app with VTK.js,react & HTML Using datasets provided in vtk examples (head for surface rendering and chest for ray casting)

SBE306 Assignment 4 (VTK) data : Directory containing Head and Ankle datasets Description A 3D medical viewer built with vtk-js Team Team Name : team-

Jul 19, 2022
Owner
JungFF
Full Stack Developer
JungFF
Recipe websites have too much clutter, this scrapes *just* the recipe

Only The Recipe Most recipes websites have videos and ads flying everywhere, on top of walls of text describing the recipe's backstory. This is an eas

JP Bulman 46 Dec 28, 2022
Parcel Next JS - A simple website with Authentication and basic API calls to a backend system.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Subham Roy 1 Jan 2, 2022
IngredientRecipeFinder - Web app built with react using Edamam API to find any recipe for an ingredient search with nutrition filters (high protein, low carb,etc)

Ingredient Recipe Finder Web app This web app built with the use of Edamam API allows you to find any type of recipe for a specific ingredient you are

null 1 Jan 4, 2022
Recipe providing mobile app, User selects ingredients in pantry and is then provided recipes for those ingredients. App contains a signup/login, meal planner and grocery list pages.

Recipog Student Information Name Connor de Bruyn Username Destiro Assignment SWEN325 A2 Description “Recipog” is a recipe providing app that allows th

Connor de Bruyn 1 Dec 26, 2021
Recipe Buddy is a tool that enables the easy adding of recipes to Grocy through web scraping.

Recipe Buddy The problem I am getting sick of manually importing recipes into Grocy. The solution Overcomplication, naturally. Recipe Buddy is a web a

George Gebbett 44 Dec 17, 2022
This is a custom recipe app called chefMaster. which contains a lot of interesting such as many apis requests, filter, search , add posts. Property design

In the project directory, you can run: npm start Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page

Andrew Smal 0 Nov 9, 2022
Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries.

Math Magicians Math Magicians is a website for performing basic maths calculations, This website is built using REACT and JavaScript libraries. Screen

Ranjeet Singh 12 Oct 20, 2022
Next.js + TypeScript + Material UI v5 + Sass + Storybook starter

nextjs-ts-mui5-scss-storybook-starter ?? Next.js + TypeScript + Material UI v5 + Sass + Storybook starter ?? with linting & prettier pre-configured Ma

Muhammad Ridho Anshory 13 Oct 19, 2022
The Bookstore is a website similar to the "Awesome Books" website built in the previous module. You will create an MVP version of it that allows you to: Display a list of books. Add a book. Remove a selected book.

Bookstore The Bookstore is a website similar to the "Awesome Books" website built in the previous module. You will create an MVP version of it that al

Anuar Shaidenov 6 Jun 12, 2022
Terminal Styled Portfolio Website ˋ( ° ▽、° ) , a terminal style/styled portfolio website made with <3 using react.

AshTerm A Terminal Styled Portfolio Website. ??‍?? Made Using- ⚛ Framework ReactJS ?? Terminal react-console-emulator ?? Deployed using CloudFlare Run

ashish 67 Nov 22, 2022