{"id":16380712,"url":"https://github.com/notslang/rokkin-recipes","last_synced_at":"2026-05-07T14:34:17.909Z","repository":{"id":148597658,"uuid":"133439555","full_name":"notslang/rokkin-recipes","owner":"notslang","description":"recipe book coding challenge for rokkincat","archived":false,"fork":false,"pushed_at":"2018-05-22T21:55:34.000Z","size":182,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-27T17:29:52.404Z","etag":null,"topics":["reactjs","recipes","single-page-app"],"latest_commit_sha":null,"homepage":"http://rokkin-recipes.netlify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/notslang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-15T01:02:08.000Z","updated_at":"2019-01-02T17:41:30.000Z","dependencies_parsed_at":"2023-05-20T16:14:04.223Z","dependency_job_id":null,"html_url":"https://github.com/notslang/rokkin-recipes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notslang%2Frokkin-recipes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notslang%2Frokkin-recipes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notslang%2Frokkin-recipes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/notslang%2Frokkin-recipes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/notslang","download_url":"https://codeload.github.com/notslang/rokkin-recipes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240035804,"owners_count":19737602,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["reactjs","recipes","single-page-app"],"created_at":"2024-10-11T03:52:13.482Z","updated_at":"2026-04-23T13:30:16.617Z","avatar_url":"https://github.com/notslang.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ![RokkinRecipes](https://raw.githubusercontent.com/slang800/rokkin-recipes/master/src/logo.png)\n\nA 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.\n\n## Design process\n\n### Data model\n\nI 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:\n\n```js\n{\n  // a unique id for the recipe, useful as a React key, doesn't change ever\n  id: \"abcd123\",\n\n  // human readable recipe name (title)\n  name: \"Recipe Name\",\n\n  // timestamp to keep track of when the recipe was added\n  timeAdded: 1500000000,\n\n  // like 1 paragraph that says what the recipe is in more detail\n  description: \"A long description for the recipe...\",\n\n  // how many servings the recipe makes\n  servings: 4,\n\n  // collection of ingredient objects\n  ingredients: [\n    {\n      // a unique id for the ingredient, also useful as a React key\n      id: \"4123abc\"\n\n      // human readable ingredient name\n      name: \"tomato, broccoli, something like that\",\n\n      // honestly, this could just be a part of the name\n      quantity: \"1 cup\"\n    },\n    {\n      // ... more ingredients ...\n    }\n  ],\n\n  // free form text describing how to prepare the recipe. this could have been\n  // an array of steps, but I've read enough cooking blogs to know that authors\n  // never stick to a nice rigid format when writing.\n  instructions: \"A few paragraphs about how to prepare the recipe...\"\n}\n```\n\nAnd then I worked on designing the UI that I wanted...\n\n### UI concept\n\n![UI whiteboard design](https://i.imgur.com/mIo2S6d.jpg)\n\nOn 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.\n\nThe 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.\n\nI 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.\n\nSo, 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.\n\n### Logo concept\n\nCredit to @sabrinastangler for help with the logo design.\n\n![logo design](https://i.imgur.com/vNkcD1y.jpg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotslang%2Frokkin-recipes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotslang%2Frokkin-recipes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotslang%2Frokkin-recipes/lists"}