Giter Club home page Giter Club logo

foodtopia-1's Introduction

Foodtopia Logo Image

Foodtopia

You can view the GitHub pages deployed application here.

Table of Contents

Description

Foodtopia is a recipe app, which assists users with advanced dietary needs. This app also provides an advanced mathematical calculator to present quantity of ingredients for catering services and to cater for larger parties.

A responsive dynamic app which will run in the browser. Foodtopia is easy to use application and user led database search engine for different types of recipes. The website requires direct input from the user, in order to display results relating to their specific search. The user is able to filter their search using dietary options, types of cuisines and intolerances.

User Story

AS a user I expect to FIND a main page with a navigation bar on the top containing the brand LOGO and links to navigate to other pages.

I would ALSO expect an easy to use search bar, with an advanced filter button. Diet,

WHEN i click on the advanced search button i EXPECT to find checkboxes to help filter my recipes.

as I SCROLL to the bottom of the index page, i WOULD like to have random recipes displayed for 'inspiration'. IF i click on this recipe, i EXPECT to be taken to this recipe.

When I SEARCH a recipe.

I should be REDIRECTED to the menus page, Where I expect to SEE recipe cards related to my search.

IF i missed the option to filter on the index, i WOULD like to have the option on the recipes incase i change my mind.

I WOULD like my first glance at the recipes to give me:

- a image of the dish
- the recipe title
- the time and the calories for

i WOULD also like the option to QUICK save the recipes without having to relocate to a different page, so i can ADD MULTIPLE recipes in one go.

When I CLICK on the 'LETS COOK' on card recipe

I EXPECT to be relocated to that specific recipe page

I WOULD like to see:

- the recipe name,
- the image of the recipe
- a box with the instructions for the recipe
- a box with the methods of how to cook the recipe
- a box with the wine pairing for the recipe
- to ability to see the time, portions, costs and popularity
- one option button (to add to Favorites)
- one option button (to view nutritional value)
- YouTube video links to see the recipe
- calculator to multiply the ingredients depending on servings

When I CLICK on the 'HEART' the recipe SHOULD be saved to 'my favourites'.


When I CLICK on My Favourites link

I EXPECT to be relocated to a page presenting all my SAVED recipe cards

Technologies Used

Languages

  • HTML5
  • CSS
  • JavaScript
  • JQuery

Frameworks used

  • Bulma CSS Framework
  • Font Awesome
  • Google Fonts CDN

APIs

  • Spoonacular API
  • Youtube API

API Documentation

Spoonacular and YouTube APIs

  • Spoonacular is one of the first food management system that combines dining out, eating store-bought food, and cooking at home to help you find and organize the restaurants, products, and recipes that fit your diet and can help you reach your nutrition goals.

  • YouTube Data API, you can add a variety of YouTube features to your application. Use the API to upload videos, manage playlists and subscriptions, update channel settings, and more.

Contributors

Improvements

  • Modal to confirm deletion
  • Ability to create a menu planner
  • Offer a feedback option
  • Present more information on cards
  • Save videos to local storage

Screenshots

Wireframes

INDEX PAGE Large and small screen Wireframe

Wireframe for index Wireframe for index

MENU PAGE Large and small screen Wireframe

Wireframe for index Wireframe for index

FAVOURITES PAGE Large and small screen Wireframe

Wireframe for index Wireframe for index

Large and small screen Wireframe

Wireframe for index Wireframe for index

Final Website

INDEX PAGE screenshot

Screen-shot of webpage

MENU PAGE screenshot

Screen-shot of webpage

FAVOURITES PAGE screenshot

Screen-shot of webpage

RECIPES screenshot

Screen-shot of webpage

References

Background Image by Samuel Berner

Flexbox positioning

Webm to Gif converter

Screencastify - screen recording

Mozilla.org

StackOverflow

Spoonacular

YouTube

foodtopia-1's People

Contributors

anabwarsame avatar fudge88 avatar lenny-g avatar lianavaleria15 avatar luizfroes avatar natasha-mann avatar nazehs avatar surajverma2587 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.