Code Monkey home page Code Monkey logo

recipe-keeper's Introduction

recipe-keeper

Create an online recipe keeper.

https://media.giphy.com/media/DZQuf6L7aNsaI/giphy.gif

This will be an express CRUD app.

Users will be able to:

  • Add a new recipe.

  • See all the recipes that exist.

  • Edit recipes that currently exist.

  • Delete recipes.

A single page should have at least 3 pieces of information:

  1. Title
  2. Ingredients
  3. Instructions
Recipe Title: Boiled Chicken

Ingredients:
  1 chicken
  10 ml water
  
Instructions:
  Place chicken in water with salt. Simmer for 20 minutes.

Technical Requirements:

  • Use express to handle the incoming HTTP requests.

  • Use React.js to render HTML after a request.

  • Use jsonfile to store your data on the hard disk.

  • Use RESTful route structure for the recipes

URL HTTP Verb Action Purpose
/recipes/ GET index See all the recipes
/recipes/new GET new Display the form for a single recipe
/recipes POST create Create a new recipe
/recipes/:id GET show See a single recipe
/recipes/:id/edit GET edit Display the form for editing a single recipe
/recipes/:id PATCH/PUT update Update a recipe
/recipes/:id DELETE destroy Remove a recipe

How to get started

Begin building your app with the json file. The starter code inside of data.json should look something like this:

{
  "recipes":[]
}

Begin with building the ability to render the form to create a recipe.

Then build the route that accepts the POST request that form creates.

Then build the page that will display a single recipe.

Then build the form for editing a recipe.

Then build the route that accepts the PUT request to update a recipe.

Next is DELETE

That's it!


Don't forget to npm init.

Here is a minimal list of the things you will need to install in your app:

express
jsonfile
method-override
express-react-views
react
react-dom

Here's all of the basic bolierplate setup you'll need to do for your app at the top of index.js:

const jsonfile = require('jsonfile');

const file = 'data.json';

const express = require('express');

const app = express();

app.use(express.static(__dirname+'/public/'));

app.use(express.json());

app.use(express.urlencoded({
  extended: true
}));

const methodOverride = require('method-override')

app.use(methodOverride('_method'));

const reactEngine = require('express-react-views').createEngine();

app.engine('jsx', reactEngine);

app.set('views', __dirname + '/views');

app.set('view engine', 'jsx');

Hint It's implied that the ID mentioned in the RESTful routes is the index of the recipe array.

This is the simplest way to code the app. If you code the array index to stand in for the ID, don't put the ID in the recipe object as well, or let the user enter the ID as an input in the form.

The recipe object should look something like this:

{
  "title": "boiled duck",
  "ingredients" : "1 duck, water",
  "instructions": "boil duck in water for 20 minutes. take it out. serve."
}

Note: you don't have to work on the furthers in the order listed.

Further

Add a way for users to navigate around the site without typing the explicit routes in the browser URL bar.

Further

CSS Part 1:

Add some CSS. Use margin and padding, set basic spacing for all parts of your app. Add some basic colors or styles. (don't try to add bootstrap or any react CSS as an NPM library- just include the link tag line in the HTML, and a static style css file in the public directory)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Further

CSS Part 2:

Add some layout styles. Add a kind of column layout to each page. You can use bootstrap.

Further

CSS Part 2.5:

Make your layout styles mobile-first and responsive.

Further

CSS Part 3:

Add more layout. Add a header/navbar and footer to every page.

Add special layout and CSS to the landing page /

Further

Add more data to your recipie: add the date when it was created.

Further

Validate the user's input. Create limits for how long or short any field should be.

Further

Create a system where the app actually tracks a kind of ID. This ID is unique to each recipe. The easiest implementation of this is simply a system that increments from the highest number. If a recipe is removed then the app ignores that ID.

Further

Sort the recipes on the index page. You can choose what dimension to sort them by.

Further

Add a more complex system of ingredients. For each recipe the ingredients are a variable number of ingredient records. To keep this simple you can start with 1-6 ingredients.

An ingredient record would look like this:

(extracted from the recipe object it is inside)

"ingredients" :[
  { 
    "name" : "chicken",
    "amount" : "1",
    "notes" : "de-boned"
  },
  { 
    "name" : "water",
    "amount" : "1ml",
    "notes" : "isotonic"
  }
]

Further

Add a route /ingredients that lists every ingredient used by every recipe. Each one should be a link to the recipe that uses it.

Further

Format the list of ingredients to list the recipes that use that ingredient underneath it.

# Chicken
  - chicken rice
  - chicken and orzo
  - chicken bee hoon
  - mc spicy

Further

Create a system that restricts the user from which ingredients they can use when creating a recipe. Incorporate ingredient json data into the data.json that you already have:

{
  "ingredients" : [...],
  "recipes":[]
}

When creating a new recipe, let the user pick from those ingredients.

recipe-keeper's People

Contributors

awongh avatar emijay avatar lamesensei avatar

Watchers

 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.