Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/notslang/rokkin-recipes
recipe book coding challenge for rokkincat
https://github.com/notslang/rokkin-recipes
reactjs recipes single-page-app
Last synced: 26 days ago
JSON representation
recipe book coding challenge for rokkincat
- Host: GitHub
- URL: https://github.com/notslang/rokkin-recipes
- Owner: notslang
- License: gpl-3.0
- Created: 2018-05-15T01:02:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-05-22T21:55:34.000Z (over 6 years ago)
- Last Synced: 2024-12-27T17:29:52.404Z (about 1 month ago)
- Topics: reactjs, recipes, single-page-app
- Language: JavaScript
- Homepage: http://rokkin-recipes.netlify.com
- Size: 178 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 
A recipe book themed coding challenge for RokkinCat's internship interview. This is built with React.js and Webpack. Also, I decided to try out react-router for handling the history API.
## Design process
### Data model
I started out with designing the data model for an individual recipe, based on the requirements from the coding challenge. That data model looks something like this:
```js
{
// a unique id for the recipe, useful as a React key, doesn't change ever
id: "abcd123",
// human readable recipe name (title)
name: "Recipe Name",
// timestamp to keep track of when the recipe was added
timeAdded: 1500000000,
// like 1 paragraph that says what the recipe is in more detail
description: "A long description for the recipe...",
// how many servings the recipe makes
servings: 4,
// collection of ingredient objects
ingredients: [
{
// a unique id for the ingredient, also useful as a React key
id: "4123abc"
// human readable ingredient name
name: "tomato, broccoli, something like that",
// honestly, this could just be a part of the name
quantity: "1 cup"
},
{
// ... more ingredients ...
}
],
// free form text describing how to prepare the recipe. this could have been
// an array of steps, but I've read enough cooking blogs to know that authors
// never stick to a nice rigid format when writing.
instructions: "A few paragraphs about how to prepare the recipe..."
}
```
And then I worked on designing the UI that I wanted...
### UI concept
On a mobile version of this, the left-side panel (which holds the list of recipes) would disappear behind a hamburger menu to give more horizontal screen space. However, I'm pressed for time, so mobile isn't a priority.
The edit mode should look about the same as the regular recipe viewer, so it's easy to tell what changes map to, between the modes.
I could just make the editing mode and the viewing mode into the same thing and remove the need for a button to switch between the two. However, in a real recipe book you'd be viewing recipes at least 90% of the time, and in that case having editor controls around would be annoying.
So, I think it makes sense to hide the editor behind a button. Except in the case where you've just pressed the "new recipe" button - that should bring up an editor right away because the user intention is clear.
### Logo concept
Credit to @sabrinastangler for help with the logo design.
