Added Readme

README.md

@@ -1,48 +1,69 @@
-# Pick your own project
-
-Build an app of your choice.
-
-- You are free to use any technologies covered so far, but feel free to try new technologies you find interesting.
-- Keep it simple. Aim to get the basic functionality working on day one. You can then extend it on days two and three.
-- Feel free to use an external API to provide additional functionality to your app. Use an API that either does not have any authentication or uses API keys.
-- This is an opportunity to practice the parts you have challenging so far and improve your understanding of them.
-- Use pen and paper to draw a diagram of the webpage layout before starting to code. Have a think about what components you will need in advance.
-- Use prop-types and stateless components where appropriate.
-- Try to use Sass to create a separate stylesheet for each component.
-- Try to add some unit testing. Some parts will be easier to test than others, focus on those first.
-- Think about how to organise your data in advance
-- Make sure your app is responsive
-- Commit frequently
-- Create pull request at the end
-- Demos will be at 4pm on Friday
-- Keep it simple
-
-## Technical notes
-
-* Run `npm install` after cloning to download all dependencies
-* Use `npm run dev -- --watch` to build React
-* Use `npm test` or `npm test -- --watchAll` to run tests
-
-## README
-
-* Produce a README.md which explains
-  * what the project does
-  * what technologies it uses
-  * how to build it and run it
-  * any unresolved issues the user should be aware of
-
-## Inspiration
-
-- Take a look at [https://public-apis.jeremyfairbank.com/](https://public-apis.jeremyfairbank.com/) or [https://github.com/toddmotto/public-apis](https://github.com/toddmotto/public-apis) for possible APIs to use.
-
-## Default option
-
-If you are struggling to think of a project to build. Try to create a Top Trumps using the [Star Wars API](https://swapi.co/) which allows one user to play the game against the computer.
-
-- On load, fetch all vehicles from [https://swapi.co/api/vehicles/](https://swapi.co/api/vehicles/) end point.
-- Randomise the cards and deal half to player and half to computer.
-- Display top card to user
-- Allow user to pick an attribute from their card such as `cost_in_credits`, `length`, `max_atmosphering_speed`, `crew`, `passengers`, `cargo_capacity`.
-- If the value for chosen attribute is higher on the user's card than on computer's top card, they win the computer's card and it should be taken from computer's deck and added to the bottom of the user's deck. If the attribute is higher on the computer's top card, then user's card should be taken from the user's deck and added to the bottom of computer's deck.
-- Game continues until either user or computer has all the cards.
-- Implement some features of your choosing.
+# Fridge
+
+
+
+
+## About
+
+Project brief was to create our own project using the technologies learned so far. I have decided to make a web app utilising React and the Edamam API to create a recipe
+finder. You add items to your fridge/stock and are able to find recipes using these ingredients.
+
+# Hosted on surge
+
+http://fridge-fetch.surge.sh/
+
+Note: This app has been designed with mobile-use in mind. It is reccomended users use dev tools to simulate a mobile browser view.
+
+
+## Running from source
+
+* Clone this repository
+
+* Run `npm install` to install dependencies.
+
+* Run `npm run dev` to build with webpack
+
+* Access localhost:8080 to view
+
+Note: This app has been designed with mobile-use in mind. It is reccomended users use dev tools to simulate a mobile browser view.
+
+## Features
+
+* Ingredients in stock are stored in local storage.
+
+* Select any number of stocked ingredients and return recipes using those ingredients.
+
+* Recipe display looks at your entire stock (ingredients need not be selected) and tells you how many of the required ingredients you have. Clicking on this text reveals an easy to read display - ingredients not in stock are in red, in stock are in green.
+
+* Loading screen due to slow response from API
+
+* Favourites menu
+
+## Implementation
+
+* Written with React. I have made some components stateless, but this requires further work.
+* Some testing is in place using Enzyme.
+* All styles are written with .scss, utilising nesting and importing colour sheets
+
+## Known issues
+
+* If you have "chicken" in stock, ingredients such as "chicken soup" will be marked as in stock. This could be fixed with:
+  * Using some sort of conditional list, to specify if stock words are followed by another particular word then they are not relevant (i.e if "rice" followed by "wine")
+  * Using Edamam API's Ingredient/nutrition system. This requires further reading as to whether this would be suitable
+
+* RecipeIngredientDisplay does not have keys for individual ingredients
+
+* You can currently add anything to the fridge regardless of whether it is a known ingredient or not. My QA team (i.e. friends) have already informed me there are no recipes from the API that list "smegma" as an ingredient.
+
+* No desktop/tablet design
+
+
+## Future Plans
+
+* I would like to put some further work into the ingredient adding side of things, such that they could be added with measurements, and perhaps picked from a dropdown list to save generic ingredients such as "chicken" being added (i.e specify chicken breast/thigh).
+  * Similarly, a mass ingredient add tool would help save time if user had just completed a big shop
+
+
+* If measurement of ingredient was in place, I would like to implement a "cook" button that subtracted the amount of an ingredient specified by recipe from the user's stock list.
+
+* More information regarding nutritional and dietary considerations on each recipe, more information regarding cooking time and servings made (all in standard API response)

index.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
     <link rel="stylesheet" href="./style.css">
-    <title>YouJuke</title>
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
+    <link href="https://fonts.googleapis.com/css?family=Archivo+Black|Roboto+Condensed|Roboto+Light" rel="stylesheet">
+    <title>Fridge</title>
   </head>
   <body>
     <div className="container">

jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   "testURL": "http://localhost/",
   setupFiles: [
-    '<rootDir>/tests/setup.js'
+    '<rootDir>/tests/setup.js', "jest-localstorage-mock"
   ],
   "moduleNameMapper": {
     "^.+\\.(css|less|scss)$": "identity-obj-proxy"