Nuskha

View Demo · · Report Bug

Table of Contents

1. About The Project
   • Features
   • Built With
   • Flowchart
   • Architecture
2. Getting Started
   • Installation
   • Tree Structure
3. Contributing
4. Acknowledgments

About The Project

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

• Available search queries : Queries

Features

User Stories	Features
Search for recipes	functionality: input field to send request to API with searched keywords Display results with pagination Display recipe with cooking time, serving and ingredients
Update the number of servings	Change serving functionality: update all ingredients according ro current number of servings
Bookmark recipes	Bookmarking functionality: display list of all bookmarked recipes
Create recipes	Users can upload their own recipes User recipes will automatically be bookmarked User can only see their own recipes, not recipes from other users
Access to bookmarks and recipes when leaving the app and coming back later	Store bookmark data in the browser using "local storage"

(back to top)

---

Built With

• HTML
• CSS
• SASS
• JavaScript
• Parcel
• Babel
• Forkify API
• Libraries
  • fractional

---

Flowchart

Architecture

(back to top)

---

Getting Started

This project require some prequesites and dependenscies to be installed, you can view it online using this demo. or you can find the instructions below

To get a local copy, follow these simple steps :

Installation

1. Clone the repo

   git clone https://github.com/sarfarazstark/nuskha.git

2. Go to project folder

cd nuskha

3. install dependencies

npm install

4. Run start script

npm start

Tree structure

nuskha
│   .gitignore
│   .prettierrc
│   index.html
│   package-lock.json
│   package.json
│   README.md
│
└───src
    ├───img
    │       favicon.png
    │       nuskha-architecture.png
    │       nuskha-flowchart.png
    │       icons.svg
    │       logo.png
    │       preview.png
    │
    ├───js
    │   │   config.js
    │   │   controller.js
    │   │   helpers.js
    │   │   model.js
    │   │
    │   └───views
    │           addRecipeView.js
    │           bookmarksView.js
    │           paginationView.js
    │           previewView.js
    │           recipeView.js
    │           resultsView.js
    │           searchResultView.js
    │           view.js
    │
    └───sass
            main.scss
            _base.scss
            _components.scss
            _header.scss
            _preview.scss
            _recipe.scss
            _searchResults.scss
            _upload.scss

(back to top)

Acknowledgments

• Jonas schmedtmann