Skip to content
React/Rails: Finds recipes based on the ingredients you have in your fridge, and creates a shopping list for what you need.
JavaScript Ruby CSS HTML CoffeeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
bin
client
config
db
lib
log
public
test
vendor/assets
.DS_Store
.env.example
.gitignore
Gemfile
Gemfile.lock
Procfile
Project_api_notes.md
Project_planning.md
README.md
Rakefile
config.ru

README.md

Clean Spoon

Have you ever thrown out groceries because you didn't know what to make?

Clean Spoon lets you track what's in your fridge, find thousands of recipes based on the food you have, and add ingredients you need to your shopping list.

You can also reference the recipes you like with our saved recipes feature, or send your shopping list to your phone via SMS.

Contributors

This was a group project for the Lighthouse Labs web development full-time bootcamp. Contributions by Rachel Gould, Patrick O'Connor, and Tristan Berezowski.

Development

Our basic tech stack is Ruby on Rails on the back-end, and React on the front-end. It uses external APIs from Qwant (for supplying ingredient images), Twilio (for SMS notification with shopping list), and Yummly (for searching and retrieving recipes).

Demos

Homepage

Fridge

Adding items to your fridge

Recipes

Searching for recipes

Shopping List

Adding recipe items to your shopping list

Setup

  1. Fork and Clone
  2. Follow below instructions to install dependencies.

In the command line:

bundle
cd client
npm i
cd ..
  1. Create config/database.yml by copying config/database.example.yml
  2. Create config/secrets.yml by copying config/secrets.example.yml
  3. Create .env by copying .env.example
  4. Run bin/rake db:reset to create, load and seed db
  5. Start with rake start

Overview

create-react-app configures a Webpack development server to run on localhost:3000. This development server will bundle all static assets located under client/src/. All requests to localhost:3000 will serve client/index.html which will include Webpack's bundle.js.

In this example, the React component App makes a request to an API server (server.js). The user's browser visits the Webpack dev server at localhost:3000. Then the React client communicates with the API server when needed at localhost:3001:

This setup uses foreman for process management. Executing foreman start instructs Foreman to boot both the Webpack dev server and the API server.

Dependencies

Back End:

* Rails
* jbuilder
* sdoc
* foreman
* postgres
* twilio-ruby
* rest-client
* dotenv-rails
* combination_generator
* combinatorics

Front End:

* axios
* babel
* bootstrap
* http-proxy-middleware
* react
* react-bootstrap-table
* react-cookie
* react-datepicker
* react-dom
* react-router-dom
* reactstrap

Acknowledgements

Initial scaffold based on create react app with rails API tutorial by Anthony Accomazzo.

You can’t perform that action at this time.